ios - 如何在 UICollectionView 中加载更多对象

Question

I have a collection view and data to load. My goal is when the collection view loaded it's load only first 5 items. And when I scroll to bottom of collection view it's load more 5 items and again until load all the data.

// The data to load (It already have 20 item loaded from server)
static var productInfo: [ProductInfo] = []

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    guard let cell = collectionView.dequeueReusableCell(withReuseIdentifier: MainProductCell.reuseIdentifier, for: indexPath) as? MainProductCell else {
        fatalError("Expected `\(MainProductCell.self)` type for reuseIdentifier \(MainProductCell.reuseIdentifier). Check the configuration in Main.storyboard.")
    }
        // Set data for collection cell
        cell.modelId = String(ProductCollectionViewController.productInfo[indexPath.row].productId)
        cell.modelName = String(ProductCollectionViewController.productInfo[indexPath.row].name)
        cell.modelPrice = String(ProductCollectionViewController.productInfo[indexPath.row].price)
        cell.modelImage = ProductCollectionViewController.productInfo[indexPath.row].image
        cell.objectImageView.downloadedFrom(link: ProductCollectionViewController.productInfo[indexPath.row].image, contentMode: UIViewContentMode.scaleAspectFit)
        cell.modelLink = String(ProductCollectionViewController.productInfo[indexPath.row].remoteStorage)
    }

    return cell
}

func collectionView(_ collectionView: UICollectionView, willDisplay cell: UICollectionViewCell, forItemAt indexPath: IndexPath) {
    let lastItem = ProductCollectionViewController.productInfo.count - 1
    if indexPath.row == lastItem {
        loadMore()
    }
}

func loadMore() {
    print("load more...")
    //How to handle load more here?
}

How to handle the loadMore() function? Thank you.

Answer 1

Till that it's going well plus

  if indexPath.row == lastItem && !loading {
    loading = true
    loadMore()
}

Answer 2

Using itemAtIndexIndexPath to determine the last cell is not the best way, you should check when the scrollView is going to scroll to bottom.

var isScrolledToBottomWithBuffer: Bool {
    let buffer = tableView.bounds.height - tableView.contentInset.top - tableView.contentInset.bottom
    let maxVisibleY = tableView.contentOffset.y + self.tableView.bounds.size.height
    let actualMaxY = tableView.contentSize.height + tableView.contentInset.bottom
    return maxVisibleY + buffer >= actualMaxY
}

override func scrollViewDidScroll(_ scrollView: UIScrollView) {
    if( scrollView.contentSize.height == 0 ) {
        return;
    }
    if isScrolledToBottomWithBuffer {
        self.loadMore()
    }
}

Answer 3

Improving upon @duytph answer

    var isAllowedToFetchNewDataFromBottom = false

...

        var products: [Products] = []

            ...

            collectionView.delegate = self

            ...

            extension AuthorProductsListViewController: UICollectionViewDelegate {

                func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
                    if scrollView.contentSize.height == 0 {
                        return
                    }
                    if isScrolledToBottomWithBuffer, isAllowedToFetchNewDataFromBottom {
                        fetchNewData() {
                            self.isAllowedToFetchNewDataFromBottom = false
                        }
                    }
                }

                func collectionView(_ collectionView: UICollectionView, willDisplay cell: UICollectionViewCell, forItemAt indexPath: IndexPath) {
                    lastItemCount = pendingProducts.count

                    if indexPath.row == lastItemCount - 1 {
                        isAllowedToFetchNewDataFromBottom = true
                    }
                }

                var isScrolledToBottomWithBuffer: Bool {
                    let buffer = collectionView.bounds.height - collectionView.contentInset.top - collectionView.contentInset.bottom
                    let maxVisibleY = collectionView.contentOffset.y + self.collectionView.bounds.size.height
                    let actualMaxY = collectionView.contentSize.height + collectionView.contentInset.bottom
                    return maxVisibleY + buffer >= actualMaxY
                }

            }