初めてiPhoneアプリをデザインするには、どうすればいい？――すぐ分かるInterface Builder、Storyboard、Auto Layoutの使い方：初心者のためのSwiftで始めるプログラミング入門（9）（3/4 ページ）

本連載では、これからプログラミングやiPhoneアプリ開発を始めてみたい方を対象に、開発に必要な知識を基礎から解説していきます。今回は、画面に部品を配置しレイアウトを行うのに便利な3つのツール「Interface Builder」「Storyboard」「Auto Layout」の使い方を解説する。

[諏訪悠紀，アンダースコア]

A.「戻るボタン」を左下に配置する

　まず「『戻るボタン』となるUIButtonを、左下に配置する」というレイアウトになるような制約を指定しましょう。このルールを実現するためには、幾つかの制約を指定する必要があります。UIButtonに対して、次のような制約を指定していきます。

• 幅を100ポイントにする
• 高さを30ポイントにする
• 左端からの距離を10ポイントにする
• 下端からの距離を10ポイントにする

※「ポイント」は、サイズや距離を指定する単位です。ポイント数が意味する大きさはデバイスの解像度によって変わってきますが、ここではあまり深く考えず「サイズや距離の単位」と覚えておきましょう。

　Interface Builderに表示されているシーンの中にある、左側に配置したUIButtonをクリックしましょう。UIButtonの周りに8つの四角形が表示されるのは、このUIButtonを選択している状態である証拠です。

UIButtonの選択

　UIButtonを選択している状態で、右下の4つのマークのうち右から2番目のマークをクリックしてください。このマークをクリックすると、サイズや距離に関する制約を指定する「Pin（ピン）」という画面を開くことができます。

Pin画面

　制約を追加する前に、サイズや距離に関する名前について覚えておきましょう。Auto Layoutでは、幅や高さ、左端や下端などのことをそれぞれ次のように言います。

名前	Auto Layoutでの名前	読み方
幅	Width	ウィズ、ウィッズなど
高さ	Height	ハイトなど
上端	Top	トップ
下端	Bottom	ボトム
左端（※日本語のとき）	Leading	リーディング
右端（※日本語のとき）	Trailing	トレイリング

サイズと距離の名前

　左端や右端は「Left」や「Right」と呼びたいところですが、Auto Layoutでは「文章を読む方向が言語によって異なる」ことに配慮し、特別な呼び方をしています。ここでは日本語(左から右に文章を読む言語)に限定して考えることとし、左端は「Leading」、右端は「Trailing」と覚えておきましょう。

　それでは、Pin画面で4つの制約を追加していきましょう。Pin画面では一度に複数の制約をまとめて追加できますが、初めは「サイズの指定」と「距離の指定」の2回に分けて追加しましょう。

　まず「サイズの指定」です。ここでは、UIButtonに対して幅(Width)が100ポイント、高さ(Height)が30ポイントとなる制約を追加します。Pin画面で、次の手順で追加してください。

1. WidthとHeightにチェックを付ける
2. Widthの入力欄に「100」、 Heightの入力欄に「30」を入力する
3. 「Add Constraints」をクリックする

サイズの指定

　UIButtonに、赤いマークが表示されるようになるはずです。このマークは「レイアウトするための制約が足りていない」ことを示しています。なぜなら、距離に関する制約をまだ付けていない状態だからです。距離に関する制約を追加すると解決することですので、ここでは気にせずに進めていきましょう。

UIButtonに表示される赤いマーク

　続いて「距離の指定」です。ここでは、UIButtonに対して左端（Leading）との距離が10ポイント、下端（Bottom）との距離が10ポイントとなる制約を追加します。Pin画面をもう一度開き、次の手順で追加してください。

1. 「Constraints to margins」のチェックを外す
2. 左と下の赤いマークをクリックする
3. 左と下の入力欄に「10」を入力する
4. 「Add Constraints」をクリックする

距離の指定

　先ほどの赤いマークが消え、今度は黄色いマークが表示されるようになりました。これは「Interface Builder上で制約通りにレイアウトされていない」ことを示しています。制約通りにレイアウトさせる方法は最後にまとめて行いますので、このままで構いません。

　ひとまず、ここまでで「戻るボタン」であるUIButtonについての制約の追加は終わりです。

B.「進むボタン」を右下に配置する

　次に「『進むボタン』となるUIButtonを、左下に配置する」というレイアウトになるような制約を指定しましょう。「戻るボタン」とほとんど同じ制約を指定することになりますが、唯一異なるのは「右下に配置する」ということです。

• 幅を100ポイントにする
• 高さを30ポイントにする
• 右端からの距離を10ポイントにする
• 下端からの距離を10ポイントにする

　まず「サイズの指定」です。ここでは、UIButtonに対して幅（Width）が100ポイント、高さ（Height）が30ポイントとなる制約を追加します。右側のUIButtonを選択した状態でPin画面を開き、次の手順で追加してください。

1. WidthとHeightにチェックを付ける
2. Widthの入力欄に「100」、Heightの入力欄に「30」を入力する
3. 「Add Constraints」をクリックする

サイズの指定

　続いて「距離の指定」です。ここでは、UIButtonに対して右端（Trailing）との距離が10ポイント、下端（Bottom）との距離が10ポイントとなる制約を追加します。Pin画面をもう一度開き、次の手順で追加してください。

1. 「Constraints to margins」のチェックを外す
2. 右と下の赤いマークをクリックする
3. 右と下の入力欄に「10」を入力する
4. 「Add Constraints」をクリックする

距離の指定

　ここでも「戻るボタン」のときと同じく、黄色いマークが表示されるようになります。制約通りにレイアウトさせる方法は最後にまとめて行いますので、このままで構いません。

　ここまでで「進むボタン」であるUIButtonについての制約の追加は終わりです。

C.「絵」を画面いっぱいに配置する

　次に「『絵』となるUIImageViewを、画面いっぱい、かつUIButtonの上に配置する」というレイアウトになるような制約を指定しましょう。

　UIButtonにはUIButton自体のサイズの指定を行っていましたが、UIImageViewには距離の指定だけ行います。上下左右にどれだけ距離を設けるか指定することで、UIImageView自体のサイズをデバイスの画面サイズに合わせることができます。

サイズを指定しない制約

　UIImageViewには、次のような制約を追加します。

• 上端からの距離を0ポイントにする
• 左端からの距離を0ポイントにする
• 右端からの距離を0ポイントにする
• UIButtonからの距離を10ポイントにする

　4つ目の「UIButtonからの距離」というのが今までと違う制約になります。Auto Layoutでは、シーンの中に配置しているUIコンポーネント同士の関係性を制約にすることができます。つまり、全体の下端からではなく、特定のUIコンポーネントからの距離を指定することも可能です。

　それでは「距離の指定」を行いましょう。UIImageViewを選択した状態でPin画面を開き、次の手順で追加してください。

1. 「Constraints to margins」のチェックを外す
2. 上下左右の赤いマークをクリックする
3. 上、右、左の入力欄に「0」を入力する
4. 下の入力欄に「10」を入力する
5. 「Add Constraints」をクリックする

距離の指定

　ここでもUIButtonのときと同じく、黄色いマークが表示されるようになりました。制約通りにレイアウトさせる方法は最後にまとめて行いますので、このままで構いません。

　ここまででUIImageViewについての制約の追加は終わりです。