UITableViewCell / UISegmentedControl border issue

Question

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?

Solution 1

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];

Solution 2

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.

Solution 3

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.

Solution 4

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.

Solution 5

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:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *CellIdentifier = @"Cell";

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleValue1 reuseIdentifier:CellIdentifier] autorelease];
    }

    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];
}

- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath {
    cell.backgroundView.alpha = 0.0;
}

View more solutions

Comments

[Noah Witherspoon]

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.

[Chris R. Donnelly]

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]

@daniel-wood: The numbers you gave are right for portrait mode, but won't work in landscape. Voting you up for that :)

[Daniel Wood]

Ah, true. I guess you could do tableView.frame.size.width - 18.0f for the width. All the other values should be the same.

[Ben Lings]

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.