Swift 3.0-XLPagerTabStrip的使用

效果图.gif

安装

• pod 'XLPagerTabStrip'

Pager Types

Button Bar

barButton.gif

• 这是最常见的类型，顶部是分页的标题，与下面的分页控制器联动，并且顶部具有滚动效果。

Bar

bar.gif

• Bar样式，顶部没有标题和图片，只有一个表明当前子控制器的长条。

Twitter

twitter.gif

• 类似Twitter app的样式。

Segmented

segmented.gif

• 使用了UISegmentedControl去展示分页控制器

自定义

• 如果上面几种没有你想要的样式，你还可以继承PagerTabStripViewController类去自定义自己钟意的样式。

使用

主控制器代码

• 创建主控制器继承于TwitterPagerTabStripViewController, ButtonBarPagerTabStripViewController, SegmentedPagerTabStripViewController, BarPagerTabStripViewController的其中一个。我们项目是ButtonBarPagerTabStripViewController。

import XLPagerTabStrip

class MyPagerTabStripName: ButtonBarPagerTabStripViewController {
  ..
}

• 如果你需要修改ButtonBarPagerTabStripViewController顶部的参数，里面提供了许多属性供修改:

// 顶部buttonBar背景颜色
settings.style.buttonBarBackgroundColor: UIColor?
// 最小单元延伸间距
settings.style.buttonBarMinimumInteritemSpacing: CGFloat?
// 最小单元格间距
settings.style.buttonBarMinimumLineSpacing: CGFloat?
settings.style.buttonBarLeftContentInset: CGFloat?
settings.style.buttonBarRightContentInset: CGFloat?
// 选中长条背景颜色
settings.style.selectedBarBackgroundColor = UIColor.blackColor()
// 选中长条高度
settings.style.selectedBarHeight: CGFloat = 5
// item(标签)背景颜色
settings.style.buttonBarItemBackgroundColor: UIColor?
// item(标签)字体大小
settings.style.buttonBarItemFont = UIFont.systemFontOfSize(18)
settings.style.buttonBarItemLeftRightMargin: CGFloat = 8
// item(标签)字体颜色
settings.style.buttonBarItemTitleColor: UIColor?
settings.style.buttonBarItemsShouldFillAvailiableWidth = true
public var buttonBarHeight: CGFloat?

要修改属性需要在super.viewDidLoad()之前实现:

override func viewDidLoad() {
        self.settings.style.buttonBarItemFont = .systemFont(ofSize: 14)
        self.settings.style.buttonBarItemTitleColor = UIColor.hexColor("#DCB770")
        self.settings.style.buttonBarHeight = 40
        self.settings.style.buttonBarBackgroundColor = UIColor.white
        self.settings.style.buttonBarItemBackgroundColor = UIColor.white
        self.settings.style.selectedBarHeight = 2
        
        changeCurrentIndexProgressive = { [weak self] (oldCell: ButtonBarViewCell?, newCell: ButtonBarViewCell?, progressPercentage: CGFloat, changeCurrentIndex: Bool, animated: Bool) -> Void in
            guard changeCurrentIndex == true else { return }
            oldCell?.label.textColor = .black
            newCell?.label.textColor = UIColor.hexColor("#DCB770")
        }
        
        super.viewDidLoad()  
    }

• 添加子控制器,需要实现：

override public func viewControllers(for pagerTabStripController: PagerTabStripViewController) -> [UIViewController] {
  return [MyEmbeddedViewController(), MySecondEmbeddedViewController()]
}

子控制器代码

• 需要遵循IndicatorInfoProvider协议，示例：

class MyEmbeddedViewController: UITableViewController, IndicatorInfoProvider {

  func indicatorInfo(for pagerTabStripController: PagerTabStripViewController) -> IndicatorInfo {
    return IndicatorInfo(title: "My Child title")
  }
}

• 我是4个分页，复用一个类，需要不一样的标题，所以我把标题公开给外部修改：

public var itemInfo: IndicatorInfo = "全部"
func indicatorInfo(for pagerTabStripController: PagerTabStripViewController) -> IndicatorInfo {
        return itemInfo
    }

主控制器:

override public func viewControllers(for pagerTabStripController: PagerTabStripViewController) -> [UIViewController] {
        
        let child_1 = getVCOfSB("AllOrdersViewController", sbName: "Orders") as! AllOrdersViewController
        child_1.itemInfo.title = "全部"
        let child_2 = getVCOfSB("AllOrdersViewController", sbName: "Orders") as! AllOrdersViewController
        child_2.itemInfo.title = "待付款"
        let child_3 = getVCOfSB("AllOrdersViewController", sbName: "Orders") as! AllOrdersViewController
        child_3.itemInfo.title = "待发货"
        let child_4 = getVCOfSB("AllOrdersViewController", sbName: "Orders") as! AllOrdersViewController
        child_4.itemInfo.title = "待收货"
        
        return [child_1, child_2, child_3, child_4]
    }

效果.gif

XLPagerTabStrip