【Swift】Align制約の使い方。複数部品を整列する制約を追加する。(Swift 2.1、XCode 7.2)
複数部品でオートレイアウト
前回の記事で、1つの部品で画面中央を基準としたオートレイアウトについて説明した。⇒「記事」
それに続いて、本記事では複数の部品を選択したオートレイアウトについて説明する。
まず、デバイス画面にある部品を複数選択するには、下図のようにドラッグ＆ドロップで選択したい部品を囲むか、Cmdキーを押しながら部品を1つずつ選択していく。
また、ドラッグ＆ドロップですべて選択したあとに、Cmdキーを押しながら部品をクリックすると選択が外れる。いつものデスクトップでファイルを選択する方法と同じだ。
部品を1つ選択して下図赤枠のalignボタンを押したときは紫枠の2つの制約しか設定できないが、部品を複数選択したときは黄緑枠の6つの制約も設定できる。
この6つの制約は、選択した部品どうしの配置に関する設定である。
設定項目を以下にまとめる。
| 設定名 | 説明 | |
|---|---|---|
| 1 | Leading Edges | 部品の左端から他の部品の左端までの水平方向の距離を指定する。 |
| 2 | Trailing Edges | 部品の右端から他の部品の右端までのの水平方向の距離を指定する。 |
| 3 | Top Edges | 部品の上端から他の部品の上端までの垂直方向の距離を指定する。 |
| 4 | Bottom Edges | 部品の下端から他の部品の下端までの垂直方向の距離を指定する。 |
| 5 | Horizontal Centers | 部品の中心から他の部品の中心までの水平方向の距離を指定する。 |
| 6 | Vertical Centers | 部品の中心から他の部品の中心までの垂直方向の距離を指定する。 |
| 7 | Baselines | ベースラインから他の部品のベースラインまでの垂直方向の距離を指定する。 |
複数部品のオートレイアウトを試す
例えば、2つの部品でLeading Edges 50の制約を追加した場合、1つの部品の左端からもう一方の部品の左端までの距離が50ピクセルになる。
さらにTop Edges 30の制約を追加した場合、1つの部品の上端からもう一方の部品の上端までの距離が30ピクセルになる。
上記の制約を実際に追加すると下図になる。2つの制約が追加されてhoge2がhoge1の右下に位置するようになった。
しかし、これだけだとエラーとなる。なぜなら、hoge2の位置はhoge1の位置を基準として定められたが、hoge1の位置が定められていないからである。
そこでhoge1に制約を追加するとどうなるかを確認しよう。今までと同様の手順で、hoge1に「Horizontally in Container 0」、「Vertically in Container 0」の制約を追加する（下図赤枠）。
そしてUpdate Framesをすると、hoge1がデバイス画面の中央に移動するを追随してhoge2がhoge1の右下に自動で移動した。
このように、複数部品のレイアウトを画面中心に決定するのではなく、部品間の距離を中心に決定する方法が複数部品のオートレイアウトである。
Bottom EdgesとBaselinesの違い
ちなみにBottom EdgesとBaselinesは似ているように見えて結構違う。
下図はBottom Edges 0の制約を追加した結果。ラベル領域の最下端で揃っていることが分かる。
下図はBaselines 0の制約を追加した結果。ラベル領域の最下端で揃うのではなく、文字のベースラインで揃っていることが分かる。
ベースラインとはプレーンテキストの下にひかれる基準線である。g、j、p、q、yがベースラインからはみ出すのが特徴である。
位置の基準になる部品を変更する
複数部品を選択して制約を追加した場合、いずれかの1つの部品の位置が基準になって他の部品の制約に追加されるが、基準にする部品の指定方法が明確になっていない。
例えば、下図のように3つの部品をデバイス画面に配置し、3つすべて選択してLeading Edge 50の制約を追加したところhoge2が基準になった。もともとhoge2の位置を基準としたかったのであれば問題ないが、hoge1またはhoge3の位置を基準をしたかった場合は修正が必要になる。
では、基準となる部品が期待どおりにならなかった場合の修正方法について説明する。
一旦、上図赤枠の制約をDeleteボタンですべて削除してもう一度制約を追加することろから始めよう。hoge3とhoge1の部品をクリックして、Leading Edges 50の制約を追加したところ、下図青枠の制約になった。
「hoge3.leading = hoge1.leading + 50」
この制約は「hoge3の水平位置はhoge1の水平位置+50」ということを表している。期待していたのは「hoge1の水平位置はhoge3の水平位置＋50」だったとする。
そこで、制約（下図赤枠）をクリックして画面右上のアトリビュートインスペクタボタン（下図黄緑枠）を押す。すると、制約の設定画面が開くので、First Itemの名前をクリックする。
表示されたメニューの中の「Reverse First And Second Item」（下図水色枠）をクリックする。
すると、First ItemとSecond Itemの値が入れ替わる。さらに、Constantの値の正負が逆になるので修正する。
これで「hoge1の水平位置はhoge3の水平位置＋50」に修正することができた。このように、複数部品を選択して制約を追加したときに混乱しそうになったら、2つずつ丁寧に対応していこう。
