【Swift UI】ScrollViewでページングを実装!scrollTargetBehavior(.paging)
この記事からわかること
- Swift UIでScrollViewのスクロールをページングにする方法
- iOS17以降から使用できるscrollTargetBehaviorの使い方
index
[open]
\ アプリをリリースしました /
友達や家族の誕生日をメモ!通知も届く-みんなの誕生日-
posted withアプリーチ
- Xcode:15.0.1
- iOS:17.0
- Swift:5.9
スクロールビューをページングにする方法
iOS17以降から様々なモディファイアが追加されそれによりスクロールビューをコンテンツを1つずつずらしていくようなページングスタイルに簡単に変更できるようになりました。
実装するためにはscrollTargetLayout
とscrollTargetBehavior
を使用します。scrollTargetBehavior
の引数にpaging
を渡します。
vertical
ScrollView(.vertical) {
VStack(spacing: 0) {
ForEach(0..<10, id: \.self) { index in
Text("Content: \(index)")
.foregroundStyle(.white)
.padding()
.background(Color.black)
.frame(width: 200, height: 200)
.background(Color.black)
.cornerRadius(5)
}
}.scrollTargetLayout()
}.scrollTargetBehavior(.paging)
.frame(width: 200, height: 200)
horizontal
ScrollView(.horizontal) {
HStack(spacing: 0) {
ForEach(0..<10, id: \.self) { index in
Text("Content: \(index)")
.foregroundStyle(.white)
.padding()
.background(Color.black)
.frame(width: 200, height: 200)
.cornerRadius(10)
}
}.scrollTargetLayout()
}.scrollTargetBehavior(.paging)
.frame(width: 200, height: 200)
中の要素に対してpadding
やVStack
のspacing
などを指定しまうとページングがずれてしまうようなので注意が必要です。中のコンテンツに余白を持たせたい場合はhorizontal
側で実装しているように背景色を指定してからframeでサイズを指定すれば実装することが可能です。
scrollTargetLayout
scrollTargetLayout
は一番外側のレイアウトをスクロール対象レイアウトとして設定するためのモディファイアです。単体ではなくscrollTargetBehavior
などと併用して使用します。
scrollTargetBehavior
scrollTargetBehavior
はスクロール動作のスタイルを設定するモディファイアです。
まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。
ご覧いただきありがとうございました。