開(kāi)發(fā)視頻直播app，遇到了這么一個(gè)問(wèn)題，需要實(shí)現(xiàn)下面的UI

直播聊天UI

剛開(kāi)始看到這圖片的時(shí)候，感覺(jué)沒(méi)什么，一個(gè)圖片，兩個(gè)label添加到cell.contentView，再讓單元格高度自適應(yīng)，so easy。好吧，事實(shí)證明圖樣圖森破，問(wèn)題如下：

這是問(wèn)題圖片

沒(méi)錯(cuò)，消息label的位置會(huì)從紅線開(kāi)始，也就代表著文字“對(duì)方的哥哥發(fā)”不會(huì)從單元格的最左邊開(kāi)始，會(huì)從紅線位置開(kāi)始，基于這個(gè)原因，我產(chǎn)生了一個(gè)想法：

? ? ? ? ? ? cell.contentView add一個(gè)label，label上加載等級(jí)圖片，label的開(kāi)始前面填寫(xiě)空格，為了讓圖片不遮蓋文字

但是我沒(méi)有按照這個(gè)思路走，因?yàn)槲矣窒肫饋?lái)以前看過(guò)的一個(gè)名詞，富文本，于是開(kāi)始接觸了解，并實(shí)現(xiàn)。

1，制作富文本，將一段文字中不通的字顯示不同的顏色，大小等。

如圖，實(shí)現(xiàn)“干”字顏色和大小的變化

self.chatLabel.frame=self.contentView.bounds;

//富文本

NSMutableAttributedString* attributedStr = [[NSMutableAttributedString alloc]initWithString:@"干：一個(gè)人的夜，我的心，應(yīng)該放在那里"];

[attributedStr addAttribute:NSFontAttributeName value:[UIFont systemFontOfSize:16.0f] range:NSMakeRange(0,1)];//range代表“干”字的位置

[attributedStr addAttribute:NSForegroundColorAttributeName value:[UIColor redColor]range:NSMakeRange(0,1)];

self.chatLabel.attributedText= attributedStr;

[self.contentView addSubview:self.chatLabel];

效果：

效果圖

2，制作富文本，將圖片和文字混排

NSMutableAttributedString* attributedStr = [[NSMutableAttributedString alloc]initWithString:@"干：一個(gè)人的夜，我的心，應(yīng)該放在那里"attributes:@{NSFontAttributeName:[UIFont systemFontOfSize:16]}];

NSTextAttachment* attachment = [[NSTextAttachment alloc]initWithData:nil ofType:nil];

UIImage*image = [UIImage imageNamed:@"Image_1"];

attachment.image= image;

attachment.bounds=CGRectMake(0,0,50,20);

NSAttributedString*text = [NSAttributedString attributedStringWithAttachment:attachment];

[attributedStr insertAttributedString:text atIndex:0];

self.chatLabel.attributedText= attributedStr;

[self.contentView addSubview:self.chatLabel];

效果：

效果圖

3，制作富文本，定制需求，圖片的高度不想每個(gè)都要設(shè)置一遍

創(chuàng)建一個(gè)繼承自NSTextAttachment的類(lèi)，重寫(xiě)-(CGRect)attachmentBoundsForTextContainer:(NSTextContainer*)textContainerproposedLineFragment:(CGRect)lineFragglyphPosition:(CGPoint)positioncharacterIndex:(NSUInteger)charIndex方法

。h

#import

@interface myTextAttachment?:?NSTextAttachment

@end

。m

#import "myTextAttachment.h"

@implementationmy TextAttachment

-(CGRect)attachmentBoundsForTextContainer:(NSTextContainer*)textContainer proposedLineFragment:(CGRect)lineFrag glyphPosition:(CGPoint)position characterIndex:(NSUInteger)charIndex

{

return CGRectMake(0,0,?lineFrag.size.height,?lineFrag.size.height);

}

@end

然后在自定義cell中這樣寫(xiě)

NSMutableAttributedString* attributedStr = [[NSMutableAttributedString alloc]initWithString:@"干：一個(gè)人的夜，我的心，應(yīng)該放在那里" attributes:@{NSFontAttributeName:[UIFont systemFontOfSize:16]}];

myTextAttachment*attachment = [[myTextAttachment alloc]init];

UIImage*image = [UIImage imageNamed:@"Image_1"];

attachment.image= image;

NSAttributedString*text = [NSAttributedString attributedStringWithAttachment:attachment];

[attributedStr insertAttributedString:text atIndex:0];

self.chatLabel.attributedText= attributedStr;

[self.contentView addSubview:self.chatLabel];

4，制作富文本，替換掉一些特殊字符

如果想動(dòng)態(tài)改變圖片怎么辦？例如

圖片中的等級(jí)，18，49，18都是不一樣的，怎么搞？這樣搞

NSMutableAttributedString* attributedStr = [[NSMutableAttributedString alloc]initWithString:@"[icon]干：一個(gè)人的夜，我的心，應(yīng)該放在那里"];//注意，[icon]表示要替換的字符，把icon替換成圖片

NSTextAttachment* attachment = [[NSTextAttachment alloc]init];

UIImage* image = [UIImageimageNamed:@"Image_1"];

attachment.image= image;

NSAttributedString* text = [NSAttributedString attributedStringWithAttachment:attachment];

NSRange range = [[attributedStr string]rangeOfString:@"[icon]"];

[attributedStr replaceCharactersInRange:range withAttributedString:text];

self.chatLabel.attributedText= attributedStr;

[self.contentView addSubview:self.chatLabel];

效果圖：

和上面沒(méi)差，只是這個(gè)是用替換字符串實(shí)現(xiàn)的

補(bǔ)充點(diǎn)知識(shí)：

1.為某一范圍內(nèi)文字設(shè)置多個(gè)屬性

- (void)setAttributes:(NSDictionary*)attrs range:(NSRange)range;

為某一范圍內(nèi)文字添加某個(gè)屬性

- (void)addAttribute:(NSString*)name value:(id)value range:(NSRange)range;

為某一范圍內(nèi)文字添加多個(gè)屬性

- (void)addAttributes:(NSDictionary*)attrs range:(NSRange)range;

移除某范圍內(nèi)的某個(gè)屬性

- (void)removeAttribute:(NSString*)name range:(NSRange)range;

2.常見(jiàn)的屬性及說(shuō)明

NSFontAttributeName字體

NSParagraphStyleAttributeName段落格式

NSForegroundColorAttributeName字體顏色

NSBackgroundColorAttributeName背景顏色

NSStrikethroughStyleAttributeName刪除線格式

NSUnderlineStyleAttributeName下劃線格式

NSStrokeColorAttributeName刪除線顏色

NSStrokeWidthAttributeName刪除線寬度

NSShadowAttributeName陰影

好吧，下面是你們想要的Demo

Demo地址富文本Demo