- 在設(shè)置這兩個(gè)之前但狭,我們先要理解Button上面的titleLabel和imageView的位置關(guān)系(想象Button默認(rèn)的image和label的顯示):
我們知道帚戳,默認(rèn)情況下如果UIbutton同時(shí)設(shè)置了標(biāo)題和圖片的情況下,titleLabel在image的右側(cè)挂捻。
1.titleEdgeInsets是titleLabel相對(duì)于其上下左右的inset蒋譬,跟tableView的contentInset是類似的;
2.如果只有title女器,那titleLabel的 上下左右 都是 相對(duì)于Button 的;
3.如果只有image住诸,那imageView的 上下左右 都是 相對(duì)于Button 的驾胆;
4.如果同時(shí)有image和label,那image的 上下左 是 相對(duì)于Button 的贱呐,右 是 相對(duì)于label 的丧诺;
label的 上下右 是 相對(duì)于Button的, 左 是 相對(duì)于label 的奄薇。
0x01.新建一個(gè)UIButton類驳阎。
xx.h
#import <UIKit/UIKit.h>
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;
@end
xx.m
#import "UIButton+ImageTitleSpacing.h"
@implementation UIButton (ImageTitleSpacing)
- (void)layoutButtonWithEdgeInsetsStyle:(MKButtonEdgeInsetsStyle)style
imageTitleSpace:(CGFloat)space
{
// self.backgroundColor = [UIColor cyanColor];
/**
* 前置知識(shí)點(diǎn):titleEdgeInsets是title相對(duì)于其上下左右的inset饵隙,跟tableView的contentInset是類似的,
* 如果只有title沮脖,那它上下左右都是相對(duì)于button的金矛,image也是一樣芯急;
* 如果同時(shí)有image和label,那這時(shí)候image的上左下是相對(duì)于button驶俊,右邊是相對(duì)于label的娶耍;title的上右下是相對(duì)于button,左邊是相對(duì)于image的废睦。
*/
// 1. 得到imageView和titleLabel的寬伺绽、高
CGFloat imageWith = self.imageView.frame.size.width;
CGFloat imageHeight = self.imageView.frame.size.height;
CGFloat labelWidth = 0.0;
CGFloat labelHeight = 0.0;
if ([UIDevice currentDevice].systemVersion.floatValue >= 8.0) {
// 由于iOS8中titleLabel的size為0养泡,用下面的這種設(shè)置
labelWidth = self.titleLabel.intrinsicContentSize.width;
labelHeight = self.titleLabel.intrinsicContentSize.height;
} else {
labelWidth = self.titleLabel.frame.size.width;
labelHeight = self.titleLabel.frame.size.height;
}
// 2. 聲明全局的imageEdgeInsets和labelEdgeInsets
UIEdgeInsets imageEdgeInsets = UIEdgeInsetsZero;
UIEdgeInsets labelEdgeInsets = UIEdgeInsetsZero;
// 3. 根據(jù)style和space得到imageEdgeInsets和labelEdgeInsets的值
switch (style) {
case MKButtonEdgeInsetsStyleTop:
{
imageEdgeInsets = UIEdgeInsetsMake(-labelHeight-space/2.0, 0, 0, -labelWidth);
labelEdgeInsets = UIEdgeInsetsMake(0, -imageWith, -imageHeight-space/2.0, 0);
}
break;
case MKButtonEdgeInsetsStyleLeft:
{
imageEdgeInsets = UIEdgeInsetsMake(0, -space/2.0, 0, space/2.0);
labelEdgeInsets = UIEdgeInsetsMake(0, space/2.0, 0, -space/2.0);
}
break;
case MKButtonEdgeInsetsStyleBottom:
{
imageEdgeInsets = UIEdgeInsetsMake(0, 0, -labelHeight-space/2.0, -labelWidth);
labelEdgeInsets = UIEdgeInsetsMake(-imageHeight-space/2.0, -imageWith, 0, 0);
}
break;
case MKButtonEdgeInsetsStyleRight:
{
imageEdgeInsets = UIEdgeInsetsMake(0, labelWidth+space/2.0, 0, -labelWidth-space/2.0);
labelEdgeInsets = UIEdgeInsetsMake(0, -imageWith-space/2.0, 0, imageWith+space/2.0);
}
break;
default:
break;
}
// 4. 賦值
self.titleEdgeInsets = labelEdgeInsets;
self.imageEdgeInsets = imageEdgeInsets;
}
@end
0x02.使用方法嗜湃。
#import "ViewController.h"
#import "xx.h"
@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIButton *topButton;
@property (weak, nonatomic) IBOutlet UIButton *leftButton;
@property (weak, nonatomic) IBOutlet UIButton *bottomButton;
@property (weak, nonatomic) IBOutlet UIButton *rightButton;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
[self updateUI];
}
- (void)updateUI {
CGFloat space = 20.0;
[self.topButton layoutButtonWithEdgeInsetsStyle:MKButtonEdgeInsetsStyleTop
imageTitleSpace:space];
[self.leftButton layoutButtonWithEdgeInsetsStyle:MKButtonEdgeInsetsStyleLeft
imageTitleSpace:space];
[self.bottomButton layoutButtonWithEdgeInsetsStyle:MKButtonEdgeInsetsStyleBottom
imageTitleSpace:space];
[self.rightButton layoutButtonWithEdgeInsetsStyle:MKButtonEdgeInsetsStyleRight
imageTitleSpace:space];
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
@end