オートレイアウトを使ってみよう

Blog

 

オートレイアウトを使ってみましょう。

なぜ、オートレイアウトを使うのでしょうか?

例えば、iPhoneには色々な種類があります。

iPhone7,iPhone8,iPhoneSE,iPhoneXなど新作が出るたびに増えていきます。

それぞれのiphoneは大きさが違うため、iPhone7とiPhone8とでは配置場所がそれぞれ異なってきます。

そこで便利な機能がオートレイアウトです。

 

まずは、例として「オートレイアウトなしバージョン」を実行してみたいと思います。

ラベルは画面中央に配置してあります。

 

 

オートレイアウトなしバージョン実行

 

 

 

左から、「iPhoneSE」「iPhone8」「iPhoneX」です。

iPhoenSEは少し、見切れているのがわかるとおもいます。

iPhone8はちょうど画面中央になっています。

iPhoneXは少し上部になっています。

 

このようにオートレイアウトなしではそれぞれのiPhoneで配置場所が変わってきます。

これでは、具合が悪いので、オートレイアウトの出番です。

 

それでは、オートレイアウトの使い方をみていきましょう。

 

 

 

 

  1. Labelを画面中央へ配置。青の線が十時に出るところに配置。
  2. Textに「オートレイアウトあり」と記入。
  3. Backgroundにグレーを選択。

 

 

  1. 「Align」をクリック、「Horizontally in Container」「Vertically in Container」の両方にチェックを入れ、「Add 2 Containers」をクリック。

 

これで制約、オートレイアウトが実装されました。

 

オートレイアウトありバージョン実行

 

 

 

全て、画面中央へ配置されました。

オートレイアウトなしと見比べてみてください。

オートレイアウトを使えば、一つの制約(オートレイアウト)だけで全てのiPhoneに対応できるので、開発がラクになります。

 

ぜひ使ってみてください。

 

以上で「オートレイアウトを使ってみよう」の紹介を終わります。

 

🤗

 

 

コメント