IOS 界面实现 badge小图标

思路：

首先根据文字，调用badgeImage方法，创建一个UIImage对象。

再根据UIImage对象的尺寸大小，构建一个UIImageView对象。

最后将UIImageView对象添加到需要显示的地方。

#define kDefaultBadgeTextColor [UIColor whiteColor]

#define kBadgeCornerRadius 10.0f
#define kShadowRadius 1.0f
#define kShadowOffset CGSizeMake(0.0f, 3.0f)
#define kShadowOpacity 0.4f
#define kShadowColor [UIColor colorWithWhite:0.0f alpha:kShadowOpacity]

#define kDefaultBadgeTextFont [UIFont boldSystemFontOfSize:[UIFont systemFontSize]]


#define kSquareColor [UIColor colorWithRed:0.004 green:0.349 blue:0.616 alpha:1]
#define kDefaultBadgeBackgroundColor [UIColor redColor]

#define kBadgeStrokeColor [UIColor whiteColor]
#define kBadgeStrokeWidth 2.0f

@implementation BadgeImage

+ (UIImage*) badgeImage:(NSString*) text
{
    CGSize textSize = [text sizeWithFont:kDefaultBadgeTextFont];
    
    UIGraphicsBeginImageContextWithOptions(CGSizeMake(kBadgeCornerRadius * 2 + textSize.width, kBadgeCornerRadius * 2+ kShadowOffset.height), NO, 0);
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    
    CGRect rtBadge = CGRectMake(0, 0, kBadgeCornerRadius * 2 + textSize.width - 8, kBadgeCornerRadius * 2);
    UIBezierPath *borderPath = [UIBezierPath bezierPathWithRoundedRect:rtBadge byRoundingCorners:(UIRectCorner)UIRectCornerAllCorners cornerRadii:CGSizeMake(kBadgeCornerRadius, kBadgeCornerRadius)];
    
    /* Background and shadow */
    CGContextSaveGState(ctx);
    {
        CGContextAddPath(ctx, borderPath.CGPath);
        
        CGContextSetFillColorWithColor(ctx, kDefaultBadgeBackgroundColor.CGColor);
        CGContextSetShadowWithColor(ctx, kShadowOffset, kShadowRadius, kShadowColor.CGColor);
        
        CGContextDrawPath(ctx, kCGPathFill);
    }
    CGContextRestoreGState(ctx);
    
    /* Stroke */
    CGContextSaveGState(ctx);
    {
        CGContextAddPath(ctx, borderPath.CGPath);
        
        CGContextSetLineWidth(ctx, kBadgeStrokeWidth);
        CGContextSetStrokeColorWithColor(ctx, kBadgeStrokeColor.CGColor);
        
        CGContextDrawPath(ctx, kCGPathStroke);
    }
    CGContextRestoreGState(ctx);
    
    /* Text */
    CGContextSaveGState(ctx);
    {
        CGContextSetFillColorWithColor(ctx, kDefaultBadgeTextColor.CGColor);
        //CGContextSetShadowWithColor(ctx, self.badgeTextShadowOffset, 1.0, self.badgeTextShadowColor.CGColor);
        
        CGRect textFrame = rtBadge;
        
        
        textFrame.size.height = textSize.height;
        textFrame.origin.y = rtBadge.origin.y + ceilf((rtBadge.size.height - textFrame.size.height) / 2.0f);
        
        [text drawInRect:textFrame
                withFont:kDefaultBadgeTextFont
           lineBreakMode:UILineBreakModeCharacterWrap
               alignment:UITextAlignmentCenter];
    }
    CGContextRestoreGState(ctx);
    
    UIImage* img = UIGraphicsGetImageFromCurrentImageContext();
    
    UIGraphicsEndImageContext();
    return img;
}

+ (UIImageView*) badgeImageView:(NSString*) text
{
    if (!text || 0 == text.length)
    {
        return nil;
    }
    UIImage* imgBadge = [BadgeImage badgeImage:text];
    UIImageView* ivBadge = [[UIImageView alloc]initWithImage:imgBadge];
    CGSize sizeBadge = imgBadge.size;
    CGRect rtBadge = CGRectMake(0, 0, sizeBadge.width, sizeBadge.height);
    [ivBadge setBounds:rtBadge];
    
    return ivBadge;
}

+ (void) addBadge:(NSString*) text View:(UIView*) view
{
    UIImageView* ivBadge = [self badgeImageView:text];
    if (ivBadge)
    {
        CGPoint ptBadge = CGPointMake(view.bounds.origin.x + view.bounds.size.width, view.bounds.origin.y);
        [view addSubview:ivBadge];
        [ivBadge setCenter:ptBadge];
    }
}

@end

在badgeImage方法中，可以把badge绘制的更漂亮。我还是比较懒，有个效果就可以了。