原理
1.titleEdgeInsets是title相對于其上下左右的inset,跟tableView的contentInset是類似的;
2.如果只有title,那它上下左右都是相對于button的,image也是一樣;
3.如果同時有image和label,那這時候image的上左下是相對于button,右邊是相對于label的;title的上右下是相對于button,左邊是相對于image的。
直接上代碼,通常的設(shè)置我們會這樣做:
[self.navView.centerButton setTitleEdgeInsets:UIEdgeInsetsMake(0.0, -CGRectGetWidth(self.navView.centerButton.imageView.frame), 0.0, CGRectGetWidth(self.navView.centerButton.imageView.frame) + self.arrowPadding)];
[self.navView.centerButton setImageEdgeInsets:UIEdgeInsetsMake(0.0, CGRectGetWidth(self.navView.centerButton.titleLabel.frame) + self.arrowPadding, 0.0, -CGRectGetWidth(self.navView.centerButton.titleLabel.frame))];
相對比較繁瑣且每個地方都得設(shè)置。
下面我們通過category自定義button的titleLabel和imageView的位置,方便使用
typedef NS_ENUM(NSUInteger, MKButtonEdgeInsetsStyle) {
MKButtonEdgeInsetsStyleTop, // image在上,label在下
MKButtonEdgeInsetsStyleLeft, // image在左,label在右
MKButtonEdgeInsetsStyleBottom, // image在下,label在上
MKButtonEdgeInsetsStyleRight // image在右,label在左
};
@interface UIButton (ImageTitleSpacing)
/**
* 設(shè)置button的titleLabel和imageView的布局樣式,及間距
*
* @param style titleLabel和imageView的布局樣式
* @param space titleLabel和imageView的間距
*/
- (void)layoutButtonWithEdgeInsetsStyle:(MKButtonEdgeInsetsStyle)style
imageTitleSpace:(CGFloat)space;
運(yùn)用分類一行代碼即可實(shí)現(xiàn)。
這里參考GitHub上開源項(xiàng)目# MKButtonStyle
感謝作者# mokong分享