XLPagerTabStrip

repository·master·Indexed 27 days ago

https://github.com/xmartlabs/xlpagertabstrip

A 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.

Tokens
2.3K
Snippets
7
Records
13
Agent score
42%

What's inside XLPagerTabStrip

  1. Overview of XLPagerTabStrip

    master
    XLPagerTabStrip is a Container View Controller for iOS that allows easy switching among a collection of view controllers using pan gestures. It provides an interactive indicator showing the current, previous, and next child view controllers. It is inspired by Android's PagerTabStrip.
  2. Choose a Pager Type

    master

    XLPagerTabStrip provides four distinct pager types. You must choose the one that fits your UI requirements by subclassing the corresponding controller:

    1. ButtonBarPagerTabStripViewController: Most common; uses a button bar (similar to Instagram or YouTube).
    2. BarPagerTabStripViewController: Shows only a bar indicating the current view controller (no titles or images).
    3. TwitterPagerTabStripViewController: A specific style used by the Twitter app.
    4. SegmentedPagerTabStripViewController: Uses a UISegmentedControl to indicate the current view controller.
    import XLPagerTabStrip
    
    class MyPagerTabStripName: ButtonBarPagerTabStripViewController {
      // ...
    }
  3. Configure Outlets and Layout Constraints

    master

    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:

    • BarPagerTabStripViewController: Connect the barView outlet (type UIView).
    • ButtonBarPagerTabStripViewController: Connect the buttonBarView outlet (type ButtonBarView, which extends UICollectionView).
    • SegmentedPagerTabStripViewController: Connect the segmentedControl outlet. If not connected, the library attempts to use the navigationItem.titleView property with a UISegmentedControl.
    • TwitterPagerTabStripViewController: No additional outlets required.
  4. Customize Twitter Type style

    master

    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.
  5. Customize ButtonBar style

    master

    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()
    }
  6. Customize Bar Type style

    master

    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).
  7. Configure Pager Behaviour

    master

    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:

    • Twitter/Segmented Type: .common(skipIntermediateViewControllers: true)
    • Bar/ButtonBar Type: .progressive(skipIntermediateViewControllers: true, elasticIndicatorLimit: true)
    public var pagerBehaviour: PagerTabStripBehaviour
    
    public enum PagerTabStripBehaviour {
        case common(skipIntermediteViewControllers: Bool)
        case progressive(skipIntermediteViewControllers: Bool, elasticIndicatorLimit: Bool)
    }
  8. Update ButtonBar cells on index change

    master

    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:

    • Use changeCurrentIndex for .common behavior.
    • Use 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)
        }
    }
  9. Provide Child View Controllers

    master

    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()]
    }
  10. Change visible child view controller programmatically

    master

    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)