如何在Swift中创建水平滚动UICollectionView? [英] How do I create a horizontal scrolling UICollectionView in Swift?

问题描述

我如何制作一个水平滚动的collectionView来填充行中而不是列中的单元格?

How can I make a horizontal scrolling collectionView that fills up cells going across the rows rather than down the columns?

我希望有5列和3行，但是当有15个以上的项目时，我希望它滚动到下一页.我在执行此操作时遇到了很多麻烦.

I want there to 5 columns and 3 rows but when there is more than 15 items I want it to scroll to the next page. I'm having a lot of trouble getting this going.

推荐答案

选项1-推荐

对集合视图使用自定义布局.这是正确的方法，它使您可以控制单元格如何填充集合视图.

Option 1 - Recommended

Use custom layouts for your collection view. This is the right way to do this and it gives you a lot of control over how you want your cells to fill the collection view.

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

Here is a UICollectionView Custom Layout Tutorial from "raywenderlich"

这更像是一种骇人听闻的方式来做您想要的事情.在这种方法中，您可以按顺序访问数据源，以模拟所需的样式.我将在代码中对其进行解释:

This is more like a hackish way of doing what you want. In this method you can access your data source in an order to simulate the style you need. I'll explain it in the code:

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

*The "Add" button just adds another number to myArray and reloads the collection view to demonstrate how it would look with different number of items in myArray

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

Edit - Group items into pages:

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
}

这篇关于如何在Swift中创建水平滚动UICollectionView?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！