※この記事はAutoLayoutを使う上で役に立つ小技を紹介してます。AutoLayoutを少し触ったことがある方向けです。
- 小技1 画面サイズに応じて拡縮する
- 小技2 画面サイズに応じてマージンを取る（この記事）
- 小技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を一杯用意するより楽だと思います。