あひる裁縫店

好きなこと、技術のこと、くだらないこと

Xcode 9.0 StoryboardでAutoLayout2

 

さて、前回の続きです。

随分、あいてしまいました...

 

これから、まとめる予定の項目は、以下の3点

 

・Viewのサイズが、画面サイズに応じて変わる場合 

・状況に応じて制約が変わる場合(Storyboardでレイアウト、コードで制約を変更)

・iPhoneXでの注意点

 

のうち今回は、

 

・Viewのサイズが、画面サイズに応じて変わる場合 

 

について書きたいと思います(前回にまとめてもよかったかもしれません...)

 

1つ目に関しては、前回で十分だと思いますが、見方を変えた、復習のようなものです。

 

最後のiPhoneXでの注意点ですが、わかっている範囲のメモです。

シュミレーターなどで見るとわかりますが、今までの画面とは少々勝手が違うので、先に対策をとるといいと思います。

 

 

では、本題。

 

 

《Viewのサイズが可変する場合》

 

今回も、この4点を意識して、制約付けします。

 

・X方向

・Y方向

・(View自身の)高さ

・(View)横幅

  

目標は、このようになります

 

f:id:pg_0212:20171002223829p:plain 

 

同じサイズの2色のView。左右の空白も同じ幅、高さも同じです。

高さと幅は、画面サイズが変わると、それに応じて変わるようになっています。

 

 

今回も、2つのViewを使います。

わかりやすくViewの色を分けて、名前を「orangeView」「greenView」としました。

 

f:id:pg_0212:20171002211503p:plain

 

 

個人的な意見ですが、最初に部品をだいたいの位置に置いておくと、わかりやすい気がします。

なので、だいたいの位置にViewを移動させます。

 

 

f:id:pg_0212:20171002211851p:plain

 

Vertically in Containarにチェックを入れて、画面に対して水平に配置(0で中央)

 

これで、Y方向は決まりました。

 

次は、高さを決めて行きます。

高さは、画面サイズに応じて変わるようにします。

 

 

 

View(画面)と、orangeViewを選択。

f:id:pg_0212:20171002215742p:plain

 

equal Heighs にチェックをつけます。

greenViewも同じようにチェックをつけましょう。

 

今の段階では、画面の縦サイズと同じ高さになっています。

同じサイズにしたいのであれば、これでいいのですが、今回は画面に対して80%の高さにしたいと思います。

 

f:id:pg_0212:20171002220452p:plain

 

Viewを選択し、ユーティリティエリアのConstraintsから、先ほどチェックをつけた equal Heighsを変更します。

Editをクリックすると、編集できます。

 

今回は、画面の高さの80%にしたいので、

 

orangeView:View 、 8:10 (4:5)とします。

greenViewも同じように変更します。

 

ちなみに、orangeView:Viewになるのか、View:orangeViewなのかは分かっていません...

 

だいたい、orangeViewを選択 -> Viewを選択すると前者になります。

 

これで、2つのViewの高さが決まりました。

 

残りは、X方向と、Viewの幅が決まれば完了です!

もう少し!

 

先ほど、高さを決めた時のように、画面の幅に対して20%とします。

 

f:id:pg_0212:20171002222424p:plain

 

(あまり、見た目が変わりませんでしたが...)

 

これで、幅は決定です。

 

最後は、今までやってきたことの復習です。

ですので、割愛です。

 

・orangeViewとgreenViewの間は、0pt

・左右の空白は同じ幅にしたいので、左右に同じ幅の空白用Viewを配置(これも画面サイズに応じて幅が変わります!)

・空白用ViewとorangeView、空白用ViewとgreenViewの間は0pt

 

f:id:pg_0212:20171002223017p:plain

 

空白用Viewの幅は、20ptとしました。あくまでも空白用ですが、こちらもきちんと設定しておきましょう。

 

 

これで目標の形になりました!

 

f:id:pg_0212:20171002223829p:plain

 

シュミレーターなどで、確認してみましょう。

 

これで、大まかな考え方は理解できると思います。

「ViewのTopを揃える」...などはまた、ざっとまとめたいと思います。

 

 

なかなか、言葉でまとめることは難しいですね...

長くなってしまいました。残り2つ(の予定)は、また次回としたいと思います。

 

 関連する記事

Xcode9.0 StoryboardでAutoLayout - あひる裁縫店