Search code examples
iosswiftuitableviewswift4

UITableViewCell how to add solid border with rounded corners


I want to add a table with a solid border with rounded corners: table with each cell having a solid border and rounded corners.

I have tried using a CALayer, which can be called making the cell and adds rounded corners:

  let maskLayer = CALayer()
  maskLayer.cornerRadius = 10   //if you want round edges
  maskLayer.backgroundColor = UIColor.white.cgColor
  maskLayer.borderColor = UIColor.red.cgColor
  maskLayer.borderWidth = 5
  self.layer.borderColor = UIColor.red.cgColor // no change
  self.layer.borderWidth = 5 // no change
  maskLayer.frame = CGRect(x: self.bounds.origin.x, y: self.bounds.origin.y, width: self.bounds.width, height: self.bounds.height).insetBy(dx: horizontalPadding/2, dy: verticalPadding/2)
  self.layer.mask = maskLayer

I have tried adding borders, but the rounded corners look very messy. How would I add rounded corners and a solid border?

I have looked at this question which talks about changing border colours, but it does not give the cells a rounded border like in the image above. Only the top and bottom have a rounded border.


Solution

  • I'm not sure how to do it with CALayer(). I Always make a cell with 2 UIViews. 1 "background view" behind the other. This will also create a border. This will have the same result as far as I'm aware. Could this be what you're looking for?

    class TableViewCell: UITableViewCell {
    
    var viewBackground = UIView()
    var viewBackgroundBorder = UIView()
    
        override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
            backgroundColor = .clear
            viewBackground.backgroundColor = UIColor.white
            viewBackgroundBorder.backgroundColor = UIColor.red
            viewBackgroundBorder.layer.cornerRadius = 10
            viewBackground.layer.cornerRadius = 9 
    
            addSubview(viewBackgroundBorder)
            addSubview(viewBackground)
    
            viewBackgroundBorder.translatesAutoresizingMaskIntoConstraints = false
            viewBackground.translatesAutoresizingMaskIntoConstraints = false
    
            let constraints = [
                viewBackgroundBorder.topAnchor.constraint(equalTo: topAnchor, constant: 0),
                viewBackgroundBorder.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 0),
                viewBackgroundBorder.trailingAnchor.constraint(equalTo: trailingAnchor, constant: 0),
                viewBackgroundBorder.bottomAnchor.constraint(equalTo: bottomAnchor, constant: 0),
    
                viewBackground.topAnchor.constraint(equalTo: topAnchor, constant: 2),
                viewBackground.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 2),
                viewBackground.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -2),
                viewBackground.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -2)]
    
                NSLayoutConstraint.activate(constraints) 
        }
    
       required init?(coder: NSCoder) {
            fatalError("init(coder:) has not been implemented")
       }
    }