使UICollectionView连续滚动

时间:2016-03-11 11:04:14

标签: ios uiscrollview uicollectionview uikit

我有一个游戏,我需要一个字母板不断滚动,并循环一组数据(A, D, X, S, R, P, F, G, H, Y, W, M)(像这样:http://plnkr.co/edit/cGxCRDWb3OX5RzJjSwUV?p=preview)。当用户点击字母时,需要从电路板上删除该字母。我不能让电路板停止滚动,它需要不断滚动。

我不确定如何做到这一点。我一直试图用UICollectionView做这个,但我不确定如何做到这一点。

任何帮助将不胜感激!谢谢:))

1 个答案:

答案 0 :(得分:11)

使用非常简单的技术可以实现集合视图中的无限滚动。

注意:据报道,此技术无法在iOS 12中运行。为了获得更好的效果,我在解释此方法后添加了一种新方法。

1)在numberOfItemsInSection委托方法的集合视图中返回一个巨大的数字。

func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int{

     return Int(INT_MAX)
}

2)使用您用于获取重复数据的数组或字典的计数来模拟集合视图中的项目数。

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell{

     let cell = collectionView.dequeueReusableCell(withReuseIdentifier: 
                cellIdentifier, for: indexPath)
     let displayText = indexPath.row % 10
     cell.displayLabel.text = String(displayText)
     return cell

}

这里我没有数据,因此我使用indexPath.row在我的标签中显示行号。

假设我有10个数据要显示,目前我有大量的项目,所以我用数字10模数当前项目。您可以使用数组或字典的计数对该行进行模数化,如下所示:

let displayText = aryData.count % 10

现在解释另一种适用于任何iOS的技术,并提供更好的输出:

1)将数组中的项数乘以2,然后我们需要使用collectionview的内容偏移量。我发布了以下代码,介绍了如何处理这种技术。

func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return aryData.count * 2
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = colView.dequeueReusableCell(withReuseIdentifier: cellIdentifier, for: indexPath) as! colViewCell

        var index = indexPath.item
        if index > aryData.count - 1 {
            index -= aryData.count
        }
        cell.displayLabel.text = aryData[index % aryData.count]
        return cell
    }

    func collectionView(_ collectionView: UICollectionView, willDisplay cell: UICollectionViewCell, forItemAt indexPath: IndexPath) {

        // if collection view scrolls vertically, use offset.y else comment below code
        var offset = collectionView.contentOffset
        let height = collectionView.contentSize.height
        if offset.y < height/4 {
            offset.y += height/2
            collectionView.setContentOffset(offset, animated: false)
        } else if offset.y > height/4 * 3 {
            offset.y -= height/2
            collectionView.setContentOffset(offset, animated: false)
        }

        // if collection view scrolls horizontally, use offset.x else comment below line of code
        // In my case the collectionview scrolls vertically this I am commenting below line of code
        //        let width = collectionView.contentSize.width
        //        if offset.x < width/4 {
        //            offset.x += width/2
        //            collectionView.setContentOffset(offset, animated: false)
        //        } else if offset.x > width/4 * 3 {
        //            offset.x -= width/2
        //            collectionView.setContentOffset(offset, animated: false)
        //        }
    }

以下是此代码的输出。

Infinite Scrolling Collection View

希望这会对你有所帮助:)。