如何在UICollectionView中更改整个部分的背景颜色?

在UICollectionView中,我想给整个部分一个统一的背景颜色,而不是单个单元格或整个集合视图。

我没有看到任何委托方法做到这一点,有什么build议吗?

我还没有尝试过,但是在我看来,如果您希望在单元格后面有背景(如书籍应用中的书架),则需要使用装饰视图。 我认为你应该能够为每个部分有不同的意见,并使用委托方法layoutAttributesForDecorationViewOfKind:atIndexPath:

这是改变UICollectionView部分颜色的一个很好的教程:

更新的链接,感谢用户@casamia

http://www.ericjchapman.com/jekyll/update/ios/2014/11/10/ios-changing-section-background-color-in-UICollectionView.html

基本上,我们将不得不UICollectionViewLayoutAttributesUICollectionReusableViewUICollectionViewLayout以创build实例UICollectionReusableView作为部分的背景视图。

这是他的结果:

在这里输入图像说明

请按照链接了解更多详情。

在集合视图中,每个部分都可以有一个补充视图,因此为每个部分添加补充视图,然后将背景颜色设置为补充视图而不是部分单元格。 我希望这会有所帮助。

这个想法是重写UICollectionViewLayoutAttributes来添加一个颜色属性。 然后重写UICollectionReusableView将颜色应用到视图背景。

https://github.com/strawberrycode/SCSectionBackground

我去这里回购这里https://github.com/SebastienMichoy/CollectionViewsDemo/tree/master/CollectionViewsDemo/Sources/Collections%20Views

Swift 3

子类uicollectionreusableview

 class SectionView: UICollectionReusableView { static let kind = "sectionView" } 

子类uicollectionViewFlowLayout

 class CustomFlowLayout: UICollectionViewFlowLayout { // MARK: Properties var decorationAttributes: [IndexPath: UICollectionViewLayoutAttributes] var sectionsWidthOrHeight: [IndexPath: CGFloat] // MARK: Initialization override init() { self.decorationAttributes = [:] self.sectionsWidthOrHeight = [:] super.init() } required init?(coder aDecoder: NSCoder) { self.decorationAttributes = [:] self.sectionsWidthOrHeight = [:] super.init(coder: aDecoder) } // MARK: Providing Layout Attributes override func layoutAttributesForDecorationView(ofKind elementKind: String, at indexPath: IndexPath) -> UICollectionViewLayoutAttributes? { return self.decorationAttributes[indexPath] } override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? { var attributes = super.layoutAttributesForElements(in: rect) let numberOfSections = self.collectionView!.numberOfSections var xOrYOffset = 0 as CGFloat for sectionNumber in 0 ..< numberOfSections { let indexPath = IndexPath(row: 0, section: sectionNumber) let numberOfItems = self.collectionView?.numberOfItems(inSection: sectionNumber) let sectionWidthOrHeight = numberOfItems == 0 ? UIScreen.main.bounds.height : collectionViewContentSize.height//self.sectionsWidthOrHeight[indexPath]! let decorationAttribute = UICollectionViewLayoutAttributes(forDecorationViewOfKind: SectionView.kind, with: indexPath) decorationAttribute.zIndex = -1 if self.scrollDirection == .vertical { decorationAttribute.frame = CGRect(x: 0, y: xOrYOffset, width: self.collectionViewContentSize.width, height: sectionWidthOrHeight) } else { decorationAttribute.frame = CGRect(x: xOrYOffset, y: 0, width: sectionWidthOrHeight, height: self.collectionViewContentSize.height) } xOrYOffset += sectionWidthOrHeight attributes?.append(decorationAttribute) self.decorationAttributes[indexPath] = decorationAttribute } return attributes } } 

执行这个

CollectionView委托function

 func collectionView(_ collectionView: UICollectionView, willDisplaySupplementaryView view: UICollectionReusableView, forElementKind elementKind: String, at indexPath: IndexPath) { Log.printLog(identifier: elementKind, message: indexPath) if elementKind == UICollectionElementKindSectionHeader, let view = view as? ProfileViewHeaderView { view.backgroundColor = UIColor(red: (102 / 255.0), green: (169 / 255.0), blue: (251 / 255.0), alpha: 1) } else if elementKind == SectionView.kind { let evenSectionColor = UIColor.black let oddSectionColor = UIColor.red view.backgroundColor = (indexPath.section % 2 == 0) ? evenSectionColor : oddSectionColor } } 

这个很重要

 let layout = CustomFlowLayout() layout.register(SectionView.self, forDecorationViewOfKind: SectionView.kind) 

注册UICollectionReusableView布局不collectionView。

还有一件事。 我在layoutAttributesForElements中弄乱了高度。 你应该改变它为你自己的项目。

我用下面的方法以一种非常简单的方式改变了每个部分的背景颜色:但我不确定这是否是正确的做法。 但它确实有效。

 - (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath { FamilyCalendarCellItemCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"calendarItem" forIndexPath:indexPath]; Event *event; _headerView = [collectionView dequeueReusableSupplementaryViewOfKind: UICollectionElementKindSectionHeader withReuseIdentifier:@"EventHeader" forIndexPath:indexPath]; //headerView is declared as property of Collection Reusable View class if(indexPath.section==0) { cell.backgroundColor=[UIColor orangeColor]; } else if(indexPath.section==1) { cell.backgroundColor=[UIColor yellowColor]; } return cell; } 
Interesting Posts