How to create a UITableView with margins, rounded corners and shadow?

Question

I am developing an app in Swift. In my Storyboard, I have a UITableViewController. I would like to apply left and right margins to my table as well as rounded corners on first/last cells and a shadow all around the tableview.

I have tried many options, but I cannot find a proper solution. Right now, I am using a subclass of UITableViewCell where I override the frame to make it narrower. I can have the rounded corners but I cannot have the shadow.

Here is my code for my sublcass:

class NarrowTableCell: UITableViewCell {

  override var frame: CGRect {
      get {
          return super.frame
      }
      set (newFrame) {
          var f = newFrame
          f.origin.x = 10
          if let w = superview?.frame.size.width {
              f.size.width = w - 20
          } else {
              f.size.width = newFrame.size.width - 20
          }
          super.frame = f
          super.layer.masksToBounds = true
      }
  }

  func applyNoCorners() {
      round(corners: [.topLeft, .topRight, .bottomLeft, .bottomRight], radius: 0)
  }

  func applyCorners() {
      round(corners: [.topLeft, .topRight, .bottomLeft, .bottomRight], radius: 5)
  }

  func applyTopCorners() {
      round(corners: [.topLeft, .topRight], radius: 5)
  }

  func applyBottomCorners() {
      round(corners: [ .bottomLeft, .bottomRight], radius: 5)
  }
}

I am doing most of my app in Storyboard and I would like to be able to achieve the same results for both dynamic and static tableviews.

Another issue I have is that when the cell frame is changed, the label I have inside is not properly updated. That means, its contente is truncated.

Here is what I would like to do:

Try this > https://stackoverflow.com/questions/37645408/uitableviewcell-rounded-corners-and-shadow — Sunil Targe, Aug 21 '18 at 10:22
Look on this ->https://stackoverflow.com/questions/3316424/cant-add-a-corner-radius-and-a-shadow — Diva, Aug 21 '18 at 10:51

score 1 · Answer 1 · edited Nov 28 '21 at 13:04

I have used extension to UIView to manage both rounded corners AND drop shadow. As the variables are @IBInspectable, everything can be set directly in the storyboard!

import UIKit

extension UIView {

    @IBInspectable var shadow: Bool {
        get {
            return layer.shadowOpacity > 0.0
        }
        set {
            if newValue == true {
                self.addShadow()
            }
        }
    }

    @IBInspectable var cornerRadius: CGFloat {
        get {
            return self.layer.cornerRadius
        }
        set {
            self.layer.cornerRadius = newValue

            // Don't touch the masksToBound property if a shadow is needed in addition to the cornerRadius
            if shadow == false {
                self.layer.masksToBounds = true
            }
        }
    }


    func addShadow(shadowColor: CGColor = UIColor.black.cgColor,
               shadowOffset: CGSize = CGSize(width: 1.0, height: 2.0),
               shadowOpacity: Float = 0.4,
               shadowRadius: CGFloat = 3.0) {
        layer.shadowColor = shadowColor
        layer.shadowOffset = shadowOffset
        layer.shadowOpacity = shadowOpacity
        layer.shadowRadius = shadowRadius
    }
}

From story board you on or off shadow effects and give corner radius to view. You can give any view shadow or radius.

Hi. Thanks for the code. I tried it but it doesn't do what I want. If you look at my screenshot, I need the top corners of the first cell and bottom corners of the last cell to be rounded. If I set the cornerRadius to the UITableView, I don't see nothing. Same for the shadow. — Nasedo47, Aug 21 '18 at 11:26
extension UIView { func roundCorners(_ corners: UIRectCorner, radius: CGFloat) { let path = UIBezierPath(roundedRect: self.bounds, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius)) let mask = CAShapeLayer() mask.path = path.cgPath self.layer.mask = mask } } — Amit gupta, Aug 21 '18 at 11:31
use it like this I have use it for making my image round corners from just top ldft or bottom left in cell cell.homeCellImg.roundCorners([.bottomLeft, .topLeft], radius: 10.0) — Amit gupta, Aug 21 '18 at 11:33

How to create a UITableView with margins, rounded corners and shadow?

1 Answers1