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

サトリク

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

 

動作環境

item Version
Swift 5.2.4
Xcode 11.5

バージョンの確認方法

この講座の完成イメージ

今回開発するアプリは、画面遷移を使ったアプリです。画面の進むボタンを押すと画面2に遷移します。画面2で戻るボタンを押すと画面1に戻ります。

 

アプリ開発手順

プロジェクトを作成

前回のプロジェクトでもいいですが、プロジェクト作成に慣れるために、もう一度新しいプロジェクトを作成します。

STEP.1
Xcodeを起動

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

もし、Xcodeを開いている方は、command + shift + 1を押すと、次の画面を開けます。

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

Xcode起動

「Create a new Xcode project」を選択

STEP.2
テンプレート選択

Single View Appを選択する画像

①Single View Appを選択

②Nextをクリック

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

①「Product Name」にScreentransitionと入力

②「Language」はSwiftを選択

③「User Interface」でStoryboardを選択

④全てチェックなし

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

⑤「Next」をクリック

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

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

②Createをクリック

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

 

storyboard(画面レイアウト)の編集

まずは、画面のレイアウトから作っていきましょう。

STEP.1
Main.storyboardを選択

左のメニューバーから、Main.storyboardを選択

STEP.2
ViewControllerを配置

今回は2つの画面で構成するアプリを作るので、まずは画面を追加します。

①右上のプラスボタンをクリックするか、command + shift + LでObjectsウィンドウを開く

②「View Controller」を空いているところにドラッグ&ドロップ

これで、2つ目の画面を配置できました。

STEP.3
Buttonを配置

次はボタンを配置します。

①右上のプラスボタンをクリックするか、command + shift + LでObjectsウィンドウを開く

②Buttonと入力

③「Button」をそれぞれのボードの真ん中にドラッグ&ドロップ

STEP.4
ボタンを編集

次は、ボタンのレイアウトを変更します。

①Buttonを選択

(Show the Attributes inspector)をクリック

③「Name」に進むと入力し、「Font」をSystem 40.0に変更

STEP.5
もう1つ画面のボタンを編集

①ボタンを選択

(Show the Attributes inspector)をクリック

③「Name」に戻ると入力し、「Font」をSystem 40.0に変更

STEP.6
位置の設定

現状、ボタンは中央に配置されていますが、iPhoneSEなど、画面のサイズが異なるiPhoneだと、中央に配置されないので、以下のように位置を設定します。

①進むを選択

②2つにチェック入れて「Add 2 Constraints」をクリック

STEP.7
位置の設定

戻るボタンも同じように位置を設定します。

完了
これで、storyboard(画面レイアウト)の編集は完了です。

 

戻る画面に遷移する処理

STEP.1
画面遷移させる

次は、戻る画面に遷移する処理をstoryboard上で設定します。

進むボタンをcontrolを押しながら、右側のボードにドラッグ&ドロップ

すると、右のようなウィンドウが出てきますので、

「Present Moddally」を選択します。

ここでは画面の遷移の仕方を選択しています。

画面と画面の間にこのような矢印ができていたら成功です。

この矢印は、segueセグエと言います。Xcodeではよく出てくる用語なのでしっかりと覚えましょう。

これで画面遷移ができました。実行してみてみましょう。

STEP.2
実行

storyboardがiPhone11の画面なので、左上のiPhone SE(2nd generation)のところをiPhone11に変更しましょう。

変更したら、右上の再生ボタンをクリックするか、command + rで実行しましょう。

進むボタンを押した時、戻る画面に遷移したら成功です。

ですが、現状戻るボタンを押しても戻りません。

完了

これで画面遷移ができました。次は戻るボタンの処理を実装していきたいと思います。

 

コードと紐付け

前々回の講座で、一つの画面は基本的に、一つのstoryboardファイルと、一つのSwiftファイルで構成されているといいました。

現状、戻る画面にSwiftファイルがありません。なのでまずは、戻る画面のSwiftファイルを作成していきます。

STEP.1
ファイル作成

command + nで新規ファイルウィンドウを開きましょう。

ここでは、ファイルのテンプレートを選択します。

①「Cocoa Touch Class」を選択

②「Next」をクリック

STEP.2
ファイルの設定

NextViewControllerと入力

②「Next」をクリック

STEP.3
ファイルの保存先を選択

何もせずに「Create」をクリックしましょう

STEP.4
戻る画面と紐付けする

①Main.storyboardを選択

②戻る画面の上のバーの一番左の を選択

(Show the Identity inspector)を選択

④ClassをNextViewControllerを選択

これで戻る画面とNextViewControllerの紐付けが完了しました!

STEP.5
ボタンの紐付け

次は、戻る画面のボタンとNextViewControllerを紐付けをします。

①戻る画面のバーをクリック

command + control + option + enterで2画面にする

STEP.6
ボタンを接続

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

①NameにbackBtnActionと入力

②「Connect」をクリック

完了

これで、コードとstoryboardの紐付けが完了しました。

 

戻る処理を追加

次は、戻るボタンを押したときに、画面遷移元に戻るという処理を付け足しましょう!

STEP.1
NextViewControllerを選択

NextViewControllerを選択

STEP.2
ボタンを押した時の処理を追加

19行目あたりの@IBAction func backBtn(_ sender: Any) {の中は、ボタンが押した時の処理を書く場所です。

この中に処理を付け加えていきます。

以下のように変更してください。

@IBAction func backBtnAction(_ sender: Any) {
    dismiss(animated: true, completion: nil)
}

たったこの1行を書くだけで、戻る処理ができました。

STEP.3
実行して確認

command + rで確認してみましょう!

おそらく、進むボタンを押したら画面遷移し、戻るボタンを押したら画面遷移元に戻るはずです。

完了

これで、画面遷移アプリは完成です!

まとめ

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

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

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

 

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


もっとみる