Swiftpack.co - Package - nachonavarro/Pages

Getting Started | Customization | Installation

CI Platforms License: MIT


Getting Started

Basic usage

Using Pages is as easy as:


import Pages

Pages {
    Text("A page here...")             // First page
    Text("...and a page there")        // Second page
    Circle()                           // Third page
        .fill(Color.blue)
        .frame(width: 50, height: 50)
    VStack {                           // Fourth page
        Capsule()
            .fill(Color.yellow)
            .frame(width: 100, height: 300)
        Text("A capsule on the fourth page")
            .font(.title)
            .padding(.top)
    }
}

One can also use Pages with dynamic content:


import Pages

struct Car {
    var model: String
}

let cars = [Car(model: "Ford"), Car(model: "Ferrari")]

ModelPages(cars) { index, car in
    Text("The \(index) car is a \(car.model)")
        .padding(50)
        .foregroundColor(.white)
        .background(Color.blue)
        .cornerRadius(10)
}

By default Pages keeps the state of the current page internally in the view, but if you need more control over the index of the current page (e.g. go to page 5 when the user taps a button on page 1), then initialize a state variable and pass it to Pages:

import Pages

struct ContentView: View {

    @State var index: Int = 0

    var body: some View {
        Pages(currentPage: $index) {
            Text("Page 1")
            Button(action: {
                self.index = 3
            }) {
                Text("This button will go to page 4")
            }
            Text("Page 3")
            Text("Page 4")
        }
        
    }

}

How it works

Pages uses a function builder to accomplish a SwiftUI feel while using a UIPageViewController under the hood. As in VStack or HStack, the current limit of pages to add in a static way using the Pages view is 10. If more are needed use a ModelPages instead. The Pages view will take up all the available space it is given.

Note: The Pages view needs more than one page. Otherwise the compiler treats what's inside Pages as a closure.

Customization

The following aspects of Pages can be customized:

  • navigationOrientation: Whether to paginate horizontally or vertically. Default is .horizontal.
Pages(navigationOrientation: .vertical) {
    Text("Page 1")
    Text("Page 2")
}
  • transitionStyle: Whether to perform a page curl or a scroll effect on page turn. The first two examples in the GIFs above use a scroll effect, and the last one uses page curl. Default is .scroll.
Pages(
    navigationOrientation: .vertical,
    transitionStyle: .pageCurl
) {
    Text("Page 1")
    Text("Page 2")
}
  • bounce: Whether to perform a bounce effect when the user tries to scroll past the number of pages. Default is true.
Pages(
    navigationOrientation: .vertical,
    transitionStyle: .pageCurl,
    bounce: false
) {
    Text("Page 1")
    Text("Page 2")
}
  • wrap: Whether to wrap the pages once a user tries to go to the next page after the last page. Similarly whether to go to the last page when the user scrolls to the previous page of the first page. Default is false.
Pages(
    navigationOrientation: .vertical,
    transitionStyle: .pageCurl,
    bounce: false,
    wrap: true
) {
    Text("Page 1")
    Text("Page 2")
}
  • hasControl: Whether to display a page control or not. Default is true.
Pages(
    navigationOrientation: .vertical,
    transitionStyle: .pageCurl,
    bounce: false,
    wrap: true,
    hasControl: false
) {
    Text("Page 1")
    Text("Page 2")
}
  • control: A user-defined control if one wants to tune it. If this field is not provided and hasControl is true then the classical iOS page control will be used. Note control must conform to UIPageControl.
Pages(
    navigationOrientation: .vertical,
    transitionStyle: .pageCurl,
    bounce: false,
    wrap: true,
    control: MyPageControl()
) {
    Text("Page 1")
    Text("Page 2")
}
  • controlAlignment: Where to put the page control inside Pages. Default is .bottom.
Pages(
    navigationOrientation: .vertical,
    transitionStyle: .pageCurl,
    bounce: false,
    wrap: true,
    controlAlignment: .topLeading
) {
    Text("Page 1")
    Text("Page 2")
}

FAQ

  • How do I set a background for the Pages view?

    • Although one may be tempted to just stick a .background(Color.blue) on Pages, this won't have a desired effect because what we really should do is change the background of the pages themselves. The next temptation would be to then set .background(Color.blue) on each page of our Pages view. Go ahead, try it:
      Pages {
          Text("Page 1")
                  .background(Color.red)
          Text("Page 2")
                  .background(Color.red)
      }
    

    The problem is that by default views in SwiftUI do not fill the available space, so in fact as the view only needs a small space in the page, we are only setting the background of the view. There are many ways to occupy the whole space; the easiest is perhaps to use a GeometryReader as so:

      Pages {
          GeometryReader { geometry in
              Text("Page 1")
          }.background(Color.red)
          GeometryReader { geometry in
              Text("Page 2")
          }.background(Color.red)
      }
    

    Another way is by using Spacer:

        Pages {
            VStack {
                Spacer()
                HStack {
                    Text("Page 1")
                    Spacer()
                }
            }
            .background(Color.blue)
            GeometryReader { geometry in
                Text("Page 2")
            }.background(Color.red)
        }
    
  • How do I position my view to the left (.leading) or to the bottom right (.bottomTrailing)?

    • For example, if we want to position our Text view on the bottom trailing corner, we use the GeometryReader trick again:
      Pages {
              GeometryReader { geometry in
                  Text("Page 1")
                      .frame(width: geometry.size.width,
                             height: geometry.size.height,
                             alignment: .bottomTrailing)
              }
              .background(Color.blue)
              GeometryReader { geometry in
                  Text("Page 2")
              }.background(Color.red)
          }
    

    Or the Spacer trick:

        Pages {
            VStack {
                Spacer()
                HStack {
                    Spacer()
                    Text("Page 1")
                }
            }
            .background(Color.blue)
            GeometryReader { geometry in
                Text("Page 2")
            }.background(Color.red)
        }
    

Demos

All of the demos shown on the GIF can be checked out on the demo repo.

Installation

Pages is available using the Swift Package Manager:

Using Xcode 11, go to File -> Swift Packages -> Add Package Dependency and enter https://github.com/nachonavarro/Pages

Running the tests

Once you select an iPhone destination on Xcode, press ⌘U to run the tests. Alternatively run xcodebuild test -destination 'name=iPhone 11' -scheme 'Pages' on the terminal.

Requirements

  • iOS 13.0+
  • Xcode 11.0+

TODOs

  • Add unit and UI tests.
  • Improve function builder to include conditional clauses.
  • Merge ModelPages and Pages into one common view?

Contributing

Feel free to contribute to Pages!

  1. Fork Pages
  2. Create your feature branch with your changes
  3. Create pull request

License

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

Github

link
Stars: 14
Help us keep the lights on

Dependencies

Used By

Total: 0

Releases

0.1.1 - Nov 8, 2019

Add the option of letting the user control the state of the current page themselves. This allows a more fine-grained control of page selection and the ability to go to pages directly instead of swiping.

0.1.0 - Nov 8, 2019

A page view with a SwiftUI feel that uses a UIPageViewController under the hood.