按钮的圆角半径与下面的视图对齐

Question

SO 上有很多关于圆角的答案。我运行遇到的问题是我试图将按钮角与下方视图的圆角对齐。请看图片。黄色视图有 4 个角。我试图让关闭按钮在右上角四舍五入以与黄色视图的圆角对齐。我使用了下面的 Swift 3 代码，但按钮保持方形。谁能指出遗漏了什么？

viewRaised 为黄色视图

非常感谢！

let path = UIBezierPath(roundedRect: btnCancel.layer.bounds, byRoundingCorners:[.topRight, .bottomLeft], cornerRadii: CGSize(width: 10, height:  10))
let maskLayer = CAShapeLayer()
maskLayer.path = path.cgPath
btnCancel.layer.mask = maskLayer
btnCancel.layer.masksToBounds = true

self.viewRaised.layer.cornerRadius = 10
self.viewRaised.layer.masksToBounds = false
self.viewRaised.layer.shadowOffset = CGSize(width: 5, height: 10);
self.viewRaised.layer.shadowRadius = 10;
self.viewRaised.layer.shadowOpacity = 0.5;

更新：

有趣的是，相同的代码似乎有效，但只适用于左上角。见第二张图。

    self.viewRaised.layer.cornerRadius = 10
    self.viewRaised.layer.masksToBounds = false
    self.viewRaised.layer.shadowOffset = CGSize(width: 5, height: 10);
    self.viewRaised.layer.shadowRadius = 10;
    self.viewRaised.layer.shadowOpacity = 0.5;

    let path = UIBezierPath(roundedRect: btnCancel.layer.bounds, byRoundingCorners:[.allCorners], cornerRadii: CGSize(width: 10, height:  10))
    let maskLayer = CAShapeLayer()
    maskLayer.path = path.cgPath
    btnCancel.layer.mask = maskLayer

这很令人费解。我正在使用 XCode 版本 8.0 beta 6 (8S201h)

Answer 1

您的btnCancel.layer.mask 应设置为黄色视图。
您需要添加 btnCancel 作为 黄色视图的父视图 的子层。

示例（Swift 3.x）：

let yellowView = UIView(frame: CGRectMake(20.0, 20.0, 200.0, 200.0))
yellowView.backgroundColor = UIColor.yellowColor()
yellowView.layer.borderColor = UIColor.clearColor().CGColor
yellowView.layer.borderWidth = 1.0
yellowView.layer.cornerRadius = 10.0
self.view.addSubview(yellowView)  // Add yellowView to self's main view
    
let btnCancel = UIView(frame: CGRectMake(20.0, 20.0, 45.0, 45.0))
btnCancel.backgroundColor = UIColor.redColor()
btnCancel.layer.mask = yellowView.layer  // Set btnCancel.layer.mask to yellowView.layer
self.view.addSubview(btnCancel)  // Add btnCancel to self's main view, NOT yellowView

注意：

You don't need to enable clipsToBounds because you're setting a mask layer.

You Also don't need to create a new CAShapeLayer for the mask. Use yellowView's layer as the mask.

Swift 4.x :

let yellowView = UIView(frame: CGRect(x: 20.0, y: 20.0, width: 200.0, height: 200.0))
yellowView.backgroundColor = .yellow
yellowView.layer.borderColor = UIColor.clear.cgColor
yellowView.layer.borderWidth = 1.0
yellowView.layer.cornerRadius = 10.0
self.view.addSubview(yellowView)  // Add yellowView to self's main view

let btnCancel = UIView(frame: CGRect(x: 20.0, y: 20.0, width: 45.0, height: 45.0))
btnCancel.backgroundColor = .red
btnCancel.layer.mask = yellowView.layer  // Set btnCancel.layer.mask to yellowView.layer
self.view.addSubview(btnCancel)  // Add btnCancel to self's main view, NOT yellowView

Answer 2

我需要做的就是将其全部删除。但如果我只删除粗体线，它就会起作用。但是其余的行一次都不需要，因为取消按钮是黄色视图的子视图。

let path = UIBezierPath(roundedRect: btnCancel.layer.bounds, byRoundingCorners:[.topRight, .bottomLeft], cornerRadii: CGSize(width: 10, height:  10))
let maskLayer = CAShapeLayer()
maskLayer.path = path.cgPath
btnCancel.layer.mask = maskLayer

btnCancel.layer.masksToBounds = 真

按钮的圆角半径与下面的视图对齐

Corner radius for a button to align with a view below

ios

swift

rounded-corners

swift3