iOS一個(gè)Label實(shí)現(xiàn)的簡(jiǎn)單高性能標(biāo)簽TagView

前言

  1. 我相信很多人在開(kāi)發(fā)者都有這樣的需求，標(biāo)簽展示（如下圖）
tag.jpg

  1. 很多人都可以自己實(shí)現(xiàn)（網(wǎng)上別人寫(xiě)的也很多，但是別人寫(xiě)的總有不滿(mǎn)足自己需求的點(diǎn)），實(shí)現(xiàn)的方法也很多種，比如動(dòng)態(tài)添加view，使用UICollectionView等等。這種實(shí)現(xiàn)方法不是不好，但是當(dāng)列表比較復(fù)雜，數(shù)據(jù)比較多的時(shí)候，可曾想過(guò)性能會(huì)怎么樣呢？

  2. 在一次深入了解富文本的時(shí)候，突發(fā)其想，好像富文本能達(dá)到這種效果，也就是一個(gè)label就可以實(shí)現(xiàn)這種標(biāo)簽的效果了，效果性能就不用多說(shuō)了，再加上YYLabel的異步繪制，真是錦上添花啊。

XWTagView(高性能標(biāo)簽)

優(yōu)勢(shì)：

  1. 支持自定義標(biāo)簽外觀，上下距離，左右距離，對(duì)齊方式；
  2. 異步繪制性能得到很大提升。
XWTagMaker(標(biāo)簽外觀配置)
#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>

typedef enum : NSUInteger {
    XWTagAlignmentLeft = 0,
    XWTagAlignmentCenter = 1,
    XWTagAlignmentRight = 2,
} XWTagAlignment;

@interface XWTagMaker : NSObject

//標(biāo)簽邊框
@property (nonatomic) CGFloat strokeWidth;

//標(biāo)簽邊框顏色
@property (nullable, nonatomic, strong) UIColor *strokeColor;

//路徑的連接點(diǎn)形狀,] kCGLineJoinMiter(默認(rèn)全部連接),kCGLineJoinRound(圓形連接),kCGLineJoinBevel(斜角連接)
@property (nonatomic) CGLineJoin lineJoin;

//標(biāo)簽內(nèi)容內(nèi)邊距
@property (nonatomic) UIEdgeInsets insets;

//標(biāo)簽圓角
@property (nonatomic) CGFloat cornerRadius;

//標(biāo)簽填充顏色
@property (nullable, nonatomic, strong) UIColor *fillColor;

//字體大小
@property (nonatomic,strong) UIFont * _Nullable font;

//字體顏色
@property (nonatomic,strong) UIColor * _Nonnull textColor;

//標(biāo)簽上下間距
@property (nonatomic,assign) CGFloat lineSpace;

//標(biāo)簽左右間距
@property (nonatomic,assign) CGFloat space;

//標(biāo)簽的最大寬度-》以便計(jì)算高度
@property (nonatomic,assign) CGFloat maxWidth;

//對(duì)齊方式
@property (nonatomic,assign) XWTagAlignment tagAlignment;

@end

以上就是標(biāo)簽外觀的一些屬性，注釋得很清楚，包含了對(duì)齊方式，每個(gè)屬性都有默認(rèn)值，maxWidth這個(gè)屬性是必須非空的以便計(jì)算高度和換行（默認(rèn)值是屏幕寬度）

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的內(nèi)部實(shí)現(xiàn)很簡(jiǎn)單，只是簡(jiǎn)單的富文本賦值

-(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:創(chuàng)建標(biāo)簽的時(shí)候在子線程體驗(yàn)更好（生成富文本比較耗時(shí)）

#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>
#import "XWTagMaker.h"

@interface NSMutableAttributedString (XWTagView)

//當(dāng)前標(biāo)簽富文本的高度
@property (nonatomic,assign) CGFloat tagHeight;

/**
 快速創(chuàng)建tag標(biāo)簽所需樣式
 
 @param tags 字符串?dāng)?shù)組
 @param maskBlock 初始化標(biāo)簽樣式
 @return 標(biāo)簽所需的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];
        //標(biāo)簽左內(nèi)邊距
        [tagText appendAttributedString:[self creatEmptyAttributeString:fabs(maker.insets.left)]];
        //標(biāo)簽內(nèi)容
        [tagText yy_appendString:tag];
        //標(biāo)簽右內(nèi)邊距
        [tagText appendAttributedString:[self creatEmptyAttributeString:fabs(maker.insets.right)]];
        //設(shè)置外觀
        [self beautifyAttributedStringWithText:tagText ranges:NSMakeRange(0, tagText.length) maker:maker];
        //左右間距
        [tagText appendAttributedString:[self creatEmptyAttributeString:maker.space]];
        //行間距等設(shè)置
        [text appendAttributedString:tagText];
        text.yy_lineSpacing = maker.lineSpace;
        text.yy_lineBreakMode = NSLineBreakByWordWrapping;
        //高度計(jì)算（超最大范圍加換行符手動(dòng)換行）
        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;
        }
    }
    
    //高度記錄（富文本已擴(kuò)展高度屬性）
    text.tagHeight = height + maker.lineSpace + fabs(maker.insets.top) + fabs(maker.insets.bottom) ;
    //對(duì)齊方向設(shè)置（頭尾自動(dòng)縮進(jìn)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{
    
    //標(biāo)簽字體顏色設(shè)置
    tagText.yy_font = maker.font;
    tagText.yy_color = maker.textColor;
    [tagText yy_setTextBinding:[YYTextBinding bindingWithDeleteConfirm:NO] range:tagText.yy_rangeOfAll];
    //設(shè)置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 ;//設(shè)置與首部的距離
    style.tailIndent = maker.tagAlignment == NSTextAlignmentRight ? maker.maxWidth - fabs(maker.insets.right) : maker.maxWidth - 1.5; //設(shè)置與尾部的距離
    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;
}

細(xì)心的同學(xué)會(huì)發(fā)現(xiàn)要怎么知道他的高度？（當(dāng)然如果您用的是自動(dòng)布局可以不用管這個(gè)屬性，畢竟label自動(dòng)布局會(huì)自動(dòng)自適應(yīng)）從上面代碼可以看出來(lái)，最后返回的是富文本NSMutableAttributedString，為了更加方便，我便為NSMutableAttributedString擴(kuò)展了個(gè)高度屬性tagHeight（當(dāng)前標(biāo)簽富文本的高度以便外部獲取使用和緩存。

看起來(lái)很簡(jiǎn)單，也很容易理解（就是把標(biāo)簽數(shù)組變成一個(gè)富文本已達(dá)到標(biāo)簽的效果），接下來(lái)就看看怎么用吧

XWTagView *tagView = [[XWTagView alloc] initWithFrame:CGRectMake(10, 100, self.view.bounds.size.width-20, 50)];
    
    NSArray<NSString *> *tags = @[
                                  @"標(biāo)簽tag1",@"表面",@"哈哈哈",@"測(cè)試測(cè)試",@"不不不不",@"無(wú)敵啊",@"標(biāo)簽",@"這樣喊得好嗎",
                                  @"哈哈哈",@"嘻嘻嘻",@"呵呵呵",@"標(biāo)簽",@"表面兄弟",@"你好啊",@"不想你了哦",@"不要這樣子啦"
                                  ];
    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];

看起來(lái)是不是很簡(jiǎn)單，一個(gè)make就可以配置標(biāo)簽樣式了，如果您是比較復(fù)雜的列表的話(huà)，這樣一個(gè)label實(shí)現(xiàn)的標(biāo)簽性能完全不用擔(dān)心，如果您是個(gè)追求性能的人，可以開(kāi)啟YYLabel的異步繪制displaysAsynchronously（在iPhone4s上有明顯效果）。效果圖如下

tagLeft.png
tagRight.png

當(dāng)我以為大功告成的時(shí)候，最后還是讓我發(fā)現(xiàn)了個(gè)問(wèn)題，從上面代碼可以看出標(biāo)簽的的左右間隔是用空字符串隔開(kāi)的（這是一個(gè)缺陷，有比較好的解決方法的可以聯(lián)系我），說(shuō)到這細(xì)心的同學(xué)應(yīng)該可以猜到是什么問(wèn)題了，你們可曾注意過(guò)當(dāng)label右對(duì)齊的時(shí)候，最右邊的空格或者空字符串是不起作用的，最終想到了個(gè)解決辦法（首尾自動(dòng)縮進(jìn)1.5），可能不是最好的解決方案，但是足以解決出現(xiàn)的問(wèn)題，詳細(xì)的見(jiàn)如下代碼

  NSMutableParagraphStyle *style = [[NSParagraphStyle defaultParagraphStyle] mutableCopy];
    style.lineSpacing =  maker.lineSpace;
    style.firstLineHeadIndent = 1.5;
    style.headIndent = 1.5 ;//設(shè)置與首部的距離
    style.tailIndent = maker.tagAlignment == NSTextAlignmentRight ? maker.maxWidth - fabs(maker.insets.right) : maker.maxWidth - 1.5; //設(shè)置與尾部的距離
    switch (maker.tagAlignment) {
        case XWTagAlignmentLeft:
            style.alignment = NSTextAlignmentLeft;
            break;
        case XWTagAlignmentCenter:
            style.alignment = NSTextAlignmentCenter;
            break;
        case XWTagAlignmentRight:
            style.alignment = NSTextAlignmentRight;
            break;
        default:
            break;
    }

熟悉富文本的同學(xué)都知道tailIndent是與尾部的距離，利用好這一點(diǎn)可以很好的解決問(wèn)題，后續(xù)會(huì)加上點(diǎn)擊事件。

總結(jié)

富文本很強(qiáng)大，能做的不只只這些，很多黑科技等著你去發(fā)現(xiàn)哦，當(dāng)然如果您覺(jué)得我寫(xiě)的不錯(cuò)，希望您點(diǎn)個(gè)贊。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 我相信很多人在開(kāi)發(fā)者都有這樣的需求，標(biāo)簽展示（如下圖） 很多人都可以自己實(shí)現(xiàn)（網(wǎng)上別人寫(xiě)的也很多，但是別人寫(xiě)的總有...
    軟件iOS開(kāi)發(fā)閱讀 3,847評(píng)論 1贊 3
  • 前兩天買(mǎi)了5支黃色的郁金香，家里花瓶略小，郁金香垂著頭在書(shū)房的茶桌上等待開(kāi)放。我拿出一支插在了一個(gè)小瓶子里，在桌子...
    謝大土閱讀 185評(píng)論 0贊 0
  • “有些人開(kāi)始瘋狂吸煙，僅僅是因?yàn)閷?shí)驗(yàn)室小白鼠身上發(fā)現(xiàn)了某種試驗(yàn)性的癌癥治療方法。” 最近一次大氣中的二氧化碳濃度像...
    一筐莢果閱讀 347評(píng)論 1贊 1
  • 隨筆 一直以來(lái)就知道，壓力會(huì)使人變胖，但并不詳細(xì)清楚其原因是什么。 直到昨天，看了...
    心靈是我獨(dú)舞的城池閱讀 182評(píng)論 0贊 0
  • 一直想寫(xiě)小說(shuō)，卻堅(jiān)持不下去，果然肚子里的墨不夠。所以離開(kāi)了簡(jiǎn)書(shū)。某天，在想，寫(xiě)書(shū)，先要像辛夷塢……一樣，有個(gè)筆名，...
    鬼千初閱讀 221評(píng)論 2贊 0

友情鏈接更多精彩內(nèi)容