gistlib - create a paged collection view in swift

To create a paged UICollectionView with infinite scrolling you can follow these steps:

Create a new UICollectionView and set its pagingEnabled property to true. This will create a paged effect where cells are snapped to the sides of the screen.


main.swift
let collectionView = UICollectionView(frame: view.bounds, collectionViewLayout: UICollectionViewFlowLayout())
collectionView.isPagingEnabled = true
148 chars
3 lines

Implement the UICollectionViewDataSource and UICollectionViewDelegate protocols to populate the collection view and handle user interactions.


main.swift
class MyCollectionViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate {

    // Implement required methods of UICollectionViewDataSource and UICollectionViewDelegate here

    override func viewDidLoad() {
        super.viewDidLoad()

        collectionView.dataSource = self
        collectionView.delegate = self
        view.addSubview(collectionView)

        // Register your cell classes or nibs here

    }
}
451 chars
16 lines

Create a data source that can load cells for the collection view. For this example, we will use a basic array of data.


main.swift
var data = ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6", "Item 7", "Item 8", "Item 9", "Item 10"]
113 chars
2 lines

Implement the UICollectionViewDelegateFlowLayout protocol and return the size of each cell and the spacing between cells.


main.swift
class MyCollectionViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout {

    // Implement required methods of UICollectionViewDataSource and UICollectionViewDelegate here

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        return CGSize(width: collectionView.bounds.width, height: 100)
    }

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
        return 10
    }

}
685 chars
14 lines

Implement the UIScrollViewDelegate protocol and detect when the user has scrolled to the end of the collection view. When this happens, load more data and append it to the data source.


main.swift
class MyCollectionViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout, UIScrollViewDelegate {

    // Implement required methods of UICollectionViewDataSource and UICollectionViewDelegate here

    func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
        if let collectionView = scrollView as? UICollectionView {
            let visibleCells = collectionView.visibleCells

            if let lastCell = visibleCells.last, let indexPath = collectionView.indexPath(for: lastCell) {
                let lastItem = indexPath.item
                
                if lastItem == data.count - 1 {
                    // Load more data and append it to the data source here
                }
            }
        }
    }

}
804 chars
20 lines

Finally, reload the collection view when new data is added to the data source to display the new cells.


main.swift
class MyCollectionViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout, UIScrollViewDelegate {

    // ...

    func loadMoreData() {
        // Add new data to the data source here
        data.append(contentsOf: ["Item 11", "Item 12", "Item 13"])
        
        collectionView.reloadData()
    }

}
373 chars
13 lines

With these steps, you should now have a paged UICollectionView with infinite scrolling.

create a paged collection view in swift

similar swift code snippets

related categories