UICollectionView 自定义布局页脚视图不粘在集合视图的底部

Posted 2023-03-14

【中文标题】UICollectionView 自定义布局页脚视图不粘在集合视图的底部

【英文标题】：UICollectionView custom layout footer view not sticking to the bottom of collection view

【发布时间】：2019-08-30 14:09:41

【问题描述】：

我正在关注this guide 制作类似于 Pinterest 的集合视图布局，它工作正常，直到我想为其添加页脚视图。

在prepare() 方法中我添加了以下代码：

// Add Attributes for section footer
let footerAtrributes = UICollectionViewLayoutAttributes(forSupplementaryViewOfKind: UICollectionView.elementKindSectionFooter, with: IndexPath(item: 0, section: 0))
footerAtrributes.frame = CGRect(x: 0, y: collectionView.bounds.maxY, width: UIScreen.main.bounds.width, height: myFooterHeight)
cache.append(footerAtrributes)

调用collectionView:viewForSupplementaryElementOfKind:atIndexPath: 后，我可以将页脚添加到collectionView，但它不在正确的y 位置。

像这样：

因为我调用了collectionView.reloadData()，所以如果滚动得更远，它会崩溃。我收到的错误是：

索引路径的补充项目的布局属性发生了变化，但布局没有失效。

我认为y position 不正确，但我真的不知道该放什么。

当UICollectionView 更新（加载更多项目）时，如何将其设置到正确的位置？

【问题讨论】：

您的收藏视图底部是否固定在某物上？

@Adrian 是的，它固定在超级视图的底部边缘

【参考方案1】：

这个错误：

索引路径中补充项的布局属性已更改，但未更改 使布局无效。

是为 FooterView

设置布局的原因

所以你必须为 View

做 Layout

这是我的 CollectionView

的示例

let historyCollection: UICollectionView = 
        let layout = UICollectionViewFlowLayout()
        layout.sectionInset = UIEdgeInsets(top: 0, left: 0, bottom: 10, right: 0)
        layout.minimumInteritemSpacing = 0
        layout.minimumLineSpacing = 20
        layout.scrollDirection = .vertical

        let historyCollection = UICollectionView(frame: CGRect.zero, collectionViewLayout: layout)
        historyCollection.register(CodiHistoryCell.self, forCellWithReuseIdentifier: "history")
        historyCollection.register(fooderSection.self, forSupplementaryViewOfKind: UICollectionElementKindSectionFooter, withReuseIdentifier: "footer")
        historyCollection.isScrollEnabled = true
        historyCollection.backgroundColor = UIColor.clear
        historyCollection.translatesAutoresizingMaskIntoConstraints = false
        return historyCollection
    ()

所以在你命名你的标识符之后

UICollectionElementKindSectionFooter, withReuseIdentifier: "footer"

您必须将它的内容放在我在控制器类中所做的“FooterView”中

import UIKit

class fooderSection: UICollectionReusableView 

        let checkBtn: UIButton = 
            let checkBtn  = UIButton(type: .custom)
            checkBtn.setImage(UIImage(named: "loadMoreIcon"), for: .normal)
            checkBtn.contentMode = UIView.ContentMode.scaleAspectFit
            checkBtn.translatesAutoresizingMaskIntoConstraints = false
            return checkBtn
        ()



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

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

            self.addSubview(checkBtn)

            //this is how it's going to show in the bottonVIEW
just play while this values
            NSLayoutConstraint.activate([
                checkBtn.centerXAnchor.constraint(equalTo: self.centerXAnchor),
                checkBtn.centerYAnchor.constraint(equalTo: self.centerYAnchor),
                checkBtn.widthAnchor.constraint(equalToConstant: 70),
                checkBtn.heightAnchor.constraint(equalToConstant: 70)
                ])

        
    

您还必须为 FooterView 设置 reference 大小

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForFooterInSection section: Int) -> CGSize 
        return CGSize(width: view.frame.width, height: interface.frame.height * 0.1)
    

【讨论】：

我使用的是自定义布局，而不是 UICollectionViewFlowLayout()

@yellowdogpee 只需将 x 或 y 移动到您想要在视图中的位置