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

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];
}

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

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！