縦横にスクロール可能なViewを生成するScrollViewの使い方を解説します。
環境
この記事の情報は次のバージョンで動作確認しています。
【Xcode】11.6
【Swift】5.2.4
【iOS】13.6
【macOS】Catalina バージョン 10.15.6
【Swift】5.2.4
【iOS】13.6
【macOS】Catalina バージョン 10.15.6
基本的な使い方
|
1 2 3 4 5 |
ScrollView(スクロール方向) { // ScrollView内に表示するView } |
スクロール方向は、.vertical（縦方向）か.horizontal（横方向）のいずれかを指定可能です。
未指定の場合のデフォルト値は.vertialです。
縦横両方にスクロールさせたい場合は、[.vertical, .horizontal]のように配列形式で指定できるようですが、私が試した範囲ではiOS13.Xで、正常に動かないケースがありました。バージョンアップを待ちましょう。
引数showsIndicatorsでスクロールインジケーターの表示/非表示を切り替えられます。
デフォルトはtrue（表示）です。
|
1 2 3 4 5 |
ScrollView(スクロール方向, showsIndicators: false) { // ScrollView内に表示するView } |
使用例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
struct ContentView: View { var body: some View { ScrollView(.vertical) { VStack(spacing: 10) { ForEach(0..<100) { Text("\($0) 行目").font(.title) } Spacer(minLength: 50) // Viewの最下段にスペースを追加 } .frame(maxWidth: .infinity) // スクロールの対象範囲を画面幅いっぱいにする為 } } } |
ScrollView内にスペースを入れたい場合は、上記例のように
|
1 2 3 |
Spacer(minLength: スペース幅) |
で指定します。
ScrollViewの幅や高さの合計は可変なので、引数無しのSpacer()は役に立ちません。
Listとの違い（注意点）
Listの場合は、画面がスクロールして表示されるタイミングで各項目のインスタンスが生成されます。
しかし、ScrollViewの場合は、表示するまで待機はせず、すぐにインスタンスを生成しますので、大量の項目を表示するようなケースでは注意が必要です。
縦横スクロールの組み合わせ
ScrollViewを入れ子にして、次のように縦横スクロールの組み合わせも可能です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
struct ContentView: View { var body: some View { ScrollView(.vertical) { VStack(spacing: 0) { ScrollView(.horizontal) { HStack { ForEach(0..<51) { i in Image(systemName: "\(i).square") .font(.system(size: 100)) .frame(width: 130, height: 130) } } } ForEach(0..<17) { i in HStack(spacing: 0) { ForEach(0..<3) { ii in Image(systemName: "\(i * 3 + ii).circle") .font(.system(size: 100)) .frame(width: 130, height: 130) .border(Color.gray, width: 1) } } } } } } } |
あわせて読みたい記事
【SwiftUI】Listの使い方
（2021/7/2 更新）Listはデータの一覧表示をするのに適したViewです。画面に収まらない量の場合はスクロール表示になるなど、UIKitのUITableViewに似ていますが、はるかに簡単に使えます。ListはForEach...
capibara1969.com
2020.05.06
【SwiftUI】 Viewのレイアウト（VStack、HStack、ZStack）
SwiftUIではStackと呼ばれる部品配置用のViewを組み合わせて、レイアウトを作成します。本記事では３つのStack View（VStack、HStack、ZStack）を中心にレイアウト方法を解説します。
capibara1969.com
2020.02.08
【SwiftUI】画像（Image）の使い方
SwiftUIで画像を表示するのには、Image()を使用します。Image()はプロジェクトに取り込んだ画像の他に、OSに標準で組み込まれたシステムアイコンの表示も可能です。
capibara1969.com
2020.02.22
