UIButton實(shí)現(xiàn)各種圖文結(jié)合的效果以及原理

iOS的UIButton是一個(gè)非常常見(jiàn)而且常用的控件,我們一般用他來(lái)實(shí)現(xiàn)某個(gè)功能的提交以及選擇操作。我們可以建立只有文字的Button,也可以建立只有圖片的Button,具體的需求要看界面設(shè)計(jì)的具體情況。有時(shí)候我們希望應(yīng)用的界面元素是豐富多彩的,有時(shí)候希望建立一個(gè)圖文結(jié)合的控件來(lái)響應(yīng)用戶(hù)的手勢(shì)操作,因此建立一個(gè)即有圖片也有文字的按鈕來(lái)實(shí)現(xiàn)功能,這個(gè)只需要分別調(diào)用UIButton的setTitle:forState:setImage:forSate:兩個(gè)方法就可以實(shí)現(xiàn)具有圖片和文字功能的按鈕。但是系統(tǒng)默認(rèn)的圖文結(jié)合的按鈕布局是:圖片在左邊而文字在右邊,而且整體水平和垂直居中。比如下面這個(gè)圖文按鈕:

默認(rèn)的圖文按鈕

但是有的時(shí)候我們又希望圖片在右邊而文字在左邊;或者圖片在上邊而文字在下面;或者圖片在按鈕的中間而文字在圖片的下面等等,但我們又不想放棄使用按鈕這個(gè)控件,這時(shí)候怎么辦? 事件總是能找到解決方法的, 有的人會(huì)先建立一個(gè)按鈕控件鋪在下面,而在上面分別覆蓋一個(gè)UIImageViewUILabel來(lái)實(shí)現(xiàn);而有的人則干脆在UIButton上建立一個(gè)UIImageViewUILabel兩個(gè)子視圖;而有的人則不會(huì)用UIButton來(lái)實(shí)現(xiàn)圖文結(jié)合的功能。 前面說(shuō)的幾個(gè)方法看起來(lái)有效,也確實(shí)會(huì)解決問(wèn)題,但缺點(diǎn)是代碼量會(huì)增加,而且必須同時(shí)管理UIButton, UIImageView, UILabel這三個(gè)整體,如果哪天產(chǎn)品還希望有一個(gè)按鈕按下高亮或者按下陰影效果時(shí),你可能又要重新編寫(xiě)代碼實(shí)現(xiàn)需求了。
那么我們是否要放棄UIButton呢?答案是否定的,其實(shí)UIButton本身是可以支持各種圖文結(jié)合的,既然UIButton上能同時(shí)顯示圖片和文字,那就可以肯定的說(shuō)UIButton里面本身一定有一個(gè)UIImageViewUILabel8子視圖。UIButton*本身就是一個(gè)復(fù)合控件,他分別提供了兩個(gè)屬性:

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

需要注意的是這兩個(gè)屬性必須要調(diào)用完setTitle:forSate:setImage:forSate:后才能獲取到,否則有可能會(huì)返回nil。 其中的 titleLabel是用來(lái)保存文字的而imageView是用來(lái)保存圖片的。那既然UIButton本身就帶有一個(gè)圖片控件和文本控件,那是不是我們只要分別通過(guò)調(diào)整子控件的frame值就能實(shí)現(xiàn)我們想要的圖片文字的任何布局呢? 答案是否定的。實(shí)驗(yàn)證明通過(guò)設(shè)置titleLabel、imageViewframe值根本不會(huì)改變按鈕里面圖片在左而文字在右的格局。 要想實(shí)現(xiàn)功能就必須使用另外兩個(gè)屬性:

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

這兩個(gè)屬性是分別用來(lái)調(diào)整按鈕中文本的偏移縮進(jìn)以及圖片的偏移縮進(jìn)的,他們都是一個(gè)UIEdgeInsets對(duì)象,默認(rèn)的值都是0,也就是默認(rèn)的值都是0的情況下按鈕的圖片和文字垂直居中,而且圖片在左邊文字在右邊,而且圖片文本整體水平居中。而我們則可以通過(guò)調(diào)整titleEdgeInsetsimageEdgeInsets的值來(lái)實(shí)現(xiàn)我們想要的任何圖文布局的情況,甚至我們希望圖片和文字之間還要保留一些間隔的情況。怎么調(diào)整? 調(diào)整多少為最合適?

在調(diào)整之前我們先定義幾個(gè)特定的變量值:

:
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; //圖文上下布局時(shí)所占用的總高度,注意這里也算上他們之間的間隔值padding

我們可以通過(guò)更改按鈕的titleEdgeInsetsimageEdgeInsets的值調(diào)整文本和圖片的位置。如果我們想往右移動(dòng)20的話(huà),那么就應(yīng)該同時(shí)設(shè)置UIEdgeInsets的left=20, right=-20,而如果我們想往上移動(dòng)20的話(huà),那么就應(yīng)該應(yīng)該同時(shí)設(shè)置UIEdgeInsets的top=-20,bottom=20。下面我們就分別通過(guò)調(diào)整按鈕的titleEdgeInsetsimageEdgeInsets的值來(lái)實(shí)現(xiàn)各種圖文結(jié)合的效果:

一、圖片在左,文字在右,整體居中,調(diào)整間距

圖片在左,文字在右,整體居中,設(shè)置間距

這種方式是按鈕默認(rèn)的圖文布局方式,因?yàn)橐{(diào)整圖片和文本的間距,所以只需要文本右移padding/2而圖片左移padding/2值就可以了。設(shè)置的代碼為:

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

二、圖片在右,文字在左,整體居中

圖片在右,文字在左,整體居中

要實(shí)現(xiàn)這種布局只需要將文字往左偏移圖片的寬度并且再往左偏移padding/2就可以了,而圖片則只需要往右偏移文本的寬度并再往右偏移padding/2就可以了。設(shè)置的代碼為:

  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));

三、圖片在上,文字在下,整體居中

圖片在上,文字在下,整體居中

這種布局下當(dāng)圖片和文字要求垂直居中后,新的圖片的頂部位置應(yīng)該等于(selfHeight - totalHeight)/2, 因此垂直需要偏移的值就是新的位置減去原來(lái)的位置imageRect.origin.y;而新的圖片的水平中心點(diǎn)要等于selfWidth/2,而原來(lái)的圖片的水平中心點(diǎn)等于imageRect.origin.x + imageRect.size.width/2,兩者相減就是水平需要偏移的值。而新的文本的頂部位置應(yīng)該等于新的圖片的頂部位置(selfHeight - totalHeight)/2 + 圖片的高度imageRect.size.height + 間隔padding ,因此垂直需要偏移的值就是新的頂部值減去原來(lái)的頂部位置titleRect.origin.y; 而新的文本的水平中心點(diǎn)也是selfWidth/2,而原來(lái)的文本的水平中心點(diǎn)是titleRect.origin.x + titleRect.size.width/2, 兩者相減就是水平需要偏移的值,又因?yàn)槟J(rèn)的情況下當(dāng)按鈕比較小時(shí)會(huì)自動(dòng)保留圖片的尺寸和將文字部分縮小,因?yàn)楫?dāng)我們實(shí)現(xiàn)文字和圖片上下布局時(shí),需要將文字的區(qū)域擴(kuò)展到整個(gè)按鈕部分,否則將會(huì)縮小按鈕的文字的寬度,因?yàn)榘粹o的寬度為selfWidth,而文字的默認(rèn)寬度是titleRect.size.width,所以上面的實(shí)現(xiàn)將文本移到中間后還需要分別向兩邊進(jìn)行拉伸(selfWith - titleRect.size.width)/2來(lái)保證文本填充滿(mǎn)所有的按鈕區(qū)域,在下面的各種樣式中凡是文字和圖片垂直居中的情況下都要考慮這種情況 設(shè)置的代碼為:

  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));

四、圖片在下,文字在上,整體居中

圖片在下,文字在上,整體居中

這種布局就是上面的文字和圖片位置調(diào)換,因此設(shè)置代碼為:

  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));

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

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

這種方式要求圖片在按鈕中居中,而文字則要求左右居中而垂直方向位置則是距離按鈕頂部的間隔值。 上面因?yàn)槊枋隽怂骄又械恼{(diào)整,因此這里就不介紹了,只介紹垂直方向的調(diào)整。 因?yàn)橐髨D片要垂直居中,因此不需要調(diào)整垂直偏移。而文本則要調(diào)整為距離頂部的間隔值,也就是新的文本的頂部值等于padding, 而原來(lái)頂部值是titleRect.origin.y,因此只需要偏移titleRect.origin.y - padding就可以了。設(shè)置代碼為:

  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));

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

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

這種方式要求圖片在按鈕居中,而文字則要求左右居中而垂直方向的底部位置則是距離按鈕底部的間隔值。圖片的調(diào)整上面有介紹,而文字的水平調(diào)整上面也有說(shuō)到,這里面只說(shuō)文字的垂直調(diào)整。文字新的底部位置等于selfHeight - padding, 而舊的底部位置是titleRect.size.height + titleRect.origin.y, 因此要偏移的位置就是兩者相減的值。代碼的設(shè)置為:

  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));

七、圖片保持居中,而文字水平居中并且在圖片的上面

圖片保持居中,而文字水平居中并且在圖片的上面

這種方式要求圖片在按鈕居中,而文字則要求左右居中并且在垂直在圖片的上面并保留出padding的間隔。 圖片的偏移上面有說(shuō)到,而文字的水平偏移上面也有說(shuō)到,這里只說(shuō)垂直偏移,文字新的底部位置等于圖片的頂部位置 - padding 而文字老的底部位置等于titleRect.size.height + titleRect.origin.y, 因此兩者的差值就是文字需要垂直偏移的值。代碼設(shè)置為:

  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));

八、圖片保持居中,而文字水平居中并且在圖片的下面

圖片保持居中,而文字水平居中并且在圖片的下面

這種方式要求圖片在按鈕居中,而文字則要求左右居中并且垂直在圖片的下面并保留出padding的間隔。圖片的偏移上面有說(shuō)到,而文字的水平偏移上面也有說(shuō)到,這里只說(shuō)垂直偏移,文字新的頂部位置等于imageRect.origin.y + imageRect.size.height + padding, 而文字老的頂部位置等于titleRect.origin.y,因此兩者的差值就是文字需要垂直偏移的值。代碼設(shè)置為:

  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));

九、圖片在右,文字在左,距離按鈕兩邊邊距

圖片在右,文字在左,距離按鈕兩邊邊距

在這種方式中,圖片和文本都是垂直居中對(duì)齊,這部分是不需要調(diào)整的,而文本的左邊則需要由原來(lái)的titleRect.origin.x移動(dòng)到左邊padding的位置,而圖片的左邊則需要由原來(lái)的imageRect.origin.x移動(dòng)到selfWidth - padding - imageRect.size.width位置。因此代碼設(shè)置為:

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));

十、圖片在左,文字在右,距離按鈕兩邊邊距

圖片在左,文字在右,距離按鈕兩邊邊距

這種方式中,圖片和文字的垂直位置不需要調(diào)整,而只需要將圖文的水平位置調(diào)整即可,而調(diào)整的方法和上面的相似,只是圖片移到左邊兒文字移到右邊而已。代碼設(shè)置為:

 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));


前面說(shuō)的的十種圖文結(jié)合樣式,我想應(yīng)該可以滿(mǎn)足您的需求了,如果這些圖文結(jié)合的樣式還是無(wú)法滿(mǎn)足您的需求時(shí)則您還是別用UIButton了。
為了方便大家的使用,我把上面的圖文結(jié)合樣式整理成了一個(gè)UIButton的分類(lèi)方法,大家可以直接拷貝使用:

頭文件:

//  
//  UIButton+ImageTitleStyle.h  
//  
//  Created by 歐陽(yáng)大哥 on 14-7-13.  
//  QQ:156355113
//  Github:  https://github.com/youngsoft
//  Email:  obq0387_cn@sina.com
//  
  
#import <UIKit/UIKit.h>  
  
/* 
 針對(duì)同時(shí)設(shè)置了Image和Title的場(chǎng)景時(shí)UIButton中的圖片和文字的關(guān)系 
 */  
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)  
  
/* 
 調(diào)整按鈕的文本和image的布局,前提是title和image同時(shí)存在才會(huì)調(diào)整。 
 padding是調(diào)整布局時(shí)整個(gè)按鈕和圖文的間隔。 
  
 */  
-(void)setButtonImageTitleStyle:(ButtonImageTitleStyle)style padding:(CGFloat)padding;  
  
@end  

實(shí)現(xiàn)文件:

//
//  UIButton+ImageTitleStyle.m
//
//  Created by 歐陽(yáng)大哥 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請(qǐng)?jiān)诮⑼闡IButton對(duì)象并且指定一個(gè)具體的frame值或者自動(dòng)布局的約束尺寸后,并且調(diào)用setTitle:forState:setImage:forSate:后再調(diào)用:

UIButton *button = [[UIButton alloc] initWithFrame:CGRectMake(0,0,100,100)];
[button setTitle:@"測(cè)試文本" 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

這兩個(gè)屬性來(lái)設(shè)置按鈕的垂直和水平的整體位置的調(diào)整,具體設(shè)置則讀者自行去實(shí)踐吧。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀(guān)點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 問(wèn)答題47 /72 常見(jiàn)瀏覽器兼容性問(wèn)題與解決方案? 參考答案 (1)瀏覽器兼容問(wèn)題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,813評(píng)論 1 92
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫(kù)、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,252評(píng)論 4 61
  • 第一章 五百年前,絕世妖王出世,上天入地,無(wú)所不能。他上可大鬧天空,下可出入地府。教滿(mǎn)天諸佛都無(wú)計(jì)可施,讓三...
    宸丨陌閱讀 282評(píng)論 0 2
  • 與大寶在互動(dòng)中,大寶常會(huì)說(shuō):媽媽?zhuān)阋任液湍阏f(shuō)才......我都會(huì)回,我會(huì)和你確認(rèn)好了再行動(dòng)的,大寶立馬...
    Alice林閱讀 307評(píng)論 0 0