{"id":103,"date":"2012-02-18T06:30:53","date_gmt":"2012-02-18T06:30:53","guid":{"rendered":"http:\/\/ootips.org\/yonat\/?p=103"},"modified":"2016-04-17T07:27:09","modified_gmt":"2016-04-17T07:27:09","slug":"badge-label","status":"publish","type":"post","link":"https:\/\/ootips.org\/yonat\/badge-label\/","title":{"rendered":"BadgeLabel &#8211; Simple UILabel-based Badge"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/ootips.org\/yonat\/wp-content\/uploads\/2012\/02\/badge.png\" alt=\"\" title=\"badge\" width=\"368\" height=\"385\" class=\"alignright size-full wp-image-144\" srcset=\"https:\/\/ootips.org\/yonat\/wp-content\/uploads\/2012\/02\/badge.png 368w, https:\/\/ootips.org\/yonat\/wp-content\/uploads\/2012\/02\/badge-286x300.png 286w\" sizes=\"auto, (max-width: 368px) 100vw, 368px\" \/>I know, I know &#8211; not another badge class! But the thing is, the other badges laying around the net all seem overly complicated and too inflexible. So yes, I wrote another badge class. Luckily, it was really easy because I used the built-in capabilities of iOS, and it turned out very flexible and powerful, because, well, I used the built-in capabilities of iOS. No manual CoreGraphics drawing code, just automatic CALayer-s magic.<\/p>\n<p>The basic badge is a <tt>UILabel<\/tt> whose underlying <tt>CALayer<\/tt> has a <tt>backgroundColor<\/tt> and <tt>cornerRadius<\/tt>:<\/p>\n<pre class=\"lang:objc decode:true \">\r\n#import <QuartzCore\/QuartzCore.h> \/\/ don't forget!\r\n\/\/ ...\r\nUILabel *badge = [[UILabel alloc] init];\r\nbadge.layer.backgroundColor = [UIColor blueColor].CGColor;\r\nbadge.layer.cornerRadius = badge.bounds.size.height \/ 2;\r\n<\/pre>\n<p>Basically, that&#8217;s it. There are some adjustments needed to make sure the label leaves enough space around the text for the rounded corners, but that&#8217;s easily done with short overrides of <tt>textRectForBounds<\/tt> and <tt>drawTextInRect<\/tt>.<\/p>\n<p>The nice thing is how easy it is to make app-icon style badges, with border, shadow and gloss:<\/p>\n<ul>\n<li>For <b>border<\/b> simply set the layer&#8217;s <tt>borderColor<\/tt> and <tt>borderWidth<\/tt>.<\/li>\n<li>For <b>shadow<\/b> set the layer&#8217;s <tt>shadowOpacity<\/tt>, <tt>shadowColor<\/tt> and <tt>shadowOffset<\/tt>.<\/li>\n<li>For <b>gloss<\/b> add a <tt>CAGradientLayer<\/tt> sublayer.<\/li>\n<\/ul>\n<p>It&#8217;s that simple. And even better: animatable!<\/p>\n<p>You can get the code, along with a Mail.app style <tt>BadgeTableViewCell<\/tt> and a demo app, at GitHub: <a href=\"http:\/\/github.com\/yonat\/BadgeLabel\">http:\/\/github.com\/yonat\/BadgeLabel<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>I know, I know &#8211; not another badge class! But the thing is, the other badges laying around the net all seem overly complicated and too inflexible. So yes, I wrote another badge class. Luckily, it was really easy because &hellip; <a href=\"https:\/\/ootips.org\/yonat\/badge-label\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false},"version":2}},"categories":[1],"tags":[18,7,6,13,14],"class_list":["post-103","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-cocoa","tag-ios","tag-iphone","tag-objective-c","tag-sample-code"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p2aEUP-1F","_links":{"self":[{"href":"https:\/\/ootips.org\/yonat\/wp-json\/wp\/v2\/posts\/103","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ootips.org\/yonat\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ootips.org\/yonat\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ootips.org\/yonat\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ootips.org\/yonat\/wp-json\/wp\/v2\/comments?post=103"}],"version-history":[{"count":10,"href":"https:\/\/ootips.org\/yonat\/wp-json\/wp\/v2\/posts\/103\/revisions"}],"predecessor-version":[{"id":251,"href":"https:\/\/ootips.org\/yonat\/wp-json\/wp\/v2\/posts\/103\/revisions\/251"}],"wp:attachment":[{"href":"https:\/\/ootips.org\/yonat\/wp-json\/wp\/v2\/media?parent=103"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ootips.org\/yonat\/wp-json\/wp\/v2\/categories?post=103"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ootips.org\/yonat\/wp-json\/wp\/v2\/tags?post=103"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}