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

这个效果非常常见,这里着重讲讲核心代码
封装顶部的PageTitleView
封装构造函数
封装构造函数,让别人在创建对象时,就传入其实需要显示的内容 frame:创建对象时确定了
-
frame就可以直接设置子控件的位置和尺寸
isScrollEnable:是否可以滚动。某些地方该控件是可以滚动的。
titles:显示的所有标题
// MARK:- 构造函数
init(frame: CGRect, isScrollEnable : Bool, titles : [String]) {
selfisScrollEnable = isScrollEnable
selftitles = titles
superinit(frame: frame)
}
设置UI界面
设置UI界面
-
添加UIScrollView,如果标题过多,则可以滚动
初始化所有的Label,用于显示标题。并且给label添加监听手势
添加顶部线和滑块的View
实现相对来说比较简单,这里代码从略
封装底部的PageCotentView
封装构造函数
封装构造函数,让别人在创建对象时,就传入其实需要显示的内容
-
所有用于显示在UICollectionView的Cell的所有控制器
控制器的父控制器
// MARK:- 构造函数
init(frame: CGRect, childVcs : [UIViewController], parentViewController : UIViewController) {
selfchildVcs = childVcs
selfparentViewController = parentViewController
superinit(frame: frame)
}
设置UI界面内容
设置UI界面
-
将所有的子控制器添加到父控制器中
添加UICollectionView,用于展示内容
// 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中










