サトリク
この講座では、画面遷移する簡単なアプリを作ってみます！
動作環境
| item | Version |
|---|---|
| Swift | 5.3 |
| Xcode | 12.0.1 |
画面遷移とは？
画面遷移とは、簡単にいうと、画面から画面に移動することです。
iOSには、2種類の画面遷移の仕方があります。プッシュ遷移とモーダル遷移です。
プッシュ遷移というのは普通の遷移で横にスライドする形の遷移です。
モーダル遷移というのは、下から上へ覆いかぶさるような遷移のことです。
今回はこの二つの遷移の仕方を学んでいきます。
この講座の完成イメージ
今回開発するアプリは、画面遷移を使ったアプリです。
プッシュ遷移というボタンを押すとピンクの画面に遷移し、モーダル遷移というボタンを押すと緑画面遷移します。という簡単なアプリです。
アプリ開発手順
プロジェクトを作成
まずは、プロジェクトを作成しましょう。
下のDockからXcodeを起動しましょう。
もうすでにXcodeを開いている方は、command + shift + 1を押しましょう。
「Create a new Xcode project」を選択
①「App」を選択
②「Next」をクリック
①「Product Name」にScreentransitionと入力
②「Interface」でStoryboardを選択
③「Language」でSwiftを選択
④全てチェックなし
（そのほかは任意です。）
⑤「Next」をクリック
プッシュ遷移のやり方
プッシュ遷移をするには、基本的に上のナビゲーションバーというのがついていないとできません。なのでまずは、ナビゲーションバー作ります。
①ボードの上のバーをクリック
② 
(Embed In)をクリック
③「Navigation Controller」をクリック
①左側の画面のTitleをクリック
② 
(show the Attributes inspector)を選択
③「Bar Tint」をSystem Yellow Colorに変更
①右上のプラスボタンをクリック
②Buttonを真ん中の上らへんにドラッグ&ドロップ
①Buttonを選択
② (show the Attributes inspector)を選択
③Titleにプッシュ遷移と入力
④「Background」をSystem Pink Colorに変更
⑤「Text Color」をWhite Colorに変更
プッシュ遷移ボタンを少し広げて真ん中に配置してください。
①右上のプラスボタンをクリック
②ViewControllerを画面の右側にドラッグ&ドロップ
①遷移先のボードをクリック
② (show the Attributes inspector)を選択
③「Background」をSystem Pink Colorに変更
プッシュ遷移を選択してcontrolを押しながら、ピンクの画面にドラッグ&ドロップしてくダサい。
Showを選択
これで、プッシュ遷移の処理が完了しました。
①iPhone11に変更
②左上の再生ボタンをクリックして実行
プッシュ遷移ボタンを押すと、ピンクの画面に遷移するはずです。
モーダル遷移のやり方
optionを押しながらボタンをドラッグ&ドロップ
ボタンが複製されると思います。
①下のボタンを選択
② (show the Attributes inspector)を選択
③「Title」にモーダル遷移と入力
④「Background」をSystem Green Colorに変更
ピンクの画面を少し上に寄せましょう。
ボードの上のバーをドラッグ&ドロップで動かせます。
①右上のプラスボタンをクリック
②ViewControllerを空いてる場所にドラッグ&ドロップ
①ボードをクリック
② (show the Attributes inspector)を選択
③「Background」をSystem Green Colorに変更
モーダル遷移ボタンを選択した状態で、controlを押しながら、緑の画面にドラッグ&ドロップ
Present Modallyを選択
モーダル遷移というボタンを押すと、下から上に覆いかぶさるように遷移すると思います。
モーダル遷移の戻るボタンの作り方
では、次はモーダル遷移の戻るボタンを作成していきましょう。
①右上のプラスボタンをクリック
②Buttonを緑のボードにドラッグ&ドロップ
①Buttonを選択
② (show the Attributes inspector)を選択
③「Title」に閉じると入力
緑の画面のプログラムファイルがないので作りましょう。
上のバーのFile>New>File....を選択
①「Cocoa touch Class」を選択
②「Next」をクリック
①「Subclass of:」を「UIViewController」に変更
②「Class」にModalViewControllerと入力
③「Next」をクリック
そのまま「Create」をクリック
Main.storyboardを選択
①緑の画面の上のバーをクリック
② (show the Attributes inspector)を選択
③ModalViewControllerを選択
①上のバーをクリック
②Command + option + control + enterで2分割表示
controlを押しながら、17行目と18行目の間にドラッグ&ドロップ
「Name」にbackButtonActionと入力して「Connect」
@IBAction func backButtonAction~~~~の下の行に以下のコードを入力して下さい。
dismiss(animated: true, completion: nil)
このように、閉じるボタンを押すと元の画面に戻るはずです。
これで戻るボタンが完成しました！
まとめ
うまくできましたでしょうか？
わからない部分があれば、TwitterのDMか、コメントで質問して貰えばすぐ返します。(コメントはレス遅いかも)
次の講座では、プログラムファイルと、storyboardの関係について学びます。
サトリク
このブログ(satorikublog)の筆者サトリクが、初心者の方に教えるサービスをはじめました。
気軽にご相談ください！
次の講座
【Swift/Xcode超入門】Storyboardファイルとプログラムファイルの関係
本で勉強したい方はこちら
【2021年版】Swift5/Xcode/OSアプリ開発のオススメ参考書・本・書籍まとめ。初心者から上級者まで！
ゼロから学ぶiPhoneアプリ開発入門
