HJPageView拓展 - 礼物界面和表情界面的搭建

首先查看我们的需要实现的动态效果图：

标题在上面的显示效果

标题在上.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.. [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()
    }

}

Demo下载