前言

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


很多人都可以自己实现(网上别人写的也很多,但是别人写的总有不满足自己需求的点),实现的方法也很多种,比如动态添加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是与尾部的距离,利用好这一点可以很好的解决问题,后续会加上点击事件。

总结

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

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对Devmax的支持。

iOS利用Label实现的简单高性能标签TagView的更多相关文章

  1. 移动端html5模拟长按事件的实现方法

    这篇文章主要介绍了移动端html5模拟长按事件的实现方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  2. HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题

    HTML5在微信内置浏览器下,在右上角菜单的调整字体导致页面显示错乱的问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧

  3. iOS实现拖拽View跟随手指浮动效果

    这篇文章主要为大家详细介绍了iOS实现拖拽View跟随手指浮动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  4. ios – containerURLForSecurityApplicationGroupIdentifier:在iPhone和Watch模拟器上给出不同的结果

    我使用默认的XCode模板创建了一个WatchKit应用程序.我向iOSTarget,WatchkitAppTarget和WatchkitAppExtensionTarget添加了应用程序组权利.(这是应用程序组名称:group.com.lombax.fiveminutes)然后,我尝试使用iOSApp和WatchKitExtension访问共享文件夹URL:延期:iOS应用:但是,测试NSURL

  5. ios – Testflight无法安装应用程序

    我有几个测试人员注册了testflight并连接了他们的设备……他们有不同的ios型号……但是所有这些都有同样的问题.当他们从“safari”或“testflight”应用程序本身单击应用程序的安装按钮时……达到约90%并出现错误消息…

  6. ibm-mobilefirst – 在iOS 7.1上获取“无法安装应用程序,因为证书无效”错误

    当我的客户端将他们的设备更新到iOS7.1,然后尝试从AppCenter更新我们的应用程序时,我收到了上述错误.经过一番搜索,我找到了一个类似问题的帖子here.但是后来因为我在客户端使用AppCenter更新应用程序的环境中,我无法使用USB插件并为他们安装应用程序.在发布支持之前,是否有通过AppCenter进行下载的解决方法?

  7. ios – 视图的简单拖放?

    我正在学习iOS,但我找不到如何向UIView添加拖放行为.我试过了:它说“UIView没有可见的接口声明选择器addTarget”此外,我尝试添加平移手势识别器,但不确定这是否是我需要的它被称为,但不知道如何获得事件的坐标.在iOS中注册移动事件回调/拖放操作的标准简单方法是什么?

  8. ios – 什么控制iTunes中iPhone应用程序支持的语言列表?

    什么控制iPhone应用程序的iTunes页面中支持的语言?

  9. ios – 获得APNs响应BadDeviceToken或Unregistered的可能原因是什么?

    我知道设备令牌在某些时候是有效的.用户如何使其设备令牌变坏?从关于“未注册”的文档:Thedevicetokenisinactiveforthespecifiedtopic.这是否意味着应用程序已被删除?.您应该看到四种分发方法:如果您选择AppStore或Enterprise,您将在后面的对话框中看到Xcode将APNS权利更改为生产:如果选择AdHoc或Development,则aps-environment下的文本将是开发,然后应与后端的配置匹配.

  10. ios – 当我关闭应用程序时,我从调试器获得消息:由于信号15而终止

    我怎么能解决这个问题,我不知道这个链接MypreviousproblemaboutCoredata对我的问题有影响吗?当我cmd应用程序的Q时,将出现此消息.Messagefromdebugger:Terminatedduetosignal15如果谁知道我以前的问题的解决方案,请告诉我.解决方法>来自调试器的消息:每当用户通过CMD-Q(退出)或STOP手动终止应用程序(无论是在iOS模拟器中还是

随机推荐

  1. iOS实现拖拽View跟随手指浮动效果

    这篇文章主要为大家详细介绍了iOS实现拖拽View跟随手指浮动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  2. iOS – genstrings:无法连接到输出目录en.lproj

    使用我桌面上的项目文件夹,我启动终端输入:cd然后将我的项目文件夹拖到终端,它给了我路径.然后我将这行代码粘贴到终端中找.-name*.m|xargsgenstrings-oen.lproj我在终端中收到此错误消息:genstrings:无法连接到输出目录en.lproj它多次打印这行,然后说我的项目是一个目录的路径?没有.strings文件.对我做错了什么的想法?

  3. iOS 7 UIButtonBarItem图像没有色调

    如何确保按钮图标采用全局色调?解决方法只是想将其转换为根注释,以便为“回答”复选标记提供更好的上下文,并提供更好的格式.我能想出这个!

  4. ios – 在自定义相机层的AVFoundation中自动对焦和自动曝光

    为AVFoundation定制图层相机创建精确的自动对焦和曝光的最佳方法是什么?

  5. ios – Xcode找不到Alamofire,错误:没有这样的模块’Alamofire’

    我正在尝试按照github(https://github.com/Alamofire/Alamofire#cocoapods)指令将Alamofire包含在我的Swift项目中.我创建了一个新项目,导航到项目目录并运行此命令sudogeminstallcocoapods.然后我面临以下错误:搜索后我设法通过运行此命令安装cocoapodssudogeminstall-n/usr/local/bin

  6. ios – 在没有iPhone6s或更新的情况下测试ARKit

    我在决定下载Xcode9之前.我想玩新的框架–ARKit.我知道要用ARKit运行app我需要一个带有A9芯片或更新版本的设备.不幸的是我有一个较旧的.我的问题是已经下载了新Xcode的人.在我的情况下有可能运行ARKit应用程序吗?那个或其他任何模拟器?任何想法或我将不得不购买新设备?解决方法任何iOS11设备都可以使用ARKit,但是具有高质量AR体验的全球跟踪功能需要使用A9或更高版本处理器的设备.使用iOS11测试版更新您的设备是必要的.

  7. 将iOS应用移植到Android

    我们制作了一个具有2000个目标c类的退出大型iOS应用程序.我想知道有一个最佳实践指南将其移植到Android?此外,由于我们的应用程序大量使用UINavigation和UIView控制器,我想知道在Android上有类似的模型和实现.谢谢到目前为止,guenter解决方法老实说,我认为你正在计划的只是制作难以维护的糟糕代码.我意识到这听起来像很多工作,但从长远来看它会更容易,我只是将应用程序的概念“移植”到android并从头开始编写.

  8. ios – 在Swift中覆盖Objective C类方法

    我是Swift的初学者,我正在尝试在Swift项目中使用JSONModel.我想从JSONModel覆盖方法keyMapper,但我没有找到如何覆盖模型类中的Objective-C类方法.该方法的签名是:我怎样才能做到这一点?解决方法您可以像覆盖实例方法一样执行此操作,但使用class关键字除外:

  9. ios – 在WKWebView中获取链接URL

    我想在WKWebView中获取tapped链接的url.链接采用自定义格式,可触发应用中的某些操作.例如HTTP://我的网站/帮助#深层链接对讲.我这样使用KVO:这在第一次点击链接时效果很好.但是,如果我连续两次点击相同的链接,它将不报告链接点击.是否有解决方法来解决这个问题,以便我可以检测每个点击并获取链接?任何关于这个的指针都会很棒!解决方法像这样更改addobserver在observeValue函数中,您可以获得两个值

  10. ios – 在Swift的UIView中找到UILabel

    我正在尝试在我的UIViewControllers的超级视图中找到我的UILabels.这是我的代码:这是在Objective-C中推荐的方式,但是在Swift中我只得到UIViews和CALayer.我肯定在提供给这个方法的视图中有UILabel.我错过了什么?我的UIViewController中的调用:解决方法使用函数式编程概念可以更轻松地实现这一目标.

返回
顶部