More than 5 years have passed since last update.

minHeightを保ちつつContentViewに合わせたUIScrollViewをStoryboard上で定義する

Posted at 2018-05-27

やりたいこと

デフォルトは画面の高さで、中の要素が画面の高さを越えたらスクロールするViewを設定したい

中の要素が画面の高さに収まる場合
中の要素が画面の高さに収まらない場合

Storyboardの設定

UIScrollViewを追加する
- UIScrollViewの上下左右の制約を画面に合わせる
UIScrollViewの中にUIViewを追加する
- UIViewの上下左右の制約をUIScrollViewに合わせる。Paddingを設定したければ、ここでConstantを設定する
- UIViewの高さ・幅の制約をUIScrollViewに合わせる。Paddingを設定している場合は逆算した値をConstantに設定する（ここではPaddingを上下左右でそれぞれ8で設定しているので、逆算した値は-16になる）
UIViewの中にUILabelを追加する
- UILabelの上下左右の制約をUIViewに合わせる。Paddingを設定したければ、ここでConstantを設定する
[重要] UIViewの高さの制約のremove at build timeを有効にする！
- これを設定することで、中の要素が画面の高さを越えたらスクロール可能になる
[重要] UIViewにgreaterThanOrEqualToの高さの制約を設定する！
- これを設定することで、UIViewの高さの最小値を設定することができる

上の手順を踏めば、コードを書かずに中の要素に合わせて伸縮するScrollViewを実現できます！
本当はUIViewの高さのEqual制約は設定しなくても動くのですが、Storyboard上でエラーが出てしまうので、それを回避するためにremove at build timeを有効にした制約を設定しています。

おまけ

remove at build timeを有効にした制約はStoryboard上では普通の制約とは異なって表現されます。

お分かりいただけたでしょうか？制約を表す線が青ではなくて黒になってますね！わかりやすい！

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up