Search code examples
iosswiftuiviewdrawrounded-corners

iOS rounding UIView corners with draw enabled


When draw method is commented out inside the below code the view shows up circular, but when it is uncommented out the view shows up as a rectangle again. I could comment out the body of draw to have it just be an empty method, but the view would still show up as a rectangle.

I've tried moving the cornerRadius line to the end of draw, beginning of draw, and end of drawInnerCircle but to no avail. I was wondering if there was still a way to make the view rounded with draw method enabled?

import UIKit
class IconView: UIView {

    override init(frame:CGRect) {
        super.init(frame : frame)
        self.backgroundColor = UIColor(red: 47/255, green: 49/255, blue: 53/255, alpha: 1.0)
        self.layer.cornerRadius = self.frame.size.height / 2.0
    }
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }

    override func draw(_ rect: CGRect) {
        drawInnerCircle()
    }

    internal func drawInnerCircle() -> () {
        let halfSize:CGFloat = min( self.frame.size.width/2, bounds.size.height/2)
        let desiredLineWidth:CGFloat = 1    // your desired value
        let circlePath = UIBezierPath(
            arcCenter: CGPoint(x:halfSize,y:halfSize),
            radius: CGFloat( halfSize - 3 ),
            startAngle: CGFloat(0),
            endAngle:CGFloat(M_PI * 2),
            clockwise: true)

        let shapeLayer = CAShapeLayer()
        shapeLayer.path = circlePath.cgPath
        shapeLayer.fillColor = UIColor.clear.cgColor
        shapeLayer.strokeColor = UIColor(red: 96/255, green: 99/255, blue: 105/255, alpha: 1.0).cgColor
        shapeLayer.lineWidth = desiredLineWidth
        layer.addSublayer(shapeLayer)
    }
}

Solution

  • Add the following:

    self.layer.masksToBounds = true

    below the line:

    self.layer.cornerRadius = self.frame.size.height / 2.0

    By the way there are some problem described by the above comments.