CODEWITHSUNDEEP
iosswiftuitableviewswift4
trees_are_great
trees_are_great

Reputation: 3911

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.

Upvotes: 0

Views: 730

Answers (2)

trees_are_great
trees_are_great

Reputation: 3911

If you don't mind each cell being in a new section, then it is possible like this: 

 func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 1
    }

    func numberOfSections(in tableView: UITableView) -> Int {
        return 3
    }


    func tableView(_ tableView: UITableView, heightForFooterInSection section: Int) -> CGFloat {
         return 15
     }

    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return 100 ;
    }

Then in your cellForRowAt method, get the sectionIndex with indexPath.section. You can then add the corner radius and border to the cell itself by clicking on the cell and using the attributes inspector.

Option 2 - not using a new section for each cell
The following code can be called from the custom cell's awakeFromNib method. 

  let maskLayer = CALayer()
  maskLayer.cornerRadius = 10  
  maskLayer.backgroundColor = UIColor.clear.cgColor
  maskLayer.borderColor = UIColor.red.cgColor
  maskLayer.borderWidth = 5
  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.insertSublayer(maskLayer, below: self.layer)

The limitation of this answer is that you can't get the cell background to be a different color from the table background (well, at least I couldn't). It does have smoother rounded corners than that of MuSoundiX's answer.

Upvotes: 1

MuSoundiX
MuSoundiX

Reputation: 88

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")
   }
}

Upvotes: 0

Related Questions