Create a circular TableViewCell indicator like the Apple Mail app

Question

I am trying to create a circular indicator for my TableViewCell similar to the one in the Apple Mail app when the email is marked as unread.

I have the following code:

var Indicator = CAShapeLayer()
var IndicatorSize: CGFloat = 10

// standard blue color
let blueColor = UIColor(red: 0, green: 122.0/255.0, blue:1.0, alpha:1)

// create circular CAShapeLayer
Indicator.bounds = CGRect(x:0, y:0, width:IndicatorSize, height:IndicatorSize)
Indicator.position = CGPoint(x: 10, y: 10)
Indicator.cornerRadius = Indicator.frame.size.width/2

// add as cell sublayer
cell.layer.addSublayer(Indicator)

While this seems to do the job, the circle doesn't feel as smooth as the one in the mail app, the corners look pixelated almost. I'm not sure if this is because I am using CAShapeLayer. I would like to know if there are better alternatives.

Also can I make this an object of the cell as opposed to just a layer so that I can call it using cell.Indicator?

Answer 1

class CircleView: UIView {
    override func drawRect(rect: CGRect) {
        let context = UIGraphicsGetCurrentContext()
        self.tintColor.setFill()
        CGContextFillEllipseInRect(context, rect)
    }
}