【Swift】 画面遷移を行う

まえがき

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

新規の画面を作成する

• 右上の+ボタンをクリックし、オブジェクトの一覧を表示する
• View Controllerを選択し、Storyboardに追加する

追加後のStoryboard

• [File]->[New]->[File...]から新規クラスを作成する

• Cocoa Touch Classを選択
  

• Class: NextViewControllerで作成
  

• 追加した画面を選択し、右の設定のClass（作成したクラス名）とStoryboard IDを設定（今回はNextViewを設定）
  

• 遷移元となるViewを選択し、設定画面のisInitial View Controllerにチェックがついているか確認する
  

ViewControllerの設定

• 遷移先の画面の背景を赤色に変更する
• 以下、NextViewControllerのviewDidLoadメソッド

// 最初に読み込まれるコード
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.

        //追加
        self.view.backgroundColor = UIColor.red // 背景色を設定
    }

• 作成済みのボタンに画面遷移のコードを追加する
• ボタン（UIパーツ）の設定はStoryboardにUIパーツを設置するを参照
• 以下、ViewControllerのbuttonClickメソッド

// ボタンをクリックした時
    @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に設定すると全画面で画面遷移される

ボタンをクリック後

modalPresentationStyleをfullScreenに設定しない時

• 以下、ViewControllerのbuttonClickメソッド

// ボタンをクリックした時
    @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)
    }

ボタンをクリック後

画面上部に少しだけ前の画面が見えている
（上部をタッチして下にスクロールすると前の画面に戻ることができる）

今回はここまで !

---

関連記事

1. SwiftでStoryboardを扱う
2.StoryboardにUIパーツを設置する
3.画面遷移を行う（本記事）
4.画面上に画像を表示する方法
5.ImagePickerでカメラロールから写真を選択して表示する
6.PHPickerでカメラロールから写真を選択して表示する