话不多说，直接上图，要实现类似如下效果。

• 这个效果非常常见，这里着重讲讲核心代码
  

封装顶部的PageTitleView

封装构造函数

• 封装构造函数，让别人在创建对象时，就传入其实需要显示的内容
  • frame：创建对象时确定了frame就可以直接设置子控件的位置和尺寸
  • isScrollEnable：是否可以滚动。某些地方该控件是可以滚动的。
  • titles：显示的所有标题

1. // MARK:- 构造函数
2. init(frame: CGRect, isScrollEnable : Bool, titles : [String]) {
3. self.isScrollEnable = isScrollEnable
4. self.titles = titles
5. super.init(frame: frame)
6. }

设置UI界面

• 设置UI界面
  • 添加UIScrollView，如果标题过多，则可以滚动
  • 初始化所有的Label，用于显示标题。并且给label添加监听手势
  • 添加顶部线和滑块的View

           实现相对来说比较简单，这里代码从略

封装底部的PageCotentView

封装构造函数

• 封装构造函数，让别人在创建对象时，就传入其实需要显示的内容
  • 所有用于显示在UICollectionView的Cell的所有控制器
  • 控制器的父控制器

1. // MARK:- 构造函数
2. init(frame: CGRect, childVcs : [UIViewController], parentViewController : UIViewController) {
3. self.childVcs = childVcs
4. self.parentViewController = parentViewController
6. super.init(frame: frame)
7. }

设置UI界面内容

• 设置UI界面
  • 将所有的子控制器添加到父控制器中
  • 添加UICollectionView，用于展示内容

1. // MARK:- 懒加载属性
   private lazy var collectionView : UICollectionView = {
   // 1.创建布局
   let layout = UICollectionViewFlowLayout()
   layout.itemSize = self.bounds.size
   layout.minimumLineSpacing = 0
   layout.minimumInteritemSpacing = 0
   layout.scrollDirection = .Horizontal
   // 2.创建collectionView
   let collectionView = UICollectionView(frame: self.bounds, collectionViewLayout: layout)
   collectionView.showsHorizontalScrollIndicator = false
   collectionView.pagingEnabled = true
   collectionView.bounces = false
   collectionView.scrollsToTop = false
   collectionView.dataSource = self
   collectionView.delegate = self
   collectionView.registerClass(UICollectionViewCell.self, forCellWithReuseIdentifier: kContentCellID)
   return collectionView
   }()
   private func setupUI() {
   // 1.添加所有的控制器
   for childVc in childVcs {
   parentViewController?.addChildViewController(childVc)
   }
   // 2.添加collectionView
   addSubview(collectionView)
   }

    

实现UICollectionView的数据源方法

• 在返回Cell的方法中，先将cell的contentView中的子控件都移除，防止循环引用
• 取出indexPath.item对应的控制器，将控制器的View添加到Cell的contentView中

  // MARK:- 遵守UICollectionView的数据源
  extension PageContentView : UICollectionViewDataSource {
  func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
  return childVcs.count
  }
  func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
  let cell = collectionView.dequeueReusableCellWithReuseIdentifier(kContentCellID, forIndexPath: indexPath)
  // 移除之前的
  for subview in cell.contentView.subviews {
  subview.removeFromSuperview()
  }
  // 取出控制器
  let childVc = childVcs[indexPath.item]
  childVc.view.frame = cell.contentView.bounds
  cell.contentView.addSubview(childVc.view)
  return cell
  }
  }

   

  PageTitleView点击改变PageContentView

• 通过代理将PageTitleView的事件传递出去

  /// 定义协议
  protocol PageTitleViewDelegate : class {
  func pageTitleView(pageTitleView : PageTitleView, didSelectedIndex index : Int)
  }
  @objc private func titleLabelClick(tapGes : UITapGestureRecognizer) {
  // 1.获取点击的下标志
  guard let view = tapGes.view else { return }
  let index = view.tag
  // 2.滚到正确的位置
  scrollToIndex(index)
  // 3.通知代理
  delegate?.pageTitleView(self, didSelectedIndex: index)
  }

   

  内部调整

  // 内容滚动
  private func scrollToIndex(index : Int) {
  // 1.获取最新的label和之前的label
  let newLabel = titleLabels[