圖片和文字組合的按鈕比較常見名段，起初不會設(shè)置按鈕這個兩個屬性，為了趕進(jìn)度泣懊，直接再按鈕上加了個圖片和label伸辟，顯然是不太合理的。工作之余好好的研究了下馍刮，終于理解了imageEdgeInsets和titleEdgeInsets信夫。首先我們看一下原理，針對content 水平卡啰、垂直居中的情況去分析静稻，代碼設(shè)置如下：
button.contentHorizontalAlignment = UIControlContentHorizontalAlignmentCenter;
button.contentVerticalAlignment = UIControlContentVerticalAlignmentCenter;
xib中按鈕的設(shè)置如圖：
效果如下,默認(rèn)是左右排列，圖片在左匈辱，文字在右
我們期許最后要有如下的效果：
首先引入padding這個概念振湾，CSS用到的多，比如下左的聊天氣泡亡脸，其實就是黑色框距離藍(lán)色氣泡的位置押搪，下右的圖片是CSS里的各種定義树酪，這里我們只需要知道padding 往中心偏移的為正，從中心向外都為負(fù)
針對右上的最中心的藍(lán)色矩形來說（針對父容器綠色矩形）
- padding-top: 20px;
- padding-left: 20px;
- padding-bottom: 20px;
- padding-right: 20px
當(dāng)然大州，給負(fù)值的一側(cè)就會超出父容器
接下來說正事
按鈕中的image续语，如果我們想讓它相對于原來的位置向右移動20，向上移動10厦画，那么這里父容器就是原來image的位置疮茄，新的位置上下左右移動的位置都是相對于父容器，如圖根暑，實線的矩形表示原來按鈕中image的位置力试，虛線的矩形表示，我們移動后的位置
- top: -10px; 相對于原來top-border是背離中心(紅色圓形)方向即向外擴(kuò)張
- bottom: 10px; 相對于原來bottom-border是靠近中心(紅色圓形)方向即向內(nèi)收縮
- left: 20px; 相對于原來left-border是靠近中心(紅色圓形)方向即向內(nèi)收縮
- right: 20px; 相對于原來right-border是背離中心(紅色圓形)方向即向外擴(kuò)張
以上的top购裙、 left懂版、 bottom、 right就是我們將要設(shè)置的躏率，我們打開一個工程去試驗一下
-(void)viewWillLayoutSubviews{
[super viewWillLayoutSubviews];
[self.button setImageEdgeInsets:UIEdgeInsetsMake(-10, 20, 10, -20)];
}
確實是相對于原來的位置移動的躯畴，我們看一下setImageEdgeInsets這個方法的描述
當(dāng)然我的經(jīng)驗是按鈕大小確定以后去設(shè)置，不會有問題薇芝。
以上是原理蓬抄，我們在實際開發(fā)的時候使用一下，我們先看一個簡單圖左文右的
在image和label中插入一個space夯到，紅色虛線為button 的 content(虛線部分嚷缭，image + label)，水平垂直都是居中模式耍贾，若中間插入一個space阅爽，還想保持居中，需要imgae左移半個space荐开，label右移半個space付翁，則content還是居中的，根據(jù)上面的分析晃听，image新的位置相對之前的位置left向外擴(kuò)張(space / 2.0)px百侧，right向內(nèi)收縮(space / 2.0)px，上下沒有動能扒，則
image
- left: -10px;
- right: 10px;
- top: 0px;
- bottom: 0px;
同理label
- left: 10px;
- right: -10px;
- top: 0px;
- bottom: 0px;
再看一個上下排列的
分析一下佣渴，如果還要保持content(虛線部分，image + label)居中初斑，對于上下來說辛润，image是向下移動半個label的高度 + 半個space的高度，label向上移動半個image高度 + 半個space的高度见秤；對于左右來說频蛔，如下圖灵迫，image右移動了半個content寬度減去半個image寬度 即 (imageWidth + labelWidth) / 2.0 - imageWidth / 2.0如下圖
這樣我們拿到button中的image和label的寬高即可，這里注意下 imageView晦溪、label 寬高的獲取方式
// 獲取按鈕圖片的寬高
CGSize imgSize = self.imageView.intrinsicContentSize;
CGFloat imageWidth = imgSize.width;
CGFloat imageHeight = imgSize.height;
// 獲取文字的寬高
CGSize labelSize = self.titleLabel.intrinsicContentSize;
CGFloat labelWidth = labelSize.width;
CGFloat labelHeight = labelSize.height;
那么我們封裝一個類，方便使用挣跋，這里我擴(kuò)展了一個button (PlaceContent)
#import "UIButton+PlaceContent.h"
@implementation UIButton (PlaceContent)
-(void)placeImageTitlePosition:(ZYButtonImagePosition)position space:(CGFloat)space{
// 獲取按鈕圖片的寬高
CGSize imgSize = self.imageView.intrinsicContentSize;
CGFloat imageWidth = imgSize.width;
CGFloat imageHeight = imgSize.height;
// 獲取文字的寬高
CGSize labelSize = self.titleLabel.intrinsicContentSize;
CGFloat labelWidth = labelSize.width;
CGFloat labelHeight = labelSize.height;
#if DEBUG
NSLog(@"按鈕圖片 width: %f height: %f \n", imageWidth, imageHeight);
NSLog(@"按鈕文字 width: %f height: %f \n", labelWidth, labelHeight);
NSLog(@"按鈕大小 width: %f height: %f \n", self.frame.size.width, self.frame.size.height);
#endif
//按鈕圖片文字的位置 EdgeInsets 都是相對原來的位置變化 類似于CSS 里的padding 往內(nèi)側(cè)方向是正
CGFloat titleTop, titleLeft, titleBottom, titleRight;
CGFloat imageTop, imageLeft, imageBottom, imageRight;
switch (position) {
case ZYButtonImagePositionLeft:
// 圖片在左三圆、文字在右;
imageTop = 0;
imageBottom = 0;
imageLeft = -space / 2.0;
imageRight = space / 2.0;
titleTop = 0;
titleBottom = 0;
titleLeft = space / 2;
titleRight = -space / 2;
break;
case ZYButtonImagePositionTop:// 圖片在上，文字在下
imageTop = -(labelHeight / 2.0 + space / 2.0);//圖片上移半個label高度和半個space高度 給label使用
imageBottom = (labelHeight / 2.0 + space / 2.0);
imageLeft = labelWidth / 2.0;
imageRight = -labelWidth / 2.0f;
titleLeft = -imageWidth / 2.0;
titleRight = imageWidth / 2.0;
titleTop = imageHeight / 2.0 + space / 2.0;//文字下移半個image高度和半個space高度
titleBottom = -(imageHeight / 2.0 + space / 2.0);
break;
case ZYButtonImagePositionRight:// 圖片在右避咆，文字在左
imageTop = 0;
imageBottom = 0;
imageRight = -(labelWidth + space / 2.0);
imageLeft = labelWidth + space / 2.0;
titleTop = 0;
titleLeft = -(imageWidth + space / 2.0);
titleBottom = 0;
titleRight = imageWidth + space / 2.0;
break;
case ZYButtonImagePositionBottom:// 圖片在下舟肉，文字在上
imageLeft = (imageWidth + labelWidth) / 2.0 - imageWidth / 2.0;
imageRight = -labelWidth / 2.0;
imageBottom = -(labelHeight / 2.0 + space / 2.0);
imageTop = labelHeight / 2.0 + space / 2.0;//圖片下移半個label高度和半個space高度 給label使用
titleTop = -(imageHeight / 2.0 + space / 2.0);
titleBottom = imageHeight / 2.0 + space / 2.0;
titleLeft = -imageWidth / 2.0;
titleRight = imageWidth / 2.0;
break;
default:
break;
}
self.imageEdgeInsets = UIEdgeInsetsMake(imageTop, imageLeft, imageBottom, imageRight);
self.titleEdgeInsets = UIEdgeInsetsMake(titleTop, titleLeft, titleBottom, titleRight);
}
@end
看下最終執(zhí)行結(jié)果
感謝您閱讀完畢，如有疑問查库，歡迎添加QQ:714387953(蝸牛上高速)路媚。
github:https://github.com/yhl714387953/ButtonContentEdgeInsets
如果有錯誤，歡迎指正樊销，一起切磋整慎，共同進(jìn)步
如果喜歡可以Follow、Star围苫、Fork，都是給我最大的鼓勵
