在Swift中创建水平滚动集合视图

Question

如何轻松地创建一个水平滚动集合视图,填充单元格跨越行而不是列向下？

我希望有5列和3行,但当有超过15项时,我希望它滚动到下一页.
这件事我有很多麻烦.

Answer 1

如果您有参考,请UICollectionViewFlowLayout()执行以下操作:

layout.scrollDirection = .horizontal

这是一个很好的教程,以获取更多信息:https://www.youtube.com/watch？v = KooooOhlTwH0

虽然出于历史目的,请考虑快速搜索StackOverFlow以确保它不是重复的.

希望这可以帮助.

更新: 您的项目将首先水平填充,如果右侧的集合视图中没有足够的空间,它们将转到下一行.因此,首先增加你的collectionview.contentsize(应该更大的屏幕以启用滚动),然后设置你的collectionview项目(单元格)大小.

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

Answer 2

选项1 - 推荐

为集合视图使用自定义布局.这是执行此操作的正确方法,它使您可以控制单元格填充集合视图的方式.

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

选项2

这更像是一种做你想做的事情的hackish方式.在此方法中,您可以按顺序访问数据源以模拟所需的样式.我将在代码中解释它:

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
}

以下是此代码的实际操作:

*"添加"按钮只是添加另一个数字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
}