dukeow94/infinitelayout

Horizontal and Vertical infinite scrolling feature for UICollectionView with Paging, NSProxy delegate, Reactive extension, SectionModel & AnimatableSectionModel support

InfiniteLayout

Example

To run the example project, clone the repo, and run pod install from the Example directory first.

Requirements

Installation

InfiniteLayout is available through CocoaPods. To install it, simply add the following line to your Podfile:

pod 'InfiniteLayout'

Usage

@IBOutlet weak var collectionView: InfiniteCollectionView!

InfiniteCollectionView doesn't need any other delegate or dataSource, just use UICollectionViewDataSource and UICollectionViewDelegate in the same way as you'll use it in any other UICollectionView.

InfiniteLayout provides 3 classes for infinite scrolling:

InfiniteLayout: an UICollectionViewFlowLayout

InfiniteCollectionView: an UICollectionView with InfiniteLayout

InfiniteCollectionViewController: an UICollectionViewController with InfiniteCollectionView

IndexPath

InfiniteCollectionView may create fake indexPath,

To get the real indexPath call

func indexPath(from infiniteIndexPath: IndexPath) -> IndexPath

To get the real section call

func section(from infiniteSection: Int) -> Int

Paging

InfiniteCollectionView provide a paging functionality, you can enable it by setting the isItemPagingEnabled flag to true

self.infiniteCollectionView.isItemPagingEnabled = true

When the isItemPagingEnabled flag is enabled you can adjust the deceleration rate by setting the velocityMultiplier, the more the value is high, the more the deceleration is long

self.infiniteCollectionView.velocityMultiplier = 1 // like scrollView with paging (default value)
self.infiniteCollectionView.velocityMultiplier = 500 // like scrollView without paging

When the isItemPagingEnabled flag is enabled you can set a preferredCenteredIndexPath, this value is used to calculate the preferred visible cell to center each time the collectionView will change its contentSize

self.infiniteCollectionView.preferredCenteredIndexPath = [0, 0] // center the cell at [0, 0] if visible (default value)
self.infiniteCollectionView.preferredCenteredIndexPath = nil // center the closest cell from center

Delegate

InfiniteCollectionView provide an infiniteDelegate protocol used to get the centered IndexPath, usefull if you want to use an InfiniteCollectionView like a Picker.

func infiniteCollectionView(_ infiniteCollectionView: InfiniteCollectionView, didChangeCenteredIndexPath centeredIndexPath: IndexPath?)

Rx

InfiniteCollectionView provide a subspec InfiniteLayout/Rx

pod 'InfiniteLayout/Rx'

To use InfiniteCollectionView with RxSwift without conflicts between NSProxy

Use RxInfiniteCollectionView instead of InfiniteCollectionView

@IBOutlet weak var collectionView: RxInfiniteCollectionView!

RxInfiniteCollectionView provides 2 dataSources for SectionModel:

RxInfiniteCollectionViewSectionedReloadDataSource and RxInfiniteCollectionViewSectionedAnimatedDataSource

Binding:

Without sections:

// automatic cell dequeue
Observable.just(Array(0..<2))
    .bind(to: infiniteCollectionView.rx.items(cellIdentifier: "cell", cellType: Cell.self, infinite: true)) { row, element, cell in
        cell.update(index: row) // update your cell
    }.disposed(by: disposeBag)
    
// custom cell dequeue
Observable.just(Array(0..<2))
    .bind(to: infiniteCollectionView.rx.items(infinite: true)) { collectionView, row, element in
        let indexPath = IndexPath(row: row, section: 0)
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! Cell // dequeue your cell
        cell.update(index: row) // update your cell
        return cell
    }.disposed(by: disposeBag)

With sections:

let dataSource = RxInfiniteCollectionViewSectionedReloadDataSource<SectionModel<Int, Int>>(configureCell: { dataSource, collectionView, indexPath, element in
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! Cell // dequeue your cell
    cell.update(index: indexPath.row) // update your cell
    return cell
})

Observable.just([
                    SectionModel(model: 0, items: Array(0..<2)),
                    SectionModel(model: 1, items: Array(0..<10))
                ])
    .bind(to: infiniteCollectionView.rx.items(dataSource: dataSource))
    .disposed(by: disposeBag)

for animations just use RxInfiniteCollectionViewSectionedAnimatedDataSource & AnimatableSectionModel

Centered IndexPath:

RxInfiniteCollectionView provide Reactive extension for itemCentered & modelCentered

infiniteCollectionView.rx.itemCentered
    .asDriver()
    .drive(onNext: { [unowned self] indexPath in
        self.selectedView.update(index: indexPath.row) // update interface with indexPath
    }).disposed(by: disposeBag)

infiniteCollectionView.rx.modelCentered(Int.self)
    .asDriver()
    .drive(onNext: { [unowned self] element in
        self.selectedView.update(index: element) // update interface with model
    }).disposed(by: disposeBag)

Author

Arnaud Dorgans, [email protected]

License

InfiniteLayout is available under the MIT license. See the LICENSE file for more info.