13

How do I add a badge to UITableViewCell, like this:

alt text http://img17.imageshack.us/img17/9974/img0001ac9.png

Should I simply add a subview with a text and label on it?

Eric Galluzzo
  • 3,191
  • 1
  • 20
  • 20
user82383
  • 879
  • 3
  • 11
  • 31
  • [Here](http://www.spaulus.com/2010/09/create-a-custom-iphone-ipad-badge/?lang=en) is an alternativ of my own. Enjoy! – Sascha Feb 25 '11 at 10:11

5 Answers5

6

Here's a swift enhancement to @POF's answer. We don't need as many subviews and we can use math to support N digits, not just 1-3:

func setDiscountBadge(count: Int) {
  let size: CGFloat = 26
  let digits = CGFloat( count("\(number)") ) // digits in the label
  let width = max(size, 0.7 * size * digits) // perfect circle is smallest allowed
  let badge = UILabel(frame: CGRectMake(0, 0, width, size))
  badge.text = "\(number)"
  badge.layer.cornerRadius = size / 2
  badge.layer.masksToBounds = true
  badge.textAlignment = .Center
  badge.textColor = UIColor.whiteColor()
  badge.backgroundColor = cfg.UIColors.brand
  YOURCELL.accessoryView = badge // !! change this line
}

And the result (I use a brand color, but yours can be any color):

uilabel badge

SimplGy
  • 20,079
  • 15
  • 107
  • 144
2

As for me the simplest way is to use cell.accessoryView. Please look into my code how I did it: 

UIImageView * commentsViewBG = [[UIImageView alloc] initWithImage: [UIImage imageNamed: @"counter1.png"]];
commentsViewBG.frame = CGRectMake(
    commentsViewBG.frame.origin.x,
    commentsViewBG.frame.origin.y, 30, 20);


UILabel *commentsCount;
if (commentsArray.totalCount < 10)
    commentsCount = [[UILabel alloc]initWithFrame:CGRectMake(10, -10, 40, 40)];
else if (commentsArray.totalCount < 100)
    commentsCount = [[UILabel alloc]initWithFrame:CGRectMake(5, -10, 40, 40)];
else if (commentsArray.totalCount < 1000)
{
    commentsViewBG.frame = CGRectMake(
        commentsViewBG.frame.origin.x,
        commentsViewBG.frame.origin.y, 40, 20);
    commentsCount = [[UILabel alloc]initWithFrame:CGRectMake(5, -10, 40, 40)];
}
commentsCount.text = [NSString stringWithFormat:@"%ld",(long)commentsArray.totalCount];
commentsCount.textColor = [UIColor whiteColor];
commentsCount.backgroundColor = [UIColor clearColor];
[commentsViewBG addSubview:commentsCount];
cell.accessoryView = commentsViewBG;

And my result:

enter image description here

Hope it helps.

Keith OYS
  • 2,285
  • 5
  • 32
  • 38
POF_Andrew_POF
  • 103
  • 7
  • Please don't post the exact same answer to multiple questions: it's either not a good fit for all or the questions are duplicates which should be flagged/closed as such. – Bill the Lizard Jan 12 '14 at 15:28
  • If it makes it easier to find, I don't see much problem. Sometimes duplicate questions show up first on Google, and even if they are flagged, they can sometimes have better answers. – Samin Jul 08 '14 at 13:56
2

TDBadgedCell is a pretty good choice. Highly customizable for your needs.

Keith OYS
  • 2,285
  • 5
  • 32
  • 38
1

Yes, there is currently no supported way of adding a badge to a UITableView Cell. In this example, it is most likely a custom subview which contains an image and UILabel.

Matthew Bischoff
  • 1,043
  • 11
  • 27
1

I'd like to add another alternative to create customized Badges. CustomBadge is a little bit more powerful. It's open and for free.

SomethingDark
  • 13,229
  • 5
  • 50
  • 55
ckteebe
  • 11
  • 1