需求 - 19 - 按钮图片文字上下居中

在很多常用的应用中，都会有这样的一种实现，在一个按钮中图片和文字上下居中：

实现这种按钮有多个方法：

1.自定义Button

头文件：

@interface SYStatusButton : UIButton

@property (nonatomic, strong) UIImageView* logoImgView;
@property (nonatomic, strong) UILabel* columnLabel;

- (id)initWithFrame:(CGRect)frame image:(UIImage* )image name:(NSString* )name;

@end

实现文件：

#import "SYStatusButton.h"
#import "Masonry.h"

@implementation SYStatusButton

- (id)initWithFrame:(CGRect)frame image:(UIImage *)image name:(NSString *)name
{
    self = [super initWithFrame:frame];
    
    if (self)
    {
         SYStatusButton* superview = self;
         
         self.logoImgView = [[UIImageView alloc] init];
         [self.logoImgView setBackgroundColor:[UIColor clearColor]];
         [self.logoImgView setImage:image];
         [self addSubview:self.logoImgView];
         
         [self.logoImgView mas_makeConstraints:^(MASConstraintMaker* make){
         
         make.centerX.equalTo(superview);
         make.size.mas_equalTo(CGSizeMake(23, 20));
         make.top.equalTo(superview).with.offset(5);
         
         }];
         
         self.columnLabel = [[UILabel alloc] init];
         [self.columnLabel setBackgroundColor:[UIColor clearColor]];
         [self.columnLabel setFont:[UIFont systemFontOfSize:8.0]];
         [self.columnLabel setTextColor:[UIColor grayColor]];
         [self.columnLabel setTextAlignment:NSTextAlignmentCenter];
         [self.columnLabel setText:name];
         [self addSubview:self.self.columnLabel];
         
         [self.columnLabel mas_makeConstraints:^(MASConstraintMaker* make){
         
         make.centerX.equalTo(superview);
         make.size.mas_equalTo(CGSizeMake(50, 10));
         make.bottom.equalTo(superview).with.offset(-3);
         
         }];
    }
    
    return self;
}

@end

2.利用Button的edge来实现：

具体看这两篇即可：

http://doc.okbase.net/willingYaTou/archive/38295.html

http://blog.csdn.net/dfqin/article/details/37813591

    self.view.backgroundColor = [UIColor blackColor];
    
    UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];//button的类型
    button.frame = CGRectMake(100, 100,60, 40);//button的frame
    button.backgroundColor = [UIColor cyanColor];//button的背景颜色
    
    [button setImage:[UIImage imageNamed:@"bbs.png"] forState:UIControlStateNormal];//给button添加image
    button.imageEdgeInsets = UIEdgeInsetsMake(1,16,15,button.titleLabel.bounds.size.width + 16);//设置image在button上的位置（上top，左left，下bottom，右right）这里可以写负值，对上写－5，那么image就象上移动5个像素
    
    [button setTitle:@"游戏论坛" forState:UIControlStateNormal];//设置button的title
    button.titleLabel.font = [UIFont systemFontOfSize:10];//title字体大小
    button.titleLabel.textAlignment = NSTextAlignmentCenter;//设置title的字体居中
    [button setTitleColor:[UIColor redColor] forState:UIControlStateNormal];//设置title在一般情况下为白色字体
    [button setTitleColor:[UIColor grayColor] forState:UIControlStateHighlighted];//设置title在button被选中情况下为灰色字体
    button.titleEdgeInsets = UIEdgeInsetsMake(25, -button.titleLabel.bounds.size.width-46, 0, 0);//设置title在button上的位置（上top，左left，下bottom，右right）
    
    button.contentHorizontalAlignment = UIControlContentHorizontalAlignmentCenter;//设置button的内容横向居中。。设置content是title和image一起变化
    
    [button addTarget:self action:@selector(tap) forControlEvents:UIControlEventTouchUpInside];
    
    [self.view addSubview:button];

这个缺点是需要自己计算，这些尺寸，于是到Github找了一下，有没有自适应的，结果找到，就是实现3

3.自适配

https://github.com/xiaolanlianhua/UIButtonCenterTitleAndImage

非常好用，封装到Category后一句话即可：

        [button setImage:[UIImage imageNamed:@"bbs.png"] forState:UIControlStateNormal];
        
        [button verticalCenterImageAndTitle:2];

这个也有问题，就是如果提供的图片有点大，它并没有去调整图片的大小，而出现超过按钮的边框的问题，所以对图片的尺寸有要求

4.待续...希望自己可以写一个克服上面问题的通用轮子！