经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » 移动开发 » iOS » 查看文章
6. UICollectionView Decoration View
来源:cnblogs  作者:小小个子大个头  时间:2020/12/14 17:18:49  对本文有异议

6. UICollectionView Decoration View

UICollectionView 允许我们为每一个section、cell甚至是整个collectionView添加一个装饰视图。这玩意怎么说呢,就是添加了一些可复用视图,视图的frame可以随意设置,划重点是随意设置。

1.给section添加一张背景图片

实现装饰视图需要自定义layout,这里选择集成UICollectionViewFlowLayout,为了省去cell的布局实现

class CZDecorationFlowLayout: UICollectionViewFlowLayout {
    let decorationViewKind = "CZDecorationView"
    var itemsAttribute = [UICollectionViewLayoutAttributes]()
    var cz_delegate: CZDecorationFlowLayoutDelegate?
    
    override func prepare() {
        super.prepare()
        // 注册装饰视图
        self.register(CZDecorationView.self, forDecorationViewOfKind: decorationViewKind)
        // 获取section数量
        let sections = self.collectionView?.numberOfSections ?? 0
        
        // 给每一个section添加装饰视图的布局属性
        for i in 0..<sections {
            let attribute = CZDecorationAttributes.init(forDecorationViewOfKind: decorationViewKind, with: IndexPath(item: 0, section: i))
            attribute.zIndex = -1
            attribute.imageName = self.cz_delegate?.layout(self, decorationImageAt: i)
            
            if let count = self.collectionView?.numberOfItems(inSection: i), count > 0 {
                let firstItem = self.layoutAttributesForItem(at: IndexPath(item: 0, section: i))
                let lastItem = self.layoutAttributesForItem(at: IndexPath(item: (count - 1), section: i))
                let height = lastItem!.frame.maxY - firstItem!.frame.minY
                attribute.frame = CGRect(x: 0, y: firstItem!.frame.minY, width: self.collectionView!.frame.size.width, height: height)
                self.itemsAttribute.append(attribute)
            }
        }
        
    }
    
    override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
        var attributes = super.layoutAttributesForElements(in: rect)
        for attribute in self.itemsAttribute {
            if rect.intersects(attribute.frame) {
                attributes?.append(attribute)
            }
        }
        return attributes
    }
}

重写prepare方法,此时一定要调用super.prepare(),否则会出问题。这里的代理是为了获取不同section中的图片,装饰视图的frame可以随意设置,因为要给section添加背景,我们选择从第一个cell到最后一个cell,且宽度等于collectionView的宽度,将布局属性添加到数组中,后续在layoutAttributesForElements(in rect: CGRect)中将其追加到collectionView子视图的布局属性数组中

class CZDecorationView: UICollectionReusableView {

    var imageView = UIImageView()

    override init(frame: CGRect) {
        super.init(frame: frame)
        self.addSubview(imageView)
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    override func apply(_ layoutAttributes: UICollectionViewLayoutAttributes) {
        super.apply(layoutAttributes)
        self.imageView.frame = layoutAttributes.bounds
        let attributes = layoutAttributes as! CZDecorationAttributes
        if let name = attributes.imageName {
            self.imageView.image = UIImage(named: name)
        }
    }
}

最重要的是apply(_ layoutAttributes: UICollectionViewLayoutAttributes),在这里我们将对视图中的子视图设置数据。

到此就完成了一个section的背景添加
sectiont添加背景图片

2.给cell添加背景图片

对于上面的代码,我们只需要改一下装饰视图的布局属性即可

let itemCount = self.collectionView?.numberOfItems(inSection: i) ?? 0
for item in 0..<itemCount {
    let indexPath = IndexPath(item: item, section: i)
    let attribute = CZDecorationAttributes.init(forDecorationViewOfKind: decorationViewKind, with: indexPath)
    attribute.zIndex = -1
    attribute.imageName = self.cz_delegate?.layout(self, decorationImageAt: indexPath)
    let itemAttributes = self.layoutAttributesForItem(at: indexPath)!
    attribute.frame = itemAttributes.frame
    self.itemsAttribute.append(attribute)
}

cell添加背景图片

3.collectionView可滚动范围添加背景图片

if let itemCountInSection = self.collectionView?.numberOfItems(inSection: (sections - 1)), itemCountInSection > 0 {
    let firstItem = self.layoutAttributesForItem(at: IndexPath(item: 0, section: 0))
    let lastItem = self.layoutAttributesForItem(at: IndexPath(item: (itemCountInSection - 1), section: (sections - 1)))
    let indexPath = IndexPath(item: 0, section: 0)
    let attribute = CZDecorationAttributes.init(forDecorationViewOfKind: decorationViewKind, with: indexPath)
    attribute.zIndex = -1
    attribute.imageName = "6"
    let height = lastItem!.frame.maxY - firstItem!.frame.minY
    attribute.frame = CGRect(x: 0, y: 0, width: self.collectionView!.frame.size.width, height: height)
    self.itemsAttribute.append(attribute)
}

collectionView可滚动范围添加背景图片

4. 总结

关于collection的装饰视图,核心步骤:

  1. 创建集成自UICollectionReusableView的自定义视图
  2. func apply(_ layoutAttributes: UICollectionViewLayoutAttributes)中补充显示逻辑
  3. 创建自定义layout,在func prepare()中编写装饰视图的布局属性(最为重要,控制装饰视图的显示的位置及尺寸)

5.代码地址

小小个子大个头

原文链接:http://www.cnblogs.com/4zjq/p/14107802.html

 友情链接: NPS