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

作成中

 

サトリク

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

 

動作環境

item Version
Swift 5.3
Xcode 12.0.1

バージョンの確認方法

 

この講座の完成イメージ

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

画面の進むボタンを押すと画面2に遷移します。画面2で戻るボタンを押すと画面1に戻ります

 

アプリ開発手順

プロジェクトを作成

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

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をクリック

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

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

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

STEP.1
Main.storyboardを選択

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

STEP.2
ViewControllerを配置

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

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

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

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

STEP.3
Buttonを配置

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

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

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

STEP.4
ボタンを編集

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

Buttonを選択

(Show the Attributes inspector)をクリック

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

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

①右側の画面のButtonを選択

(Show the Attributes inspector)をクリック

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

STEP.6
位置の設定

現状、ボタンが中央に配置されていますが、しっかりと位置が決まっていない状態です。パズルで例えると、ただパズルを置いただけではめていない状況です。

そのため、以下のように、位置をしっかり決める作業をしていきます。

①進むを選択

(Align)をクリック

③「Horizontally in Container」と「Vertically in Container」にチェックを入れる

④「Add 2 Constraints」をクリック

これで、進むボタンの位置が決まりました。

STEP.7
位置の設定

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

①戻るボタンを選択

(Align)をクリック

③「Horizontally in Container」と「Vertically in Container」にチェックを入れる

④「Add 2 Constraints」をクリック

これで、戻るボタンの位置が決まりました。

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

戻る画面に遷移する処理

STEP.1
画面遷移させる

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

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

 

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

「Present Modally」を選択します。

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

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

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

これで、進むボタンを押したら、戻る画面に遷移するようになりました。実行してみてみましょう。

STEP.2
実行

①iPhone11に変更

②実行

 

進むボタンを押すと、戻るボタンに遷移することを確認してください。

完了

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

コードと紐付け

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

現状、戻る画面にプログラムファイルが紐づいていません。なのでまずは、戻る画面のプログラムファイルを作成していきます。

STEP.1
ファイル作成

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

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

①「Cocoa Touch Class」を選択

②「Next」をクリック

STEP.2
ファイルの設定

①「Subclass of :」をUIViewControllerに変更

②「Class:」にNextViewControllerと入力

②「Next」をクリック

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

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

STEP.4
Main.storyboardを選択

Main.storyboardを選択

STEP.5
ボタンの紐付け

 

①戻る画面の上のバーを選択

② (Show the Identity inspector)を選択

③ClassをNextViewControllerに変更

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

STEP.6
画面を2分割

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

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

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

STEP.7
ボタンを接続

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

 

①NameにbackBtnActionと入力

②「Connect」をクリック

完了

これで、コードとstoryboardのオブジェクトの紐付けが完了しました。

戻る処理を追加

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

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

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

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

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

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

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

STEP.2
実行して確認

実行して確認してみましょう。

左上の再生ボタンをクリック

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

 

 

完了

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

 

まとめ

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

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

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

 

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


もっとみる