はじめに

Merry Christmas!

皆さんがこの記事を読んでいるときに、僕が海外にいるかもしれませんが!!!

これはドリコムAdventCalendar の25日目です。最後の日です。
24日目は、@hayato240です

自己紹介

はじめましてタイのサトシです。2013年４月新卒で入社しました。
iOS開発が好きです。趣味は海外旅行と映画を見ることです。

現在は担当しているチームでiOSエンジニアをやっています。

iOSアプリの開発経験は１年未満なので、先輩方々から様々な知識を学んでいます。
iOS開発の中ではいろいろなことを学んでいますが、最近自分が学んでいるAuto Layoutを
簡単に紹介したいと思います。

本題

Auto Layoutとは

Auto Layoutはアプリケーションのユーザインタフェイスを作成するシステムで、制約 (Constraint) に基づいてviewとの関係を作成したり、viewと自分のsuperviewを関連付けたりすることができます。Auto Layoutを導入することによって、画面の大きさや向きの違いに応じて動的に変化する、汎用的な画面レイアウトを作ることができます。

Auto Layoutの特徴

Apple資料に書いてあるAuto Layoutの特徴は以下のようになります。

必要に応じていつでも制約を追加できる
Ctrlキーを押しながらドラッグする操作、またはメニューコマンドにより、簡単に制約を追加できる
制約とFrameをそれぞれ独立に更新できる
動的に配置が決まるビューに、プレイスホルダ制約を指定できる
相反する制約、配置がひと通りに決まらないビューなどの問題は、状況を視覚的に確認しながら解消できる

Auto Layoutの考え方

Auto Layoutで使っているのは制約(Constraint)という考え方です。これはインタフェイスを構成する要素のレイアウト（配置）を決める規則です。
ある要素の幅や高さを指定する制約、他の要素からの左右のmarginなど指定する制約があります。実行時に指定した制約と画面の大きさに基づいて、画面のレイアウトが動的に変化されます。

また、Xcode6からSize Classesが導入されました。Size Classesを使うことによって一つのビューだけで端末ごとにAuto Layoutを簡単に作成することができます。

制約に関する基本事項

制約を指定するために以下のように基本の項目があります。

属性:left、right、top、bottom、leading、trailing、width、height、centerX、centerY、baseline

属性leadingとtrailingは、左から右へ書く言語の場合はleftおよびrightと同じですが、に右から左へ書く言語ならばleadingおよびtrailingとright
およびleftと同じ意味になります。

制約には以下のプロパティがあります。

定数値 (Constant value) 　ポイント単位の大きさ
関係 (Relation) 　ビューの属性値として、定数値以外関係式も設定することができます。
優先度 (Priority level) 　制約には優先度を指定することにより、優先度の高い制約をまず満たした後で、優先度の低い制約を反映するとなっています。

Interface BuilderでAuto Layoutを指定する

Auto Layoutを指定する方法はコードとInterface Builderがあります。今回は例としてInterface BuilderでAuto Layoutを指定する方法を紹介します。

Xcode6以上でnibファイルまたはstory boardを作成すると、自動的にAuto LayoutとSize Classesが設定されています。

以下の画像の下に書いてある「wAny hAny」のSize Classesで設定されています。この状態でビューを作成すると全ての端末(iPhone、iPad)が同じレイアウトになります。

XcodeのAuto Layoutツールを説明します。

Align 揃えに関する制約を指定します。コンテナの中央に寄せる、2つのビューの左辺に揃える、などができます。
PIN 空間的レイアウトに関する制約を指定します。ビューの高さを定義する、別のビューからの水平距離を指定する、などができます。
Issues。レイアウトの問題を解決するためのコマンドで、どのような制約を追加・削除すればよいか、候補が現れます
Resizing 大きさが変わったとき、制約にどのような影響を及ぼすか、を指定します。

例

今回以下の画像のようにAuto Layoutでビューを作成します。

制約

上の画像のようなビューを作成するために、以下の制約を指定する必要があります。

左右のMarginが100pxの固定で、画面の幅によりビュー（青・黄色）の幅が動的に変更
iPadの画面の高さがかなり広いのでiPadのみビューとの下Marginを最も多くする
iPadのビューだけで別のビュー（ピング）を追加し、真中に配置する

1.まず左右のMarginが100pxの固定で、画面の幅によりビュー（青・黄色）の幅が動的に変更する制約を指定する

　class sizeがwAny hAnyの状態で４つビューを作成し、幅が400で高さが50を設定します。一番上のビューにxが100yが183の設定を追加し、残りのビューにxが100yが上のビューから 13pxの設定します。フレームの設定が終わったら、Auto Layoutを設定します。必要な制約は高さ、左、右、上になります。

Auto LayoutツールからPinメニューを選択し必要な制約を設定し、「Add 4 Constrains」ボタンを押します。残りのビューも同じのように設定を行いますが、上のMarginが183ではなく13になります。

2.iPadのみでビューとの下Marginを最も多くする制約を指定する。
　まず、下に書いてある「wAny hAny」のSize Classesを押して以下の画像のように
iPadのSize Classesを選択すると「wRegular hRegular」に変更されいます。。この状態でビューのフレームや制約を修正しても、iPhoneのレイアウトに影響がありません。

一番上のビュー以外を選択し、右側のSize inspectorにあるTop Spaceの制約の「edit」ボタンを押し70を入れると、ビューの制約とフレームが更新されます。