-2

Customized UITableViewCell

How can I customize my UITableViewCell to get this appearance ? I don't want to use a custom UIView for my UITableViewCell?

Annabelle Sykes
  • 263
  • 6
  • 17
Rukshan
  • 7,902
  • 6
  • 43
  • 61
  • Why without using a custom UIView? – Fogmeister Jun 08 '16 at 13:02
  • This may help http://stackoverflow.com/questions/37645408/uitableviewcell-rounded-corners-and-shadow/37645582#37645582 – Uma_Shanker_Tiwari Jun 08 '16 at 13:07
  • @Fogmeister someone has edited the original question :) I never said I didn't want to use a custom UIView. I just wanted to know if its possible at all, without a custom view. – Rukshan Jun 09 '16 at 06:04
  • Well, not entirely sure what you mean by a custom UIView. There is no way to "turn this on" with a boolean or anything. You will need to create the UI from UIViews and stuff. The easiest way (like I said in my answer) is to create a UITableViewCell subclass. – Fogmeister Jun 09 '16 at 09:53
  • @Fogmeister I already have a UITableViewCell subclass. What I wanted to know was, achieve this look programmatically as much as possible, without using a view that contains a png or jpeg. So far I was able to achieve this look except the shadows. Should be able to get shadows as well with QuartzCore – Rukshan Jun 09 '16 at 10:45
  • 1
    You could do. Just create a uiview and set the layers shadows and border radius etc... Prepare to take a hit to performance though. It is much much slower than using an image and I'd advise against it. The scrolling of he table view will be noticeably stuttery. – Fogmeister Jun 09 '16 at 11:30

4 Answers4

4

You will need to create a UITableViewCell subclass for this.

The spacing between the cells isn't really spacing. It is fake.

Each cell has a shadow image that has some of the background around it.

You'll need to add a UIView that then has a shadow around it and is inset from the edge of the actual cell. Then add the contents of the cell to that.

Fogmeister
  • 76,236
  • 42
  • 207
  • 306
0

It's all about how you set up your UITableViewCell's XIB really.

Add a UIView as a child view of the contentView in the UITableViewCell. Set the trailing, leading, top and bottom spacing of this UIView to it's parent view (contentView) to 5 or whatever value you desire. Set the background colour of the contentView as Clear Colour. Set the backgroundColour of your UITableView to the desired colour with the background colour of the contentView being white.

You can set the cornerRadius of the layer of the UIView to 5.0 to achieve the cornered effect as in your image

genaks
  • 757
  • 2
  • 10
  • 24
0

Add this inside UITableViewCell subclass :

override func layoutSubviews() {
    contentView.frame = UIEdgeInsetsInsetRect(contentView.frame, UIEdgeInsetsMake(10, 10, 10, 10))
}
Suraj Sukale
  • 1,778
  • 1
  • 12
  • 19
0

Create a subclass of UITableViewCell.

Add a View and place required UIElements to its contentView.

Make UIEgdeInset to how much you want.

Custom view color should be lighter than the cell then it will be look like what you want.

Santo
  • 1,611
  • 3
  • 17
  • 37