iOS中UIButton實現各類圖文結合的效果以及原理

時間 2019-12-12

標籤 ios uibutton 實現各類圖文結合效果以及原理欄目 iOS 简体版

原文原文鏈接

iOS的UIButton是一個很是常見並且經常使用的控件，咱們通常用他來實現某個功能的提交以及選擇操做。咱們能夠創建只有文字的Button，也能夠創建只有圖片的Button，具體的需求要看界面設計的具體狀況。有時候咱們但願應用的界面元素是豐富多彩的，有時候但願創建一個圖文結合的控件來響應用戶的手勢操做，所以創建一個即有圖片也有文字的按鈕來實現功能，這個只須要分別調用UIButton的setTitle:forState:和setImage:forSate:兩個方法就能夠實現具備圖片和文字功能的按鈕。可是系統默認的圖文結合的按鈕佈局是：圖片在左邊而文字在右邊，並且總體水平和垂直居中。好比下面這個圖文按鈕：

可是有的時候咱們又但願圖片在右邊而文字在左邊；或者圖片在上邊而文字在下面；或者圖片在按鈕的中間而文字在圖片的下面等等，但咱們又不想放棄使用按鈕這個控件，這時候怎麼辦？事件老是能找到解決方法的，有的人會先創建一個按鈕控件鋪在下面，而在上面分別覆蓋一個UIImageView和UILabel來實現；而有的人則乾脆在UIButton上創建一個UIImageView和UILabel兩個子視圖；而有的人則不會用UIButton來實現圖文結合的功能。前面說的幾個方法看起來有效，也確實會解決問題，但缺點是代碼量會增長，並且必須同時管理UIButton, UIImageView, UILabel這三個總體，若是哪天產品還但願有一個按鈕按下高亮或者按下陰影效果時,你可能又要從新編寫代碼實現需求了。
那麼咱們是否要放棄UIButton呢？答案是否認的，其實UIButton自己是能夠支持各類圖文結合的，既然UIButton上能同時顯示圖片和文字，那就能夠確定的說UIButton裏面自己必定有一個UIImageView和UILabel8子視圖。UIButton*自己就是一個複合控件，他分別提供了兩個屬性：git

@property(nonatomic,readonly,retain)UILabel     *titleLabel NS_AVAILABLE_IOS(3_0);
@property(nonatomic,readonly,retain)UIImageView *imageView  NS_AVAILABLE_IOS(3_0);

須要注意的是這兩個屬性必需要調用完setTitle:forSate:和setImage:forSate:後才能獲取到，不然有可能會返回nil。其中的 titleLabel是用來保存文字的而imageView是用來保存圖片的。那既然UIButton自己就帶有一個圖片控件和文本控件，那是否是咱們只要分別經過調整子控件的frame值就能實現咱們想要的圖片文字的任何佈局呢？答案是否認的。實驗證實經過設置titleLabel、imageView的frame值根本不會改變按鈕裏面圖片在左而文字在右的格局。要想實現功能就必須使用另外兩個屬性：github

@property(nonatomic)         UIEdgeInsets titleEdgeInsets;   // default is UIEdgeInsetsZero
@property(nonatomic)         UIEdgeInsets imageEdgeInsets;   // default is UIEdgeInsetsZero

這兩個屬性是分別用來調整按鈕中文本的偏移縮進以及圖片的偏移縮進的，他們都是一個UIEdgeInsets對象，默認的值都是0，也就是默認的值都是0的狀況下按鈕的圖片和文字垂直居中，並且圖片在左邊文字在右邊，並且圖片文本總體水平居中。而咱們則能夠經過調整titleEdgeInsets和imageEdgeInsets的值來實現咱們想要的任何圖文佈局的狀況，甚至咱們但願圖片和文字之間還要保留一些間隔的狀況。怎麼調整？調整多少爲最合適？ide

在調整以前咱們先定義幾個特定的變量值：佈局

CGRect titleRect = titleLabel.frame;        //文本控件在按鈕中的frame值。
CGRect imageRect = imageView.frame;  //圖片控件在按鈕中的frame值。
CGFloat padding;                                     //用於指定文本和圖片的間隔值。
CGFloat selfWidth;                                   //按鈕控件的寬度
CGFloat selfHeight;                                  //按鈕控件的高度
CGFloat totalHeight=titleRect.size.height+padding+imageRect.size.height;  //圖文上下佈局時所佔用的總高度，注意這裏也算上他們之間的間隔值padding

咱們能夠經過更改按鈕的titleEdgeInsets和imageEdgeInsets的值調整文本和圖片的位置。若是咱們想往右移動20的話，那麼就應該同時設置UIEdgeInsets的left=20, right=-20，而若是咱們想往上移動20的話，那麼就應該應該同時設置UIEdgeInsets的top=-20,bottom=20。下面咱們就分別經過調整按鈕的titleEdgeInsets和imageEdgeInsets的值來實現各類圖文結合的效果：測試

1、圖片在左，文字在右，總體居中，調整間距

這種方式是按鈕默認的圖文佈局方式，由於要調整圖片和文本的間距，因此只須要文本右移padding/2而圖片左移padding/2值就能夠了。設置的代碼爲：atom

titleEdgeInsets =UIEdgeInsetsMake(0,
                                     padding/2,
                                     0,
                                     -padding/2);
                
  imageEdgeInsets = UIEdgeInsetsMake(0,
                                     -padding/2,
                                     0,
                                     padding/2);

2、圖片在右，文字在左，總體居中

要實現這種佈局只須要將文字往左偏移圖片的寬度而且再往左偏移padding/2就能夠了，而圖片則只須要往右偏移文本的寬度並再往右偏移padding/2就能夠了。設置的代碼爲：spa

titleEdgeInsets =UIEdgeInsetsMake(0,
                                     -(imageRect.size.width + padding/2),
                                     0,
                                     (imageRect.size.width + padding/2));
            
  imageEdgeInsets =UIEdgeInsetsMake(0,
                                     (titleRect.size.width+ padding/2),
                                     0,
                                     -(titleRect.size.width+ padding/2));

3、圖片在上，文字在下，總體居中

這種佈局下當圖片和文字要求垂直居中後，新的圖片的頂部位置應該等於(selfHeight - totalHeight)/2，所以垂直須要偏移的值就是新的位置減去原來的位置imageRect.origin.y；而新的圖片的水平中心點要等於selfWidth/2，而原來的圖片的水平中心點等於imageRect.origin.x + imageRect.size.width/2，二者相減就是水平須要偏移的值。而新的文本的頂部位置應該等於新的圖片的頂部位置(selfHeight - totalHeight)/2 + 圖片的高度imageRect.size.height + 間隔padding ,所以垂直須要偏移的值就是新的頂部值減去原來的頂部位置titleRect.origin.y; 而新的文本的水平中心點也是selfWidth/2，而原來的文本的水平中心點是titleRect.origin.x + titleRect.size.width/2，二者相減就是水平須要偏移的值，又由於默認的狀況下當按鈕比較小時會自動保留圖片的尺寸和將文字部分縮小，由於當咱們實現文字和圖片上下佈局時，須要將文字的區域擴展到整個按鈕部分，不然將會縮小按鈕的文字的寬度，由於按鈕的寬度爲selfWidth,而文字的默認寬度是titleRect.size.width,因此上面的實現將文本移到中間後還須要分別向兩邊進行拉伸(selfWith - titleRect.size.width)/2來保證文本填充滿全部的按鈕區域，在下面的各類樣式中凡是文字和圖片垂直居中的狀況下都要考慮這種狀況 設置的代碼爲：設計

titleEdgeInsets =UIEdgeInsetsMake(((selfHeight - totalHeight)/2 + imageRect.size.height + padding - titleRect.origin.y),
                                     (selfWidth/2 - titleRect.origin.x - titleRect.size.width /2) - (selfWidth - titleRect.size.width) /2,
                                     -((selfHeight - totalHeight)/2 + imageRect.size.height + padding - titleRect.origin.y),
                                     -(selfWidth/2 - titleRect.origin.x - titleRect.size.width /2) - (selfWidth - titleRect.size.width) /2);
            
  imageEdgeInsets =UIEdgeInsetsMake(((selfHeight - totalHeight)/2 - imageRect.origin.y),
                                     (selfWidth /2 - imageRect.origin.x - imageRect.size.width /2),
                                     -((selfHeight - totalHeight)/2 - imageRect.origin.y),
                                     -(selfWidth /2 - imageRect.origin.x - imageRect.size.width /2));

4、圖片在下，文字在上，總體居中

這種佈局就是上面的文字和圖片位置調換，所以設置代碼爲：code

titleEdgeInsets =UIEdgeInsetsMake(((selfHeight - totalHeight)/2 - titleRect.origin.y),
                                     (selfWidth/2 - titleRect.origin.x - titleRect.size.width /2) - (selfWidth - titleRect.size.width) /2,
                                     -((selfHeight - totalHeight)/2 - titleRect.origin.y),
                                     -(selfWidth/2 - titleRect.origin.x - titleRect.size.width /2) - (selfWidth - titleRect.size.width) /2);
            
  imageEdgeInsets =UIEdgeInsetsMake(((selfHeight - totalHeight)/2 + titleRect.size.height + padding - imageRect.origin.y),
                                     (selfWidth /2 - imageRect.origin.x - imageRect.size.width /2),
                                     -((selfHeight - totalHeight)/2 + titleRect.size.height + padding - imageRect.origin.y),
                                     -(selfWidth /2 - imageRect.origin.x - imageRect.size.width /2));

5、圖片保持居中，而文字左右居中且頂部距離按鈕頂部

這種方式要求圖片在按鈕中居中，而文字則要求左右居中而垂直方向位置則是距離按鈕頂部的間隔值。上面由於描述了水平居中的調整，所以這裏就不介紹了，只介紹垂直方向的調整。由於要求圖片要垂直居中，所以不須要調整垂直偏移。而文本則要調整爲距離頂部的間隔值，也就是新的文本的頂部值等於padding, 而原來頂部值是titleRect.origin.y，所以只須要偏移titleRect.origin.y - padding就能夠了。設置代碼爲：orm

titleEdgeInsets =UIEdgeInsetsMake(-(titleRect.origin.y - padding),
                                     (selfWidth /2 -  titleRect.origin.x - titleRect.size.width /2) - (selfWidth - titleRect.size.width) /2,
                                     (titleRect.origin.y - padding),
                                     -(selfWidth /2 -  titleRect.origin.x - titleRect.size.width /2) - (selfWidth - titleRect.size.width) /2);
            
  imageEdgeInsets =UIEdgeInsetsMake(0,
                                     (selfWidth /2 - imageRect.origin.x - imageRect.size.width /2),
                                     0,
                                     -(selfWidth /2 - imageRect.origin.x - imageRect.size.width /2));

6、圖片保持居中，而文字水平居中且底部距離按鈕底部

這種方式要求圖片在按鈕居中，而文字則要求左右居中而垂直方向的底部位置則是距離按鈕底部的間隔值。圖片的調整上面有介紹，而文字的水平調整上面也有說到，這裏面只說文字的垂直調整。文字新的底部位置等於selfHeight - padding, 而舊的底部位置是titleRect.size.height + titleRect.origin.y，所以要偏移的位置就是二者相減的值。代碼的設置爲：

titleEdgeInsets =UIEdgeInsetsMake((selfHeight - padding - titleRect.origin.y - titleRect.size.height),
                                     (selfWidth /2 -  titleRect.origin.x - titleRect.size.width /2) - (selfWidth - titleRect.size.width) /2,
                                     -(selfHeight - padding - titleRect.origin.y - titleRect.size.height),
                                     -(selfWidth /2 -  titleRect.origin.x - titleRect.size.width /2) - (selfWidth - titleRect.size.width) /2);
            
  imageEdgeInsets =UIEdgeInsetsMake(0,
                                     (selfWidth /2 - imageRect.origin.x - imageRect.size.width /2),
                                     0,
                                     -(selfWidth /2 - imageRect.origin.x - imageRect.size.width /2));

7、圖片保持居中，而文字水平居中而且在圖片的上面

這種方式要求圖片在按鈕居中，而文字則要求左右居中而且在垂直在圖片的上面並保留出padding的間隔。圖片的偏移上面有說到，而文字的水平偏移上面也有說到，這裏只說垂直偏移，文字新的底部位置等於圖片的頂部位置 - padding 而文字老的底部位置等於titleRect.size.height + titleRect.origin.y, 所以二者的差值就是文字須要垂直偏移的值。代碼設置爲：

titleEdgeInsets =UIEdgeInsetsMake(-(titleRect.origin.y + titleRect.size.height - imageRect.origin.y + padding),
                                     (selfWidth /2 -  titleRect.origin.x - titleRect.size.width /2) - (selfWidth - titleRect.size.width) /2,
                                     (titleRect.origin.y + titleRect.size.height - imageRect.origin.y + padding),
                                     -(selfWidth /2 -  titleRect.origin.x - titleRect.size.width /2) - (selfWidth - titleRect.size.width) /2);
            
  imageEdgeInsets =UIEdgeInsetsMake(0,
                                     (selfWidth /2 - imageRect.origin.x - imageRect.size.width /2),
                                     0,
                                     -(selfWidth /2 - imageRect.origin.x - imageRect.size.width /2));

8、圖片保持居中，而文字水平居中而且在圖片的下面

這種方式要求圖片在按鈕居中，而文字則要求左右居中而且垂直在圖片的下面並保留出padding的間隔。圖片的偏移上面有說到，而文字的水平偏移上面也有說到，這裏只說垂直偏移，文字新的頂部位置等於imageRect.origin.y + imageRect.size.height + padding, 而文字老的頂部位置等於titleRect.origin.y，所以二者的差值就是文字須要垂直偏移的值。代碼設置爲：

titleEdgeInsets =UIEdgeInsetsMake((imageRect.origin.y + imageRect.size.height - titleRect.origin.y + padding),
                                     (selfWidth /2 -  titleRect.origin.x - titleRect.size.width /2) - (selfWidth - titleRect.size.width) /2,
                                     -(imageRect.origin.y + imageRect.size.height - titleRect.origin.y + padding),
                                     -(selfWidth /2 -  titleRect.origin.x - titleRect.size.width /2) - (selfWidth - titleRect.size.width) /2);
            
  imageEdgeInsets =UIEdgeInsetsMake(0,
                                     (selfWidth /2 - imageRect.origin.x - imageRect.size.width /2),
                                     0,
                                     -(selfWidth /2 - imageRect.origin.x - imageRect.size.width /2));

9、圖片在右，文字在左，距離按鈕兩邊邊距

在這種方式中，圖片和文本都是垂直居中對齊，這部分是不須要調整的，而文本的左邊則須要由原來的titleRect.origin.x移動到左邊padding的位置，而圖片的左邊則須要由原來的imageRect.origin.x移動到selfWidth - padding - imageRect.size.width位置。所以代碼設置爲：

self.titleEdgeInsets = UIEdgeInsetsMake(0,
                                                        -(titleRect.origin.x - padding),
                                                        0,
                                                        (titleRect.origin.x - padding));
                
 self.imageEdgeInsets = UIEdgeInsetsMake(0,
                                                        (selfWidth - padding - imageRect.origin.x - imageRect.size.width),
                                                        0,
                                                        -(selfWidth - padding - imageRect.origin.x - imageRect.size.width));

10、圖片在左，文字在右，距離按鈕兩邊邊距

這種方式中，圖片和文字的垂直位置不須要調整，而只須要將圖文的水平位置調整便可，而調整的方法和上面的類似，只是圖片移到左邊兒文字移到右邊而已。代碼設置爲：

self.titleEdgeInsets = UIEdgeInsetsMake(0,
                                                        (selfWidth - padding - titleRect.origin.x - titleRect.size.width),
                                                        0,
                                                        -(selfWidth - padding - titleRect.origin.x - titleRect.size.width));
                
 self.imageEdgeInsets = UIEdgeInsetsMake(0,
                                                        -(imageRect.origin.x - padding),
                                                        0,
                                                        (imageRect.origin.x - padding));

前面說的的十種圖文結合樣式，我想應該能夠知足您的需求了，若是這些圖文結合的樣式仍是沒法知足您的需求時則您仍是別用UIButton了。
爲了方便你們的使用，我把上面的圖文結合樣式整理成了一個UIButton的分類方法，你們能夠直接拷貝使用：

頭文件：

//  
//  UIButton+ImageTitleStyle.h  
//  
//  Created by 歐陽大哥 on 14-7-13.  
//  QQ：156355113
//  Github:  https://github.com/youngsoft
//  Email:  obq0387_cn@sina.com
//  
  
#import <UIKit/UIKit.h>  
  
/* 
 針對同時設置了Image和Title的場景時UIButton中的圖片和文字的關係 
 */  
typedef NS_ENUM(NSInteger, ButtonImageTitleStyle ) {  
    ButtonImageTitleStyleDefault = 0,       //圖片在左，文字在右，總體居中。  
    ButtonImageTitleStyleLeft  = 0,         //圖片在左，文字在右，總體居中。  
    ButtonImageTitleStyleRight     = 2,     //圖片在右，文字在左，總體居中。  
    ButtonImageTitleStyleTop  = 3,          //圖片在上，文字在下，總體居中。  
    ButtonImageTitleStyleBottom    = 4,     //圖片在下，文字在上，總體居中。  
    ButtonImageTitleStyleCenterTop = 5,     //圖片居中，文字在上距離按鈕頂部。  
    ButtonImageTitleStyleCenterBottom = 6,  //圖片居中，文字在下距離按鈕底部。  
    ButtonImageTitleStyleCenterUp = 7,      //圖片居中，文字在圖片上面。  
    ButtonImageTitleStyleCenterDown = 8,    //圖片居中，文字在圖片下面。  
    ButtonImageTitleStyleRightLeft = 9,     //圖片在右，文字在左，距離按鈕兩邊邊距
    ButtonImageTitleStyleLeftRight = 10,    //圖片在左，文字在右，距離按鈕兩邊邊距
};  
  
@interface UIButton (ImageTitleStyle)  
  
/* 
 調整按鈕的文本和image的佈局，前提是title和image同時存在纔會調整。 
 padding是調整佈局時整個按鈕和圖文的間隔。 
  
 */  
-(void)setButtonImageTitleStyle:(ButtonImageTitleStyle)style padding:(CGFloat)padding;  
  
@end

實現文件：

//
//  UIButton+ImageTitleStyle.m
//
//  Created by 歐陽大哥 on 14-7-13.
//

#import "UIButton+ImageTitleStyle.h"

@implementation UIButton (ImageTitleStyle)

-(void)setButtonImageTitleStyle:(ButtonImageTitleStyle)style padding:(CGFloat)padding
{
    if (self.imageView.image != nil && self.titleLabel.text != nil)
    {
        
        //先還原
        self.titleEdgeInsets = UIEdgeInsetsZero;
        self.imageEdgeInsets = UIEdgeInsetsZero;
        
        CGRect imageRect = self.imageView.frame;
        CGRect titleRect = self.titleLabel.frame;
        
        CGFloat totalHeight = imageRect.size.height + padding + titleRect.size.height;
        CGFloat selfHeight = self.frame.size.height;
        CGFloat selfWidth = self.frame.size.width;
        
        switch (style) {
            case ButtonImageTitleStyleLeft:
                if (padding != 0)
                {
                    self.titleEdgeInsets = UIEdgeInsetsMake(0,
                                                            padding/2,
                                                            0,
                                                            -padding/2);
                    
                    self.imageEdgeInsets = UIEdgeInsetsMake(0,
                                                            -padding/2,
                                                            0,
                                                            padding/2);
                }
                break;
            case ButtonImageTitleStyleRight:
            {
                //圖片在右，文字在左
                self.titleEdgeInsets = UIEdgeInsetsMake(0,
                                                        -(imageRect.size.width + padding/2),
                                                        0,
                                                        (imageRect.size.width + padding/2));
                
                self.imageEdgeInsets = UIEdgeInsetsMake(0,
                                                        (titleRect.size.width+ padding/2),
                                                        0,
                                                        -(titleRect.size.width+ padding/2));
            }
                break;
            case ButtonImageTitleStyleTop:
            {
                //圖片在上，文字在下
                self.titleEdgeInsets = UIEdgeInsetsMake(((selfHeight - totalHeight)/2 + imageRect.size.height + padding - titleRect.origin.y),
                                                        (selfWidth/2 - titleRect.origin.x - titleRect.size.width /2) - (selfWidth - titleRect.size.width) / 2,
                                                        -((selfHeight - totalHeight)/2 + imageRect.size.height + padding - titleRect.origin.y),
                                                        -(selfWidth/2 - titleRect.origin.x - titleRect.size.width /2) - (selfWidth - titleRect.size.width) / 2);
                
                self.imageEdgeInsets = UIEdgeInsetsMake(((selfHeight - totalHeight)/2 - imageRect.origin.y),
                                                        (selfWidth /2 - imageRect.origin.x - imageRect.size.width / 2),
                                                        -((selfHeight - totalHeight)/2 - imageRect.origin.y),
                                                        -(selfWidth /2 - imageRect.origin.x - imageRect.size.width / 2));
                
            }
                break;
            case ButtonImageTitleStyleBottom:
            {
                //圖片在下，文字在上。
                self.titleEdgeInsets = UIEdgeInsetsMake(((selfHeight - totalHeight)/2 - titleRect.origin.y),
                                                        (selfWidth/2 - titleRect.origin.x - titleRect.size.width / 2) - (selfWidth - titleRect.size.width) / 2,
                                                        -((selfHeight - totalHeight)/2 - titleRect.origin.y),
                                                        -(selfWidth/2 - titleRect.origin.x - titleRect.size.width / 2) - (selfWidth - titleRect.size.width) / 2);
                
                self.imageEdgeInsets = UIEdgeInsetsMake(((selfHeight - totalHeight)/2 + titleRect.size.height + padding - imageRect.origin.y),
                                                        (selfWidth /2 - imageRect.origin.x - imageRect.size.width / 2),
                                                        -((selfHeight - totalHeight)/2 + titleRect.size.height + padding - imageRect.origin.y),
                                                        -(selfWidth /2 - imageRect.origin.x - imageRect.size.width / 2));
            }
                break;
            case ButtonImageTitleStyleCenterTop:
            {
                self.titleEdgeInsets = UIEdgeInsetsMake(-(titleRect.origin.y - padding),
                                                        (selfWidth / 2 -  titleRect.origin.x - titleRect.size.width / 2) - (selfWidth - titleRect.size.width) / 2,
                                                        (titleRect.origin.y - padding),
                                                        -(selfWidth / 2 -  titleRect.origin.x - titleRect.size.width / 2) - (selfWidth - titleRect.size.width) / 2);
                
                self.imageEdgeInsets = UIEdgeInsetsMake(0,
                                                        (selfWidth / 2 - imageRect.origin.x - imageRect.size.width / 2),
                                                        0,
                                                        -(selfWidth / 2 - imageRect.origin.x - imageRect.size.width / 2));
            }
                break;
            case ButtonImageTitleStyleCenterBottom:
            {
                self.titleEdgeInsets = UIEdgeInsetsMake((selfHeight - padding - titleRect.origin.y - titleRect.size.height),
                                                        (selfWidth / 2 -  titleRect.origin.x - titleRect.size.width / 2) - (selfWidth - titleRect.size.width) / 2,
                                                        -(selfHeight - padding - titleRect.origin.y - titleRect.size.height),
                                                        -(selfWidth / 2 -  titleRect.origin.x - titleRect.size.width / 2) - (selfWidth - titleRect.size.width) / 2);
                
                self.imageEdgeInsets = UIEdgeInsetsMake(0,
                                                        (selfWidth / 2 - imageRect.origin.x - imageRect.size.width / 2),
                                                        0,
                                                        -(selfWidth / 2 - imageRect.origin.x - imageRect.size.width / 2));
            }
                break;
            case ButtonImageTitleStyleCenterUp:
            {
                self.titleEdgeInsets = UIEdgeInsetsMake(-(titleRect.origin.y + titleRect.size.height - imageRect.origin.y + padding),
                                                        (selfWidth / 2 -  titleRect.origin.x - titleRect.size.width / 2) - (selfWidth - titleRect.size.width) / 2,
                                                        (titleRect.origin.y + titleRect.size.height - imageRect.origin.y + padding),
                                                        -(selfWidth / 2 -  titleRect.origin.x - titleRect.size.width / 2) - (selfWidth - titleRect.size.width) / 2);
                
                self.imageEdgeInsets = UIEdgeInsetsMake(0,
                                                        (selfWidth / 2 - imageRect.origin.x - imageRect.size.width / 2),
                                                        0,
                                                        -(selfWidth / 2 - imageRect.origin.x - imageRect.size.width / 2));
            }
                break;
            case ButtonImageTitleStyleCenterDown:
            {
                self.titleEdgeInsets = UIEdgeInsetsMake((imageRect.origin.y + imageRect.size.height - titleRect.origin.y + padding),
                                                        (selfWidth / 2 -  titleRect.origin.x - titleRect.size.width / 2) - (selfWidth - titleRect.size.width) / 2,
                                                        -(imageRect.origin.y + imageRect.size.height - titleRect.origin.y + padding),
                                                        -(selfWidth / 2 -  titleRect.origin.x - titleRect.size.width / 2) - (selfWidth - titleRect.size.width) / 2);
                
                self.imageEdgeInsets = UIEdgeInsetsMake(0,
                                                        (selfWidth / 2 - imageRect.origin.x - imageRect.size.width / 2),
                                                        0,
                                                        -(selfWidth / 2 - imageRect.origin.x - imageRect.size.width / 2));
            }
                break;
            case ButtonImageTitleStyleRightLeft:
            {
                 //圖片在右，文字在左，距離按鈕兩邊邊距
                
                self.titleEdgeInsets = UIEdgeInsetsMake(0,
                                                        -(titleRect.origin.x - padding),
                                                        0,
                                                        (titleRect.origin.x - padding));
                
                self.imageEdgeInsets = UIEdgeInsetsMake(0,
                                                        (selfWidth - padding - imageRect.origin.x - imageRect.size.width),
                                                        0,
                                                        -(selfWidth - padding - imageRect.origin.x - imageRect.size.width));
            }
                
                break;
                
            case ButtonImageTitleStyleLeftRight:
            {
                //圖片在左，文字在右，距離按鈕兩邊邊距
                
                self.titleEdgeInsets = UIEdgeInsetsMake(0,
                                                        (selfWidth - padding - titleRect.origin.x - titleRect.size.width),
                                                        0,
                                                        -(selfWidth - padding - titleRect.origin.x - titleRect.size.width));
                
                self.imageEdgeInsets = UIEdgeInsetsMake(0,
                                                        -(imageRect.origin.x - padding),
                                                        0,
                                                        (imageRect.origin.x - padding));


                
            }
                break;
            default:
                break;
        }
    }
    else {
        self.titleEdgeInsets = UIEdgeInsetsMake(0, 0, 0, 0);
        self.imageEdgeInsets = UIEdgeInsetsMake(0, 0, 0, 0);
    }
    
}


@end

上面的方法setButtonImageTitleStyle:(ButtonImageTitleStyle)style padding:(CGFloat)padding請在創建完UIButton對象而且指定一個具體的frame值或者自動佈局的約束尺寸後，而且調用setTitle:forState:和setImage:forSate:後再調用：

UIButton *button = [[UIButton alloc] initWithFrame:CGRectMake(0,0,100,100)];
[button setTitle:@"測試文本" forState:UIControlStateNormal];
[button setImage:[UIImage imageNamed:@"test"] forState:UIControlStateNormal];
[button setButtonImageTitleStyle:ButtonImageTitleStyleTop padding:10];

另外若是你想要你的按鈕中的圖片和文字總體的水平居左，或者水平居右，或者垂直居上或者垂直居下則能夠用UIButton的原生(UIControl)屬性：

@property(nonatomic) UIControlContentVerticalAlignment contentVerticalAlignment;     // how to position content vertically inside control. default is center
@property(nonatomic) UIControlContentHorizontalAlignment contentHorizontalAlignment; // how to position content hozontally inside control. default is center

這兩個屬性來設置按鈕的垂直和水平的總體位置的調整，具體設置則讀者自行去實踐吧。