※この記事はAutoLayoutを使う上で役に立つ小技を紹介してます。AutoLayoutを少し触ったことがある方向けです。

小技1 画面サイズに応じて拡縮する（この記事）
小技2 画面サイズに応じてマージンを取る
小技3 画面サイズに応じてフォントサイズ・行間を変更する

今回はAutoLayoutを使用した、画面サイズに対してViewを拡縮する方法について説明します。
正確には、画面の横幅から、Viewのサイズが動的に変わるようにします。

複雑なレイアウトにするとこの記事が論文のようになってしまうので、シンプルに長方形のViewを中央表示します。

こんな感じ

これは、Align Center X Yを付けて、ViewのWidth Heightが固定です。
なので、このサイズの画面では良い感じに配置されているかもしれませんが、別のサイズになってもこのサイズのままです。

これを画面の横幅に応じて、拡大・縮小するには、「Aspect Ratio」と、「Equal Width」を使います。

実際やっていきます。まず、最初に付けていたWidth Heightの固定を外します。

※サイズを指定してないので、うまく配置できないと怒られます。（赤くなります）

そしてAspect Ratioで、この長方形のアスペクト比を指定します。これはチェックボックス入れるだけなんで簡単です。

次に「Equal Width」を付けます。何とEqualとするかというとViewControllerのViewです。

下図のようにcontrolキーを押しながら親のViewを指定するとEqual Widthが選べます。

これだけだと、親のViewと同じWidthね、という制約になり横に伸びるので、「Equal Width」の「Multiplier」をいじります。

Equal WidthのEditを選択し、詳細を表示します。

現状、Multiplierは1になっていますが、これを親Viewから見た長方形のViewの比率にします。

親ViewはWidthが320、長方形はWidthが200なので、200/320です。

※これくらいなら暗算できそうですが、私は計算している時間がもったいないのでspotlightを使います。

0.625とのことなので、Multiplierに0.625を入れます。これで親Viewと等しい、から、親View0.625の長さね、になります。

これで親View、すなわち画面の横幅が増えた時はそれにつられて、長方形の横幅が伸び、さらにAspect Ratioが入っていることにより、縦幅も同じ比率を維持するので伸びます。

こんな感じで5.5インチの場合、Width 200 が 259になってますね！(414 * 0.625の結果)

この方法で、どの大きさの画面で見ても比率を維持して拡縮できるようになります。

最後に

この方法は、あくまで「横幅に応じて」のため、3.5インチ端末の場合思った通りにならない場合がありますので、臨機応変に対応してくださいね。