防止“包裹” UICollectionView中的项目 [英] Preventing "wrapping" of items in UICollectionView

问题描述

我需要一个 UICollectionView 来显示一个网格，该网格在宽度和高度上都可能大于可见框架，同时保持行和列的完整性。默认的 UICollectionViewFlowLayout 允许部分在屏幕外滚动，但它包装一个部分中的项目以使它们全部保持在屏幕上，这搞砸了我的格。

I need a UICollectionView to display a grid that is potentially larger than the visible frame in both width and height, while maintaining row and column integrity. The default UICollectionViewFlowLayout allows sections to scroll off-screen, but it wraps items within a section to keep them all on-screen, which screws up my grid.

认识到 UICollectionView 是 UIScrollView 的子类，我尝试在viewDidLoad中手动设置集合视图的内容大小属性：

Recognizing that UICollectionView is a subclass of UIScrollView, I tried just manually setting the collection view's content size property in viewDidLoad:

self.collectionView.contentSize = CGSizeMake((columns * (cellWidth + itemSpacingX), (rows * (cellHeight + itemSpacingY));

但这没有效果。问题：

• 有没有简单的方法可以在不构建自定义布局的情况下完成此任务？


• 会不会使用自定义布局并覆盖 collectionViewContentSize 方法成功获取集合视图以停止包装项目并向两个方向滚动？


• 如果我必须构建一个自定义布局 - 我将不得不投入一些时间来学习 - 我是否继承 UICollectionViewLayout ，或者将子类化 UICollectionViewFlowLayout 节省时间？

• Is there an easy way to accomplish this without building a custom layout?
• Would using a custom layout and overriding the collectionViewContentSize method succeed in getting the collection view to stop wrapping items and scroll in both directions?
• If I do have to build a custom layout--which I'll have to invest some time to learn--do I subclass UICollectionViewLayout, or would subclassing UICollectionViewFlowLayout save time?

更新：
我尝试过将UICollectionView嵌入为UIScrollView的子视图。集合视图本身表现正常 - 行没有包装在滚动视图的边缘，告诉我它正在填充我设置的UIScrollView内容大小。但滚动视图不会在水平方向上平移，即它只是垂直滚动，集合视图无论如何都会自动进行。再次陷入困境。响应者链是否存在问题？

UPDATE: I tried embedding the UICollectionView as a subview of a UIScrollView. The collection view itself is behaving correctly--the rows aren't wrapping at the edge of the scroll view, telling me that it is filling the UIScrollView content size that I set. But the scroll view doesn't pan in the horizontal direction, i.e. it only scrolls vertically, which the collection view does by itself anyway. So stuck again. Could there be an issue with the responder chain?

推荐答案

想出两种方法。两者都需要自定义布局。问题是默认的流布局 - 我现在从集合视图编程指南知道这部分是流布局的定义 - 根据superview的边界生成单元布局属性，并将项目包装在一个部分中以使它们保持在边界内，以便只在一个轴上进行滚动。将跳过代码细节，因为它并不难，我的问题主要是对采取何种方法的困惑。

Figured out two ways to do this. Both required a custom layout. The problem is that the default flow layout--and I now know from the Collection View Programming Guide this is partly the definition of a flow layout--generates the cell layout attributes based on the bounds of the superview, and will wrap items in a section to keep them in bounds so that scrolling occurs in only one axis. Will skip the code details, as it isn't hard, and my problem was mainly confusion on what approach to take.

简单方法：使用UIScrollView和子类'UICollectionViewFlowLayout'。在 UIScrollView 中嵌入 UICollectionView 。在 viewDiDLoad 中设置滚动视图的contentSize属性，以匹配集合视图将占用的完整大小（这将使默认流布局将项放在一行中的一行中没有包装的部分）。子类 UICollectionViewFlowLayout ，并将该对象设置为集合视图的自定义布局。在自定义流布局中，覆盖 collectionViewContentSize 以返回集合视图矩阵的完整大小。使用此方法，您将使用流布局，但可以在两个方向上滚动以查看未包装的部分。缺点是您仍然有一个非常有限的流布局。另外，在其自己的超类的实例中放置一个 UICollectionView 似乎很笨拙，只是为了获得集合视图本身应具有的功能。

Easy way: use a UIScrollView and subclass 'UICollectionViewFlowLayout'. Embed the UICollectionView in a UIScrollView. Set the contentSize property of the scroll view in viewDiDLoad to match the full size that your collection view will occupy (this will let the default flow layout place items in a single line within a section without wrapping). Subclass UICollectionViewFlowLayout, and set that object as your custom layout for the collection view. In the custom flow layout, override collectionViewContentSize to return the full size of the collection view matrix. With this approach, you'll be using a flow layout, but will be able to scroll in both directions to view un-wrapped sections. The disadvantage is that you still have a flow layout that is pretty limited. Plus, it seems clunky to put a UICollectionView inside an instance of its own superclass just to get the functionality that the collection view by itself should have.

更难的方式，但更多功能和优雅：子类UICollectionViewLayout。我用本教程，了解如何实现完整的自定义布局。这里不需要 UIScrollView 。如果放弃流布局，子类 UICollectionViewLayout ，并将其设置为自定义布局，则可以构建矩阵并从集合视图本身获取正确的行为。这是更多的工作，因为您必须生成所有布局属性，但您将定位使集合视图执行您想要的任何操作。

Harder way, but more versatile and elegant: subclass UICollectionViewLayout. I used this tutorial to learn how to implement a complete custom layout. You don't need a UIScrollView here. If you forego the flow layout, subclass UICollectionViewLayout, and set that as the custom layout, you can build out the matrix and get the right behavior from the collection view itself. It's more work because you have to generate all the layout attributes, but you'll be positioned to make the collection view do whatever you want.

在我看来，Apple应该在默认的流布局中添加一个属性来抑制包装。让设备显示具有完整行和列的2D矩阵并不是一种奇特的功能，似乎应该更容易做到。

In my opinion, Apple should add a property to the default flow layout that suppresses wrapping. Getting a device to display a 2D matrix with intact rows and columns isn't an exotic functionality and it seems like it should be easier to do.

这篇关于防止“包裹” UICollectionView中的项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！