Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
385 views
in Technique[技术] by (71.8m points)

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

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

Google Place tableviewcell Design

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

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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,

enter image description here

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...