【Swift】 画面遷移を行う

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

# 新規の画面を作成する
- 右上の+ボタンをクリックし、オブジェクトの一覧を表示する
- View Controllerを選択し、Storyboardに追加する
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1065074/f3e5470c-d7d1-6d20-6295-ec95b5af2747.png" width=70%>

追加後のStoryboard
![ 2021-02-01 18.24.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1065074/66ecc189-8b2d-b14a-8748-d86cacf2f49c.png)

- [File]->[New]->[File...]から新規クラスを作成する
- Cocoa Touch Classを選択
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1065074/4ed0f6aa-e527-eb6b-3a83-d7cb9416ab74.png" width=７0%>

- Class: NextViewControllerで作成
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1065074/a30ff6e4-2909-1fee-af24-ac4222eb7968.png" width=80%>

- 追加した画面を選択し、右の設定のClass（作成したクラス名）とStoryboard IDを設定（今回はNextViewを設定）
![ 2021-02-01 18.24.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1065074/d0314121-ab56-f9b4-75b4-73a7de6ca48a.png)
- 遷移元となるViewを選択し、設定画面のisInitial View Controllerにチェックがついているか確認する
![ 2021-02-01 18.53.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1065074/8f6ec0fb-3851-2c8f-e694-0bd6e9832f24.png)

# ViewControllerの設定
- 遷移先の画面の背景を赤色に変更する
- 以下、NextViewControllerの`viewDidLoad`メソッド

~~~swift
// 最初に読み込まれるコード
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        //追加
        self.view.backgroundColor = UIColor.red // 背景色を設定
    }
~~~
- 作成済みのボタンに画面遷移のコードを追加する
- ボタン（UIパーツ）の設定は[StoryboardにUIパーツを設置する](https://qiita.com/kanae_/items/e4c74ab1de7ccc9125bb)を参照
- 以下、ViewControllerの`buttonClick`メソッド

~~~swift
// ボタンをクリックした時
    @IBAction func buttonClick(_ sender: Any) {
        label.text = "ボタンがクリックされました！" // ラベルの表示内容
        
        // 以下、今回追加コード
        // NextView画面表示
        let nextViewController = self.storyboard?.instantiateViewController(withIdentifier: "NextView") as! NextViewController
        nextViewController.modalPresentationStyle = .fullScreen
        self.present(nextViewController, animated: true, completion: nil)
    }
~~~
- `modalPresentationStyle`をfullScreenに設定すると全画面で画面遷移される
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1065074/f21466d6-4226-6dd1-df71-4b86da83cdd7.png" width=50%>

ボタンをクリック後
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1065074/52dba2ee-9380-3bd8-022f-e7c53f4863da.png" width=50%>

###`modalPresentationStyle`をfullScreenに設定しない時
- 以下、ViewControllerの`buttonClick`メソッド

~~~swift
// ボタンをクリックした時
    @IBAction func buttonClick(_ sender: Any) {
        label.text = "ボタンがクリックされました！" // ラベルの表示内容
        
        // 以下、今回追加コード
        // NextView画面表示
        let nextViewController = self.storyboard?.instantiateViewController(withIdentifier: "NextView") as! NextViewController
        //nextViewController.modalPresentationStyle = .fullScreen //設定しない
        self.present(nextViewController, animated: true, completion: nil)
    }
~~~
ボタンをクリック後
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1065074/954ff9f1-a566-4977-8cc0-362b6988ced0.png" width=50%>
画面上部に少しだけ前の画面が見えている
（上部をタッチして下にスクロールすると前の画面に戻ることができる）

今回はここまで ! 
***
#### 関連記事
[1. SwiftでStoryboardを扱う](https://qiita.com/kanae_/items/8331f18b93286a0bcc02)
[2.StoryboardにUIパーツを設置する](https://qiita.com/kanae_/items/e4c74ab1de7ccc9125bb)
3.画面遷移を行う（本記事）
[4.画面上に画像を表示する方法](https://qiita.com/kanae_/items/9df6076a6ab94949439b)
[5.ImagePickerでカメラロールから写真を選択して表示する](https://qiita.com/kanae_/items/b6c13f59924031403150)
[6.PHPickerでカメラロールから写真を選択して表示する](https://qiita.com/kanae_/items/8afaa7925401bcfdaf27)