平滑圆角 UIView 角，仅底部

Posted 2023-03-13

【中文标题】平滑圆角 UIView 角，仅底部

【英文标题】：Smooth Rounded UIView Corners, Bottom Only

【发布时间】：2017-07-11 15:37:35

【问题描述】：

这是我试图从我必须使用的模型中模仿的视图：

使用以下代码；

self.plusButton.layer.masksToBounds = true
let maskPathPlus = UIBezierPath(roundedRect: self.plusButton.bounds, byRoundingCorners: [.topRight, .topLeft], cornerRadii: CGSize(width: 4, height: 4))
let maskLayerPlus = CAShapeLayer()
maskLayerPlus.frame = self.plusButton.bounds
maskLayerPlus.path = maskPathPlus.cgPath
plusButton.layer.mask = maskLayerPlus

self.minusButton.layer.masksToBounds = true
self.minusButton.layer.borderColor = UIColor.init(colorLiteralRed: 0.2265625, green: 0.82421875, blue: 0.34765625, alpha: 1.0).cgColor
self.minusButton.layer.borderWidth = 1.0
let maskPathMinus = UIBezierPath(roundedRect: self.minusButton.bounds, byRoundingCorners: [.bottomLeft, .bottomRight], cornerRadii: CGSize(width: 4, height: 4))
let maskLayerMinus = CAShapeLayer()
maskLayerMinus.frame = self.minusButton.bounds
maskLayerMinus.path = maskPathMinus.cgPath
minusButton.layer.mask = maskLayerMinus

我能够做到这一点：

我能做些什么来平滑这些边缘，因为它们似乎只是圆化视图的外部边缘并剪裁边框。我不能做一个简单的 .cornerRadius 因为 ( - ) 的顶部和 ( + ) 的底部需要平方。

【问题讨论】：

按 self.minusButton.layer.borderColor 、 self.minusButton.layer.borderWidth 和 self.minusButton.layer.masksToBounds 的顺序将减号按钮顶部 3 行移到底部。

【参考方案1】：

您应该将 + 和 - 按钮放在另一个视图中，并将边框放在包含视图上。然后你可以使用cornerRadius属性，这对+的底部和-的顶部没有影响。

@IBOutlet weak var upDownButton: UIView! // Contains the plus and minus buttons, constraints in storyboard

self.upDownButton.layer.borderWidth = 1.0
self.upDownButton.layer.borderColor = UIColor.init(colorLiteralRed: 0.2265625, green: 0.82421875, blue: 0.34765625, alpha: 1.0).cgColor
self.upDownButton.layer.masksToBounds = true
self.upDownButton.layer.cornerRadius = 4.0

我使用约束在其容器内布置 +/- 按钮，并使用“等高”约束，乘数为 0.5。

最终结果将如下所示：

【讨论】：

看起来是这样做的。我只需要正确设置那些讨厌的布局约束。我尝试使用堆栈视图而不是普通视图，但它不起作用。谢谢你的回答。

几分钟后，我将分享我的故事板，这样您就可以看到我做了什么。

this 项目中的完整布局。不会永远可用:-)

【参考方案2】：

ios 11 让这一切变得更容易

在 iOS 11 中，我们有一个名为 CACornermask 的选项

let view = UIView()
view.clipsToBounds = true
view.layer.cornerRadius = 8
view.layer.maskedCorners = [.layerMaxXMaxYCorner, .layerMinXMaxYCorner]

现在我们可以指定需要遮罩的角。