【iOSアプリ/Swift4】○✗クイズを作ろう！Part1

Swiftで簡単な○✗クイズを作成していきます。
完成形がこちら↓

タイトル→問題提出→結果という構造。
最後のスクリーンでは間違えた問題をタップすると解説のサイトへ誘導します。

ではさっそく作っていきましょう😉

STEP1. それぞれの画面をストーリーボードで作成する

- Xcode → iOSアプリ → Single View Appで新しいプロジェクトを作成
- 問題提出と結果用に新たにViewControllerを2個追加

まずタイトル画面を作ってきましょー
- ゲームタイトル用ラベルと次の画面に進む為のボタンを配置
- ラベルとボタンを両方セレクト → 画面下にあるEmbed in Stackでスタック化

- AutoLayoutで制約追加

- ラベルとボタンの名前変更
- 大きさもそれぞれ30pxと15pxに拡大
- ラベルの配置はCenterに
- ボタンから次のViewControllerへの遷移をCtrl+ドラッグで追加(表示の仕方はShowを選択)

以上でタイトル画面完成です。

次に問題提出の画面を作ってきましょー
- 問題提出用のラベル、⭕と❌の為のボタンを２つ、進行度を表示用のProgress Viewを配置

- 先程と同じように要素をスタック化
①横に並んだ２つのボタンをハイライト → スタック化
②ボタンを２つ含むスタックと進行バーをハイライト → スタック化
(このようにスタックを更に別の要素をスタック化すると制約の数が減らせて楽👍)
- ボタンのテキストを⭕と❌にし、サイズを40pxに拡大
- ②で作成したStackの属性インスペクタでAlignmentをCenter, spacingを30pxに設定
- ①で作成したStackの属性インスペクタでspacing を100pxに設定
- Progress ViewをAutoLayoutで左右目一杯広げる

- 問題提出用Labelを
(1)AutoLayoutで左右に16px、上に40pxの制約を追加
(2)テキストSizeを24pxに拡大
(3)センター配置に変更
(4)表示ラインを1→0に変更

• Editor → Embed in → Navigation Controller でナビゲーションコントローラを画面に埋め込む
• ViewControllerの上にある五円玉のようなマークから次の画面にCtrl+ドラッグしてShowを選択

以上で問題提出画面は完成です。

最後に結果画面を作成してきましょー

- ラベルを2つ追加 → 縦スタック化
- スタックのAlignmentをCenterに、DistributionをEqual Spacingに、Spacingを30pxに設定
- Labelの大きさをそれぞれ30pxと25pxに拡大
- AutoLayoutで左右上16pxの制約を追加

- オブジェクトライブラリからTable Viewを追加
- AutoLayoutで左右上下それぞれ0pxの制約追加
- TableViewCellをTableViewに追加

以上で一旦ストーリーボードのデザインは終了です😉
次回からは問題提出のクラスを作成していきます。