LoginSignup
7
4

More than 3 years have passed since last update.

Xcode11でScrollViewを使う

Last updated at Posted at 2020-05-29

ScrollViewをXcode11で使いたい!

Xcode11からscrollViewの設定のあれこれが結構変わったので、備忘録として書いていきます

早速やっていこう

1. ViewControllerにScrollViewを置く

image.png
このscrollViewをViewの中に配置して、
image.png
こんな感じで画面いっぱいに広げます
image.png
次にこんな感じで制約を追加
image.png
この状態だとXcodeに怒られますが、後で追加で設定するから今は気にしないで大丈夫です

2. ScrollViewにStackViewを置く

image.png
Vertical Stack Viewを
image.png
またこんな感じで画面全体に広げる

3. ScrollViewとStackViewをいい感じにする

image.png
StackViewからContent Layout Guideにcontrolキーを押しながらドラッグすると
image.png
こんな感じのポップアップが出るから、
image.png
上の4つにチェック入れます
で今度はStackViewからFrame Layout Guideにcontrolキーを押しながらドラッグして、
image.png
Equal Widthにチェックしましょう
ここまでやったらConstraintsを見てみて、
image.png
こんな感じで + 414とか + 896とかになってるやつを0にしましょう
image.png

4. ScrollViewにViewを置く

ここまでできたらViewを置くだけです
image.png
ViewをScrollViewに置いて
image.png
高さを指定してあげれば
image.png
こんな感じになる!!!!
もう1個下にViewを置きたいときは
image.png
こうやって上のViewの一番下に持ってって、StackViewの表示が出るところで離せば追加できます
image.png
追加したViewにも高さを指定してあげることを忘れずに!

5.Viewの上に好きなものを置く

ViewControllerのサイズを大きくしてあげると作業しやすいかも?
image.png

6.完成!

動いた動画↓
ビデオ開けなかったわ...ぴえん...
一応Githubにあげときました↓
https://github.com/sugijotaro/scrollView

参考

https://useyourloaf.com/blog/scroll-view-layouts-with-interface-builder/
https://youtu.be/KmE50giVuLA

7
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
4