【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を使って作ると便利だった。

2019年1月22日追記〜〜
このままだと上下の高さがSafe Areaの分ずれるので、Scroll Viewの上下の対象をSafe AreaからSuperviewに変えます。
【Swift4】縦長のスクロール画面をscrollViewとstackViewを使って作ると便利だった。
↓対象をSuperviewに変えて
【Swift4】縦長のスクロール画面をscrollViewとstackViewを使って作ると便利だった。
↓マージンを0にします。
【Swift4】縦長のスクロール画面をscrollViewとstackViewを使って作ると便利だった。
↓上も下もね。
【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="">