可能有些看到这篇文章的朋友会觉得很不屑：“按钮谁不会自定义？还需要看你的？” 也确实，按钮是我们项目中最常见的控件之一，天天在使用。对于不同类型的按钮，我们是否有更加简便的方法来实现需求是我们需要做的。这里我提出自己的两种方法，您可以对你自己平时自定义按钮的方法做一下对比，看看哪种方法更加简单。
多说一句，千万不要觉得知识简单，觉得自己会了，没必要学习。’往往简单的东西存在大智慧’(这个比给满分)，知识都是慢慢积累出来的。
按钮是应用中最常见的,最基本的一个控件。按钮的样式多种多样，系统默认样式为左右结构，图片在左边，文字在右边。系统按钮完全无法满足开发的需求，我们只能自己定制出想要的样式。既包含文字又包含图片的按钮有下面四种样式：
- 图片在上，文字在下
- 图片在左，文字在右
- 图片在下，文字在上
- 图片在右，文字在左
我们都知道，在按钮中可以通过设置图片和文字的内边距(UIEdgeInsetsMake)来改变图片和文字的位置来满足我们的需求。当然这只是其中一个方法。还有一种方法是使用继承，创建一个类继承自UIButton，通过重写layoutSubviews方法，来改变按钮内部子控件的位置，从而达到我们的需求。 话不多说， 开整。
方法一：通过分类的方式实现
新建一个UIButton的分类，下面是具体声明和实现
#import <UIKit/UIKit.h>
// 定义一个枚举（包含了四种类型的button）
typedef NS_ENUM(NSUInteger, MKButtonEdgeInsetsStyle) {
MKButtonEdgeInsetsStyleTop, // image在上，label在下
MKButtonEdgeInsetsStyleLeft, // image在左，label在右
MKButtonEdgeInsetsStyleBottom, // image在下，label在上
MKButtonEdgeInsetsStyleRight // image在右，label在左
};
@interface UIButton (ImageTitleSpacing)
/**
* 设置button的titleLabel和imageView的布局样式，及间距
*
* @param style titleLabel和imageView的布局样式
* @param space titleLabel和imageView的间距
*/
- (void)layoutButtonWithEdgeInsetsStyle:(MKButtonEdgeInsetsStyle)style
imageTitleSpace:(CGFloat)space;
@end
再来看看实现文件
#import "UIButton+ImageTitleSpacing.h"
@implementation UIButton (ImageTitleSpacing)
- (void)layoutButtonWithEdgeInsetsStyle:(MKButtonEdgeInsetsStyle)style
imageTitleSpace:(CGFloat)space {
/**
* 知识点：titleEdgeInsets是title相对于其上下左右的inset，跟tableView的contentInset是类似的，
* 如果只有title，那它上下左右都是相对于button的，image也是一样；
* 如果同时有image和label，那这时候image的上左下是相对于button，右边是相对于label的；title的上右下是相对于button，左边是相对于image的。
*/
// 1. 得到imageView和titleLabel的宽、高
CGFloat imageWith = self.imageView.frame.size.width;
CGFloat imageHeight = self.imageView.frame.size.height;
CGFloat labelWidth = 0.0;
CGFloat labelHeight = 0.0;
if ([UIDevice currentDevice].systemVersion.floatValue >= 8.0) {
// 由于iOS8中titleLabel的size为0，用下面的这种设置
labelWidth = self.titleLabel.intrinsicContentSize.width;
labelHeight = self.titleLabel.intrinsicContentSize.height;
} else {
labelWidth = self.titleLabel.frame.size.width;
labelHeight = self.titleLabel.frame.size.height;
}
// 2. 声明全局的imageEdgeInsets和labelEdgeInsets
UIEdgeInsets imageEdgeInsets = UIEdgeInsetsZero;
UIEdgeInsets labelEdgeInsets = UIEdgeInsetsZero;
// 3. 根据style和space得到imageEdgeInsets和labelEdgeInsets的值
/**
MKButtonEdgeInsetsStyleTop, // image在上，label在下
MKButtonEdgeInsetsStyleLeft, // image在左，label在右
MKButtonEdgeInsetsStyleBottom, // image在下，label在上
MKButtonEdgeInsetsStyleRight // image在右，label在左
*/
switch (style) {
case MKButtonEdgeInsetsStyleTop:
{
imageEdgeInsets = UIEdgeInsetsMake(-labelHeight-space/2.0, 0, 0, -labelWidth);
labelEdgeInsets = UIEdgeInsetsMake(0, -imageWith, -imageHeight-space/2.0, 0);
}
break;
case MKButtonEdgeInsetsStyleLeft:
{
imageEdgeInsets = UIEdgeInsetsMake(0, -space/2.0, 0, space/2.0);
labelEdgeInsets = UIEdgeInsetsMake(0, space/2.0, 0, -space/2.0);
}
break;
case MKButtonEdgeInsetsStyleBottom:
{
imageEdgeInsets = UIEdgeInsetsMake(0, 0, -labelHeight-space/2.0, -labelWidth);
labelEdgeInsets = UIEdgeInsetsMake(-imageHeight-space/2.0, -imageWith, 0, 0);
}
break;
case MKButtonEdgeInsetsStyleRight:
{
imageEdgeInsets = UIEdgeInsetsMake(0, labelWidth+space/2.0, 0, -labelWidth-space/2.0);
labelEdgeInsets = UIEdgeInsetsMake(0, -imageWith-space/2.0, 0, imageWith+space/2.0);
}
break;
default:
break;
}
// 4. 赋值
self.titleEdgeInsets = labelEdgeInsets;
self.imageEdgeInsets = imageEdgeInsets;
}
@end
使用方法：只需要新建一个分类将上面的代码拷贝，直接导入到需要使用的类中，调用方法就可以了，具体见下
// 导入头文件
#import "UIButton+ImageTitleSpacing.h"
// 我们随意创建一个按钮比如button，在设置完按钮的图片、标题和frame后，只需要加上如下代码：
[button layoutButtonWithEdgeInsetsStyle: 这里填样式 imageTitleSpace: 这里填写图片和文字的间距];
这样是不是很方便呢？
方法二：通过继承的方式实
新建一个继承自UIButton的类，重写layoutSubviews 方法，自己设置图片和文字的位置。
#import "TSSquareButton.h"
@implementation TSSquareButton
- (instancetype)initWithFrame:(CGRect)frame {
if (self = [super initWithFrame:frame]) {
// 设置图片的其他属性
self.titleLabel.textAlignment = NSTextAlignmentCenter;
self.titleLabel.font = [UIFont systemFontOfSize:12.0];
[self setBackgroundColor:[UIColor whiteColor]];
[self setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
}
return self;
}
// 重写layoutSubviews方法，手动设置按钮子控件的位置
- (void)layoutSubviews {
[super layoutSubviews];
self.imageView.TS_width = self.TS_width * 0.4;
self.imageView.TS_height = self.imageView.TS_width;
self.imageView.TS_y = self.TS_height * 0.25;
self.imageView.TS_centerX = self.TS_width * 0.5;
self.titleLabel.TS_width = self.TS_width;
self.titleLabel.TS_y = self.imageView.TS_buttom ;
self.titleLabel.TS_height = 25;
self.titleLabel.TS_x = 0;
}
@end
两种方式运行结果
总结：
至此，设置图片的两种方法就已经讲完了。对比一下：
- 第一种通过分类的方式设置按钮非常方便，只需要一行代码就足够了，不需要我们自己计算UIEngeInsetsMake，适用于纯代码创建的按钮。 如果是Xib创建的按钮就用不了了。
- 第二种通过继承的方式重写layoutSubviews的方式设置按钮好处是既适用于纯代码创建的按钮，也适用于Xib创建的按钮，但是这种方法有一定的局限性，它只适用于同一类型的按钮。一类比如我一个界面中有几种不同类型的按钮，这时候就需要我们创建不同的继承UIButton 的按钮类，在layoutSubviews设置不同的位置关系。这样就相对复杂了。
两种方法各有利弊，各位可以根据自己的实际情况来选择使用。当然设置按钮图片和文字的位置并不止这两种方法，还有其他更好的方法等着我们去发现。如果你有什么更好的建议，也可以联系我，我们一同探讨学习。
最后给出gitHub上demo的下载地址，方便您学习使用。如果您觉得对您有所帮助的话，可以给我点个Star。 您的Star是我前进的动力(__) 嘻嘻……
github地址：https://github.com/VictDog/YYButton
