在Swift中创build水平滚动collectionview

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

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

    选项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 } 

    你有一个对你的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)