Giter Club home page Giter Club logo

bdkcollectionindexview's Introduction

BDKCollectionIndexView

An index-title-scrubber-bar, for use with a UICollectionView or as a replacement for the one provided by a UITableView. Gives a collection/table view the index title bar for -sectionIndexTitles that a UITableView gets for (almost) free. A huge thank you to @Yang from this Stack Overflow post, which saved my bacon here.

gif

Usage

To install it via CocoaPods, just drop this line in your Podfile:

pod 'BDKCollectionIndexView'

And then run pod install, naturally. After that, create an instance of BDKCollectionIndexView, and add it as a subview of whatever view contains your tableView or collectionView (but not the tableView or collectionView itself). Then assign it a width value of 28 (or height, if you're using it as a horizontal index view). Attach whatever other layout constraints you see fit!

override func viewDidLoad() {
    super.viewDidLoad()

    let indexWidth = 28
    let frame = CGRect(x: collectionView.frame.size.width - indexWidth,
        y: collectionView.frame.size.height,
        width: indexWidth,
        height: collectionView.frame.size.height)
    var indexView = BDKCollectionIndexView(frame: frame, indexTitles: nil)
    indexView.autoresizingMask = .FlexibleHeight | .FlexibleLeftMargin
    indexView.addTarget(self, action: "indexViewValueChanged:", forControlEvents: .ValueChanged)
    view.addSubview(indexView)
}

func indexViewValueChanged(sender: BDKCollectionIndexView) {
    let path = NSIndexPath(forItem: 0, inSection: sender.currentIndex)
    collectionView.scrollToItemAtIndexPath(path, atScrollPosition: .Top, animated: false)
    // If you're using a collection view, bump the y-offset by a certain number of points
    // because it won't otherwise account for any section headers you may have.
    collectionView.contentOffset = CGPoint(x: collectionView.contentOffset.x,
        y: collectionView.contentOffset.y - 45.0)
}

Then, when you have the section index titles (rather, the label values that you want to appear on the index bar), assign that array to the index bar instance's indexTitles value.

self.indexView.indexTitles = self.resultsController.sectionIndexTitles

You can modify backgroundColor and touchStatusBackgroundColor property to change the background color of the "touch status view" that appears when the view is touched. Use tintColor of BDKCollectionIndexView instance to change the color of text labels.

Again, big thanks to @Yang for the solution on which this is based.

Please...

If you use this in your project, drop me a line and let me know! I'd love to hear about it. You can hit me up via email, on Twitter, or carrier pigeon.

Contact

Contributors

bdkcollectionindexview's People

Contributors

huperniketes avatar kreeger avatar mahal avatar rinatkhanov avatar skorulis avatar

Watchers

 avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.