ソースコードでSegmentedControlを実装する

[UISegmentedControl]

コードで簡単にSegmentedControlを実装

UISegmentedControlをコードで設定します。

やり方はとても簡単なので、もしかしたらストーリーボードでの設定よりもやりやすいです。 ただし、配置するビュー(view)、座標をコードを決めないといけないので、配置には結構悩むかもしれません。 ストーリーボードでは、オートレイアウトで自動調節してくれますが、コードではオートレイアウトは効かないので、動的なframeの座標コントロールが必要となります。

メソッドで実装をわかりやすく

ViewDidLoadメソッド内に書いて実装するのも簡単でよいのですが、他のコードも追記していくとViewDidLoadの内容が肥大化していくので、ここではsetupSegというメソッドを作り、セグメンテッドコントロールの配置する機能を独立させています。

setupSegのメソッドに書いているコードの内容は以下のようになります。必要最小限のコードになります。

  • セグメントに表示させたい選択肢の数と文字列の定義
  • UIsegmentedControlの初期化、インスタンスにする
  • セグメンテッドコントロールの座標を設定
  • セグメンテッドコントロールの選択肢に変化があった場合(ValueChanged)に呼び出すメソッドを設定
  • self.view(ViewController直下にある基本のビュー)にセグメンテッドコントロールを追加して画面に表示させる
 func setupSeg() {

    // セグメントコントロールの数とタイトルを配列で定義
    let items = ["First","Second", "Third"]

    // セグメントコントロールの初期化
    let segmentControl = UISegmentedControl(items: items)

    // セグメントコントロールの配置位置を設定
    segmentControl.frame = CGRect(x:20, y:20, width:self.view.frame.width  - 40, height:40)

    // セグメントコントロールの値が変わったときに呼び出すメソッド
    segmentControl.addTarget(self, action: #selector(self.segmentChanged(_:)), for: .valueChanged)

    // セグメントコントロールをviewに追加
    self.view.addSubview(segmentControl)
  }

次に、セグメンテッドコントロールの値が変化した際に呼ばれるメソッドを記述します。 コードは色々な書き方があると思いますが、決まった選択肢を選んで処理する場合には、switch文を使って値の判別を行うのがよいでしょう。 ここでは簡単に、どれが押されたかをデバッグプリントに出力するようにprint文を書いておきます。

 // セグメントコントロールの値を検知するメソッド
  @objc func segmentChanged(_ sender: UISegmentedControl) {
      switch sender.selectedSegmentIndex {
      case 0:
          print("First")
          break
      case 1:
          print("Second")
          break
      case 2:
          print("Third")
          break
      default:
          print("Error")
          break
      }
  }

このメソッドをViewDidLoadメソッドなど、画面初期化が行われる場所で呼び出してあげます。 新規作成した状態でのプロジェクトで実装すると以下のようなViewController.swiftの内容となると思います。

/data/uploads/20200504061531.png

以下は全体のコードになります。ViewController.swiftにコピペしてもOKです。

import UIKit

class ViewController: UIViewController {
  
  override func viewDidLoad() {
    super.viewDidLoad()

    // セグメントコントロールを設置するsetupSegメソッドを呼び出し
    setupSeg()
    
  }
  
  func setupSeg() {
    
    // セグメントコントロールの数とタイトルを配列で定義
    let items = ["First","Second", "Third"]
    
    // セグメントコントロールの初期化
    let segmentControl = UISegmentedControl(items: items)
    
    // セグメントコントロールの配置位置を設定
    segmentControl.frame = CGRect(x:20, y:20, width:self.view.frame.width  - 40, height:40)
    
    // セグメントコントロールの値が変わったときに呼び出すメソッド
    segmentControl.addTarget(self, action: #selector(self.segmentChanged(_:)), for: .valueChanged)
    
    // セグメントコントロールをviewに追加
    self.view.addSubview(segmentControl)
  }
  
  // セグメントコントロールの値を検知するメソッド
  @objc func segmentChanged(_ sender: UISegmentedControl) {
      switch sender.selectedSegmentIndex {
      case 0:
          print("First")
          break
      case 1:
          print("Second")
          break
      case 2:
          print("Third")
          break
      default:
          print("Error")
          break
      }
  }
  
  
}


アプリを実行する

ここまでできたらXcodeの「▷」を押してアプリを実行してみましょう。 以下のような画面になれば実装完了です。

/data/uploads/20200504061723.png

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

Posted_at:2020-05-05