69

Is it possible to add a standard-looking badge to a standard UIButton?

If it's not supported semi-natively, what would be the simplest way to achieve this?

Example image:

An iPhone UI button

laurent
  • 88,262
  • 77
  • 290
  • 428
ohadpr
  • 977
  • 1
  • 8
  • 16
  • For the record .. November 2013, thew freshest most recently supported package seems to be: https://github.com/jessesquires/JSCustomBadge it works perfectly with no problems. – Fattie Nov 21 '13 at 15:38
  • Having just posted that comment, I realised JSCustomBadge appears to work in Xcode5, not Xcode4. "CustomBadge" works perfectly in Xcode4 https://github.com/ckteebe/CustomBadge TBC both seem to work perfectly in Xcode5. Hope it helps someone. – Fattie Nov 21 '13 at 16:10
  • 1
    I just released a CocoaPod written in swift for iOS 8 that provides this functionality pretty much out of the box. It's still pretty early in development but I'd love to hear some feedback. Check it out at [https://github.com/johncosch/TIPBadgeManager](https://github.com/johncosch/TIPBadgeManager) – John Cosch Jul 01 '15 at 15:16

6 Answers6

78

Here's a VERY NICE class by Sascha Paulus called CustomBadge, that builds and renders custom badges using Core Graphics. They're just UIView subclasses, so you lay them out using their frame just like any other UIView subclass.

I've used this library many times and always been pleased with the results. Flexible, easy to use. Totally recommend it.

Chetan Shenoy
  • 843
  • 1
  • 10
  • 19
Dan Ray
  • 21,623
  • 6
  • 63
  • 87
  • 7
    There is also a cocoa pod for Custom Badge - http://cocoadocs.org/docsets/CustomBadge/2.0/Classes/CustomBadge.html – Nate Flink Aug 12 '13 at 16:19
7

You can check for several options here: CocoaControls Badges

Carlos Ricardo
  • 2,058
  • 25
  • 32
3

The class that Apple uses is _UIBadgeView (https://github.com/nst/iOS-Runtime-Headers/blob/master/Frameworks/UIKit.framework/_UIBadgeView.h), but of course, this class is private (note the underscore) and not documented.

Here's another class that implements this view with the same look and feel as Apple's while also allowing you to customize it: https://github.com/JaviSoto/JSBadgeView. The great thing about this one is that it lets you position the badge relative to another view automatically, in one of its corners.

Javier Soto
  • 4,840
  • 4
  • 26
  • 46
2

We have a badge view in Nimbus that's super easy to use and well documented:

NimbusBadge

NANNAV
  • 4,875
  • 4
  • 32
  • 50
featherless
  • 2,118
  • 19
  • 19
1

I don't know how this is done out of the box and I honestly doubt that Apple built that into the SDK.

Anyway, you could create a custom view with a button on it, add the background of the badge as a UIImageView and place a label on it to hold the badge count.

That's a quick solution, it might be better to create a custom subclass of UIButton and add your badge stuff as a subview

Björn Kaiser
  • 9,882
  • 4
  • 37
  • 57
  • 4
    Do *not* subclass UIButton - it doesn't work well, i.e. you only have a convenience class method for construction. Also, no need for the "container" view for the button. – Eiko Jan 18 '11 at 20:30
1

I'd go a similar way as @Björn Kaiser: Use the button as you like it, and then add a custom view with that badge as a subview to it - I've done it and it works well.

As for the view, you can draw it as you like. You can draw it manually or use CoreAnimation and let it make the main part, i.e. theBadge.layer.cornerRadius = ...; to give it a round shape, draw the text/number in drawRect: or add it as a label etc.

Eiko
  • 25,601
  • 15
  • 56
  • 71