1、我最開(kāi)始實(shí)現(xiàn)這個(gè)采用的方法：
重新自定義一個(gè)view旱函，然后有兩個(gè)屬性label和imageView响巢，然后設(shè)置位置布局，再添加單擊手勢(shì)棒妨，用代理回傳點(diǎn)擊方法踪古。
2、第二種方法：
自定義一個(gè)Button繼承Button券腔，有兩個(gè)屬性label和imageView伏穆，然后設(shè)置布局。這樣就不用添加單擊手勢(shì)纷纫。
3枕扫、第三種方法：
直接用Button自帶的titleLabel和imageView，寫(xiě)個(gè)Category辱魁，用來(lái)設(shè)置label和image的排列方式烟瞧，eg：上下、左右
明顯前兩種是很不好的染簇，所以這里只說(shuō)第三種：
Button有兩個(gè)屬性：titleEdgeInsets和imageEdgeInsets参滴，通過(guò)設(shè)置這兩個(gè)，就可以實(shí)現(xiàn)所有需要的Button的樣式锻弓，如：image在上砾赔、image在下、image在左、image在右暴心。
在設(shè)置這兩個(gè)之前妓盲，我們先要理解Button上面的titleLabel和imageView的位置關(guān)系（想象Button默認(rèn)的image和label的顯示）：
- titleEdgeInsets是titleLabel相對(duì)于其上下左右的inset，跟tableView的contentInset是類(lèi)似的专普；
- 如果只有title悯衬，那titleLabel的 上下左右 都是 相對(duì)于Button 的；
- 如果只有image脆诉，那imageView的 上下左右 都是 相對(duì)于Button 的甚亭；
- 如果同時(shí)有image和label，那image的 上下左 是 相對(duì)于Button 的击胜，右 是 相對(duì)于label 的亏狰；
label的 上下右 是 相對(duì)于Button的， 左 是 相對(duì)于label 的偶摔。
上面一段很重要
理解了暇唾，然后我們就可以看懂下面的代碼
- 創(chuàng)建一個(gè)Button的Category，.h文件如下辰斋，定義一個(gè)Enum策州，用于決定image和label的樣式；一個(gè)方法用于調(diào)用設(shè)置宫仗。
#import <UIKit/UIKit.h>
typedef NS_ENUM(NSUInteger, MKButtonEdgeInsetsStyle) {
MKButtonEdgeInsetsStyleTop, // image在上够挂，label在下
MKButtonEdgeInsetsStyleLeft, // image在左，label在右
MKButtonEdgeInsetsStyleBottom, // image在下藕夫，label在上
MKButtonEdgeInsetsStyleRight // image在右孽糖，label在左
};
@interface UIButton (ImageTitleSpacing)
/**
* 設(shè)置button的titleLabel和imageView的布局樣式，及間距
*
* @param style titleLabel和imageView的布局樣式
* @param space titleLabel和imageView的間距
*/
- (void)layoutButtonWithEdgeInsetsStyle:(MKButtonEdgeInsetsStyle)style
imageTitleSpace:(CGFloat)space;
- .m文件如下毅贮，實(shí)現(xiàn)方法
#import "UIButton+ImageTitleSpacing.h"
@implementation UIButton (ImageTitleSpacing)
- (void)layoutButtonWithEdgeInsetsStyle:(MKButtonEdgeInsetsStyle)style
imageTitleSpace:(CGFloat)space
{
// 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，用下面的這種設(shè)置
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. 根據(jù)style和space得到imageEdgeInsets和labelEdgeInsets的值
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;
}
我寫(xiě)了個(gè)Demo在github上滩褥，地址：自定義Button
參考
- UIButton的titleEdgeInsets屬性和imageEdgeInsets屬性實(shí)現(xiàn)圖片文字按要求排列病蛉，這篇博客里介紹了上面的原理，建議仔細(xì)看瑰煎，理解之后就可以明白
- UIButton 的 imageEdgeInsets 和 titleEdgeInsets铺然，這篇博客末尾有g(shù)ithub地址，我寫(xiě)的時(shí)候沒(méi)有理解原理丢间，所以設(shè)置的時(shí)候探熔，參照了他的代碼
- 如何布局包含Image和Title的UIButton，這篇是我最開(kāi)始參考的烘挫，只有代碼，沒(méi)有原理
