iOS Label 을 이용 한 간단 한 고성능 라벨 TagView

머리말
저 는 많은 사람들 이 개발 자 들 에 게 이러한 요 구 를 가지 고 있다 고 믿 습 니 다.라벨 전시(아래 그림)

많은 사람들 이 스스로 실현 할 수 있다(인터넷 에서 다른 사람 이 쓴 것 도 많 지만 다른 사람 이 쓴 것 은 자신의 수 요 를 만족 시 키 지 못 하 는 점 이 있다).실현 하 는 방법 도 여러 가지 가 있다.예 를 들 어 동적 으로 view 를 추가 하고 UICollection View 를 사용 하 는 등 이다.이런 실현 방법 은 나 쁘 지 않 지만 목록 이 복잡 하고 데이터 가 많 을 때 성능 이 어떻게 될 지 생각해 본 적 이 있 습 니까?
부 텍스트 를 깊이 이해 할 때 갑자기 부 텍스트 가 이런 효 과 를 얻 을 수 있 을 것 이 라 고 생각 했다.즉,label 하나 로 이런 라벨 의 효 과 를 실현 할 수 있 을 것 이다.효과 성능 은 더 이상 말 할 필요 가 없다.게다가 YY Label 의 비동기 화 는 정말 금상첨화 이다.
XWTagView(고성능 라벨)
우세:
4.567917.사용자 정의 탭 외관,상하 거리,좌우 거리,정렬 방식 을 지원 합 니 다4.567917.비동기 그리 기 성능 이 크게 향상 되 었 습 니 다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

이상 은 탭 외관 의 일부 속성 입 니 다.설명 이 명확 하고 정렬 방식 을 포함 합 니 다.모든 속성 은 기본 값 이 있 습 니 다.max Width 라 는 속성 은 높이 와 줄 바 꿈 을 계산 하기 위해 비어 있어 야 합 니 다.(기본 값 은 화면 너비 입 니 다)
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;
}

NSMutable AttributedString+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:@"
" 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 자동 레이아웃 은 자동 으로 적응 되 기 때 문 입 니 다)위 코드 에서 알 수 있 듯 이 마지막 으로 부 텍스트 NSMutable Attributed String 을 되 돌려 줍 니 다.더욱 편리 하도록NSMutable AttributedString 에 고도 속성 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 를 그 릴 수 있 습 니 다.(iPhone 4s 에서 뚜렷 한 효과 가 있 습 니 다)
효과 도 는 다음 과 같다


제 가 큰 성 과 를 거 두 었 다 고 생각 했 을 때 마지막 으로 저 에 게 문 제 를 발 견 했 습 니 다.위의 코드 를 통 해 라벨 의 좌우 간격 이 빈 문자열 로 구분 되 었 음 을 알 수 있 습 니 다.(이것 은 결함 입 니 다.비교적 좋 은 해결 방법 이 있 으 면 저 에 게 연락 하 세 요)이 세심 한 친구 들 은 무슨 문제 인지 알 수 있 을 것 입 니 다.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;
 }

부 텍스트 를 잘 아 는 학생 들 은 tail Indent 가 꼬리 와 의 거리 라 는 것 을 잘 알 고 있 습 니 다.이 점 을 잘 이용 하면 문 제 를 잘 해결 할 수 있 고 나중에 클릭 사건 을 추가 할 것 입 니 다.
총결산
풍부 한 텍스트 는 매우 강력 합 니 다.할 수 있 는 것 은 이것 뿐만 이 아 닙 니 다.많은 흑 과학기술 이 당신 이 발견 하 기 를 기다 리 고 있 습 니 다.물론 제 가 잘 썼 다 고 생각 하신 다 면 칭찬 을 눌 러 주 십시오.
자,이상 이 이 글 의 전체 내용 입 니 다.본 논문 의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 참고 학습 가치 가 있 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 댓 글 을 남 겨 주 셔 서 저희 에 대한 지지 에 감 사 드 립 니 다.