objective c - IOS tableview design block-like cells with margins and spacing

Question

I am new to IOS development and currently working on an APP involving the use of uitableviews.

The default uitableview design are clustered with no spacing and margins between the cells.

I am looking for a way to design the tableview with vertical spacing between the cells, as well as the Horizontal spacing between the edge and the cell. I would also like to add a complete border around the tableviewcell with top, bottom, left, and right.

It is like the google-plus design

I am been looking over stackoverflow for a day and there are some hacks and workaround. I just want the best possible approach.

Answer 1

If you set the table view's separator style to "none" and place any subviews of your cell away from the edges of the cell, it will appear as if there is space between the cells. If you want a border around your content (but not the actual edge of the cell to maintain the illusion of space between the cells), you can add a sublayer to the cell with a border that is inset from the edges of the cell. So, in a UITableViewCell subclass, you could have something like this,

- (void)didMoveToSuperview {
    CALayer *insetLayer = [CALayer new];
    insetLayer.frame = CGRectInset(self.layer.bounds, 20, 20);
    insetLayer.borderWidth = 2;
    insetLayer.borderColor = [UIColor blueColor].CGColor;
    insetLayer.cornerRadius = 4;
    [self.layer addSublayer:insetLayer];
}

With a label and button centered vertically in my cell, it looks like this,

Those cells are actually abutting, but the inset border gives the illusion of spacing between them.