【Xcode AutoLayout】小技2 画面サイズに応じてマージンを取る Tips

※この記事はAutoLayoutを使う上で役に立つ小技を紹介してます。AutoLayoutを少し触ったことがある方向けです。

 

  1. 小技1 画面サイズに応じて拡縮する
  2. 小技2 画面サイズに応じてマージンを取る(この記事)
  3. 小技3 画面サイズに応じてフォントサイズ・行間を変更する

 

前回 画面サイズに応じて拡縮する という記事を書きましたが、今回はそれの応用。

画面サイズに応じてマージン取る方法を紹介します。

簡単なAutoLayoutのマージンの取り方として、Top Space を使って、上にあるViewから何pxという方法を取ると思います。ただこの方法を使い、色々な画面サイズで同じように表示する場合は、storyboardを画面サイズ分用意する必要があります。
ただそれは保守する上で辛いので、極力やめたいところです。

 

では実際にやっていきます。

まずは、下記のようにTop Spaceを50にした、青いViewを配置しました。
このView自体は 前回の方法 で拡縮が行われるように設定してます。 

次にTop Space制約を外します。


※origin.yに相当する情報が無くなったため、赤くなって怒られます。

50 x 50の緑のViewを青いViewの上に配置します。
(緑なのはわかりやすくするためで、heightだけが重要なので、widthは適当でも良いです)

薄々わかってきたかもしれませんが、この緑のViewにも拡縮するように、前回の方法 で制約を付けます。

 

次に緑のViewにTop Space 0でステータスバーとの距離を指定し、Bottom Space 0で、青いViewとの距離を指定します。

これで完了です。緑のViewが画面の横幅に応じて拡縮するので、青いViewまでの距離が伸縮し、動的にマージンが取れます。

あとはViewって名前だと、後で見て絶対わからなくなるので、blue_view_top_spaceなどの名前を緑のViewに付けましょう。

ここまでやったら当然ですが、見えたらいけないので、緑のViewの色を透明にします。

■最後に
この方法を使うとマージン用のViewが結構存在することになるのがデメリットですが、storyboardを一杯用意するより楽だと思います。

●この記事を書いた人