如何在 Swift 中创建水平滚动的 UICollectionView？

Question

如何制作水平滚动的 collectionView 来填充跨行而不是沿列向下的单元格？

我想要 5 列和 3 行，但是当超过 15 个项目时，我希望它滚动到下一页。我很难做到这一点。

Answer 1

在您引用 UICollectionViewFlowLayout() 的地方，只需执行以下操作：

layout.scrollDirection = .horizontal

这里有一个很好的教程以获取更多信息：https://www.youtube.com/watch?v=Ko9oNhlTwH0

尽管出于历史目的，请考虑快速搜索 Whosebug 以确保这不是重复的。

希望对您有所帮助。

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

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

Answer 2

选项 1 - 推荐

为您的 collection 视图使用自定义布局。这是执行此操作的正确方法，它使您可以更好地控制单元格填充 collection 视图的方式。

这是来自 "raywenderlich"

的 UICollectionView Custom Layout Tutorial

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

下面是这段代码的作用：

*"Add" 按钮只是将另一个数字添加到 myArray 并重新加载 collection 视图以演示 myArray 中不同数量的项目的外观=16=]

编辑 - 将项目分组到页面中：

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 3

指定集合视图的高度和单元格大小。更多详情如下：

设置 UICollectionView 的约束，固定边缘。请务必指定 UICollectionView 的高度或约束，以便明确单元格只能水平滚动而不能向下滚动到下一行。高度应等于或略大于您在步骤 2 中指定的单元格高度。

实现 UICollectionViewDelegateFlowLayout 委托和 sizeForItemAt 方法。这是一个示例 sizeForItemAt 实现。

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    let cellWidth = 100
    let cellHeight = 30
    return CGSize(width: cellWidth, height: cellHeight)
}

如何在 Swift 中创建水平滚动的 UICollectionView？

How do I create a horizontal scrolling UICollectionView in Swift?

horizontal-scrolling

ios

uicollectionview

uicollectionviewcell

swift

选项 1 - 推荐

选项 2