ios 按钮上图下文字、图文互换位置、添加角标

特别提醒，进行设置时，请先布局（frame 或者 自动布局）添加到view上之后，再设置imageView.size，最后再设置间距！即可！

在开发中或许你也遇到了下面的几种情况，之前都是通过修改EdgeInsets来进行单独处理，后来这种需求越来越普遍了，就抽了一点时间写了一个扩展，方面以后使用。

第一种类型：按钮默认是左边图片、右边文字，而有时候就有两者互换位置的情况

图片.png

解决方法：写了一个UIButton的扩展方法

/**
 左边是文字，右边是图片（和原来的样式翻过来）
 
 @param space 间距
 */
- (void)setLeftTitleAndRightImageWithSpace:(CGFloat)space{
    
    CGSize imageSize = self.imageView.frame.size;
    CGSize titleSize = self.titleLabel.frame.size;

    // 测试的时候发现titleLabel的宽度不正确，这里进行判断处理
    CGFloat labelWidth = self.titleLabel.intrinsicContentSize.width;
    if (titleSize.width < labelWidth) {
        titleSize.width = labelWidth;
    }
    
    // 文字距左边框的距离减少imageView的宽度-间距，右侧增加距离imageView的宽度
    [self setTitleEdgeInsets:UIEdgeInsetsMake(0.0, -imageSize.width - space, 0.0, imageSize.width)];
    
    // 图片距左边框的距离增加titleLable的宽度,距右边框的距离减少titleLable的宽度
    [self setImageEdgeInsets:UIEdgeInsetsMake(0.0, titleSize.width,0.0,-titleSize.width)];
}

第二种类型：上面是图，下面是文字

图片.png

解决方法：写了一个UIButton的扩展方法

/**
 上部分是图片，下部分是文字
 
 @param space 间距
 */
- (void)setUpImageAndDownLableWithSpace:(CGFloat)space{
    
    CGSize imageSize = self.imageView.frame.size;
    CGSize titleSize = self.titleLabel.frame.size;
    
    // 测试的时候发现titleLabel的宽度不正确，这里进行判断处理
    CGFloat labelWidth = self.titleLabel.intrinsicContentSize.width;
    if (titleSize.width < labelWidth) {
        titleSize.width = labelWidth;
    }
    
    // 文字距上边框的距离增加imageView的高度+间距，距离左边框减少imageView的宽度，距离下边框和右边框距离不变
    [self setTitleEdgeInsets:UIEdgeInsetsMake(imageSize.height+space, -imageSize.width, -space, 0.0)];
    
    // 图片距右边框的距离减少图片的宽度，距离上面的间隔，其它不变
    [self setImageEdgeInsets:UIEdgeInsetsMake(-space, 0.0,0.0,-titleSize.width)];
}

第三种类型：在第二种的基础上添加角标

图片.png

解决方法：写了一个UIButton的扩展方法，设置角标

/**
 设置角标的个数（右上角）
 
 @param badgeValue <#badgeValue description#>
 */
- (void)setBadgeValue:(NSInteger)badgeValue{
    
    CGFloat badgeW   = 20;
    CGSize imageSize = self.imageView.frame.size;
    CGFloat imageX   = self.imageView.frame.origin.x;
    CGFloat imageY   = self.imageView.frame.origin.y;
    
    UILabel *badgeLable = [[UILabel alloc]init];
    badgeLable.text = [NSString stringWithFormat:@"%ld",badgeValue];
    badgeLable.textAlignment = NSTextAlignmentCenter;
    badgeLable.textColor = [UIColor whiteColor];
    badgeLable.font = [UIFont systemFontOfSize:12];
    badgeLable.layer.cornerRadius = badgeW*0.5;
    badgeLable.clipsToBounds = YES;
    badgeLable.backgroundColor = [UIColor redColor];
    
    CGFloat badgeX = imageX + imageSize.width - badgeW*0.5;
    CGFloat badgeY = imageY - badgeW*0.25;
    badgeLable.frame = CGRectMake(badgeX, badgeY, badgeW, badgeW);
    [self addSubview:badgeLable];
}

github地址

备注，如果使用的是自动布局，请在设置完约束之后，再设置按钮的imageView.size和设置图片和文字的间距，例子如下

    UIButton *ruleBtn = [[UIButton alloc]init];
    [ruleBtn setTitle:@"本期活动规则" forState:UIControlStateNormal];
    [ruleBtn setTitleColor:kGrayDescColor forState:UIControlStateNormal];
    [ruleBtn setImage:kImage(@"arrow_right_gray") forState:UIControlStateNormal];
    ruleBtn.titleLabel.font = [UIFont systemFontOfSize:14];
    [contentView addSubview:ruleBtn];
    
    [ruleBtn mas_makeConstraints:^(MASConstraintMaker *make) {
        
        make.size.mas_equalTo(CGSizeMake(120, 20));
        make.top.equalTo(inviteBgView.mas_bottom).offset(20);
        make.centerX.equalTo(contentView);
    }];

    // 一定要先设置约束
    ruleBtn.imageView.size = CGSizeMake(17, 17);
    [ruleBtn setLeftTitleAndRightImageWithSpace:10];

特别提醒，进行设置时，请先布局（frame 或者 自动布局）添加到view上之后，再设置imageView.size，最后再设置间距！即可！