Colletion View 简单的备忘

Posted 2020-07-22 Alex_sun

UIColletionView

这篇只是做UIColletionView的常用属性、代理方法和数据源方法的备忘，之后做一些自定义布局，增加删除动画等。

UIColletionViewFlowLayout的常用属性和UIColletionView的常用属性方法

        // 创建布局类
        let layout = UICollectionViewFlowLayout()
        layout.itemSize = CGSizeMake(50.0, 50.0)
        layout.headerReferenceSize = CGSizeMake(view.frame.size.width, 100)
        layout.scrollDirection = UICollectionViewScrollDirection.Vertical
        layout.minimumLineSpacing = 50.0
        layout.minimumInteritemSpacing = (view.frame.size.width - 20 - 50 * 4) / 4
        layout.sectionInset = UIEdgeInsetsMake(10, 10, 0, 10)
        
        // 创建collection view
        let collectionView = UICollectionView(frame: CGRectMake(0, 20, view.frame.size.width, view.frame.size.height - 20), collectionViewLayout: layout)
        collectionView.backgroundColor = UIColor.whiteColor()
        collectionView.delegate = self
        collectionView.dataSource = self
        
        // 注册Cell SectionHeader SectionFooter
        collectionView.registerClass(UICollectionViewCell.self, forCellWithReuseIdentifier: "Cell")
        collectionView.registerClass(UICollectionReusableView.self, forSupplementaryViewOfKind: UICollectionElementKindSectionHeader, withReuseIdentifier: "SectionHeader")
        collectionView.registerClass(UICollectionReusableView.self, forSupplementaryViewOfKind: UICollectionElementKindSectionFooter, withReuseIdentifier: "SectionFooter")
        
        view.addSubview(collectionView)

 一般简单的布局使用原生的flowlayout就行，常用属性：

• itemSize：每个cell的尺寸。
• headerReferenceSize：组头的尺寸。
• footerReferenceSize：组尾的尺寸。
• scrollDirection：滚动方向。
• minimumLineSpacing：每一行的距离。
• minimumInteritemSpacing：每个cell之间的距离。
• sectionInset：组的内边距。

一般collection view的必须设置的属性和方法：

• delegate：代理，可以监听事件。
• dataSource：数据源，提供一些collection view要用的数据
• registerClass(_, forCellWithReuseIdentifier:)：注册Cell，实现复用机制。
• registerClass(_, forSupplementaryViewOfKind: , withReuseIdentifier:)：注册组头或组尾，也是可以复用的。

 

Delegate

高亮： 

    // cell是否允许高亮
    func collectionView(collectionView: UICollectionView, shouldHighlightItemAtIndexPath indexPath: NSIndexPath) -> Bool {
        return true
    }
    
    // cell已经进入高亮状态
    func collectionView(collectionView: UICollectionView, didHighlightItemAtIndexPath indexPath: NSIndexPath) {
        print("didHighlightItemAtIndexPath")
    }
    
    // cell已经结束高亮状态
    func collectionView(collectionView: UICollectionView, didUnhighlightItemAtIndexPath indexPath: NSIndexPath) {
        print("didUnhighlightItemAtIndexPath")
    }

 选中：

    // cell是否允许选中
    func collectionView(collectionView: UICollectionView, shouldSelectItemAtIndexPath indexPath: NSIndexPath) -> Bool {
        return true
    }
    
    // cell是否允许取消选中
    func collectionView(collectionView: UICollectionView, shouldDeselectItemAtIndexPath indexPath: NSIndexPath) -> Bool {
        return true
    }
    
    // cell被选中
    func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {
        print("didSelectItemAtIndexPath")
    }
    
    // cell取消选中
    func collectionView(collectionView: UICollectionView, didDeselectItemAtIndexPath indexPath: NSIndexPath) {
        print("didDeselectItemAtIndexPath")
    }

 显示（ios8）：

    // 即将有cell显示
    func collectionView(collectionView: UICollectionView, willDisplayCell cell: UICollectionViewCell, forItemAtIndexPath indexPath: NSIndexPath) {
        print("willDisplayCell")
    }
    
    // 即将有组头或组尾显示
    func collectionView(collectionView: UICollectionView, willDisplaySupplementaryView view: UICollectionReusableView, forElementKind elementKind: String, atIndexPath indexPath: NSIndexPath) {
        print("willDisplaySupplementaryView")
    }
    
    // 有cell不在屏幕上显示了
    func collectionView(collectionView: UICollectionView, didEndDisplayingCell cell: UICollectionViewCell, forItemAtIndexPath indexPath: NSIndexPath) {
        print("didEndDisplayingCell")
    }
    
    // 有组头或组尾不在屏幕上显示了
    func collectionView(collectionView: UICollectionView, didEndDisplayingSupplementaryView view: UICollectionReusableView, forElementOfKind elementKind: String, atIndexPath indexPath: NSIndexPath) {
        print("didEndDisplayingSupplementaryView")
    }

 菜单：

    // 是否允许显示菜单
    func collectionView(collectionView: UICollectionView, shouldShowMenuForItemAtIndexPath indexPath: NSIndexPath) -> Bool {
        return true
    }
    
    // 允许实现那个菜单方法
    func collectionView(collectionView: UICollectionView, canPerformAction action: Selector, forItemAtIndexPath indexPath: NSIndexPath, withSender sender: AnyObject?) -> Bool {
        return true
    }
    
    // 菜单方法的具体实现
    func collectionView(collectionView: UICollectionView, performAction action: Selector, forItemAtIndexPath indexPath: NSIndexPath, withSender sender: AnyObject?) {
        
    }

重新布局 ：

    // 重新布局的时候调用
    func collectionView(collectionView: UICollectionView, transitionLayoutForOldLayout fromLayout: UICollectionViewLayout, newLayout toLayout: UICollectionViewLayout) -> UICollectionViewTransitionLayout {
        print("transitionLayoutForOldLayout")
        let transitionLayout = UICollectionViewTransitionLayout(currentLayout: fromLayout, nextLayout: toLayout)
        transitionLayout.transitionProgress = 1.5
        return transitionLayout
    }

 

DelegateFlowLayout

    // 设置每个cell的尺寸
    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
        if indexPath.row % 2 == 0{
            return CGSizeMake(30, 30)
        } else {
            return CGSizeMake(50, 50)
        }
    }
    
    // 设置每一组的内边距
    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAtIndex section: Int) -> UIEdgeInsets {
        return UIEdgeInsetsMake(20, 5, 10, 5)
    }
    
    // 返回每一组的行距
    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAtIndex section: Int) -> CGFloat {
        return 10
    }
    
    // 返回每组item之间的间距
    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAtIndex section: Int) -> CGFloat {
        return 10
    }
    
    // 返回每一组的组尾尺寸
    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForFooterInSection section: Int) -> CGSize {
        return CGSizeMake(view.frame.size.width, 80)
    }
    
    // 返回每一组的组头尺寸
    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize {
        return CGSizeMake(view.frame.size.width, 200)
    }

 

DataSource

    // 必须实现 返回cell个数
    func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 40
    }
    
    // 必须实现 返回每个cell 复用机制
    func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCellWithReuseIdentifier("Cell", forIndexPath: indexPath)
        cell.backgroundColor = UIColor.brownColor()
        
        return cell
    }
    
    // 返回有几组
    func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
        return 2
    }
    
    // 返回组头或者组尾视图，同样用复用机制
    func collectionView(collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, atIndexPath indexPath: NSIndexPath) -> UICollectionReusableView {
        let reusableView = collectionView.dequeueReusableSupplementaryViewOfKind(kind, withReuseIdentifier: "SectionHeader", forIndexPath: indexPath)
        if kind == UICollectionElementKindSectionHeader {
            reusableView.backgroundColor = UIColor.blackColor()
        } else {
            reusableView.backgroundColor = UIColor.blueColor()
        }
        return reusableView
    }