ソースコードでSegmentedControlを実装する
コードで簡単に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の内容となると思います。
以下は全体のコードになります。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の「▷」を押してアプリを実行してみましょう。
セグメントを切り替えた際、デバッグプリントで切り替えた時のFirst、Secondなどの文字が出力されれば実装完了です。