KENスクールブログ | パソコン教室・パソコン講座なら個別指導のKENスクール

BLOGKENスクールブログ

  1. KENスクール TOP >
  2. KENスクールブログ > プログラム > iPhoneアプリ開発 Auto Layoutの使い方【初心者向け】

プログラム

iPhoneアプリ開発 Auto Layoutの使い方【初心者向け】

未経験から就転職を目指すJavaプログラミング特集

iphone-393080_640

Auto Layoutによる簡単なUIパーツの配置の仕方を初心者向けに紹介した記事です。
今回は、Auto Layout機能を使用して画像を画面の中心に配置する方法を紹介します。

環境(以下の環境で動作確認をしています)

  • OSX Yosemite
  • Xcode6.1

Auto Layoutとは

画面サイズや向きの違いにも、柔軟に対応したレイアウトを作成することができる機能のことです。

今回使用する画面レイアウト

dog1

Storyboardのデフォルトの配置位置について

今回の画面レイアウトはStoryboard上で下記のように「Image View」を使って画像を設定しています。
画面右上の画像の配置位置を見ると、x座標「0」 、y座標「0」 、Width(幅)「375」、Height(高さ)「400」で設定しています。Storyboardで設定したデフォルトの配置位置は絶対指定となります。

dog2
つまり、画面サイズが変わっても、横向きにしても同じ配置位置となり、見た目の印象や操作感が変わってしまう可能性があります。(画面サイズによっては、UIパーツが消えてしまうこともあります)

(横向きの例)
dog3
そこで、使用するのがAuto Layoutの機能です。

Auto Layoutの設定方法

今回は画面の中央に画像を配置する設定を行います。まずは、対象であるImage Viewを選択します。
Auto Layoutの設定は、Storyboardの画面右下にあるメニューから選択します。

dog4

色々な設定方法がありますが、今回は一番左にあるAlign(整列)設定を行います。ボタンをクリックすると色々な項目が出てきます。
Horizontal Center in ContainerとVertical Center in Containerの左側にあるボタンをチェックして、有効にします。
Horizontal Center in Containerは、選択したUIパーツとコンテナ(画面)との水平方向の中心位置を揃えます。
Vertical Center in Containerは、選択したUIパーツとコンテナ(画面)との垂直方向の中心位置を揃えます。
設定が終わったら、Add Constraintsのボタンをクリックして確定します。

確定をしても、Storyboard上では、画像が真ん中に配置されず、変わりに赤い点線や黄色い線が付きました。Auto Layoutの設定をしても、Storyboard上では自動で反映されないため手動で更新します。
※この段階でも、実行してアプリを起動すると、真ん中に表示されます。
更新するためには、画面右下にあるメニューの右から2つ目のボタンをクリックします。

dog5

表示された項目の中から、「Update Frames」を選択し、Alignで設定した内容をStoryboard上で反映させます。

赤い点線や黄色の線が消え、青い線だけが残ります。青い線はAuto Layoutの設定を表しています。

dog6
これで、Storyboard上でのレイアウトと、アプリ実行時のレイアウトが同じになります。そのままでも構わないのですが、編集が紛らわしいので忘れずに行いましょう。

最後に動作確認を行いましょう。

動作確認

dog7dog8

今回の設定で画像はどのような画面サイズであっても中心に配置されるようになりましたが、実際のアプリ開発での画面は様々なUIパーツで構成されることになるので、より複雑な設定が必要となります。詳しくは、iPhone講座の内容で説明しています。

この記事に関連する講座

知識ゼロからiPhone & Androidアプリ開発にチャレンジ

詳しくはこちら