iOS 图标和文字自定按钮

在项目开发中，经常需要用到按钮，系统默认的按钮是图标在左边，标题在右边。但往往实际情况是多变的，有时候图标在右边、有时候图标在上面，这个时候系统的按钮往往无法满足需求，所以我们需要自定义按钮来满足需求的开发。下面提供两种方法来实现按钮图标和文字自定按钮。

一、采用添加分类，利用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下载

iOS 图标和文字自定按钮相关推荐

给工具栏按钮添加图标和文字
假设工具栏有两个按钮,为每个按钮添加图标和文字 1.新建一个单文档程序,将准备好的图标资源(32×32)复制到res文件夹. 2.在资源中打开工具栏编辑器,删除(del)原有的位图和多余的按钮(将按钮 ...
Qt之按钮左边图标右边文字
一.前言软件开发过程中,会遇到这样的需求,一个按钮要携带图标和文字,且图标在左,文字在右,以此来增强这个按钮的功能指向,这个样式在移动端还是蛮常见的,最典型就是搜索栏. 二.在Qt中有两种方式可以实 ...
ios 系统状态栏样式修改_超简单！！！ iOS设置状态栏、导航栏按钮、标题、颜色、透明度，偏移等...
原标题:超简单!!! iOS设置状态栏.导航栏按钮.标题.颜色.透明度,偏移等 1. 要实现以下这些效果都非常简单 2. 废话不多说,先看看实现效果 3. 下面告诉你我为什么说实现这些效果非常简单比 ...
Photoshop脚本批量生成各尺寸的iOS图标
源自:http://coolketang.com/psscript/menu8lesson12.php 设计师们通常设计一张1024*1024的图标,然后导出十几种用在iPhone, iPad, iT ...
android更改运营商名称,如何把手机左上角运营商名称改为个性化图标或者文字...
大家都知道,如果我们插入手机SIM卡的话,手机左上角都会显示相应的运营商名称,而有的人喜欢把这些官方的老套字修改成个性化图标或者文字,那么如何修改呢? 安卓手机修改如果手机越狱,那么很容易修改.小米 ...
桌面图标计算机文字,怎么把电脑界面图标下面的文字给去掉
以前版本的Windows在用自定义桌面的时候,图标的文字下面都有阴影(就是你的桌面颜色),影响了桌面的视觉效果.原来只能借助其他软件解决,但是性能不稳定,又占用系统资源.Windows XP帮你解决了 ...
win7桌面计算机图标没有文字,win7没有桌面图标只有文字怎么办
最近一些win7的用户反馈说没有桌面图标只有文字,导致没有桌面图标只有文字的原因有很多,不过不要担心,大家可以通过注册表来解决问题.下面和jy135小编一起看看吧!欢迎阅读! win7没有桌面图标只有 ...
icon设计探讨：图标，文字，还是图标加文字？
图标是界面的基本组成部分之一,然而在很多时候,图标本身也在破坏着界面的清晰性. 象形图出现在人类早期,我们可以将其视为最初的文字形式.如今,在某些文明群体中,象形图依然是人们进行沟通的主要媒介. 在很 ...
图标和文字对齐的方法
在平时写页面的过程中,常遇到要把小图标与文字对齐的情况.比如: 总结了两种方法,代码量都比较少. 第一种对img设置竖直方向对齐为middle, 1 2 3 4 5 6 <div> ...