How do I create a dictionary-style scroll bar for iPhone (like in the Contacts list)?

Question

I am creating an iPhone app which I would like to have a similar interface to the iPhone's native contact picker view, i.e. an alphabetical list which you can scroll through, with a search bar up top which narrows down the list. Particularly, I'd like to be able to show the letters of the alphabet down the side so that as you scroll through the list, you see your position in the alphabet in the scrollbar. The problem is that my data basically consists of key-value pairs, not contact data, so I can't easily use the native contact picker.

As far as I can see, I have two options to achieve what I want:

1. Use the ABPeoplePickerNavigationController class and hack it to use an address book which I fill myself with non-address type data. The problem with this is that, by default, the address book will fill up with the contacts from the iPhone so that each time the app opened, I'd have to flush those contacts and build my own list. (Not to mention other problems associated with using an interface which is bound to a particular data structure)
2. Use a UISearchBar and UIScrollView. This would be fine, but I'm not sure how to do anything to the scroll bar except change its colour - I can't see how to override its contents.

Any advice on which is the simplest way? What are the pitfalls (particularly of 1)?

Answer 1

To get the letters down the side, you can just provide a -sectionIndexTitlesForTableView: method in your table view datasource. As for searching, there's a bit more work there, and it's very dependent on your data. A UISearchBar is the place to start, however.

Answer 2

For a search bar, have a look at TTSearchBar in the Three20 library.

Everything else can be easily implemented using UITableView.