UITableViewCell how to add solid border with rounded corners

Question

I want to add a table with a solid border with 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.

That definitely does something. If I also remove the self.layer.border, then I get single rounded solid border. The only issue is the cell content vanishes and now I only have the border — trees_are_great
– trees_are_great, Commented May 27, 2020 at 13:39
I've made a custom cell and I'm calling it from the layoutsubviews method, so cell view — trees_are_great
– trees_are_great, Commented May 27, 2020 at 13:41
You can answer your own question with the updated code. You figured it out yourself, so no need for others to get the credit. — koen
– koen, Commented May 27, 2020 at 15:21

trees_are_great · Accepted Answer · 2020-06-05 10:27:09Z

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.

Actually, have you tried the border settings directly on the main layer, so skip the maskLayer? So, layer.cornerRadius = 10, etc.
Yes, it would give a corner radius on the top and bottom cell, but the cells in-between were together and did not have rounded corners.

trees_are_great · Accepted Answer · 2020-05-27 15:43:34Z

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

Thanks, interesting solution. I have managed to get it working with a CALayer now (see comments).
@trees_are_great Cool! yeah, I saw some solutions. Didn't know you could do it like that too... Interesting
The issue with the CALayer, is I'm struggling to get the cell colour to be different from the background layer, so that light grey background is showing as white. I might give your solution a go after all.
Nice. Okay, awakeFromNib can also be a case. Is CALayer more smooth? Huh, okay. Maybe I will look into this as well. Good to hear this at least worked for you.
Wait, it makes sense CALayer is more smooth. At the moment you have to make 2 views have rounded corners and they have to match each other perfectly, which is indeed hard to do...

Collectives™ on Stack Overflow

UITableViewCell how to add solid border with rounded corners

2 Answers 2

2 Comments

8 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

8 Comments

Linked

Related