クイズアプリ開発入門書を書きました。

【Swift/Xcode超入門】画面遷移するアプリを作ってみよう

 

サトリク

この講座では、画面遷移する簡単なアプリを作ってみます!

 

動作環境

item Version
Swift 5.3
Xcode 12.0.1

バージョンの確認方法

 

画面遷移とは?

画面遷移とは、簡単にいうと、画面から画面に移動することです。

iOSには、2種類の画面遷移の仕方があります。プッシュ遷移とモーダル遷移です。

プッシュ遷移というのは普通の遷移で横にスライドする形の遷移です。

モーダル遷移というのは、下から上へ覆いかぶさるような遷移のことです。

今回はこの二つの遷移の仕方を学んでいきます。

 

この講座の完成イメージ

今回開発するアプリは、画面遷移を使ったアプリです。

プッシュ遷移というボタンを押すとピンクの画面に遷移し、モーダル遷移というボタンを押すと緑画面遷移します。という簡単なアプリです。

 

アプリ開発手順

プロジェクトを作成

まずは、プロジェクトを作成しましょう。

STEP.1
Xcodeを起動

下のDockからXcodeを起動しましょう。

もうすでにXcodeを開いている方は、command + shift + 1を押しましょう。

STEP.1
プロジェクト新規作成

「Create a new Xcode project」を選択

STEP.2
テンプレート選択

①「App」を選択

②「Next」をクリック

STEP.3
プロジェクトの設定

①「Product Name」にScreentransitionと入力

②「Interface」でStoryboardを選択

③「Language」でSwiftを選択

④全てチェックなし

(そのほかは任意です。)

⑤「Next」をクリック

STEP.4
プロジェクトの保存

前々回の講座で作ったPracticeを選択しましょう。

②上のバーにPracticeと表示されていることを確認

③Createをクリック

完了
これで、プロジェクトの作成は完了です。

プッシュ遷移のやり方

STEP.1
ナビゲーションバーに変更

プッシュ遷移をするには、基本的に上のナビゲーションバーというのがついていないとできません。なのでまずは、ナビゲーションバー作ります。

①ボードの上のバーをクリック

(Embed In)をクリック

③「Navigation Controller」をクリック

STEP.2
ナビゲーションバーのカラー変更

①左側の画面のTitleをクリック

(show the Attributes inspector)を選択

③「Bar Tint」をSystem Yellow Colorに変更

STEP.3
Buttonを配置

①右上のプラスボタンをクリック

②Buttonを真ん中の上らへんにドラッグ&ドロップ

STEP.4
プッシュ遷移

①Buttonを選択

(show the Attributes inspector)を選択

③Titleにプッシュ遷移と入力

④「Background」をSystem Pink Colorに変更

⑤「Text Color」をWhite Colorに変更

STEP.5
ボタンを広げる

プッシュ遷移ボタンを少し広げて真ん中に配置してください。

STEP.6
画面遷移先を配置

①右上のプラスボタンをクリック

ViewControllerを画面の右側にドラッグ&ドロップ

STEP.7
遷移先の画面の色を変更

①遷移先のボードをクリック

(show the Attributes inspector)を選択

③「Background」をSystem Pink Colorに変更

STEP.8
遷移させる

プッシュ遷移を選択してcontrolを押しながら、ピンクの画面にドラッグ&ドロップしてくダサい。

 

Showを選択

これで、プッシュ遷移の処理が完了しました。

STEP.9
実行して確認

①iPhone11に変更

②左上の再生ボタンをクリックして実行

プッシュ遷移ボタンを押すと、ピンクの画面に遷移するはずです。

完了

モーダル遷移のやり方

STEP.1
ボタンを複製

optionを押しながらボタンをドラッグ&ドロップ

ボタンが複製されると思います。

STEP.2
ボタンのレイアウトを編集

①下のボタンを選択

(show the Attributes inspector)を選択

③「Title」にモーダル遷移と入力

④「Background」をSystem Green Colorに変更

STEP.3
寄せる

ピンクの画面を少し上に寄せましょう。

ボードの上のバーをドラッグ&ドロップで動かせます。

STEP.4
遷移先画面を配置

①右上のプラスボタンをクリック

ViewControllerを空いてる場所にドラッグ&ドロップ

STEP.5
遷移先の背景色変更

①ボードをクリック

(show the Attributes inspector)を選択

③「Background」をSystem Green Colorに変更

STEP.6
遷移させる

モーダル遷移ボタンを選択した状態で、controlを押しながら、緑の画面にドラッグ&ドロップ

 

Present Modallyを選択

STEP.7
実行してkakuninn

モーダル遷移というボタンを押すと、下から上に覆いかぶさるように遷移すると思います。

完了

モーダル遷移の戻るボタンの作り方

では、次はモーダル遷移の戻るボタンを作成していきましょう。

STEP.1
Buttonを配置

①右上のプラスボタンをクリック

②Buttonを緑のボードにドラッグ&ドロップ

STEP.2
ボタンのレイアウトを変更

①Buttonを選択

(show the Attributes inspector)を選択

③「Title」に閉じると入力

STEP.3
ファイル追加

緑の画面のプログラムファイルがないので作りましょう。

上のバーのFile>New>File....を選択

STEP.4
テンプレートを選択

①「Cocoa touch Class」を選択

②「Next」をクリック

STEP.5
タイトル5

①「Subclass of:」を「UIViewController」に変更

②「Class」にModalViewControllerと入力

③「Next」をクリック

STEP.6
保存先を決定

そのまま「Create」をクリック

STEP.7
Main.storyboardを選択

Main.storyboardを選択

STEP.8
プログラムファイルと画面の紐付け

①緑の画面の上のバーをクリック

(show the Attributes inspector)を選択

ModalViewControllerを選択

STEP.9
2分割表示

①上のバーをクリック

Command + option + control + enterで2分割表示

STEP.10
ボタンを紐付け

controlを押しながら、17行目と18行目の間にドラッグ&ドロップ

 

「Name」にbackButtonActionと入力して「Connect」

STEP.11
戻る処理を追記

@IBAction func backButtonAction~~~~の下の行に以下のコードを入力して下さい。

dismiss(animated: true, completion: nil)


STEP.12
実行して確認

このように、閉じるボタンを押すと元の画面に戻るはずです。

これで戻るボタンが完成しました!

完了

 

まとめ

うまくできましたでしょうか?

わからない部分があれば、TwitterのDMか、コメントで質問して貰えばすぐ返します。(コメントはレス遅いかも)

次の講座では、プログラムファイルと、storyboardの関係について学びます。

 

サトリク

このブログ(satorikublog)の筆者サトリクが、初心者の方に教えるサービスをはじめました。

気軽にご相談ください!

詳細はこちら

 

 

ゼロから学ぶiPhoneアプリ開発入門


もっとみる