さて、前回の続きです。
随分、あいてしまいました...
これから、まとめる予定の項目は、以下の３点
- Viewのサイズが、画面サイズに応じて変わる場合
- 状況に応じて制約が変わる場合（Storyboardでレイアウト、コードで制約を変更）
- iPhoneXでの注意点
のうち今回は、
- Viewのサイズが、画面サイズに応じて変わる場合
について書きたいと思います（前回にまとめてもよかったかもしれません...）
１つ目に関しては、前回で十分だと思いますが、見方を変えた、復習のようなものです。
最後のiPhoneXでの注意点ですが、わかっている範囲のメモです。
シュミレーターなどで見るとわかりますが、今までの画面とは少々勝手が違うので、先に対策をとるといいと思います。
では、本題。
Viewのサイズが可変する場合
今回も、この４点を意識して、制約付けします。
- X方向
- Y方向
- （View自身の）高さ
- （View）横幅
目標は、このようになります
同じサイズの２色のView。左右の空白も同じ幅、高さも同じです。
高さと幅は、画面サイズが変わると、それに応じて変わるようになっています。
今回も、２つのViewを使います。
わかりやすくViewの色を分けて、名前を「orangeView」「greenView」としました。
個人的な意見ですが、最初に部品をだいたいの位置に置いておくと、わかりやすい気がします。
なので、だいたいの位置にViewを移動させます。
Vertically in Containarにチェックを入れて、画面に対して水平に配置（0で中央）
これで、Y方向は決まりました。
次は、高さを決めて行きます。
高さは、画面サイズに応じて変わるようにします。
View（画面）と、orangeViewを選択。
equal Heighs にチェックをつけます。
greenViewも同じようにチェックをつけましょう。
今の段階では、画面の縦サイズと同じ高さになっています。
同じサイズにしたいのであれば、これでいいのですが、今回は画面に対して80%の高さにしたいと思います。
Viewを選択し、ユーティリティエリアのConstraintsから、先ほどチェックをつけた equal Heighsを変更します。
Editをクリックすると、編集できます。
今回は、画面の高さの80%にしたいので、
orangeView：View 、 8：10 （4：5）とします。
greenViewも同じように変更します。
ちなみに、orangeView：Viewになるのか、View：orangeViewなのかは分かっていません...
だいたい、orangeViewを選択 -> Viewを選択すると前者になります。
これで、２つのViewの高さが決まりました。
残りは、X方向と、Viewの幅が決まれば完了です！
もう少し！
先ほど、高さを決めた時のように、画面の幅に対して20%とします。
（あまり、見た目が変わりませんでしたが...）
これで、幅は決定です。
最後は、今までやってきたことの復習です。
ですので、割愛です。
- orangeViewとgreenViewの間は、0pt
- 左右の空白は同じ幅にしたいので、左右に同じ幅の空白用Viewを配置（これも画面サイズに応じて幅が変わります！）
- 空白用ViewとorangeView、空白用ViewとgreenViewの間は0pt
空白用Viewの幅は、20ptとしました。あくまでも空白用ですが、こちらもきちんと設定しておきましょう。
これで目標の形になりました！
シュミレーターなどで、確認してみましょう。
これで、大まかな考え方は理解できると思います。
「ViewのTopを揃える」...などはまた、ざっとまとめたいと思います。
なかなか、言葉でまとめることは難しいですね...
長くなってしまいました。残り２つ（の予定）は、また次回としたいと思います。
関連する記事
