使用YYLabel小结,供参考

最近业务需求需要我们实现图文混排,之前打算使用UIlabel自带的属性attributedText,这个属性也很强大,可以实现图文混排,但是发现,实现链接点击有些困难,于是放弃。再后来发现了一个TTTAttributedLabel,他继承自UIlabel,但是使用的过程中发现,这个三方对链接支持是可以的,而对图片是不支持的,这让我一度纠结。之后,下定决心,重绘UI,重新选择,最终选择了YYText,实践发现,图文混排还是YYText好用啊。YYText继承自UIView,也实现了UILabel的很多功能和属性,真的很强大,不说了,直接上代码吧。

  YYLabel * commentLabel =[YYLabel new];
    commentLabel.numberOfLines = 3;//限制三行
    commentLabel.lineBreakMode = NSLineBreakByTruncatingTail;
    //这个属性必须设置,多行才有效
    commentLabel.preferredMaxLayoutWidth = mScreenWidth -20;
    NSMutableAttributedString  *titleAttr = [self getAttrWithData:commentData];
    commentLabel.attributedText  = titleAttr;

getAttrWithData这个方法主要是对文字进行排版属性的设置,代码中包含我们自己的一些业务逻辑,所以,需要的小伙伴们可以参考一下。
为了方便大家看,这个方法有很多行,没有拆分,实际使用的时候,大家尽量还是拆分一下,一个方法不要超过100行比较好。

- (NSMutableAttributedString*)getAttrWithData:(JZCommunityListPostCommentsModel *)model{
    NSString * attributedString = [NSString stringWithFormat:@"%@:%@",model.author.name,model.content];
    NSMutableAttributedString * resultAttr = [[NSMutableAttributedString alloc] initWithString:attributedString];
    
    //对齐方式 这里是 两边对齐
    resultAttr.yy_alignment = NSTextAlignmentLeft;
    //设置行间距
    resultAttr.yy_lineSpacing = 5;
    //设置字体大小
    resultAttr.yy_font = [UIFont systemFontOfSize:13];
    //设置作者的文字颜色
    NSRange authorRange = [attributedString rangeOfString:model.author.name];
    [resultAttr yy_setTextHighlightRange:authorRange color:[UIColor colorFromRGB:0x999999] backgroundColor:nil userInfo:nil];
    //处理topic----我们自己业务
    for (int i= 0; i<model.at_topics_content.count; i++) {
        NSDictionary * dict = model.at_topics_content[i];
        NSRange topicRange = [[resultAttr string]rangeOfString:[NSString stringWithFormat:@"<!--TOPIC#%d-->",i]];
        if (topicRange.length>0) {//说明有话题
            NSString * replaceStr = [NSString stringWithFormat:@"#%@%d#",dict[@"title"],i];
            [resultAttr replaceCharactersInRange:topicRange withString:replaceStr];
            NSRange replaceRan = [[resultAttr string]rangeOfString:replaceStr];
            NSRange replaceRange = NSMakeRange(replaceRan.location, replaceRan.length-1);
            NSString * replaceString = [NSString stringWithFormat:@"#%@#",dict[@"title"]];
            [resultAttr replaceCharactersInRange:replaceRan withString:replaceString];
            
            //修改话题的颜色
            [resultAttr yy_setTextHighlightRange:replaceRange color:[UIColor colorFromRGB:0xfc5f59] backgroundColor:nil tapAction:^(UIView * _Nonnull containerView, NSAttributedString * _Nonnull text, NSRange range, CGRect rect) {
                NSString * clickStr = [[text string] substringWithRange:range];
                for (NSDictionary * dict in model.at_topics_content) {
                    NSString * title = [NSString stringWithFormat:@"#%@#",dict[@"title"]];                    
                    if ([title isEqualToString:clickStr]) {
                        //根据urlroute跳到话题页
                        if ([dict.allKeys containsObject:@"urlroute"]) {
                            NSString * urlRoute = dict[@"urlroute"];
                            [JZRouter routeURL:urlRoute];
                        }
                         break;
                    }
                }
            }];
        }
    }
    
    //处理图片 img
    for (int i = 0; i<model.img.count; i++) {
        NSString * imageStr = [NSString stringWithFormat:@"<!--IMG#%d-->",i];
        NSRange imageRange = [[resultAttr string] rangeOfString:imageStr];
        if (imageRange.length>0) {//有图片,处理图片
            NSString * strimg = [NSString stringWithFormat:@"查看图片%d",i];
            [resultAttr replaceCharactersInRange:imageRange withString:strimg];
            NSRange strRange = [[resultAttr string] rangeOfString:strimg];
            
            //插入图片
            UIImage *image = [UIImage imageNamed:@"community_checkImage"];
            NSMutableAttributedString *attachment = [NSMutableAttributedString yy_attachmentStringWithContent:image contentMode:UIViewContentModeCenter attachmentSize:image.size alignToFont:[UIFont systemFontOfSize:13] alignment:YYTextVerticalAlignmentCenter];
            [resultAttr insertAttributedString:attachment atIndex:strRange.location];
            NSRange linkRange = NSMakeRange(strRange.location, strRange.length+1);
            //把数字文字变小,且变成白色,隐藏起来
            NSInteger loca = linkRange.location + linkRange.length -1;
            NSRange numRange = NSMakeRange(loca, 1);
            [resultAttr yy_setFont:[UIFont systemFontOfSize:1] range:numRange];
            [resultAttr yy_setColor:[UIColor whiteColor] range:numRange];
            __weak JZCommunityBigImageCell * weakSelf = self;
            [resultAttr yy_setTextHighlightRange:linkRange color:[UIColor colorFromRGB:0xfc5f59] backgroundColor:nil tapAction:^(UIView * _Nonnull containerView, NSAttributedString * _Nonnull text, NSRange range, CGRect rect) {
                NSString * clickStr = [[text string] substringWithRange:range];
                NSString * numStr = [clickStr substringFromIndex:5];
                NSInteger index = [numStr integerValue];
                if (index<model.img.count) {
                    NSString *imageUrl = model.img[index];
                    NSArray * array = @[imageUrl];
                    [weakSelf showPhotoGallary:array withSrc:imageUrl];
                }
            }];
        }
    }
    
    return resultAttr;
    
}

小结一下:整理一下,和YYLabel相关的设置如下

-(void)manageYYLabelOne{
   //设置链接,添加图片
    NSString * title = @"小明说:我是一个yytextLabel,我要实现富媒体。之前实现富媒体的方法不够好,这次一定要成功!之前实现富媒体的方法不够好,这次一定要成功!之前实现富媒体的方法不够好,之前实现富媒体的方法不够好,之前实现富媒体的方法不够好,之前实现富媒体的方法不够好,之前实现富媒体的方法不够好,之前实现富媒体的方法不够好,";
    //之前实现富媒体的方法不够好,这次一定要成功!
    self.yyLabelOne.numberOfLines = 3;
    self.yyLabelOne.lineBreakMode = NSLineBreakByTruncatingTail;
    //这个属性必须设置,多行才有效
    self.yyLabelOne.preferredMaxLayoutWidth = kScreenWidth -20;
    YYTextContainer * container = [YYTextContainer new];
    //限制宽度
    container.size             = CGSizeMake(kScreenWidth-20,CGFLOAT_MAX);
    NSMutableAttributedString  *titleAttr = [self getAttr:title];
    YYTextLayout *titleLayout = [YYTextLayout layoutWithContainer:container text:titleAttr];
    
    CGFloat titleLabelHeight = titleLayout.textBoundingSize.height;
    if (titleLabelHeight>51) {//大于三行,显示三行的高度
        titleLabelHeight = 51;
    }
    self.yyLabelOne.frame = CGRectMake(10,50,[UIScreen mainScreen].bounds.size.width-20,titleLabelHeight);
    self.yyLabelOne.attributedText  = titleAttr;
    
}

- (NSMutableAttributedString*)getAttr:(NSString*)attributedString {
    NSMutableAttributedString * resultAttr = [[NSMutableAttributedString alloc] initWithString:attributedString];
    
    //对齐方式 这里是 两边对齐
    resultAttr.yy_alignment = NSTextAlignmentLeft;
    //设置行间距
    resultAttr.yy_lineSpacing = 5;
    //设置字体大小
    resultAttr.yy_font = [UIFont systemFontOfSize:13];
    //设置连接文字
    [resultAttr yy_setTextHighlightRange:NSMakeRange(3, 3) color:[UIColor redColor] backgroundColor:nil tapAction:^(UIView * _Nonnull containerView, NSAttributedString * _Nonnull text, NSRange range, CGRect rect) {
        NSLog(@"这是一个连接   %@",[text string]);
    }];
    //设置特殊文字颜色
    [resultAttr yy_setTextHighlightRange:NSMakeRange(0, 3) color:[UIColor greenColor] backgroundColor:nil userInfo:nil];
    
    //添加图片
    UIImage *image = [UIImage imageNamed:@"community_checkImage"];
    NSMutableAttributedString *attachment = nil;
    attachment = [NSMutableAttributedString yy_attachmentStringWithContent:image contentMode:UIViewContentModeCenter attachmentSize:image.size alignToFont:[UIFont systemFontOfSize:13] alignment:YYTextVerticalAlignmentCenter];
    //[resultAttr appendAttributedString: attachment];
    [resultAttr insertAttributedString:attachment atIndex:3];
    
    //可以设置某段字体的大小
    //[resultAttr yy_setFont:[UIFont boldSystemFontOfSize:CONTENT_FONT_SIZE] range:NSMakeRange(0, 3)];
    //设置字间距
    //resultAttr.yy_kern = [NSNumber numberWithFloat:1.0];
    
    return resultAttr;
    
}

实现效果如下:(备注:背景色是xib上画的,代码中没有;图片是本地的)。

image.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,271评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,275评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,151评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,550评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,553评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,559评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,924评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,580评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,826评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,363评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,940评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2 342

推荐阅读更多精彩内容