UITableViewCell Circle Bullet Point

Question

I've been trying to implement colorful circle bullet points like in the iOS Calendar app.

I'd like to have cells with the circles in front of the textLabel like the image above.

And I'd also like to have the corresponding circle in front of the detailTextLabel like the image above.

I've tried to do this with an image inside a frame but it is always too big. Plus, the circles in the Calendar app don't appear to be in the imageView of the cell.

I've also tried drawing a circle with some code I found from another question. This code isn't working for me though. Here's code from my XYZCircleView.m file:

- (void)drawRect:(CGRect)rect
{
    // Drawing code
    CGContextRef context= UIGraphicsGetCurrentContext();

    CGContextSetFillColorWithColor(context, [UIColor redColor].CGColor);
    CGContextSetAlpha(context, 0.5);
    CGContextFillEllipseInRect(context, CGRectMake(0,0,self.frame.size.width,self.frame.size.height));

    CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor);
    //CGContextStrokeEllipseInRect(context, CGRectMake(0,0,self.frame.size.width,self.frame.size.height));
    CGContextStrokeEllipseInRect(context, CGRectMake(1, 1, self.frame.size.width - 2,    self.frame.size.height - 2));
}

And inside my cellForRow...:

CGRect positionFrame = CGRectMake(10,10,10,10);
XYZCircleView *circleView = [[XYZCircleView alloc] initWithFrame:positionFrame];
[cell.contentView addSubview:circleView];

How can this be done?

Thanks

Answer 1

Use a bullet character and use an attributed string so you can set the color of the bullet.

Something like this:

NSString *text = @"• Calendar";
NSDictionary *attributes = @{ NSFontAttributeName : [UIFont systemFontOfSize:15] };
NSMutableAttributedString *attrStr = [[NSMutableAttributedString alloc] initWithString:text attributes:attributes];
[attrStr addAttribute:NSForegroundColorAttributeName value:[UIColor redColor] range:NSMakeRange(0, 1)]; // color the bullet
[attrStr addAttribute:NSForegroundColorAttributeName value:[UIColor blackColor] range:NSMakeRange(1, attrStr.length - 1)]; // color the rest

cell.text.attributedText = attrStr;

You may need to use a different font or colors as needed.

Answer 2

Just try adding a square view as a subview to the cell and set its layer's cornerRadius property to make it into a circle.