CODEWITHSUNDEEP
iosswiftuiview
Nikesh Hyanju
Nikesh Hyanju

Reputation: 190

All four corner of a view having different radius

How do i design a UIView whose all 4 corners have different corner radius. So, UIView with its top right corner radius of 20, top left corner radius of 30, bottom left corner radius of 10 and bottom right corner radius of 20

VIEW HIERARCHY

I want to add different cornerRadius to Viw Container shown in image. using UIBEZIER method cuts off the share comment and like portion. viw Container is pinned to cell

Upvotes: 0

Views: 1122

Answers (1)

aleksmutlu
aleksmutlu

Reputation: 96

You can use this UIView extension. It will create and apply a mask layer according to your radius values.

extension UIView {
func applyRadiusMaskFor(topLeft: CGFloat = 0, bottomLeft: CGFloat = 0, bottomRight: CGFloat = 0, topRight: CGFloat = 0) {

    let path = UIBezierPath()
    path.move(to: CGPoint(x: bounds.width - topRight, y: 0))
    path.addLine(to: CGPoint(x: topLeft, y: 0))
    path.addQuadCurve(to: CGPoint(x: 0, y: topLeft), controlPoint: .zero)
    path.addLine(to: CGPoint(x: 0, y: bounds.height - bottomLeft))
    path.addQuadCurve(to: CGPoint(x: bottomLeft, y: bounds.height), controlPoint: CGPoint(x: 0, y: bounds.height))
    path.addLine(to: CGPoint(x: bounds.width - bottomRight, y: bounds.height))
    path.addQuadCurve(to: CGPoint(x: bounds.width, y: bounds.height - bottomRight), controlPoint: CGPoint(x: bounds.width, y: bounds.height))
    path.addLine(to: CGPoint(x: bounds.width, y: topRight))
    path.addQuadCurve(to: CGPoint(x: bounds.width - topRight, y: 0), controlPoint: CGPoint(x: bounds.width, y: 0))

    let shape = CAShapeLayer()
    shape.path = path.cgPath
    layer.mask = shape
}
}

Example usage: 

let view = UIView(frame: CGRect(x: 0, y: 0, width: 200, height: 200))
view.backgroundColor = .red
view.applyRadiusMaskFor(topLeft: 80, bottomLeft: 40, bottomRight: 30, topRight: 60)

Result: Radius applied image

Upvotes: 8

Related Questions