角落不是圆形的UILabel和UI按钮ios迅速

I am trying to round three corners of label and button by following this: rounded button

我试图通过以下方式围绕标签和按钮的三个角：圆形按钮

But the result is:

但结果是：

问题的形象

some corners of labels are rounding and some are not.Similarly its happening with button and width is exceeding and button going out of tableview.

标签的某些角落是圆形的，有些则不是。类似于按钮和宽度发生的情况超出了按钮并且超出了tableview。

this is the code of extension i am using:

这是我正在使用的扩展代码：

extension UIButton{
    func roundedButton(){
        let maskPAth1 = UIBezierPath(roundedRect: self.bounds,
                                     byRoundingCorners: [.topLeft, .bottomLeft, .bottomRight],
                                     cornerRadii:CGSize(width:8,height:8))
        let maskLayer1 = CAShapeLayer()
        maskLayer1.frame = self.bounds
        maskLayer1.masksToBounds=true
        maskLayer1.path = maskPAth1.cgPath
        self.layer.mask = maskLayer1

    }
}

extension UILabel{
    func roundedLabel(){
        let maskPAth1 = UIBezierPath(roundedRect: self.bounds,
                                     byRoundingCorners: [.topRight,.bottomRight,.bottomLeft],
                                     cornerRadii:CGSize(width:10,height:10))
        let maskLayer1 = CAShapeLayer()
        maskLayer1.frame = self.bounds
        maskLayer1.cornerRadius=5
         maskLayer1.masksToBounds=true
        maskLayer1.path = maskPAth1.cgPath
        self.layer.mask = maskLayer1

    }
}

I am calling these function in

我在调用这些函数

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {}

1 个解决方案

#1

That happens because bounds of these labels and buttons are most probably different when you call rounded...() methods and when they are presented in a table view.

发生这种情况是因为当您调用round ...（）方法以及它们在表视图中显示时，这些标签和按钮的边界很可能不同。

That's because the bounds value that you use to create the UIBezierPath is different from one that these views have after they are presented in the cell. Table view layouts a cell and if the CAShapeLayer you create exceeds its bounds, it gets "cut off".

这是因为用于创建UIBezierPath的边界值与这些视图在单元格中显示后的边界值不同。表视图布局一个单元格，如果您创建的CAShapeLayer超出其边界，它将被“切断”。

You should create a subclasses of UIButton and UILabel that would update the bezier path of their masks every time they layout.

您应该创建UIButton和UILabel的子类，每次布局时都会更新其掩码的贝塞尔路径。

class RoundedLabel: UILabel {

    override func layoutSubviews() {
        super.layoutSubviews()

        let maskPath = UIBezierPath(roundedRect: bounds,
                                    byRoundingCorners: [.topRight, .bottomRight, .bottomLeft],
                                    cornerRadii: CGSize(width: 10, height: 10))

        let maskLayer = CAShapeLayer()
        maskLayer.frame = bounds
        maskLayer.cornerRadius = 5
        maskLayer.masksToBounds = true
        maskLayer.path = maskPath.cgPath
        layer.mask = maskLayer
    }
}

As further optimization you could lazily initialize the mask layer (meaning it would be created when it's accessed for the first time) and only change it's frame and path in the layoutSubviews method.

作为进一步优化，您可以懒惰地初始化遮罩层（意味着它将在第一次访问时创建）并且仅在layoutSubviews方法中更改它的框架和路径。

class RoundedLabel: UILabel {

    private lazy var maskLayer: CAShapeLayer = {
        let maskLayer = CAShapeLayer()
        maskLayer.cornerRadius = 5
        maskLayer.masksToBounds = true
        self.layer.mask = maskLayer

        return maskLayer
    }()

    override func layoutSubviews() {
        super.layoutSubviews()

        let maskPath = UIBezierPath(roundedRect: bounds,
                                    byRoundingCorners: [.topRight, .bottomRight, .bottomLeft],
                                    cornerRadii: CGSize(width: 10, height: 10))

        maskLayer.path = maskPath.cgPath
        maskLayer.frame = bounds
    }
}

#1