クイズアプリの Storyboard の設定(4/5)

結果表示画面の作成

画面は以下のように設計されている

Xcode上で、左のツリーから、Storyboard を選択する。

Image View を配置する。Content Mode を、Aspect Fit と指定する。

Image View の制約を設定する。Add New Constraints を選択し、上を、30 と設定し、Width と、Height を、300　に指定し、Add 3 Constraints を選択する。

Align を選択して、Horizontally in Container にチェックを入れて、Add 1 Constraint を選択する。

Label を配置する。Line を 3 に設定する。

Label の制約を設定する。Add New Constraints を選択し、上左右から、30 の位置に配置されるように制約を設定し、Add 3 Constraints を選択する。

Button を配置し、テキストを「戻る」と変更し、Background を、ButtonIcon と指定する。

Button の制約を設定する。一番下のボタンを選択、Add New Constraints を選択し、下左右から、30 の位置に配置され、Height を 40 とするように制約を設定し、Add 4 Constraints を選択する。

IBOutlet を接続する。まずは、Show the Assitant editer を選択して、2画面表示へ切り替える。

Image View を選択して、controlキーを押しながら、右側に表示されたコードに向けて、ドラッグ＆ドロップすると、ウィンドウが表示されるので、Nameに「resultImageView」と指定し、connect を選択する。

Label を選択して、controlキーを押しながら、右側に表示されたコードに向けて、ドラッグ＆ドロップすると、ウィンドウが表示されるので、Nameに「resultLabel」と指定し、connect を選択する。

コードにコメントを記入する。(// で始まる部分)

// IBOutlet 　　← これを追加
@IBOutlet weak var resultImageView: UIImageView!    
@IBOutlet weak var resultLabel: UILabel!

Show the Standard editer を押して元に戻します。