【Swift UI】ScrollViewでページングを実装!scrollTargetBehavior(.paging)

【Swift UI】ScrollViewでページングを実装!scrollTargetBehavior(.paging)

この記事からわかること

  • Swift UIScrollViewスクロールページングにする方法
  • iOS17以降から使用できるscrollTargetBehavior使い方

index

[open]

\ アプリをリリースしました /

みんなの誕生日

友達や家族の誕生日をメモ!通知も届く-みんなの誕生日-

posted withアプリーチ

スクロールビューをページングにする方法

iOS17以降から様々なモディファイアが追加されそれによりスクロールビューをコンテンツを1つずつずらしていくようなページングスタイルに簡単に変更できるようになりました。

実装するためにはscrollTargetLayoutscrollTargetBehaviorを使用します。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)

中の要素に対してpaddingVStackspacingなどを指定しまうとページングがずれてしまうようなので注意が必要です。中のコンテンツに余白を持たせたい場合はhorizontal側で実装しているように背景色を指定してからframeでサイズを指定すれば実装することが可能です。

【Swift UI】ScrollViewでページングを実装!scrollTargetBehavior(.paging)

scrollTargetLayout

公式リファレンス:scrollTargetLayout

scrollTargetLayout一番外側のレイアウトをスクロール対象レイアウトとして設定するためのモディファイアです。単体ではなくscrollTargetBehaviorなどと併用して使用します。

scrollTargetBehavior

公式リファレンス:scrollTargetBehavior

scrollTargetBehaviorスクロール動作のスタイルを設定するモディファイアです。

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。

searchbox

スポンサー

ProFile

ame

趣味:読書,プログラミング学習,サイト制作,ブログ

IT嫌いを克服するためにITパスを取得しようと勉強してからサイト制作が趣味に変わりました笑
今はCMSを使わずこのサイトを完全自作でサイト運営中〜

New Article

index