使用约束约束时按钮的角不保持圆角

Posted 2023-03-15

【中文标题】使用约束约束时按钮的角不保持圆角

【英文标题】：Corners of button not staying rounded when using constraints constraints

【发布时间】：2017-05-05 04:25:41

【问题描述】：

我在堆栈视图中有两个按钮。我使用了 UIButton 的扩展来圆外角。这适用于我在情节提要中设计的 7Plus，但是一旦我在模拟器中运行较小的设备尺寸，它就会停止工作，我只能在任一按钮的左侧而不是右侧圆角。有什么想法吗？

在 7Plus 上

在 7

这些是我正在使用的扩展

extension CGSize
    init(_ width:CGFloat,_ height:CGFloat) 
        self.init(width:width,height:height)
    

extension UIButton
    func roundOneSide(topCorner: UIRectCorner, bottomCorner: UIRectCorner)
        let maskPAth1 = UIBezierPath(roundedRect: self.bounds,
                                 byRoundingCorners: [topCorner , bottomCorner],
                                 cornerRadii:CGSize(6.0, 6.0))
        let maskLayer1 = CAShapeLayer()
        maskLayer1.frame = self.bounds
        maskLayer1.path = maskPAth1.cgPath
        self.layer.mask = maskLayer1
    

我也尝试了以下代码，但无济于事。只有当约束起作用时，它才能成功地绕过左边的角落。

    let maskLayer = CAShapeLayer()
    maskLayer.path = UIBezierPath(roundedRect: view.bounds, byRoundingCorners: [.topLeft, .bottomRight], cornerRadii: CGSize(width: 6, height: 6)).cgPath
    facebookBtn.layer.mask = maskLayer
    facebookBtn.layer.masksToBounds = true

【问题讨论】：

这种类型的按钮设计可以使用分段控制。它易于使用和自定义。请看一下。

在这个问题中，您希望为两个按钮提供外角，以便您可以使用其默认的cornerRadius 属性来提供。

@JeckyModi 他不能给出默认的圆角半径，否则按钮会在它们相互接触的地方拐弯。

他扩展了 topCorner 和 bottomCorner 以便它可以根据需要为按钮提供角落？ @dahiya_boy

@dahiya_boy 我真的建议他在这种情况下使用段控制

【参考方案1】：

使用你像生涩所说的那样使用段控制或 试试下面的代码：

// 登录按钮

   UIBezierPath *cornersPathLeft = [UIBezierPath bezierPathWithRoundedRect:buttonLogin.bounds  byRoundingCorners:(UIRectCornerBottomLeft|
UIRectCornerTopLeft) cornerRadii:CGSizeMake(5, 5)];

    //Create a new layer to use as a mask

    CAShapeLayer *maskLayerLeft = [CAShapeLayer layer];

    // Set the path of the layer 

    maskLayerLeft.path = cornersPathLeft.CGPath;
    buttonLogin.layer.mask = maskLayerLeft;

//对于FB按钮

    UIBezierPath *cornersPathRight = [UIBezierPath bezierPathWithRoundedRect:buttonFB.bounds  byRoundingCorners:(UIRectCornerTopRight|
UIRectCornerBottomRight) cornerRadii:CGSizeMake(5, 5)];

    CAShapeLayer *maskLayerRight = [CAShapeLayer layer];
    maskLayerRight.path = cornersPathRight.CGPath;
    buttonFB.layer.mask = maskLayerRight;

注意：

做maskToBounds = true 它允许对图层产生影响。

-

MaskToBounds 和 ClipsToBounds 的区别

MaskToBounds

层的任何延伸到其边界之外的子层都将被剪裁到这些边界。在这种情况下，将图层视为其子图层的窗口；窗口边缘之外的任何东西都将不可见。当masksToBounds = NO 时，不会发生剪辑。

当此属性的值为true 时，Core Animation 会创建一个隐式剪切蒙版，该蒙版匹配图层的边界并包含任何角半径效果。如果还指定了掩码属性的值，则将两个掩码相乘得到最终掩码值。

ClipsToBounds

clipsToBounds 的用例更多用于部分位于主视图之外的子视图。

例如，我在其父（矩形）UIView 的边缘有一个（圆形）子视图。如果将 clipsToBounds 设置为 YES，则只会显示一半的圆/子视图。如果设置为 NO，则会显示整个圆圈。刚好遇到这个，想分享一下

结论

MaskToBounds 适用于任何视图的子层。就像这里 OP 在按钮上添加了层，但它没有产生效果。我的意思是层的边界不正确。

ClipToBounds 应用于任何视图的 subVies。假设您有一个视图（例如 viewBG），并且现在您添加了另一个视图（例如，upperView），现在您不想看到上视图以查看 viewBG 之外。 ViewUpper 总是在其父视图内。所以在这种情况下，你必须设置 clipstobounds。

实践经验

在 swift 中试试下面的代码

let viewBG : UIView = UIView(frame: CGRect(x: 100, y: 100, width: 100, height: 100))
        viewBG.backgroundColor = UIColor.lightGray

        self.view.addSubview(viewBG)

        let viewUpper : UIView = UIView(frame: CGRect(x: -50, y: -50, width: 100, height: 100))
        viewUpper.backgroundColor = UIColor.blue
        viewBG.addSubview(viewUpper)

输出 1. 当我完成viewBG.clipsToBounds = false

当我完成viewBG.clipsToBounds = true

【讨论】：

我在 masktobounds 和 cliptobounds 之间没有区别。能不能简单解释一下？

@JeckyModi 检查我的答案解释。如果您仍有问题，请告诉我。

感谢您的解释

@JeckyModi 上面我添加了实际的例子后你可以更好地理解。

这个cliptobound我理解得很好，因为我用过，但是什么时候用masktobound你能举个例子吗？

【参考方案2】：

你需要在storyboard中开启按钮的clipToBound属性；

【参考方案3】：

您可以尝试一种不同的、非常简单的方法来弯曲 UIButton 或 Label 的角。

点击按钮 点击身份检查器 然后在标识部分添加一个属性 密钥路径是layer.cornerRadius 设置为数字 最后给个值，值越高，边角越圆。

【讨论】：

我知道这种方法，但我只尝试绕过 2 个角。

对不起

【参考方案4】：

嗯，这很容易解决。我只需要在 viewWillLayoutSubviews 中圆角。

override func viewWillLayoutSubviews() 
    super.viewWillLayoutSubviews()
    loginBtn.roundOneSide(topCorner: .topLeft, bottomCorner: .bottomLeft)
    facebookBtn.roundOneSide(topCorner: .topRight, bottomCorner: .bottomRight)

【讨论】：

我建议你改用 viewDidLayoutSubviews()。