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

滴水微瀾發表於2017-06-18
UI控制元件

在開發中經常會碰到需要對按鈕中的圖片文字位置做調整的需求。
第一種方式是通過設定按鈕中圖片文字的偏移量。通過方法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];
}

 

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

相關文章