UITableViewCell: rounded corners and shadow

This question comes at a good time! I literally JUST solved this same issue myself.

1. Create a <code>UIView</code> (let's refer to it as <code>mainBackground</code>) inside your cell's Content View. This will contain all of your cell's content. Position it and apply necessary constraints in the Storyboard.
2. Create another <code>UIView</code>. This one will be the one with the shadow (let's refer to it as <code>shadowLayer</code>). Position it exactly as you did <code>mainBackground</code>, but behind it, and apply the same constraints.
3. Now you should be able to set the rounded corners and the shadows as follows:


cell.mainBackground.layer.cornerRadius = 8
cell.mainBackground.layer.masksToBounds = true

cell.shadowLayer.layer.masksToBounds = false
cell.shadowLayer.layer.shadowOffset = CGSizeMake(0, 0)
cell.shadowLayer.layer.shadowColor = UIColor.blackColor().CGColor
cell.shadowLayer.layer.shadowOpacity = 0.23
cell.shadowLayer.layer.shadowRadius = 4

However, the problem here is: calculating the shadow for every single cell is a slow task. You'll notice some serious lag when you scroll through your table. The best way to fix this is to define a <code>UIBezierPath</code> for the shadow, then rasterize it. So you may want to do this:

cell.shadowLayer.layer.shadowPath = UIBezierPath(roundedRect: cell.shadowLayer.bounds, byRoundingCorners: .AllCorners, cornerRadii: CGSize(width: 8, height: 8)).CGPath
cell.shadowLayer.layer.shouldRasterize = true
cell.shadowLayer.layer.rasterizationScale = UIScreen.mainScreen().scale

But this creates a new problem! The shape of the <code>UIBezierPath</code> depends on <code>shadowLayer</code>'s bounds, but the bounds are not properly set by the time <code>cellForRowAtIndexPath</code> is called. So, you need to adjust the <code>shadowPath</code> based on <code>shadowLayer</code>'s bounds. The best way to do this is to subclass <code>UIView</code>, and add a property observer to the bounds property. Then set all the properties for the shadow in <code>didSet</code>. Remember to change the class of your <code>shadowLayer</code> in the storyboard to match your new subclass.

class ShadowView: UIView {
override var bounds: CGRect {
didSet {
setupShadow()
}
}

private func setupShadow() {
self.layer.cornerRadius = 8
self.layer.shadowOffset = CGSize(width: 0, height: 3)
self.layer.shadowRadius = 3
self.layer.shadowOpacity = 0.3
self.layer.shadowPath = UIBezierPath(roundedRect: self.bounds, byRoundingCorners: .allCorners, cornerRadii: CGSize(width: 8, height: 8)).cgPath
self.layer.shouldRasterize = true
self.layer.rasterizationScale = UIScreen.main.scale
}
}

It works without additional views!

override func awakeFromNib() {
super.awakeFromNib()

layer.masksToBounds = false
layer.cornerRadius = Constants.cornerRadius
}

public func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
...
let layer = cell.layer
layer.shadowOffset = CGSize(width: 0, height: 1)
layer.shadowRadius = 2
layer.shadowColor = UIColor.lightGray.cgColor
layer.shadowOpacity = 0.2
layer.frame = cell.frame
cell.tagLabel.text = tagItems[indexPath.row].text

return cell
}

Try this, it worked for me.

cell.contentView.layer.cornerRadius = 5.0
cell.contentView.layer.borderColor = UIColor.gray.withAlphaComponent(0.5).cgColor
cell.contentView.layer.borderWidth = 0.5


let border = CALayer()
let width = CGFloat(2.0)
border.borderColor = UIColor.darkGray.cgColor
border.frame = CGRect(x: 0, y: cell.contentView.frame.size.height - width, width: cell.contentView.frame.size.width, height: cell.contentView.frame.size.height)

border.borderWidth = width
cell.contentView.layer.addSublayer(border)
cell.contentView.layer.masksToBounds = true
cell.contentView.clipsToBounds = true

I have achieved the same thing using following code.But you have place it in layoutSubviews() method of your TableViewCell subclass.

self.contentView.backgroundColor = [UIColor whiteColor];
self.contentView.layer.cornerRadius = 5;
self.contentView.layer.shadowOffset = CGSizeMake(1, 0);
self.contentView.layer.shadowColor = [[UIColor blackColor] CGColor];
self.contentView.layer.shadowRadius = 5;
self.contentView.layer.shadowOpacity = .25;
CGRect shadowFrame = self.contentView.layer.bounds;
CGPathRef shadowPath = [UIBezierPath bezierPathWithRect:shadowFrame].CGPath;
self.contentView.layer.shadowPath = shadowPath;

To create shadow and corner for cell you need only one backView. See my example below.

[![enter image description here][1]][1]


You have to add `backView` and set `leading`, `trailing`, `top`, `bottom` constraints equal to `Content view`.
Put you content to `backView` with appropriate constraints, but be sure **your content not over cove**r `backView`.

After that in your cell initialisation code add these lines:

override func awakeFromNib() {
super.awakeFromNib()

backgroundColor = Colors.colorClear

self.backView.layer.borderWidth = 1
self.backView.layer.cornerRadius = 3
self.backView.layer.borderColor = Colors.colorClear.cgColor
self.backView.layer.masksToBounds = true

self.layer.shadowOpacity = 0.18
self.layer.shadowOffset = CGSize(width: 0, height: 2)
self.layer.shadowRadius = 2
self.layer.shadowColor = Colors.colorBlack.cgColor
self.layer.masksToBounds = false
}
Don't forget to create IBOutlet for `Back View`.

And here the result:

[![enter image description here][2]][2]


[1]:

[2]:

cell.layer.cornerRadius = 10
cell.layer.masksToBounds = true

One alternative approach you can try, take a `UIView` in `UITableViewCell`. Set background color of `UITableViewCell` to clear color. Now, you can make round corners and add shadow on `UIVIew`. This will appear as if cell width is reduced and user can scroll along the edges of the tableView.