Two buttons on a single UITableView row

The way an original Contacts app on a iPhone displays two buttons may be a private API matter, but there is a littke trick to make your UITableViewCell subclass look the same way.

The problem is in a default round-cornered look of grouped UITableView—everything we put in our cell will be embedded in a white rectangle, so we need to found a way to mask it with a default lined-blue background.

All we need to do is embed all our UITableViewCell contents in a single custom view that will fill entire cell size, then assign it’s background color to a patter of vertical blue lines and inset it’s frame by 3 pixels outwards so it will cover the default white background of our UITableViewCell.

So, fire up Interface Builder and create a custom nib file for out UITableViewCell subclass. Before laying out two button views, create an empty UIView and make it the size that will fill entire cell area. I used a magenta color to make it look more opaque.

You will not need any outlets to make this trick work, so let’s move to Xcode and create .m and .h files for our subclass. As long as we used an Interface Builder to instantiate our UITableViewCell, we will put all adjustment code inside the -(void)awakeFromNib method:

- (void) awakeFromNib {
  UIView *contentView = [[[self contentView] subviews] objectAtIndex:0];

  contentView.backgroundColor = [UIColor groupTableViewBackgroundColor];
  contentView.frame = CGRectInset(contentView.frame, -3, -3);

  for ( UIView *subview in [contentView subviews] )
  {
    CGRect newSubviewFrame = subview.frame;
    newSubviewFrame.origin.x += 3;
    subview.frame = newSubviewFrame;
  }
}

So all we need to do is to change a backgroundColor of our view to a pattern of blue vertical lines, which is supplied for us by the one of the predefined color methods of UIColor.

Then we adjust frame of our view by 3 pixels outside in each direction, so it will cover rounded corners of grouped UITableView row. And since we moved an origin of our content view by (3, 3), we need to adjust each of our subview’s origins in an opposite direction to make it contents look centered.

P.S. Please note that this hack may not be possible if clipping of subviews weren’t disabled in UIKit by default for a performance reasons.