【问题标题】:Smooth Rounded UIView Corners, Bottom Only平滑圆角 UIView 角,仅底部
【发布时间】: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 行移到底部。

标签: ios swift uiview calayer uibezierpath


【解决方案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]

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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2012-05-06
    • 1970-01-01
    • 2019-02-17
    • 1970-01-01
    • 1970-01-01
    • 2014-01-12
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多