Auto Layoutで上下の余白が等間隔になるようにviewを配置するには

  • 19
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

背景

IBやstoryboardでUIを実装しているとき、あるviewを上下の余白が等間隔になるように配置したくなることがある。
例えば、以下のようにxcodeのアイコンを白いエリアの中に置き、中央に配置したいとする。
てきとーに画像を置くと、4inchでは良さ気に見えていても3.5inchでは下のviewにかぶってしまっている。
かといって4inchと3.5inchで別々に設定するのも面倒。

test_—_Main_storyboard_—_Edited.gif
test_—_Main_storyboard_—_Edited_と_qiita_と_qiita.gif

そこで今回は、AutoLayoutで余白を決め打ちすることなく、4inchと3.5inchで同じように設定する方法をまとめる。

手順

まず、余白を含めた範囲を表現するUIViewを用意し、サイズが可変になるようにconstraintsを設定する。

スクリーンショット 2014-04-02 11.27.39.png

次に、余白をいいかんじに開けたい要素を前述のUIViewの中に配置する。
個々では例としてXCodeのアイコンを配置する。
このとき、以下のconstraintsを設定する。
ついでに横も同じように余白を設定したいときはwidthVertical Center in Containerも設定する。

  • height
  • Horizontal Center in Container
  • (optional) width
  • (optional) Vertical Center in Container

スクリーンショット 2014-04-02 11.28.16.png
スクリーンショット 2014-04-02 11.28.39.png

以上を設定してUpdate Framesしたりopt-cmd-=を押してconstraintsに合わせてviewを再配置すると、以下のように4inchでも3.5inchでもいい感じに余白を開けて設置できる。

スクリーンショット 2014-04-02 11.31.02.png
スクリーンショット 2014-04-02 11.31.28.png

中央じゃなく、ちょっと上に配置したい、などずらしたいときは、Horizontal Center in Containerの数値を0以外にすると調整できる。