1.圖標(biāo)字體的導(dǎo)入及使用: https://segmentfault.com/a/1190000004300281
2.我使用的是繼承的方式悬垃,沒有使用原生UIButton的title和imageView,而是自己增加兩個(gè)UILabel到UIButton上去访忿,好處是是按鈕可以高度自定義是牢,布局采用的是Masonry自適應(yīng)。
3.相關(guān)代碼:
ZMButton.h
#import <UIKit/UIKit.h>
/**
* 默認(rèn)圖標(biāo)在右邊
*/
typedef NS_ENUM(NSInteger,ButtonIconType) {
ButtonIconTypeNormal = 0,
ButtonIconTypeLeft,
ButtonIconTypeTop,
ButtonIconTypeBottom
};
@interface ZMButton : UIButton
/** 標(biāo)題標(biāo)簽 */
@property (nonatomic, strong) UILabel *buttonTitleLabel;
/** 字體圖標(biāo)標(biāo)簽 */
@property (nonatomic, strong) UILabel *buttonIconLabel;
/** 標(biāo)題 */
@property (nonatomic, copy) NSString *buttonTitle;
/** 圖標(biāo) */
@property (nonatomic, copy) NSString *buttonIcon;
/** 圖標(biāo)類型 */
@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;
/** 圖標(biāo)字體 */
@property (nonatomic, strong) UIFont *iconFont;
/** 圖標(biāo)字體大小 */
@property (nonatomic, assign) CGFloat iconFontSize;
/** 圖標(biāo)size */
@property (nonatomic, assign) CGSize iconSize;
/** 標(biāo)題顏色 */
@property (nonatomic, strong) UIColor *titleColor;
/** 圖標(biāo)顏色 */
@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 - 設(shè)置按鈕數(shù)據(jù)
- (void)setupUI{
self.buttonTitleLabel.text = self.buttonTitle;
self.buttonIconLabel.text = self.buttonIcon;
}
#pragma mark - 設(shè)置標(biāo)題數(shù)據(jù) (調(diào)用此方法可重寫設(shè)置按鈕標(biāo)題)
- (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 - 計(jì)算總寬度
- (void)getTotalWidth{
if (_iconType == ButtonIconTypeNormal || _iconType == ButtonIconTypeLeft) {
self.totalWidth = _titleSize.width + _iconSize.width + _margin * 3;
}else{
self.totalWidth = _titleSize.width + _margin * 2;
}
}
@end
4.如何使用:
//圖標(biāo)在左
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];
//圖標(biāo)在右
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.相關(guān)界面礁击,初始化按鈕之后盐杂,文本也可以隨時(shí)修改,支持多個(gè)圖標(biāo)哆窿,代碼中加入了FLEX,可以搖一搖試試~
image.png
6.代碼地址奉上:https://github.com/Brances/ZMProject,可能代碼寫的不是很好挚躯,還請(qǐng)各位大神多指教强衡。