最近業(yè)務(wù)需求需要我們實現(xiàn)圖文混排状植，之前打算使用UIlabel自帶的屬性attributedText，這個屬性也很強大怨喘，可以實現(xiàn)圖文混排津畸，但是發(fā)現(xiàn)，實現(xiàn)鏈接點擊有些困難哲思，于是放棄洼畅。再后來發(fā)現(xiàn)了一個TTTAttributedLabel，他繼承自UIlabel棚赔，但是使用的過程中發(fā)現(xiàn)帝簇，這個三方對鏈接支持是可以的，而對圖片是不支持的靠益，這讓我一度糾結(jié)丧肴。之后，下定決心胧后，重繪UI芋浮，重新選擇，最終選擇了YYText壳快，實踐發(fā)現(xiàn)纸巷，圖文混排還是YYText好用啊。YYText繼承自UIView眶痰，也實現(xiàn)了UILabel的很多功能和屬性瘤旨，真的很強大，不說了竖伯，直接上代碼吧存哲。
YYLabel * commentLabel =[YYLabel new];
commentLabel.numberOfLines = 3;//限制三行
commentLabel.lineBreakMode = NSLineBreakByTruncatingTail;
//這個屬性必須設(shè)置因宇，多行才有效
commentLabel.preferredMaxLayoutWidth = mScreenWidth -20;
NSMutableAttributedString *titleAttr = [self getAttrWithData:commentData];
commentLabel.attributedText = titleAttr;
getAttrWithData這個方法主要是對文字進行排版屬性的設(shè)置，代碼中包含我們自己的一些業(yè)務(wù)邏輯祟偷，所以察滑，需要的小伙伴們可以參考一下。
為了方便大家看修肠，這個方法有很多行贺辰，沒有拆分，實際使用的時候氛赐，大家盡量還是拆分一下魂爪，一個方法不要超過100行比較好先舷。
- (NSMutableAttributedString*)getAttrWithData:(JZCommunityListPostCommentsModel *)model{
NSString * attributedString = [NSString stringWithFormat:@"%@:%@",model.author.name,model.content];
NSMutableAttributedString * resultAttr = [[NSMutableAttributedString alloc] initWithString:attributedString];
//對齊方式 這里是 兩邊對齊
resultAttr.yy_alignment = NSTextAlignmentLeft;
//設(shè)置行間距
resultAttr.yy_lineSpacing = 5;
//設(shè)置字體大小
resultAttr.yy_font = [UIFont systemFontOfSize:13];
//設(shè)置作者的文字顏色
NSRange authorRange = [attributedString rangeOfString:model.author.name];
[resultAttr yy_setTextHighlightRange:authorRange color:[UIColor colorFromRGB:0x999999] backgroundColor:nil userInfo:nil];
//處理topic----我們自己業(yè)務(wù)
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]) {
//根據(jù)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);
//把數(shù)字文字變小，且變成白色,隱藏起來
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;
}
小結(jié)一下：整理一下蒋川，和YYLabel相關(guān)的設(shè)置如下
-(void)manageYYLabelOne{
//設(shè)置鏈接牲芋，添加圖片
NSString * title = @"小明說：我是一個yytextLabel，我要實現(xiàn)富媒體捺球。之前實現(xiàn)富媒體的方法不夠好缸浦，這次一定要成功！之前實現(xiàn)富媒體的方法不夠好氮兵，這次一定要成功裂逐！之前實現(xiàn)富媒體的方法不夠好，之前實現(xiàn)富媒體的方法不夠好泣栈，之前實現(xiàn)富媒體的方法不夠好卜高，之前實現(xiàn)富媒體的方法不夠好，之前實現(xiàn)富媒體的方法不夠好南片，之前實現(xiàn)富媒體的方法不夠好掺涛，";
//之前實現(xiàn)富媒體的方法不夠好，這次一定要成功疼进！
self.yyLabelOne.numberOfLines = 3;
self.yyLabelOne.lineBreakMode = NSLineBreakByTruncatingTail;
//這個屬性必須設(shè)置薪缆，多行才有效
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;
//設(shè)置行間距
resultAttr.yy_lineSpacing = 5;
//設(shè)置字體大小
resultAttr.yy_font = [UIFont systemFontOfSize:13];
//設(shè)置連接文字
[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]);
}];
//設(shè)置特殊文字顏色
[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];
//可以設(shè)置某段字體的大小
//[resultAttr yy_setFont:[UIFont boldSystemFontOfSize:CONTENT_FONT_SIZE] range:NSMakeRange(0, 3)];
//設(shè)置字間距
//resultAttr.yy_kern = [NSNumber numberWithFloat:1.0];
return resultAttr;
}
實現(xiàn)效果如下：（備注：背景色是xib上畫的伞广，代碼中沒有拣帽；圖片是本地的）。
image.png
