在開發中常常會碰到須要對按鈕中的圖片文字位置作調整的需求。
第一種方式是經過設置按鈕中圖片文字的偏移量。經過方法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)]; }
這種方式對普通的需求是能夠知足的,可是操做起來麻煩,不是那麼直觀。對於像修改圖片子控件的寬高這種高度自定義的行爲是很難實現的。spa
第二種方式則能夠像佈局子視圖同樣自由調整圖片和文字的位置,簡單方便。能夠調出須要的任意佈局方式。code
代碼以下:blog
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,根據不一樣的類型生成不一樣的佈局。it
- (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。class
實例更新方法- (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]; }
效果圖和層級圖展現以下: