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

前言

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

总结

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

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 206,968评论 6赞 482
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 88,601评论 2赞 382
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 153,220评论 0赞 344
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 55,416评论 1赞 279
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 64,425评论 5赞 374
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,144评论 1赞 285
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,432评论 3赞 401
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,088评论 0赞 261
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,586评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,028评论 2赞 325
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,137评论 1赞 334
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,783评论 4赞 324
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,343评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,333评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,559评论 1赞 262
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,595评论 2赞 355
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,901评论 2赞 345

推荐阅读更多精彩内容

  • iOS简单高性能标签TagView（巧用YYLabel）
    我相信很多人在开发者都有这样的需求，标签展示（如下图） 很多人都可以自己实现（网上别人写的也很多，但是别人写的总有...
    软件iOS开发阅读 3,689评论 1赞 3
  • 生活二三事
    前两天买了5支黄色的郁金香，家里花瓶略小，郁金香垂着头在书房的茶桌上等待开放。我拿出一支插在了一个小瓶子里，在桌子...
    谢大土阅读 149评论 0赞 0
  • 译 | 高反射的未来地球
    “有些人开始疯狂吸烟，仅仅是因为实验室小白鼠身上发现了某种试验性的癌症治疗方法。” 最近一次大气中的二氧化碳浓度像...
    一筐荚果阅读 268评论 1赞 1
  • 随笔
    随笔 一直以来就知道，压力会使人变胖，但并不详细清楚其原因是什么。 直到昨天，看了...
    心灵是我独舞的城池阅读 162评论 0赞 0
  • 归来
    一直想写小说，却坚持不下去，果然肚子里的墨不够。所以离开了简书。某天，在想，写书，先要像辛夷坞……一样，有个笔名，...
    鬼千初阅读 199评论 2赞 0