LoginSignup
4
6

More than 3 years have passed since last update.

Segmented Controlの使い方と注意ポイント

Last updated at Posted at 2020-10-28

前提

Segmented Controlを使うときに、ミスをしがちな部分の備忘録です。
※実際、このミスに気づかず、Segmented Controlの導入を見送っていました。。。

使い方

1. オブジェクトを配置

スクリーンショット 2020-10-28 22.47.26.png
スクリーンショット 2020-10-28 22.50.04.png

2. オブジェクトを編集

名称未設定2.001.jpeg
名称未設定2.002.jpeg
<完成形>
スクリーンショット 2020-10-28 22.51.44.png

3. コーディング

各パーツの宣言

ViewController.swift
@IBOutlet weak var selectSegmentedControl: UISegmentedControl!

@IBOutlet weak var DisplayLabel: UILabel!

アクションの追加

ViewController.swift
@IBAction func tappedSegmentedControl(_ sender: UISegmentedControl) {

}

アクションの中にswitch文で処理を書いていく。

ViewConroller.swift
   switch sender.selectedSegmentIndex {
        case 0:
            print("選択されたもの:iOS")
            self.DisplayLabel.text = "iOS"
        case 1:
            print("選択されたもの:iPadOS")
            self.DisplayLabel.text = "iPadOS"
        case 2:
            print("選択されたもの:watchOS")
            self.DisplayLabel.text = "watchOS"
        case 3:
            print("選択されたもの:tvOS")
            self.DisplayLabel.text = "tvOS"
        case 4:
            print("選択されたもの:macOS")
            self.DisplayLabel.text = "macOS"
        default:
            print("選択されたもの:未選択")
            self.DisplayLabel.text = "未選択"
        }

<コード全体>

ViewConroller.swift
@IBOutlet weak var selectSegmentedControl: UISegmentedControl!

@IBOutlet weak var DisplayLabel: UILabel!

    override func viewDidLoad() {
        super.viewDidLoad()

        self.DisplayLabel.text = "未選択"
    }

@IBAction func tappedSegmentedControl(_ sender: UISegmentedControl) {
        switch sender.selectedSegmentIndex {
        case 0:
            print("選択されたもの:iOS")
            self.DisplayLabel.text = "iOS"
        case 1:
            print("選択されたもの:iPadOS")
            self.DisplayLabel.text = "iPadOS"
        case 2:
            print("選択されたもの:watchOS")
            self.DisplayLabel.text = "watchOS"
        case 3:
            print("選択されたもの:tvOS")
            self.DisplayLabel.text = "tvOS"
        case 4:
            print("選択されたもの:macOS")
            self.DisplayLabel.text = "macOS"
        default:
            print("選択されたもの:未選択")
            self.DisplayLabel.text = "未選択"
     }
}

4. 関連付け

OutletとActionの関連付けをしていく。
名称未設定2.001.jpeg
名称未設定2.002.jpeg
名称未設定2.003.jpeg

⚠️注意ポイント⚠️

「いつもTouch Up Insideだから〜」といってTouch Up Insideで関連付けすると動きません!
しっかり、Value Changedと繋げましょう。
名称未設定2.004.jpeg

完成GIF

ezgif.com-gif-maker.gif

サンプルプロジェクト

最後までご覧いただきありがとうございました☺︎

4
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
6