iOS开发小笔记 | 封装一个带角标的button

• 先看设计图：

现在要封装的就是中间那个带角标的按钮。

• 思路：

获取到button的titleLabel,再在titleLabel右上角放一个label。

• 代码：

注：继承自UIButton

@interface BadgeButton ()

/** 显示按钮角标的label */
@property (nonatomic,strong) UILabel *badgeLabel;

@end

@implementation BadgeButton

#pragma mark - 构造方法
- (instancetype)initWithFrame:(CGRect)frame{
    if (self = [super initWithFrame:frame]) {
        // button属性设置
        self.clipsToBounds = NO;
        [self.titleLabel setFont:[UIFont systemFontOfSize:15]];
        [self setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
        
        //------- 角标label -------//
        self.badgeLabel = [[UILabel alloc]init];
        [self addSubview:self.badgeLabel];
        self.badgeLabel.backgroundColor = [UIColor redColor];
        self.badgeLabel.font = [UIFont systemFontOfSize:10];
        self.badgeLabel.textColor = [UIColor whiteColor];
        self.badgeLabel.layer.cornerRadius = 6;
        self.badgeLabel.clipsToBounds = YES;
        
        //------- 建立角标label的约束 -------//
        [self.badgeLabel mas_makeConstraints:^(MASConstraintMaker *make) {
            make.left.mas_equalTo(self.titleLabel.mas_right).mas_offset(-5);
            make.bottom.mas_equalTo(self.titleLabel.mas_top).mas_offset(5);
            make.height.mas_equalTo(12);
        }];
    }
    return self;
}

#pragma mark - 显示角标
/**
 显示角标

 @param badgeNumber 角标数量
 */
- (void)showBadgeWithNumber:(NSInteger)badgeNumber{
    self.badgeLabel.hidden = NO;
    // 注意数字前后各留一个空格，不然太紧凑
    self.badgeLabel.text = [NSString stringWithFormat:@" %ld ",badgeNumber];
}

#pragma mark - 隐藏角标
/** 隐藏角标 */
- (void)hideBadge{
    self.badgeLabel.hidden = YES;
}

@end

• 封装的效果：

• 上图的代码：

    // 短按钮
    BadgeButton *badgeButton1 = [[BadgeButton alloc]initWithFrame:CGRectMake(90, 90, 50, 30)];
    [self.view addSubview:badgeButton1];
    [badgeButton1 setTitle:@"按钮1" forState:UIControlStateNormal];
    [badgeButton1 showBadgeWithNumber:9];
    
    // 长按钮
    BadgeButton *badgeButton2 = [[BadgeButton alloc]initWithFrame:CGRectMake(90, 130, 90, 30)];
    [self.view addSubview:badgeButton2];
    [badgeButton2 setTitle:@"按钮22222" forState:UIControlStateNormal];
    [badgeButton2 showBadgeWithNumber:33];
    
    // Masonry布局的情况
    BadgeButton *badgeButton3 = [[BadgeButton alloc]init];
    [self.view addSubview:badgeButton3];
    [badgeButton3 setTitle:@"按钮33" forState:UIControlStateNormal];
    [badgeButton3 showBadgeWithNumber:99];
    [badgeButton3 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.mas_equalTo(badgeButton2.mas_bottom).mas_offset(10);
        make.width.mas_equalTo(100);
        make.height.mas_equalTo(30);
        make.left.mas_equalTo(90);
    }];