21 Oct 2017

CenteredCollectionView – A lightweight UICollectionViewLayout that ‘pages’ and centers it’s cells

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

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() {
  super.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 🎡

scrollToEdgeEnabled

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

@BenEmdonbenjaminemdon@gmail.com

License 📄

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

Source: https://github.com/BenEmdon/CenteredCollectionView

Leave a Reply

%d bloggers like this: