how to paginate horizantal scrollview for ios 16?
Asked on 01/28/2025
1 search
To paginate a horizontal ScrollView
in iOS 16 using SwiftUI, you can use the paging
behavior provided by ScrollView
. This allows you to create a pagination effect where the content snaps to a page as you scroll. Here's a basic example of how you can implement this:
import SwiftUI
struct PaginatedScrollView: View {
var body: some View {
ScrollView(.horizontal, showsIndicators: false) {
HStack(spacing: 0) {
ForEach(0..<10) { index in
Text("Page \(index)")
.frame(width: UIScreen.main.bounds.width, height: 200)
.background(Color.blue)
.foregroundColor(.white)
.font(.largeTitle)
}
}
}
.pagingEnabled(true) // Enable paging behavior
}
}
struct PaginatedScrollView_Previews: PreviewProvider {
static var previews: some View {
PaginatedScrollView()
}
}
In this example, the ScrollView
is set to horizontal scrolling, and the HStack
contains multiple pages. The pagingEnabled(true)
modifier is used to enable the pagination effect. Note that pagingEnabled
is a conceptual representation here; in actual SwiftUI, you might need to implement custom logic to achieve paging behavior, as SwiftUI does not have a direct pagingEnabled
modifier like UIKit.
For more advanced custom scroll effects, you can refer to the session Create custom visual effects with SwiftUI (01:29) from WWDC 2024, which discusses creating custom scroll effects and transitions.

Platforms State of the Union
Discover the newest advancements on Apple platforms.

What’s new in SwiftUI
Learn how you can use SwiftUI to build great apps for any Apple platform. Explore a fresh new look and feel for tabs and documents on iPadOS. Improve your window management with new windowing APIs, and gain more control over immersive spaces and volumes in your visionOS apps. We’ll also take you through other exciting refinements that help you make expressive charts, customize and layout text, and so much more.

Demystify SwiftUI containers
Learn about the capabilities of SwiftUI container views and build a mental model for how subviews are managed by their containers. Leverage new APIs to build your own custom containers, create modifiers to customize container content, and give your containers that extra polish that helps your apps stand out.