これまでは、ボタンやテキストなどのコンポーネントを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にチェックを入れます。これは、選択したコンポーネントをセンタリングすることを意味します。
つまり、これらの設定を行うことで、ラベルの位置、サイズ、センタリングを固定にしたことになります。
これで、オートレイアウトの設定は完了です。Preview画面を確認すると、ラベルの位置が固定されていることが確認できます。
同様に、本設定をテキストフィールド、ボタンにも実施します。
すると下図のように横画面になった場合も、レイアウトが崩れていないことが確認できます。
オートレイアウトの説明は以上になります。今回はセンタリングでの固定方法を説明しましたが、その他のオートレイアウトの設定については、今後の記事内で紹介していきたいと思います。
同様に、本設定をテキストフィールド、ボタンにも実施します。
すると下図のように横画面になった場合も、レイアウトが崩れていないことが確認できます。
オートレイアウトの説明は以上になります。今回はセンタリングでの固定方法を説明しましたが、その他のオートレイアウトの設定については、今後の記事内で紹介していきたいと思います。
0 件のコメント:
コメントを投稿