UITableViewCell 如何添加带圆角的实心边框

Question

我想添加带有圆角实心边框的 table：。

我试过使用 CALayer，可以调用它制作单元格并添加圆角：

  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

我试过添加边框，但是圆角看起来很乱。如何添加圆角和实线边框？

我看过，其中讨论了更改边框颜色，但它并没有像上图那样为单元格提供圆形边框。只有顶部和底部有圆形边框。

Answer 1

我不确定如何使用 CALayer() 来完成。我总是用 2 个 UIView 创建一个单元格。 1 "background view" 落后于其他。这也将创建一个边框。据我所知，这将产生相同的结果。这可能是您要找的东西吗？

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

Answer 2

如果你不介意每个单元格都在一个新的部分，那么可以这样：

 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 ;
    }

然后在您的 cellForRowAt 方法中，使用 indexPath.section 获取 sectionIndex。然后，您可以通过单击单元格并使用属性检查器将圆角半径和边框添加到单元格本身。

选项 2 - 不为每个单元格使用新部分
可以从自定义单元格的 awakeFromNib 方法调用以下代码。

  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)

此答案的局限性在于您无法将单元格背景设为与 table 背景不同的颜色（好吧，至少我不能）。它确实有比 .

更平滑的圆角

UITableViewCell 如何添加带圆角的实心边框

UITableViewCell how to add solid border with rounded corners

ios

swift

uitableview

swift4