在Swift中创build水平滚动collectionview

我怎样才能轻松地做一个水平滚动collectionView填充单元格横跨行而不是列下来？

我想在那里5列和3行，但有超过15个项目，我希望它滚动到下一页。
我有很多麻烦得到这个去。

Answer 1

选项1 – build议

为您的collections视图使用自定义布局。 这是做这件事的正确方法，它让你对如何让单元格填充集合视图有很大的控制力。

这是来自“raywenderlich”的UICollectionView自定义布局教程

---

选项2

这更像是一种做你想做的事的方法。 在这种方法中，您可以通过访问数据源来模拟所需的样式。 我将在代码中解释它：

var myArray = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18] let rows = 3 let columnsInFirstPage = 5 // calculate number of columns needed to display all items var columns: Int { return myArray.count<=columnsInFirstPage ? myArray.count : myArray.count > rows*columnsInFirstPage ? (myArray.count-1)/rows + 1 : columnsInFirstPage } override func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int { return columns*rows } override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell { let cell = collectionView.dequeueReusableCellWithReuseIdentifier("Cell", forIndexPath: indexPath) //These three lines will convert the index to a new index that will simulate the collection view as if it was being filled horizontally let i = indexPath.item / rows let j = indexPath.item % rows let item = j*columns+i guard item < myArray.count else { //If item is not in myArray range then return an empty hidden cell in order to continue the layout cell.hidden = true return cell } cell.hidden = false //Rest of your cell setup, Now to access your data You need to use the new "item" instead of "indexPath.item" //like: cell.myLabel.text = "\(myArray[item])" return cell } 

这是这个代码在行动：

*“添加”button只是向myArray添加另一个数字，并重新加载集合视图，以演示如何使用myArray不同数量的项目

---

编辑 – 将项目分组到页面：

 var myArray = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18] let rows = 3 let columnsInPage = 5 var itemsInPage: Int { return columnsInPage*rows } var columns: Int { return myArray.count%itemsInPage <= columnsInPage ? ((myArray.count/itemsInPage)*columnsInPage) + (myArray.count%itemsInPage) : ((myArray.count/itemsInPage)+1)*columnsInPage } override func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int { return columns*rows } override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell { let cell = collectionView.dequeueReusableCellWithReuseIdentifier("Cell", forIndexPath: indexPath) let t = indexPath.item / itemsInPage let i = indexPath.item / rows - t*columnsInPage let j = indexPath.item % rows let item = (j*columnsInPage+i) + t*itemsInPage guard item < myArray.count else { cell.hidden = true return cell } cell.hidden = false return cell } 

Answer 2

你有一个对你的UICollectionViewFlowLayout()的引用，只要做到：

 layout.scrollDirection = .horizontal 

这里是一个很好的教程更多信息： https ： //www.youtube.com/watch？v = Ko9oNhlTwH0

尽pipe出于历史的目的，请考虑快速searchStackOverFlow，以确保这不是重复的。

希望这可以帮助。

更新：您的项目将先水平填充，如果collectionview中没有足够的空间去右边，他们将进入下一行。 所以，首先增加你的collectionview.contentsize （应该是更大的屏幕来启用滚动），然后设置你的collectionview项目（单元格）的大小。

 flowLayout.itemSize = CGSize(width: collectionView.contentSize.width/5, height: collectionView.contentSize.height/3)