Search code examples
iosswiftrounded-cornersswift3

Corner radius for a button to align with a view below

There are tons of answers on SO for rounding a particular corner. The issue I'm running into is I'm trying to align a button corner to a rounded corner of the view below. Please see the image. The yellow view is rounded in 4 corners. I'm trying to get the close button to round off at top right to align with the yellow view's round corner. I've used the Swift 3 code below, but the button stays square. Can anyone please point out what is missing?

viewRaised is the yellow view.

Many thanks!

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;

enter image description here

UPDATE:

Interesting thing is that the same code seems to be working but only for top left. See the second image.

    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

This is quite perplexing. I'm using XCode Version 8.0 beta 6 (8S201h)

enter image description here

Solution

  • All I needed to do was remove the whole of this. But it worked if I remove the bolded line only. But the rest of the lines were not needed once since Cancel Button was the subview of the yellow view.

    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