首页 > 解决方案 > UITableViewCell如何添加带圆角的实心边框

问题描述

我想添加一个带有圆角实线边框的表格: 每个单元格都有实心边框和圆角的表格.

我尝试过使用 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

我试过添加边框,但圆角看起来很乱。我将如何添加圆角和实心边框?

我看过这个关于改变边框颜色的问题,但它并没有像上图那样给单元格一个圆形边框。只有顶部和底部有圆形边框。

标签: iosswiftuitableviewswift4

解决方案


如果您不介意每个单元格都在一个新部分中,那么可以这样:

 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)

这个答案的限制是你不能让单元格背景与表格背景的颜色不同(好吧,至少我不能)。它的圆角确实比MuSoundiX 的答案更平滑。


推荐阅读