iOS导航栏按钮带角标数量自定义设置

[toc]

前言

有时候根据产品需求导航按钮需要角标显示。而苹果原生让我们无法实现角标显示这样的功能，这样我们就需要自定义一个按钮了。

带角标的导航栏按钮

我们自定义一个新的视图ShopCarItem，这里我举例:购物车带角标的按钮
.h文件

//ShopCarItem.h
@interface  ShopCarItem: UIView

@property(nonatomic,copy) dispatch_block_t shopCarButtonBlock;
// 购物车设置数值
-(void)setShopCarCount:(NSString *)count;

.m文件

@interface ShopCarItem ()
@property (nonatomic, strong)UIButton *carButton;   //按钮
@property (nonatomic, strong)UILabel *countLabel;   //角标
@end
@implementation ShopCarItem
- (instancetype)initWithFrame:(CGRect)frame {
    
    CGRect myFrame = CGRectMake(0, 0, AdaptedWidth(40), AdaptedWidth(40));
    self = [super initWithFrame:myFrame];
    if (self) {
        [self setupView];
    }
    return self;
}
- (void)setupView{
    [self addSubview:self.carButton];
}
#pragma mark lazy
- (UIButton *)carButton{
    if (!_carButton) {
        _carButton = [UIButton buttonWithType:UIButtonTypeCustom];
        _carButton.frame = CGRectMake(0, 8, AdaptedWidth(32), AdaptedWidth(32));
        [_carButton setImage:[UIImage imageNamed:@"ich_mall_shoppingcart"] forState:UIControlStateNormal];
        [_carButton addTarget:self action:@selector(shopCarButtonAction) forControlEvents:UIControlEventTouchUpInside];
    }
    return _carButton;
}
- (UILabel *)countLabel{
    if (!_countLabel) {
        _countLabel = [[UILabel alloc] initWithFrame:CGRectMake(24, 5, 16, 16)];
        _countLabel.backgroundColor = [UIColor redColor];
        _countLabel.textAlignment = NSTextAlignmentCenter;
        _countLabel.textColor = UIColorFromRGB2(255, 255, 255);
        _countLabel.layer.cornerRadius = 8;
        _countLabel.font = AdaptedSystemFontSize(12);
        _countLabel.layer.masksToBounds = YES;
        [self addSubview:_countLabel];
    }
    return _countLabel;
}
// 购物车设置数值
- (void)setShopCarCount:(NSString *)count{
    if ([count integerValue] == 0) {
        if (_countLabel) {
            [_countLabel removeFromSuperview];
            _countLabel = nil;
        }
        return;
    }
    if ([count integerValue] > 9) {
        self.countLabel.text = @"9+";
    }else{
        self.countLabel.text = count;
    }
    [self shakeView:_countLabel];
}

#pragma mark action
- (void)shopCarButtonAction{
    !_shopCarButtonBlock ?:_shopCarButtonBlock();
}
// 抖动动画
-(void)shakeView:(UIView*)viewToShake
{
    CGFloat t =2.0;
    CGAffineTransform translateRight =CGAffineTransformTranslate(CGAffineTransformIdentity, t,0.0);
    CGAffineTransform translateLeft =CGAffineTransformTranslate(CGAffineTransformIdentity,-t,0.0);
    viewToShake.transform = translateLeft;

    [UIView animateWithDuration:0.07 delay:0.0 options:UIViewAnimationOptionAutoreverse|UIViewAnimationOptionRepeat animations:^{
        [UIView setAnimationRepeatCount:2.0];
        viewToShake.transform = translateRight;
    } completion:^(BOOL finished){
        if(finished){
            [UIView animateWithDuration:0.05 delay:0.0 options:UIViewAnimationOptionBeginFromCurrentState animations:^{
                viewToShake.transform =CGAffineTransformIdentity;
            } completion:NULL];
        }
    }];
}

这就相当于自定义了一个rightItem
我们在需要的控制器中创建对象就可以了

在需要创建对象的控制器@interface中

HX_ShopCarView *shopItem = [[HX_ShopCarView alloc]init];
UIBarButtonItem* item=[[UIBarButtonItem alloc]initWithCustomView:shopItem];
self.navigationItem.rightBarButtonItem = item;

实现效果如下

这里不要忘记处理按钮的点击事件，我是通过block回调的，如果有好的方法可以可以自己修改。

多个按钮带角标

同样的，我们可以在自定义的item中可以多定义几个Button,只要使用代理或者block回调就可以了。
实现效果如下

小白写文，如果有不足之处，请指正，祝大家身体健康，工作顺利。