Latest 3.0.0
License MIT
Platforms ios 8.0, requires ARC

Pod Version
Pod License
Pod Platform

View that replicates the built in UITableView section index, but for use in UICollectionView.

UITableView uses a private class called UITableViewIndex to provide this behavior. CollectionViewIndex
follows the same naming convention.


Install with CocoaPods by adding the following to your Podfile:


pod 'CollectionViewIndex'

Then run:

pod install


Create an instance of CollectionViewIndex and add it to the superview of, and in front of, your
UICollectionView instance:

override func viewDidLoad() {


    let views: [String: AnyObject] = [
        "topLayoutGuide": topLayoutGuide,
        "bottomLayoutGuide": bottomLayoutGuide,
        "collectionView": collectionView,
        "collectionViewIndex": collectionViewIndex,

    view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("|[collectionView]|", options: [], metrics: nil, views: views))
    view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:|[collectionView]|", options: [], metrics: nil, views: views))
    view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("[collectionViewIndex]|", options: [], metrics: nil, views: views))
    view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:[topLayoutGuide][collectionViewIndex][bottomLayoutGuide]", options: [], metrics: nil, views: views))

Like UILabel, CollectionViewIndex needs to know its height before it can know how wide it must be. When
using Auto Layout, you can set the object’s preferredMaxLayoutHeight like so:

override func viewWillLayoutSubviews() {

    collectionViewIndex.preferredMaxLayoutHeight = view.bounds.height - topLayoutGuide.length - bottomLayoutGuide.length

Your collection view layout may need to know the width of the CollectionViewIndex object. If so, you can inform it when layout completes:

override func viewDidLayoutSubviews() {

    collectionViewLayout.indexWidth = collectionViewIndex.bounds.width

CollectionViewIndex sends a UIControlEvent.ValueChanged event when the user interacts with it. You
register the target-action method in this way:

collectionViewIndex.addTarget(self, action: "selectedIndexDidChange:", forControlEvents: .ValueChanged)

func selectedIndexDidChange(collectionViewIndex: CollectionViewIndex) {
    print("User selected index (collectionViewIndex.selectedIndex)")

You’ll probably want to jump to a section of the collection view in response to that event. If your section headers
pin to visible bounds, be sure to take them into account when scrolling.


CollectionViewIndex is released under the MIT license. See LICENSE for details.

Latest podspec

    "name": "CollectionViewIndex",
    "version": "3.0.0",
    "summary": "View that replicates the built in UITableView section index, but for use in UICollectionView.",
    "authors": "Hilton Campbell",
    "homepage": "",
    "license": {
        "type": "MIT",
        "file": "LICENSE"
    "source": {
        "git": "",
        "tag": "3.0.0"
    "platforms": {
        "ios": "8.0"
    "source_files": "CollectionViewIndex/*.swift",
    "requires_arc": true

Pin It on Pinterest

Share This