Made with :heart: by Xmartlabs team. XLPagerTabStrip for SwiftUI!
PagerTabStripView is the first pager view built in pure SwiftUI. It provides a component to create interactive pager views which contains child views. It allows the user to switch between your views either by swiping or tapping a tab bar item.
![]() |
![]() |
![]() |
![]() |
---|
Unlike Apple's TabView it provides:
Creating a page view is super straightforward, you just need to place your custom tab views into a PagerTabStripView
view and apply the pagerTabItem
modifier to each one to specify its navigation bar tab item.
The tag
parameter is the value to identify the tab item. It can be any Hashable value and it must be unique.
import PagerTabStripView
struct MyPagerView: View {
var body: some View {
PagerTabStripView() {
MyFirstView()
.pagerTabItem(tag: 1) {
TitleNavBarItem(title: "Tab 1")
}
MySecondView()
.pagerTabItem(tag: 2) {
TitleNavBarItem(title: "Tab 2")
}
if User.isLoggedIn {
MyProfileView()
.pagerTabItem(tag: 3) {
TitleNavBarItem(title: "Profile")
}
}
}
}
}
To specify the initial selected page you can pass the selection
init parameter (for it to work properly this value have to be equal to some tag value of the tab items).
struct MyPagerView: View {
@State var selection = 1
var body: some View {
PagerTabStripView(selection: $selection) {
MyFirstView()
.pagerTabItem(tag: 1) {
TitleNavBarItem(title: "Tab 1")
}
...
..
.
}
}
}
As you may've already noticed, everything is SwiftUI code, so you can update the child views according to SwiftUI state objects as shown above with if User.isLoggedIn
.
The user can also configure if the swipe action is enable or not (the swipe is based on a drag gesture) and setup what edges have the gesture disabled.
Params:
swipeGestureEnabled
: swipe is enabled or not (default is true).edgeSwipeGestureDisabled
: is an HorizontalContainerEdge (OptionSet) value where the set could have this options: .left, .right (default is an empty set).Why is this parameter important?
This parameter is important in the context of the next PagerTabStripView example in MyPagerView2
. If the pager is on the first page and the user tries to swipe left, it's posible that the parent view container will be triggered instead of the pager's swipe gesture, since the drag gesture can catch the parent view gesture. The edgeSwipeGestureDisabled
paramenter prevents this from happening.
struct MyPagerView2: View {
@State var selection = 1
var body: some View {
PagerTabStripView(edgeSwipeGestureDisabled: .constant([.left]),
selection: $selection) {
MyFirstView()
.pagerTabItem(tag: 1) {
TitleNavBarItem(title: "Tab 1")
}
...
..
.
}
}
}
PagerTabStripView provides 5 different ways to display the views, which can be selected and customized using the pagerTabStripViewStyle
modifier.
This style allows you to add as many pages as you want. The tabs are placed inside a horizontal scroll for large number of pages.
The customizable settings are:
placedInToolbar
: If true TabBar items are placed in the NavigationBar. The pager must be a added inside a NavigationView.pagerAnimationOnTap
: Animation used when the selection changes.pagerAnimationOnSwipe
: Animation used when the drag gesture changes the transaltion.tabItemSpacing
: Horizontal margin between TabBar itemstabItemHeight
: Height of the TabBar items continer.padding
: Padding of the TabBar items continer.barBackgroundView
: Background view of the TabBar items container.indicatorViewHeight
: Height of the indicator view.indicatorView
: View representing the indicator view.struct PagerView: View {
@State var selection = 1
var body: some View {
PagerTabStripView(selection: $selection) {
MyView()
.pagerTabItem(tag: 1) {
TitleNavBarItem(title: "First big width")
}
AnotherView()
.pagerTabItem(tag: 2) {
TitleNavBarItem(title: "Short")
}
...
..
.
}
.pagerTabStripViewStyle(.scrollableBarButton(tabItemSpacing: 15,
tabItemHeight: 50,
indicatorView: {
Rectangle().fill(.blue).cornerRadius(5)
}))
}
}
In this example, we add some settings like the tab bar height, indicator view and tab item spaces. Let's see how it looks!
This style places all TabBar items in a container, with each item having the same width. It is ideal for pages with 2-4 pages. The same settings as the Scrollable style can be customized.
The customizable settings are:
placedInToolbar
: If true TabBar items are placed in the NavigationBar. Pager must be a added inside a NavigationView.pagerAnimationOnTap
: Animation used when selection changes.pagerAnimationOnSwipe
: Animation used on drag gesture traslation changes.tabItemSpacing
: Horizontal margin among tabbar itemstabItemHeight
: TabBar items continer heightpadding
: TabBar items continer paddingbarBackgroundView
: TabBar items container background view.indicatorViewHeight
: Indicator view heightindicatorView
: View representing the indicator view.struct PagerView: View {
@State var selection = "Tab 1"
var body: some View {
PagerTabStripView(selection: $selection) {
MyView()
.pagerTabItem(tag: "Tab 1") {
TitleNavBarItem(title: "Tab 1")
}
AnotherView()
.pagerTabItem(tag: "Tab 2") {
TitleNavBarItem(title: "Tab 2")
}
if User.isLoggedIn {
ProfileView()
.pagerTabItem(tag: "Profile") {
TitleNavBarItem(title: "Profile")
}
}
}
.pagerTabStripViewStyle(.barButton(tabItemSpacing: 15,
tabItemHeight: 50,
indicatorView: {
Rectangle().fill(.gray).cornerRadius(5)
}))
}
}
In this example, we add some settings like the tab bar height, indicator view and indicator bar height. Let's see how it looks!
This style only displays a bar that indicates the current selected page.
The customizable settings are:
placedInToolbar
: If set to true, the TabBar items will be placed in the NavigationBar. The Pager must be a added inside a NavigationView.pagerAnimationOnTap
: Animation used when the selection changes.pagerAnimationOnSwipe
: Animation used when the drag gesture changes the traslation.indicatorViewHeight
: Height of the Indicator view.indicatorView
: View representing the indicator view.This style uses a Segmented Picker to indicate the selected page. You can indicate the segmented color, its padding and if you want it to be plced inside the toolbar.
The customizable settings are:
placedInToolbar
: If true TabBar items are placed in the NavigationBar. The Pager must be a added inside a NavigationView.pagerAnimationOnTap
: Animation used when the selection changes.pagerAnimationOnSwipe
: Animation used when the drag gesture changes the traslation.backgroundColor
: Color of the segmented picker.padding
: Padding of the Segmented picker.We can build any custom styles by using bar and scrollablebar styles and providing custom views representing the indicator and the tabbar container view. Check out the example below. There are some other examples in the Example app.
.pagerTabStripViewStyle(.barButton(placedInToolbar: false,
pagerAnimation: .interactiveSpring(response: 0.5,
dampingFraction: 1.00,
blendDuration: 0.25),
tabItemHeight: 48,
barBackgroundView: {
LinearGradient(
colors: 🌈,
startPoint: .topLeading,
endPoint: .bottomTrailing
)
.opacity(0.2)
}, indicatorView: {
Text("👍🏻").offset(x: 0, y: -24)
}))
See how it looks:
The navigation bar supports custom tab bar views for each page. Ypu can specify each tab bar item inline inside the pagerTabItem modifier or in a independent struct by conforming to a View protocol.
For simplicity, we are going to implement a nav bar item with only a title. You can find more examples in the example app.
struct TitleNavBarItem: View {
let title: String
var body: some View {
VStack {
Text(title)
.foregroundColor(Color.gray)
.font(.subheadline)
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
.background(Color.white)
}
}
Follow these 3 steps to run Example project
To install PagerTabStripView using CocoaPods, simply add the following line to your Podfile:
pod 'PagerTabStripView', '~> 4.0'
To install PagerTabStripView using Carthage, simply add the following line to your Cartfile:
github "xmartlabs/PagerTabStripView" ~> 4.0
Before contributing, be sure to check the CONTRIBUTING file for more info.
We'd love to hear about your experience with PagerTabStripView. If you use it in your app, drop us a line on Twitter.
link |
Stars: 626 |
Last commit: Yesterday |
.pagerTabItem(tag: SelectionType)
modifier now requires tag parameter which identifies the pager tab item.pagerTabStripViewStyle(_ style: PagerStyle)
is the new modifier to set up pager style.public func onPageAppear(perform action: (() -> Void)?) -> some View
was removed. You should use onAppear native callback or use selection state variable.PagerTabViewDelegate
and PagerTabViewState
deleted. You should use selection
state or pagerSettings.transition.progress(for: tag)
to get a notification on selection and scroll progress changes.Swiftpack is being maintained by Petr Pavlik | @ptrpavlik | @swiftpackco | API | Analytics