首先查看我们的需要实现的动态效果图：
标题在上面的显示效果
标题在上.gif
标题在下面的显示效果
标题在下.gif
在UI的设置中需要注意的是title的Y值、PageControl的Y值以及CollectionView的Y值需要根据我们的需求来决定我们的title是显示在上或下
extension HJPageCollectionView {
fileprivate func setupUI(){
// 1.创建titleView
let titleY = isTitleInTop ? 0 : bounds.height - style.titleHeight
let titleFrame = CGRect(x: 0, y: titleY, width: bounds.width, height: style.titleHeight)
titleView = HJTitleView(frame: titleFrame, titles: titles, style: style)
titleView.delegate = self
titleView.backgroundColor = UIColor.randomColor()
addSubview(titleView)
// 2.创建UIPageControl
let pageHeight : CGFloat = 20
let pageY = isTitleInTop ? (bounds.height - pageHeight) :(bounds.height - pageHeight - style.titleHeight)
let pageFrame = CGRect(x: 0, y: pageY, width: bounds.width, height: pageHeight )
pageControl = UIPageControl(frame: pageFrame)
pageControl.numberOfPages = 4
pageControl.isEnabled = false
pageControl.backgroundColor = UIColor.randomColor()
addSubview(pageControl)
// 3.创建CollectionView
let collectionY = isTitleInTop ? style.titleHeight : 0
let collectionFrame = CGRect(x: 0, y: collectionY, width: bounds.width, height: bounds.height - pageHeight - style.titleHeight)
collectionView = UICollectionView(frame: collectionFrame, collectionViewLayout: layout)
collectionView.backgroundColor = UIColor.randomColor()
collectionView.isPagingEnabled = true
collectionView.showsHorizontalScrollIndicator = false
collectionView.bounces = false
collectionView.dataSource = self
collectionView.delegate = self
addSubview(collectionView)
}
}
自定义FlowLayout的HJPageCollectionLayout中的重新布局，重写prepare()方法（override func prepare()）以及对应的每一个Cell方法override fund layoutAttributesForElements还有override var collectionViewContentSize: CGSize内容高度的方法
import UIKit
class HJPageCollectionLayout: UICollectionViewFlowLayout {
var cols : Int = 4
var rows : Int = 2
fileprivate lazy var attricell : [UICollectionViewLayoutAttributes] = [UICollectionViewLayoutAttributes]()
fileprivate lazy var maxWidth : CGFloat = 0
}
extension HJPageCollectionLayout {
override func prepare() {
super.prepare()
// 0. 计算item的宽度&高度
let itemW = (collectionView!.bounds.width - sectionInset.left - sectionInset.right - minimumInteritemSpacing * CGFloat(cols - 1)) / CGFloat(cols)
let itemH = (collectionView!.bounds.height - sectionInset.top - sectionInset.bottom - minimumLineSpacing * CGFloat(rows - 1)) / CGFloat(rows)
// 1. 获取有多少section
let sectionCount = collectionView!.numberOfSections
// 2. 每个section中有多少Item
var prePageCount : Int = 0
for i in 0..<sectionCount {
let itemCount = collectionView!.numberOfItems(inSection: i)
for j in 0..<itemCount {
// 2.1 获取cell 对应的indexpath
let indexpath = IndexPath(item: j, section: i)
// 2.2 根据indexpath创建对应的UICollectionViewLayoutAttributes
let attri = UICollectionViewLayoutAttributes(forCellWith: indexpath)
// 2.3 计算j在该组中第几页
let page = j / (cols * rows)
let index = j % (cols * rows)
let itemY = sectionInset.top + (itemH + minimumLineSpacing) * CGFloat(index / cols)
let itemX = CGFloat(prePageCount + page) * collectionView!.bounds.width + sectionInset.left + (itemW + minimumInteritemSpacing) * CGFloat(index % cols)
attri.frame = CGRect(x: itemX, y: itemY, width: itemW, height: itemH)
attricell.append(attri)
}
prePageCount += (itemCount - 1) / (cols * rows) + 1
}
// 3.计算最大宽度
maxWidth = CGFloat(prePageCount) * collectionView!.bounds.width
}
}
extension HJPageCollectionLayout {
override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
return attricell
}
}
extension HJPageCollectionLayout {
override var collectionViewContentSize: CGSize{
return CGSize(width: maxWidth, height: 0)
}
}
通过UICollectionView继承自UIScrollView中的scrollViewDidEndDecelerating scrollViewDidEndDragging两个滚动方法来tiltView的滚动到相应的位置，cell所在的位置let point = CGPoint(x: layout.sectionInset.left + collectionView.contentOffset.x + 1, y: layout.sectionInset.top + 1)计算出Cell当前所在indexPath.section和indexPath.Item的位置
//MARK: -UICollectionViewDelegate
extension HJPageCollectionView : UICollectionViewDelegate {
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
delegate?.pageCollectionView(self, didSelectItemAt: indexPath)
}
func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
scrollViewEndscroll()
scrollView.isScrollEnabled = true
}
func scrollViewDidEndDragging(_ scrollView: UIScrollView, willDecelerate decelerate: Bool) {
if !decelerate {
scrollViewEndscroll()
} else {
scrollView.isScrollEnabled = false
}
}
fileprivate func scrollViewEndscroll() {
// 1. 取出cell当前的位置
let point = CGPoint(x: layout.sectionInset.left + collectionView.contentOffset.x + 1, y: layout.sectionInset.top + 1)
guard let cellindexPath = collectionView.indexPathForItem(at: point) else { return }
// 2. 判断分组是否发生了变化
if sourceIndexpath.section != cellindexPath.section {
// 2.1修改pageControl的个数
let itemCount = datasource?.pageCollectionView(self, numberOfItemsInSection: cellindexPath.section) ?? 0
pageControl.numberOfPages = (itemCount - 1) / (layout.cols * layout.rows) + 1
// 2.2调整titleView的位置
titleView.setTitleWithProgress(progress: 1.0, sourceIndex: sourceIndexpath.section, targetIndex: cellindexPath.section)
// 2.3 记录最新indexPath值
sourceIndexpath = cellindexPath
}
// 3.根据idexPath设置pageControl
pageControl.currentPage = cellindexPath.item / (layout.cols * layout.rows)
}
}
//MARK: -titleViewDeleagate
extension HJPageCollectionView : HJTitleViewDelegate {
func titleView(_ titleView: HJTitleView, selectedIndex index: Int) {
let sectionindex = IndexPath(item: 0, section: index)
collectionView.scrollToItem(at: sectionindex, at: .left, animated: false)
collectionView.contentOffset.x -= layout.sectionInset.left
scrollViewEndscroll()
}
}
