国旗を選択するテーブルビューをSwiftで作成してみよう！！　その1

オリンピックブームに完全に乗っかって、国旗を選択するテーブルビューを作成してみようと思います。
前回までのテーブルビューの基本的な作成法をもとに進めていきますよ。

※今回は全ての国を表示させるのは大変なので、ひとまず10カ国のみの表示とします。
※各国旗はフリー素材のものを使用しています。

完成系が分かっていた方が何をやるのかがわかりやすいと思いますので、ひとまずこんな感じの
ものを作成していきたいと思います。

初期画面はオリンピックのマークで、

各国のセルをタップするとその国旗がオリンピックのマークに変わって表示される。

というものです。
（国旗でかい…？笑）

ここでのポイントは以下のようなものが挙げられます。

①画面上部は国旗を表示するImageViewを配置。（国旗のサイズはタテ:ヨコ=2:3とします）
②画面下部にテーブルビューを配置。どちらもAuto Layoutで制約を設けます。
③国名と小さい国旗を各セルに表示する。（New!）
④セルをタップするとその国名の国旗をImageViewに表示する。（New!）

今回はこの①の部分をやっていきます。この部分は全くテーブルビューとは関係ないですね。笑

STEP1.画面上部に国旗を表示するImageViewを配置

オブジェクトライブラリからImageViewをドラッグ&ドロップします。配置位置、サイズはAuto Layoutで
調整しますので適当で結構です。

◼︎AutoLayoutで配置位置・サイズの制約を設ける

Auto Layoutで設ける制約のイメージは次のようになります。
・とりあえず画面の上いっぱいに表示する。（ただし、ステータスバーには被らないようにする！）
・画面の横幅いっぱいに表示する。画面両脇には余白などのスペースは設けない。
・ImageViewの横幅を軸として、縦幅はその2/3（タテ:ヨコ=2:3）とする。
では実際に制約を設けてみましょう。

ImageViewを選択した状態でAuto LayoutのPinメニュー（右から2番目、青枠）を開き、
上方向の制約を設けます。上方向はステータスバーに被らないようにするため、右側の▼を
クリックして、「Top Layout Guide」が選択されている（基準がステータスバーの下になっている）ことを
確認しましょう。

確認したら値を0にします。

次に左右の制約です。左右は横幅いっぱいに国旗を広げますので、まずマージン（余白）を入れないようにしないと
いけません。そのため下図の赤枠のチェックを外し、左右の値を0にします。

次は縦幅の制約を設けます。縦幅と横幅を比率によってサイズを調整したい場合はPinメニューの「Aspect Ratio」の
制約を用います。この制約はストーリーボード上に現在配置されている状態のタテヨコ比率をキープする
というものですが、後から比率を変更することができます。こいつを使用してタテ:ヨコ=2:3にしてあげるんですね。

最後にUpdate Framesを実行してサイズを制約通りに更新してやりましょう。今回は単純にImageViewだけ
のサイズを更新するだけですので、None以外の2つどっちを選択しても問題ありません。

そうするとImageViewがステータスバーの下側にぴったりくっついた状態かつ横幅いっぱいに広がりました。
さて、次は比率の調整ですね。下図赤枠内の数値を確認してみると、「15:8」となっています。

これは先ほどドラッグ&ドロップして配置した時の比率がそうだったんでしょうね。それが引き継がれて
（比率がキープされて）ImageViewが大きく拡大された形になっています。
こいつを3:2にしてあげれば良いわけですね！