iOS利用Label实现的简单高性能标签TagView

2020-07-26 02:29:11

字体：大中小

来源：转载

供稿：网友

前言

我相信很多人在开发者都有这样的需求，标签展示（如下图）

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

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

XWTagView(高性能标签)

优势：

支持自定义标签外观，上下距离，左右距离，对齐方式；
异步绘制性能得到很大提升。

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上有明显效果）。

效果图如下

当我以为大功告成的时候，最后还是让我发现了个问题，从上面代码可以看出标签的的左右间隔是用空字符串隔开的（这是一个缺陷，有比较好的解决方法的可以联系我），说到这细心的同学应该可以猜到是什么问题了，你们可曾注意过当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实现高性能简单易用的星星评分控件

下一篇：iOS WKWebView无法处理URL Scheme和App Store链接的问题解决