【Swift】StoryboardにUIパーツを設置する

# まえがき
Xcode12.4のSwiftを使ったiOSアプリ開発にて、以前のXcodeと異なることが多かったので記載

ボタンをクリックするとラベルの文字が変更するアクションを実装

# UIパーツの設置
- 右上の+ボタンをクリックし、オブジェクトの一覧を表示する
![ 2021-02-01 15.16.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1065074/2b35cbaf-9fc2-43fd-4a56-afce87348490.png)
- ラベルとボタンを画面に追加する
![ 2021-02-01 15.16.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1065074/2d85026c-7f36-004b-adf0-586a14b9001b.png)
- 好きな位置に設定可能だがレイアウトのエラーが発生してしまう
- エラーを解消するためにAutoLayoutの設定を行う

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1065074/221b398d-79b5-e98f-6289-355c8a91a40a.png" width=40%>

# AutoLayoutの設定
- AutoLayoutは右下にあるアイコンで余白や他のUIパーツとの距離を設定する

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1065074/4177a680-38ce-70ff-cf36-81c62022d134.png" width=60%>

- ラベルを選択後に右下のアイコンを開き、`Horizontally in Container` にチェックを入れる
- その後`Add 1 Constraint`をクリック

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1065074/1d5d2ac6-2df3-5cac-62c0-7feb755d09b0.png" width=80%>

- Constraintsに`Label.centerX = centerX`が追加され、ラベルが中央に来るように設定された

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1065074/400d6a3f-699e-af38-6fc4-e025913d6261.png" width=80%>

- 次はラベルの余白を設定
- ラベルを選択後に右下のアイコンを開き、`Add New Constraints`の上の赤い線をクリックして、数値を入力する（今回は上: 163に設定） 
- その後`Add 1 Constraint`をクリック

※赤い線をクリックしていない箇所は反映されない
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1065074/f8698a4b-350e-f003-b4c7-087b7bec7473.png" width=80%>

- 同様にしてボタンの位置も設定する（今回は上: 205、右: 30、左: 30、下: 399に設定）

※上はラベルとの距離
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1065074/0be983a6-ee2a-af22-58dc-e5137203c5a3.png" width=80%>
以上で、エラーが消えて、ボタンのAutoLayoutを設定完了

# アウトレット接続
次にアウトレット接続をしてラベルとボタンの内容を設定する

- ViewControllerを開く
- controlキーを押したままStoryboardのラベルをViewControllerの`viewDidLoad`の上に追加する（Name: labelに設定）
![ 2021-02-01 16.01.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1065074/4b9de181-b712-aa86-8449-901b3c232043.png)
- 同様にしてボタンもアウトレット接続を行う（Name: buttonに設定）
- `viewDidLoad`は初期画面表示の時に呼び出される
- 以下、ViewController

~~~swift
import UIKit

class ViewController: UIViewController {

    // アウトレット接続
    @IBOutlet weak var label: UILabel! // ラベル
    @IBOutlet weak var button: UIButton! // ボタン
    
    // 最初に読み込まれるコード
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }
}
~~~
- `viewDidLoad`内で、ラベルとボタンの中身を設定する
- 以下、ViewControllerの`viewDidLoad`メソッド

~~~swift
 // 最初に読み込まれるコード
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        label.text = "ボタンがクリックされてません" // 追加
        button.setTitle("クリック", for: UIControl.State.normal) // 追加
    }
~~~
実行するとラベルとボタンに設定したテキストが適応されている
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1065074/a8082f04-b9a1-d591-6259-f661ca547c5d.png" width=50%>

# アクション接続
次にアクション接続をしてボタンがクリックされた時の動きを設定する

- controlキーを押したままStoryboardのボタンをViewControllerの`viewDidLoad`の下に追加する（Name: buttonClickに設定）
![ 2021-02-01 16.27.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1065074/fd9f0f08-90ef-562f-4c99-022d3d051175.png)
- buttonClickメソッドにボタンをクリックした時の動きを設定する
- 以下、ViewControllerの`buttonClick`メソッド

~~~swift
 // ボタンをクリックした時
    @IBAction func buttonClick(_ sender: Any) {
        label.text = "ボタンがクリックされました！" // ラベルの表示内容
    }
~~~
実行するとボタンをクリックするとラベルの文字が変更される
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1065074/b96f3b23-c3e3-8ba2-5e72-79758eb15cb9.png" width=50%>
クリック後
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1065074/486af684-6870-6a7b-4bbe-b8c53a0e923b.png" width=50%>

- ViewControllerの全体のメソッド

~~~swift
 import UIKit

class ViewController: UIViewController {

    // アウトレット接続
    @IBOutlet weak var label: UILabel! // ラベル
    @IBOutlet weak var button: UIButton! // ボタン
    
    // 最初に読み込まれるコード
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        label.text = "ボタンがクリックされてません" // ラベルの表示内容
        button.setTitle("クリック", for: UIControl.State.normal) // ボタンの表示内容
    }
    
    // ボタンをクリックした時
    @IBAction func buttonClick(_ sender: Any) {
        label.text = "ボタンがクリックされました！" // ラベルの表示内容
    }
}
~~~
今回はここまで ! 
***
#### 関連記事
[1.SwiftでStoryboardを扱う](https://qiita.com/kanae_/items/8331f18b93286a0bcc02)
2.StoryboardにUIパーツを設置する（本記事）
[3.画面遷移を行う](https://qiita.com/kanae_/items/a0637df2932ce63a1e67)
[4.画面上に画像を表示する方法](https://qiita.com/kanae_/items/9df6076a6ab94949439b)
[5.ImagePickerでカメラロールから写真を選択して表示する](https://qiita.com/kanae_/items/b6c13f59924031403150)
[6.PHPickerでカメラロールから写真を選択して表示する](https://qiita.com/kanae_/items/8afaa7925401bcfdaf27)