使用约束约束时按钮的角不保持圆角
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()。以上是关于使用约束约束时按钮的角不保持圆角的主要内容,如果未能解决你的问题,请参考以下文章