使用垂直无限滚动在UICollectionView中显示需求中的单元格

I would like to know how to achieve using a UICollectionView the desired effect of loading in demand like in the Amazon app when you make a search, it returns only a number of items until the scroll ends, then a loading indicator it set to load more cells and go on until all the products in the search it's showed.

我想知道如何使用UICollectionView实现所需的加载效果,就像在亚马逊应用程序中进行搜索一样,它只返回一些项目,直到滚动结束,然后加载指示器设置为加载更多细胞继续,直到它显示的搜索中的所有产品。

Something like the following picture for example :

像下面这样的图片:

Normally you have to set in the numberOfItemsInSection, the number of items of the data source, how it's the way?, you set the total of items and then load it lazy or something?

通常你必须设置numberOfItemsInSection,数据源的项目数,它是如何的方式?,你设置项目的总数,然后加载它懒惰或什么?

Thanks in advance.

提前致谢。

3 个解决方案

#1

Using the scrollViewDidScroll function like crazy_phage did above you can observe when finally reach the final of the CollectionView then you can update the numberOfRowInSections and call the reloadData in the following way :

使用上面的crazy_phage之类的scrollViewDidScroll函数,您可以观察到最终到达CollectionView的最后时间,然后您可以更新numberOfRowInSections并以下列方式调用reloadData:

class CollectionSampleViewController: UICollectionViewController {

    private let reuseIdentifier1 = "Cell"
    private var numberOfItemsPerSection = 9    

    override func viewDidLoad() {
       super.viewDidLoad()        
    }

    override func didReceiveMemoryWarning() {
       super.didReceiveMemoryWarning()
    }

    override func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
       return 1
    }

    override func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
       return numberOfItemsPerSection
    }    

    override func scrollViewDidScroll(scrollView: UIScrollView) {
       let offsetY = scrollView.contentOffset.y
       let contentHeight = scrollView.contentSize.height

       if offsetY > contentHeight - scrollView.frame.size.height {            
          numberOfItemsPerSection += 6
          self.collectionView.reloadData()
       }
    }   
}

When the reloadData function its called the scroll remains in the same place and the new data it's loaded.

当reloadData函数调用它时,滚动保持在同一个地方并加载新数据。

In the above code you can use an Activity Indicator View or anything else you want to add to your code.

在上面的代码中,您可以使用活动指示器视图或您要添加到代码中的任何其他内容。

#2

I am also working on infinity scroll on UICollectionView. Here is the function which you need.

我也在UICollectionView上进行无限滚动。这是您需要的功能。

func scrollViewDidScroll(scrollView: UIScrollView) {
    let offsetY = scrollView.contentOffset.y
    let contentHeight = scrollView.contentSize.height
    if offsetY > contentHeight - scrollView.frame.size.height {
        println("this is end, see you in console")
    }
}

And you can write your code in if clause. reloadData() I think.

您可以在if子句中编写代码。 reloadData()我想。

// load data for collection view
func loadGroundData(){
    AVCloud.callFunctionInBackground("GroundWaterFallList", withParameters: [:]) {
        (result: AnyObject!, error: NSError!) -> Void in
        if error == nil {
            NSLog("ground users count: \(result.count)")
            NSLog("\(result[0])")
            self.ground_water_fall_people = result as NSArray
            self.collectionView?.reloadData()
        }
    }
}

well, I am still working on it, hope this help. And hope someone can explain these two functions. collectionView(collectionView: UICollectionView, didEndDisplayingCell cell: UICollectionViewCell, forItemAtIndexPath indexPath: NSIndexPath) scrollViewDidScroll

好吧,我还在努力,希望得到这个帮助。希望有人能解释这两个功能。 collectionView(collectionView:UICollectionView,didEndDisplayingCell cell:UICollectionViewCell,forItemAtIndexPath indexPath:NSIndexPath)scrollViewDidScroll

#3

We can use willDisplay method:

我们可以使用willDisplay方法:

var endOfData = false

...

func collectionView(_ collectionView: UICollectionView, willDisplay cell: UICollectionViewCell, forItemAt indexPath: IndexPath) {
    if indexPath.row == model.data.count - 5 && !endOfData {
        loadNextData()
    }
}

It looks like the simplest way.

它看起来像最简单的方式。