[Xcode]画面遷移をする

Xcodeのバージョンは10
概要:
ボタンをタップしたら別の画面に遷移する。

・プロジェクトを作成する

・Main.storyboardをクリックしてiPhoneの画面を表示する。

・遷移先のViewControllerを作成する

①クリックするまたは「Command+Shif+L」でライブラリパネルが表示される。
②追加したい名前を入力するとライブラリの候補が絞られる。
③ドラッグでViewControllerを追加する。

・Viewの背景色を設定する

①背景色を変更したい対象のViewをクリックする。
②「Background」をクリックして「Custom」を選択して好きな色を選ぶ。

・遷移するトリガーのボタンを設置する

①クリックするまたは「Command+Shif+L」でライブラリパネルが表示される。
②追加したい名前を入力するとライブラリの候補が絞られる。
③追加したいViewにドラッグして追加する

・ボタンのテキストを設定する

①変更したい対象のボタンをクリックする
②「Title」の下部のテキストフィールドに表示したい文字列を入力する。「Font」の「T」をクリックするとスタイルが変更できる。
③この時「AutoLayout」を設定していないので警告が表示される。今回は気にしないことにする。

・遷移先の処理をするファイルを追加する

①メニューの「File」→「New」
②「File...」をクリックする。
①「Cocoa Touch Class」を選択する。
②「Next」をクリックする。
①ファイル名を入力する

・追加したファイルとViewControllerを紐付ける

①黄色いマル印をクリックする
②追加したViewControllerの名前を入力する。この場合は「NextViewController」
③StoryBoardIDを設定する。この場合は「NextView」

・ViewControllerのStoryBoardIDを設定する

①黄色のマル印をクリックする。
②追加したViewControllerの名前を入力する。最初から入力されているので必要はないかも。
③StoryBoardIDを設定する。この場合は「view」

・タッチアクションを追加する

①クリックするとソースファイルが表示される。
①「次の画面へ」を②に向かってドラッグするとポップアップが表示される。
③Nameに「touchNextBtn」を入力する。
④Connectをクリックする。
①Conect押下後、空っぽの関数が作成される。
②次の画面(ピンクの画面)に遷移するための処理を記述する。
    @IBAction func touchNextBtn(_ sender: Any) {
        // 次の画面に遷移
        let storyboard: UIStoryboard = self.storyboard!
        let nextView = storyboard.instantiateViewController(withIdentifier: "nextView")
        self.present(nextView, animated: true, completion: nil)
    }
①緑の画面でやったように「前の画面へ」を②に向かってドラッグするとポップアップが表示される。
③Nameに「touchBackBtn」を入力する。
④Connectをクリックする。
①Conect押下後、空っぽの関数が作成される。
②前の画面(緑の画面)に遷移するための処理を記述する。
    @IBAction func touchBackBtn(_ sender: Any) {
        // 前の画面に遷移
        let storyboard: UIStoryboard = self.storyboard!
        let view = storyboard.instantiateViewController(withIdentifier: "view")
        self.present(view, animated: true, completion: nil)
    }

・ビルドする

メニューから「Product」→「Build」をクリックまたは「Command+B」でビルドが開始される。

・実行する

メニューから「Product」→「Run」をクリックまたは「Command+R」でアプリケーションが実行される。
実行結果

以上で完了です。

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です