需求需要修改背景辜腺，加入背景色，透明度操作等乍恐，由于時(shí)間比較緊评疗，就在原有基礎(chǔ)上修改，現(xiàn)有代碼用的是唐巧寫的CoreText圖文混排
之前的左下角聊天的效果:
image
做好后的效果左下角:
image
排版引擎框架
對(duì)于一個(gè)復(fù)雜的排版引擎來說禁熏，可以將其功能拆成以下幾個(gè)類來完成：
- 一個(gè)顯示用的類壤巷，僅負(fù)責(zé)顯示內(nèi)容，不負(fù)責(zé)排版
- 一個(gè)模型類瞧毙，用于承載顯示所需要的所有數(shù)據(jù)
- 一個(gè)排版類胧华，用于實(shí)現(xiàn)文字內(nèi)容的排版
- 一個(gè)配置類寄症，用于實(shí)現(xiàn)一些排版時(shí)的可配置項(xiàng)
注：” 單一功能原則 “(Single responsibility principle)
參考鏈接：http://zh.wikipedia.org/wiki/%E5%8D%95%E4%B8%80%E5%8A%9F%E8%83%BD%E5%8E%9F%E5%88%99
按照以上原則，我們將CTDisplayView中的部分內(nèi)容拆開矩动，由 4 個(gè)類構(gòu)成：
- CTFrameParserConfig類有巧，用于配置繪制的參數(shù)，例如：文字顏色悲没，大小篮迎，行間距等。
- CTFrameParser類示姿，用于生成最后繪制界面需要的CTFrameRef實(shí)例甜橱。
- CoreTextData類，用于保存由CTFrameParser類生成的CTFrameRef實(shí)例以及CTFrameRef實(shí)際繪制需要的高度栈戳。
- CTDisplayView類岂傲，持有CoreTextData類的實(shí)例，負(fù)責(zé)將CTFrameRef繪制到界面上子檀。
關(guān)于這 4 個(gè)類的關(guān)鍵代碼镊掖，自己去看源碼吧，關(guān)于CoreText的原理褂痰，實(shí)現(xiàn)亩进，可以去看唐巧博客，源碼寫的很好缩歪，適應(yīng)了他當(dāng)時(shí)的業(yè)務(wù)需求归薛，同樣有些問題，比如寬度固定匪蝙，CTDisplayView繪制的時(shí)候背景色不知道怎么傳
以前的效果圖苟翻，寬度固定，無背景骗污，無圓角
首先修改寬度
CTFrameParser 類負(fù)責(zé)把 NSAttributedString 的基礎(chǔ)數(shù)據(jù) 和 CTFrameParserConfig 的配置信息生成CoreTextData類崇猫， CoreTextData用于保存由CTFrameParser類生成的CTFrameRef實(shí)例以及CTFrameRef實(shí)際繪制需要的高度。
CTFrameParser類
去掉 if (data.height > 18.0) ,讓寬度跟隨計(jì)算出來的寬度需忿，不用以前固定的寬度
+ (CoreTextData *)parseAttributedContent:(NSAttributedString *)content config:(CTFrameParserConfig *)config {
// 創(chuàng)建CTFramesetterRef實(shí)例
CTFramesetterRef framesetter = CTFramesetterCreateWithAttributedString((CFAttributedStringRef)content);
// 獲得要緩制的區(qū)域的高度
CGSize restrictSize = CGSizeMake(config.width, CGFLOAT_MAX);
CGSize coreTextSize = CTFramesetterSuggestFrameSizeWithConstraints(framesetter, CFRangeMake(0, 0), nil, restrictSize, nil);
CGFloat textHeight = coreTextSize.height;
// 生成CTFrameRef實(shí)例
CTFrameRef frame = [self createFrameWithFramesetter:framesetter config:config height:textHeight];
// 將生成好的CTFrameRef實(shí)例和計(jì)算好的緩制高度保存到CoreTextData實(shí)例中诅炉，最后返回CoreTextData實(shí)例
CoreTextData *data = [[CoreTextData alloc] init];
data.ctFrame = frame;
data.height = textHeight;
data.content = content;
//獲得要緩制的區(qū)域的寬度
// if (data.height > 18.0) {
// data.width = config.width;
// } else
{
CGSize restrictSize = CGSizeMake(CGFLOAT_MAX, textHeight);
CGSize coreTextSize = CTFramesetterSuggestFrameSizeWithConstraints(framesetter, CFRangeMake(0, 0), nil, restrictSize, nil);
CGFloat textWidth = coreTextSize.width;
data.width = textWidth;
}
if(data.width > config.width)
{
data.width = config.width;
}
// 釋放內(nèi)存
CFRelease(frame);
CFRelease(framesetter);
return data;
}
其次修改背景和半透明
我發(fā)現(xiàn)在初始化 CTDisplayView 的地方怎么設(shè)置背景顏色都沒用，永遠(yuǎn)是白色
只有設(shè)置成clearColor 清掉背景色起作用屋厘，用的是YYAsyncLayer做的繪制
- (void)_displayAsync:(BOOL)async里面沒有背景色的時(shí)候默認(rèn)就是白色涕烧，修改了默認(rèn)顏色
- [UIColor colorWithWhite:0.0f alpha:0.3f].CGColor
- 修改了，繪制時(shí)候默認(rèn)不透明修改為透明.
UIGraphicsBeginImageContextWithOptions(size, NO, scale)
然后修改圓角
可以看看圓角的幾種實(shí)現(xiàn)方式
http://www.cnblogs.com/mafeng/p/5672528.html
在DTMessageCell里面
- (void)updateUI {
if (![self.contentView.subviews containsObject:self.displayView]) {
[self.contentView addSubview:self.displayView];
}
CGFloat width = self.displayView.data.width;
CGFloat height = self.displayView.data.height;
self.displayView.frame = CGRectMake(0.0, 2.0, width, height);
CGRect bound = CGRectZero;
bound.size.width = width;
bound.size.height = height;
CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];
maskLayer.path = [[UIBezierPath bezierPathWithRoundedRect:bound
byRoundingCorners:UIRectCornerAllCorners
cornerRadii:CGSizeMake(10, 10)] CGPath];
self.displayView.layer.mask = maskLayer;
}
修改縮進(jìn)
前面這些都改完之后發(fā)現(xiàn)左右的邊距是貼著邊框的
在CTFrameParserConfig里面加了三個(gè)參數(shù)
- firstLineHeadIndent
- headIndent
- tailIndent
修改CTFrameParser
+ (NSMutableDictionary *)attributesWithConfig:(CTFrameParserConfig *)config {
CGFloat fontSize = config.fontSize;
CTFontRef fontRef = CTFontCreateWithName((CFStringRef)@"ArialMT", fontSize, NULL);
CGFloat lineSpacing = config.lineSpace;
const CFIndex kNumberOfSettings = 4;
uint8_t breakMode = kCTLineBreakByWordWrapping;
CTParagraphStyleSetting theSettings[kNumberOfSettings] = {
{ kCTParagraphStyleSpecifierLineSpacingAdjustment, sizeof(CGFloat), &lineSpacing },
{ kCTParagraphStyleSpecifierMaximumLineSpacing, sizeof(CGFloat), &lineSpacing },
{ kCTParagraphStyleSpecifierMinimumLineSpacing, sizeof(CGFloat), &lineSpacing },
{ kCTParagraphStyleSpecifierLineBreakMode, sizeof(uint8_t), &breakMode }
};
CTParagraphStyleRef theParagraphRef = CTParagraphStyleCreate(theSettings, kNumberOfSettings);
UIColor *textColor = config.textColor;
NSMutableDictionary *dict = [NSMutableDictionary dictionary];
dict[(id)kCTForegroundColorAttributeName] = (id)textColor.CGColor;
dict[(id)kCTFontAttributeName] = (__bridge id)fontRef;
dict[(id)kCTParagraphStyleAttributeName] = (__bridge id)theParagraphRef;
NSMutableParagraphStyle *paragraphStyle = [[NSMutableParagraphStyle alloc] init];
//縮進(jìn)
paragraphStyle.firstLineHeadIndent = config.firstLineHeadIndent;
paragraphStyle.headIndent = config.headIndent;
paragraphStyle.tailIndent = -config.tailIndent;
dict[(id)NSParagraphStyleAttributeName] = paragraphStyle;
CFRelease(theParagraphRef);
CFRelease(fontRef);
return dict;
}
一個(gè)小坑
小屏手機(jī)上屏蔽掉了 YYAsyncLayer 汗洒，不知道唐巧做何考慮,看YYKit作者的博客议纯，是支持4s的,4s依然很流暢
+ (Class)layerClass {
// if (kScreenWidth <= 321) {
// return [CALayer class];
// }
return [YYAsyncLayer class];
}
后續(xù)補(bǔ)充需求，首行距離頂部距離修改溢谤，尾行距離底部距離修改
聊天高度加10
CTFrameParser.m
- (CoreTextData *)parseAttributedContent:(NSAttributedString *)content config:(CTFrameParserConfig *)config
data.height = textHeight += 10;
文字往上移5像素
- (NSMutableDictionary *)attributesWithConfig:(CTFrameParserConfig *)config
dict[(id)NSBaselineOffsetAttributeName] = @(5);
- (void)fillImagePosition {
圖片往上移5像素
CoreTextData.m
runBounds.origin.y -= descent - 5;
