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

Posted 2023-02-27

【中文标题】UITableViewCell如何添加带圆角的实心边框

【英文标题】：UITableViewCell how to add solid border with rounded corners

【发布时间】：2020-05-27 13:29:18

【问题描述】：

我想添加一个带有圆角实线边框的表格： 。

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

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

我看过this question，它谈到了改变边框颜色，但它没有像上图那样给单元格一个圆形边框。只有顶部和底部有圆形边框。

【问题讨论】：

试试self.layer.addSublayer(maskLayer)

那肯定有作用。如果我还删除了 self.layer.border，那么我会得到单个圆形实心边框。唯一的问题是单元格内容消失了，现在我只有边框

您是在单元格视图还是单元格内容视图中执行此操作？

我已经制作了一个自定义单元格，我从 layoutsubviews 方法中调用它，所以单元格视图

您可以使用更新后的代码回答您自己的问题。你自己想出来的，所以不需要别人得到功劳。

【参考方案1】：

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

 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's answer 的圆角更平滑。

【讨论】：

其实你有没有试过直接在主层设置边框，所以跳过maskLayer？所以，layer.cornerRadius = 10，等等。

是的，它会在顶部和底部单元格上给出一个圆角半径，但中间的单元格是在一起的并且没有圆角。

【参考方案2】：

我不确定如何使用 CALayer() 来实现。我总是用 2 个 UIViews 制作一个单元格。 1个“背景视图”在另一个后面。这也将创建一个边框。据我所知，这将产生相同的结果。这可能是您要找的东西吗？

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

【讨论】：

谢谢，有趣的解决方案。我现在已经设法让它与 CALayer 一起工作（参见 cmets）。

@trees_are_great 酷！是的，我看到了一些解决方案。不知道你也可以那样做...有趣

CALayer 的问题是我正在努力使单元格颜色与背景层不同，以便浅灰色背景显示为白色。毕竟我可能会给你的解决方案。

不错。好的，awakeFromNib 也可以是一个案例。 CALayer是不是更流畅？嗯，好吧。也许我也会调查一下。很高兴听到这至少对你有用。

等等，有道理CALayer更流畅。目前你必须让两个视图有圆角并且它们必须完美匹配，这确实很难做到......