Personal Factory

Auto Layoutを使ってみよう

佐藤 剛士 -

前回の記事でAuto Layoutがどんな機能なのかを説明しました。

今回は実際にAuto Layoutを使ってみたいと思います。

サンプルとしてViewを中央配置するレイアウトを作ってみたいと思います。

レイアウトをするときは、前回言ったとおり
今レイアウトしている要素のX軸、Y軸、幅(Width)、高さ(Height)が決まっているか？
を考えながらレイアウトしましょう。
上手くいくと思います。

Auto Layoutの制約の追加する方法は大きく分けて２つあります。
「Align」「Pin」の２つです。

Alignは２つ以上のビューを整列させる時に使います。

Pinは隣り合ったビューの距離、ビューの大きさなどを数値で固定させたい時に使います。

**note:**Xcodeではのキャンバスと、実際のレイアウトは異なるということは頭に入れておいてもいいかもしれません。
ストーリーボードのViewControllerはデフォルトで600px × 600pxの大きさ。
対して、実際のiPhoneの大きさは端末によって異なります。
他のグラフィックツール（Adobe IllustratorやAdobe Photoshop)と同じ感覚で使うと思わぬ落とし穴があるので気をつけましょう

Viewを中央配置してみる

Viewを親ビューに対して中央配置するレイアウトを作ってみます。
まず新規にプロジェクトを作って、Main.storyboardを選択しましょう。
Object libyraryからViewを一つView Controllerへ置きます。
(わかりやすいように背景を青に変更しました）

そして、Viewを選択した状態で、Alignパネルから
Horizontal Center in Container
Verical Center in ContainerにチェックをいれてAdd 2 Constraintsをクリックします。

すると、エラーが出ました。

今、青いビューはAlignパネルからHorizontal Center in ContainerとVerical Center in Containerの制約を追加している状態です。

Horizontal Center in Containerは「親ビューの水平方向の中心位置をそろえる制約」で、これで青いビューのY軸が決定します。

Verical Center in Containerは「親ビューの垂直方向の中心位置をそろえる制約」で、これで青いビューのX軸が決定します。

エラーの原因はX軸とY軸のみが設定されて、幅(Width)と高さが(Height)が決まっていないからです。

Auto Layoutのエラーの原因をResolve Auto Layout Issues メニューを開いて見てみます。

View
Need constraints for: X position or width

このエラーは必要な制約が設定していないために起こっていて、青いビューにXポジションか幅の制約が必要と知らせています。

同様に

View
Need constraints for: Y position or height

も青いビューにYポジションか高さの制約が必要と知らせています。

ビューに幅と高さを決める制約を追加しなければいけません。
追加してみましょう。

幅と高さを決定する制約には

  • 自身のViewの高さと幅の制約を追加する
  • 隣り合ったビューとの距離の制約を追加する

の二通りがあります。
それぞれを見てみましょう。

View自身の幅と高さを決定する場合

まず、単純にView自身の幅と高さの制約を追加する場合を見てみます。

青いビューを選択してPinパネルを開きます。
WidthとHeightの項目にチェックボックスを入れて、それぞれ300の数値を入力します。
そしてAdd 2 Constraintsをクリックします。

すると青いビューのAuto Layoutのエラーがなくなり、ワーニングが出てきます。
このワーニングは、ストーリーボード上の見た目のレイアウトと実際のレイアウトにずれがある場合に表示されるワーニングです。

Resolve Auto Layout Issues メニューを開いて解決させます。
△のアイコンをクリックして出てきたパネルの

Update frame > Fix Misplacementをクリックします。

これで、ワーニングが解消されるはずです。

**Note:**見た目が違うことによるワーニングはよくでます。
ワーニングが出ても慌てなくで大丈夫です。

ビルドしてみます。
こんな結果になります。

隣り合ったビューとの距離の制約を追加する場合

隣り合ったビューとの距離の制約を追加することで結果的に青いビューの幅(Width)と高さ(Height)も決まります。

Pinパネルを開いて

  • 上部0
  • 左部0

を設定してAdd 2 Constraintsをクリックして制約を追加します。

ワーニングが出たら先ほどと同じ手順で解決します。

ビルドしてみます。
このようなレイアウトになります。

まとめ

Auto Layoutでビューを中央表示するやり方を見てみました。

いまレイアウトしている要素のX軸、Y軸、幅(Width)、高さ(Height)がどうなっているのかを考えながらAlignやPinで制約を追加していけば、自分の思う通りのレイアウトができるはずです。

いろいろ試してみれば早く慣れるかもしれません。
次回は細かいAuto Layoutの設定方法について解説します。