How do I change the color of the side Alphabet in an indexed UITableView?

Question

I have a table view with an alphabetical index and am using the side alphabet to get through the list quickly. For those not familiar, that uses this:

- (NS         


        

Answer 1

We have successfully used the following code:

for(UIView *view in [tableView subviews]) {
    if([view respondsToSelector:@selector(setIndexColor:)]) {
        [view performSelector:@selector(setIndexColor:) withObject:[UIColor whiteColor]];
    }
}

which works fine - it's very similar to Mooglas answer - but refrains from using the word "UITableViewIndex".

Answer 2

if your minimum iOS version is newer than 6.0, you can use sectionIndexColor property of UITableView.

The color to use for the table view’s index text.

@property(nonatomic, retain) UIColor *sectionIndexColor

Discussion:

Table views can display an index along the side of the view, making it easier for users to navigate the contents of the table quickly. This property specifies the color to use for text displayed in this region.

---

Update date 2014.1.13

I find an open source third party library:GDIIndexBar to help custom the index appearance.

Answer 3

This can be easily changed in the interface builder for the UITableView - No need to use undocumented classes?

See screenshot below, as you can see the font colour and the background colour can be changed too. Job's a good'n!

Answer 4

Make a mutable array to contain the alternate title label In

-(NSArray * )sectionIndexTitlesForTableView:(UITableView * )tableView

return an array of @" " where the number of spaces between the quotes determines the width of the hi-lighted scroller. Have "sectionIndexTitlesForTableView" call an update label function. In that function remove all the labels in the array you created earlier from their superviews Then create and add however many labels are needed. Then add them to the table's superview.

These are the lines required to place the labels in the right place.

rect.origin.x = table.frame.origin.x+table.frame.size.width-rect.size.width-2;
rect.origin.y = 5+table.frame.origin.y+counter *(280-rect.size.height-([customIndexLabels count]-1))/([customIndexLabels count]-1);
if ([customIndexLabels lastObject]==thisLabel)
{
   rect.origin.y-=10;
}

Hope that helps. It's not perfect I just don't care enough to fix it myself The main problem is that the spacing of the last label is not uniform.

Answer 5

I was having the same problem and just found out a way of doing this, though this is using undocumented classes and methods so think one extra time before trying to upload it to the App Store. I should say that i've only tried this with iOS5 so I don't know if it will work for previous versions.

I borrowed and modified the Erica Saunders cookbook example so that it now changes the text color to red:

- (UITableViewCell *)tableView:(UITableView *)tv cellForRowAtIndexPath:(NSIndexPath *)indexPath {    

  for(UIView *view in [tv subviews])
  {
    if([[[view class] description] isEqualToString:@"UITableViewIndex"])
    {
      [view performSelector:@selector(setIndexColor:) withObject:[UIColor redColor]];
    }
  }

  //rest of cellForRow handling...

}

Answer 6

Swift edition for undocumented font change:

extension NSObject {

    class func objectClassName() -> String {

        let classLongName = reflect(self.self).summary;

        let tokens = classLongName.componentsSeparatedByString(".")

        if let typeName = tokens.last {

            return typeName
        }

        return NSStringFromClass(self.dynamicType)
    }
}

func changeSectionIndexFont(tableView: UITableView) -> Void {

        let realSubviews = tableView.subviews as! [UIView]

        for subview in realSubviews {

            if subview.dynamicType.objectClassName() == "UITableViewIndex" {

                subview.setValue(UIFont(name: "OpenSans", size: 10), forKey: "font")
            }
        }
    }