Latest 1.1
License MIT
Platforms ios 9.0
Frameworks UIKit

CI Status
Carthage compatible
Swift 3

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.

Latest podspec

    "name": "CenteredCollectionView",
    "version": "1.1",
    "summary": "A `CollectionViewFlowLayout` that 'pages' and centers it's cells ud83cudfa1 written in Swift",
    "description": "`CenteredCollectionView` is a lightweight drop in place `UICollectionViewFlowLayout` that pages and keeps its cells centered, resulting in the "carousel effect" ud83cudfa1",
    "homepage": "",
    "license": {
        "type": "MIT",
        "file": "LICENSE"
    "authors": {
        "BenEmdon": "[email protected]"
    "social_media_url": "",
    "platforms": {
        "ios": "9.0"
    "source": {
        "git": "",
        "tag": "1.1"
    "source_files": "CenteredCollectionView/Classes/**/*.{swift}",
    "frameworks": "UIKit",
    "pushed_with_swift_version": "3.0"

Pin It on Pinterest

Share This