【Swift5】縦長のスクロール画面をscrollViewとstackViewを使って作ると便利だった。改訂版

【Swift4】縦長のスクロール画面をscrollViewとstackViewを使って作ると便利だった。 | iPhoneアプリ備忘録

上記ページのやり方でスクロールビューを作ってるとエラーが出た。
Xcode11でInterface Builderの仕様が変わったらしい。
参考サイト
Xcode11のIBに追加されたContentLayoutGuideとFrameLayoutGuideについて – Qiita

なので改訂版です。
旧ページの画像を使ったりするので整合性がなかったらご指摘ください。/(^o^)\

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

このようなエラーが出ますが続けます。
【Swift5】縦長のスクロール画面をscrollViewとstackViewを使って作ると便利だった。改訂版

次いで、そのScroll Viewの中にVertical Stack Viewを配置し、Add New Constraintsで上と左右のマージンを0とします。
【Swift5】縦長のスクロール画面をscrollViewとstackViewを使って作ると便利だった。改訂版

ここでXcode11から変更された「Content Layout Guide」を使用します。
現状ではScrollViewの幅と高さが決まっていないためエラーになっています。
なのでStack ViewからContent Layout Guideへ右ドラックで接続しEqual Widthsを選択します。【Swift5】縦長のスクロール画面をscrollViewとstackViewを使って作ると便利だった。改訂版

【Swift5】縦長のスクロール画面をscrollViewとstackViewを使って作ると便利だった。改訂版

同様にEqual hightsも接続します。
【Swift5】縦長のスクロール画面をscrollViewとstackViewを使って作ると便利だった。改訂版

幅は画面幅で設定されるのですが高さが決まらないためエラーが出てますが、Stack Viewに子ビューを入れて高さを決定するとエラーが無くなります。
【Swift5】縦長のスクロール画面をscrollViewとstackViewを使って作ると便利だった。改訂版

【Swift5】縦長のスクロール画面をscrollViewとstackViewを使って作ると便利だった。改訂版

縦長な画面でテストします。
操作するViewを選んで、simulated sizeを「freeform」にして、heightを設定します。
とりあえず1200にしてみました。
【Swift5】縦長のスクロール画面をscrollViewとstackViewを使って作ると便利だった。改訂版

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

これでアプリを起動すると綺麗にスクロールしました。\(^o^)/
【Swift5】縦長のスクロール画面を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="">