SwiftUIPager

SwiftUIPager provides a Pager component built with SwiftUI native components. Pager is a view that renders a scrollable container to display a handful of pages. These pages are recycled on scroll, so you don't have to worry about memory issues.

Create vertical or horizontal pagers, align the cards, change the direction of the scroll, animate the pagintation... Pager lets you do anything you want.

Requirements

• iOS 13.0+
• macOS 10.15+
• watchOS 6.0+
• Swift 5.1+

Installation

CocoaPods

pod 'SwiftUIPager'

Swift Package Manager

Go to XCode:

• File -> Swift Packages -> Add Package Dependency...
• Use the URL https://github.com/walidhossain/SwiftUIPager.git

Carthage

github "fermoya/SwiftUIPager"

Usage

Initialization

Creating a Pager is very simple. You just need to pass:

• Binding to page index
• Array of items
• KeyPath to an identifier.
• ViewBuilder factory method to create each page

 Pager(page: self.$pageIndex,
       data: self.items,
       id: \.identifier,
       content: { item in
           // create a page based on the data passed
           self.pageView(item)
 })

UI customization

Pager is easily customizable through a number of view-modifier functions. You can change the orientation, the direction of the scroll, the alignment, the space between items or the page aspect ratio, among others:

Pager(...)
     .itemSpacing(10)
     .padding(8)
     .pageAspectRatio(0.6)

pageAspectRatio will change the look of the page. Use a value lower than 1 to make the page look like a card:

whereas a value greater than one will make it look like a box:

By default, Pager will create a horizontal container. Use vertical to create a vertical pager:

Pager(...)
    .vertical()

You can customize the alignment and the direction of the scroll. For instance, you can have a horizontal Pager that scrolls right-to-left that it's aligned at the start of the scroll:

Pager(...)
    .itemSpacing(10)
    .alignment(.start)
    .horizontal(.rightToLeft)
    .itemAspectRatio(0.6)

Animations

Use interactive add a scale animation effect to those pages that are unfocused, that is, those elements whose index is different from pageIndex:

Pager(...)
    .interactive(0.8)

You can also use rotation3D to add a rotation effect to your pages:

Pager(...)
    .itemSpacing(10)
    .rotation3D()

Gestures

Pager comes with the following built-in gestures:

• Tap on any item to bring it to focus. Enable this gesture with itemTappable
• Swipe acroos the items

You can disable any interaction by calling disableInteraction.

Events

Use onPageChanged to react to any change on the page index:

Pager(...)
     .onPageChanged({ (newIndex) in
         // do something
     })

Sample projects

You can use Pager to implement cool effects as in iPod

For more information, please check the sample app.

If you have any issues or feedback, please open an issue or reach out to me at [email protected].
Please feel free to collaborate and make this framework better.

License

SwiftUIPager is available under the MIT license. See the LICENSE file for more info.