読者です 読者をやめる 読者になる 読者になる

LIFULL Creators Blog

「株式会社LIFULL(ライフル)」の社員によるブログです。

Xcode5のAuto Layout動作検証 - Add Missing Constraints

はじめまして。池田と申します。

 

今回は、Xcode5のstoryboard上で、オブジェクトに対してAdd Missing Constraintsを適応した際の動作検証とその結果についてご紹介したいと思います。

 

AppleのAuto Layoutガイドを見ると、Add Missing Constraintsを適応することにより、「現在の配置の状態から必要な制約を推測し、自動的に追加する」と記述がありますが、ここでは、"推測"した結果どのような制約が追加されるのかを検証します。

 

 

Add Missing Constraintsの適応方法

storyboard上で、オブジェクトを選択し、Issues > Add Missing Constraintsを選択することで、そのオブジェクトに適応できます。

f:id:nextdeveloper:20131112183151p:plain

 

以下、独立したオブジェクトに適応するパターンと、周辺にオブジェクトがあるオブジェクトに適応するパターンでの検証結果をご紹介します。

また、検証結果は、Assistant EditorのPreview機能を用いて、 横画面の配置を確認しながら、紹介していきたいと思います。

f:id:nextdeveloper:20131112191211p:plain

 

独立したオブジェクトに適応した場合

左右位置が中央、上下位置が中央より少し上に配置されたボタンに対して適応します。

  • 適応前

f:id:nextdeveloper:20131112192521p:plain

  • 適応後

f:id:nextdeveloper:20131112192948p:plain

 

適応後は、superViewの左右中央に固定する制約と、上端からの位置を指定する制約が追加されています。横画面の配置を確認しても、左右中央、上端からの位置は縦画面の配置と変わらず、固定されていることが分かります。

今回の例では、左右中央としていますが、これを中央から少し左にずらすと、左端からの位置指定が制約として追加されます。

独立したオブジェクトに対してAdd Missing Constraintsを適応すると、左右位置の指定と、上下位置の指定が必要と推測され、どちらかの端に寄っていればその端からの位置指定、中央であれば中央固定の制約が追加される結果となりました。

 

周辺にオブジェクトがあるオブジェクトに適応した場合

次に、周辺にオブジェクトがあるオブジェクトに対する適応を検証してみたいと思います。

中央にボタンを配置し、その上下左右にボタンを配置した例で検証します。

  • 適応前

f:id:nextdeveloper:20131113114525p:plain

  • 適応後(中央のボタンに)

f:id:nextdeveloper:20131113114728p:plain

 

Add Missing Constraintsを適応したのは、中央のボタンになりますが、周辺のボタンの配置に対しても影響を及ぼしていることが分かります。

具体的な影響としては、中央のボタンから、周りのボタンへの間隔の制約と、整列の制約が追加されています。

横画面の配置を確認すると、中央にボタンが配置され、上下左右にボタンが配置されるという、縦画面の配置と同様の配置になっていることが分かります。

 

では次に、さらにオブジェクトを増やし、複雑なレイアウトにしてみようと思います。中央の上下左右にボタンを配置し、その更に上下左右にボタンを配置してみます。

  • 適応前

f:id:nextdeveloper:20131113115242p:plain

  • 適応後(中央のボタンに)

f:id:nextdeveloper:20131113115549p:plain

横向きの配置を確認すると、Add Missing Constraints適応後、中央のボタンと、その上下左右のボタンは縦画面の配置と同様の配置になっていますが、その外側のボタンは縦画面の配置とは異なった、意図しない配置になっています。

また、エラーが出ており、ここのエラーは、一番外側の4つのボタンの位置指定に対する制約が不足している旨のエラーが出ています。

f:id:nextdeveloper:20131113115906p:plain

そこで、制約が足りない4つのボタンに対して、それぞれAdd Missing Constraintsを適応します。

すると各ボタンに位置指定の制約が追加され、以下のようになります。

f:id:nextdeveloper:20131113120304p:plain

横画面の配置を確認すると、今度は、縦画面の配置と同様の配置となっており、エラーもなくなっていることが分かります。

 

まとめ

以上から、Add Missing Constraintsの適応は、

  • 周りにオブジェクトがある場合、他のオブジェクトの配置にも影響を及ぼす
  • 複雑なレイアウトの場合、完全に制約を追加しきれない場合もある

などの注意点もありますが、一発、または複数回、この設定を適応していくことで、自動的にレイアウトを調整できる場合もあります。

この機能を最初見たときは、"推測"で制約が追加されるなんて、何が起こるか全然分からないし、なかなか使えないという思いが結構あったのですが、実際使ってみると、あ、うまく使えばレイアウトの設定、意外と省力化できるかもという感覚を持っています。

最終的には、オブジェクトのサイズの調整であったり、なんらかの調整は必要になってくるとは思いますが、まずざっくりとしたレイアウトを決める、画面サイズによらず、中央にあるレイアウトでオブジェクトを配置する、など、場合に応じて使ってみるのもよいかと思います。

設定しても、アンドゥですぐ戻せるので、一回試してみるのもありだと思います。

 

以上、今回の検証がレイアウト設定をされる際の参考になれば幸いです。