2019年6月29日
[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」でアプリケーションが実行される。
以上で完了です。