UITableViewCell: rounded corners and shadow

Question

I\'m changing the width of a UITableViewCell so that the cell is smaller but the user can still scroll along the edges of the tableview.

override func layout         


        

Answer 1

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

Answer 2

If it's useful, I have been using the code below to achieve this, which only needs to be run in cellForRowAt.

First, add an extension to UITableViewCell to enable you to create a shadow and rounded corners on a TableViewCell:

extension UITableViewCell {
    func addShadow(backgroundColor: UIColor = .white, cornerRadius: CGFloat = 12, shadowRadius: CGFloat = 5, shadowOpacity: Float = 0.1, shadowPathInset: (dx: CGFloat, dy: CGFloat), shadowPathOffset: (dx: CGFloat, dy: CGFloat)) {
        layer.cornerRadius = cornerRadius
        layer.masksToBounds = true
        layer.shadowColor = UIColor.black.cgColor
        layer.shadowOffset = CGSize(width: 0.0, height: 0.0)
        layer.shadowRadius = shadowRadius
        layer.shadowOpacity = shadowOpacity
        layer.shadowPath = UIBezierPath(roundedRect: bounds.insetBy(dx: shadowPathInset.dx, dy: shadowPathInset.dy).offsetBy(dx: shadowPathOffset.dx, dy: shadowPathOffset.dy), byRoundingCorners: .allCorners, cornerRadii: CGSize(width: cornerRadius, height: cornerRadius)).cgPath
        layer.shouldRasterize = true
        layer.rasterizationScale = UIScreen.main.scale
        
        let whiteBackgroundView = UIView()
        whiteBackgroundView.backgroundColor = backgroundColor
        whiteBackgroundView.layer.cornerRadius = cornerRadius
        whiteBackgroundView.layer.masksToBounds = true
        whiteBackgroundView.clipsToBounds = false
        
        whiteBackgroundView.frame = bounds.insetBy(dx: shadowPathInset.dx, dy: shadowPathInset.dy)
        insertSubview(whiteBackgroundView, at: 0)
    }
}

Then just reference this in cellForRowAt:

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "YourCellIdentifier", for: indexPath) as! YourCellClass

    cell.addShadow(backgroundColor: .white, cornerRadius: 13, shadowRadius: 5, shadowOpacity: 0.1, shadowPathInset: (dx: 16, dy: 6), shadowPathOffset: (dx: 0, dy: 2))
 
    // Or if you are happy with the default values in your extension, just use this instead:
    // cell.addShadow()

    return cell
}

Here is the result for me:

Screenshot

Answer 3

Never use UIBezierPath , bezierPathWithRect:shadowFrame etc as its really heavy and draws a layer on top of the views and would require to reload the table view again to make sure the cells are rendering in the right way and sometimes even reloading might not help. Instead use a section header and footer which has rounded edges as required and also which is inside the storyboard which will make the scrolling and loading of table view very smooth without any rendering issues ( sometimes called missing cells and appears on scroll )

refer here how to set the different integer values for rounded corners here : Setting masked corners in Interface Builder

Just use the above values for your section header and footer.

Answer 4

create a UIVIEW inside cell's content view "backView" and add an outlet of backView to cell class then add these lines of code to awakeFromNib()

self.backView.layer.cornerRadius = 28
self.backView.clipsToBounds = true 

the corner radius depends on your design... the add these code to cellForRowAt function

cell.layer.shadowColor = UIColor.black.cgColor
cell.layer.shadowOffset = CGSize(width: 0, height: 0)
cell.layer.shadowOpacity = 0.6

and set the cell view background color to clear color

Don't forget to add a little space between 4 sides of the cell and the backView you just added inside cell contentView in StoryBoard

hope you liked it

Answer 5

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

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 cover 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:

Answer 6

    cell.layer.cornerRadius = 0.25
    cell.layer.borderWidth = 0
    cell.layer.shadowColor = UIColor.black.cgColor
    cell.layer.shadowOffset = CGSize(width: 0, height: 0)
    cell.layer.shadowRadius = 5
    cell.layer.shadowOpacity = 0.1
    cell.layer.masksToBounds = false