iOS使用带字体图标的UIButton(支持各种方向)

1.图标字体的导入及使用: https://segmentfault.com/a/1190000004300281
2.我使用的是继承的方式,没有使用原生UIButton的title和imageView,而是自己增加两个UILabel到UIButton上去,好处是是按钮可以高度自定义,布局采用的是Masonry自适应。
3.相关代码:
ZMButton.h

#import <UIKit/UIKit.h>
/**
 *  默认图标在右边
 */
typedef NS_ENUM(NSInteger,ButtonIconType) {
    ButtonIconTypeNormal = 0,
    ButtonIconTypeLeft,
    ButtonIconTypeTop,
    ButtonIconTypeBottom
};
@interface ZMButton : UIButton

/** 标题标签 */
@property (nonatomic, strong) UILabel       *buttonTitleLabel;
/** 字体图标标签 */
@property (nonatomic, strong) UILabel       *buttonIconLabel;
/** 标题 */
@property (nonatomic, copy)   NSString      *buttonTitle;
/** 图标 */
@property (nonatomic, copy)   NSString      *buttonIcon;
/** 图标类型 */
@property (nonatomic, assign) ButtonIconType iconType;
/** 公共间距 */
@property (nonatomic, assign) CGFloat        margin;
/** 左间距 */
@property (nonatomic, assign) CGFloat        marginLeft;
/** 上间距 */
@property (nonatomic, assign) CGFloat        marginTop;
/** 按钮总宽度(包含间距) */
@property (nonatomic, assign) CGFloat        totalWidth;
/** 字体 */
@property (nonatomic, strong) UIFont         *titleFont;
/** 字体大小 */
@property (nonatomic, assign) CGFloat        titleFontSize;
/** 字体size */
@property (nonatomic, assign) CGSize         titleSize;
/** 图标字体 */
@property (nonatomic, strong) UIFont         *iconFont;
/** 图标字体大小 */
@property (nonatomic, assign) CGFloat        iconFontSize;
/** 图标size */
@property (nonatomic, assign) CGSize         iconSize;
/** 标题颜色 */
@property (nonatomic, strong) UIColor        *titleColor;
/** 图标颜色 */
@property (nonatomic, strong) UIColor        *iconColor;

- (instancetype)initWithTitle:(NSString *)title  icon:(NSString *)icon iconType:(ButtonIconType)iconType;
- (void)setupUI;

@end

ZMButton.m

#import "ZMButton.h"

@implementation ZMButton

- (UILabel *)buttonTitleLabel{
    if (!_buttonTitleLabel) {
        _buttonTitleLabel = [[UILabel alloc] init];
        _buttonTitleLabel.font = _titleFont;
        _buttonTitleLabel.textColor = _titleColor;
        [self addSubview:_buttonTitleLabel];
        [_buttonTitleLabel mas_makeConstraints:^(MASConstraintMaker *make) {
            if (_iconType == ButtonIconTypeNormal) {
                make.left.mas_equalTo(self.marginLeft);
                make.centerY.mas_equalTo(self);
            }else if (_iconType == ButtonIconTypeLeft){
                make.centerY.mas_equalTo(self);
                make.left.mas_equalTo(self.buttonIconLabel.mas_right).with.offset(_margin);
                //make.right.mas_equalTo(-_margin);
            }else if (_iconType == ButtonIconTypeTop){
                make.top.mas_equalTo(self.buttonIconLabel.mas_bottom).with.offset(_margin);
                make.height.mas_equalTo(_titleSize.height);
                make.centerX.mas_equalTo(self);
            }else if (_iconType == ButtonIconTypeBottom){
                make.top.mas_equalTo((self.height - _titleSize.height - _iconSize.height - _margin)/2);
                make.height.mas_equalTo(_titleSize.height);
                make.centerX.mas_equalTo(self);
            }
        }];
    }
    return _buttonTitleLabel;
}

- (UILabel *)buttonIconLabel{
    if (!_buttonIconLabel) {
        _buttonIconLabel = [[UILabel alloc] init];
        _buttonIconLabel.font = [ZMFont iconOutlineFontWithSize:_iconFontSize];
        _buttonIconLabel.textColor = _iconColor;
        [self addSubview:_buttonIconLabel];
        [_buttonIconLabel mas_makeConstraints:^(MASConstraintMaker *make) {
            if (_iconType == ButtonIconTypeNormal) {
                //make.right.mas_equalTo(-_margin);
                make.left.mas_equalTo(self.buttonTitleLabel.mas_right).with.offset(_margin);
                make.centerY.mas_equalTo(self);
            }else if (_iconType == ButtonIconTypeLeft){
                make.left.mas_equalTo(self.marginLeft);
                make.centerY.mas_equalTo(self);
            }else if (_iconType == ButtonIconTypeTop){
                make.top.mas_equalTo(self.marginTop);
                make.centerX.mas_equalTo(self);
                make.height.mas_equalTo(_iconSize.height);
            }else if (_iconType == ButtonIconTypeBottom){
                make.top.mas_equalTo(self.buttonTitleLabel.mas_bottom).with.offset(_margin);
                make.height.mas_equalTo(_iconSize.height);
                make.centerX.mas_equalTo(self);
            }
        }];
    }
    return _buttonIconLabel;
}

#pragma mark - 间距的get方法
- (CGFloat)marginLeft{
    return (self.width - _iconSize.width - _titleSize.width - _margin) /2;
}

- (CGFloat)marginTop{
    return (self.height - _titleSize.height - _iconSize.height - _margin)/2;
}

- (instancetype)initWithTitle:(NSString *)title  icon:(NSString *)icon iconType:(ButtonIconType)iconType{
    self = [super init];
    if (self) {
        self.layer.borderWidth = 1/YYScreenScale();
        self.layer.borderColor = [UIColor blackColor].CGColor;
        NSAssert(title.length, @"title is null");
        NSAssert(icon.length, @"icon is null");
        _buttonTitle = title;
        _buttonIcon  = icon;
        _iconType = iconType;
        _titleFontSize = 15;
        _iconFontSize = 15;
        _margin = 5;
        _titleFont = [UIFont systemFontOfSize:_titleFontSize];
        _iconFont = [ZMFont iconOutlineFontWithSize:_iconFontSize];
        _titleColor = [UIColor colorWithHexString:@"#757374"];
        _iconColor = [UIColor colorWithHexString:@"#757374"];
        
        _titleSize = [title sizeForFont:_titleFont size:CGSizeMake(kScreenWidth, _titleFontSize * 2) mode:NSLineBreakByWordWrapping];
        _iconSize = [icon sizeForFont:_iconFont size:CGSizeMake(kScreenWidth, _iconFontSize * 2) mode:0];
        
        [self getTotalWidth];
    }
    return self;
}

#pragma mark - 设置按钮数据
- (void)setupUI{
    self.buttonTitleLabel.text = self.buttonTitle;
    self.buttonIconLabel.text = self.buttonIcon;
}

#pragma mark - 设置标题数据 (调用此方法可重写设置按钮标题)
- (void)setButtonTitle:(NSString *)buttonTitle{
    if (buttonTitle.length) {
        _buttonTitle = buttonTitle;
        self.buttonTitleLabel.text = buttonTitle;
        _titleSize = [_buttonTitle sizeForFont:_titleFont size:CGSizeMake(kScreenWidth, _titleFontSize * 2) mode:NSLineBreakByWordWrapping];
        [self getTotalWidth];
        [self mas_updateConstraints:^(MASConstraintMaker *make) {
            make.width.mas_equalTo(self.totalWidth);
        }];
        [self.superview layoutIfNeeded];
        self.marginLeft = (self.width - _titleSize.width - _iconSize.width - _margin)/2;
        if (self.iconType == ButtonIconTypeNormal) {
            [self.buttonTitleLabel mas_updateConstraints:^(MASConstraintMaker *make) {
                make.left.mas_equalTo(self.marginLeft);
            }];
        }else if (self.iconType == ButtonIconTypeLeft) {
            [self.buttonIconLabel mas_updateConstraints:^(MASConstraintMaker *make) {
                make.left.mas_equalTo(self.marginLeft);
            }];
        }
    }
}

#pragma mark - 计算总宽度
- (void)getTotalWidth{
    if (_iconType == ButtonIconTypeNormal || _iconType == ButtonIconTypeLeft) {
        self.totalWidth = _titleSize.width + _iconSize.width + _margin * 3;
    }else{
        self.totalWidth = _titleSize.width + _margin * 2;
    }
}

@end

4.如何使用:

//图标在左
    ZMButton *iconButtonLeft = [[ZMButton alloc] initWithTitle:@"文字在右" icon:@"\U0000e6df\U0000ea9b" iconType:ButtonIconTypeLeft];
    iconButtonLeft.margin = 10;
    iconButtonLeft.titleColor = [UIColor colorWithHexString:@"#DC143C"];
    iconButtonLeft.tag = 1;
    [self.view addSubview:iconButtonLeft];
    [iconButtonLeft mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.mas_equalTo(20);
        make.width.mas_equalTo(120);
        make.centerX.mas_equalTo(self.view);
    }];
    [iconButtonLeft.superview layoutIfNeeded];
    [iconButtonLeft setupUI];
    [iconButtonLeft addTarget:self action:@selector(clickButton:) forControlEvents:UIControlEventTouchUpInside];
    
    //图标在右
    ZMButton *iconButtonRight = [[ZMButton alloc] initWithTitle:@"文字在左" icon:@"\U0000e6df" iconType:ButtonIconTypeNormal];
    [self.view addSubview:iconButtonRight];
    [iconButtonRight mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.mas_equalTo(iconButtonLeft.mas_bottom).with.offset(20);
        make.centerX.mas_equalTo(self.view);
        make.width.mas_equalTo(120);
        make.height.mas_equalTo(40);
    }];
    [iconButtonRight.superview layoutIfNeeded];
    [iconButtonRight setupUI];
    [iconButtonRight addTarget:self action:@selector(clickButton:) forControlEvents:UIControlEventTouchUpInside];

5.相关界面,初始化按钮之后,文本也可以随时修改,支持多个图标,代码中加入了FLEX,可以摇一摇试试~

image.png

6.代码地址奉上:https://github.com/Brances/ZMProject,可能代码写的不是很好,还请各位大神多指教。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,835评论 4 364
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,598评论 1 295
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,569评论 0 244
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,159评论 0 213
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,533评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,710评论 1 222
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,923评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,674评论 0 203
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,421评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,622评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,115评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,428评论 2 254
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,114评论 3 238
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,097评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,875评论 0 197
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,753评论 2 276
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,649评论 2 271

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 11,618评论 4 59
  • 在嘉兴南湖的游船上 诞生至今已九十六载 历史饱经沧桑巨变 就在弹指一挥间 你迈着青春的脚步 从未苍老的容颜 意气风...
    瀚正阅读 292评论 0 2
  • 半川雪阅读 73评论 0 0
  • 一、物理是一个整体,刚刚接触,可能对某些概念、规律掌握不好,对知识无整体感,这是正常的。随着学习后面相关的知识,对...
    hyhyhyaaaa阅读 183评论 0 1
  • ps:写于2014-6-27,我的百度空间。在美国时不知为何打不开百度空间,于是在简书安了家,希望将教学记录整理在...
    素秋微菊阅读 278评论 0 1