Swiftで遊ぼう！ - 290 - Autolayoutの実習8 コンストレイントの調整

Swiftで遊ぼう！の古い記事-> Life-LOG OtherSide
質問 : Swiftで遊ぼう！ - 252 - FaceViewプロジェクト始動 - Swiftで遊ぼう! on Hatena

Autolayoutの微調整は続きます。

オブジェクトの位置関係をコントロールするコンストレイントですが、前回のイメージを使ってもう少し詳しく掘り下げて考えます。

オブジェクト・ライブラリからラベルを2つドラッグしてイメージの右隣に設置、ラベル名をそれぞれ「Name」と「Company」に変更します。

イメージからHIGガイドライン(青い点線)が出現する距離と中央に位置する場所にNameラベルを移動させます。Companyラベルはその下部のブルーガイドラインの出ているところに移動させます。

その場所で、Nameフィールドを「Ctrl + ドラッグ」して左のイメージが反転したところでリリースさせてポップアップメニューが出現したところで、Shiftキーを押しながら、Horizontal SpacingとCentral Yを選びます。Companyラベルも同様にNameフィールドでポップアップメニューを出して、Vertical SpacingとLeftを選びます。

これで何となく見栄えはいいのですが、Nameラベルの下端のラインと、イメージの中央が一致するように微調整する方法を説明します。

Nameフィールドとイメージにできているコンストレイントをクリックして選択状態にします。

ここでサイズ・インスペクタを選ぶと、2つのオブジェクトの関係を調整することができます。

Second ItemからName Bottomを選択すると、イメージの中央とNameフィールドの下端ラインが一致するようになり狙った通りにレイアウト表示できました。

他のパラメーターは色々試してみると仕組みが分かりますね。

今日はここまで。