Horizontal and Vertical infinite scrolling feature for UICollectionView with Paging, NSProxy delegate, Reactive extension, SectionModel & AnimatableSectionModel support
To run the example project, clone the repo, and run
pod installfrom the Example directory first.
InfiniteLayout is available through CocoaPods. To install it, simply add the following line to your Podfile:
pod 'InfiniteLayout'
Create a
Package.swiftfile.
// swift-tools-version:5.0import PackageDescription
let package = Package( name: "InfiniteLayoutTestProject", dependencies: [ .package(url: "https://github.com/arnauddorgans/InfiniteLayout.git", from: "0.4.2") ], targets: [ .target(name: "InfiniteLayoutTestProject", dependencies: ["InfiniteLayout"]) ] )
@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
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
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
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 from: IndexPath?, to: IndexPath?)
InfiniteCollectionView provide a subspec InfiniteLayout/Rx
ruby 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
Without sections: ```swift // 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: ```swift let dataSource = RxInfiniteCollectionViewSectionedReloadDataSource>(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
RxInfiniteCollectionView provide Reactive extension for itemCentered & modelCentered ```swift 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) ```
Arnaud Dorgans, [email protected]
InfiniteLayout is available under the MIT license. See the LICENSE file for more info.