AutoLayout

Swift:超基礎!AutoLayoutのメモ!!(1)


今回は、xcodeの超便利機能
『AutoLayout』についてメモしていきます。

AutoLayoutとは??

ざっくり言うと

見た目をどのようなデバイスにも対応できるようにするためのものです。

iphoneにも様々なバージョンがあり、
それぞれ画面のサイズが異なります。
なので、ボタンやテキストの大きさはデバイスによって変更しなければなりません。

そこで便利なのがAutoLayoutなんです!!

それでは、始めていきたいと思います。

新しいプロジェクトを立ち上げて、
StoryBoardを開いてください。
そしてこのようにUILabelを左上に配置してください。
f:id:jumprails3303:20161124174017p:plain

AutoLayout [add new constrains]

ここでAutoLayoutの出番です!
配置したUILabelを選択した状態で
画面右下にある、ボタン群の右から二つ目をクリックしてください。
f:id:jumprails3303:20161124174528p:plain
このような画面が出てくると思います。

この画面では、
・選択したUI(今回はUILabel)と他のUI(今回はview画面の枠)との距離
・選択したUIのwidth(横幅),height(高さ)

などを指定することができます。他にもありますが今回は紹介をスルーします。

そして、今回は『選択したUI(今回はUILabel)と他のUI(今回はview画面の枠)との距離』
をメモします。
このように設定しましょう。
『上から20、右から20、左から20のところに配置してください』
という制約をつけます。
f:id:jumprails3303:20161124174514p:plain

そうすると、
このように、点線が実線になると思います。
f:id:jumprails3303:20161124175918p:plain
そうなったら、『Add 3 Constraints』をクリックして制約を設けてください。

すると、StoryBoard上のViewControllerがこんな感じになっていると思います。
f:id:jumprails3303:20161124180231p:plain
オレンジ色の線がたくさん出てきました。
その中に点線の枠があるはずです。
それは『制約に則って考えると、UILabelがこのオレンジの点線のところに来るはずだよ!』
と言われているのです。

じゃあそのオレンジの点線に合わせましょう!

一番左のボタンをクリックしましょう。
このボタンを押すと、
制約に合わせて、UIの大きさを変更する!
という意味です。
f:id:jumprails3303:20161124180828p:plain

変わりましたか?

今のままだと変化がわかりづらいので、UILabelに色をつけましょう。
UILabelを選択した状態で、backgroundをいじりましょう。
f:id:jumprails3303:20161124181302p:plain

どうですか!
UILabelは変化していましたか??
こうなるはずです!
f:id:jumprails3303:20161124181504p:plain

なぜwidthが伸びたのか

上から20、右から20、左から20のところに無理やり合わせるので結果としてwidth(横幅)が伸びました!!

もしも、下からの部分にも制約を設けたら、height(高さ)にも変化が加わります。
お試しあれ!!!


コメントを残す

*