假設(shè)需求是這樣的
分類按鈕.png
controller里面創(chuàng)建topView昵仅，一看ZFBHomeTopView就知道封裝了睦霎。梢卸。。
ZFBHomeTopView *topView = [[ZFBHomeTopView alloc] init];
topView.backgroundColor = [UIColor colorWithHex:0x2e90d4];
[self.view addSubview:topView];
[topView mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.top.right.offset(0);
make.height.offset(115);
}];
精彩部分代碼來了
#import "ZFBHomeTopView.h"
#import "NSAttributedString+Additon.h"
#import "Masonry.h"
@implementation ZFBHomeTopView
// 重寫初始化方法在此方法中創(chuàng)建及添加子控件
- (instancetype)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
[self setupUI];
}
return self;
}
- (void)setupUI {
// 1.掃一掃
UIButton *scanBtn = [self makeHomeTopViewWithButtonImageName:@"home_scan" andButtonWithTitle:@"掃一掃"];
UIButton *payBtn = [self makeHomeTopViewWithButtonImageName:@"home_pay" andButtonWithTitle:@"付款"];
UIButton *cardBtn = [self makeHomeTopViewWithButtonImageName:@"home_card" andButtonWithTitle:@"卡券"];
UIButton *xiuxiuBtn = [self makeHomeTopViewWithButtonImageName:@"home_xiu" andButtonWithTitle:@"咻一咻"];
[self.subviews mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.bottom.offset(0);
}];
[scanBtn mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.offset(0);
}];
[payBtn mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(scanBtn.mas_right).offset(0);
make.width.equalTo(scanBtn.mas_width).offset(0);
}];
[cardBtn mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(payBtn.mas_right).offset(0);
make.width.equalTo(payBtn.mas_width).offset(0);
}];
[xiuxiuBtn mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.equalTo(cardBtn.mas_right).offset(0);
make.width.equalTo(cardBtn.mas_width).offset(0);
make.right.offset(0);
}];
}
- (UIButton *)makeHomeTopViewWithButtonImageName:(NSString *)imageNmae andButtonWithTitle:(NSString *)title {
UIButton *btn = [UIButton buttonWithType:UIButtonTypeSystem];
NSAttributedString *attrStr = [NSAttributedString imageTextWithImage:[UIImage imageNamed:imageNmae] imageWH:35 title:title fontSize:15 titleColor:[UIColor whiteColor] spacing:8];
// 設(shè)置按鈕換行
btn.titleLabel.numberOfLines = 0;
// 設(shè)置按鈕中的文字居中顯示
btn.titleLabel.textAlignment = NSTextAlignmentCenter;
[btn setAttributedTitle:attrStr forState:UIControlStateNormal];
[self addSubview:btn];
return btn;
}
@end
這里面的按鈕通過圖文混排來實(shí)現(xiàn)副女，通過創(chuàng)建分類NSAttributedString 蛤高，看代碼你就恍然大悟了。
h文件
// NSAttributedString+CZAdditon.h
#import <UIKit/UIKit.h>
@interface NSAttributedString (Additon)
/// 使用圖像和文本生成上下排列的屬性文本
///
/// @param image 圖像
/// @param imageWH 圖像寬高
/// @param title 標(biāo)題文字
/// @param fontSize 標(biāo)題字體大小
/// @param titleColor 標(biāo)題顏色
/// @param spacing 圖像和標(biāo)題間距
///
/// @return 屬性文本
+ (instancetype)imageTextWithImage:(UIImage*)image imageWH:(CGFloat)imageWH title:(NSString*)title fontSize:(CGFloat)fontSize titleColor:(UIColor*)titleColor spacing:(CGFloat)spacing;
@end
m文件
// NSAttributedString+CZAdditon.m
#import "NSAttributedString+Additon.h"
@implementation NSAttributedString (Additon)
+ (instancetype)imageTextWithImage:(UIImage *)image imageWH:(CGFloat)imageWH title:(NSString *)title fontSize:(CGFloat)fontSize titleColor:(UIColor *)titleColor spacing:(CGFloat)spacing {
// 文本字典
NSDictionary *titleDict = @{NSFontAttributeName : [UIFont systemFontOfSize:fontSize],
NSForegroundColorAttributeName : titleColor};
NSDictionary *spacingDict = @{NSFontAttributeName : [UIFont systemFontOfSize:spacing]};
// 圖片文本
NSTextAttachment *attachment = [[NSTextAttachment alloc] init];
attachment.image = image;
attachment.bounds = CGRectMake(0, 0, imageWH, imageWH);
NSAttributedString *imageText = [NSAttributedString attributedStringWithAttachment:attachment];
// 換行文本
NSAttributedString *lineText = [[NSAttributedString alloc] initWithString:@"\n\n" attributes:spacingDict];
// 按鈕文字
NSAttributedString *text = [[NSAttributedString alloc] initWithString:title attributes:titleDict];
// 合并文字
NSMutableAttributedString *attM = [[NSMutableAttributedString alloc] initWithAttributedString:imageText];
[attM appendAttributedString:lineText];
[attM appendAttributedString:text];
return attM.copy;
}
@end
不得不承認(rèn)碑幅，這樣寫出來來的代碼高度整潔戴陡，易維護(hù)，逼格高沟涨。思路更上一層樓恤批。小白一般是通過循環(huán)創(chuàng)建UIView,上面放UIImageView 和Label拼起來的，添加手勢(shì)tap裹赴。喜庞。诀浪。
老司機(jī)之所以是這樣寫是因?yàn)槔纤緳C(jī)有扎實(shí)的iOS基礎(chǔ)。這點(diǎn)很重要
扎實(shí)的基礎(chǔ)是必要的延都！
iOS分類概念深刻理解和靈活運(yùn)用雷猪。盡管初級(jí)也會(huì)使用Masonry，但怎么看晰房，老司機(jī)使用Masonry很6求摇。如果不是看代碼，還真不知道Masonry
make.left.top.right.offset(0);
這樣寫簡(jiǎn)潔舒服多了呢殊者！
總之与境，做技術(shù)這么久，笨笨的我才領(lǐng)悟到你會(huì)做再高深的東西幽污，那些東西也是別人蘋果已經(jīng)給你準(zhǔn)備好的嚷辅，或者其他人封裝好的，你只是模仿寫而已距误。基礎(chǔ)不扎實(shí)扁位，代碼寫不好一切都是空中樓閣准潭，回頭看看自己幾年以前寫的代碼價(jià)值不忍直視。
