CODEWITHSUNDEEP
iosswiftrounded-cornersswift3
DS.
DS.

Reputation: 3004

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

Upvotes: 2

Views: 741

Answers (2)

ZGski
ZGski

Reputation: 2538

  1. Your btnCancel.layer.mask should be set to the yellow view.
  2. You need to add btnCancel as a sublayer of of yellow view's parent.

Example (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

NOTE:

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

Upvotes: 2

DS.
DS.

Reputation: 3004

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

Upvotes: 0

Related Questions