邏輯思路:
button設置圖片和文字后后再設置titleEdgeInsets屬性和 imageEdgeInsets屬性實現button的上圖下文,上文下圖,左圖右文,右圖左文的重新排列(自由設置圖文間距)

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是用來擴大或者縮小控件的矩形區域,通常在視圖布局期間修改視圖框架,正值縮小視圖框架, 負值擴大視圖框架

##左文右圖
默認情況下，button的image和label是緊貼著居中的，那如果想要image在右邊，label在左邊應該怎么辦呢？

答案就是:

self.imageEdgeInsets = UIEdgeInsetsMake(0, labelWidth + spacing/2, 0, -(labelWidth + spacing/2));
self.titleEdgeInsets = UIEdgeInsetsMake(0, -(imageHeight + spacing/2), 0, imageHeight + spacing/2);

其實就是這一句：This property is used only for positioning the image during layout
其實titleEdgeInsets屬性和 imageEdgeInsets屬性只是在畫這個button出來的時候用來調整image和label位置的屬性，并不影響button本身的大小。
UIEdgeInsetsMake(CGFloat top, CGFloat left, CGFloat bottom, CGFloat right)

它們只是image和button相較于原來位置的偏移量，那什么是原來的位置呢？就是沒有設置edgeInset時候的位置了
imageEdgeInsets,titleEdgeInsets默認為0，spacing為圖片文字間隔
如果image在右邊，label在左邊，二者的上下的偏移量相較于原來的位置沒有改變,為0。

左右偏移量的計算：

偏移的距離：
imageOffset = | 初始X - 修改后X | = orgLabW + spacing/2

備注

• orgLabW 代表titleLable在button內部的初始(original)顯示寬度，當button的寬度不夠時，titleLable會被壓縮，此時寬度小于完全顯示時的真實寬度trueLabW，參見后圖。
• 寬度不夠的情況下titleLable會優先被壓縮，imageView的寬度一般是正確的
• 此處認為orgLabH = trueLabH，沒有考慮label多行顯示的情形

正負值判斷：
假設只改變image的一條邊距的偏移量，如果image縮小，偏移量為正，反之為負；
self.imageEdgeInsets = UIEdgeInsetsMake(0, orgLabW + spacing/2, 0, -(orgLabW + spacing/2));
label計算過程同理：
self.titleEdgeInsets = UIEdgeInsetsMake(0, -(imgW + spacing/2), 0, imgW + spacing/2);
##上圖下文

上圖下文和上文下圖計算方式一樣（實際四種模式計算方式都一樣），下面就以上圖下文的計算為例。

偏移距離：
imageOffsetX = labW/2
imageOffsetY = labH/2 + spacing/2
labelOffsetX = imgW/2
labelOffsetY = imgH/2 + spacing/2

提示：
在實際應用中發現這種情況在button的寬度大于 ImageWidth+lableWidth是沒有問題的，但是當小于的時候就不行了

---

##為什么呢##
比較上兩張圖發現lable中心點的位置是正確的，只是左右的邊緣的偏移量(決定寬度)沒有計算好，ImageView的中心點位置是錯誤的，大小是正確的。

CGFloat labelWidth = [self.titleLabel.text sizeWithAttributes:@{NSFontAttributeName:self.titleLabel.font}].width; CGFloat labelHeight = [self.titleLabel.text sizeWithAttributes:@{NSFontAttributeName:self.titleLabel.font}].height;

這里計算的是lable的真實寬度，而button寬度不夠時，label會被壓縮的顯示寬度是小于真是寬度的，我們在重新排列的時候計算Image中心點的位置應該用lable的顯示寬度而不是真實寬度。
同樣，計算lable左右邊緣的偏移量也應該把lable的真實寬度考慮進去，詳情見下圖
X1，X2分別為lable的左右邊緣x值。

偏移距離：

//image中心移動的x距離 CGFloat imageOffsetX = orgLabW /2 ; //image中心移動的y距離 CGFloat imageOffsetY = orgLabH / 2 + spacing / 2; //label左邊緣移動的x距離 CGFloat labelOffsetX1 = imgW/2 - orgLabW/2 + trueLabW/2; //label右邊緣移動的x距離 CGFloat labelOffsetX2 = imgW/2 + orgLabW/2 - trueLabW/2; //label中心移動的y距離 CGFloat labelOffsetY = imgH / 2 + spacing / 2;

注意：當button寬度夠大時 orgLabW = trueLabW此時labelOffsetX1 = labelOffsetX2 = imgW/2和上面情況一樣一樣的，也就是說這種計算方法也適用于上面的情景

正負值判斷后結果為：
self.imageEdgeInsets = UIEdgeInsetsMake(-imageOffsetY, imageOffsetX, imageOffsetY, -imageOffsetX);
self.titleEdgeInsets = UIEdgeInsetsMake(labelOffsetY, -labelOffsetX1, -labelOffsetY, labelOffsetX2);
##上文下圖

偏移距離：

//image中心移動的x距離 CGFloat imageOffsetX = orgLabW /2 ; //image中心移動的y距離 CGFloat imageOffsetY = orgLabH / 2 + spacing / 2; //label左邊緣移動的x距離 CGFloat labelOffsetX1 = imgW/2 - orgLabW/2 + trueLabW/2; //label右邊緣移動的x距離 CGFloat labelOffsetX2 = imgW/2 + orgLabW/2 - trueLabW/2; //label中心移動的y距離 CGFloat labelOffsetY = imgH / 2 + spacing / 2;

結果竟然跟上面一樣，說明這種方法有點笨了，肯定有不同的理解方法與解決方案，在這里就拋磚引玉了，歡迎交流。

正負值判斷后結果為：
self.imageEdgeInsets = UIEdgeInsetsMake(imageOffsetY, imageOffsetX, -imageOffsetY, -imageOffsetX);
self.titleEdgeInsets = UIEdgeInsetsMake(-labelOffsetY, -labelOffsetX1, labelOffsetY, labelOffsetX2);
##實際應用

這些處理是專門對Button進行的，最好的應用場景當然是寫到Button的Category 里面，方便外面調用。

#import <UIKit/UIKit.h>typedef NS_ENUM(NSInteger, ZXImagePosition) {ZXImagePositionLeft = 0, //圖片在左，文字在右，默認ZXImagePositionRight = 1, //圖片在右，文字在左ZXImagePositionTop = 2, //圖片在上，文字在下ZXImagePositionBottom = 3, //圖片在下，文字在上 };@interface UIButton (ChaoGe)/*** 利用UIButton的titleEdgeInsets和imageEdgeInsets來實現文字和圖片的自由排列* 注意：這個方法需要在設置圖片和文字之后才可以調用，且button的大小要大于 圖片大小+spacing** @param spacing 圖片和文字的間隔*/ - (void)setImagePosition:(ZXImagePosition)postion spacing:(CGFloat)spacing;@end #import "UIButton+ChaoGe.h"@implementation UIButton (ChaoGe)- (void)setImagePosition:(ZXImagePosition)postion spacing:(CGFloat)spacing {CGFloat imgW = self.imageView.image.size.width;CGFloat imgH = self.imageView.image.size.height;CGSize origLabSize = self.titleLabel.bounds.size;CGFloat orgLabW = origLabSize.width;CGFloat orgLabH = origLabSize.height;CGSize trueSize = [self.titleLabel sizeThatFits:CGSizeMake(MAXFLOAT, MAXFLOAT)];CGFloat trueLabW = trueSize.width;//image中心移動的x距離CGFloat imageOffsetX = orgLabW/2 ;//image中心移動的y距離CGFloat imageOffsetY = orgLabH/2 + spacing/2;//label左邊緣移動的x距離CGFloat labelOffsetX1 = imgW/2 - orgLabW/2 + trueLabW/2;//label右邊緣移動的x距離CGFloat labelOffsetX2 = imgW/2 + orgLabW/2 - trueLabW/2;//label中心移動的y距離CGFloat labelOffsetY = imgH/2 + spacing/2;switch (postion) {case ZXImagePositionLeft:self.imageEdgeInsets = UIEdgeInsetsMake(0, -spacing/2, 0, spacing/2);self.titleEdgeInsets = UIEdgeInsetsMake(0, spacing/2, 0, -spacing/2);break;case ZXImagePositionRight:self.imageEdgeInsets = UIEdgeInsetsMake(0, orgLabW + spacing/2, 0, -(orgLabW + spacing/2));self.titleEdgeInsets = UIEdgeInsetsMake(0, -(imgW + spacing/2), 0, imgW + spacing/2);break;case ZXImagePositionTop:self.imageEdgeInsets = UIEdgeInsetsMake(-imageOffsetY, imageOffsetX, imageOffsetY, -imageOffsetX);self.titleEdgeInsets = UIEdgeInsetsMake(labelOffsetY, -labelOffsetX1, -labelOffsetY, labelOffsetX2);break;case ZXImagePositionBottom:self.imageEdgeInsets = UIEdgeInsetsMake(imageOffsetY, imageOffsetX, -imageOffsetY, -imageOffsetX);self.titleEdgeInsets = UIEdgeInsetsMake(-labelOffsetY, -labelOffsetX1, labelOffsetY, labelOffsetX2);break;default:break;}}@end

##注意事項

• 在設置圖片和文字之后，并且button的size不能為0調用本方法才能計算出正確的偏移量。
• 本次更新此方法已經適配了button的寬度小于 imageView+titleLable寬度和的情況，但是button的大小至少要大于圖片的大小。
• 每次修改button文字后都要再調用一下該方法，否則排版可能會混亂。

總結

以上是生活随笔為你收集整理的UIButton 的图文混排的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。