【Swift4】縦長のスクロール画面をscrollViewとstackViewを使って作る。

設定画面とか縦長でスクロールする画面を作りたい時ってあるじゃないですか。
でもテーブルビュー使うのめんどくさいな、みたいな。
そんなときに便利なやり方です。

一応の完成形はこんな感じ。
【Swift4】縦長のスクロール画面をscrollViewとstackViewを使って作る。

参考サイト
制約の修正なしで縦方向に要素を追加可能なビューの作成 – Qiita
【iOS】ちょっと待って!その画面UITableViewで作る必要ないかも – ペンギン村 Tech Blog
【UIScrollView】Autolayoutで縦スクロール【Xcode8.x】 – Qiita

ではまず、Safe AreaにScroll Viewを配置します。
Add New Constraintsで上下左右全てのマージンを0とします。
【Swift4】縦長のスクロール画面をscrollViewとstackViewを使って作る。

次いで、その中にVertical Stack Viewを配置し、Scroll Viewと同様に、Add New Constraintsで上下左右全てのマージンを0とします。
【Swift4】縦長のスクロール画面をscrollViewとstackViewを使って作る。

このままではScroll Viewのコンテントサイズの制約がないためエラーがでます。
【Swift4】縦長のスクロール画面をscrollViewとstackViewを使って作る。

マウスの右ボタンでStack ViewからScroll ViewへドラッグしてEqual Widthで横幅を揃える制限をつけます。
【Swift4】縦長のスクロール画面をscrollViewとstackViewを使って作る。

Stack Viewの子コンテンツでScroll Viewの高さが決まります。
とりあえずStack ViewのDistributionをEqual SpacingにしてSpacingを0にします。
【Swift4】縦長のスクロール画面をscrollViewとstackViewを使って作る。

子コンテンツを入れて高さが決まるとScroll Viewの高さが決まります。
【Swift4】縦長のスクロール画面をscrollViewとstackViewを使って作る。

さて、ここから縦長な画面にします。
操作するViewを選んで、simulated sizeを「freeform」にして、heightを設定します。
とりあえず1200にしてみました。
【Swift4】縦長のスクロール画面をscrollViewとstackViewを使って作る。

StackViewに高さが200の子Viewを6個入れて分かりやすように色を付けてみました。
【Swift4】縦長のスクロール画面をscrollViewとstackViewを使って作る。

これでアプリを起動すると綺麗にスクロールしました。\(^o^)/
【Swift4】縦長のスクロール画面をscrollViewとstackViewを使って作る。

これだけのことがコードを一行も書かずにできるってすごいなーと思います。\(^o^)/

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">