如何实现顶部带有标题的水平滚动集合视图？

Posted 2023-02-23

【中文标题】如何实现顶部带有标题的水平滚动集合视图？

【英文标题】：How to implement a horizontally-scrolling collection view with a header on top?

【发布时间】：2020-02-27 07:41:17

【问题描述】：

我想要一个水平滚动的集合视图，但我也希望它的顶部和右侧有一个标题。我已经尝试像实现垂直滚动的集合视图一样实现它，并且标题最终位于第一个单元格的左侧。

这是我如何使标头出队：

    func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView 
        let header = dequeueReusableSupplementaryView(ofKind: UICollectionView.elementKindSectionHeader, withReuseIdentifier: identifier, for: indexPath) as! HeaderView
        header.setWidth(to: headerWidth)
        return header
    

标题大小：

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize 
        return CGSize(width: collectionView.frame.width, height: 12)
    

除此之外，我初始化的唯一其他属性是集合视图的滚动方向和插图

【问题讨论】：

至少显示你的代码

我对标题和didEndDisplaying cell:使用了不同的视图。

要有水平，将集合的scrollDirection设置为horizo​​ntol

这意味着你不需要我认为的每个部分的标题，所以只需在 collectionView 上方放置一个 UILabel 就可以实现你的愿望。

【参考方案1】：

Headers位置：垂直滚动时在section的Top，横向滚动时在section的left，所以这是正常的在您的案例中显示在该部分的左侧。

如果您想在每个部分的右侧显示您的reusable view，您可以使用 UICollectionView.elementKindSectionFooter 代替。

但是如果你想在每个部分之间显示你的reusable view，你可以将第一部分的标题视图的大小设置为 .zero。

您可以使用referenceSizeForHeaderInSection 函数在每个标题视图大小中进行操作，如下所示：

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize 
        if section == 0 
            return .zero
        
        return CGSize(width: collectionView.frame.width, height: 12)
    

在这种情况下，我删除（技术上没有删除但隐藏）左侧的第一个标题，它位于第一部分，但您可以设置每个标题的大小。

【讨论】：

我没有部分。这只是一个水平滚动的集合视图。

我不能将标题视图添加为常规视图并将其限制在集合视图之上的原因是，由于各种原因，我将多个集合视图相互约束并且不想在每个视图之间插入“人工”标题视图

我不认为你可以在水平滚动的情况下在顶部注册标题和约束它，但是你可以玩它，就像水平滚动顶部有一个垂直集合视图集合视图，您可以将Footer 添加到顶部集合并使其成为底部水平集合视图的顶部标题，否则，您可以将常规视图作为子视图添加到集合视图和集合视图顶部的约束。