Enjoy Our Life!!

本稿では、XcodeのAutoLayout機能について、説明します。 

これまでは、ボタンやテキストなどのコンポーネントをStoryboad上にドラッグ＆ドロップで配置/位置調整をしてきたと思います。オートレイアウト機能は、画面サイズや画面の横縦切り替えなどを行った際に崩れてしまうコンポーネント（部品）の位置（レイアウト）を自動で調整してくれる機能になります。

 では、早速AutoLayout機能を使ってみたいと思います。 まずは、いつも通りプロジェクトを作成します。今回は、"AutoLayout"という名前でプロジェクトを作ってみたいと思います（名前は何でも良いです）。

 Xcodeを開いて、
Create a new Xcode project　→　Single View Application　→　product name を”AutoLayout”としてCreateボタン
を押します。 

プロジェクトが作成されたら、Main.storyboadを開きます。今回は、レイアウトの確認をしたいため、エディタエリアを２画面にし、右側の画面はPreviewモードにします。


では、次にMain.Storyboad上にラベルやボタンなどのコンポーネントを下図のように配置していきましょう。配置が完了しましたら、Preview画面の下に縦横切り替えボタンがありますので、クリックします。



すると、Preview画面が横画面になったと同時にせっかく配置したコンポーネントがずれているのが確認できます。




このようにオートレイアウトを使用しない場合は、画面の縦横切替や画面サイズによってコンポーネントの配置がずれてしまうため、これを解決するためにAutoLayoutを使用します。

オートレイアウトの設定

では、オートレイアウトの設定をしてみましょう。
まず、Main.storyboad上のラベルを選択します。そして、Main.Storyboad画面(２画面にしているエディタエリア左画面)の右下にある３つのボタンのうち、真ん中のボタンをクリックします。
すると、下図のような画面が出てきますので、4方向印の上部を選択します。これは、選択したラベルの画面上部からの位置を、現在の場所で固定するということを意味します。
次に、Width/Heightへチェックを入れます。Width/Heightのチェックはラベル自体の幅/高さを固定するということを意味します。



つまり、画面上部からの位置とラベルのサイズを固定したことになります。

次に、３つのボタンのうち、左のボタンをクリックします。そうすると、下図のような画面が表示されます。そして、Horizontal Center in Containerにチェックを入れます。これは、選択したコンポーネントをセンタリングすることを意味します。



つまり、これらの設定を行うことで、ラベルの位置、サイズ、センタリングを固定にしたことになります。