How to make - Hybrid cornerRadius - Swift 5 - ios

Question

I hope all are doing well.
Here's the following, I need to make the cornerRadius like the one in the example, but in the icon, he doesn't change at all and in a Carousel, he only makes the bottom corners, not the top ones.
What can I do accomplish this? My corners don't have the same radius on all sides.
Icon Corners Example
I have a function for the cornerRadius:
func roundCorners(_ corners: UIRectCorner, radius: CGFloat) {
let path = UIBezierPath(roundedRect: self.bounds,
byRoundingCorners: corners,
cornerRadii: CGSize(width: radius, height: radius))
let mask = CAShapeLayer()
mask.path = path.cgPath
self.layer.mask = mask
}
In my icon I make the call this way:
bigIconContentView.roundCorners([.topRight, .bottomLeft], radius: 30)
bigIconContentView.roundCorners([.topLeft], radius: 10)
And in my Carousel I'm calling this way:
bStoreImage.roundCorners([.topLeft, .topRight], radius: 20)
beaconsContentView.roundCorners([.topLeft, .topRight], radius: 20)
beaconsContentView.roundCorners([.bottomLeft, .bottomRight], radius: 7)
What I'm doing wrong? What can I do to make them work and make these sides with different Radius?
I can make two roundCorners call to the same element but with different attributes? Like I did in my examples?
Thanks for your help!

Answer 1

Let's focus on roundCorners(_ corners: radius:)
func roundCorners(_ corners: UIRectCorner, radius: CGFloat) {
let someNewMask = somethingNew(corners, radius: radius)
self.layer.mask = someNewMask
}
You are doing:
bigIconContentView.roundCorners([.topRight, .bottomLeft], radius: 30)
bigIconContentView.roundCorners([.topLeft], radius: 10)
Which in the ends, is doing this:
let someNewMask1 = somethingNew([.topRight, .bottomLeft], radius: 30)
bigIconContentView.mask = someNewMask1
let someNewMask2 = somethingNew([. topLeft], radius: 10)
bigIconContentView.mask = someNewMask2
So you are doing:
bigIconContentView.mask = someNewMask1
bigIconContentView.mask = someNewMask2
You see the issue? You are overriding bigIconContentView mask with a new one each time (the last one called).
You have to apply the different corners all together (there is nothing complicated in corner radius)
extension UIView {
func roundCornersRadii(topLeft: CGFloat = 0, topRight: CGFloat = 0, bottomLeft: CGFloat = 0, bottomRight: CGFloat = 0) {
let path = UIBezierPath()
path.move(to: CGPoint(x: topLeft, y: 0))
path.addLine(to: CGPoint(x: bounds.width - topRight, y: 0))
path.addArc(withCenter: CGPoint(x: bounds.width - topRight, y: topRight),
radius: topRight,
startAngle: -CGFloat.pi/2.0,
endAngle: 0,
clockwise: true)
path.addLine(to: CGPoint(x: bounds.width, y: bounds.width - bottomRight))
path.addArc(withCenter: CGPoint(x: bounds.width - bottomRight, y: bounds.height - bottomRight),
radius: bottomRight,
startAngle: 0,
endAngle: CGFloat.pi/2.0,
clockwise: true)
path.addLine(to: CGPoint(x: bottomRight, y: bounds.height))
path.addArc(withCenter: CGPoint(x: bottomLeft, y: bounds.height - bottomLeft),
radius: bottomLeft,
startAngle: CGFloat.pi/2.0,
endAngle: CGFloat.pi,
clockwise: true)
path.addLine(to: CGPoint(x: 0, y: topLeft))
path.addArc(withCenter: CGPoint(x: topLeft, y: topLeft),
radius: topLeft,
startAngle: CGFloat.pi,
endAngle: CGFloat.pi/2.0,
clockwise: true)
path.close()
let mask = CAShapeLayer()
mask.path = path.cgPath
self.layer.mask = mask
}
}
Adding sample test:
let superView = UIView(frame: CGRect(x: 0, y: 0, width: 400, height: 400))
let subview = UIView(frame: CGRect(x: 100, y: 100, width: 200, height: 200))
superView.backgroundColor = .red
subview.backgroundColor = .blue
subview.roundCornersRadii(topLeft: 20, topRight: 30, bottomLeft: 40, bottomRight: 50)
superView.addSubview(subview)
or in your case:
let superView = UIView(frame: CGRect(x: 0, y: 0, width: 400, height: 400))
let subview = UIView(frame: CGRect(x: 100, y: 100, width: 200, height: 200))
superView.backgroundColor = .red
subview.backgroundColor = .blue
subview.roundCornersRadii(topLeft: 20, topRight: 30, bottomLeft: 40, bottomRight: 50)
subview.roundCornersRadii(topLeft: 10, topRight: 30, bottomLeft: 30)
superView.addSubview(subview)