UICollectionView section background
This project shows how to apply colour to background sections (or cells) on a UICollectionView. The code is written in Swift, and inspired by Eric Chapman's article (Objective-C GitHub project).
You can apply different colours according to the NSIndexPath of the cells. Here is an example of a UICollectionView 4 sections, 3 cells with green background on the even sections and 7 cells on a blue background on the odd ones.
How does it work?
The idea is to override UICollectionViewLayoutAttributes to add a color attribute.
And then override UICollectionReusableView apply the color to the view background. Easy peasy :)
class SCSBCollectionViewLayoutAttributes : UICollectionViewLayoutAttributes {
var color: UIColor = UIColor.whiteColor()
override func copyWithZone(zone: NSZone) -> AnyObject {
let newAttributes: SCSBCollectionViewLayoutAttributes = super.copyWithZone(zone) as! SCSBCollectionViewLayoutAttributes
newAttributes.color = self.color.copyWithZone(zone) as! UIColor
return newAttributes
}
}
class SCSBCollectionReusableView : UICollectionReusableView {
override func applyLayoutAttributes(layoutAttributes: UICollectionViewLayoutAttributes) {
super.applyLayoutAttributes(layoutAttributes)
let scLayoutAttributes = layoutAttributes as! SCSBCollectionViewLayoutAttributes self.backgroundColor = scLayoutAttributes.color
}
}
How to use it?
All this happens in the UICollectionViewFlowLayout used on your UIcollectionView. Here is an example of layoutAttributesForElementsInRect:
// Create decoration attributes
let decorationAttributes = SCSBCollectionViewLayoutAttributes(forDecorationViewOfKind: "sectionBackground", withIndexPath: attr.indexPath)
// Set the color(s)
if (attr.indexPath.section % 2 == 0) {
decorationAttributes.color = UIColor.greenColor().colorWithAlphaComponent(0.5)
} else {
decorationAttributes.color = UIColor.blueColor().colorWithAlphaComponent(0.5)
}
You will find all the details in the SectionBackgroundFlowLayout.swift file and if you want more details, please have a look at my the article I've written about it: How to create a Section Background in a UICollectionView in Swift.
Contact
You can ping me on Twitter @cath_schwz, open an issue on GitHub or leave a comment on my blog :)
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent