Take the 2-minute tour ×

I'm trying to get a UISegmentedControl in a group UITableViewCell much like in the wifi settings in the Setting Application. The problem I'm having is I'm getting a double border. I get one border for the UISegmentedControl and one for the UITableViewCell.

I'm guessing I need to remove the border from the UITableViewCell. How can I go about doing that?

share|improve this question
A minor style suggestion: using the proper capitalization of the class names in the question title would make it a lot easier to read. You can change it after the fact. Sorry I don't have an answer, I only do desktop apps at the moment. –  Quinn Taylor Jun 25 '09 at 5:32

6 Answers 6

up vote 7 down vote accepted

I just noticed this is still getting answers. As it happens I've had to do this for another project and since I asked this question I've learned a lot more about iPhone dev. Here is how I solved it recently. It's all about making the frame the correct size. This should do it for a standard table.

UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"CellIdentifier"];
if(cell == nil) 
    cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"CellIdentifier"] autorelease];

UISegmentedControl *segmentedControl = [[UISegmentedControl alloc] initWithFrame:CGRectMake(-1.0f, -1.0f, 302.0f, 46.0f)];
[cell.contentView addSubview:segmentedControl];
share|improve this answer
@daniel-wood: The numbers you gave are right for portrait mode, but won't work in landscape. Voting you up for that :) –  Chris R. Donnelly Dec 28 '09 at 20:06
Ah, true. I guess you could do tableView.frame.size.width - 18.0f for the width. All the other values should be the same. –  Daniel Wood Dec 29 '09 at 11:44

In the case of the Wi-Fi settings, I suspect what they've done is made the "Forget this Network" button, the "IP Address" label, and the "DHCP/BootP/Static" segmented control all part of the table's header view. If you need to do this in the middle of your table (as opposed to at the top or bottom, for which you'd use the tableHeaderView and tableFooterView properties respectively), I'd suggest using the delegate methods -tableView:viewForHeaderInSection: with -tableView:heightForHeaderInSection, or the corresponding Footer variants. With any of those, you'd set up a custom view for that "section" of your table view (using either a clear background color or [UIColor groupTableBackgroundColor]), containing a label and a segmented control arranged so that they match up with the rest of the table sections.

share|improve this answer

Using the technique in this post to remove the background opacity of the UITableViewCell worked more easily for me to get only the UISegmentedControl to show in the table row.

share|improve this answer
This is the right way to do it - make the control's frame the same as the cell.contentView.bounds, set autoresizingMask to UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight, add the control as a subview of cell.contentView and set cell.backgroundView to a transparent UIView. –  Ben Lings Aug 23 '12 at 10:34

I've got slightly further with this. So far I've subclassed UITableViewCell. I created a nib with a UISegmentedControl in it and I set the UITableViewCell background alpha to 0. It still doesn't look quite right, but it's better than before.

share|improve this answer

My solution is to allow the segmented control to resize to fit, and to hide the table view's background in tableView:willDisplayCell:forRowAtIndexPath:.

This yields results identical to the "Settings.app > WiFi > Your Network > IP Address" Segmented Control without hard-coding any layout metrics:

    static NSString *CellIdentifier = @"Cell";

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {

    UISegmentedControl *control = [[UISegmentedControl alloc] initWithItems:[NSArray arrayWithObjects:@"One", @"Two", @"Three", nil]];
    control.segmentedControlStyle = UISegmentedControlStylePlain;
    control.autoresizingMask = (UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight);
    control.frame = cell.contentView.bounds;
    [cell.contentView addSubview:control];
    [control release];

    cell.backgroundView.alpha = 0.0;
share|improve this answer

The trick appears to be to size the UISegmentedControl to the size of the backgroundView of the control, not the contentView. I was able to do it programmatically by doing the following:

    // Size to cover the entire background
    self.contentView.frame = self.backgroundView.frame;
    self.myControl.frame = self.contentView.bounds;

Note that if you are using an accessory, you need to account for the accessoryView as well.

The reason is that the view hierarchy is as follows:

  • self (the UITableViewCell or subclass)
    • backgroundView
    • contentView
      • (your controls go here)
    • accessoryView

In portrait layout, the backgroundView's frame is {{9, 0}, {302, 44}}, whereas the contentView's frame is slightly smaller, at {{10, 1}, {300, 42}}. This gives the cell its 1px "border" when the table style is grouped. You have to resize both the contentView and your control to get the appropriate size.

(NOTE: While Apple actually has several examples of a UISegmentedControl in the UICatalog sample code project in the SDK, they effectively "cheat" by using a UIViewController and setting the main view's background color to the table background color.)

share|improve this answer
The segmented-control sample code you refer to uses a generic view, not a table view, to display its controls; it looks like a grouped table view only because it uses that background color. –  Noah Witherspoon Dec 25 '09 at 0:53
Dug into it and found the right answer. Kept a reference to my old answer so others are aware that Apple's example doesn't actually do that. –  Chris R. Donnelly Dec 28 '09 at 20:05

Your Answer


