UIButton圖片文字控件位置自定義(圖片居右文字居左、圖片居中文字居中、圖片居左文字消失等)

在開發中經常會碰到需要對按鈕中的圖片文字位置做調整的需求。
第一種方式是通過設置按鈕中圖片文字的偏移量。通過方法setTitleEdgeInsets和setImageEdgeInsets實現

代碼如下：

/*!**方式一***/
- (void)updateBtnStyle_rightImage:(UIButton *)btn {
    
    CGFloat btnImageWidth = btn.imageView.bounds.size.width;
    CGFloat btnLabelWidth = btn.titleLabel.bounds.size.width;
    CGFloat margin = 3;
    
    btnImageWidth += margin;
    btnLabelWidth += margin;
    
    [btn setTitleEdgeInsets:UIEdgeInsetsMake(0, -btnImageWidth, 0, btnImageWidth)];
    [btn setImageEdgeInsets:UIEdgeInsetsMake(0, btnLabelWidth, 0, -btnLabelWidth)];
}

這種方式對普通的需求是可以滿足的，但是操作起來麻煩，不是那么直觀。對於像修改圖片子控件的寬高這種高度自定義的行為是很難實現的。

第二種方式則可以像布局子視圖一樣自由調整圖片和文字的位置，簡單方便。可以調出需要的任意布局方式。

代碼如下：

1.在.h文件中：

自定義類ZFButton，繼承自UIButton。定義枚舉ZFButtonType說明不同的類型。定義實例更新方法- (void)updateButtonStyleWithType:在需要的時候，根據自己的意願更新成自己想要的樣式。

#import <UIKit/UIKit.h>

typedef enum : NSUInteger {
    ZFButtonTypeCenterImageCenterTitle,//圖片，文字都居中
    ZFButtonTypeRightImageLeftTitle,//圖片右，文字左
    ZFButtonTypeLeftImageNoneTitle,//圖片左，文字無
} ZFButtonType;

@interface ZFButton : UIButton
+ (instancetype)zfButtonWithType:(ZFButtonType)buttonType;

- (void)updateButtonStyleWithType:(ZFButtonType)buttonType;
@end

2.中.m文件中：

重寫方法- (void)layoutSubviews，根據不同的類型生成不同的布局。

- (void)layoutSubviews {
    [super layoutSubviews];
    
    if (self.type == ZFButtonTypeCenterImageCenterTitle) {
        [self resetBtnCenterImageCenterTitle];
    } else if (self.type == ZFButtonTypeLeftImageNoneTitle) {
        [self resetBtnLeftImageNotTitle];
    } else if (self.type == ZFButtonTypeRightImageLeftTitle) {
        [self resetBtnRightImageLeftTitle];
    }
}

工廠方法zfButtonWithType:創建不同類型的ZFButton。

實例更新方法- (void)updateButtonStyleWithType:更新成不同UI類型的Button

+ (instancetype)zfButtonWithType:(ZFButtonType)buttonType {

    ZFButton * btn = [ZFButton buttonWithType:UIButtonTypeCustom];
    btn.type = buttonType;
    
    return btn;
}

- (void)updateButtonStyleWithType:(ZFButtonType)buttonType {

    self.type = buttonType;
    [self layoutSubviews];
}

具體算法如下：

#pragma mark - 私有方法
/*!**方式二***/
- (void)resetBtnCenterImageCenterTitle {
    
    self.imageView.frame = self.bounds;
    [self.imageView setContentMode:UIViewContentModeCenter];
    
    self.titleLabel.frame = self.bounds;
    self.titleLabel.textAlignment = NSTextAlignmentCenter;
}

- (void)resetBtnLeftImageNotTitle {
    
    CGRect frame = self.bounds;
    frame.size.width *= 0.5;
    self.imageView.frame = frame;
    [self.imageView setContentMode:UIViewContentModeCenter];
    
    self.titleLabel.frame = CGRectZero;
    self.titleLabel.textAlignment = NSTextAlignmentCenter;
}

- (void)resetBtnRightImageLeftTitle {
    
    CGRect frame = self.bounds;
    frame.size.width *= 0.5;
    self.titleLabel.frame = frame;
    self.titleLabel.textAlignment = NSTextAlignmentCenter;
    
    frame.origin.x = (self.bounds.size.width - frame.size.width);
    self.imageView.frame = frame;
    [self.imageView setContentMode:UIViewContentModeCenter];
}

 

效果圖和層級圖展示如下：