ストーリーボードでSegmentedControlを実装する

セグメンテッドコントロールを実装する

セグメンテッドコントロール(SegmentedControl)は選択肢を選ぶための横並びのボタン群を作るユーザーインターフェースのパーツになります。情報を入力する画面で、例えば「男性」「女性」を選ぶなど、◯択での質問などに便利なパーツです。 トリガーとしての役割というより、オプション選択という役割が多いパーツだと個人的には思います。

ストーリーボードでのSegmentedControlの実装はとても簡単で選択肢の設定もインスペクタ内で行えます。

/images/uploads/20200505013543.png

セグメントの数とタイトルを設定する

まずは、ストーリーボードを開き、セグメンテッドコントロールを画面内に配置します。 ここではプロジェクトを新規作成した状態のViewControllerに配置をしていくサンプルになります。 他の画面でも同じように配置はできますので、応用してみてください。

UIKitのパーツ一覧より、SegmentedControlを選択してストーリーボードの画面に配置します。 以下の画像のような手順でSegmentedControlをドラッグ&ドロップで設置しましょう。

/images/uploads/20200505014217.png

初期状態では、最低限2つの選択肢が入っている状態になります。

/images/uploads/20200505014242.png

選択肢を2つではなく、複数設定する場合には、右側のインスペクタにあるセグメントの数の設定と、その内容の設定をします。

/images/uploads/20200504060613.png

2つの選択肢を、

/images/uploads/20200504060934.png

4つの選択肢にすることができたりします。

/images/uploads/20200504060949.png

  • Segmentsの数を増やしたい選択肢分だけ2→4など増やす
  • Segmentのセレクトボックスを切り替えて、それぞれのセグメントのタイトルを設定
  • もちろん画像も設定できます。システムアイコン(最初から標準で準備されているシステムで使用するアイコンなど)にすることもできます。

/images/uploads/20200504061002.png

文字列だけでなく、絵で表せるのでUIを少しおしゃれにできますね。

/images/uploads/20200504061012.png

このような形でストーリーボードでのセグメンテッドコントロールの配置は完了です。

セグメンテッドコントロールをコードで使えるように関連付ける

次は、配置したセグメンテッドコントロールをコード内で使えるようにしたいので、ストーリーボードとViewController.swiftのソースコードと関連付けたいと思います。

ストーリーボードの横にコードを表示させます。 以下のように「Assistant」をクリックしてViewController.swiftのコードを表示させます。

/images/uploads/20200505015442.png

次に、セグメンテッドコントロールをコード内で変数として扱えるようにしたいので、 セグメンテッドコントロールを選択してcontrolを押しながらコード側(ViewControllerのクラス直下に)にドラッグ&ドロップします。 間違ってメソッド内にドラッグ&ドロップしないようにしましょう。

/images/uploads/20200504060118.png

Nameに「segmentedControl」と入力し「Connect」をクリックします。

/images/uploads/20200504060303.png

セグメント切替を検知するためにソースコードと関連付ける

次に、セグメンテッドコントロールの選択がされたことを検知して動くメソッドを実装します。 セグメンテッドコントロールのクリックが行われると、「Value Change」すなわち、選択している値が変化したことを検知してメソッドを実行してくれます。ボタンでは「touch up inside」(ボタンが押されて指が離れた時)検知をしましたが、Segmented ControlではValueChangedを使うことで正常に動作します。

ストーリーボードのセグメンテッドコントロールを右クリックして、Value Changedをコード側にドラッグ&ドロップしましょう。

/images/uploads/20200504055933.png

Nameには「segmentedSelect」と入力し、「Connect」をクリックします。

/images/uploads/20200504055725.png

これでストーリーボードとコードとの関連付けは完了です。

セグメント切替検知のコードを記述する

続いては、セグメンテッドコントロールの値が変わったことを検知して、デバッグプリントを出力するようにViewController.swift内を編集しましょう。先程「segmentedSelect」というセグメントの切替を検知するメソッドを作成しましたので、以下のように編集します。

/images/uploads/20200504055503.png

テキストのコードを以下となります。コピペしても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の「▷」を押してアプリを実行してみましょう。 以下のような画面になれば実装完了です。

/images/uploads/20200504055227.png

セグメントを切り替えた際、デバッグプリントで切り替えた時のFirst、Secondなどの文字が出力されれば実装完了です。

/images/uploads/20200504055405.png


Category