關于UIButton大家都很熟悉,系統默認的樣式,是image在左,title在右的,如下圖所示:

系統默認樣式

但是,很多情況下UI的設計可不是這么樣的,最常用的是image在右邊,title在左的button,和類似分享頁面的那種上面是image,下面是title的button;如下圖所示:

標題在左,image在右

標題在下,image在上

筆者每次需要這種需求的時候,都是查很多資料,看了一些不痛不癢的介紹,然后再很復雜的實現;效果暫且不說,耽誤了大量的時間,所以,花點時間研究了一下這種效果實現,在這里總結一下:

PS:如果你只是想使用這種效果,可直接下載Demo1,Demo2,里面有筆者擴展的方法可以直接使用;如果你想了解其中的原理,請耐心看完本文.本文是對筆者實現這種效果以及之間遇到的問題的一個總結;

這里,筆者介紹兩種實現的方式,一種是通過對系統的UIButton進行擴展(category),一種是通過繼承自UIButton,自定義;

1.對UIButton擴展(category)

這種方式主要是用到了UIButton的下面兩個屬性:

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

下面以設置為title在左,image在右為例進行介紹:
首先來看一下這兩個屬性的類型:

typedef struct UIEdgeInsets {  
    CGFloat top, left, bottom, right;  // specify amount to inset (positive) for each of the edges. values can be negative to 'outset'  
} UIEdgeInsets;

他有四個參數: top left bottom right表示上左下右的偏移量,其含義為:

top : 為正數的時候,是往下偏移,為負數的時候往上偏移;
left : 為正數的時候往右偏移,為負數的時候往左偏移;
bottom : 為正數的時候往上偏移,為負數的時候往下偏移;
right :為正數的時候往左偏移,為負數的時候往右偏移;

回過頭來看這兩個屬性titleEdgeInsets就是設置title的偏移量,imageEdgeInsets就是設置image的偏移量;
那么問題來了,怎樣設置這個偏移量呢?很多介紹這種方式的使用的偏移量的都是固定的值(但是這些值是從哪里參考而來并沒有說明),一旦你的button的frame和他介紹的不一樣,就需要多次修改,以找到最合適的偏移量,看得云里霧里不說,調整偏移量也花費了很多時間;經過筆者的一些測試,發現還是有些公共的東西可以使用的:
相信大家第一個想到的就是UIButton的titleLabel和imageView的frame;所以,首先獲取他們的frame:

CGRect titleFrame = self.titleLabel.frame;
CGRect imageFrame = self.imageView.frame;

// title和image之間的間隙
CGFloat space = titleFrame.origin.x - imageFrame.origin.x - imageFrame.size.width;

然后設置他們各自偏移量:

[self setImageEdgeInsets:UIEdgeInsetsMake(0,titleFrame.size.width + space, 0, -(titleFrame.size.width + space))];
 [self setTitleEdgeInsets:UIEdgeInsetsMake(0, -(titleFrame.origin.x - imageFrame.origin.x), 0, titleFrame.origin.x - imageFrame.origin.x)];

這兩個屬性的默認值都是0,所以,在不需要偏移的方向上,偏移量設置為0即可,那么,怎么知道哪個方向需要偏移,哪個方向不需要偏移呢?
其實,很簡單,只需要仔細觀察,偏移前(系統默認布局)和偏移后(你想要的布局)有哪些變化:

對于image:由左邊移動到右邊,可知,上下不變,左右偏移,即image的left和right變化;
對于title:由右邊移動到左邊,同樣是上下不變,左右偏移,即title的left和right變化;

清楚了哪些方向上有變化,接下來就是變化多少的問題了:
因為要把image移動到button的右邊,需要往右移動,所以imageEdgeInsets距左邊界(left)的偏移量需要設置為標題的寬度加上他們之間的間隙,即:titleSize.width + space,右邊的偏移量(right)同樣是titleSize.width + space,但是應該是負的,即:-(titleFrame.size.width + space);其他方向沒有移動,直接設為默認值0;
同理,title需要往左移動,需要設置titleEdgeInsets距離左邊界(left)的偏移量為負的image + space的寬度,即: '-(imageSize.width + space' (同 '-(titleFrame.origin.x - imageFrame.origin.x)' ),此時title距離右邊界的偏移量(right)就不是0了,而應該是image + space的寬度,即:imageSize.width + space;
設置完后,看一下效果,似乎并不是預想的那樣:

title在左,image在右

回頭仔細看了下設置,邏輯上似乎并沒有錯誤,那是哪兒出了問題呢?仔細查找后找到了問題,因為這時獲取到的title的size值為0:

title的size

~~>對于這個問題的原因,筆者查了一些資料,暫時還沒有找到相關的介紹,也沒有搞清楚到底是什么原因導致的,如果你知道原因,還請留言告知,謝謝~~

但是,筆者偶然間發現,只要在獲取titleSize之前,使用一次button的titleLabel和imageView,就能獲取到他的size了,設置一下titleLabel和imageView的任意屬性都行,如果不需要設置這些屬性,可以和我一樣,設置一下它的背景色和button一致(只是為了提前使用一次):

button.titleLabel.backgroundColor = button.backgroundColor;  
button.imageView.backgroundColor = button.backgroundColor;

~~PS:這樣雖然能夠獲取到titleSize,但是多這么一個操作,實在不是正常的,如果你有更好的方式獲取,還請留言告知,感謝!!~~

PS: 新增

關于獲取的titleLabel的frame為zero可以參考這里的介紹, button的title被設置后,并不會立馬去更新其frame, 所以需要在合適的地方主動更新, 這里使用的是解決方法中的第一種, 即:

[self layoutIfNeeded];

這樣設置之后,基本能夠實現需求了:

[self setImageEdgeInsets:UIEdgeInsetsMake(0,titleFrame.size.width + space, 0, -(titleFrame.size.width + space))];
[self setTitleEdgeInsets:UIEdgeInsetsMake(0, -(titleFrame.origin.x - imageFrame.origin.x), 0, titleFrame.origin.x - imageFrame.origin.x)];

效果圖如下:

和系統UIButton默認情況的對比

會發現,幾乎和系統默認的一致;
最終實現效果的完整設置(主要是獲取size的時機)為:

[self layoutIfNeeded];
CGRect titleFrame = self.titleLabel.frame;
CGRect imageFrame = self.imageView.frame;
CGFloat space = titleFrame.origin.x - imageFrame.origin.x - imageFrame.size.width
      
[self setImageEdgeInsets:UIEdgeInsetsMake(0,titleFrame.size.width + space, 0, -(titleFrame.size.width + space))];
[self setTitleEdgeInsets:UIEdgeInsetsMake(0, -(titleFrame.origin.x - imageFrame.origin.x), 0, titleFrame.origin.x - imageFrame.origin.x)];

最終效果圖:

最終效果圖

修改為圖片再上,標題在下樣式
過程基本相同,只是在最后設置的時候不同,這里直接給出主要設置代碼:

[self layoutIfNeeded];
CGRect titleFrame = self.titleLabel.frame;
CGRect imageFrame = self.imageView.frame;
CGFloat space = titleFrame.origin.x - imageFrame.origin.x - imageFrame.size.width    
[self setImageEdgeInsets:UIEdgeInsetsMake(0,0, titleFrame.size.height + space, -(titleFrame.size.width))];
[self setTitleEdgeInsets:UIEdgeInsetsMake(imageFrame.size.height + space, -(imageFrame.size.width), 0, 0)];

效果圖:

標題在下

針對此方法,本人寫了一個UIButton的category:Demo地址,里面的類目可直接拿來使用,簡單調用一個方法即可;

2.通過自定義Button

該方法,是通過自定義一個button,繼承自UIButton,然后重寫下面兩個方法:

- (CGRect)titleRectForContentRect:(CGRect)contentRect;  
- (CGRect)imageRectForContentRect:(CGRect)contentRect;

對于這兩個方法,網上的一些介紹真是不得不吐槽了,模糊不清;后來根據筆者多次嘗試,個人理解為:方法的參數contentRect,即內容的frame,其值和button的bounds是一樣的,通過這個參數可以獲取到當前button的size;返回值為CGRect類型,即是title或image在button的絕對坐標值;換句話說,這里返回的是一個絕對坐標,即button的子控件在button上的絕對布局,這里可以返回一個寫死的frame(查到的使用此方法的也都是寫死的frame),但要注意,不要超過contentRect的范圍**;
有一點需要說明:這兩個方法不是只調用一次,會被多次調用,只要button的title改變,都會調用此方法,最后一次調用,返回的frame值,才是最終的布局frame,所以,在這里,可以通過獲取button的標題,動態地修改其frame,使title和image顯示緊湊;
明白了這兩個方法,下面就開始使用它:

標題在左側,圖像在右側
一般這種布局的button都是寬度比高大很多,所以,這里我以button的高度為參考來設置imageView和titleLabel的高度,即:

CGFloat inteval = CGRectGetHeight(contentRect)/8.0;  
//設置圖片的寬高為button高度的3/4;  
CGFloat imageH = CGRectGetHeight(contentRect) - 22 * inteval;

這個間隔可以根據自己的需求修改;
然后設置imageView的frame:

CGRect rect = CGRectMake(CGRectGetWidth(contentRect) - imageH - inteval, inteval, imageH, imageH);

即:

-(CGRect)imageRectForContentRect:(CGRect)contentRect {  
      CGFloat inteval = CGRectGetHeight(contentRect)/8.0;  
          
      //設置圖片的寬高為button高度的3/4;  
      CGFloat imageH = CGRectGetHeight(contentRect) - 22 * inteval;  
          
      CGRect rect = CGRectMake(CGRectGetWidth(contentRect) - imageH - inteval, inteval, imageH, imageH);  
          
      return rect;  
}

下面來設置titleLabel的frame:

-(CGRect)titleRectForContentRect:(CGRect)contentRect {  
      
    CGFloat inteval = CGRectGetHeight(contentRect)/8.0;  
    //設置圖片的寬高為button高度的3/4;  
    CGFloat imageH = CGRectGetHeight(contentRect) - 22 * inteval;  
          
    CGRect rect = CGRectMake(inteval, inteval, CGRectGetWidth(contentRect) - imageH - 2*inteval, CGRectGetHeight(contentRect) - 2*inteval);  
          
    return rect;  
}

效果圖:

效果圖

這種設置的方法好處是,可以手動控制titleLabel和imageView的frame,但是不足之處是,不能像系統的那樣根據圖片的scale和title字符串的大小來設置frame的大小;
當button的frame能夠很好的包含title和image的時候,效果基本差不多;當button的frame不適合時區別還是很明顯的:

frame設置合理

frame設置不合理

可以看出,主要的區別是:系統默認的可以動態地修改子控件的frame,雖然顯示效果也不是很理想;

標題在底部,圖像在上面
思路基本一致,這里直接給出設置代碼:

-(CGRect)imageRectForContentRect:(CGRect)contentRect {  
     
     CGFloat inteval = CGRectGetWidth(contentRect)/16.0;  
     inteval = MIN(inteval, 6);  
          
     //設置圖片的寬高為button寬度的7/8;  
     CGFloat imageW = CGRectGetWidth(contentRect) - 22 * inteval;  
          
     CGRect rect = CGRectMake(inteval, inteval, imageW, imageW);  
          
     return rect;  
}

-(CGRect)titleRectForContentRect:(CGRect)contentRect {  
     CGFloat inteval = CGRectGetWidth(contentRect)/16.0;  
     inteval = MIN(inteval, 6);  
          
     //設置圖片的寬高為button寬度的7/8;  
     CGFloat imageW = CGRectGetWidth(contentRect) - 22 * inteval;  
          
     CGRect rect = CGRectMake(0, inteval*2 + imageW, CGRectGetWidth(contentRect) , CGRectGetHeight(contentRect) - 3*inteval - imageW);  
          
     return rect;  
}

效果圖:

效果圖

這里有一點說明:就是標題的對齊方式,上面的效果圖是設置了居中對齊,系統默認是居左的,什么時候更改這個設置呢?
我的做法是這樣的,因為我增加了一個自定義屬性,用來選擇設置的button的樣式:

#import <UIKit/UIKit.h>  
  
typedef NS_ENUM(NSInteger,LZRelayoutButtonType) {  
    LZRelayoutButtonTypeNomal  = 0,//默認  
    LZRelayoutButtonTypeLeft   = 1,//標題在左  
    LZRelayoutButtonTypeBottom = 2,//標題在下  
};  
  
@interface LZRelayoutButton : UIButton  
  
@property (assign,nonatomic)LZRelayoutButtonType lzType;  
@end

我重寫了它的setter方法:

-(void)setLzType:(LZRelayoutButtonType)lzType {  
    _lzType = lzType;  
      
    if (lzType != LZRelayoutButtonTypeNomal) {  
        self.titleLabel.textAlignment = NSTextAlignmentCenter;  
    }  
}

這種方式的設置,我寫了一個Demo,里面的自定義button可以拿來直接使用,如果對你有幫助,還請star支持一下,感謝!!!

總結

以上兩種方式都能實現重新布局UIButton的子控件的效果,各有優缺點:

第一種方式:需要精確的設置偏移量,但是有些量是無法獲取的,只能在使用時調整,特別是設置標題在底部時,總感覺image的左右距離button的左右間隙不一致;

第二種方式:對frame的控制就比較自由了,需要注意的是對間隔的把控,使用這種方式就沒有第一種的方式問題了;

不管是系統默認,還是我們修改之后的button,其frame的設置都是很重要的,不合適的frame會讓button看起來很不舒服...

PS:因為文章是從本人CSDN博客遷移而來,所以,文中使用圖片帶有CSDN的水印,原文地址: [iOS]詳解調整UIButton的title和image的位置

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

[iOS]調整UIButton的title和image詳解

[iOS]調整UIButton的title和image詳解

1.對UIButton擴展(category)

PS: 新增

2.通過自定義Button

總結

(完)

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

[iOS]調整UIButton的title和image詳解

1.對UIButton擴展(category)

PS: 新增

2.通過自定義Button

總結

(完)

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频