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

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

# 使い方
##１. オブジェクトを配置
![スクリーンショット 2020-10-28 22.47.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328477/00c9dcde-d9a4-7f33-9fee-efde532284c7.png)
![スクリーンショット 2020-10-28 22.50.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328477/1e5f074b-3802-49e8-82a9-abc1241a8f80.png)

##２. オブジェクトを編集
![名称未設定2.001.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328477/5e367e3a-ac81-376b-5c86-0c25a5f62526.jpeg)
![名称未設定2.002.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328477/3810f352-966e-1b8c-6910-d879d49bf155.jpeg)
＜完成形＞
![スクリーンショット 2020-10-28 22.51.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328477/b5410af1-8df4-83ec-4cee-6717024c8bd3.png)

##３. コーディング
各パーツの宣言

```Swift:ViewController.swift
@IBOutlet weak var selectSegmentedControl: UISegmentedControl!

@IBOutlet weak var DisplayLabel: UILabel!
```
アクションの追加

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

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

```Swift: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 = "未選択"
        }

```

＜コード全体＞

```Swift: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 = "未選択"
     }
}
```

##４. 関連付け
OutletとActionの関連付けをしていく。
![名称未設定2.001.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328477/9d2fabc5-bb06-3d80-c04b-5ffa5fa3a60d.jpeg)
![名称未設定2.002.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328477/4652136a-1bae-613d-a353-c36fc1c67b86.jpeg)
![名称未設定2.003.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328477/4075dd09-ce56-cdf6-b2f2-f0b18200ae77.jpeg)


###⚠️注意ポイント⚠️
「いつもTouch Up Insideだから〜」といってTouch Up Insideで関連付けすると**動きません！**
しっかり、**Value Changedと**繋げましょう。
![名称未設定2.004.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328477/f8e389e9-1197-9a81-dabc-450245efd935.jpeg)

# 完成GIF
![ezgif.com-gif-maker.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328477/69c59b95-240d-9dd1-c9d1-61bb2549e66d.gif)

# サンプルプロジェクト
https://github.com/rea-sna/SegmentedControl_Sample

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