ContainerViewに対して最大2分の1まで伸びる子Viewを、コードを書かずにAutoLayoutで組む
作りたかった画面
以下のような画面サイズの最大2分の1まで伸びる2つのViewを作りたかったですが、Textサイズの計算などをしたくなかったので、AutoLayoutのみでレイアウトを組んでました。良い感じにレイアウトが組めたので、残しておきます。
最大サイズまで伸びているときは、以下のような画面になります。
2つとも短いときは、以下のようにくっ付くような形になります。
ここで、Viewの横幅を完全に2分割にするだけであれば、単純なレイアウトとなります。
どちらかが短いときは以下のような感じになるように実装しました。
難しいポイント
- 完全に2分割ではなく、それよりも短いときにはくっ付くようなレイアウトにする必要がある点
- テキストだけでなく、ImageなどのViewを置いている点
- 両端からテキストまでの間や、それぞれのテキストの間にSpacingがあるので、Spacingを考慮してレイアウトを組まなければいけない点
これらを幅の計算によって実装を行うと、定数定義が多く煩雑になってしまいます。
実現方法
子ViewのMultiplierを親Viewの1:2以下にするようにレイアウトを組むことで、実現することが出来ました。
Viewの構成要素としては、以下のようになります。
制約
ContainerStackViewの制約
上下左をContainerViewに、右はContainerViewに対して、ContainerStackViewのSpacing分マイナス値を指定します。
このViewを組むときに、一番下に置いているContainerViewのConstraintを、ContainerStackViewのSpacing分マイナスに指定することがポイントでした。
Left/RightStackViewの制約
ContainerViewに対してMultipriorを1:2にして、Less Than or Equalにすることで、ContainerViewの2分の1以下と指定することが出来ます。
コードについて
Sample Projectを置いているので、試してみて頂けますと幸いです。
