読むだけで理解できるAutoLayout

AutoLayoutとは、「制約よるレイアウト」である

AutoLayoutとは、「制約(Constraint)によるレイアウト」である

理解する上で大事なことなので二回書きました。どういうことなのか解説していきます。そもそもレイアウトを設定する際、次の二つの方法があります。

  1. 座標及び長さのpx数を直接指定してレイアウトを行う方法
  2. 制約条件によってレイアウトを行う方法

一番目の方法については最初にイメージが浮かやすいのではないでしょうか。イメージしやすいのではないでしょうか?AutoLayoutは2つ目の方法で

なぜAutoLayoutなのか

ここまでの解説を読んで「なぜ周りくどいやり方を採るのかなぁ」と思われた方いらっしゃるのではないでしょうか。これにはちゃんとした理由があります。それは異なるディスプレイサイズに対応させるためです。 iOSアプリケーションは主にiPhoneで動かすことができるものですが、一口に「iPhone」といえどディスプレイサイズは機種によって様々です。同じ8pxでもiphone11の大きなディスプレイに占める割合とiphone6n小さめなディスプレイサイズに占める割合は大きく違います。よって見え方も大きく変わってしまいます。そこでAutoLayoutによる制約を用いたレイアウトが利用されるわけです。

制約の種類

加えるべき制約条件のサンプル

具体的ないくつかの例を示します。

例1. 画面いっぱいに画像を表示したい場合

制約 内容
top 0px
left 0px
right 0px
bottom 0px

例2. 画面の中心に正方形を描画したい場合

必要な制約 内容
aspect ratio(縦横比) 1:1
X軸 0
y軸 0
right 0
right 0

Heading

最後に

AutoLayoutについての基本的な考え方が理解できれば、後は「慣れ」の問題です!!

Published under  on .

Last updated on .

サクプロ

プログラミング初心者に向けて、体系的なサイト作りを心がけて情報発信していくよ
当サイト、あるいは僕に興味のある人はこのページを見て欲しいよ