BYLBadgeView 1.0.1

You want to add pod 'BYLBadgeView', '~> 1.0' similar to the following to your Podfile:

target 'MyApp' do
  pod 'BYLBadgeView', '~> 1.0'
end

Then run a pod install inside your terminal, or from CocoaPods.app.

Alternatively to give it a test run, run the command:

pod try BYLBadgeView

BYLBadgeView 1.0.1

By
James Richard

A badge view using TextKit APIs for rendering the badge that supports animations and UIAppearance.

Requirements

BYLBadgeView requires iOS7+.

Installation

Using cocoapods:

pod 'BYLBadgeView'

To use without cocoapods copy the files under the Sources directory into your project.

Usage

To use instantate the view and add it as a subview to the view you'd like to be placed within. The badge view calculates an intrinsict content size, and I recommend just adding enough constraints to position it where you'd like. Here's how to add it to a button and place it in the top-right corner of the button:

BYLBadgeView *badgeView = [[BYLBadgeView alloc] initWithBadge:20];
badgeView.translatesAutoresizingMaskIntoConstraints = NO;
badgeView.opaque = NO;
badgeView.layer.zPosition = 10; // UIButton subviews are added later so we need to ensure this one is in front
[self.badgedButton addSubview:badgeView]; // Created from IB
[self.badgedButton addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"[badgeView]|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(badgeView)]];
[self.badgedButton addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[badgeView]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(badgeView)]];

Setting Badge Text Color

You can set the badge text color with both the badgeTextColor property or by setting the NSForegroundColorAttributeName key in the badgeTextAttributes. The badgeTextColor property exists to allow implicit animations. More on animations below.

UIAppearance

The BYLBadgeView supports the UIAppearance proxy for badgeRadius, badgeTextAttributes, badgeBackgroundColor, and badgeTextColor. Here's an example applying style to all badges contained within a UIButton:

[[BYLBadgeView appearanceWhenContainedIn:[UIButton class], nil] setBadgeBackgroundColor:[UIColor redColor]];
[[BYLBadgeView appearanceWhenContainedIn:[UIButton class], nil] setBadgeTextColor:[UIColor purpleColor]];
[[BYLBadgeView appearanceWhenContainedIn:[UIButton class], nil] setBadgeRadius:10.0f];
NSDictionary *titleAttributes = @{NSFontAttributeName: [UIFont fontWithDescriptor:[UIFontDescriptor preferredFontDescriptorWithTextStyle:UIFontTextStyleSubheadline] size:8.0f]};
[[BYLBadgeView appearanceWhenContainedIn:[UIButton class], nil] setBadgeTextAttributes:titleAttributes];

Animations

The BYLBadgeView supports implicit animations on the badge, badgeTextColor, badgeBackgroundColor, and badgeRadius properties. Here's an example:

self.animatingBadgeView.badge = 500; // self.animatingBadgeView was previously instantated
[UIView animateWithDuration:5.0f delay:0.0f options:UIViewAnimationOptionCurveEaseOut | UIViewAnimationOptionRepeat animations:^{
  self.animatingBadgeView.badge = 1000;
  self.animatingBadgeView.badgeTextColor = [UIColor blueColor];
  self.animatingBadgeView.badgeBackgroundColor = [UIColor orangeColor];
} completion:nil];

Caveats

-[NSString drawInRect:withAttributes:] behaves oddly with the NSBackgroundColorAttributeName key set on the textAttributes dictionary. Because of that, if that key exists in the badgeTextAttributes dictionary it will be removed when set.