Shifting placement of rows in a grouped UITableView

The Contacts app on the iPhone seems to use a grouped UIT开发者_JS百科ableView 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

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

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