前記
在開(kāi)發(fā)中，我們經(jīng)常會(huì)遇到這么一種情況辣吃，就是一個(gè)按鈕上面有圖片也有文字动遭，但是往往設(shè)計(jì)并不是我們想要的那種，比如可能圖片在上神得，文字在下厘惦，或者圖片在左，文字在右哩簿，關(guān)鍵是還有一定的距離宵蕉，并不是系統(tǒng)默認(rèn)UIButton中，圖片和文字的間距节榜。當(dāng)然羡玛，這調(diào)整圖片和文字的距離的小事，是難不倒大家的宗苍，因?yàn)榇蠹叶贾兰诟澹?code>UIButton中薄榛，有這么兩個(gè)屬性titleEdgeInsets和imageEdgeInsets
關(guān)于屬性
關(guān)于titleEdgeInsets和imageEdgeInsets這兩個(gè)屬性，簡(jiǎn)單介紹下：
titleEdgeInsets是title相對(duì)于其上下左右的inset让歼，跟tableView的contentInset是類似的敞恋，如果只有title，那它上下左右都是相對(duì)于button的谋右，imageEdgeInsets也是一樣
如果同時(shí)有image和title硬猫，那這時(shí)候image的上左下是相對(duì)于button，右邊是相對(duì)于title的改执；title的上右下是相對(duì)于button啸蜜，左邊是相對(duì)于image的，也就是說(shuō)image是默認(rèn)居左的天梧。
通過(guò)以上兩個(gè)屬性，可以很輕松的實(shí)現(xiàn)文字和圖片的位置及距離的調(diào)整霞丧，如果每次在用的時(shí)候呢岗，都去重新寫(xiě)一片，難免會(huì)很麻煩蛹尝，鑒于此后豫，之前在謀篇博客中（具體忘了，原博主看到請(qǐng)勿見(jiàn)怪）突那，看到過(guò)用category封裝的挫酿，于是我在項(xiàng)目中，也寫(xiě)了一個(gè)category愕难，其中也列舉了四種不同的枚舉來(lái)表現(xiàn)其不同的場(chǎng)景
枚舉類型
// 定義一個(gè)枚舉（包含了四種類型的button）
typedef NS_ENUM(NSUInteger, GLButtonEdgeInsetsStyle) {
GLButtonEdgeInsetsStyleTop, // image在上早龟，label在下
GLButtonEdgeInsetsStyleLeft, // image在左，label在右
GLButtonEdgeInsetsStyleBottom, // image在下猫缭，label在上
GLButtonEdgeInsetsStyleRight // image在右葱弟，label在左
};
并且定義了一個(gè)簡(jiǎn)單使用的方法：
/**
* 設(shè)置button的titleLabel和imageView的布局樣式，及間距
*
* @param style titleLabel和imageView的布局樣式
* @param space titleLabel和imageView的間距
*/
- (void)layoutButtonWithEdgeInsetsStyle:(GLButtonEdgeInsetsStyle)style
imageTitleSpace:(CGFloat)space;
其中space是指圖片和文字之間的間距猜丹，style對(duì)應(yīng)上面的枚舉芝加，可以針對(duì)性的選擇
具體實(shí)現(xiàn)方法
- (void)layoutButtonWithEdgeInsetsStyle:(GLButtonEdgeInsetsStyle)style
imageTitleSpace:(CGFloat)space {
/**
* 知識(shí)點(diǎn)：titleEdgeInsets是title相對(duì)于其上下左右的inset，跟tableView的contentInset是類似的射窒，
* 如果只有title藏杖，那它上下左右都是相對(duì)于button的，image也是一樣脉顿；
* 如果同時(shí)有image和label蝌麸，那這時(shí)候image的上左下是相對(duì)于button，右邊是相對(duì)于label的艾疟；title的上右下是相對(duì)于button祥楣，左邊是相對(duì)于image的开财。
*/
// 1. 得到imageView和titleLabel的寬、高
CGFloat imageWith = self.imageView.image.size.width;
CGFloat imageHeight = self.imageView.image.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 GLButtonEdgeInsetsStyleTop:
{
imageEdgeInsets = UIEdgeInsetsMake(-labelHeight-space/2.0, 0, 0, -labelWidth);
labelEdgeInsets = UIEdgeInsetsMake(0, -imageWith, -imageHeight-space/2.0, 0);
}
break;
case GLButtonEdgeInsetsStyleLeft:
{
imageEdgeInsets = UIEdgeInsetsMake(0, -space/2.0, 0, space/2.0);
labelEdgeInsets = UIEdgeInsetsMake(0, space/2.0, 0, -space/2.0);
}
break;
case GLButtonEdgeInsetsStyleBottom:
{
imageEdgeInsets = UIEdgeInsetsMake(0, 0, -labelHeight-space/2.0, -labelWidth);
labelEdgeInsets = UIEdgeInsetsMake(-imageHeight-space/2.0, -imageWith, 0, 0);
}
break;
case GLButtonEdgeInsetsStyleRight:
{
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;
}
實(shí)現(xiàn)效果
其實(shí)思路很簡(jiǎn)單责鳍，這里只是簡(jiǎn)單封裝了下，還是留一個(gè)demo地址兽间，方便大家
