前言
我相信很多人在开发者都有这样的需求，标签展示（如下图）
很多人都可以自己实现（网上别人写的也很多，但是别人写的总有不满足自己需求的点），实现的方法也很多种，比如动态添加view，使用uicollectionview等等。这种实现方法不是不好，但是当列表比较复杂，数据比较多的时候，可曾想过性能会怎么样呢？
在一次深入了解富文本的时候，突发其想，好像富文本能达到这种效果，也就是一个label就可以实现这种标签的效果了，效果性能就不用多说了，再加上yylabel的异步绘制，真是锦上添花啊。
xwtagview(高性能标签)
优势：
- 支持自定义标签外观，上下距离，左右距离，对齐方式；
- 异步绘制性能得到很大提升。
xwtagmaker(标签外观配置)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
#import <foundation/foundation.h>#import <uikit/uikit.h>typedef enum : nsuinteger { xwtagalignmentleft = 0, xwtagalignmentcenter = 1, xwtagalignmentright = 2,} xwtagalignment;@interface xwtagmaker : nsobject//标签边框@property (nonatomic) cgfloat strokewidth;//标签边框颜色@property (nullable, nonatomic, strong) uicolor *strokecolor;//路径的连接点形状,] kcglinejoinmiter(默认全部连接),kcglinejoinround(圆形连接),kcglinejoinbevel(斜角连接)@property (nonatomic) cglinejoin linejoin;//标签内容内边距@property (nonatomic) uiedgeinsets insets;//标签圆角@property (nonatomic) cgfloat cornerradius;//标签填充颜色@property (nullable, nonatomic, strong) uicolor *fillcolor;//字体大小@property (nonatomic,strong) uifont * _nullable font;//字体颜色@property (nonatomic,strong) uicolor * _nonnull textcolor;//标签上下间距@property (nonatomic,assign) cgfloat linespace;//标签左右间距@property (nonatomic,assign) cgfloat space;//标签的最大宽度-》以便计算高度@property (nonatomic,assign) cgfloat maxwidth;//对齐方式@property (nonatomic,assign) xwtagalignment tagalignment;@end |
以上就是标签外观的一些属性，注释得很清楚，包含了对齐方式，每个属性都有默认值，maxwidth这个属性是必须非空的以便计算高度和换行（默认值是屏幕宽度）
xwtagview（继承自yylabel）
xwtagview.h
|
1
2
3
4
5
6
7
8
9
|
#import "yytext.h"#import "xwtagmaker.h"#import "nsmutableattributedstring+xwtagview.h"@interface xwtagview : yylabel/** *nsmutableattributedstring */@property (nonatomic,strong) nsmutableattributedstring * tagattr;@end |
xwtagview.m主要代码
xwtagview的内部实现很简单，只是简单的富文本赋值
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
-(instancetype)init{ if (self = [super init]) { [self inittagview]; } return self;}-(instancetype)initwithframe:(cgrect)frame{ if (self = [super initwithframe:frame]) { [self inittagview]; } return self;}-(void)inittagview{ self.numberoflines = 0; self.linebreakmode = nslinebreakbywordwrapping; self.displaysasynchronously = yes;}-(void)settagattr:(nsmutableattributedstring *)tagattr{ _tagattr = tagattr; [self inittagview]; self.attributedtext = _tagattr;} |
nsmutableattributedstring +xwtagview的核心代码
1.tip:创建标签的时候在子线程体验更好（生成富文本比较耗时）
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
#import <foundation/foundation.h>#import <uikit/uikit.h>#import "xwtagmaker.h"@interface nsmutableattributedstring (xwtagview)//当前标签富文本的高度@property (nonatomic,assign) cgfloat tagheight;/** 快速创建tag标签所需样式 @param tags 字符串数组 @param maskblock 初始化标签样式 @return 标签所需的nsmutableattributedstring */+(nsmutableattributedstring *)xw_maketagattributedstring:(nsarray<nsstring *> *)tags tagmaker:(void (^)(xwtagmaker *))maskblock;@end |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
|
+(nsmutableattributedstring *)xw_maketagattributedstring:(nsarray<nsstring *> *)tags tagmaker:(void (^)(xwtagmaker *))maskblock{ nsmutableattributedstring *text = [nsmutableattributedstring new]; nsinteger height = 0; xwtagmaker *maker = [[xwtagmaker alloc] init]; if (maskblock) { maskblock(maker); } for (int i = 0; i < tags.count; i++) { nsstring *tag = tags[i]; nsmutableattributedstring *tagtext = [[nsmutableattributedstring alloc] init]; //标签左内边距 [tagtext appendattributedstring:[self createmptyattributestring:fabs(maker.insets.left)]]; //标签内容 [tagtext yy_appendstring:tag]; //标签右内边距 [tagtext appendattributedstring:[self createmptyattributestring:fabs(maker.insets.right)]]; //设置外观 [self beautifyattributedstringwithtext:tagtext ranges:nsmakerange(0, tagtext.length) maker:maker]; //左右间距 [tagtext appendattributedstring:[self createmptyattributestring:maker.space]]; //行间距等设置 [text appendattributedstring:tagtext]; text.yy_linespacing = maker.linespace; text.yy_linebreakmode = nslinebreakbywordwrapping; //高度计算（超最大范围加换行符手动换行） yytextcontainer *tagcontarer = [yytextcontainer new]; tagcontarer.size = cgsizemake(maker.maxwidth - 3,cgfloat_max); yytextlayout *taglayout = [yytextlayout layoutwithcontainer:tagcontarer text:text]; if (taglayout.textboundingsize.height > height) { if (height != 0) { [text yy_insertstring:@"\n" atindex:text.length - tagtext.length]; } taglayout = [yytextlayout layoutwithcontainer:tagcontarer text:text]; height = taglayout.textboundingsize.height; } } //高度记录（富文本已扩展高度属性） text.tagheight = height + maker.linespace + fabs(maker.insets.top) + fabs(maker.insets.bottom) ; //对齐方向设置（头尾自动缩进1.5） [text addattribute:nsparagraphstyleattributename value:[self creattextstyle:maker] range:nsmakerange(0, text.length)]; return text;}+(void) beautifyattributedstringwithtext:(nsmutableattributedstring * )tagtext ranges:(nsrange)range maker:(xwtagmaker *)maker{ //标签字体颜色设置 tagtext.yy_font = maker.font; tagtext.yy_color = maker.textcolor; [tagtext yy_settextbinding:[yytextbinding bindingwithdeleteconfirm:no] range:tagtext.yy_rangeofall]; //设置item外观样式 [tagtext yy_settextbackgroundborder:[self creattextboard:maker] range:range]; }/** 外观样式 @param maker tag外观配置 @return 返回yytextborder */+(yytextborder *)creattextboard:(xwtagmaker *)maker{ yytextborder *border = [yytextborder new]; border.strokewidth = maker.strokewidth; border.strokecolor = maker.strokecolor; border.fillcolor = maker.fillcolor; border.cornerradius = maker.cornerradius; // a huge value border.linejoin = maker.linejoin; border.insets = uiedgeinsetsmake(maker.insets.top, 0, maker.insets.bottom, 0); return border;}+(nsmutableattributedstring *)createmptyattributestring:(cgfloat)width{ nsmutableattributedstring *spacetext = [nsmutableattributedstring yy_attachmentstringwithcontent:[[uiimage alloc]init] contentmode:uiviewcontentmodescaletofill attachmentsize:cgsizemake(width, 1) aligntofont:[uifont systemfontofsize:0] alignment:yytextverticalalignmentcenter]; return spacetext; }+(nsmutableparagraphstyle *)creattextstyle:(xwtagmaker *)maker{ nsmutableparagraphstyle *style = [[nsparagraphstyle defaultparagraphstyle] mutablecopy]; style.linespacing = maker.linespace; style.firstlineheadindent = 1.5; style.headindent = 1.5 ;//设置与首部的距离 style.tailindent = maker.tagalignment == nstextalignmentright maker.maxwidth - fabs(maker.insets.right) : maker.maxwidth - 1.5; //设置与尾部的距离 switch (maker.tagalignment) { case xwtagalignmentleft: style.alignment = nstextalignmentleft; break; case xwtagalignmentcenter: style.alignment = nstextalignmentcenter; break; case xwtagalignmentright: style.alignment = nstextalignmentright; break; default: break; } return style;} |
细心的同学会发现要怎么知道他的高度？（当然如果您用的是自动布局可以不用管这个属性，毕竟label自动布局会自动自适应）从上面代码可以看出来，最后返回的是富文本nsmutableattributedstring，为了更加方便，我便为nsmutableattributedstring扩展了个高度属性tagheight（当前标签富文本的高度以便外部获取使用和缓存。
看起来很简单，也很容易理解（就是把标签数组变成一个富文本已达到标签的效果），接下来就看看怎么用吧
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
xwtagview *tagview = [[xwtagview alloc] initwithframe:cgrectmake(10, 100, self.view.bounds.size.width-20, 50)]; nsarray<nsstring *> *tags = @[ @"标签tag1",@"表面",@"哈哈哈",@"测试测试",@"不不不不",@"无敌啊",@"标签",@"这样喊得好吗", @"哈哈哈",@"嘻嘻嘻",@"呵呵呵",@"标签",@"表面兄弟",@"你好啊",@"不想你了哦",@"不要这样子啦" ]; nsmutableattributedstring *attr = [nsmutableattributedstring xw_maketagattributedstring: tags tagmaker:^(xwtagmaker *make){ make.strokecolor = [uicolor redcolor]; make.fillcolor = [uicolor clearcolor]; make.strokewidth = 1; make.cornerradius = 100; make.insets = uiedgeinsetsmake(-2, -6, -2, -6); make.font = [uifont systemfontofsize:16]; make.textcolor = [uicolor blackcolor]; make.linespace = 10; make.space = 10; make.maxwidth = [uiscreen mainscreen].bounds.size.width - 20; make.tagalignment = xwtagalignmentleft; }]; tagview.tagattr = attr; tagview.frame = cgrectmake(10, 100, self.view.bounds.size.width - 20, attr.tagheight); [self.view addsubview:tagview]; |
看起来是不是很简单，一个make就可以配置标签样式了，如果您是比较复杂的列表的话，这样一个label实现的标签性能完全不用担心，如果您是个追求性能的人，可以开启yylabel的异步绘制displaysasynchronously（在iphone4s上有明显效果）。
效果图如下
当我以为大功告成的时候，最后还是让我发现了个问题，从上面代码可以看出标签的的左右间隔是用空字符串隔开的（这是一个缺陷，有比较好的解决方法的可以联系我），说到这细心的同学应该可以猜到是什么问题了，你们可曾注意过当label右对齐的时候，最右边的空格或者空字符串是不起作用的，最终想到了个解决办法（首尾自动缩进1.5），可能不是最好的解决方案，但是足以解决出现的问题，详细的见如下代码
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
nsmutableparagraphstyle *style = [[nsparagraphstyle defaultparagraphstyle] mutablecopy];style.linespacing = maker.linespace;style.firstlineheadindent = 1.5;style.headindent = 1.5 ;//设置与首部的距离style.tailindent = maker.tagalignment == nstextalignmentright maker.maxwidth - fabs(maker.insets.right) : maker.maxwidth - 1.5; //设置与尾部的距离switch (maker.tagalignment) { case xwtagalignmentleft: style.alignment = nstextalignmentleft; break; case xwtagalignmentcenter: style.alignment = nstextalignmentcenter; break; case xwtagalignmentright: style.alignment = nstextalignmentright; break; default: break;} |
熟悉富文本的同学都知道tailindent是与尾部的距离，利用好这一点可以很好的解决问题，后续会加上点击事件。
总结
富文本很强大，能做的不只只这些，很多黑科技等着你去发现哦，当然如果您觉得我写的不错，希望您点个赞。
好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对服务器之家的支持。
原文链接：https://www.jianshu.com/p/4a14c8d06877
