项目主页    by: BenEmdon     Star:    Fork:     


CI Status Version Platform Carthage compatible Swift 3 License

CenteredCollectionView is a lightweight drop in place UICollectionViewFlowLayout that pages and keeps its cells centered, resulting in the "carousel effect" ????

Example ????


To try the example using Cocoapods:

pod try CenteredCollectionView

Usage ????

let centeredCollectionViewFlowLayout = CenteredCollectionViewFlowLayout()
let collectionView: UICollectionView

override init(nibName nibNameOrNil: String?, bundle nibBundleOrNil: Bundle?) {
  collectionView = UICollectionView(centeredCollectionViewFlowLayout: centeredCollectionViewFlowLayout)
  super.init(nibName: nibNameOrNil, bundle: nibBundleOrNil)


override func viewDidLoad() {

  // implement the delegate and dataSource
  collectionView.delegate = self
  collectionView.dataSource = self

  // layout subviews (not shown)

  // register collection cells
  collectionView.register(UICollectionViewCell.self, forCellWithReuseIdentifier: String(describing: UICollectionViewCell.self))

  // configure CenteredCollectionViewFlowLayout properties
  centeredCollectionViewFlowLayout.itemSize = CGSize(width: 100, height: 100)
  centeredCollectionViewFlowLayout.minimumLineSpacing = 20

  // get rid of scrolling indicators
  collectionView.showsVerticalScrollIndicator = false
  collectionView.showsHorizontalScrollIndicator = false

// delegate and datasource extensions

Scrolling to an Edge on Touch ????


Heres how you could trigger a scroll animation when a touch happens on an item that isn't the currentCenteredPage:

extension ViewController: UICollectionViewDelegate {
  func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {

    // check if the currentCenteredPage is not the page that was touched
    let currentCenteredPage = centeredCollectionViewFlowLayout.currentCenteredPage,
    			currentCenteredPage != indexPath.row {
      // trigger a scrollTo(index: animated:)
      centeredCollectionView.scrollTo(index: indexPath.row, animated: true)

Customize ????

You can use all properties inherited from UICollectionView.

CenteredCollectionViewFlowLayout specific properties:

  • minimumLineSpacing amount of space between each cell

    var minimumLineSpacing: CGFloat { get set }
    // default: 10
  • itemSize size of each cell. ⚠ required for use

    var itemSize: CGSize { get set }
  • currentCenteredPage calculates the current centered page

    var currentCenteredPage: Int? { get }
  • scrollDirection direction of scrolling (supports vertical)

    var scrollDirection: UICollectionViewScrollDirection { get set }
    // default: .horizontal
  • scrollTo(index: animated:) programatically scrolls to a cell at a specified index.

    func scrollTo(index: Int, animated: Bool)

Requirements ✅

This pod requires a deployment target of iOS 9.0 or greater

Installation ????

CenteredCollectionView is available through CocoaPods and Carthage.

To install it with Cocoapods, add the following line to your Podfile:

pod "CenteredCollectionView"

To install it with Carthage, add the following line to your Cartfile:

github "BenEmdon/CenteredCollectionView"

Contributing ????

All contributions are welcome! If you make a pull request or an issue, you're likely to get a swift response!

Author ????‍????


License ????

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