更新了链接，感谢用户@casamia

Question

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

我没有看到任何委托方法，任何建议？

Answer 1

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

更新了链接，感谢用户@casamia

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

基本上，我们必须继承UICollectionViewLayoutAttributes，UICollectionReusableView和UICollectionViewLayout，以便创建实例UICollectionReusableView作为部分的背景视图。

这是他的结果：

请点击链接了解更多详情。

Answer 2

我们的想法是覆盖 UICollectionViewLayoutAttributes 以添加颜色属性。然后覆盖 UICollectionReusableView 将颜色应用于视图背景。

https://github.com/strawberrycode/SCSectionBackground

Answer 3

我还没有尝试过这个，但是在我看来，如果你想要在你的单元格后面有一个背景（比如Books应用程序中的书架），你需要使用装饰视图。我认为您应该能够为每个部分提供不同的视图，并使用委托方法layoutAttributesForDecorationViewOfKind:atIndexPath:进行设置。

Answer 4

iOS 13中引入的新UICollectionViewCompositionalLayout具有名为decorationItems的属性，用于方便地添加装饰项目，您可以使用该属性为该部分添加背景。

let section = NSCollectionLayoutSection(group: group)
section.decorationItems = [
   NSCollectionLayoutDecorationItem.background(elementKind:"your identifier")
]

Answer 5

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

Answer 6

请参阅：
strawberrycode: Use DecorationView as background
devxoul: Use SupplementaryElement as background
airbnb: Use SupplementaryElement as background

我需要与IGListKit兼容，因此我将decorationView用作背景。对于常见的用例，布局是UICollectionViewFlowLayout的子类。 My implementation：

Answer 7

经典方法之一是创建“自定义补充类型”，并在CollectionView Section背景中提供您的自定义视图。它将使您能够自定义章节背景。请参阅https://stackoverflow.com/a/63598373/14162081

Answer 8

我在这里回复了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委托功能

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中弄乱了高度。你应该为自己的项目改变它。

Answer 9

非常简单，只需使用此默认UICollectionViewDelegate的方法，它将起作用

func collectionView(_ collectionView: UICollectionView, willDisplay cell: UICollectionViewCell, forItemAt indexPath: IndexPath) {
    print(indexPath.item)

    let evenSectionColor = UIColor.clear
    let oddSectionColor = UIColor.white
    cell.contentView.backgroundColor = (indexPath.item % 2 == 0) ? evenSectionColor : oddSectionColor

}

Answer 10

我已经通过以下方法以非常简单的方式更改了每个部分的背景颜色：但我不确定这是否是正确的做法。但它确实有效。

- (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;
}

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

10 个答案:

更新了链接，感谢用户@casamia