嘴爺發(fā)飆，逐字生敲，圖文詳解UIButton的imageEdgeInsets和titleEdgeInsets設(shè)置

圖片和文字組合的按鈕比較常見，起初不會設(shè)置按鈕這個兩個屬性，為了趕進度，直接再按鈕上加了個圖片和label，顯然是不太合理的。工作之余好好的研究了下，終于理解了imageEdgeInsets和titleEdgeInsets。首先我們看一下原理，針對content 水平、垂直居中的情況去分析，代碼設(shè)置如下：

button.contentHorizontalAlignment = UIControlContentHorizontalAlignmentCenter;
button.contentVerticalAlignment = UIControlContentVerticalAlignmentCenter;

xib中按鈕的設(shè)置如圖：


效果如下,默認是左右排列，圖片在左，文字在右

我們期許最后要有如下的效果：

首先引入padding這個概念，CSS用到的多，比如下左的聊天氣泡，其實就是黑色框距離藍色氣泡的位置，下右的圖片是CSS里的各種定義，這里我們只需要知道padding 往中心偏移的為正，從中心向外都為負


針對右上的最中心的藍色矩形來說（針對父容器綠色矩形）

  • padding-top: 20px;
  • padding-left: 20px;
  • padding-bottom: 20px;
  • padding-right: 20px

當(dāng)然，給負值的一側(cè)就會超出父容器
接下來說正事
按鈕中的image，如果我們想讓它相對于原來的位置向右移動20，向上移動10，那么這里父容器就是原來image的位置，新的位置上下左右移動的位置都是相對于父容器，如圖，實線的矩形表示原來按鈕中image的位置，虛線的矩形表示，我們移動后的位置

  • top: -10px; 相對于原來top-border是背離中心(紅色圓形)方向即向外擴張
  • bottom: 10px; 相對于原來bottom-border是靠近中心(紅色圓形)方向即向內(nèi)收縮
  • left: 20px; 相對于原來left-border是靠近中心(紅色圓形)方向即向內(nèi)收縮
  • right: 20px; 相對于原來right-border是背離中心(紅色圓形)方向即向外擴張

以上的top、 left、 bottom、 right就是我們將要設(shè)置的，我們打開一個工程去試驗一下

-(void)viewWillLayoutSubviews{
    [super viewWillLayoutSubviews];
  
    [self.button setImageEdgeInsets:UIEdgeInsetsMake(-10, 20, 10, -20)];
}

確實是相對于原來的位置移動的，我們看一下setImageEdgeInsets這個方法的描述

當(dāng)然我的經(jīng)驗是按鈕大小確定以后去設(shè)置，不會有問題。

以上是原理，我們在實際開發(fā)的時候使用一下，我們先看一個簡單圖左文右的

在image和label中插入一個space，紅色虛線為button 的 content(虛線部分，image + label)，水平垂直都是居中模式，若中間插入一個space，還想保持居中，需要imgae左移半個space，label右移半個space，則content還是居中的，根據(jù)上面的分析，image新的位置相對之前的位置left向外擴張(space / 2.0)px，right向內(nèi)收縮(space / 2.0)px，上下沒有動，則

image

  • left: -10px;
  • right: 10px;
  • top: 0px;
  • bottom: 0px;

同理label

  • left: 10px;
  • right: -10px;
  • top: 0px;
  • bottom: 0px;

再看一個上下排列的

分析一下，如果還要保持content(虛線部分，image + label)居中，對于上下來說，image是向下移動半個label的高度 + 半個space的高度，label向上移動半個image高度 + 半個space的高度；對于左右來說，如下圖，image右移動了半個content寬度減去半個image寬度 即 (imageWidth + labelWidth) / 2.0 - imageWidth / 2.0如下圖

這樣我們拿到button中的image和label的寬高即可，這里注意下 imageView、label 寬高的獲取方式

       //    獲取按鈕圖片的寬高
    CGSize imgSize = self.imageView.intrinsicContentSize;
    CGFloat imageWidth = imgSize.width;
    CGFloat imageHeight = imgSize.height;
    
    //    獲取文字的寬高
    CGSize labelSize = self.titleLabel.intrinsicContentSize;
    CGFloat labelWidth = labelSize.width;
    CGFloat labelHeight = labelSize.height;

那么我們封裝一個類，方便使用，這里我擴展了一個button (PlaceContent)


#import "UIButton+PlaceContent.h"

@implementation UIButton (PlaceContent)

-(void)placeImageTitlePosition:(ZYButtonImagePosition)position space:(CGFloat)space{

    //    獲取按鈕圖片的寬高
    CGSize imgSize = self.imageView.intrinsicContentSize;
    CGFloat imageWidth = imgSize.width;
    CGFloat imageHeight = imgSize.height;
    
    //    獲取文字的寬高
    CGSize labelSize = self.titleLabel.intrinsicContentSize;
    CGFloat labelWidth = labelSize.width;
    CGFloat labelHeight = labelSize.height;

#if DEBUG
    NSLog(@"按鈕圖片 width: %f  height: %f \n", imageWidth, imageHeight);
    NSLog(@"按鈕文字 width: %f  height: %f \n", labelWidth, labelHeight);
    NSLog(@"按鈕大小 width: %f  height: %f \n", self.frame.size.width, self.frame.size.height);
    
#endif
    
    //按鈕圖片文字的位置 EdgeInsets 都是相對原來的位置變化  類似于CSS 里的padding 往內(nèi)側(cè)方向是正
    CGFloat titleTop, titleLeft, titleBottom, titleRight;
    CGFloat imageTop, imageLeft, imageBottom, imageRight;
    
    switch (position) {
            case ZYButtonImagePositionLeft:
            //    圖片在左、文字在右;
            imageTop = 0;
            imageBottom = 0;
            imageLeft =  -space / 2.0;
            imageRight = space / 2.0;
            
            titleTop = 0;
            titleBottom = 0;
            titleLeft = space / 2;
            titleRight = -space / 2;
            break;
            
            case ZYButtonImagePositionTop://    圖片在上，文字在下
            imageTop = -(labelHeight / 2.0 + space / 2.0);//圖片上移半個label高度和半個space高度  給label使用
            imageBottom = (labelHeight / 2.0 + space / 2.0);
            imageLeft = labelWidth / 2.0;
            imageRight = -labelWidth / 2.0f;
            
            titleLeft = -imageWidth / 2.0;
            titleRight = imageWidth / 2.0;
            titleTop = imageHeight / 2.0 + space / 2.0;//文字下移半個image高度和半個space高度
            titleBottom = -(imageHeight / 2.0 + space / 2.0);
            break;
            
            case ZYButtonImagePositionRight://    圖片在右，文字在左
            imageTop = 0;
            imageBottom = 0;
            imageRight = -(labelWidth + space / 2.0);
            imageLeft = labelWidth + space / 2.0;
            
            titleTop = 0;
            titleLeft = -(imageWidth + space / 2.0);
            titleBottom = 0;
            titleRight = imageWidth + space / 2.0;
            break;
            
            case ZYButtonImagePositionBottom://    圖片在下，文字在上
            imageLeft = (imageWidth + labelWidth) / 2.0 - imageWidth / 2.0;
            imageRight = -labelWidth / 2.0;
            imageBottom = -(labelHeight / 2.0 + space / 2.0);
            imageTop = labelHeight / 2.0 + space / 2.0;//圖片下移半個label高度和半個space高度  給label使用
            
            titleTop = -(imageHeight / 2.0 + space / 2.0);
            titleBottom = imageHeight / 2.0 + space / 2.0;
            titleLeft = -imageWidth / 2.0;
            titleRight = imageWidth / 2.0;
            break;
        default:
            break;
    }
    
    self.imageEdgeInsets = UIEdgeInsetsMake(imageTop, imageLeft, imageBottom, imageRight);
    self.titleEdgeInsets = UIEdgeInsetsMake(titleTop, titleLeft, titleBottom, titleRight);
    
}

@end

看下最終執(zhí)行結(jié)果

感謝您閱讀完畢，如有疑問，歡迎添加QQ:714387953(蝸牛上高速)。
github:https://github.com/yhl714387953/ButtonContentEdgeInsets
如果有錯誤，歡迎指正，一起切磋，共同進步
如果喜歡可以Follow、Star、Fork，都是給我最大的鼓勵

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容