のほほん停留所

つぶやきのなりそこないの溜まり場

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

やりたいこと

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

  • 中の要素が画面の高さに収まる場合 f:id:Nonchalanttan:20170325015352p:plain
  • 中の要素が画面の高さに収まらない場合 f:id:Nonchalanttan:20170325015301p:plain

Storyboardの設定

f:id:Nonchalanttan:20170325014416p:plain

  1. UIScrollViewを追加する
    • UIScrollViewの上下左右の制約を画面に合わせる f:id:Nonchalanttan:20170325014524p:plain
  2. UIScrollViewの中にUIViewを追加する
    • UIViewの上下左右の制約をUIScrollViewに合わせる。Paddingを設定したければ、ここでConstantを設定する
    • UIViewの高さ・幅の制約をUIScrollViewに合わせる。Paddingを設定している場合は逆算した値をConstantに設定する(ここではPaddingを上下左右でそれぞれ8で設定しているので、逆算した値は-16になる) f:id:Nonchalanttan:20170325014608p:plain
  3. UIViewの中にUILabelを追加する
    • UILabelの上下左右の制約をUIViewに合わせる。Paddingを設定したければ、ここでConstantを設定する f:id:Nonchalanttan:20170325014738p:plain
  4. [重要] UIViewの高さの制約のremove at build timeを有効にする!
    • これを設定することで、中の要素が画面の高さを越えたらスクロール可能になる f:id:Nonchalanttan:20170325014918p:plain
  5. [重要] UIViewにgreaterThanOrEqualToの高さの制約を設定する!
    • これを設定することで、UIViewの高さの最小値を設定することができる f:id:Nonchalanttan:20170325015101p:plain

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

おまけ

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

f:id:Nonchalanttan:20170325015512p:plain

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