美文网首页UIiOS点点滴滴iOS Developer
iOS一个Label实现的简单高性能标签TagView

iOS一个Label实现的简单高性能标签TagView

作者: 恩说吧 | 来源:发表于2017-10-31 17:10 被阅读494次

    前言

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

    2. 在一次深入了解富文本的时候,突发其想,好像富文本能达到这种效果,也就是一个label就可以实现这种标签的效果了,效果性能就不用多说了,再加上YYLabel的异步绘制,真是锦上添花啊。

    XWTagView(高性能标签)

    优势:

    1. 支持自定义标签外观,上下距离,左右距离,对齐方式;
    2. 异步绘制性能得到很大提升。
    XWTagMaker(标签外观配置)
    #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
    #import "YYText.h"
    #import "XWTagMaker.h"
    #import "NSMutableAttributedString+XWTagView.h"
    
    @interface XWTagView : YYLabel
    
    /**
     *NSMutableAttributedString
     */
    @property (nonatomic,strong) NSMutableAttributedString * tagAttr;
    
    @end
    
    XWTagView.m主要代码

    XWTagView的内部实现很简单,只是简单的富文本赋值

    -(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:创建标签的时候在子线程体验更好(生成富文本比较耗时)

    #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
    
    +(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(当前标签富文本的高度以便外部获取使用和缓存。

    看起来很简单,也很容易理解(就是把标签数组变成一个富文本已达到标签的效果),接下来就看看怎么用吧

    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上有明显效果)。效果图如下

    tagLeft.png tagRight.png

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

      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是与尾部的距离,利用好这一点可以很好的解决问题,后续会加上点击事件。

    总结

    富文本很强大,能做的不只只这些,很多黑科技等着你去发现哦,当然如果您觉得我写的不错,希望您点个赞。

    相关文章

      网友评论

        本文标题:iOS一个Label实现的简单高性能标签TagView

        本文链接:https://www.haomeiwen.com/subject/ucykpxtx.html