图片加文字的居中显示

作者: 冰魄城主 | 来源:发表于2019-01-15 15:46 被阅读15次

图片加文字的居中显示
UIButton 上图片下文字显示
Android RadioButton左边图片不能居中显示问题
iOS -- UIButton 文字与图片的布局
li中图片与文字并存
图片和按钮垂直居中显示
iOS按钮设置图片在上文字在下
记事本制作网页
改变UIButton图片文字位置
UIEdgeInsetsMake

由于开发中图片文字居中显示很多，而且有时候还需要后台返回数据动态改变，如果我们按照之前的imge+label模式写，肯定会非常麻烦，而且不可控。所以本人写了一个简单的button不论适配5还是最新的x，都非常好用，调用一句话就行。以下是代码:
ZJButton.h

#import <UIKit/UIKit.h>
//typedef enum : NSInteger {
//    ZJ_BUTTONNORMAL,//正常
//    ZJ_BUTTONSPECIAL,//特殊
//    ZJ_BUTTONSTOREOPERATION,//门店管理
//    ZJ_BUTTONMYBUSINESS,//我的
//
//} BUTTONTYLE;

//#define WhiteSmoke [UIColor colorWithHex:@"#e7e7e7"]//DCDCDC
@interface ZJButton : UIButton
+(ZJButton *)shareBtn;


//@property(nonatomic,assign) BUTTONTYLE buttonStyle;



-(void)autoLayoutfNeedsWithBtn:(UIButton *)btn layerColor:(UIColor *)layerColor;
//view的layer设置
-(void)autoLayoutfNeedsWithView:(UIView *)view andRadius:(CGFloat)radius andBorderColor:(UIColor *)borderColor ;

//设置imageview在中心
-(void)setBtn:(UIButton *)btn andCenterImageName:(NSString *)imageName;


//设置方式为imageView(上)+label(下)
//设置方式为imageView(上)+label(下)
-(void)setBtn:(UIButton *)btn  andImageName:(NSString *)imageName andTitle:(NSString *)title;
//设置方式为label(上)+label(下)
-(void)setBtn:(UIButton *)btn WithCount:(NSString *)count andName:(NSString *)name nameColor:(UIColor *)nameColor andCountFont:(CGFloat)countfont andNameFont:(CGFloat)nameFont;
//添加btn超文本(文字右侧，图片左侧)
//添加headbtn超文本
-(void)setAttributeBtn:(UIButton *)btn WithImagename:(NSString *)imagename andtitle:(NSString *)title  andTitleColor:(UIColor *)titlecolor andtitleFont:(CGFloat)fonts andimageBounds:(CGRect)bounds;
//添加btn超文本(图片右侧，文字左侧)
-(void)setAttrBtn:(UIButton *)headBtn andTitleColor:(UIColor *)titleColor withRightImagename:(NSString *)imagename andLefttitle:(NSString *)title;
//添加btn超文本(title默认颜色,colorTitle自定义颜色)
-(void)setAttributeBtn:(UIButton *)headBtn WithTitle:(NSString *)title andClolrTitle:(NSString *)colorTitle andColor:(UIColor *)color;
-(instancetype)initWithLefTitle:(NSString *)title andTitleColor:(UIColor *)titlecolor andtitleFont:(CGFloat)fonts andRightImageName:(NSString *)imageName;

//设置图片(上)+文字(下)
-(void)setbtn:(UIButton *)btn andImageName:(NSString *)imagename andTitle:(NSString *)title andColor:(UIColor *)titleColor andFont:(CGFloat)font;


//设置方式为imageView(上)+label(下)
-(void)setbtn:(UIButton *)btn andImageName:(NSString *)imagename andTitle:(NSString *)title andColor:(UIColor *)titleColor andFont:(CGFloat)font andScale:(CGFloat)scale;
@end

ZJButton.m

//
//  ZJButton.m
//  IM
//
//  Created by xx on 2017/5/18.
//  Copyright © 2017年 Michael Hu. All rights reserved.
//

#import "ZJButton.h"
#import "NSAttributedString+YYText.h"


@implementation ZJButton
//创建单例
+(ZJButton *)shareBtn{
    static ZJButton *btn = nil;
    
    static dispatch_once_t onceToken;
    dispatch_once(&onceToken, ^{
        btn = [[self alloc] init];
    });
    return btn;
}


-(instancetype)init{
    self = [super init];
    return self;
}

//设置方式为imageView(上)+label(下)
-(void)setBtn:(UIButton *)btn  andImageName:(NSString *)imageName andTitle:(NSString *)title{
    UIImageView *iconView = [[UIImageView alloc] init];
    iconView.image = [UIImage imageNamed:imageName];
    UILabel *nameLabel = [[UILabel alloc] init];
    nameLabel.text = title;
    nameLabel.font = [UIFont systemFontOfSize:15];
    [nameLabel sizeToFit];

    [btn addSubview:nameLabel];
    [btn addSubview:iconView];
    
    [nameLabel mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerX.equalTo(btn);
        make.bottom.equalTo(btn).offset(-10);
        make.height.equalTo(@20);
    }];
    
    [iconView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerX.equalTo(btn);
        make.top.equalTo(btn).offset(15);
        make.bottom.equalTo(nameLabel.mas_top).offset(-10);
        make.width.equalTo(iconView.mas_height);
    }];
    
}


//设置方式为label(上)+label(下)
-(void)setBtn:(UIButton *)btn WithCount:(NSString *)count andName:(NSString *)name nameColor:(UIColor *)nameColor andCountFont:(CGFloat)countfont andNameFont:(CGFloat)nameFont{
    [btn layoutIfNeeded];
    //创建两个label
    UILabel *moneyLabel = [[UILabel alloc] init];
    UILabel *nameLabel = [[UILabel alloc] init];
    //设置label的textColor
    moneyLabel.textColor = [UIColor whiteColor];
    nameLabel.textColor = nameColor;
    //设置label的font
    moneyLabel.font = [UIFont fontWithName:@"AmericanTypewriter-Bold"size:countfont];
    nameLabel.font = [UIFont systemFontOfSize:nameFont];
    //设置label的text
    moneyLabel.text = count;
    nameLabel.text = name;
    //自动填充
    [moneyLabel sizeToFit];
    [nameLabel sizeToFit];
    //添加
    [btn addSubview:moneyLabel];
    [btn addSubview:nameLabel];
    
    //自动布局
    [moneyLabel mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(btn);
        make.bottom.equalTo(btn.mas_centerY);
        make.centerX.equalTo(btn);
    }];
    [nameLabel mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(btn.mas_centerY);
        make.centerX.equalTo(btn);
    }];
    
}
#pragma mark 添加headbtn超文本
-(instancetype)initWithLefTitle:(NSString *)title andTitleColor:(UIColor *)titlecolor andtitleFont:(CGFloat)fonts andRightImageName:(NSString *)imageName{
    if (self = [super init]) {
        // 添加表情
        NSTextAttachment *attch = [[NSTextAttachment alloc] init];
        // 表情图片
        attch.image = [UIImage imageNamed:imageName];
        // 设置图片大小
        attch.bounds = CGRectMake(0, -5, 20, 20);
        // 创建带有图片的富文本
        NSMutableAttributedString *string = (NSMutableAttributedString *)[NSAttributedString attributedStringWithAttachment:attch];
        
        NSMutableAttributedString *attri = [[NSMutableAttributedString alloc] initWithString:[NSString stringWithFormat:@"  %@",title]];
        
        //yytext方法
        //设置超文本的字体颜色
        attri.color = titlecolor;
        //设置超文本的字体大小
        attri.font = [UIFont systemFontOfSize:fonts];
        [string appendAttributedString:attri];
        
        [self setAttributedTitle:string forState:UIControlStateNormal];
        [self sizeToFit];
    }
    return self;
}
//添加headbtn超文本
-(void)setAttributeBtn:(UIButton *)btn WithImagename:(NSString *)imagename andtitle:(NSString *)title  andTitleColor:(UIColor *)titlecolor andtitleFont:(CGFloat)fonts andimageBounds:(CGRect)bounds{
    
    // 添加表情
    NSTextAttachment *attch = [[NSTextAttachment alloc] init];
    // 表情图片
    attch.image = [UIImage imageNamed:imagename];
    // 设置图片大小
    attch.bounds = bounds;
    // 创建带有图片的富文本
    NSMutableAttributedString *string = (NSMutableAttributedString *)[NSAttributedString attributedStringWithAttachment:attch];
    
    NSMutableAttributedString *attri = [[NSMutableAttributedString alloc] initWithString:[NSString stringWithFormat:@"  %@",title]];
    
    //yytext方法
    //设置超文本的字体颜色
    attri.color = titlecolor;
    //设置超文本的字体大小
    attri.font = [UIFont systemFontOfSize:fonts];
    [string appendAttributedString:attri];
    [btn setAttributedTitle:string forState:UIControlStateNormal];
}

-(void)setAttributeBtn:(UIButton *)headBtn WithTitle:(NSString *)title andClolrTitle:(NSString *)colorTitle andColor:(UIColor *)color{
    NSMutableAttributedString *attri = [[NSMutableAttributedString alloc] initWithString:[NSString stringWithFormat:@"%@",title]];
    // 创建带有图片的富文本
    NSMutableAttributedString *attri1 = [[NSMutableAttributedString alloc] initWithString:[NSString stringWithFormat:@"%@",colorTitle]];
    attri1.color = color;
    
    [attri appendAttributedString:attri1];
    
    [headBtn setAttributedTitle:attri forState:UIControlStateNormal];
}

//添加headbtn超文本
-(void)setAttrBtn:(UIButton *)headBtn andTitleColor:(UIColor *)titleColor withRightImagename:(NSString *)imagename andLefttitle:(NSString *)title {
    
    NSMutableAttributedString *attri = [[NSMutableAttributedString alloc] initWithString:[NSString stringWithFormat:@"%@ ",title]];
    attri.color = titleColor;
    attri.font = [UIFont systemFontOfSize:13];
    // 添加表情
    NSTextAttachment *attch = [[NSTextAttachment alloc] init];
    // 表情图片
    attch.image = [UIImage imageNamed:imagename];
    // 设置图片大小
    // attch.bounds = CGRectMake(0, 0, 20, 20);
    // 创建带有图片的富文本
    NSAttributedString *string = [NSAttributedString attributedStringWithAttachment:attch];
    
    [attri appendAttributedString:string];
    
    [headBtn setAttributedTitle:attri forState:UIControlStateNormal];
}


-(void)setbtn:(UIButton *)btn andImageName:(NSString *)imagename andTitle:(NSString *)title andColor:(UIColor *)titleColor andFont:(CGFloat)font{
    [self autoLayoutfNeedsWithBtn:btn layerColor:[UIColor clearColor]];
    CGFloat width = btn.frame.size.width;
    UIImageView *imageView = [[UIImageView alloc] init];
    imageView.image = [UIImage imageNamed:imagename];
    
    UILabel *label = [[UILabel alloc] init];
    label.text = title;
    label.textColor = titleColor;
    label.font = [UIFont systemFontOfSize:font];
    [label sizeToFit];
    
    [btn addSubview:imageView];
    [btn addSubview:label];
    
    [imageView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(btn).mas_offset(width*0.15);
        make.centerX.equalTo(btn);
        make.width.height.mas_equalTo(width*0.4);
    }];
    [label mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(imageView.mas_bottom).mas_offset(width*0.1);
        make.centerX.equalTo(imageView);
        make.bottom.equalTo(btn).mas_offset(-(width*0.15));
    }];
    
}



#pragma mark btnlayout
-(void)autoLayoutfNeedsWithBtn:(UIButton *)btn layerColor:(UIColor *)layerColor{
    [btn layoutIfNeeded];
    btn.layer.borderColor = layerColor.CGColor;
    btn.layer.borderWidth = 0.4;
    btn.layer.cornerRadius = 2;
    btn.layer.masksToBounds = YES;
}
-(void)autoLayoutfNeedsWithView:(UIView *)view andRadius:(CGFloat)radius andBorderColor:(UIColor *)borderColor {
    [view layoutIfNeeded];
    view.layer.borderColor = borderColor.CGColor;
    view.layer.borderWidth = 0.4;
    view.layer.cornerRadius = radius;
    view.layer.masksToBounds = YES;
}


-(void)setBtn:(UIButton *)btn andCenterImageName:(NSString *)imageName{
    UIImageView *imageView = [[UIImageView alloc]init];
    imageView.image = [UIImage imageNamed:imageName];
    [btn addSubview:imageView];
    [imageView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.top.equalTo(btn).offset(5);
        make.right.bottom.equalTo(btn).offset(-5);
    }];
}


//设置方式为imageView(上)+label(下)
/*
 *
 * @param btn 添加的btn
 *
 * @param imagename 图片名称
 *
 * @param title title名称
 *
 * @param font 字体
 *
 * @param scale 宽高比
 */
-(void)setbtn:(UIButton *)btn andImageName:(NSString *)imagename andTitle:(NSString *)title andColor:(UIColor *)titleColor andFont:(CGFloat)font andScale:(CGFloat)scale{
    btn.contentHorizontalAlignment = UIControlContentHorizontalAlignmentCenter;
    CGFloat height = btn.frame.size.height;
    UIImageView *imageView = [[UIImageView alloc] init];
    imageView.image = [UIImage imageNamed:imagename];
    
    UILabel *label = [[UILabel alloc] init];
    label.text = title;
    label.textColor = titleColor;
    label.font = [UIFont systemFontOfSize:font];
    [label sizeToFit];
    
    [btn addSubview:imageView];
    [btn addSubview:label];
    
    [imageView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(btn).mas_offset(height*0.15);
        make.centerX.equalTo(btn);
        make.height.mas_equalTo(height*0.4);
        make.width.mas_equalTo(height*0.4*scale);
    }];
    [label mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(imageView.mas_bottom).mas_offset(height*0.1);
        make.centerX.equalTo(imageView);
        make.bottom.equalTo(btn).mas_offset(-(height*0.15));
    }];
    
}
@end

你可以创建这两个.h和.m文件，进去体验一哈，

图片加文字的居中显示
由于开发中图片文字居中显示很多，而且有时候还需要后台返回数据动态改变，如果我们按照之前的imge+label模式写...
UIButton 上图片下文字显示
要实现的效果：图片在文字之上显示，图片和文字都居中显示，可控制图片和文字之间的间距。计算：正常图片不设置按钮...
Android RadioButton左边图片不能居中显示问题
RadioButton设置图片无法居中问题像下面这样的布局只能让文字居中，文字左边的圆圈图标还是靠左显示。解决思...
iOS -- UIButton 文字与图片的布局
1、只有文字(默认居中) 1.1 文字居左显示代码实现: 1.2 文字居右显示代码实现： 2、只有图片(默认居...
li中图片与文字并存
li中图片与文字并存垂直居中，需要给图片加vertical-align:middle;属性
图片和按钮垂直居中显示
button上图片在上，文字在下并且居中显示： -(void)setButtonContentCenter:(UI...
iOS按钮设置图片在上文字在下
设置如下布局后，图片和文字都居中显示。 button.titleEdgeInsets = UIEdgeInsets...
记事本制作网页
··· 文字/图片 //文字/图片居中···
改变UIButton图片文字位置
1.图片居左，文字在右，垂直居中显示，文字与图片没有间距为10 代码如下： - (void)setIconInLe...
UIEdgeInsetsMake
一。当button上面只有文字或者是只有图片的时候文字或者图片都会居中显示。 UIEdgeInsets实际就是一个...