アプリ開発したい人にオススメのプログラミングスクール

【Swift5/Xcode】超簡単な画面遷移アプリを作ってみよう!『Step4』

サトリク

この記事では、アプリの基本の画面遷移について

超初心者でもわかりやすく解説していきます。

 

動作環境

item Version
Swift 5.1.3
Xcode 11.3

バージョンの確認方法

画面遷移アプリのイメージ

サトリク

こんな感じのを作成します

進むボタンを押したら次の画面に遷移し、戻るボタンを押したら前の画面に戻るアプリです。

単純で簡単なアプリですが、基本操作を覚えるにはこのくらいのアプリでちょうどいいです。

では、早速作っていきましょう!

 

画面遷移アプリの作成手順

プロジェクト作成

STEP.1
プロジェクトの作成

「Create a new Xcode Project」を選択

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

①「Single View App」をクリック

②「Next」

ここでは、プロジェクトのテンプレートを選択しています。

STEP.3
タイトル3

①「ProductName」にScreenTransitionと入力

②「User Interface」にStoryboardを選択

その他は適当で大丈夫です。

③「Next」を入力

STEP.4
保存フォルダー選択

「Create」をクリック

保存する場所は任意です。

完了

storyboardの設定

アプリは、画面の構成を作る、storyboardファイルと、処理を記述するswiftファイルがあります。

まずは、storyboardを設定していきます。

STEP.1
Main.storyboardを選択

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

項目がない場合は、以下の2つの事象が考えられます。

事象①:ナビゲーターエリアが非表示になっている場合

解決方法command + 1でナビゲーターエリアを表示する。

事象②:プロジェクトの作成時にstoryboardではなく、SwiftUIを選択してしまった場合

解決方法:プロジェクトを作成し直す。

STEP.2
ViewControllerを配置

今回は、2つの画面を使います。

デフォルトでは、画面が1つか用意されていないので、もう1つの画面を配置します。

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

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

STEP.3
Buttonを配置

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

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

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

STEP.4
ボタンを編集

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

①ボタンを選択

(inspector)をクリック

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

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

①ボタンを選択

(inspector)をクリック

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

STEP.6
画面遷移させる

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

「Present Moddally」を選択

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

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

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

完了

これでStoryboardの設定は終わりです。

実行してみる

commnad + rで、実行してみましょう。

今の状況だと、進むことはできるのですが、戻ることが

コードと紐付け

今回のアプリのファイルの関係は、こんな感じです。

Main.storyboardの2つの画面それぞれに、ViewControllerとNextViewControllerを紐づいているという関係です。

プロジェクト作成時に、Main.storyboardとViewController.swiftがあるので、NextViewControllerを追加していきます。

STEP.1
ファイル作成

ここは、ファイルのテンプレートを選択するウィンドウです。

①「Cocoa Touch Class」を選択

②「Next」をクリック

STEP.2
名前付け

NextViewControllerと入力

②「Next」をクリック

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

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

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

①Main.storyboardを選択

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

(inspector)を選択

④ClassをNextViewControllerを選択

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

STEP.5
ボタンの紐付け

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

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

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

STEP.6
ボタンを接続

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

NameにbackBtnと入力し、Connectをクリック

完了

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

コーディング

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

STEP.1
NextViewControllerを選択

STEP.2
ボタンを押した時の処理を変更

19行目あたりの@IBAc~は、ボタンが押した時の処理を書く場所です。

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

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

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

実行

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

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

今までやってきたのは、超基本的な作業なので、慣れるまで繰り返しやってみてもいいかもしれません。

サトリク

僕はこの作業を3分以内でできるまで繰り返しました。

今では、1分50秒くらいでできます。笑

コメントを残す

メールアドレスが公開されることはありません。