ios UICollectionView 双向滚动

UICollectionView scrolling in both directions

提问by last-Programmer

I made a UICollectionViewwith a vertical scroll.

我用UICollectionView垂直卷轴做了一个。

The width of the cell is more than than the screen width, so I created a customFlowLayoutbased on UICollectionViewFlowlayout returning the right calculated content size.

单元格的宽度大于屏幕宽度，所以我创建了一个customFlowLayout基于UICollectionViewFlow布局的返回正确计算内容大小的布局。

However, this doesn't work. When the width of the cell is less than the screen width it works. Does it mean that we can't have width more than than screen width in vertical scroll?

但是，这不起作用。当单元格的宽度小于屏幕宽度时，它会起作用。这是否意味着在垂直滚动中我们的宽度不能超过屏幕宽度？

It is the same for horizontal scroll, but then the height of the CollectionViewis limited to screen height.

水平滚动也是一样，但是高度CollectionView受限于屏幕高度。

Is there any way to make it work?

有没有办法让它工作？

回答by johnrechd

As others have already said, the UICollectionViewcan only scroll one direction using a flow layout. However you can accomplish this very easily without creating a custom layout or using a third party library.

正如其他人已经说过的，UICollectionView使用流布局只能滚动一个方向。但是，您无需创建自定义布局或使用第三方库即可轻松完成此操作。

When you lay your view out in story board, you can put your UICollectionViewembedded in a UIScrollView. Have the scrollview set up to scroll horizontally and the UICollectionViewto scroll Vertically. Then set the UICollectionView.delaysContentTouchesto true so touches will pass through to the UIScrollViewand not think you are trying to scroll the collectionview.

当您在故事板中布置视图时，您可以将UICollectionView嵌入的UIScrollView. 将滚动视图设置为水平滚动和UICollectionView垂直滚动。然后将 设置UICollectionView.delaysContentTouches为 true 以便触摸将传递到UIScrollView并且不会认为您正在尝试滚动集合视图。

When you set up the UICollectionView, set it's size and the size of the cells to be what you actually want them to be (Wider than the actual screen) and lay them out accordingly.

当您设置 时UICollectionView，将它的大小和单元格的大小设置为您实际想要的大小（比实际屏幕更宽）并相应地布置它们。

Now in the containing UIViewControllerput this code in the view lifecycle

现在在包含中UIViewController将此代码放入视图生命周期中

    - (void)viewDidLayoutSubviews {
        self.myScrollView.contentSize = self.myCollectionView.frame.size;
    }

That's literally all you have to do to accomplish what you are describing. Now your scrollview should allow you to scroll horizontally to view your entire cell and your collectionView should scroll vertically through your cells.

这就是您要完成您所描述的内容所需要做的全部工作。现在您的滚动视图应该允许您水平滚动以查看整个单元格，并且您的 collectionView 应该垂直滚动您的单元格。

Happy programming.

快乐编程。

回答by Ahmed Abdallah

Xcode 11+, Swift 5.

Xcode 11+，Swift 5。

I solved my issue, I prepared videoand code

我解决了我的问题，我准备了视频和代码

回答by Catalin

You should embed a UITableView into a UIScrollView. ScrollView and TableView will have the same height but different widths. This way UITableView will scroll vertical and UIScrollView will scroll horizontal.

您应该将 UITableView 嵌入到 UIScrollView 中。ScrollView 和 TableView 将具有相同的高度但不同的宽度。这样 UITableView 将垂直滚动， UIScrollView 将水平滚动。

回答by CitronEvanescent

I'm not sure I've understood your problem.

我不确定我是否理解你的问题。

But if you have made a custom layout, make sure you have implemented :

但是，如果您制作了自定义布局，请确保您已实现：

- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath;

and that your layout attributes frame and size are set with correct values for your "large cell" index path.

并且您的布局属性 frame 和 size 为您的“大单元格”索引路径设置了正确的值。

Also make sure you have implemented :

还要确保您已实施：

- (CGSize) collectionViewContentSize;

This method returns the contentSize of the collection View. If contentSize.width > youAppFrame.width you should have horizontal scrolling. Same for height and vertical scrolling.

此方法返回集合视图的 contentSize。如果 contentSize.width > youAppFrame.width 你应该水平滚动。高度和垂直滚动相同。

Also make sure your collectionView allows scrolling and that your layout is prepared correctly using :

还要确保您的 collectionView 允许滚动并且您的布局使用以下方法正确准备：

- (void)prepareLayout

By the way, for your layout have you overloaded UICollectionViewLayoutor UICollectionViewFlowLayout?

顺便说一句，对于您的布局，您是否超载UICollectionViewLayout或UICollectionViewFlowLayout？

回答by Radu Simionescu

Before you can do that you MUST use a different type of layout. The flow layout represents its items as a list and it spans these items in cells based on the available width. If you want to have both horizontal and vertical scrolling you need to somehow specify the number of columns for your grid. the FlowLayout doesn't have that. A simple sollution is to make a subclass of UICollectionViewLayout and override collectionViewContentSize to make it retun a width = to the added sum of the cells widths of one row (this is where knowing how many collumns you want is necessary), plus any additional spacing between them. This will work fine if your cells have the same size per column, similar to a grid.

在您可以这样做之前，您必须使用不同类型的布局。流布局将其项目表示为一个列表，并根据可用宽度将这些项目跨越到单元格中。如果您想同时进行水平和垂直滚动，则需要以某种方式指定网格的列数。FlowLayout 没有。一个简单的解决方案是创建 UICollectionViewLayout 的子类并覆盖 collectionViewContentSize 以使其将宽度 = 重新调整为一行的单元格宽度的总和（这是知道您想要多少列是必要的），加上之间的任何额外间距他们。如果您的单元格每列的大小相同，这将正常工作，类似于网格。