需求需要修改背景，加入背景色，透明度操作等，由于时间比较紧，就在原有基础上修改，现有代码用的是唐巧写的CoreText图文混排
之前的左下角聊天的效果:
image
做好后的效果左下角:
image
排版引擎框架
对于一个复杂的排版引擎来说，可以将其功能拆成以下几个类来完成：
- 一个显示用的类，仅负责显示内容，不负责排版
- 一个模型类，用于承载显示所需要的所有数据
- 一个排版类，用于实现文字内容的排版
- 一个配置类，用于实现一些排版时的可配置项
注：” 单一功能原则 “(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中的部分内容拆开，由 4 个类构成：
- CTFrameParserConfig类，用于配置绘制的参数，例如：文字颜色，大小，行间距等。
- CTFrameParser类，用于生成最后绘制界面需要的CTFrameRef实例。
- CoreTextData类，用于保存由CTFrameParser类生成的CTFrameRef实例以及CTFrameRef实际绘制需要的高度。
- CTDisplayView类，持有CoreTextData类的实例，负责将CTFrameRef绘制到界面上。
关于这 4 个类的关键代码，自己去看源码吧，关于CoreText的原理，实现，可以去看唐巧博客，源码写的很好，适应了他当时的业务需求，同样有些问题，比如宽度固定，CTDisplayView绘制的时候背景色不知道怎么传
以前的效果图，宽度固定，无背景，无圆角
首先修改宽度
CTFrameParser 类负责把 NSAttributedString 的基础数据 和 CTFrameParserConfig 的配置信息生成CoreTextData类， CoreTextData用于保存由CTFrameParser类生成的CTFrameRef实例以及CTFrameRef实际绘制需要的高度。
CTFrameParser类
去掉 if (data.height > 18.0) ,让宽度跟随计算出来的宽度，不用以前固定的宽度
+ (CoreTextData *)parseAttributedContent:(NSAttributedString *)content config:(CTFrameParserConfig *)config {
// 创建CTFramesetterRef实例
CTFramesetterRef framesetter = CTFramesetterCreateWithAttributedString((CFAttributedStringRef)content);
// 获得要缓制的区域的高度
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;
//获得要缓制的区域的宽度
// 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;
}
// 释放内存
CFRelease(frame);
CFRelease(framesetter);
return data;
}
其次修改背景和半透明
我发现在初始化 CTDisplayView 的地方怎么设置背景颜色都没用，永远是白色
只有设置成clearColor 清掉背景色起作用，用的是YYAsyncLayer做的绘制
- (void)_displayAsync:(BOOL)async里面没有背景色的时候默认就是白色，修改了默认颜色
- [UIColor colorWithWhite:0.0f alpha:0.3f].CGColor
- 修改了，绘制时候默认不透明修改为透明.
UIGraphicsBeginImageContextWithOptions(size, NO, scale)
然后修改圆角
可以看看圆角的几种实现方式
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;
}
修改缩进
前面这些都改完之后发现左右的边距是贴着边框的
在CTFrameParserConfig里面加了三个参数
- 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];
}
后续补充需求，首行距离顶部距离修改，尾行距离底部距离修改
聊天高度加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;
网友评论