ストーリーボードでSegmentedControlを実装する
セグメンテッドコントロールを実装する
セグメンテッドコントロール(SegmentedControl)は選択肢を選ぶための横並びのボタン群を作るユーザーインターフェースのパーツになります。情報を入力する画面で、例えば「男性」「女性」を選ぶなど、◯択での質問などに便利なパーツです。 トリガーとしての役割というより、オプション選択という役割が多いパーツだと個人的には思います。
ストーリーボードでのSegmentedControlの実装はとても簡単で選択肢の設定もインスペクタ内で行えます。
セグメントの数とタイトルを設定する
まずは、ストーリーボードを開き、セグメンテッドコントロールを画面内に配置します。 ここではプロジェクトを新規作成した状態のViewControllerに配置をしていくサンプルになります。 他の画面でも同じように配置はできますので、応用してみてください。
UIKitのパーツ一覧より、SegmentedControlを選択してストーリーボードの画面に配置します。 以下の画像のような手順でSegmentedControlをドラッグ&ドロップで設置しましょう。
初期状態では、最低限2つの選択肢が入っている状態になります。
選択肢を2つではなく、複数設定する場合には、右側のインスペクタにあるセグメントの数の設定と、その内容の設定をします。
2つの選択肢を、
4つの選択肢にすることができたりします。
- Segmentsの数を増やしたい選択肢分だけ2→4など増やす
- Segmentのセレクトボックスを切り替えて、それぞれのセグメントのタイトルを設定
- もちろん画像も設定できます。システムアイコン(最初から標準で準備されているシステムで使用するアイコンなど)にすることもできます。
文字列だけでなく、絵で表せるのでUIを少しおしゃれにできますね。
このような形でストーリーボードでのセグメンテッドコントロールの配置は完了です。
セグメンテッドコントロールをコードで使えるように関連付ける
次は、配置したセグメンテッドコントロールをコード内で使えるようにしたいので、ストーリーボードとViewController.swiftのソースコードと関連付けたいと思います。
ストーリーボードの横にコードを表示させます。 以下のように「Assistant」をクリックしてViewController.swiftのコードを表示させます。
次に、セグメンテッドコントロールをコード内で変数として扱えるようにしたいので、 セグメンテッドコントロールを選択してcontrolを押しながらコード側(ViewControllerのクラス直下に)にドラッグ&ドロップします。 間違ってメソッド内にドラッグ&ドロップしないようにしましょう。
Nameに「segmentedControl」と入力し「Connect」をクリックします。
セグメント切替を検知するためにソースコードと関連付ける
次に、セグメンテッドコントロールの選択がされたことを検知して動くメソッドを実装します。 セグメンテッドコントロールのクリックが行われると、「Value Change」すなわち、選択している値が変化したことを検知してメソッドを実行してくれます。ボタンでは「touch up inside」(ボタンが押されて指が離れた時)検知をしましたが、Segmented ControlではValueChangedを使うことで正常に動作します。
ストーリーボードのセグメンテッドコントロールを右クリックして、Value Changedをコード側にドラッグ&ドロップしましょう。
Nameには「segmentedSelect」と入力し、「Connect」をクリックします。
これでストーリーボードとコードとの関連付けは完了です。
セグメント切替検知のコードを記述する
続いては、セグメンテッドコントロールの値が変わったことを検知して、デバッグプリントを出力するようにViewController.swift内を編集しましょう。先程「segmentedSelect」というセグメントの切替を検知するメソッドを作成しましたので、以下のように編集します。
テキストのコードを以下となります。コピペしてもOKです。
@IBAction func segmentedSelect(_ sender: Any) {
let index = segmentedControl.selectedSegmentIndex
switch index {
case 0:
print("First")
break
case 1:
print("Second")
break
case 2:
print("Third")
break
case 3:
print("Fourth")
break
default:
break
}
}
アプリを実行する
ここまでできたらXcodeの「▷」を押してアプリを実行してみましょう。 以下のような画面になれば実装完了です。
セグメントを切り替えた際、デバッグプリントで切り替えた時のFirst、Secondなどの文字が出力されれば実装完了です。