2023/12/14

【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でサイズを指定すれば実装することが可能です。