iOS简单高性能标签TagView(巧用YYLabel)

  1. 我相信很多人在开发者都有这样的需求,标签展示(如下图)

    iOS简单高性能标签TagView(巧用YYLabel)

  2. 很多人都可以自己实现(网上别人写的也很多,但是别人写的总有不满足自己需求的点),实现的方法也很多种,比如动态添加view,使用UICollectionView等等。这种实现方法不是不好,但是当列表比较复杂,数据比较多的时候,可曾想过性能会怎么样呢?

  3. 在一次深入了解富文本的时候,突发其想,好像富文本能达到这种效果,也就是一个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
# import   # import   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 maxWidth;
//对齐方式
@property (nonatomic,assign) XWTagAlignment tagAlignment;
@end

以上就是标签外观的一些属性,注释得很清楚,包含了对齐方式,每个属性都有默认值,maxWidth这个属性是必须非空的以便计算高度和换行(默认值是屏幕宽度)

XWTagView(继承自YYLabel)

XWTagView.h

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# import   "YYText.h"
# import   "XWTagMaker.h"
# import   "NSMutableAttributedString+XWTagView.h"
@ interface   XWTagView : YYLabel
/**
  *NSMutableAttributedString
  */
@property (nonatomic,strong) NSMutableAttributedString * tagAttr;
/**
  快速创建tag标签所需样式
  @param tags 字符串数组
  @param maskBlock 初始化标签样式
  @return 标签所需的NSMutableAttributedString
  */
+(NSMutableAttributedString *)xw_makeTagView:(NSArray *)tags tagMaker:( void   (^)(XWTagMaker *))maskBlock;
@end

XWTagView.m主要代码

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
+(NSMutableAttributedString *)xw_makeTagView:(NSArray *)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] initWithString:tag];
         [tagText yy_insertString:@ "   "   atIndex: 0 ];
         [tagText yy_appendString:@ "   " ];
         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:[tagText.string rangeOfString:tag]];
          
         [text appendAttributedString:tagText];
         text.yy_lineSpacing = maker.lineSpace;
         text.yy_lineBreakMode = NSLineBreakByWordWrapping;
          
         YYTextContainer  *tagContarer = [YYTextContainer  new ];
         tagContarer.size = CGSizeMake(maker.tagAlignment == XWTagAlignmentRight ? (maker.maxWidth - fabs(maker.insets.right)) : maker.maxWidth ,CGFLOAT_MAX);
         YYTextLayout *tagLayout = [YYTextLayout layoutWithContainer:tagContarer text:text];
         if   (tagLayout.textBoundingSize.height > height) {
              
             if   (i !=  0 ) {
                 [text yy_insertString:@ "\n"   atIndex:text.length - tagText.length];
             }
             height = tagLayout.textBoundingSize.height;
         }
     }
      
     text.tagHeight = height + maker.lineSpace;
     [text addAttribute:NSParagraphStyleAttributeName value:[self creatTextStyle:maker]
                  range:NSMakeRange( 0 , text.length)];
     return   text;
}

细心的同学会发现要怎么知道他的高度?(当然如果您用的是自动布局可以不用管这个属性,毕竟label自动布局会自动自适应)从上面代码可以看出来,最后返回的是富文本NSMutableAttributedString,为了更加方便,我便为NSMutableAttributedString扩展了个高度属性tagHeight(当前标签富文本的高度以便外部获取使用和缓存),具体看以下代码

1
2
3
4
@ interface   NSMutableAttributedString (XWTagView)
//当前标签富文本的高度
@property (nonatomic,assign) CGFloat tagHeight;
@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
XWTagView *tagView = [[XWTagView alloc] initWithFrame:CGRectMake( 10 100 , self.view.bounds.size.width- 20 50 )];
      
     NSArray *tags = @[
                                   @ "标签tag1" ,@ "表面" ,@ "哈哈哈" ,@ "测试测试" ,@ "不不不不" ,@ "无敌啊" ,@ "标签" ,@ "这样喊得好吗" ,
                                   @ "哈哈哈" ,@ "嘻嘻嘻" ,@ "呵呵呵" ,@ "标签" ,@ "表面兄弟" ,@ "你好啊" ,@ "不想你了哦" ,@ "不要这样子啦"
                                   ];
     NSMutableAttributedString *attr = [XWTagView xw_makeTagView: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.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。效果图如下

iOS简单高性能标签TagView(巧用YYLabel)

tagLeft.png

iOS简单高性能标签TagView(巧用YYLabel)

tagRight.png

当我以为大功告成的时候,最后还是让我发现了个问题,从上面代码可以看出标签的的左右间隔是用空字符串隔开的(这是一个缺陷,有比较好的解决方法的可以联系我),说到这细心的同学应该可以猜到是什么问题了,你们可曾注意过当label右对齐的时候,最右边的空格或者空字符串是不起作用的,最终想到了个解决办法,可能不是最好的解决方案,但是足以解决出现的问题,详细的见如下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
  NSMutableParagraphStyle *style = [[NSParagraphStyle defaultParagraphStyle] mutableCopy];
     style.lineSpacing =  maker.lineSpace;
     switch   (maker.tagAlignment) {
         case   XWTagAlignmentLeft:
             style.alignment = NSTextAlignmentLeft;
             //style.firstLineHeadIndent = fabs(maker.insets.left) ;//设置与首部的距离
             break ;
         case   XWTagAlignmentCenter:
             style.alignment = NSTextAlignmentCenter;
             break ;
         case   XWTagAlignmentRight:
             style.alignment = NSTextAlignmentRight;
             style.tailIndent = maker.insets.right -  2 //设置与尾部的距离
             break ;
         default :
             break ;
     }

熟悉富文本的同学都知道tailIndent是与尾部的距离,利用好这一点可以很好的解决问题


相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页