给UICollectionView设置组背景和组圆角-Swift
钟情圆角怎么办?
最近由于我们的UI设计钟情于圆角搞得我很方，各种圆角渐变，于是就有了下面这篇给UICollectionView的组设置圆角和背景色的一个小封装，拿出来和大家分享一下，里面的具体的一下细节都在代码注释里面，大家留意下代码注释就好。我们理一下大致的一个思路。
既然是要设置圆角和背景，那我们首先需要考虑的是在哪里设置，直接设置什么属性肯定是不行的，要不然那我就是疯了写这个。😺我们都应该知道UICollectionView我们要想自定义一些东西或者布局几乎都是通过Layout下手的，那我们要给它设置组背景色和组圆角是不是也在这里进行呢？我们大致的思路是这样的：
给UICollectionView 每一组添加一个修饰View，然后在这个修饰View上我们设置组圆角和背景色，最后我们把CollectionCell 设置成 Clean背景就可以达到我们想要的效果。
理解上面这句话我们第一步就是每组先添加修饰View了！怎么处理呢？
func registDecorationView() {
self.register(PPCollectionReusableView.self, forDecorationViewOfKind: PPCollectionViewDecorationView)
}
好了这里只是开个头，重点都是下面呢！
NOTE: PPReusableView.self 这个语法在OC中就等于[PPReusableView Class]
PPReusableView是继承与UICollectionReusableView这个装饰View，我们后面会说这个View 后面的 PPCollectionViewSectionBackground 就是我们平时像注册cell时候的一个 identify 而已。
重点
在我们写瀑布流或者别的一些布局的时候，我们都是在哪里重写的？ 没错就是 prepare 方法, 我们重点也是在这里进行的，下面代码注释写的很仔细的，要是有不理解的地方可以留言或者Q我，具体的肯定是我们继承 UICollectionViewFlowLayout 写了（要是你也是流式布局的话，要不是你再找UICollectionViewFlowLayout的父亲去继承开发），这里需要注意UICollectionViewFlowLayout 和 UICollectionViewDelegateFlowLayout，别搞混淆了（相信大家不会混淆）。按照如下定义一个PPBaseFlowLayout继承与UICollectionViewFlowLayout，在里面我们重写prepare这个方法。下面的代码是我们给 PPCollectionViewFlowLayout 添加 Extension 处理。
// MARK: - set property
extension PPCollectionViewFlowLayout{
/// 给collectionView设置背景和圆角
func setSectionBackgaoundColorAndCorner(){
/// 获取collectionView的代理
guard let delegate = self.collectionView?.delegate else {
return
}
/// 没遵守这个协议就不再往下设置
if delegate.conforms(to: PPCollectionViewDelegateFlowLayout.self) == false {
return
}
/// collectionView有多少组
let numberOfSections = self.collectionView?.numberOfSections ?? 0
if numberOfSections == 0 {
return
}
/// 循环遍历各组 设置添加的属性
for section in 0..<numberOfSections {
/// 一组cell的Item
let numberOfItems = self.collectionView?.numberOfItems(inSection: section) ?? 0
if (numberOfItems <= 0) {
continue;
}
/// 每一组第一个item的Attributes
let firstItem = self.layoutAttributesForItem(at: IndexPath.init(item: 0, section: section))
/// 每一组最后一个item的Attributes
let lastItem = self.layoutAttributesForItem(at: IndexPath.init(item: numberOfItems - 1, section: section))
/// 满足条件 结束本次循环执行下一次
if ((firstItem == nil) || (lastItem == nil)) {
continue
}
/// 实现了insetForSectionAt
if delegate.responds(to: #selector(UICollectionViewDelegateFlowLayout.collectionView(_:layout:insetForSectionAt:))) {
let inset = (delegate as? UICollectionViewDelegateFlowLayout)? .collectionView?(self.collectionView!, layout: self, insetForSectionAt: section)
self.sectionInset = inset!
}
/// 获取第一个和最后一个item的联合frame ，得到的就是这一组的frame
var sectionFrame:CGRect = firstItem!.frame.union(lastItem!.frame)
/// 设置它的x.y 注意理解这里的x点和y点的坐标，不要硬搬，下面这样写的时候是把inset的left的
/// 距离包含在sectionFrame 开始x的位置 下面的y同逻辑
sectionFrame.origin.x -= self.sectionInset.left - self.marginValue
sectionFrame.origin.y -= self.sectionInset.top
///横向滚动
if self.scrollDirection == .horizontal{
/// 计算组的宽的时候要把缩进进去的距离加回来 因为缩进是内容缩进
sectionFrame.size.width += self.sectionInset.left + self.sectionInset.right
/// 横向滚动的时候 组的高就是collectionView的高
sectionFrame.size.height = self.collectionView!.frame.size.height
/// 纵向滚动
}else{
/// 纵向滚动的时候组的宽度 这里的道理和上面的x,y的一样，需要你按照自己项目的实际需求去处理
sectionFrame.size.width = self.collectionView!.frame.size.width - (2 * self.marginValue)
sectionFrame.size.height += self.sectionInset.top + self.sectionInset.bottom
}
/// 根据自定义的PPCollectionViewSectionBackground 装饰View初始化一个自定义的PPCollectionLayoutAttributes
let attribute = PPCollectionLayoutAttributes.init(forDecorationViewOfKind:PPCollectionViewDecorationView,with: IndexPath.init(item: 0, section: section))
attribute.frame = sectionFrame
attribute.zIndex = -1
/// 实现了backgroundColorForSection
if delegate.responds(to: #selector(PPCollectionViewDelegateFlowLayout.backgroundColorForSection(collectionView:layout:section:))){
/// 背景色
attribute.backgroundColor = (delegate as? PPCollectionViewDelegateFlowLayout)?.backgroundColorForSection!(collectionView: self.collectionView!, layout: self, section: section)
}
/// 实现了cornerForSection
if delegate.responds(to: #selector(PPCollectionViewDelegateFlowLayout.cornerForSection(collectionView:layout:section:))) {
/// 圆角
attribute.corners = (delegate as? PPCollectionViewDelegateFlowLayout)?.cornerForSection!(collectionView: self.collectionView!, layout: self, section: section)
/// 要是是默认的大小就不在实现cornerRadiiForSection
attribute.sectionCornerRadii = kDefaultCornerRadii;
}
/// 要是自定义了圆角大小
if delegate.responds(to: #selector(PPCollectionViewDelegateFlowLayout.cornerRadiiForSection(collectionView:layout:section:))) {
attribute.sectionCornerRadii = (delegate as? PPCollectionViewDelegateFlowLayout)?.cornerRadiiForSection!(collectionView: self.collectionView!, layout: self, section: section)
}
self.layoutAttributes?.append(attribute)
}
}
}
NOTE：仔细看代码可以看到圆角和背景色的属性都是设置给PPLayoutAttributes，这玩意又是什么呢？就是我们CollectionView的属性管理者UICollectionViewLayoutAttributes，你进UICollectionViewLayoutAttributes可以看到它的属性有那些，不要忘记我们是根据修饰View初始化得到这个属性的，按照正常的操作我们会在最后返回一个属性数组，自定义过collection布局的应该清楚一些，具体的PPCollectionViewDelegateFlowLayout就是我们继承与UICollectionViewDelegateFlowLayout写的代理了，这个代理里面也就两个方法，圆角和颜色的设置，代码如下：
@objc protocol PPCollectionViewDelegateFlowLayout:UICollectionViewDelegateFlowLayout{
/// CollectionView 的组设置背景颜色
/// - Parameters:
/// - collectionView: collectionView description
/// - layout: layout description
/// - section: section description
/// - Returns: return 组的颜色
@objc optional func backgroundColorForSection(
collectionView:UICollectionView,
layout:UICollectionViewLayout,
section:NSInteger) -> UIColor
/// CollectionView 的组设置圆角
/// - Parameters:
/// - collectionView: collectionView description
/// - layout: layout description
/// - section: section description
/// - Returns: UIRectCorner eg:[.topLeft,.topRight]
@objc optional func cornerForSection(
collectionView:UICollectionView,
layout:UICollectionViewLayout,
section:NSInteger) -> UIRectCorner
/// CollectionView 的组设置圆角的大小 要是默认的12可不实现此方法返回
/// - Parameters:
/// - collectionView: collectionView description
/// - layout: layout description
/// - section: section description
/// - Returns: CGSize 圆角大小
@objc optional func cornerRadiiForSection(
collectionView:UICollectionView,
layout:UICollectionViewLayout,
section:NSInteger) -> CGSize
}
PPLayoutAttributes 其本质就是一个存储属性的 Model
下面就是它的全部代码
// MARK: - 添加自定义属性
class PPCollectionLayoutAttributes: UICollectionViewLayoutAttributes {
/// 添加组背景
var backgroundColor:UIColor?
/// 添加组圆角
var corners:UIRectCorner?
/// 添加组圆角的大小
var sectionCornerRadii:CGSize?
}
不能忘记了PPReusableView，它的代码也比较的简单,如下
import Foundation
import UIKit
// MARK: - 可重复使用视图
class PPReusableView: UICollectionReusableView {
override func apply(_ layoutAttributes: UICollectionViewLayoutAttributes) {
super.apply(layoutAttributes)
if layoutAttributes.isKind(of: PPLayoutAttributes.self) {
let layoutAttribute = layoutAttributes as? PPLayoutAttributes
if layoutAttribute!.backgroundColor != nil {
self.backgroundColor = layoutAttribute!.backgroundColor
}
/// 默认设置为 12 以后有需要可以自定义
if layoutAttribute!.corners != nil {
self.setRoundingCorners(layoutAttribute!.corners!, cornerRadii: kDefaultCornerRadii)
}
}
}
}
返回你的自定义
随后就是返回你前面设置了那么多的属性，具体的就是下面的代码所示了
// MARK: - override
extension PPCollectionViewFlowLayout{
// NOTE: 该方法会在你每次刷新collection data的时候都会调用
override func prepare() {
super.prepare()
/// 避免属性重复添加数据过大
self.layoutAttributes?.removeAll()
/// 设置背景和圆角
self.setSectionBackgaoundColorAndCorner()
}
/// 返回rect中的所有的元素的布局属性
/// - Parameter rect: rect description
override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
var attributes = super.layoutAttributesForElements(in: rect)
for attribute in self.layoutAttributes! {
///判断两个区域是否有交集
if rect.intersects(attribute.frame){
attributes?.append(attribute)
}
}
return attributes
}
/// 给Decorationview返回属性数组
/// - Parameters:
/// - elementKind: elementKind description
/// - indexPath: indexPath description
override func layoutAttributesForDecorationView(ofKind elementKind: String, at indexPath: IndexPath) -> UICollectionViewLayoutAttributes? {
if elementKind == PPCollectionViewDecorationView {
return self.layoutAttributes![indexPath.section]
}
return super.layoutAttributesForDecorationView(ofKind: elementKind, at: indexPath)
}
}
下面就是我们的 -- PPCollectionViewFlowLayout
class PPCollectionViewFlowLayout: UICollectionViewFlowLayout {
/// 存储添加的属性
private var layoutAttributes:Array<UICollectionViewLayoutAttributes>?
/// CollectionView的边距 这个值可以自定义 默认是10
public var marginValue:CGFloat = 10
override init() {
super.init()
self.layoutAttributes = []
/// 注册一个修饰View
self.registDecorationView()
}
func registDecorationView() {
self.register(PPCollectionReusableView.self, forDecorationViewOfKind: PPCollectionViewDecorationView)
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
最后：
最后我们在最前面说的registClass这个方法我们在PPBaseFlowLayout的初始化方法里面调用就可以了，还有属性数组这写就不用说了吧还是在前面自己定义初始化了。
然后上面代码里面的一些宏定义比如identify还有圆角大小等等这些就根据自己的需求去写吧。
最后在初始化CollectionView的时候layout就是我们定义的PPBaseFlowLayout了，遵守的代理就是PPCollectionViewDelegateFlowLayout，这个需要留意下就OK。
