SwiftUI stack views with paged scrolling behaviour.

Overview

SwiftUI PageView

SwiftUI stack views with paged scrolling behaviour.

Demo

HPageView

A view that arranges its children in a horizontal line, and provides paged scrolling behaviour.

Usage

HPageView(alignment: .leading, pageWidth: 250, spacing: 12) {
    //Pages
}

Parameters

  • alignment: The guide for aligning the pages in this page view.
  • pageWidth: The width of each page, or nil if you want each page to fill the width of the page view.
  • spacing: The distance between adjacent pages, or nil if you want the page view to choose a default distance for each pair of pages.
  • content: A view builder that creates the content of this page view.

VPageView

A view that arranges its children in a vertical line, and provides paged scrolling behaviour.

Usage

VPageView(alignment: .top, pageHeight: 250, spacing: 12) {
    //Pages
}

Parameters

  • alignment: The guide for aligning the pages in this page view.
  • pageHeight: The height of each page, or nil if you want each page to fill the height of the page view.
  • spacing: The distance between adjacent pages, or nil if you want the page view to choose a default distance for each pair of pages.
  • content: A view builder that creates the content of this page view.

PageView

A view that arranges its children in a line, and provides paged scrolling behaviour.

Changes to the layout axis will cause the pages to lose any internal state, and will not be animated.

Usage

PageView(.horizontal, alignment: .leading, pageLength: 250, spacing: 12) {
    //Pages
}

Parameters

  • axis: The layout axis of this page view.
  • alignment: The guide for aligning the pages in this page view.
  • pageLength: The length of each page, parallel to the layout axis, or nil if you want each page to fill the length of the page view.
  • spacing: The distance between adjacent pages, or nil if you want the page view to choose a default distance for each pair of pages.
  • content: A view builder that creates the content of this page view.

PageViewReader

A view that provides programmatic paging, by working with a proxy to move to child pages.

Usage

PageViewReader { proxy in
    HPageView {
        //Pages
        
        Button("First") {
            withAnimation {
                proxy.moveToFirst()
            }
        }
    }
}

Parameters

  • content: The reader's content, containing a page view.

PageViewProxy

A proxy value that supports programmatic paging of the first page view within a view hierarchy.

Functions

  • moveTo(index:): Scans the first page view contained by the proxy for the page with the index closest to index, and then moves to that page.
  • moveToFirst(): Scans the first page view contained by the proxy for the first page, and then moves to that page.
  • moveToLast(): Scans the first page view contained by the proxy for the last page, and then moves to that page.

Advanced Usage

The strictPageAlignment view modifier can be used to control whether page views always use their provided alignment to position pages. Without this modifier pages will be aligned to prevent leaving empty space in the page view.

Known Issues

  • Changes to the layout axis of a PageView will cause the pages to lose any internal state, and will not be animated.
  • Active paging animations in a page view may interfere with other animations when the number of pages changes.
  • Nested page views are not currently supported.

Requirements

  • iOS 14.0+ or watchOS 7.0+
  • Xcode 12.0+

Installation

Contact

@ciaranrobrien on Twitter.

You might also like...
Powerful autolayout framework, that can manage UIView(NSView), CALayer and not rendered views. Not Apple Autolayout wrapper. Provides placeholders. Linux support.
Powerful autolayout framework, that can manage UIView(NSView), CALayer and not rendered views. Not Apple Autolayout wrapper. Provides placeholders. Linux support.

CGLayout Powerful autolayout framework, that can manage UIView(NSView), CALayer and not rendered views. Has cross-hierarchy coordinate space. Implemen

Fast Swift Views layouting without auto layout. No magic, pure code, full control and blazing fast. Concise syntax, intuitive, readable & chainable. [iOS/macOS/tvOS/CALayer]
Fast Swift Views layouting without auto layout. No magic, pure code, full control and blazing fast. Concise syntax, intuitive, readable & chainable. [iOS/macOS/tvOS/CALayer]

Extremely Fast views layouting without auto layout. No magic, pure code, full control and blazing fast. Concise syntax, intuitive, readable & chainabl

Simple static table views for iOS in Swift.
Simple static table views for iOS in Swift.

Simple static table views for iOS in Swift. Static's goal is to separate model data from presentation. Rows and Sections are your “view models” for yo

The fast path to autolayout views in code
The fast path to autolayout views in code

NorthLayout The fast path to autolayout views in code Talks https://speakerdeck.com/banjun/auto-layout-with-an-extended-visual-format-language at AltC

✂ Easy to use and flexible library for manually laying out views and layers for iOS and tvOS. Supports AsyncDisplayKit.

ManualLayout Table of Contents Installation Usage API Cheat Sheet Installation Carthage Add the following line to your Cartfile. github "isair/ManualL

Compose is a library that helps you compose complex and dynamic views.

Compose is a data driven library that will help compose your complex and dynamic Views. It helps you create complex and dynamic Views using easy and s

Instagram clone, the main focus of the app is the seamless swipe between views that we see on instagram
Instagram clone, the main focus of the app is the seamless swipe between views that we see on instagram

InstaSwipe Instagram clone, the main focus of the app is the seamless swipe betw

Fast Swift Views layouting without auto layout. No magic, pure code, full control and blazing fast
Fast Swift Views layouting without auto layout. No magic, pure code, full control and blazing fast

Fast Swift Views layouting without auto layout. No magic, pure code, full control and blazing fast. Concise syntax, intuitive, readable & chainable. [iOS/macOS/tvOS/CALayer]

StoryboardUsingCustomViews - Storyboard Using Custom Views
StoryboardUsingCustomViews - Storyboard Using Custom Views

Storyboard Using Custom Views Vista creada con: Storyboard + Constraints + Progr

Comments
  • Add gestureMinimumDistance argument to allow customizing the gesture sensitivity

    Add gestureMinimumDistance argument to allow customizing the gesture sensitivity

    A default minimum gesture distance of 15 doesn't work for me - it steals the vertical scroll gesture from ScrollView too easily. I added an option to configure this with values of .compatible (previous behavior), .comfortable (a double value, tested to work better), and .custom(CGFloat) (that allows customization by the user).

    opened by tkafka 0
  • Swipe to navigate back conflicts with the HPageView

    Swipe to navigate back conflicts with the HPageView

    First of all, a huge thank you for your work! I've been looking at libraries to do just this for ages and none of them were quite satisfactory but this is perfect!

    The only issue I have found so far is that doing a swipe from the left edge to navigate back makes the page view jump. This only happens when the swipe is done over the page view. Swiping from anywhere else would not cause any issue.

    https://user-images.githubusercontent.com/6973873/170875007-ee3fcc72-64ae-4c52-993a-cc18a8d1dac0.mp4

    In the video, you can see that the pagination behaves just fine but when swiping from the edge, the page view jumps to the next page.

    opened by frlefebvre 0
  • Expose active page index (as binding)?

    Expose active page index (as binding)?

    Hello, I love SwiftUIPageview, but I would like to add a row of dots underneath, showing the number of pages and active page.

    I think that exposing an active page index (as a binding) could be enough to do this. Either Int (just for a simple animation) or as a CGFloat (to be able to animate the dots proportionally to how the user is swiping the page).

    What do you think?

    opened by tkafka 2
Owner
Ciaran O'Brien
Ciaran O'Brien
A Swift utility to make updating table views/collection views trivially easy and reliable.

ArrayDiff An efficient Swift utility to compute the difference between two arrays. Get the removedIndexes and insertedIndexes and pass them directly a

Adlai Holler 100 Jun 5, 2022
Horizontal and Vertical collection view for infinite scrolling that was designed to be used in SwiftUI

InfiniteScroller Example struct ContentView: View { @State var selected: Int = 1 var body: some View { InfiniteScroller(direction: .ve

Serhii Reznichenko 5 Apr 17, 2022
A structured vertical/horizontal stack layout

EEStackLayout A vertical stackview which takes subviews with different widths and adds them to it's rows with paddings, spacings etc. Installation Coc

null 48 Nov 6, 2021
Expose layout margins and readable content width to SwiftUI's Views

SwiftUI Layout Guides This micro-library exposes UIKit's layout margins and readable content guides to SwiftUI. Usage Make a view fit the readable con

Thomas Grapperon 26 Dec 23, 2022
Apple provides us two ways to use UIKit views in SwiftUI

RepresentableKit Apple provides us two ways to use UIKit views in SwiftUI: UIVie

YUMEMI Inc. 43 Dec 26, 2022
An experiment creating a particle emitter using the new TimelineView and Canvas views in SwiftUI

Particle Emitter An experiment creating a particle emitter using the new Timelin

Emilio Peláez 8 Nov 11, 2022
SwiftUI views that arrange their children in a flow layout.

SwiftUI Flow SwiftUI views that arrange their children in a flow layout. HFlow A view that arranges its children in a horizontal flow. Usage ScrollVie

Ciaran O'Brien 114 Jan 5, 2023
SwiftUI views that arrange their children in a Pinterest-like layout

SwiftUI Masonry SwiftUI views that arrange their children in a Pinterest-like layout. HMasonry A view that arranges its children in a horizontal mason

Ciaran O'Brien 88 Dec 27, 2022
Reframing SwiftUI Views. A collection of tools to help with layout.

Overview A Swift Package with a collection of SwiftUI framing views and tools to help with layout. Size readers like WidthReader, HeightReader, and on

Ryan Lintott 84 Dec 16, 2022
Arrange views in your app’s interface using layout tools that SwiftUI provides.

Composing custom layouts with SwiftUI Arrange views in your app's interface using layout tools that SwiftUI provides. Overview This sample app demonst

Apple Sample Code 0 Jun 9, 2022