CenteredCollectionView

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

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"

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 🎡

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)
```

Contributing

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

Author

@BenEmdon 👨‍💻

License

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

LinusGeffarth / CenteredCollectionView