UICollectionView中的节标题,仅出现第一个

时间:2019-04-19 15:58:15

标签: swift uicollectionview uicollectionviewflowlayout

我为节标题创建了一个类,并将其加载到我的UICollectionView中。我能够显示第一个标题(尽管很奇怪,请参见下文),但是随后的任何部分标题都是空白。正在参考尺寸,但是内容(背景颜色,标签)不会出现。

然后还有一个确实显示的节标题,它的缩进量约为。 150px,无明显原因。标题是否默认居中对齐?如果是这样,我将如何使它们对齐?

我的栏目标题类:

func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
    switch kind {
    case UICollectionView.elementKindSectionHeader:
        let section = indexPath.section
        switch section {
        case 0:
            let tagsHeader = searchCollectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: "TagsHeaderView", for: indexPath) as! SectionHeaderView
            tagsHeader.headerString = "Recent Tags"
            tagsHeader.backgroundColor = .green
            return tagsHeader
        default:
            let tagsHeader = searchCollectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: "TypeHeaderView", for: indexPath) as! SectionHeaderView
            tagsHeader.headerString = "Type"
            tagsHeader.backgroundColor = .blue
            return tagsHeader
        }
    default:
        return UICollectionReusableView()
    }
}

在我的UICollectionView中

func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
    switch kind {
    case UICollectionView.elementKindSectionHeader:
        let section = indexPath.section
        switch section {
        case 0:
            let tagsHeader = searchCollectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: "TagsHeaderView", for: indexPath) as! SectionHeaderView
            tagsHeader.headerString = "Recent Tags"
            tagsHeader.backgroundColor = .green
            return tagsHeader
        default:
            let tagsHeader = searchCollectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: "TypesHeaderView", for: indexPath) as! SectionHeaderView
            tagsHeader.headerString = "Type"
            tagsHeader.backgroundColor = .blue
            return tagsHeader
        }
    default:
        return UICollectionReusableView()
    }
}


func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize {
    if section == 0 {
        return CGSize(width: view.frame.width, height: 18 + 22 + 6)
    } else {
        return CGSize(width: view.frame.width, height: 100)
    }
}

这是我实例化UICollectionView的方式

let searchCollectionView: UICollectionView = {
    let layout = LeftAlignedCollectionViewFlowLayout()
    layout.minimumInteritemSpacing = 6
    layout.minimumLineSpacing = 6
    let cv = UICollectionView(frame: .zero, collectionViewLayout: layout)
    cv.isScrollEnabled = false
    cv.register(TokenCell.self, forCellWithReuseIdentifier: "TokenCell")
    cv.register(SectionHeaderView.self, forSupplementaryViewOfKind:UICollectionView.elementKindSectionHeader, withReuseIdentifier: "TagsHeaderView")
    cv.register(SectionHeaderView.self, forSupplementaryViewOfKind:UICollectionView.elementKindSectionHeader, withReuseIdentifier: "TypesHeaderView")
    cv.backgroundColor = .white
    cv.showsVerticalScrollIndicator = false
    cv.alwaysBounceVertical = false
    cv.translatesAutoresizingMaskIntoConstraints = false
    return cv
}()

我的CollectionViewFlowLayout

class LeftAlignedCollectionViewFlowLayout: UICollectionViewFlowLayout {

override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
    let attributes = super.layoutAttributesForElements(in: rect)

    var leftMargin = sectionInset.left
    var maxY: CGFloat = -1.0
    attributes?.forEach { layoutAttribute in
        if layoutAttribute.frame.origin.y >= maxY {
            leftMargin = sectionInset.left
        }

        layoutAttribute.frame.origin.x = leftMargin

        leftMargin += layoutAttribute.frame.width + minimumInteritemSpacing
        maxY = max(layoutAttribute.frame.maxY , maxY)
    }

    return attributes
}

}

这是当前结果的屏幕截图。您可以看到第一个标题出现了,但是缩进了。第二个标头有其空间,但没有任何内容出现。 enter image description here

1 个答案:

答案 0 :(得分:0)

制作标签视图时遇到了同样的问题。 问题出在您的CollectionViewFlowLayout中。

let attributes = super.layoutAttributesForElements(in: rect)

此行将获取所有属性,包括单元格,补充视图和装饰视图,这意味着您还将更改页眉和页脚的属性。

我们可以将代码更改为:

override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
    let attributes = super.layoutAttributesForElements(in: rect)

    var leftMargin = sectionInset.left
    var maxY: CGFloat = -1.0
    attributes?.forEach { layoutAttribute in
        //check if the layoutAttribute is for cell
        if layoutAttribute.representedElementCategory == .cell {
                if layoutAttribute.frame.origin.y >= maxY {
                    leftMargin = sectionInset.left
                }

                layoutAttribute.frame.origin.x = leftMargin

                leftMargin += layoutAttribute.frame.width + minimumInteritemSpacing
                maxY = max(layoutAttribute.frame.maxY , maxY)
            }
    }

    return attributes
}

为了将属性应用于单元格。然后您的页眉和页脚将正确显示。