Xcode9.0 確認済み
レイアウトは基本、StoryBoardで行なっています。
部品を配置する時、必要な位置情報を教えてあげないと、
適切な場所に配置されません。
また、位置情報がわかっても、自らの大きさがわからなければ、
めちゃくちゃなサイズになってしまいます。
- X方向
- Y方向
- （View自身の）高さ
- （View）横幅
がわかれば、きちんと配置されることになります。（曖昧な表現...）
とりあえず、いろいろなパターンを作ってみましょう
《中央に２つのViewを均等に配置する》->高さと幅は決まっている状態
目指す状態はこちら
２つのViewが同じサイズになっており、スペースも同じサイズです。
（手順）
今回はViewのサイズを、200 × 200で設定します。
わかりやすく、オレンジ色のView（orangeView）と緑色のView（greenView）にしました。
この時点で、自らの高さと横幅は決まりました。
次に、X方向を決めます。今回は中央に来てほしい、「Horizontally in Container」にチェックをいれます。同様にgreenViewもチェックを入れます。
これで、２つのViewのX方向が決まりました（うまくまとめられない。。）
次は、Y方向を決めていきます。
今回は、スペースも均等になるように配置されてほしいので、
スペースを作るためのViewを作りたいと思います。
まずは、３つのViewを下の画像のように配置します。
（わかりやすくspaceViewとしました）
同じ高さのスペースにする ＝ ３つのViewを同じ高さにする
ということになので、３つのViewを選択し、
equal hightにチェックを入れます。
これで、spaceViewの高さは全て同じにできました。
※まだ、「同じにする」になっただけで、View高さがが決まっていません。
次は、
- orangeViewのTopを、一番上のspaceViewのBottomから0ポイント
- orangeViewのBottomを、二番目のspaceViewのtTopから0ポイント
- greenViewのTopを、二番目のspaceViewのBottomから0ポイント
- greenViewのBottomを、三番目のspaceViewのTopから0ポイント
で制約づけます。
これで、２つのViewの位置は決まりました。
が、このままではエラーが出ています。なぜでしょうか？
はい、spaceViewの幅が決まっていませんでした。
今回は、spaceViewの幅は特に重要ではないので、10ポイントくらいにしておきました。
これで、目標の形になりました。
次、にいきたいのですが長くなりそうなので次回へ...
関連する記事
