サトリクのこだわりのモノ紹介

【Xcode/Swift5】入門編!クイズアプリを作成してみよう!参考書より丁寧に解説します。【Part2】

サトリク

この記事は、Pert2です。前編を読んでいない方は、上記の記事から読んでください。

 

今の状態

サトリク

前回の記事では、主にstoryboardをある程度完成させました。

こんな感じになっていると思います。

現時点の進捗の画像

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

スタートボタンを作成する

まずは、スタート画面のスタートボタンを押したら、次の問題画面に遷移するようにしましょう。

STEP.1
main.storyboardを選択
Main.storyboardを選択する画像

まずは、Main.storyboardを選択しましょう。

STEP.2
問題画面に遷移させる

スタートボタンを選択し、controlを押しながら問題画面にドラッグ&ドロップしてください。

サトリク

controlはキーボードの左側にあります。

controlを押しながらドラッグ&ドロップする画像

STEP.3
Present Modallyを選択
画面遷移の仕方を選択する画像

controlを押しながらドラッグ&ドロップすると左のようなウィンドウが出てきます。

ここでは、Present Modallyを選択しましょう。

ここでは、画面遷移の仕方を決めています。

セグエはこれって画像

ちなみにこれがsegueです。iOSアプリ開発をやってるとよく出てくる言葉なので、今覚えておきましょう。

STEP.4
実行してみよう!

実行の仕方は、左上のボタンを押すか、command + rです。

スタート画面の画像

スタートボタンを押すと

ラベルなどを配置した画像

次の画面に移動します。

たったこれだけの作業で、画面遷移ができちゃいます!

STEP.5
完全な画面遷移にする

気づいた方もいるかもしれませんが、この画面遷移は完全な画面遷移とは言えません

新しい画面が下から出てきた感じになっています。

上に隙間ができていて、上の部分を下に下げるとスタート画面に戻ってしまいます。

PresentModallyの特徴の画像

完全な画面遷移にしよう。

①問題画面の上のバーを選択する

このマークを選択する

③PresentationのところをFull Screenにする

完全な画面遷移にしようの画像

実行してみてください!おそらくいい感じになっているはずです!

完了

サトリク

さて次は、コードを書いていきます。

コードとStoryboardののオブジェクト紐付け

サトリク

次は、コードとstoryboardのオブジェクトの紐付けを行います。慣れてないと意外と難しい作業なので、よく確認しながらやっていきましょう!

STEP.1
コードを画面に表示させる

Main.storyboardで、問題画面を選択し、

command + option + control + enterを押してください。

サトリク

そうすると、このように、右側にコードの画面が現れます。

コードの画面を出す画像

ですが、ウィンドウが色々あって見づらいですよね。そいうい時は、今の作業で使わないウィンドウは非表示にしましょう。

ウィンドウを表示非表示の切り替えをする画像

非表示のやり方は、右上のこのボタンを押すだけで表示非表示切り替えできます。

ショートカットキーでやるなら、

右側が、command + option + 0

左側が、command + 0

下が、command + shift + y

です。覚えておくとかなり楽になります!

こんな感じに見やすくしましょう。

STEP.2
Labelを紐付ける

Labelを選択して、controlを押しながら、12行目と13行目の間にドラッグ&ドロップしましょう。

Labelの名前をつける画像

このようなウィンドウが立ち上がりますので、

Nameに、quizNumberLabelと入力し、Connectを押しましょう。

STEP.3
TextViewを紐付ける

TextViewも同じように、controlを押しながら13行目と14行目の間にドラッグ&ドロップしましょう。

TectViewをドラッグ&ドロップする画像

TextViewをコードに紐づける画像

Nameに、quizTextViewと入力し、Connectを押しましょう。

STEP.4
Buttonを紐づける

Buttonも同じように、controlを押しながらドラッグ&ドロップしましょう。

anserBtn1と名前をつける画像

Nameに、answerBtn1と入力し、Connectを押しましょう。

同じように、残りのボタンも紐付けしましょう。

名前は、answerBtn2answerBtn3answerBtn4にしましょう。

STEP.5
ここまでのコード

ここまでのコードの画像

サトリク

QuizViewControllerのファイルがこのこのようになってたら、OKです。

完了

ボタンをタップした時の判定の実装

サトリク

次は、どの選択肢がタップされたかを判定するためのコードを書きます。

先ほど、ボタンとコードを紐付けをしましたが、あの紐付けだけでは、どこのボタンが押されたかわからないので、次は違った紐付けの仕方をします。

STEP.1
Button1をコードと紐付ける

まずは、Main.storyboardを開きましょう。

問題画面の一番上のButtonを選択し、controlを押しながら、コードの25行目と26行目の間にドラッグ&ドロップしてください。

controlを押しながらドラッグ&ドロップ

actionBtnのActionメソッドを作成する画像

ConnectionがActionになっていることを確認し、NameにactionBtn1と入力してConnectを押しましょう。

STEP.2
Button2もButton1と同じようにする

Button1と同じように、2番目のボタンもコードと紐付けをしましょう。

actionBtn2と名付ける画像

NameにactionBtn2と入力してConnectを押しましょう。

STEP.3
同じようにボタン3、4も行う。

Button1とButton2のように、Button3、Button4もコードに紐付けましょう。

サトリク

紐付けが終わるとこのようになっているはずです。

STEP.4
押されたらコンソール上にどの選択肢を押したかを判定する

どの選択肢が押されたかを確認するために、コンソール上に表示してみたいと思います。

以下のように、コードを編集してみてください。

追加した場所は、print(“選択肢を◯をタップ”)をそれぞれのactionメソッドに書いただけです。

では、どのようになっているか実行して確認してみましょう。

STEP.5
実行してみる

左上の再生ボタンを押すか、command + rを押して、実行してみましょう。

コンソール(右下らへん)に自分がタップしたボタンの結果が表示されるようになります。

これで、どのボタンが押されたかわかるので、問題の判定ができます。

どのボタンが押されているかを判定してる画像

完了

ここまでやってきたことは、

スタートボタンを押したら、次の画面に遷移し、選択肢を選ぶと、コンソールに選択肢◯をタップと表示される

ところまでです。ここまでできていたらOKです!

サトリク

次はガリガリコードを書いていきましょう!