How to create a shrinkable index bar like in the contacts app?

I want to create an indexbar like the one in the contacts app. My code:

let indexBarTitles = ["#","A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]

override func sectionIndexTitlesForTableView(tableView: UITableView) -> [String]? {
    return self.indexBarTitles
}

The indexbar does not look like expected on smaller screens (3.5"). Whereas in the contacts app the indexbar is shrinked and contains dots, mine does not contain any and is not shrinked.

Any idea how to do this?

Edit:

This is what it looks like:

This is what I want to achieve: