iOS UIButton文字和圖片間距隨意調整

代碼地址如下：
http://www.demodashi.com/demo/11606.html

前記

在開發中，我們經常會遇到這么一種情況，就是一個按鈕上面有圖片也有文字，但是往往設計並不是我們想要的那種，比如可能圖片在上，文字在下，或者圖片在左，文字在右，關鍵是還有一定的距離，並不是系統默認UIButton中，圖片和文字的間距。當然，這調整圖片和文字的距離的小事，是難不倒大家的，因為大家都知道，在UIButton中，有這么兩個屬性titleEdgeInsets和imageEdgeInsets

關於屬性

關於titleEdgeInsets和imageEdgeInsets這兩個屬性，簡單介紹下：
titleEdgeInsets是title相對於其上下左右的inset，跟tableView的contentInset是類似的，如果只有title，那它上下左右都是相對於button的，imageEdgeInsets也是一樣
如果同時有image和title，那這時候image的上左下是相對於button，右邊是相對於title的；title的上右下是相對於button，左邊是相對於image的，也就是說image是默認居左的。
通過以上兩個屬性，可以很輕松的實現文字和圖片的位置及距離的調整，如果每次在用的時候，都去重新寫一片，難免會很麻煩，鑒於此，之前在謀篇博客中（具體忘了，原博主看到請勿見怪），看到過用category封裝的，於是我在項目中，也寫了一個category，其中也列舉了四種不同的枚舉來表現其不同的場景

枚舉類型

// 定義一個枚舉（包含了四種類型的button）
typedef NS_ENUM(NSUInteger, GLButtonEdgeInsetsStyle) {
    GLButtonEdgeInsetsStyleTop, // image在上，label在下
    GLButtonEdgeInsetsStyleLeft, // image在左，label在右
    GLButtonEdgeInsetsStyleBottom, // image在下，label在上
    GLButtonEdgeInsetsStyleRight // image在右，label在左
};

並且定義了一個簡單使用的方法：

/**
 *  設置button的titleLabel和imageView的布局樣式，及間距
 *
 *  @param style titleLabel和imageView的布局樣式
 *  @param space titleLabel和imageView的間距
 */
- (void)layoutButtonWithEdgeInsetsStyle:(GLButtonEdgeInsetsStyle)style
                        imageTitleSpace:(CGFloat)space;

其中space是指圖片和文字之間的間距，style對應上面的枚舉，可以針對性的選擇

具體實現方法

- (void)layoutButtonWithEdgeInsetsStyle:(GLButtonEdgeInsetsStyle)style
                        imageTitleSpace:(CGFloat)space {
    /**
     *  知識點：titleEdgeInsets是title相對於其上下左右的inset，跟tableView的contentInset是類似的，
     *  如果只有title，那它上下左右都是相對於button的，image也是一樣；
     *  如果同時有image和label，那這時候image的上左下是相對於button，右邊是相對於label的；title的上右下是相對於button，左邊是相對於image的。
     */
    
    // 1. 得到imageView和titleLabel的寬、高
    CGFloat imageWith = self.imageView.image.size.width;
    CGFloat imageHeight = self.imageView.image.size.height;
    
    CGFloat labelWidth = 0.0;
    CGFloat labelHeight = 0.0;
    if ([UIDevice currentDevice].systemVersion.floatValue >= 8.0) {
    // 由於iOS8中titleLabel的size為0，用下面的這種設置
        labelWidth = self.titleLabel.intrinsicContentSize.width;
        labelHeight = self.titleLabel.intrinsicContentSize.height;
    } else {
        labelWidth = self.titleLabel.frame.size.width;
        labelHeight = self.titleLabel.frame.size.height;
    }
    
    // 2. 聲明全局的imageEdgeInsets和labelEdgeInsets
    UIEdgeInsets imageEdgeInsets = UIEdgeInsetsZero;
    UIEdgeInsets labelEdgeInsets = UIEdgeInsetsZero;
    
    // 3. 根據style和space得到imageEdgeInsets和labelEdgeInsets的值

    switch (style) {
        case GLButtonEdgeInsetsStyleTop:
        {            
            imageEdgeInsets = UIEdgeInsetsMake(-labelHeight-space/2.0, 0, 0, -labelWidth);
            labelEdgeInsets = UIEdgeInsetsMake(0, -imageWith, -imageHeight-space/2.0, 0);
        }
            break;
        case GLButtonEdgeInsetsStyleLeft:
        {
            imageEdgeInsets = UIEdgeInsetsMake(0, -space/2.0, 0, space/2.0);
            labelEdgeInsets = UIEdgeInsetsMake(0, space/2.0, 0, -space/2.0);
        }
            break;
        case GLButtonEdgeInsetsStyleBottom:
        {
            imageEdgeInsets = UIEdgeInsetsMake(0, 0, -labelHeight-space/2.0, -labelWidth);
            labelEdgeInsets = UIEdgeInsetsMake(-imageHeight-space/2.0, -imageWith, 0, 0);
        }
            break;
        case GLButtonEdgeInsetsStyleRight:
        {
            imageEdgeInsets = UIEdgeInsetsMake(0, labelWidth+space/2.0, 0, -labelWidth-space/2.0);
            labelEdgeInsets = UIEdgeInsetsMake(0, -imageWith-space/2.0, 0, imageWith+space/2.0);
        }
            break;
        default:
            break;
    }
    
    // 4. 賦值
    self.titleEdgeInsets = labelEdgeInsets;
    self.imageEdgeInsets = imageEdgeInsets;
}

實現效果

其實思路很簡單，這里只是簡單封裝了下。

項目文件截圖：

iOS UIButton文字和圖片間距隨意調整

代碼地址如下：
http://www.demodashi.com/demo/11606.html

注：本文著作權歸作者，由demo大師代發，拒絕轉載，轉載需要作者授權