UITableViewCell Circle Bullet Point

Question

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

selection view

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

selected view

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

score 5 · Accepted Answer · answered Jul 28 '14 at 22:05

5

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.

answered Jul 28 '14 at 22:05

rmaddy

314,917
42
532
579

Even though I have used rounak's solution in many places (with an additional border that seems invisible), I prefer this solution. More elegant, in my opinion. Exactly the same thing that hit me first. – n00bProgrammer Jul 28 '14 at 22:18
Thanks! That's a very simple solution. Does the `NSFontAttributeName` part determine the bullet size? Or how can I make it bigger? – Benck Jul 28 '14 at 22:24
The font applies to the whole string. Try different bullet characters such as ∙ or • or ・ or ● or ⬤ or ⚫︎. – rmaddy Jul 28 '14 at 22:27
I guess I should have stated that you could apply two difference fonts to the different parts of the string just like the colors. But using a bigger bullet is easier if it fits your need. – rmaddy Jul 28 '14 at 22:32

score 1 · Answer 2 · answered Jul 28 '14 at 21:52

1

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.

answered Jul 28 '14 at 21:52

rounak

9,217
3
42
59

How will this work for the 2nd cell where the color and calendar name need to appear in the `detailTextLabel` of the cell? – rmaddy Jul 28 '14 at 22:07
Maybe you need a table view cell subclass where you can layout your own views based on your needs – rounak Jul 29 '14 at 05:08

UITableViewCell Circle Bullet Point

2 Answers2