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).

image showing what I want

possible duplicate of [How to put a UISegmentedControl under a NavigationController?](http://stackoverflow.com/questions/2673714/how-to-put-a-uisegmentedcontrol-under-a-navigationcontroller) — JosephH, Jul 22 '12 at 10:09

score 13 · Answer 1 · edited May 23 '17 at 12:13

13

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).

edited May 23 '17 at 12:13

Community

1
1

answered Jul 03 '10 at 20:38

kennytm

510,854
105
1,084
1,005

That's interesting. How does this undocumented style differ from the documented `UISegmentedControlStyleBar` style? – indragie Jul 05 '10 at 00:52
Really interesting. And it really works. It sets the button colors to those pictured, but I don't know of any other differences. And how did you know about that line of code, KennyTM? Thanks. – Aloha Silver Jul 05 '10 at 02:48
Hey, has anyone submitted and had rejected any apps because of this? – lol Jan 21 '12 at 05:37
1

How do i set the height of the segmentedcontrol after i set the style? it is too small for that particular style.. And updating the frame of the control makes the table overlap it :| – Matej Aug 08 '12 at 23:41

score 4 · Answer 2 · answered Jan 10 '13 at 12:50

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.

score 2 · Accepted Answer · answered Jul 03 '10 at 20:34

2

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.

answered Jul 03 '10 at 20:34

indragie

18,002
16
95
164

1

Thanks for that. I just don't know what that tintColor is, do you? – Aloha Silver Jul 05 '10 at 02:46
You could experiment around until you found something thats similar to the one in the App Store app. – indragie Jul 05 '10 at 03:16

score 1 · Answer 4 · answered Jul 03 '10 at 20:32

1

UISegmentedControl

You create it, set up its segments, and set its delegate. The delegate then takes some sort of action every time the selected segment changes.

answered Jul 03 '10 at 20:32

Alex Wayne

178,991
47
309
337

Scope Bar for UITableView like App Store?

4 Answers4

Linked