Scope Bar for UITableView like App Store?

Question

Does anyone know how to add a scope bar to a UITableView? The App Store app does this sometimes, like in the picture below.

I would like to use this scope bar to add sorting options for the elements in the UITableView. This would be more convenient than having a toolbar with a UISegmentControl.

I just don't know how to implement this. I don't even know the name of the element (I'm calling it scope bar because it looks just like the scope bar of a UISearchBar, but it is not).

Answer 1

Actually, unlike what others have said, this UISegmentedControl's .segmentedControlStyle property is set to an undocumented value of 7.

 theSegCtrl.segmentedControlStyle = 7;

But @Macatomy's answer is more AppStore-safe (although Apple can't detect this anyway).

Answer 2

Probably you already solved this issue but I believe this can be helpful for other people.

Inside your ViewController that you use in that TableViewController, you should insert the following code:

- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section {

NSArray *segmentTextContent = [NSArray arrayWithObjects: @"one",@"two",@"three", nil];
UISegmentedControl *segmentedControl = [[UISegmentedControl alloc] initWithItems:segmentTextContent];
segmentedControl.frame = CGRectMake(2, 5, 316, 35);

[self.segmentedControl addTarget:self action:@selector(segmentChanged:) forControlEvents:UIControlEventValueChanged];
self.segmentedControl.segmentedControlStyle = UISegmentedControlStyleBar; //changes the default style
self.segmentedControl.tintColor = [UIColor darkGrayColor]; //changes the default color
self.segmentedControl.enabled = true;
self.segmentedControl.selectedSegmentIndex = 0;

return self.segmentedControl;

}

That inserts a segmented control as the table header, which (if you wish) will also bounce when you reach the list top and at the same time will always remain visible while you scroll in your list.

Hope it helps.

Answer 3

The element is a UISegmentedControl with the UISegmentedControlStyleBar style. You can set the tintColor property to get the color desired. Just put the view above the table view and you can get something that looks like that screenshot.