iOS 图标和文字自定按钮

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

一、采用添加分类，利用EdgeInsets属性实现

创建一个UIButton的分类，文件名为：UIButton+Icon，在分类里添加如下代码：

1.1 UIButton+Icon.h

#import <UIKit/UIKit.h&gt;

NS_ASSUME_NONNULL_BEGIN

typedef 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;

@end

NS_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_BEGIN

typedef NS_ENUM(NSUInteger, IconButtonStyle) {
    IconButtonStyleTop, // image在上，label在下
    IconButtonStyleLeft, // image在左，label在右
    IconButtonStyleBottom, // image在下，label在上
    IconButtonStyleRight // image在右，label在左
};

@interface IconButton : UIButton

@property (nonatomic, assign) IconButtonStyle style;

@end

NS_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_BEGIN

typedef 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;

@end

NS_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下载

代码007普通

打赏 收藏 海报 链接