【Swift】Align制約の使い方。複数部品を整列する制約を追加する。【Swift】Align制約の使い方。複数部品を整列する制約を追加する。複数部品でオートレイアウト前回の記事で、1つの部品で画面中央を基準としたオートレイアウトについて説明した。⇒「記事」それに続いて、本記事では複数の部品を選択したオートレイアウトについて説明する。デバイス画面にある部品を複数選択するには、下図のようにドラッグ&ドロップで選択したい部品を囲むか、Cmdキーを押しながら部品を1つずつ選択していく。ドラッグ&ドロップですべて選択したあとに、Cmdキーを押しながら部品をクリックすると選択が外れる。いつものデスクトップでファイルを選択する方法と同じだ。部品を1つ選択して下図赤枠のalignボタンを押したときは紫枠の2つの制約しか設定できないが、部品を複数選択したときは黄緑枠の6つの制約も設定できる。この6つの制約は、選択した部品どうしの配置に関する設定である。設定項目を以下にまとめる。部品の左端から他の部品の左端までの水平方向の距離を指定する。部品の右端から他の部品の右端までのの水平方向の距離を指定する。部品の上端から他の部品の上端までの垂直方向の距離を指定する。部品の下端から他の部品の下端までの垂直方向の距離を指定する。部品の中心から他の部品の中心までの水平方向の距離を指定する。部品の中心から他の部品の中心までの垂直方向の距離を指定する。ベースラインから他の部品のベースラインまでの垂直方向の距離を指定する。50の制約を追加した場合、1つの部品の左端からもう一方の部品の左端までの距離が50ピクセルになる。30の制約を追加した場合、1つの部品の上端からもう一方の部品の上端までの距離が30ピクセルになる。上記の制約を実際に追加すると下図になる。2つの制約が追加されてhoge2がhoge1の右下に位置するようになった。これだけだとエラーとなる。hoge2の位置はhoge1の位置を基準として定められたが、hoge1の位置が定められていないからである。そこでhoge1に制約を追加するとどうなるかを確認しよう。0」の制約を追加する(下図赤枠)。Framesをすると、hoge1がデバイス画面の中央に移動するを追随してhoge2がhoge1の右下に自動で移動した。このように、複数部品のレイアウトを画面中心に決定するのではなく、部品間の距離を中心に決定する方法が複数部品のオートレイアウトである。EdgesとBaselinesは似ているように見えて結構違う。0の制約を追加した結果。ラベル領域の最下端で揃っていることが分かる。0の制約を追加した結果。ラベル領域の最下端で揃うのではなく、文字のベースラインで揃っていることが分かる。ベースラインとはプレーンテキストの下にひかれる基準線である。g、j、p、q、yがベースラインからはみ出すのが特徴である。位置の基準になる部品を変更する複数部品を選択して制約を追加した場合、いずれかの1つの部品の位置が基準になって他の部品の制約に追加されるが、基準にする部品の指定方法が明確になっていない。50の制約を追加したところhoge2が基準になった。hoge2の位置を基準としたかったのであれば問題ないが、hoge1またはhoge3の位置を基準をしたかった場合は修正が必要になる。基準となる部品が期待どおりにならなかった場合の修正方法について説明する。上図赤枠の制約をDeleteボタンですべて削除してもう一度制約を追加することろから始めよう。50の制約を追加したところ、下図青枠の制約になった。50」この制約は「hoge3の水平位置はhoge1の水平位置+50」ということを表している。期待していたのは「hoge1の水平位置はhoge3の水平位置+50」だったとする。そこで、制約(下図赤枠)をクリックして画面右上のアトリビュートインスペクタボタン(下図黄緑枠)を押す。Itemの名前をクリックする。Item」(下図水色枠)をクリックする。Itemの値が入れ替わる。Constantの値の正負が逆になるので修正する。これで「hoge1の水平位置はhoge3の水平位置+50」に修正することができた。このように、複数部品を選択して制約を追加したときに混乱しそうになったら、2つずつ丁寧に対応していこう。Issuesの使い方。...【Swift】Pin制約の使い方。部品と部品の最短距離の制約を追加する。Layoutの使い方。部品の位置を相対的な表現で設定する。...【Swift】Pin制約の使い方(2)。部品のサイズの制約を追加する。前回の記事で部品と部品の最短距離の制約について説明した。...【Swift】制約を変更してテキストフィールドやテキストビューがキーボードと被らないようにする方法。コメントをキャンセルメールアドレスが公開されることはありません。