需求需要修改背景，加入背景色，透明度操作等，由于時間比較緊，就在原有基礎上修改，現(xiàn)有代碼用的是唐巧寫的CoreText圖文混排
之前的左下角聊天的效果:
image
做好后的效果左下角:
image
排版引擎框架
對于一個復雜的排版引擎來說，可以將其功能拆成以下幾個類來完成：
- 一個顯示用的類，僅負責顯示內(nèi)容，不負責排版
- 一個模型類，用于承載顯示所需要的所有數(shù)據(jù)
- 一個排版類，用于實現(xiàn)文字內(nèi)容的排版
- 一個配置類，用于實現(xiàn)一些排版時的可配置項
注：” 單一功能原則 “(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 個類構成：
- CTFrameParserConfig類，用于配置繪制的參數(shù)，例如：文字顏色，大小，行間距等。
- CTFrameParser類，用于生成最后繪制界面需要的CTFrameRef實例。
- CoreTextData類，用于保存由CTFrameParser類生成的CTFrameRef實例以及CTFrameRef實際繪制需要的高度。
- CTDisplayView類，持有CoreTextData類的實例，負責將CTFrameRef繪制到界面上。
關于這 4 個類的關鍵代碼，自己去看源碼吧，關于CoreText的原理，實現(xiàn)，可以去看唐巧博客，源碼寫的很好，適應了他當時的業(yè)務需求，同樣有些問題，比如寬度固定，CTDisplayView繪制的時候背景色不知道怎么傳
以前的效果圖，寬度固定，無背景，無圓角
首先修改寬度
CTFrameParser 類負責把 NSAttributedString 的基礎數(shù)據(jù) 和 CTFrameParserConfig 的配置信息生成CoreTextData類， CoreTextData用于保存由CTFrameParser類生成的CTFrameRef實例以及CTFrameRef實際繪制需要的高度。
CTFrameParser類
去掉 if (data.height > 18.0) ,讓寬度跟隨計算出來的寬度，不用以前固定的寬度
+ (CoreTextData *)parseAttributedContent:(NSAttributedString *)content config:(CTFrameParserConfig *)config {
// 創(chuàng)建CTFramesetterRef實例
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實例
CTFrameRef frame = [self createFrameWithFramesetter:framesetter config:config height:textHeight];
// 將生成好的CTFrameRef實例和計算好的緩制高度保存到CoreTextData實例中，最后返回CoreTextData實例
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 的地方怎么設置背景顏色都沒用，永遠是白色
只有設置成clearColor 清掉背景色起作用，用的是YYAsyncLayer做的繪制
- (void)_displayAsync:(BOOL)async里面沒有背景色的時候默認就是白色，修改了默認顏色
- [UIColor colorWithWhite:0.0f alpha:0.3f].CGColor
- 修改了，繪制時候默認不透明修改為透明.
UIGraphicsBeginImageContextWithOptions(size, NO, scale)
然后修改圓角
可以看看圓角的幾種實現(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;
}
修改縮進
前面這些都改完之后發(fā)現(xiàn)左右的邊距是貼著邊框的
在CTFrameParserConfig里面加了三個參數(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];
//縮進
paragraphStyle.firstLineHeadIndent = config.firstLineHeadIndent;
paragraphStyle.headIndent = config.headIndent;
paragraphStyle.tailIndent = -config.tailIndent;
dict[(id)NSParagraphStyleAttributeName] = paragraphStyle;
CFRelease(theParagraphRef);
CFRelease(fontRef);
return dict;
}
一個小坑
小屏手機上屏蔽掉了 YYAsyncLayer ，不知道唐巧做何考慮,看YYKit作者的博客，是支持4s的,4s依然很流暢
+ (Class)layerClass {
// if (kScreenWidth <= 321) {
// return [CALayer class];
// }
return [YYAsyncLayer class];
}
后續(xù)補充需求，首行距離頂部距離修改，尾行距離底部距離修改
聊天高度加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;
