[iOSアプリ開発][Xcode 8] Segmented Control を実装する
切り替えボタンである Segmented Control を使い、押したボタンに応じてラベルを切り替えるような機能を実装する方法。
具体的には Segmented Control に 1 2 3 … 10 とボタンを用意し、３を押したらラベルが３に、７を押したらラベルが７になるようにしたい。
（１）プロジェクトを作成する。
（２）Project navigator で main.storyboard を選ぶ。Object library から Segmented Control を配置したい画面にドラッグアンドドロップする。
（３）２の Segmented Control が選択された状態で、Attributes inspector > Segments を 10 にする。ボタンの数が 10 になった。
（４）同じくAttributes inspector の Segment をそれぞれ選択し、Title にボタンに表示したいテキストを入力する（Segmentは１ではなく、０ から始まる）。
（５）Object library から Label を、配置したい画面にドラッグアンドドロップする。
（６）右上の円が二つ重なった Show the Assistant editor アイコンをクリック。
（７）２の Segment Control を右側のエディタに右クリックでドラッグアンドドロップ。以下のように設定、Connect をクリック。
Connection：Outlet
Name：SegmentedControl
Type：UILabel
Storage：Weak
（８）５の Label を右側のエディタに右クリックでドラッグアンドドロップ。以下のように設定、Connect をクリック。
Connection：Outlet
Name：Label
Type：UILabel
Storage：Weak
（９）２の Segment Control を再び右側のエディタに右クリックでドラッグアンドドロップ。以下のように設定、Connect をクリック。
Connection：Action
Name：ChangeLabel
Type：AnyObject
Event：Value Changed
Arguments：Sender
（10）右上の Show the Standard editor アイコンをクリック、Project navigator で ViewController.swift をクリック。エディタだけが表示される。
（11）９に以下のコードを書く。
@IBAction func ChangeLabel1(_ sender: AnyObject) {
if sender.selectedSegmentIndex == 0 {
Label.text = "1"
}
if sender.selectedSegmentIndex == 1 {
Label.text = "2"
}
if sender.selectedSegmentIndex == 2 {
Label.text = "3"
}
if sender.selectedSegmentIndex == 3 {
Label.text = "4"
}
if sender.selectedSegmentIndex == 4 {
Label.text = "5"
}
if sender.selectedSegmentIndex == 5 {
Label.text = "6"
}
if sender.selectedSegmentIndex == 6 {
Label.text = "7"
}
if sender.selectedSegmentIndex == 7 {
Label.text = "8"
}
if sender.selectedSegmentIndex == 8 {
Label.text = "9"
}
if sender.selectedSegmentIndex == 9 {
Label.text = "10"
}
}
これで完成！
なお、Segmented Control を選択した上で、Attributes inspector の Segmented Control > State > Momentary にチェックを入れると、Segmented Control で押したボタンがハイライトされたままにならない。
参考：
How to Add a Segmented Controller with Swift in Xcode – YouTube
https://www.youtube.com/watch?v=FClWQCeWU-8
【Swift】Segmented Controlの使い方。選択肢の中からどれか1つを選択するボタン。 | はじはじアプリ体験記
http://hajihaji-lemon.com/smartphone/swift/segmented-control/
Recent Posts
Archives