完成形はこちら
機能説明
- Buttonを押すと、
UISegmentedControlのSegmentが増えます。
コードと簡単説明
- 最初に表示するUISegmentedControlを作成
-
.insertSegment(withTitle: String, at: Int, animated: Bool)でSegmentを追加していきます
SegmentControl
import Foundation
import UIKit
class SegmentControl{
var uiSegmentControl = UISegmentedControl() //インスタンス作成
var segmentContentsArray = ["0","1","2"] //最初に表示するSegment
}
extension SegmentControl{
func createSegmentControl(targetView:UIView){
for count in 0...segmentContentsArray.count - 1{
uiSegmentControl.insertSegment(withTitle: segmentContentsArray[count], at: count, animated: true) // Segmentを追加する
}
uiSegmentControl.frame = CGRect(x: targetView.bounds.minX, y: targetView.bounds.minY + 100, width: targetView.frame.size.width / CGFloat(segmentContentsArray.count), height: targetView.frame.size.height / 20)
uiSegmentControl.backgroundColor = UIColor.white
uiSegmentControl.selectedSegmentTintColor = UIColor.gray //選択中のSegmentの色を変えています
targetView.addSubview(uiSegmentControl)
}
}
-
segmentControl.createSegmentControl(targetView: self.view)でUISegmentedControlを表示します -
.allSatisfy({Int($0)! < segmentCount})はBool値を返すので、今回はsegmentControl.segmentContentsArrayの値が全てsegmentCount未満ならば、同じ値が存在しないという事になるので新しいSegmentを追加します。 -
Segmentを増やす度に、
segmentControl.uiSegmentControl.frame.widthも増やさないとSegmentが細かくなっていきます。
ViewController
import UIKit
class ViewController: UIViewController {
let segmentControl = SegmentControl()
var segmentCount = 0
override func viewDidLoad() {
super.viewDidLoad()
}
override func viewWillAppear(_ animated: Bool) {
super.viewWillAppear(animated)
segmentControl.createSegmentControl(targetView: self.view)
}
@IBAction func plusSegmentControl(_ sender: Any) {
segmentCount += 1
if segmentControl.segmentContentsArray.allSatisfy({Int($0)! < segmentCount}) == true{ //segmentContentsArrayの全ての値がsegmentCountの値未満なら
segmentControl.segmentContentsArray.append(String(segmentCount))
segmentControl.uiSegmentControl.insertSegment(withTitle: String(segmentCount), at: segmentCount , animated: true)
segmentControl.uiSegmentControl.frame = CGRect(x: segmentControl.uiSegmentControl.bounds.minX, y: segmentControl.uiSegmentControl.bounds.minY + 100, width: segmentControl.uiSegmentControl.frame.width + 35, height: segmentControl.uiSegmentControl.frame.size.height)
print(segmentControl.segmentContentsArray)
}else{
print(segmentControl.segmentContentsArray)
}
}
}
ボタンを押した時の、segmentContentsArrayの増え方
print結果
["0", "1", "2"] //1回目の処理は、segmentCount=1で、すでにsegmentContentsArrayに存在するのでSegmentが追加されません
["0", "1", "2"] //2回目の処理は、segmentCount=2で、すでにsegmentContentsArrayに存在するのでSegmentが追加されません
["0", "1", "2", "3"] //３回目以降は、segmentContentsArrayに存在しない値なのでSegmentが追加されます。
["0", "1", "2", "3", "4"]
["0", "1", "2", "3", "4", "5"]
["0", "1", "2", "3", "4", "5", "6"]
["0", "1", "2", "3", "4", "5", "6", "7"]
["0", "1", "2", "3", "4", "5", "6", "7", "8"]
["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]
終わり
UISegmentedControlのSegmentのTitleが被らないようにしたいと思い考えてみました。
ご指摘、ご質問などありましたら、コメントまでお願い致します。