How to change side alphabet color in indexed UITableView?

Question

I have a tabular view with an alphabetical index, and I use the side alphabet to quickly go through the list. For those unfamiliar who use this:

- (NSInteger)tableView:(UITableView *)tableView sectionForSectionIndexTitle:(NSString *)title atIndex:(NSInteger)index { 

My problem is that my application has just been black. So now it’s hard to see the letters of the alphabet on the side.

I can't figure out how to change the color of the alphabet. I would like it to be “white,” if at all possible.

Answer 1

From what I can say, unfortunately, it is not possible to adjust the color of the text displayed in the index, the closest I could come with is the ability to change the background color and font of the index.

Erica Sadun's iPhone Developers cookbook has code that shows how to access the UITableViewIndex view (an undocumented class). You can find a link to it on page 175 of the book, if you have one. This gives access to the background color and font. You can see an unofficial document related to this class here .

WARNING This is an undocumented use of an undocumented class, so you need to be careful in using it.

Here is the code snippet from the cookbook with a few changes:

 - (UITableViewCell *)tableView:(UITableView *)tv cellForRowAtIndexPath:(NSIndexPath *)indexPath { for(UIView *view in [tv subviews]) { if([[[view class] description] isEqualToString:@"UITableViewIndex"]) { [view setBackgroundColor:[UIColor whiteColor]]; [view setFont:[UIFont systemFontOfSize:14]]; } } //rest of cellForRow handling... } 

This illustrates how you can access and view the UITableViewIndex and change it in some aspects. It appears that the view does not have any subheadings, so it probably does some sort of custom drawing with an array of index headers.

This is not perfect, but hopefully it helps a bit.

Floor

Answer 2

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

The color to be used for table index text.

@property (non-atomic, persistent) UIColor * sectionIndexColor

Discussion:

Table views can display a pointer along the side of the view, making it easier for users to quickly navigate through the contents of the table. This property determines the color used for the text displayed in this area.

---

Update Date 2014.1.13

I found an open source third-party library: GDIIndexBar to help customize the look of the index.

Answer 3

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

See the screenshot below, as you can see the font color and background color. Work well!

Answer 4

For iOS7 or higher:

 self.tableView.sectionIndexColor = [UIColor whiteColor]; self.tableView.sectionIndexBackgroundColor = [UIColor clearColor]; 

Answer 5

I had the same problem and I just found a way to do this, although it uses undocumented classes and methods, so think about one extra time before trying to download it to the App Store. I have to say that I only tried this with iOS5, so I don’t know if it will work for previous versions.

I borrowed and modified the example of Eric Saunders cookbook so that now it 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

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 great - it is very similar to the Mooglas answer - but refrains from using the word "UITableViewIndex".

Answer 7

You can set the hue color for tableView.

 [[UITableView appearance] setTintColor:[UIColor purpleColor]]; 

Answer 8

There is a way to change the alphabet index color.

In your header file, declare your UITableView as a property:

 @property (weak, nonatomic) IBOutlet UITableView *mainTable; 

Then, in your viewDidAppear implementation file, use the following line:

 //Change the color of the UITableView index color _mainTable.sectionIndexColor = [UIColor blackColor]; 

Answer 9

Here's the best solution I have found to adjust the background color in the index bar on the side. It works on iOS7 and possibly iOS6.

Add this to your view

 if ([_tableView respondsToSelector:@selector(setSectionIndexColor:)]) { _tableView.sectionIndexBackgroundColor = [UIColor clearColor]; _tableView.sectionIndexTrackingBackgroundColor = [UIColor whiteColor]; } 

The first color is the default, the second is the background color when scrolling.

Answer 10

Swift 5:

 tableView.sectionIndexColor = .red tableView.sectionIndexBackgroundColor = .clear 

Answer 11

Make a mutable array to contain an alternate header label B

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

returns an array @ "", where the number of spaces between quotation marks determines the width of the scroller with backlight. Ask "sectionIndexTitlesForTableView" to call the update label function. In this function, delete all labels in the array that you created earlier from your supervisors. Then create and add, however, many shortcuts. Then add them to the table supervisor.

These are the lines needed to place the tags 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 this helps. This is not ideal, I just do not care to fix it myself. The main problem is that the distance between the last mark is not uniform.

Answer 12

Quick edition for undocumented font changes:

 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") } } }