Tutorial :Remove Gray UITableView Index Bar


I am making an application with a UITableView that has a few sections (2), and when I run, the table view has this annoying gray index bar on the side, like the one in the "iPod" application, that has but 2 options in it. My question is, how do I hide the "index bar," because it is an unnecessary waste of space?


Code snippets:

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {      return [sections count];  }    - (NSArray *)sectionIndexTitlesForTableView:(UITableView *)tableView {      return sections;  }    // Customize the number of rows in the table view.  - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {      if (section == 0) {          return 2;      }      return 1;  }  - (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section {      return [sections objectAtIndex:section];  }      // Customize the appearance of table view cells.  - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {        static NSString *CellIdentifier = @"Cell";        UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];      if (cell == nil) {          cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];      }        // Configure the cell.      cell.textLabel.text = [content objectAtIndex:(indexPath.row + [[sectionAmounts objectAtIndex:indexPath.section] intValue])];      tableView.showsVerticalScrollIndicator = NO;      return cell;  }    - (void)viewDidLoad {      [super viewDidLoad];      content = [NSArray arrayWithObjects:@"Sphere", @"Cylinder", @"Circle", nil];      sections = [NSArray arrayWithObjects:@"3d", @"2d", nil];      sectionAmounts = [NSArray arrayWithObjects:[NSNumber numberWithInt:0], [NSNumber numberWithInt:2], nil]; //Second number is objects in first section... odd huh?      self.tableView.showsVerticalScrollIndicator = NO;      [content retain];      [sections retain];      // Uncomment the following line to display an Edit button in the navigation bar for this view controller.      // self.navigationItem.rightBarButtonItem = self.editButtonItem;  }  

(Mind my odd comments...)



That "scroll bar" is your index bar, assuming you're talking about the giant grey thing.

Return nil from sectionIndexTitlesForTableView: and it'll go away.


I tried this, and it didn't work for me. so i went through the table view properties, and got this.

self.tableView.showsVerticalScrollIndicator = NO;  

works like a charm.

*for any one who wants to do this in the future.


I had similar issue, however had to deal with my header/footer. Essentially I just removed the following methods

- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section  {      return @" "; //@"Top";  }    - (NSString *)tableView:(UITableView *)tableView titleForFooterInSection:(NSInteger)section  {      return @" "; //@"Bottom";  }  


You just use the below code and gray bar will go....

    tableViewBrowse.sectionIndexTrackingBackgroundColor = [UIColor clearColor];  


Use sectionIndexBackgroundColor property of UITableView to set the color of index bar to clear color as hiding scroll bar is going to hide the indexes as well.

Add it to your viewDidLoad: as following:

- (void)viewDidLoad {      [super viewDidLoad];        self.tableView.sectionIndexBackgroundColor = [UIColor clearColor]; //Replace it with your desired color  }  

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Next Post »