CenteredCollectionView

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

Example 📱

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

Usage 🛠

Use just as you would use a UICollectionView

let centeredCollectionView = CenteredCollectionView()

override func viewDidLoad() {
  super.viewDidLoad()

  // delegate & data source
  // implement the delegate and data source as you would a UICollectionView
  centeredCollectionView.delegate = self
  centeredCollectionView.dataSource = self

  // layout subviews (not shown)
  ...

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

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

  // get rid of scrolling indicators
  centeredCollectionView.showsVerticalScrollIndicator = false
  centeredCollectionView.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) {

    // if the currentCenteredPage isn't the one that was touched
    if scrollToEdgeEnabled,
    let currentCenteredPage = centeredCollectionView.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.

CenteredCollectionView 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/item

  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 👨‍💻

@BenEmdon, benjaminemdon@gmail.com

License 📄

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