前言
我相信很多人在开发者都有这样的需求,标签展示(如下图)
很多人都可以自己实现(网上别人写的也很多,但是别人写的总有不满足自己需求的点),实现的方法也很多种,比如动态添加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