Shifting placement of rows in a grouped UITableView

Question

The Contacts app on the iPhone seems to use a grouped UITableView with what looks like an image outside the table and rows of text adjacent to the image are shifted. Like this:

How do you go about creating a layout like this with the first three rows placed at a different X position than the other rows?

I tried modifying the cell's frame.origin.x and frame.size by overriding the initWithStyle:reuseIdentifier method inside my custom UITableViewCell class but no luck.

@implementation MyCustomCell

- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
    if (self = [super initWithStyle:style reuseIdentifier:reuseIdentifier])
    {
        CGSize offset = CGSizeMake(30, 30);         
        CGRect originalFrame = self.frame;

        CGFloat newX = originalFrame.origin.x + offset.width;
        CGFloat newWidth = originalFrame.size.width - offset.width;

        CGRect newFrame = CGRectMake(newX, originalFrame.origin.y,
                                     newWidth, originalFrame.size.height);      
        self.frame = newFrame;      
    }

    return self;
}
@end

Answer 1

Try implementing tableView:indentationLevelForRowAtIndexPath: on your table view delegate.

Answer 2

Not sure if this is the kosher way to do it but instead of changing the frame dimensions in the init method, override MyCustomCell's 'layoutSubviews' instead.

This worked for me:

- (void)layoutSubviews
{
    [super layoutSubviews];

    CGRect origFrame = self.frame;      
    CGSize offset = CGSizeMake(30, 30);

    CGFloat newX = originalFrame.origin.x + offset.width;
    CGFloat newWidth = originalFrame.size.width - offset.width;

    CGRect newFrame = CGRectMake(newX, originalFrame.origin.y,
                                 newWidth, originalFrame.size.height);    
    self.frame = newFrame;
}