1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

株式会社やどかりAdvent Calendar 2024

Day 16

iOSアプリ開発初心者が地味にハマるUIScrollViewの設定方法

Posted at

iOSアプリ開発の初心者が地味にハマるUIScrollViewの設定方法。

基本の手順

1. 右上の「+」ボタンからUIScrollViewを引っ張ってきて、スクロール表示したい範囲に設置

quiita_UIScrollView1.png

例えとして、画面の中心部のみスクロールさせたい場合は、表示範囲にUIView(←わかりやすくするためにbackgroundColor赤くしてます)を設置して位置や大きさを指定。そのviewの上にUIScrollViewをのせて、viewと大きさ合わせる。

quiita_UIScrollView2.png

この時点で出るエラーは、UIScrollViewの中に要素がないために出るエラーなので気にせず続けます。

2. スクロール範囲に表示させたい要素たちの一番外枠の要素を入れる。

ここではUIViewを入れて、その上に表示させてたいコンテンツを表示するとします。わかりやすくbackgroundColorをミントカラーにしてます

quiita_UIScrollView3.png

3. UIScrollViewと要素のConstraintsを設定

(要素=ここではUIView(ミントカラー))

①まず、Content Layout Guideと要素の幅を合わせます。

Content Layout Guideが全ての要素を含む部分になります。

具体的な方法:

Content Layout Guideと要素を両方を同時選択した状態(commandキー押しながらクリック)で、edgesを合わせるConstraintsを追加。

quiita_UIScrollView4.png

②Frame Layout Guideと要素の幅を合わせます。

Frame Layout Guideが実際に画面上で要素が表示される範囲になります。

具体的な方法:

Frame Layout Guideと要素を両方を同時選択した状態(commandキー押しながらクリック)で、幅をの長さを合わせるConstraintsを追加。

ここでは、縦にスクロールの例としてEqual Widthで横幅を揃えています。

もし横スクロールさせたい場合は、Equal Heightsで縦幅を揃えてください。

quiita_UIScrollView5.png

ちなみに、ここでもエラーが表示されていると思いますが、これは要素の大きさが決まっていないために表示されています。試しに要素の高さを設定すると、エラーが消えます。

quiita_UIScrollView6.png

4. デモ

デモとして、UIStackViewを大枠の要素として、異なるbackgroundColorが設定された4つのUIViewを表示してみました。

quiita_UIScrollView7.png

こんな感じの挙動になります。

quiita_UIScrollView_demo.gif

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

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?