How to draw a custom rounded rectangle in SWIFT?

Question

I'm trying to draw a shape shown on the upper image programmatically.

This shape has custom rounded corners.

view.layer.cornerRadius = some value less than half diameter

This didn't work. Setting cornerRadius draws straight lines on every side(as seen on the bottom image) but the shape I'm trying to draw has no straight lines at all and it's not an oval.

I also tried below without luck. This code just draws an oval.

var path = UIBezierPath(ovalIn: CGRect(x: 000, y: 000, width: 000, height: 000))

I believe this can not be done by setting cornerRadius.

There should be something more.

I have no idea what class should I use and how.

Please anybody give me some direction.

Thanks!

Possible duplicate of [How to draw a simple rounded rect in swift (rounded corners)](https://stackoverflow.com/questions/30368739/how-to-draw-a-simple-rounded-rect-in-swift-rounded-corners) — Sina, Jul 30 '19 at 06:11
No it's not. The shape I'm trying to draw is not a rectangle neither an oval. This can not be done by setting cornerRadius. — Vincent Gigandet, Jul 30 '19 at 06:37
howdy @VincentGigandet - what you're looking for is quadratics. In fact you're stumbled on to a very interesting issue: https://stackoverflow.com/questions/49219992/actually-duplicate-extract-apples-continuous-corners-for-iphonex — Fattie, Aug 06 '19 at 10:32
note that this: https://stackoverflow.com/a/56439911/294884 is possibly what you want — Fattie, Aug 06 '19 at 10:33
secondly, this incorrect answer https://stackoverflow.com/a/49334551/294884 has the exact sample code you probably want. also just search on "addQuadCurveToPoint" for many examples. Good luck! — Fattie, Aug 06 '19 at 10:34

score 1 · Accepted Answer · answered Aug 16 '19 at 08:14

I accomplished this by drawing a quadratic.

let dimention: CGFloat = some value

let path = UIBezierPath()
    path.move(to: CGPoint(x: dimension/2, y: 0))
    path.addQuadCurve(to: CGPoint(x: dimension, y: dimension/2),
                      controlPoint: CGPoint(x: dimension, y: 0))
    path.addQuadCurve(to: CGPoint(x: dimension/2, y: dimension),
                      controlPoint: CGPoint(x: dimension, y: dimension))
    path.addQuadCurve(to: CGPoint(x: 0, y: dimension/2),
                      controlPoint: CGPoint(x: 0, y: dimension))
    path.addQuadCurve(to: CGPoint(x: dimension/2, y: 0),
                      controlPoint: CGPoint(x: 0, y: 0))
    path.close()

    let shapeLayer = CAShapeLayer()
    shapeLayer.path = path.cgPath
    shapeLayer.strokeColor = UIColor.blue.cgColor
    shapeLayer.fillColor = UIColor.clear.cgColor
    shapeLayer.lineWidth = 1.0
    shapeLayer.position = CGPoint(x: 0, y: 0)

    self.someView.layer.addSublayer(shapeLayer)

score -1 · Answer 2 · answered Jul 30 '19 at 06:06

-1

You have to add cipsToBounds to the code for getting the image with given cornerRadius.
Try the blow codes ,

 view.layer.cornerRadius = some value 
 view.clipsToBounds = true

answered Jul 30 '19 at 06:06

Angel F Syrus

1,984
8
23
43

I believe clipsToBounds has nothing to do with this issue. Thanks anyways. – Vincent Gigandet Jul 30 '19 at 06:38

score -1 · Answer 3 · answered Jul 30 '19 at 06:08

-1

You can use following path for your custom shape

  let path =  UIBezierPath(roundedRect: CGRect(x: 0, y: 0, width: 150, height: 150), byRoundingCorners: .allCorners, cornerRadii: CGSize(width: 8, height: 8))

You can change width and height according to your requirements and UI

answered Jul 30 '19 at 06:08

Prashant Tukadiya

15,838
4
62
98

This is same as setting cornerRadius which makes straight lines – Vincent Gigandet Jul 30 '19 at 06:27

score -1 · Answer 4 · edited Jul 30 '19 at 08:47

class RoundView: UIView {
    var roundCorner: UIRectCorner? = nil
    var roundRadius:CGFloat = 0

    override init(frame: CGRect) {
        super.init(frame: frame)
        commonInit()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        commonInit()
    }

    private func commonInit() {
        Bundle.main.loadNibNamed(“nib name”, owner: self, options: nil))
        addSubview(contentView)
        contentView.frame = self.bounds
        contentView.autoresizingMask = [.flexibleHeight, .flexibleWidth]
        isUserInteractionEnabled = true
    }

    override func layoutSubviews() {
        super.layoutSubviews()
        if roundCorner != nil {
            // self.roundCorners([.topRight, .bottomLeft, .bottomRight], radius: 15)
            self.roundCorners(roundCorner!, radius: roundRadius)
        }
    }
}

What's difference between setting roundRadius and this code? I see both has same effect. — Vincent Gigandet, Jul 30 '19 at 06:42

How to draw a custom rounded rectangle in SWIFT?

4 Answers4