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

Posted

技术标签:

【中文标题】使用约束约束时按钮的角不保持圆角【英文标题】: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()。

以上是关于使用约束约束时按钮的角不保持圆角的主要内容,如果未能解决你的问题,请参考以下文章

Swift:按钮圆角打破约束

动画 UIView 的子视图在动画期间不保持约束

同时执行cornerRadius和约束动画

swift 自定义view VFL 设置约束冲突

如何允许自动调整UIButton的大小以满足间距约束

Swift 3 - 自定义 UIButton 半径删除约束?