不滚动的 UICollectionView

Question

我正在尝试创建一个所有单元格 100% 可见的 UICollectionView，这样我就不需要滚动来查看它们。我目前正在尝试显示 3x3 网格，并即时计算单元格的大小。

我有 CollectionView 和 UIView 用于容器视图中的标题。标头固定在容器顶部，高度为 100 像素。 CollectionView 位于其下方，固定在每一侧，底部，其顶部固定在标题的底部。

当我使用 sizeForItemAt 时，我试图找到可见区域的大小以将其分成 1/3 大小的块（填充/插入除外）。我的代码如下：

func collectionView(_ collectionView: UICollectionView,
                    layout collectionViewLayout: UICollectionViewLayout,
                    sizeForItemAt indexPath: IndexPath) -> CGSize {

    let numRows = self.numRows()
    let itemsPerRow = self.itemsPerRow()

//        let frameSize = collectionView.frame.size
    let frameSize = collectionView.bounds.size
//        let frameSize = collectionView.collectionViewLayout.collectionViewContentSize
//        let frameSize = collectionView.intrinsicContentSize

    let totalItemPadding = self.itemPadding * (itemsPerRow - 1)
    let totalLinePadding = self.linePadding * (numRows - 1)

    let availableWidth = frameSize.width - totalItemPadding
    var widthPerItem = availableWidth / itemsPerRow

    let availableHeight = frameSize.height - totalLinePadding
    var heightPerItem = availableHeight / numRows

    return CGSize(width: widthPerItem, height: heightPerItem)
}

结果始终是第 3 行大约有一半被遮挡，因为看起来 frameSize 比它在模拟器中实际显示的“高”。

UICollectionView 中有什么东西可以给我可见的大小吗？我在布局时间方面是否处于错误的时间，或者我应该添加另一种在某些时候使大小无效的方法？

我还没有找到任何关于显示所有项目且不垂直滚动的集合视图的教程，因此非常感谢任何其他指针（甚至是执行类似操作的库）。

谢谢！

Answer 1

你确定这个方法被调用了吗？在此例程中添加日志语句或断点并确保它被调用。

如果您忽略了正式声明您的视图控制器符合UICollectionViewDelegateFlowLayout，则会阻止此调用的常见问题。在这种情况下，它将使用它在情节提要中找到的任何内容。但是当我这样做时，你的代码对我来说很好，例如：

extension ViewController: UICollectionViewDelegateFlowLayout {

    func collectionView(_ collectionView: UICollectionView,
                        layout collectionViewLayout: UICollectionViewLayout,
                        sizeForItemAt indexPath: IndexPath) -> CGSize {
        let numRows = self.numRows()
        let itemsPerRow = self.itemsPerRow()

        let frameSize = collectionView.bounds.size

        let layout = collectionViewLayout as! UICollectionViewFlowLayout

        let totalItemPadding = layout.minimumInteritemSpacing * (itemsPerRow - 1)
        let totalLinePadding = layout.minimumInteritemSpacing * (numRows - 1)

        let availableWidth = frameSize.width - totalItemPadding
        let widthPerItem = availableWidth / itemsPerRow

        let availableHeight = frameSize.height - totalLinePadding
        let heightPerItem = availableHeight / numRows

        return CGSize(width: widthPerItem, height: heightPerItem)

    }
}

注意，我也使用了minimumInteritemSpacing，所以我使用现有的间距参数而不是自己定义。让我印象深刻的是使用现有参数（尤其是您也可以在 IB 中设置的参数）。

---

顺便说一句，如果它总是在一个屏幕上，另一种选择是使用您自己的自定义布局，而不是流式布局。这样，您就不会将集合视图的委托与大量繁琐的代码纠缠在一起。它会更可重用。例如：

class GridLayout: UICollectionViewLayout {

    var itemSpacing: CGFloat = 5
    var rowSpacing: CGFloat = 5

    private var itemSize: CGSize!
    private var numberOfRows: Int!
    private var numberOfColumns: Int!

    override func prepare() {
        super.prepare()

        let count = collectionView!.numberOfItems(inSection: 0)

        numberOfColumns = Int(ceil(sqrt(Double(count))))
        numberOfRows = Int(ceil(Double(count) / Double(numberOfColumns)))

        let width = (collectionView!.bounds.width - (itemSpacing * CGFloat(numberOfColumns - 1))) / CGFloat(numberOfColumns)
        let height = (collectionView!.bounds.height - (rowSpacing * CGFloat(numberOfRows - 1))) / CGFloat(numberOfRows)
        itemSize = CGSize(width: width, height: height)
    }

    override var collectionViewContentSize: CGSize {
        return collectionView!.bounds.size
    }

    override func layoutAttributesForItem(at indexPath: IndexPath) -> UICollectionViewLayoutAttributes? {
        let attributes = UICollectionViewLayoutAttributes(forCellWith: indexPath)

        attributes.center = centerForItem(at: indexPath)
        attributes.size = itemSize

        return attributes
    }

    override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
        return (0 ..< collectionView!.numberOfItems(inSection: 0)).map { IndexPath(item: $0, section: 0) }
            .flatMap { layoutAttributesForItem(at: $0) }
    }

    private func centerForItem(at indexPath: IndexPath) -> CGPoint {

        let row = indexPath.item / numberOfColumns
        let col = indexPath.item - row * numberOfColumns

        return CGPoint(x: CGFloat(col) * (itemSize.width + itemSpacing) + itemSize.width / 2,
                       y: CGFloat(row) * (itemSize.height + rowSpacing) + itemSize.height / 2)
    }

    override func shouldInvalidateLayout(forBoundsChange newBounds: CGRect) -> Bool {
        return true
    }
}

然后，在视图控制器中：

override func viewDidLoad() {
    super.viewDidLoad()

    let layout = GridLayout()
    layout.itemSpacing = 10
    layout.rowSpacing = 5
    collectionView?.collectionViewLayout = layout
}

Answer 2

对于布局大小，您可以使用UICollectionViewFlowLayout 并将尺寸与屏幕宽度和高度相关联，以保持UICollectionView. 的网格样式外观参见：https://developer.apple.com/documentation/uikit/uicollectionviewflowlayout 和https://www.raywenderlich.com/136159/uicollectionview-tutorial-getting-started。

至于您的滚动问题，请检查您的滚动是否已启用，您的约束设置是否正确，并且您没有遇到此链接中提到的问题。 UICollectionView does not scroll

祝你好运！ :)

Answer 3

您的滚动不起作用，因为视图只是屏幕的大小......

只是为了获得技巧添加一个偏移量 1000。collectionView 的总高度是每一行 *（row.size.height + padding）。

Answer 4

在我的情况下，这要简单得多，基本思想是在集合视图的末尾添加额外的填充。在我的情况下，我的方向是水平的，但同样应该适用于垂直方向（尚未测试过）。诀窍是调整委托功能如下：

  extension ViewController: UICollectionViewDelegateFlowLayout {

        func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
    
            return UIEdgeInsets.init(top: collectionView.bounds.width * 0.02, left: collectionView.bounds.width * 0.02, bottom: collectionView.bounds.width * 0.02, right: collectionView.bounds.width * 0.22)
      }
  }

注意到正确值的差异，在您的情况下，它将是该行的底部值。