UISegmentedControlの基本

シェアする

S 2016 06 24 14 47 30 2

UISegmentedControlは複数の値から一つの値を選択することができるコントロールです。Webフォームのラジオボタンのようなものと考えると分かりやすいでしょう。

選択肢(セグメントと呼ぶ)が変更されたタイミングで処理を実行したり、現在選択中のセグメントの情報を取得することができます。

Interface Builderから使用する

画面右下のオブジェクトライブラリからSegmented Controlを追加します。

S 2016 06 24 14 49 14 2

画面右上のAttributes Inspectorでコントロールの情報を変更することができます。「Segments」でセグメントの数を調節し、その下のSegmentリストボックスを切り替えて各選択肢の情報を設定します。

また選択されたセグメントン情報を画面で確認するためにLabelを追加しておきます。

S 2016 06 24 14 56 50 2

Segmented ControlとLabelをControl+ドラッグして、アウトレットとアクションを作成します。

ソースコードは以下のようになります。

class ViewController: UIViewController {

    //セグメントのアウトレット
    @IBOutlet weak var segmentedControl: UISegmentedControl!
    //ラベルのアウトレット
    @IBOutlet weak var label: UILabel!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }

    @IBAction func segmentChanged(sender: AnyObject) {
        //セグメントが変更されたときの処理
        //選択されているセグメントのインデックス
        let selectedIndex = segmentedControl.selectedSegmentIndex
        //選択されたインデックスの文字列を取得してラベルに設定
        label.text = segmentedControl.titleForSegmentAtIndex(selectedIndex)
    }
}

実行すると選択されたセグメントの文字列がラベルに表示されることが確認できます。

S 2016 06 24 15 01 35 2

プログラムから生成

Interface Builderではなくプログラムから生成する方法は以下となります。

class NextViewController: UIViewController {

    var segmentedControl: UISegmentedControl!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        let params = ["左", "中", "右"]
        segmentedControl = UISegmentedControl(items: params)
        segmentedControl.frame = CGRectMake(20, 20,200, 30)
        segmentedControl.addTarget(self, action: #selector(NextViewController.segmentChanged(_:)), forControlEvents: .ValueChanged)
        self.view.addSubview(segmentedControl)
        
    }
    
    func segmentChanged(sender: AnyObject) {
        //セグメントが変更されたときの処理
        //選択されているセグメントのインデックス
        let selectedIndex = segmentedControl.selectedSegmentIndex
        print(selectedIndex)
    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}

実行例です。

S 2016 06 24 15 27 38 2

スポンサーリンク
レクタングル(大)広告
レクタングル(大)広告

シェアする

フォローする