0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

UIScrollView swift

Last updated at Posted at 2021-05-03

■UIScrollView

名の通り画面をスクロールさせる奴
基本的にアプリをつくる際sclolViewを敷いていれば急な対応に柔軟に対応できる!

例:画面幅いっぱいの中に急に新しい項目を追加したい時にスクロールで画面幅を広げれば一応画面内に
項目を追加できるので一時的に対応はできる。
その後デザイン修正などが行われる。

■UIScrollViewが持つパラメーター

パラメーターと言われれば何の事か想像しづらいが
UIScrollViewが持っている領域の事である。

■ContentLayoutGuide
スクロール領域
画面をスクロールできる領域の事である。
まあ領域展開みたいな物ww

■FrameLayoutGuide
UIScrollViewの領域
実際のUIScrollViewの範囲の事

これを踏まえて作っていく

1

■画面にUIScrollViewを貼り四角ぞれぞれ0の制約をつける。

エラーでるけど無視でOK!
スクロール領域決まってないけど決まってない範囲にどやって制約つけるねんって言ってる!
スクリーンショット 2021-05-03 16.48.41.png

2

■UIScrollViewの中にViewを入れる。
とりあえず何も考えず中にViewを入れよう!
このViewの名前はContentViewなどにしておこう!

スクリーンショット 2021-05-03 16.53.03.png

3

■中に入れたContentViewの四角をContentLayOutGuideと合わせよう!
ほなContentViewがスクロール領域になる。

Comand押しながらContentViewとContentLayOutGuide二つを選択して
右下らへんのAdd New Alignment Constraintsを選択
画像のように
Leading Edges
Trailing Edges
Top Edges
Bottom Edges
にチェックマークをつけAdd 4 Constraintsを押す。

スクリーンショット 2021-05-03 16.55.45.png

4

■ContentViewのwidthとheightを決める。
最終的にContentViewのwidthとheightが全体の画面をスクロールできる領域になる!

例:必ずしもではないがContentViewのwidthとheightをFrameLayoutGuideに合わせて作ることもできる。

ContentViewを選択controlを押して青い線を伸ばしつつFrameLayoutGuideを選択
EqualWidth
EqualHeight
を選択する。
ContentViewの横幅と縦をFrameLayoutGuideに合わせるよ!

スクリーンショット 2021-05-03 17.13.29.png

そして制約の
横幅
ContentView.Width = FrameLayoutGuide
の右メニューのMultiliperの数値を変更すれば横のスクロール領域が増える。
Multiliper1なら1画面分の横幅
Multiliper2なら2画面分の横幅
スクリーンショット 2021-05-03 17.14.31.png

縦幅
ContentView.height = FrameLayoutGuide
の右メニューのMultiliperの数値を変更すれば縦のスクロール領域が増える。
Multiliper1なら1画面分の縦幅
Multiliper2なら2画面分の縦幅
スクリーンショット 2021-05-03 17.15.04.png

もちろんただ単にContntViewのwidthとheightのに数値を与1画面のでかさを越えればその分スクロール領域になる。

■実際の応用編 StackViewを使用

上記の1の工程を終える。

ScrollViewの中に二つViewを入れる。
Page1
Pag2とする。
スクリーンショット 2021-05-03 18.33.45.png

このPage1とPage2をStackViewに入れ込む。
スクリーンショット 2021-05-03 18.34.20.png

2

stackViewに制約をつける。

top,trailing,bottomはScrollViewに合わせる。
leadingのみFrameLayoutGuideに合わせる。
widthをContentLayOutGuideに合わせる。

スクリーンショット 2021-05-03 18.38.45.png

3

stackViewの中身
Page1
Page2
のそれぞれの幅をFrameLayOutGuideと合わせる。
EqualWidth
EqualHeightを使う。

スクリーンショット 2021-05-03 18.42.00.png

4

Page1Page2の二つのviewのheightとwidthの幅を変更

Page1.width = 0.57971 x Frame Layout Guide.width
Page1.height = 0.156479 x Frame Layout Guide.height
Page2.width = 0.57971 x Frame Layout Guide.width
Page2.height = 0.156479 x Frame Layout Guide.height
のそれぞれの制約の右メニューのMultiliperの数値を変更1にした場合。

FrameLayOutGuideの1画面分のデカさの縦幅横幅2枚分がstackViewに入ることになり
スクロールできるようになりエラーが消える。

スクリーンショット 2021-05-03 18.48.03.png
スクリーンショット 2021-05-03 18.48.15.png

5

■StackViewの場合
右メニューAxisを変更するだけで横縦とスクロール領域を変更できる。
スクリーンショット 2021-05-03 18.51.58.png

Vertical(縦)
Horizontal(横)

Horizontalにすると

スクリーンショット 2021-05-03 18.51.23.png
スクリーンショット 2021-05-03 18.51.49.png

以上UIScrollViewの作り方でした!

0
1
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
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?