在项目开发中,经常需要用到按钮,系统默认的按钮是图标在左边,标题在右边。但往往实际情况是多变的,有时候图标在右边、有时候图标在上面,这个时候系统的按钮往往无法满足需求,所以我们需要自定义按钮来满足需求的开发。下面提供两种方法来实现按钮图标和文字自定按钮。
一、采用添加分类,利用EdgeInsets属性实现
创建一个UIButton的分类,文件名为:UIButton+Icon,在分类里添加如下代码:
1.1 UIButton+Icon.h
#import <UIKit/UIKit.h>NS_ASSUME_NONNULL_BEGINtypedef NS_ENUM(NSUInteger, HSButtonEdgeInsetsStyle) {HSButtonEdgeInsetsStyleTop, // image在上,label在下HSButtonEdgeInsetsStyleLeft, // image在左,label在右HSButtonEdgeInsetsStyleBottom, // image在下,label在上HSButtonEdgeInsetsStyleRight // image在右,label在左
};@interface UIButton (Icon)- (void)layoutEdgeInsetsStyle:(HSButtonEdgeInsetsStyle)style space:(CGFloat)space;@endNS_ASSUME_NONNULL_END
1.2 UIButton+Icon.m
#import "UIButton+Icon.h"@implementation UIButton (Icon)- (void)layoutEdgeInsetsStyle:(HSButtonEdgeInsetsStyle)style space:(CGFloat)space {CGFloat imageWith = self.imageView.frame.size.width;CGFloat imageHeight = self.imageView.frame.size.height;CGFloat labelWidth = self.titleLabel.frame.size.width;CGFloat labelHeight = self.titleLabel.frame.size.height;UIEdgeInsets imageEdgeInsets = UIEdgeInsetsZero;UIEdgeInsets labelEdgeInsets = UIEdgeInsetsZero;switch (style) {case HSButtonEdgeInsetsStyleTop:{imageEdgeInsets = UIEdgeInsetsMake(-labelHeight-space/2.0, 0, 0, -labelWidth);labelEdgeInsets = UIEdgeInsetsMake(0, -imageWith, -imageHeight-space/2.0, 0);}break;case HSButtonEdgeInsetsStyleLeft:{imageEdgeInsets = UIEdgeInsetsMake(0, -space/2.0, 0, space/2.0);labelEdgeInsets = UIEdgeInsetsMake(0, space/2.0, 0, -space/2.0);}break;case HSButtonEdgeInsetsStyleBottom:{imageEdgeInsets = UIEdgeInsetsMake(0, 0, -labelHeight-space/2.0, -labelWidth);labelEdgeInsets = UIEdgeInsetsMake(-imageHeight-space/2.0, -imageWith, 0, 0);}break;case HSButtonEdgeInsetsStyleRight:{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;}self.titleEdgeInsets = labelEdgeInsets;self.imageEdgeInsets = imageEdgeInsets;
}@end
1.3 使用
#import "IconButtonController.h"
#import "UIButton+Icon.h"@interface IconButtonController ()@end@implementation IconButtonController- (void)viewDidLoad {[super viewDidLoad];self.title = @"自定义按钮";UIButton *btn1 = [[UIButton alloc] initWithFrame:CGRectMake(30, 30, SCREEN_WIDTH-60, 100)];[btn1 setImage:[UIImage imageNamed:@"user_default_blue"] forState:UIControlStateNormal];[btn1 setTitle:@"保存完成" forState:UIControlStateNormal];[btn1.titleLabel setTextColor:[UIColor whiteColor]];[btn1 setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];[btn1.titleLabel setFont:[UIFont systemFontOfSize:16]];[btn1 setBackgroundColor:[UIColor orangeColor]];btn1.layer.cornerRadius = 5;btn1.layer.masksToBounds = YES;[self.view addSubview:btn1];UIButton *btn2 = [[UIButton alloc] initWithFrame:CGRectMake(30, 160, SCREEN_WIDTH-60, 100)];[btn2 setImage:[UIImage imageNamed:@"user_default_blue"] forState:UIControlStateNormal];[btn2 setTitle:@"保存完成" forState:UIControlStateNormal];[btn2.titleLabel setTextColor:[UIColor whiteColor]];[btn2 setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];[btn2.titleLabel setFont:[UIFont systemFontOfSize:16]];[btn2 setBackgroundColor:[UIColor orangeColor]];btn2.layer.cornerRadius = 5;btn2.layer.masksToBounds = YES;[self.view addSubview:btn2];UIButton *btn3 = [[UIButton alloc] initWithFrame:CGRectMake(30, 290, SCREEN_WIDTH-60, 100)];[btn3 setImage:[UIImage imageNamed:@"user_default_blue"] forState:UIControlStateNormal];[btn3 setTitle:@"保存完成" forState:UIControlStateNormal];[btn3.titleLabel setTextColor:[UIColor whiteColor]];[btn3 setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];[btn3.titleLabel setFont:[UIFont systemFontOfSize:16]];[btn3 setBackgroundColor:[UIColor orangeColor]];btn3.layer.cornerRadius = 5;btn3.layer.masksToBounds = YES;[self.view addSubview:btn3];UIButton *btn4 = [[UIButton alloc] initWithFrame:CGRectMake(30, 420, SCREEN_WIDTH-60, 100)];[btn4 setImage:[UIImage imageNamed:@"user_default_blue"] forState:UIControlStateNormal];[btn4 setTitle:@"保存完成" forState:UIControlStateNormal];[btn4.titleLabel setTextColor:[UIColor whiteColor]];[btn4 setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];[btn4.titleLabel setFont:[UIFont systemFontOfSize:16]];[btn4 setBackgroundColor:[UIColor orangeColor]];btn4.layer.cornerRadius = 5;btn4.layer.masksToBounds = YES;[self.view addSubview:btn4];[btn1 layoutEdgeInsetsStyle:HSButtonEdgeInsetsStyleLeft space:5];[btn2 layoutEdgeInsetsStyle:HSButtonEdgeInsetsStyleRight space:5];[btn3 layoutEdgeInsetsStyle:HSButtonEdgeInsetsStyleTop space:5];[btn4 layoutEdgeInsetsStyle:HSButtonEdgeInsetsStyleBottom space:5];}@end
1.4 效果图
二、采用按钮子类,自定图标和标题位置实现
创建一个类:IconButton,继承于UIButton,添加如下代码:
2.1 IconButton.h
#import <UIKit/UIKit.h>NS_ASSUME_NONNULL_BEGINtypedef NS_ENUM(NSUInteger, IconButtonStyle) {IconButtonStyleTop, // image在上,label在下IconButtonStyleLeft, // image在左,label在右IconButtonStyleBottom, // image在下,label在上IconButtonStyleRight // image在右,label在左
};@interface IconButton : UIButton@property (nonatomic, assign) IconButtonStyle style;@endNS_ASSUME_NONNULL_END
2.2 IconButton.m
#import "IconButton.h"#define SPACE 5@implementation IconButton// 重写layoutSubviews方法,手动设置按钮子控件的位置
- (void)layoutSubviews {[super layoutSubviews];CGFloat buttonWith = self.frame.size.width;CGFloat buttonHeight = self.frame.size.height;CGFloat imageWith = self.imageView.frame.size.width;CGFloat imageHeight = self.imageView.frame.size.height;CGFloat labelWidth = self.titleLabel.frame.size.width;CGFloat labelHeight = self.titleLabel.frame.size.height;CGFloat totalWidth = imageWith+labelWidth+SPACE;if (self.style == IconButtonStyleLeft) {self.imageView.frame = CGRectMake((buttonWith-totalWidth)/2,self.imageView.frame.origin.y,imageWith,imageHeight);self.titleLabel.frame = CGRectMake(self.imageView.frame.origin.x+imageWith+5,self.titleLabel.frame.origin.y,labelWidth,labelHeight);} else if (self.style == IconButtonStyleRight) {self.titleLabel.frame = CGRectMake((buttonWith-totalWidth)/2,self.titleLabel.frame.origin.y,labelWidth,labelHeight);self.imageView.frame = CGRectMake(self.titleLabel.frame.origin.x+labelWidth+SPACE,self.imageView.frame.origin.y,imageWith,imageHeight);} else if (self.style == IconButtonStyleTop) {self.imageView.frame = CGRectMake((buttonWith-imageWith)/2,(buttonHeight-imageHeight-labelHeight-SPACE)/2,imageWith,imageHeight);self.titleLabel.frame = CGRectMake((buttonWith-labelWidth)/2,(buttonHeight-imageHeight-labelHeight-SPACE)/2+imageHeight+SPACE,labelWidth,labelHeight);} else {self.titleLabel.frame = CGRectMake((buttonWith-labelWidth)/2,(buttonHeight-imageHeight-labelHeight-5)/2,labelWidth,labelHeight);self.imageView.frame = CGRectMake((buttonWith-imageWith)/2,(buttonHeight-imageHeight-labelHeight-5)/2+labelHeight+5,imageWith,imageHeight);}
}@end
2.3 使用
#import "IconButtonController.h"
#import "IconButton.h"@interface IconButtonController ()@end@implementation IconButtonController- (void)viewDidLoad {[super viewDidLoad];self.title = @"自定义按钮";IconButton *btn1 = [[IconButton alloc] initWithFrame:CGRectMake(30, 30, SCREEN_WIDTH-60, 100)];[btn1 setImage:[UIImage imageNamed:@"user_default_blue"] forState:UIControlStateNormal];[btn1 setTitle:@"保存完成" forState:UIControlStateNormal];[btn1.titleLabel setTextColor:[UIColor whiteColor]];[btn1 setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];[btn1.titleLabel setFont:[UIFont systemFontOfSize:16]];[btn1 setBackgroundColor:[UIColor orangeColor]];btn1.layer.cornerRadius = 5;btn1.layer.masksToBounds = YES;[self.view addSubview:btn1];IconButton *btn2 = [[IconButton alloc] initWithFrame:CGRectMake(30, 160, SCREEN_WIDTH-60, 100)];[btn2 setImage:[UIImage imageNamed:@"user_default_blue"] forState:UIControlStateNormal];[btn2 setTitle:@"保存完成" forState:UIControlStateNormal];[btn2.titleLabel setTextColor:[UIColor whiteColor]];[btn2 setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];[btn2.titleLabel setFont:[UIFont systemFontOfSize:16]];[btn2 setBackgroundColor:[UIColor orangeColor]];btn2.layer.cornerRadius = 5;btn2.layer.masksToBounds = YES;[self.view addSubview:btn2];IconButton *btn3 = [[IconButton alloc] initWithFrame:CGRectMake(30, 290, SCREEN_WIDTH-60, 100)];[btn3 setImage:[UIImage imageNamed:@"user_default_blue"] forState:UIControlStateNormal];[btn3 setTitle:@"保存完成" forState:UIControlStateNormal];[btn3.titleLabel setTextColor:[UIColor whiteColor]];[btn3 setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];[btn3.titleLabel setFont:[UIFont systemFontOfSize:16]];[btn3 setBackgroundColor:[UIColor orangeColor]];btn3.layer.cornerRadius = 5;btn3.layer.masksToBounds = YES;[self.view addSubview:btn3];IconButton *btn4 = [[IconButton alloc] initWithFrame:CGRectMake(30, 420, SCREEN_WIDTH-60, 100)];[btn4 setImage:[UIImage imageNamed:@"user_default_blue"] forState:UIControlStateNormal];[btn4 setTitle:@"保存完成" forState:UIControlStateNormal];[btn4.titleLabel setTextColor:[UIColor whiteColor]];[btn4 setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];[btn4.titleLabel setFont:[UIFont systemFontOfSize:16]];[btn4 setBackgroundColor:[UIColor orangeColor]];btn4.layer.cornerRadius = 5;btn4.layer.masksToBounds = YES;[self.view addSubview:btn4];btn1.style = IconButtonStyleLeft;btn2.style = IconButtonStyleRight;btn3.style = IconButtonStyleTop;btn4.style = IconButtonStyleBottom;
}@end
2.4 效果图
三、采用继承UIControl,重写按钮控件方式实现
新建一个类:HSImageBtn,继承于:UIControl,添加如下代码:
3.1 HSImageBtn.h
#import <UIKit/UIKit.h>NS_ASSUME_NONNULL_BEGINtypedef NS_ENUM(NSUInteger, HSImageBtnStyle) {HSImageBtnStyleTop, // image在上,label在下HSImageBtnStyleLeft, // image在左,label在右HSImageBtnStyleBottom, // image在下,label在上HSImageBtnStyleRight // image在右,label在左
};@interface HSImageBtn : UIControl@property(nonatomic, copy)NSString *title;
@property(nonatomic, copy)UIColor *titleColor;
@property(nonatomic, copy)UIFont *font;
@property(nonatomic, copy)UIImage *image;@property (nonatomic, assign) HSImageBtnStyle style;@endNS_ASSUME_NONNULL_END
3.2 HSImageBtn.m
#import "HSImageBtn.h"@interface HSImageBtn ()@property (nonatomic, strong) UILabel *titleLabel;
@property (nonatomic, strong) UIImageView *icon;@end@implementation HSImageBtn- (instancetype)initWithFrame:(CGRect)frame
{self = [super initWithFrame:frame];if (self) {[self defindContentUI];}return self;
}- (void)defindContentUI
{self.icon = [[UIImageView alloc] initWithFrame:CGRectZero];[self addSubview:self.icon];self.titleLabel = [[UILabel alloc] initWithFrame:CGRectZero];self.titleLabel.textAlignment = NSTextAlignmentLeft;[self addSubview:self.titleLabel];
}- (void)setStyle:(HSImageBtnStyle)style
{_style = style;if (self.style == HSImageBtnStyleLeft) {[self.icon mas_makeConstraints:^(MASConstraintMaker *make) {make.left.equalTo(self).offset(5);make.centerY.equalTo(self);make.width.mas_equalTo(25);make.height.mas_equalTo(25);}];[self.titleLabel mas_makeConstraints:^(MASConstraintMaker *make) {make.left.equalTo(self.icon.mas_right).offset(5);make.centerY.equalTo(self);make.right.equalTo(self).offset(-5);}];} else if (self.style == HSImageBtnStyleRight) {[self.titleLabel mas_makeConstraints:^(MASConstraintMaker *make) {make.left.equalTo(self).offset(5);make.centerY.equalTo(self);}];[self.icon mas_makeConstraints:^(MASConstraintMaker *make) {make.left.equalTo(self.titleLabel.mas_right).offset(5);make.centerY.equalTo(self);make.width.mas_equalTo(25);make.height.mas_equalTo(25);}];} else if (self.style == HSImageBtnStyleTop) {[self.icon mas_makeConstraints:^(MASConstraintMaker *make) {make.top.equalTo(self).offset(5);make.centerX.equalTo(self);make.width.mas_equalTo(25);make.height.mas_equalTo(25);}];[self.titleLabel mas_makeConstraints:^(MASConstraintMaker *make) {make.top.equalTo(self.icon.mas_bottom).offset(5);make.centerX.equalTo(self);}];} else {[self.titleLabel mas_makeConstraints:^(MASConstraintMaker *make) {make.top.equalTo(self).offset(5);make.centerX.equalTo(self);}];[self.icon mas_makeConstraints:^(MASConstraintMaker *make) {make.top.equalTo(self.titleLabel.mas_bottom).offset(5);make.centerX.equalTo(self);make.width.mas_equalTo(25);make.height.mas_equalTo(25);}];}
}#pragma mark - Setter- (void)setTitle:(NSString *)title{_title = title;self.titleLabel.text = title;
}-(void)setTitleColor:(UIColor *)titleColor{_titleColor = titleColor;self.titleLabel.textColor = titleColor;
}- (void)setFont:(UIFont *)font{_font = font;self.titleLabel.font = font;
}- (void)setImage:(UIImage *)image {_image = image;self.icon.image = image;
}@end
3.3 使用
#import "IconButton3Controller.h"
#import "HSImageBtn.h"@interface IconButton3Controller ()@end@implementation IconButton3Controller- (void)viewDidLoad {[super viewDidLoad];self.title = @"自定义按钮";HSImageBtn *btn1 = [[HSImageBtn alloc] initWithFrame:CGRectZero];btn1.backgroundColor = [UIColor orangeColor];btn1.title = @"保存";btn1.titleColor = [UIColor whiteColor];btn1.font = [UIFont systemFontOfSize:16];btn1.image = [UIImage imageNamed:@"user_default_blue"];[btn1 addTarget:self action:@selector(buttonClick) forControlEvents:UIControlEventTouchUpInside];[self.view addSubview:btn1];HSImageBtn *btn2 = [[HSImageBtn alloc] initWithFrame:CGRectZero];btn2.backgroundColor = [UIColor orangeColor];btn2.title = @"保存";btn2.titleColor = [UIColor whiteColor];btn2.font = [UIFont systemFontOfSize:16];btn2.image = [UIImage imageNamed:@"user_default_blue"];[btn2 addTarget:self action:@selector(buttonClick) forControlEvents:UIControlEventTouchUpInside];[self.view addSubview:btn2];HSImageBtn *btn3 = [[HSImageBtn alloc] initWithFrame:CGRectZero];btn3.backgroundColor = [UIColor orangeColor];btn3.title = @"保存";btn3.titleColor = [UIColor whiteColor];btn3.font = [UIFont systemFontOfSize:16];btn3.image = [UIImage imageNamed:@"user_default_blue"];[btn3 addTarget:self action:@selector(buttonClick) forControlEvents:UIControlEventTouchUpInside];[self.view addSubview:btn3];HSImageBtn *btn4 = [[HSImageBtn alloc] initWithFrame:CGRectZero];btn4.backgroundColor = [UIColor orangeColor];btn4.title = @"保存";btn4.titleColor = [UIColor whiteColor];btn4.font = [UIFont systemFontOfSize:16];btn4.image = [UIImage imageNamed:@"user_default_blue"];[btn4 addTarget:self action:@selector(buttonClick) forControlEvents:UIControlEventTouchUpInside];[self.view addSubview:btn4];btn1.style = HSImageBtnStyleLeft;btn2.style = HSImageBtnStyleRight;btn3.style = HSImageBtnStyleTop;btn4.style = HSImageBtnStyleBottom;[btn1 mas_makeConstraints:^(MASConstraintMaker *make) {make.top.equalTo(self.view).offset(20);make.centerX.equalTo(self.view);make.width.mas_equalTo(80);make.height.mas_equalTo(60);}];[btn2 mas_makeConstraints:^(MASConstraintMaker *make) {make.top.equalTo(btn1.mas_bottom).offset(20);make.centerX.equalTo(self.view);make.width.mas_equalTo(80);make.height.mas_equalTo(60);}];[btn3 mas_makeConstraints:^(MASConstraintMaker *make) {make.top.equalTo(btn2.mas_bottom).offset(20);make.centerX.equalTo(self.view);make.width.mas_equalTo(80);make.height.mas_equalTo(60);}];[btn4 mas_makeConstraints:^(MASConstraintMaker *make) {make.top.equalTo(btn3.mas_bottom).offset(20);make.centerX.equalTo(self.view);make.width.mas_equalTo(80);make.height.mas_equalTo(60);}];
}- (void)buttonClick
{NSLog(@"按钮点击了...");
}@end
3.4 效果图
Demo下载