画面遷移　まとめ swift

#■Navigation Controllerの画面遷移

オレンジの画面にNavigation Controllerを使用すると上部にbarが出る。

オレンジの画面にButtonを置く
![スクリーンショット 2021-05-03 21.26.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1099804/8fcc9f77-77ee-383e-6031-5494067075de.png)


Buttonを押すと緑の画面に遷移する方法

#1
オレンジ画面のButtonを選択
Controlを押しながら青い線を伸ばし緑の画面で離す。

Action Segue(画面の現れ方)を選択する。
Show(左からスライドで遷移)
Present Modally(下からニョキっと遷移)
この二つが一般的

![スクリーンショット 2021-05-03 21.27.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1099804/49da5cb5-f44d-0369-dfc3-fa4ecf65c45d.png)


■show選択時

左から画面がスライドで遷移

緑の画面左上に<Backが現れる。(Navigation Controllerの画面遷移の時のみ)
<Backを押すと画面がオレンジに戻る。

![スクリーンショット 2021-05-03 21.40.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1099804/097bf0e8-34aa-a768-07c7-36473e2d2725.png)

■Present Modally
下からニョキっと遷移(画面が重なってるみたい)
<Back　ボタンはついてこない作るしかない

![スクリーンショット 2021-05-03 21.42.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1099804/5bca9b52-07eb-a91d-cfa5-f8469666aaa0.png)

![スクリーンショット 2021-05-03 21.43.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1099804/9ddd78b6-fd7e-cb2f-0e40-18e2c796faa2.png)

前の画面が微かに見えるのでこれを見えないようにできる。
オレンジの画面と緑の画面の真ん中の矢印を選択


![スクリーンショット 2021-05-03 21.45.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1099804/4d05f395-09e1-574c-9855-eaab7d0170e6.png)
右メニューの
Presentationを
Full Screenにする。
![スクリーンショット 2021-05-03 22.01.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1099804/25575af1-d315-9f75-c2ea-ad715ace6b73.png)

じゃあ見えなりフルスクリーンで画面遷移する。

![スクリーンショット 2021-05-03 22.03.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1099804/e116e489-0292-4679-f377-31a9e1f350e2.png)


#2Present Modallyの画面の戻り方
■showではBACKボタンがデフォルトで出る。
■Present ModallyBACKボタンがない。

Present Modallyでの画面の戻り方を紹介します。

戻り方(コードを使う)
準備
緑の画面のViewControllerを作り紐づける。
仮にNextViewControllerとする。
緑の画面にもNavigation Controllerを使用し右上にBarItemをつける。(Done)
![スクリーンショット 2021-05-03 22.21.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1099804/f4798f77-5e19-c614-eae0-1ff406108859.png)

Doneボタンを押して戻る。
①
dismissを使う

NextViewControllerに
DoneボタンをActionボタンとして紐づける。
その中に

``` swift
dismiss(animated: true, completion: nil)
```

![スクリーンショット 2021-05-03 22.24.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1099804/9adb1b7a-f0ca-446c-958d-27d425668b88.png)
これで戻れるが
どっちかっていうと緑の画面を閉じてる動きです。

#3任意のタイミングで画面遷移したい

コードを使う

1ではButtonを選択してControlを押してひっぱていた
今回は引っ張る場所が違う

オレンジ画面の上部青い場所(ViewControllerからControlを押して引っ張る)
緑の画面で離し同様にshowかpresent Modallyを選択
![スクリーンショット 2021-05-03 22.30.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1099804/5accd85f-2233-56e8-e7e6-504e62f55277.png)

違うのはこの時点では何をしたら画面遷移するか決めていない。

■準備
間の青い矢印を選択(segue)
右メニューのidentifier
の名前を決める今回はsegueとする。
![スクリーンショット 2021-05-03 22.33.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1099804/7af0029c-0be2-8d7f-2d51-60a38fc33251.png)

■コード準備
オレンジの画面と紐づいているViewControlleを開く
ButtonをOutletでViewController.swiftと紐づける。
Buttonを押すと画面遷移ようにコードに書く

``` swift
performSegue(withIdentifier:"さっきつけたIdentifierの名前", sender:nil)
```
![スクリーンショット 2021-05-03 22.38.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1099804/2b75e67c-b62b-aa80-96dc-c9df7eb94e7e.png)

これでButtonを押すと画面遷移する。

#4UnwindSegueを使用した画面遷移

■こんな時に使える
2つ以上前の画面に戻る。
画面遷移した時に何かしたい値を渡して表示したり

オレンジ画面と紐づいている
viewController.swiftに下記のコードを書く

``` swift
@IBAction func メソッド名(segue:UIStoryboardSegue){
}
```
メソッド名を例えばexitとする。
![スクリーンショット 2021-05-03 22.45.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1099804/71f18a88-d925-1221-f0cc-8597896a4e71.png)

緑の画面のDoneを選択Controlを押しながら青い線を引っ張り
緑画面上部右のExitに持っていく
![スクリーンショット 2021-05-03 22.46.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1099804/36d10a27-f353-691a-b8ab-71732c5dc4a8.png)

さっき作ったexitメソッドに繋がっている。
exitWithSegueを選択
![スクリーンショット 2021-05-03 22.49.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1099804/b93b9229-7dbe-b4e0-f0dc-37d1c9d1e212.png)

これでとりあえず画面が戻る。
Next View Controllerに
Unwind segue to "exitWithSegue"
と出ていれば成功。
![スクリーンショット 2021-05-03 22.54.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1099804/a5bb8011-7450-b20a-91a1-851ff85be534.png)

#5UnwindSegueの応用 値を渡して画面遷移

■やりたいこと
緑画面のtextFieldに書いたtextを
緑画面のButtonを押したら
オレンジ画面のLabelに表示する。

■準備
下記のようにItemを画面に準備する。
![スクリーンショット 2021-05-03 23.04.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1099804/fafb94fd-1251-3c97-71bf-5c3c9bbd1a4b.png)

■オレンジ画面のViewController.swiftに下記のコードを足す

``` swift
class ViewController: UIViewController {

    @IBOutlet var label: UILabel!

    @IBAction func aaa(segue: UIStoryboardSegue) {
    }
}
```

![スクリーンショット 2021-05-03 23.15.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1099804/af87a714-8455-f5f7-7c8a-9013073eae05.png)

■緑画面上部左を選択 2つ右のExitまでControlを押しながら青い線を引っ張って離す。
![スクリーンショット 2021-05-03 23.17.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1099804/86659f52-57cd-5326-a52f-4c280688cc32.png)
![スクリーンショット 2021-05-03 23.17.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1099804/e25cc558-6a86-ac1c-99e4-514072f0c131.png)

先ほど作ったaaaメソッドを選択

■UnwindSegue aaaWithSegueの右メニューidentifierに名前をつける。
仮名(back)

これで3で使用した下記コードを使用すれば
好きなタイミング場所で画面遷移できる。

``` swift
performSegue(withIdentifier:"back", sender:nil)
```
■Buttonを押すと
変数ContentにtextFieldに書いてあった文字を入れ込んで
画面遷移する。

![スクリーンショット 2021-05-03 23.28.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1099804/acced8ec-1491-d477-fea1-fe9839e8a250.png)


■オレンジ画面ののコード

``` swift
 @IBAction func aaa(segue:UIStoryboardSegue){
      //画面先をオプショナルバインディングをして定数に
        if  let nextVC = segue.source as? NextViewController {
　　　　　//nextVCの変数Contentをラベルに表示
            label.text = nextVC.content
        }
    }
```

![スクリーンショット 2021-05-03 23.32.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1099804/16c4bd5c-dae4-ee34-34e7-72efcc00d96d.png)


■これで一連の流れができます。
緑画面のtextFieldに文字書く
![スクリーンショット 2021-05-03 23.36.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1099804/3a1575e3-a719-fb53-bbe6-1f525c7397c7.png)

オレンジ画面のラベルに表示

![スクリーンショット 2021-05-03 23.36.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1099804/a37f91f7-f714-330e-c622-77087181cc18.png)


#6 画面遷移時に値を渡す方法　その他

■AppDelegate.swift
に変数を保存できる。

変数を他classで使う

コンピューテッドプロパティで変数に入れ込む
あとはオプショナルバインディングをして変数を呼び出せる。

``` swift
 private var appDelegate: AppDelegate? {
        UIApplication.shared.delegate as? AppDelegate
    }
```


■segueが実行される前に勝手に発動するメソッド

``` swift
 override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
    //segueのidentifierが"segue"なら実行
  if segue.identifier == "segue" {
 
            // 遷移先ViewCntrollerの取得
            let nextVC = segue.destination as! NextViewController
 
            // nextVCの変数に現在の画面のlabelのtextを入れ込む等
            nextVC.Content = label.text!
        }
}
```

#7 UITabBarController

#どんな時に使える？
画面同士が並列に並ぶ時
親子関係ではない画面遷移
例：音楽アプリでジャンル別で画面が存在する等

準備
始めのViewContorollerを消す
+マークから
TabBarControllerを選択して持ってくる。
![スクリーンショット 2021-05-04 15.35.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1099804/a7aaa4bd-ff2c-8b25-b0aa-324cbfc5a988.png)

![スクリーンショット 2021-05-04 15.35.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1099804/fede0607-1f90-852a-d512-2fe870941b5b.png)

■次に左のTabBarControllerを選択し右メニューの
is initial View Controllerにチェックマーク
![スクリーンショット 2021-05-04 15.36.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1099804/22ce1d86-1938-a7ce-291a-3df4441bd972.png)

一度右側縦に並んだ2つの画面を消し
+マークから新たなUIViewControllerで二つの画面を出す。
そこにTab BarControllerからControlで青い線を引っ張り画面遷移したい画面を選ぶ
今回はshowやPresentModallyではなく
Relationship Segueの中の
ViewControllersをお互い選択
![スクリーンショット 2021-05-04 15.37.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1099804/c1be1e0f-e12d-6fb7-3647-fe19501fbadd.png)

あとは画面遷移したい画面に新たなClassのファイルを各々作りお互い紐づければ完成
![スクリーンショット 2021-05-04 15.52.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1099804/6cd548fd-edbd-975c-1c8f-79262ef56ebb.png)

ビルドすると初めの画面は緑の画面になり下のitemButtonで画面を切り替えれる。
![スクリーンショット 2021-05-04 15.53.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1099804/e02d318b-032e-839b-b50a-97ab19d70160.png)
![スクリーンショット 2021-05-04 15.53.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1099804/2b2f66dc-82c2-67d1-dcb2-44c6c048d36e.png)








以上まとめです。
何かあればまた更新します。