UICollectionView - 水平滚动，水平布局？ [英] UICollectionView - Horizontal scroll, horizontal layout?

问题描述

我有一个UIScrollView，它显示了一个图标网格。如果你想象一下iOS Springboard的布局，你就会非常接近正确。它有一个水平的分页滚动（就像Springboard一样）。但是，看起来布局并不完全正确。看起来好像是从上到下布置物品。因此，由于要显示的项目数，我的最后一列只有2行。我宁愿让最后一页上的最后一行有两个项目，就像你在Springboard中看到的那样。

I have a UIScrollView that lays out a grid of icons. If you were to imagine the layout for the iOS Springboard, you'd be pretty close to correct. It has a horizontal, paged scroll (just like Springboard). However, it appears that the layout is not quite right. It appears as though it is laying out the items from top to bottom. As a result, my last column only has 2 rows in it, due to the number of items to be displayed. I'd rather have my last row on the last page have 2 items, like you would see in the Springboard.

如何用UICollectionView及其相关的类来实现这一点？我是否必须编写自定义UICollectionViewFlowLayout？

How can this be accomplished with UICollectionView and its related classes? Do I have to write a custom UICollectionViewFlowLayout?

推荐答案

第一种方法

使用 UICageViewController 以及 UICollectionViewControllers 数组怎么样？你必须在每个 UICollectionViewController 中获取适当数量的项目，但这应该不难。你会得到与Springboard完全相同的外观。

1st approach

What about using UIPageViewController with an array of UICollectionViewControllers? You'd have to fetch proper number of items in each UICollectionViewController, but it shouldn't be hard. You'd get exactly the same look as the Springboard has.

我想过这个和我认为你必须设置：

I've thought about this and in my opinion you have to set:

self.collectionView.pagingEnabled = YES;

并通过继承 UICollectionViewLayout 。从自定义布局对象，您可以访问 self.collectionView ，这样您就可以知道集合视图的大小是什么框架， numberOfSections 和 numberOfItemsInSection：。使用该信息，您可以计算单元格 frames （在 prepareLayout 中）和 collectionViewContentSize 。这里有一些关于创建自定义布局的文章：

and create your own collection view layout by subclassing UICollectionViewLayout. From the custom layout object you can access self.collectionView, so you'll know what is the size of the collection view's frame, numberOfSections and numberOfItemsInSection:. With that information you can calculate cells' frames (in prepareLayout) and collectionViewContentSize. Here're some articles about creating custom layouts:

• https://developer.apple.com/library/content/documentation/WindowsViews/Conceptual/CollectionViewPGforIOS/CreatingCustomLayouts/CreatingCustomLayouts.html


• http： //www.objc.io/issue-3/collection-view-layouts.html

• https://developer.apple.com/library/content/documentation/WindowsViews/Conceptual/CollectionViewPGforIOS/CreatingCustomLayouts/CreatingCustomLayouts.html
• http://www.objc.io/issue-3/collection-view-layouts.html

您可以在不创建自定义布局的情况下执行此操作（或其近似值）。在空白视图中添加 UIScrollView ，在其中启用分页。在滚动视图中添加集合视图。然后添加一个宽度约束，检入代码中有多少项，并将其常量设置为正确的值，例如（self.view.frame.size.width * numOfScreens）。以下是它的外观（单元格上的数字显示 indexPath.row ）： https://www.dropbox.com/s/ss4jdbvr511azxz/collection_view.mov 如果您对细胞的订购方式不满意，那我恐怕你会必须与1.或2。

You can do this (or an approximation of it) without creating the custom layout. Add UIScrollView in the blank view, set paging enabled in it. In the scroll view add the a collection view. Then add to it a width constraint, check in code how many items you have and set its constant to the correct value, e.g. (self.view.frame.size.width * numOfScreens). Here's how it looks (numbers on cells show the indexPath.row): https://www.dropbox.com/s/ss4jdbvr511azxz/collection_view.mov If you're not satisfied with the way cells are ordered, then I'm afraid you'd have to go with 1. or 2.

这篇关于UICollectionView - 水平滚动，水平布局？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！