ios - UICollectionView 动态标题大小

Question

我有一个在 .xib 文件中设计的带有标题的 collectionView。它有一个简单的标签，它的文本支持动态类型。

如何根据该标签和 Storyboard 中的自动布局约束将该标题的高度设置为动态？

到目前为止，我有这个:

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize {
    let kind = UICollectionView.elementKindSectionHeader
    let indexPath = IndexPath(row: 0, section: section)
    if let headerView = collectionView.supplementaryView(forElementKind: kind, at: indexPath) as? SectionHeaderView {
        headerView.layoutIfNeeded()
        headerView.setNeedsLayout()
        let size = headerView.systemLayoutSizeFitting(UIView.layoutFittingCompressedSize)
        return size
    }
    return CGSize(width: 0, height: 0)
}

但它没有显示任何标题。

SectionHeaderView.xib 如下所示:


CollectionView 看起来像这样:您看到 3 个部分，但看不到标题。


我该怎么做才能让 AutoLayout 确定标题的正确高度？

Answer 1

使用 自定义流布局使用 Dynamic Type 完美管理 Collection View 中标题的高度特征。

标题元素被视为 补充元素对于 Collection View 和 referenceSizeForHeaderInSection 'method' 仅用于初始化:它不与 Dynamic Type 一起调用特征。 🤯

以下解决方案基于layoutAttributesForElements由于UIFontMetrics，自定义布局的方法将能够适应标题高度 scaledValue .
invalidateLayout 触发的所有内容 traitCollectionDidChange 中调用的方法当用户更改字体大小时触发。 🤓

步骤 1 ⟹ 创建一个简单的自定义头类，例如:

class MyHeaderClass: UICollectionReusableView {

    override init(frame: CGRect) { super.init(frame: frame) }

    required init?(coder aDecoder: NSCoder) { super.init(coder: aDecoder) }
}

步骤 2 ⟹ 创建一个新的空 .xib 添加一个可重用的 View ，并将其命名为与其引用的类完全相同的名称:不要忘记在 Identity Inspector 中更改其类名.

步骤 3 ⟹ 在 Controller 中注册 .xib 文件:

collectionView.register(UINib(nibName: collectionViewHeaderFooterReuseIdentifier bundle: nil),
                        forSupplementaryViewOfKind: UICollectionElementKindSectionHeader,
                        withReuseIdentifier:collectionViewHeaderFooterReuseIdentifier)

第 4 步 ⟹ 在数据源中支持这个新单元格(标题是 Collection View 的补充元素):

func collectionView(_ collectionView: UICollectionView,
                    viewForSupplementaryElementOfKind kind: String,
                    at indexPath: IndexPath) -> UICollectionReusableView {

    if (kind == UICollectionView.elementKindSectionHeader) {
        let headerView = collectionView.dequeueReusableSupplementaryView(ofKind: kind,
                                                                         withReuseIdentifier: collectionViewHeaderReuseIdentifier,
                                                                         for: indexPath) as! MyHeader
        headerView.myLabel.text = "Your Header Title"
        return headerView
    } else {
        return UICollectionReusableView(frame: CGRect.null) }
}

...并在您的委托(delegate)中(这会初始化标题大小并使其出现):

func collectionView(_ collectionView: UICollectionView,
                    layout collectionViewLayout: UICollectionViewLayout,
                    referenceSizeForHeaderInSection section: Int) -> CGSize {

    return CGSize(width: collectionView.frame.width, height: headerHeight)
}

.. 添加全局 var headerHeight: CGFloat = 90.0 后用于初始化。

步骤 5 ⟹ 创建自定义流布局以使标题高度适应新的字体大小:

class FlowLayout: UICollectionViewFlowLayout {

    override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {

        let layoutAttributes = super.layoutAttributesForElements(in: rect)

        layoutAttributes?.forEach({ (attribute) in
            if (attribute.representedElementKind == UICollectionView.elementKindSectionHeader) {

                headerHeight = UIFontMetrics.default.scaledValue(for: 22.0)
                attribute.frame.size.height = headerHeight
            }
        })

        return layoutAttributes
    }
}

不要忘记更新 Interface Builder 中的 Storyboard:

步骤 6 ⟹ 通知 Controller 在用户更改字体大小时触发布局更新:

override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
    if (previousTraitCollection?.preferredContentSizeCategory != traitCollection.preferredContentSizeCategory) {
        collectionView?.collectionViewLayout.invalidateLayout()
    }
}

根据这个理由， 根据标题字体大小自动设置标题的正确高度 ⟹我建议使用 Xcode 11 new feature测试 Dynamic Type很快。 👍