Overview of XLPagerTabStrip
masterPagerTabStrip.repository·master·Indexed 27 days ago
https://github.com/xmartlabs/xlpagertabstripA Swift library for iOS that provides a Container View Controller for managing view controller transitions in a tabbed interface using pan gestures. It supports four pager indicator styles: ButtonBar, Bar, Twitter, and Segmented. The library includes the IndicatorInfoProvider protocol for child view controllers and configurable pager behaviors such as .common and .progressive.
PagerTabStrip.XLPagerTabStrip provides four distinct pager types. You must choose the one that fits your UI requirements by subclassing the corresponding controller:
UISegmentedControl to indicate the current view controller.import XLPagerTabStrip
class MyPagerTabStripName: ButtonBarPagerTabStripViewController {
// ...
}To set up the pager, drag a UIViewController into your storyboard and set its class to your chosen pager subclass. You must connect the containerView outlet to a UIScrollView in your view controller view.
Depending on the type, you may need additional outlet connections:
barView outlet (type UIView).buttonBarView outlet (type ButtonBarView, which extends UICollectionView).segmentedControl outlet. If not connected, the library attempts to use the navigationItem.titleView property with a UISegmentedControl.Modify the appearance of the Twitter type indicator using settings.style:
dotColor: Color of the unselected dots.selectedDotColor: Color of the selected dot.portraitTitleFont: Font for the title in portrait orientation.landscapeTitleFont: Font for the title in landscape orientation.titleColor: Color of the title text.Modify the appearance of the Segmented type indicator using settings.style:
segmentedControlColor: Color of the segmented control.Configure the appearance of the ButtonBar via settings.style. Important: Settings must be applied before viewDidLoad is called.
Key Properties:
buttonBarBackgroundColor: Background color of the bar.buttonBarMinimumInteritemSpacing: Minimum spacing between items.buttonBarMinimumLineSpacing: Minimum line spacing.buttonBarLeftContentInset / buttonBarRightContentInset: Flow layout insets.selectedBarBackgroundColor: Color of the selected indicator bar.selectedBarHeight: Height of the selected indicator bar.buttonBarItemBackgroundColor: Background color for each item cell.buttonBarItemFont: Font for the item title.buttonBarItemLeftRightMargin: Space before and after the title label.buttonBarItemTitleColor: Color of the item title.buttonBarItemsShouldFillAvailableWidth: If true, stretches cells to fill the screen width.buttonBarHeight: Height of the bar (only if created programmatically).override func viewDidLoad() {
self.settings.style.selectedBarHeight = 2
self.settings.style.selectedBarBackgroundColor = UIColor.white
super.viewDidLoad()
}Modify the appearance of the Bar type indicator using settings.style:
barBackgroundColor: Background color of the bar.selectedBarBackgroundColor: Color of the selected indicator.barHeight: Height of the bar (only if created programmatically).Use the pagerBehaviour property to determine how the indicator updates during swipes or transitions.
Available behaviors:
.common(skipIntermediateViewControllers: Bool): Updates the indicator at once during transitions..progressive(skipIntermediateViewControllers: Bool, elasticIndicatorLimit: Bool): Updates the indicator progressively as you swipe.Associated Values:
skipIntermediateViewControllers: If true, tapping a tab indicator skips intermediate view controllers.elasticIndicatorLimit: If true, the indicator tensions when reaching the first or last indicator limit.Default Behaviors:
.common(skipIntermediateViewControllers: true).progressive(skipIntermediateViewControllers: true, elasticIndicatorLimit: true)public var pagerBehaviour: PagerTabStripBehaviour
public enum PagerTabStripBehaviour {
case common(skipIntermediteViewControllers: Bool)
case progressive(skipIntermediteViewControllers: Bool, elasticIndicatorLimit: Bool)
}To update the appearance of ButtonBar cells (e.g., changing text color) when the selected index changes, use the following closure properties. The choice depends on your pagerBehaviour:
changeCurrentIndex for .common behavior.changeCurrentIndexProgressive for .progressive behavior.Example of using changeCurrentIndexProgressive to animate cell transformations and update text colors:
changeCurrentIndexProgressive = { (oldCell: ButtonBarViewCell?, newCell: ButtonBarViewCell?, progressPercentage: CGFloat, changeCurrentIndex: Bool, animated: Bool) -> Void in
guard changeCurrentIndex == true else { return }
oldCell?.label.textColor = UIColor(white: 1, alpha: 0.6)
newCell?.label.textColor = UIColor.white
if animated {
UIView.animate(withDuration: 0.1, animations: { () -> Void in
newCell?.transform = CGAffineTransform(scaleX: 1.0, y: 1.0)
oldCell?.transform = CGAffineTransform(scaleX: 0.8, y: 0.8)
})
}
else {
newCell?.transform = CGAffineTransform(scaleX: 1.0, y: 1.0)
oldCell?.transform = CGAffineTransform(scaleX: 0.8, y: 0.8)
}
}To populate the pager with content, override the viewControllers(for:pagerTabStripController:) method in your pager subclass. This method is part of the PagerTabStripDataSource protocol, which is already implemented by the base pager classes.
override public func viewControllers(for pagerTabStripController: PagerTabStripViewController) -> [UIViewController] {
return [MyEmbeddedViewController(), MySecondEmbeddedViewController()]
}Use the following methods on PagerTabStripViewController to switch the visible view controller via code:
func moveToViewController(at index: Int)
func moveToViewController(at index: Int, animated: Bool)
func moveTo(viewController: UIViewController)
func moveTo(viewController: UIViewController, animated: Bool)