邏輯思路:
button設(shè)置圖片和文字后后再設(shè)置titleEdgeInsets屬性和 imageEdgeInsets屬性實(shí)現(xiàn)button的上圖下文,上文下圖,左圖右文,右圖左文的重新排列(自由設(shè)置圖文間距)
UIEdgInsets官方解釋:
Edge inset values are applied to a rectangle to shrink or expand the area represented by that rectangle. Typically, edge insets are used during view layout to modify the view’s frame. Positive values cause the frame to be inset (or shrunk) by the specified amount. Negative values cause the frame to be outset (or expanded) by the specified amount.
說人話就是:UIEdgInsets是用來擴(kuò)大或者縮小控件的矩形區(qū)域,通常在視圖布局期間修改視圖框架,正值縮小視圖框架, 負(fù)值擴(kuò)大視圖框架
左文右圖
默認(rèn)情況下，button的image和label是緊貼著居中的，那如果想要image在右邊，label在左邊應(yīng)該怎么辦呢？
答案就是:
self.imageEdgeInsets = UIEdgeInsetsMake(0, labelWidth + spacing/2, 0, -(labelWidth + spacing/2));
self.titleEdgeInsets = UIEdgeInsetsMake(0, -(imageHeight + spacing/2), 0, imageHeight + spacing/2);
其實(shí)就是這一句：This property is used only for positioning the image during layout
其實(shí)titleEdgeInsets屬性和 imageEdgeInsets屬性只是在畫這個button出來的時候用來調(diào)整image和label位置的屬性，并不影響button本身的大小。
UIEdgeInsetsMake(CGFloat top, CGFloat left, CGFloat bottom, CGFloat right)
它們只是image和button相較于原來位置的偏移量，那什么是原來的位置呢？就是沒有設(shè)置edgeInset時候的位置了
imageEdgeInsets,titleEdgeInsets默認(rèn)為0，spacing為圖片文字間隔
如果image在右邊，label在左邊，二者的上下的偏移量相較于原來的位置沒有改變,為0。
左右偏移量的計(jì)算：
偏移的距離：
imageOffset = | 初始X - 修改后X | = showLabW + spacing/2
備注
- showLabW 代表titleLable在button內(nèi)部的初始(original)顯示寬度，當(dāng)button的寬度不夠時，titleLable會被壓縮，此時寬度小于完全顯示時的真實(shí)寬度trueLabW，參見后圖。
- 寬度不夠的情況下titleLable會優(yōu)先被壓縮，imageView的寬度一般是正確的
- 此處認(rèn)為showLabH = trueLabH，沒有考慮label多行顯示的情形
正負(fù)值判斷：
假設(shè)只改變image的一條邊距的偏移量，如果image縮小，偏移量為正，反之為負(fù)；
self.imageEdgeInsets = UIEdgeInsetsMake(0, showLabW + spacing/2, 0, -(showLabW + spacing/2));
label計(jì)算過程同理：
self.titleEdgeInsets = UIEdgeInsetsMake(0, -(imgW + spacing/2), 0, imgW + spacing/2);
上圖下文
上圖下文和上文下圖計(jì)算方式一樣（實(shí)際四種模式計(jì)算方式都一樣），下面就以上圖下文的計(jì)算為例。
偏移距離：
imageOffsetX = labW/2
imageOffsetY = labH/2 + spacing/2
labelOffsetX = imgW/2
labelOffsetY = imgH/2 + spacing/2
提示：
在實(shí)際應(yīng)用中發(fā)現(xiàn)這種情況在button的寬度大于 ImageWidth+lableWidth是沒有問題的，但是當(dāng)小于的時候就不行了
為什么呢
比較上兩張圖發(fā)現(xiàn)lable中心點(diǎn)的位置是正確的，只是左右的邊緣的偏移量(決定寬度)沒有計(jì)算好，ImageView的中心點(diǎn)位置是錯誤的，大小是正確的。
CGFloat labelWidth = [self.titleLabel.text sizeWithAttributes:@{NSFontAttributeName:self.titleLabel.font}].width;
CGFloat labelHeight = [self.titleLabel.text sizeWithAttributes:@{NSFontAttributeName:self.titleLabel.font}].height;
這里計(jì)算的是lable的真實(shí)寬度，而button寬度不夠時，label會被壓縮的顯示寬度是小于真實(shí)寬度的，我們在重新排列的時候計(jì)算Image中心點(diǎn)的位置應(yīng)該用lable的顯示寬度而不是真實(shí)寬度。
同樣，計(jì)算lable左右邊緣的偏移量也應(yīng)該把lable的真實(shí)寬度考慮進(jìn)去，詳情見下圖
X1，X2分別為lable的左右邊緣x值。
偏移距離：
//image中心移動的x距離
CGFloat imageOffsetX = showLabW /2 ;
//image中心移動的y距離
CGFloat imageOffsetY = showLabH / 2 + spacing / 2;
//label左邊緣移動的x距離
CGFloat labelOffsetX1 = imgW/2 - showLabW/2 + trueLabW/2;
//label右邊緣移動的x距離
CGFloat labelOffsetX2 = imgW/2 + showLabW/2 - trueLabW/2;
//label中心移動的y距離
CGFloat labelOffsetY = imgH / 2 + spacing / 2;
注意：當(dāng)button寬度夠大時 showLabW = trueLabW此時labelOffsetX1 = labelOffsetX2 = imgW/2和上面情況一樣一樣的，也就是說這種計(jì)算方法也適用于上面的情景
正負(fù)值判斷后結(jié)果為：
self.imageEdgeInsets = UIEdgeInsetsMake(-imageOffsetY, imageOffsetX, imageOffsetY, -imageOffsetX);
self.titleEdgeInsets = UIEdgeInsetsMake(labelOffsetY, -labelOffsetX1, -labelOffsetY, labelOffsetX2);
上文下圖
偏移距離：
//image中心移動的x距離
CGFloat imageOffsetX = showLabW /2 ;
//image中心移動的y距離
CGFloat imageOffsetY = showLabH / 2 + spacing / 2;
//label左邊緣移動的x距離
CGFloat labelOffsetX1 = imgW/2 - showLabW/2 + trueLabW/2;
//label右邊緣移動的x距離
CGFloat labelOffsetX2 = imgW/2 + showLabW/2 - trueLabW/2;
//label中心移動的y距離
CGFloat labelOffsetY = imgH / 2 + spacing / 2;
結(jié)果竟然跟上面一樣，說明這種方法有點(diǎn)笨了，肯定有不同的理解方法與解決方案，在這里就拋磚引玉了，歡迎交流。
正負(fù)值判斷后結(jié)果為：
self.imageEdgeInsets = UIEdgeInsetsMake(imageOffsetY, imageOffsetX, -imageOffsetY, -imageOffsetX);
self.titleEdgeInsets = UIEdgeInsetsMake(-labelOffsetY, -labelOffsetX1, labelOffsetY, labelOffsetX2);
實(shí)際應(yīng)用
這些處理是專門對Button進(jìn)行的，最好的應(yīng)用場景當(dāng)然是寫到Button的Category 里面，方便外面調(diào)用。
#import <UIKit/UIKit.h>
typedef NS_ENUM(NSInteger, ZCImagePosition) {
ZCImagePositionLeft, //圖片在左，標(biāo)題在右，默認(rèn)風(fēng)格
ZCImagePositionRight, //圖片在右，標(biāo)題在左
ZCImagePositionTop, //圖片在上，標(biāo)題在下
ZCImagePositionBottom //圖片在下，標(biāo)題在上
};
NS_ASSUME_NONNULL_BEGIN
/**
默認(rèn)情況下，imageEdgeInsets和titleEdgeInsets都是0。先不考慮height,
if (button.width小于imageView上image的width){圖像會被壓縮，文字不顯示}
if (button.width < imageView.width + label.width){圖像正常顯示，文字顯示不全,這種情況下豎直排列時,要特別注意,已解決}
http://www.lxweimin.com/p/f521505beed9
if (button.width >＝ imageView.width + label.width){圖像和文字都居中顯示，imageView在左，label在右，中間沒有空隙}
*/
@interface UIButton (EdgeInsets)
/**
* 利用UIButton的titleEdgeInsets和imageEdgeInsets來實(shí)現(xiàn)文字和圖片的自由排列
* 注意：這個方法需要在設(shè)置圖片和文字之后才可以調(diào)用，且button的大小要大于 圖片大小spacing
*
* @param spacing 圖片和文字的間隔
*/
- (void)setImagePosition:(ZCImagePosition)postion spacing:(CGFloat)spacing;
/**
* 利用UIButton的titleEdgeInsets和imageEdgeInsets來實(shí)現(xiàn)文字和圖片的自由排列
* 注意：這個方法需要在設(shè)置圖片和文字之后才可以調(diào)用，且button的大小要大于 圖片大小+文字大小+spacing
*
* @param margin 圖片、文字離button邊框的距離
*/
- (void)setImagePosition:(ZCImagePosition)postion WithMargin:(CGFloat )margin;
@end
NS_ASSUME_NONNULL_END
#import "UIButton+EdgeInsets.h"
@implementation UIButton (EdgeInsets)
#pragma mark -- 按鈕上圖文混排
- (void)setImagePosition:(ZCImagePosition)postion spacing:(CGFloat)spacing {
self.titleEdgeInsets = self.imageEdgeInsets = UIEdgeInsetsZero;
CGFloat imgW = self.imageView.image.size.width;
CGFloat imgH = self.imageView.image.size.height;
CGSize showLabSize = self.titleLabel.bounds.size;
CGFloat showLabW = showLabSize.width;
CGFloat showLabH = showLabSize.height;
CGSize trueSize = [self.titleLabel sizeThatFits:CGSizeMake(MAXFLOAT, MAXFLOAT)];
CGFloat trueLabW = trueSize.width;
//image中心移動的x距離
CGFloat imageOffsetX = showLabW/2 ;
//image中心移動的y距離
CGFloat imageOffsetY = showLabH/2 + spacing/2;
//label左邊緣移動的x距離
CGFloat labelOffsetX1 = imgW/2 - showLabW/2 + trueLabW/2;
//label右邊緣移動的x距離
CGFloat labelOffsetX2 = fabs(imgW/2 + showLabW/2 - trueLabW/2);
//label中心移動的y距離
CGFloat labelOffsetY = imgH/2 + spacing/2;
switch (postion) {
case ZCImagePositionLeft:
self.imageEdgeInsets = UIEdgeInsetsMake(0, -spacing/2, 0, spacing/2);
self.titleEdgeInsets = UIEdgeInsetsMake(0, spacing/2, 0, -spacing/2);
break;
case ZCImagePositionRight:
self.imageEdgeInsets = UIEdgeInsetsMake(0, showLabW + spacing/2, 0, -(showLabW + spacing/2));
self.titleEdgeInsets = UIEdgeInsetsMake(0, -(imgW + spacing/2), 0, imgW + spacing/2);
break;
case ZCImagePositionTop:
self.imageEdgeInsets = UIEdgeInsetsMake(-imageOffsetY, imageOffsetX, imageOffsetY, -imageOffsetX);
self.titleEdgeInsets = UIEdgeInsetsMake(labelOffsetY, -labelOffsetX1, -labelOffsetY, labelOffsetX2);
break;
case ZCImagePositionBottom:
self.imageEdgeInsets = UIEdgeInsetsMake(imageOffsetY, imageOffsetX, -imageOffsetY, -imageOffsetX);
self.titleEdgeInsets = UIEdgeInsetsMake(-labelOffsetY, -labelOffsetX1, labelOffsetY, labelOffsetX2);
break;
default:
break;
}
}
/**根據(jù)圖文距邊框的距離調(diào)整圖文間距*/
- (void)setImagePosition:(ZCImagePosition)postion WithMargin:(CGFloat )margin{
if (postion == ZCImagePositionLeft || postion == ZCImagePositionRight) {
CGFloat imageWith = self.imageView.image.size.width;
CGFloat labelWidth = [self.titleLabel sizeThatFits:CGSizeMake(MAXFLOAT, MAXFLOAT)].width;
CGFloat spacing = self.bounds.size.width - imageWith - labelWidth - 2*margin;
[self setImagePosition:postion spacing:spacing];
}else {
CGFloat imageHeight = self.imageView.image.size.height;
CGFloat labelHeight = [self.titleLabel sizeThatFits:CGSizeMake(MAXFLOAT, MAXFLOAT)].height;
CGFloat spacing = self.bounds.size.height - imageHeight - labelHeight - 2*margin;
[self setImagePosition:postion spacing:spacing];
}
}
@end
注意事項(xiàng)
- 在設(shè)置圖片和文字之后，并且button的size不能為0調(diào)用本方法才能計(jì)算出正確的偏移量。
- 每次修改button的圖片或文字后都要再調(diào)用一下該方法，否則排版可能會混亂。
