Clever Geek Handbook

Create a circular TableViewCell indicator like Apple Mail app

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

enter sdsdsdsd description

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 almost jagged. I'm not sure if this is because I am using the CAShapeLayer. I would like to know if there are any better alternatives.

Also can I make it a cell object and not just a layer so that I can call it using cell.Indicator?

+3


source to share


2 answers 


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


+3


source


Take a UIView

. Subclass drawRect:

and draw UIBezierPath

inside it.

Something like:



@implementation BlueCircleView

- (void)drawRect:(CGRect)rect
{
    [[UIColor blueColor] setFill];
    // Assuming your view as the size of the dot you want.
    // Otherwise, simply pass another rect.
    UIBezierPath *round = [UIBezierPath bezierPathWithOvalInRect:self.bounds];
    [round fill];
}

@end
+3


source






More articles:


All Articles