Auto Layoutを始める前に

数年前、iPhone4sが全盛期のころまでは、iOSアプリの開発者は各端末のレイアウトを考える必要はありませんでした。
初代iPhoneからiPhone4sまでは画面サイズは一緒だったからです。
その頃に端末サイズのレイアウトで苦労していたのはAndroidアプリのエンジニアでした。（今もそうですが。。） 各メーカーごとに端末のサイズが異なり、それに合わせてアプリをデザインしなければなりませんでした。

しかし、2010年にiOSで動くタブレット、iPadが発売され、2012年にiPhone５が発売され、iOSエンジニアも各端末ごとのレイアウトをそれぞれで設定しなければいけなくなりました。

以下は、2015年12月現在で発売されているiOS端末の画面サイズの一覧です。

ピクセル解像度は物理的なピクセルを計ったもので、ポイント解像度はプログラムからアクセスする座標系で計った解像度です。
各端末ごとに、異なっていることが一目瞭然です。

異なる画面サイズでも、うまい具合に画面レイアウトができるようにする機能がAuto Layoutです。
iOSエンジニアにとっては避けては通れない重要な機能となりつつあります。

これから何回か記事をわたって、Auto Layoutを解説していきたいと思います。
Auto Layoutの概要、仕組み、具体的な機能を網羅するつもりです。
この記事を通して、Auto Layoutの理解が深まり、自分の思い通りのレイアウトができるようになればと思います。

レイアウトの基本

Auto Layoutの解説をしていく前に、レイアウトの基本を整理したいです。
アプリのレイアウトはいろいろな要素を組み合わせて配置させたものです。
一番基本となるViewや、文字を置くLabel、画像を表示するImageなどなど。

さて、様々な要素を配置するにあたって、最低限必要な情報は何でしょうか？

**X座標、Y座標、幅（Width)、高さ(Height)**です。

例えば、原点からX座標に100、Y座標に100、幅が120、高さが200の正方形は以下のように描写されます。

Swiftのコードでは以下のように書くと同様なビューを作る事ができます。

let view = UIView.init(frame: CGRectMake(100, 100, 120, 200))

Auto Layoutの難しさ

Auto Layoutはとっつきにくいです。
未だにまだ苦手意識を持っている人も多いのではないでしょうか？

Auto Layoutは「Constraint」(拘束）を設定してビューの位置や大きさを指定します。
この拘束は、隣り合ったビューの距離や中央配置などの関係性、大きさの指定ができます。

ある要素を配置したいと思った時に、周りの要素について考えなければいけないところに、Auto Layoutの難しさがあると思います。

たとえば、Auto Layoutでよくある指定が、親のビューからの上下左右の距離を指定です。

以下の画像は、オレンジのビューが親のビュー(赤い枠線のビュー）から上下10ポイント、左右30ポイント離れている指定です。
(実際のAuto Layoutの指定ではありません)

親ビューとの上下左右の距離を指定すれば、結果としてオレンジのビューのX座標、Y座標、幅（Width)、高さ(Height)が決まります。

オレンジのビューをレイアウトしたいと思った時には、オレンジのビューだけでなく、周りのビュー(この場合は親ビュー）との配置の関係性を考えなければいけません。

ここにAuto Layoutの難しさがあると思います。

今、自分が置きたいと思っているビューだけでなく、周りのビューとの関係を考えてレイアウトをしていけば、Auto Layoutを理解するのが早くなると思います。

次回からは、具体的なAuto Layoutのやり方を見ていきます。
お楽しみに！