iOS阅读器实践系列(一)coretext纯文本排版基础
前言:之前做了公司阅读类的App,最近有时间来写一下阅读部分的实现过程,供梳理逻辑,也希望能为后来使用者提供一点思路,如有错误,欢迎指正。
阅读的排版用的是coretext,这篇介绍用coretext实现基本的排版功能。
关于coretext的实现原理,可以查看文档或其他资料,这里就不介绍了,只介绍如何应用coretext来实现一个简单的文本排版功能。
因为coretext是离屏排版的,即在将内容渲染到屏幕之前,内容的排版工作的已经完成了。
排版过程大致过程分为 步:
一、由原始文本数据和需要的相关配置来得到属性字符串。
二、由属性字符串得到CTFramesetter
三、由CTFramesetter和绘制区域得到CTFrame
四、最后将CTFrame渲染到视图的上下文中
1、由原始文本数据和需要的相关配置来得到属性字符串
这一部最关键的是得到相关配置,这些配置可能包括文本对齐方式、段收尾缩进、行高等,下面是一些相关配置属性:
@interface CTFrameParserConfigure : NSObject @property (nonatomic, assign) CGFloat frameWidth;
@property (nonatomic, assign) CGFloat frameHeight; //字体属性
@property (nonatomic, assign) CGFloat wordSpace;
@property (nonatomic, strong) UIColor *textColor;
@property (nonatomic, strong) NSString *fontName;
@property (nonatomic, assign) CGFloat fontSize; //段落属性
@property (nonatomic, assign) CGFloat lineSpace;
@property (nonatomic, assign) CTTextAlignment textAlignment; //文本对齐模式
@property (nonatomic, assign) CGFloat firstlineHeadIndent; //段首行缩进
@property (nonatomic, assign) CGFloat headIndent; //段左侧整体缩进
@property (nonatomic, assign) CGFloat tailIndent; //段尾缩进
@property (nonatomic, assign) CTLineBreakMode lineBreakMode; //换行模式
@property (nonatomic, assign) CGFloat lineHeightMutiple; //行高倍数器(它的值表示原行高的倍数)
@property (nonatomic, assign) CGFloat maxLineHeight; //最大行高限制(0表示无限制,是非负的,行高不能超过此值)
@property (nonatomic, assign) CGFloat minLineHeight; //最小行高限制
@property (nonatomic,assign) CGFloat paragraphBeforeSpace; //段前间距(相对上一段加上的间距)
@property (nonatomic, assign) CGFloat paragraphAfterSpace; //段尾间距(相对下一段加上的间距) @property (nonatomic, assign) CTWritingDirection writeDirection; //书写方向 @property (nonatomic, assign) CGFloat lineSpacingAdjustment; //The space in points added between lines within the paragraph (commonly known as leading). @end
接下来我们要利用这些属性,生成我们需要的配置,在我们根据我们的需要给这些属性赋值以后,利用下面的方法来得到我们需要的配置:
//返回文本所有属性的集合(以字典形式),包括字体、段落等
- (NSDictionary *)attributesWithConfig:(CTFrameParserConfigure *)config
{
//段落属性
CGFloat lineSpacing = config.lineSpace;
CGFloat firstLineIndent = config.firstlineHeadIndent;
CGFloat lineIndent = config.headIndent;
CGFloat tailIndent = config.tailIndent;
CTLineBreakMode lineBreakMode = config.lineBreakMode;
CGFloat lineHeightMutiple = config.lineHeightMutiple;
CGFloat paragraphBeforeSpace = config.paragraphBeforeSpace;
CGFloat paragraphAfterSpace = config.paragraphAfterSpace;
CTWritingDirection writeDirect = config.writeDirection;
CTTextAlignment textAlignment = config.textAlignment;
const CFIndex kNumberOfSettings = ;
CTParagraphStyleSetting paragraphSettings[kNumberOfSettings] = {
{ kCTParagraphStyleSpecifierLineSpacingAdjustment, sizeof(CGFloat), &lineSpacing },
{ kCTParagraphStyleSpecifierMaximumLineSpacing, sizeof(CGFloat), &lineSpacing },
{ kCTParagraphStyleSpecifierMinimumLineSpacing, sizeof(CGFloat), &lineSpacing },
{ kCTParagraphStyleSpecifierAlignment, sizeof(textAlignment), &textAlignment },
{ kCTParagraphStyleSpecifierFirstLineHeadIndent, sizeof(firstLineIndent), &firstLineIndent },
{ kCTParagraphStyleSpecifierHeadIndent, sizeof(lineIndent), &lineIndent },
{ kCTParagraphStyleSpecifierTailIndent, sizeof(tailIndent), &tailIndent },
{ kCTParagraphStyleSpecifierLineBreakMode, sizeof(lineBreakMode), &lineBreakMode },
{ kCTParagraphStyleSpecifierLineHeightMultiple, sizeof(lineHeightMutiple), &lineHeightMutiple },
{ kCTParagraphStyleSpecifierLineSpacing, sizeof(lineHeightMutiple), &lineHeightMutiple },
{ kCTParagraphStyleSpecifierParagraphSpacingBefore, sizeof(paragraphBeforeSpace), ¶graphBeforeSpace },
{ kCTParagraphStyleSpecifierParagraphSpacing, sizeof(paragraphAfterSpace), ¶graphAfterSpace },
{ kCTParagraphStyleSpecifierBaseWritingDirection, sizeof(writeDirect), &writeDirect },
}; CTParagraphStyleRef theParagraphRef = CTParagraphStyleCreate(paragraphSettings, kNumberOfSettings); /**
* 字体属性
*/
CGFloat fontSize = config.fontSize;
//use the postName after iOS10
// CTFontRef fontRef = CTFontCreateWithName((CFStringRef)config.fontName, fontSize, NULL);
CTFontRef fontRef = CTFontCreateWithName(NULL, fontSize, NULL);
// CTFontRef fontRef = CTFontCreateWithName((CFStringRef)@"TimesNewRomanPSMT", fontSize, NULL); UIColor * textColor = config.textColor; //设置字体间距
long number = config.wordSpace;
CFNumberRef num = CFNumberCreate(kCFAllocatorDefault, kCFNumberSInt8Type, &number); NSMutableDictionary * dict = [NSMutableDictionary dictionary];
dict[(id)kCTForegroundColorAttributeName] = (id)textColor.CGColor;
dict[(id)kCTFontAttributeName] = (__bridge id)fontRef;
dict[(id)kCTKernAttributeName] = (__bridge id)num;
dict[(id)kCTParagraphStyleAttributeName] = (__bridge id)theParagraphRef; CFRelease(num);
CFRelease(theParagraphRef);
CFRelease(fontRef);
return dict;
}
上述过程为先根据上面提供的段落属性值生成段落属性,然后生成字体、字体间距及字体颜色等属性,然后依次将他们存入字典中。
需要注意的地方是 CTParagraphStyleSetting 为C语言的数组,需在创建时指定数组元素个数。
创建的CoreFoundation库中的对象需要手动释放(大部分到create方法生成的对象)
另外在系统升级到iOS10以后,在调节字体大小重新排版时,变得很慢,用Instrument查了一下,发现
CTFontRef fontRef = CTFontCreateWithName((CFStringRef)config.fontName, fontSize, NULL);
这句代码执行时间很长,查找资料发现是字体造成的,iOS10需要用相应的POST NAME。
2、由属性字符串得到CTFramesetter
// 创建 CTFramesetterRef 实例
CTFramesetterRef framesetter = CTFramesetterCreateWithAttributedString((CFAttributedStringRef)mabStr);
3、由CTFramesetter和绘制区域得到CTFrame
这一步的关键是要得到绘制的区域:
// 获得要绘制的区域的高度
CGSize restrictSize = CGSizeMake(viewWidth, CGFLOAT_MAX);
CGSize coreTextSize = CTFramesetterSuggestFrameSizeWithConstraints(framesetter, CFRangeMake(,), nil, restrictSize, nil);
CGFloat textHeight = coreTextSize.height;
然后生成CTFrame:
//生成绘制的区域
+ (CTFrameRef)createFrameWithFramesetter:(CTFramesetterRef)framesetter frameWidth:(CGFloat)frameWidth stringRange:(CFRange)stringRange orginY:(CGFloat)originY height:(CGFloat)frameHeight
{
CGMutablePathRef path = CGPathCreateMutable();
CGPathAddRect(path, NULL, CGRectMake(, originY, frameWidth, frameHeight)); //此时path的位置值都是coretext坐标系下的值 CTFrameRef frame = CTFramesetterCreateFrame(framesetter, stringRange, path, NULL); CFRelease(frame);
CFRelease(path); return frame;
}
这里需要注意的地方就是代码中注释的地方,在排版过程中使用的坐标都是在coretext坐标系下的,即原点在屏幕左下角。
4、将CTFrame渲染到视图的上下文中
这一步是要在视图类的drawRect方法中将上步得到的CTFrame绘制出来:
- (void)drawRect:(CGRect)rect
{
[super drawRect:rect]; //将坐标系转换为coretext下的坐标系
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetTextMatrix(context, CGAffineTransformIdentity);
CGContextTranslateCTM(context, , self.bounds.size.height);
CGContextScaleCTM(context, 1.0, -1.0); if (ctFrame != nil)
{
CTFrameDraw(ctFrame, context);
}
}
这一步的关键是坐标系的转换,因为ctFrame中包含的绘制区域是在coretext坐标系下,所以在绘制时应先将坐标系转换为coretext坐标系再绘制,才能保证绘制位置正确。
如果渲染时需要精确到行或字体可用CTLine与CTRun,这会在后面介绍。
iOS阅读器实践系列(一)coretext纯文本排版基础的更多相关文章
- 《深入理解Nginx》阅读与实践(四):简单的HTTP过滤模块
一.Nginx的HTTP过滤模块特征 一个请求可以被任意个HTTP模块处理: 在普通HTTP模块处理请求完毕并调用ngx_http_send_header()发送HTTP头部或调用ngx_http_o ...
- 微软云平台媒体服务实践系列 2- 使用动态封装为iOS, Android , Windows 等多平台提供视频点播(VoD)方案
文章微软云平台媒体服务实践系列 1- 使用静态封装为iOS, Android 设备实现点播(VoD)方案 介绍了如何针对少数iOS, Android 客户端的场景,出于节约成本的目的使用媒体服务的静 ...
- (android高仿系列)今日头条 --新闻阅读器 (三) 完结 、总结 篇
从写第一篇今日头条高仿系列开始,到现在已经过去了1个多月了,其实大体都做好了,就是迟迟没有放出来,因为我觉得,做这个东西也是有个过程的,我想把这个模仿中一步一步学习的过程,按照自己的思路写下来,在根据 ...
- (android高仿系列)今日头条 --新闻阅读器 (二)
高仿今日头条 --- 第一篇:(android高仿系列)今日头条 --新闻阅读器 (一) 上次,已经完毕了头部新闻分类栏目的拖动效果. 这篇文章是继续去完好APP 今日头条 这个新闻阅读器的其 ...
- Epub 阅读器 - iOS
因项目需求接触的 EPub 阅读器,前前后后尝试了很多库,最后找到了个相对兼容不错的展开了调试;其中对解压缩和数据加载方面进行了改造优化,使其更加的完美; 其大概原理是首先将 epub 文件解压后得到 ...
- SwiftHN阅读器应用IOS源码
SwiftHN是用Swift语言编写的Hacker News阅读器,同时采用了iOS 8最新的API. <ignore_js_op> <ignore_js_op> 详细说明:h ...
- 一步一步学Silverlight 2系列(18):综合实例之RSS阅读器
一步一步学Silverlight 2系列(18):综合实例之RSS阅读器 概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支 ...
- webApp 阅读器项目实践
这是一个webApp 阅读器的项目,是慕课网的老师讲授的一个实战,先给出项目源码在GitHub的地址:https://github.com/yulifromchina/MobileWebReader. ...
- 基于Core Text实现的TXT电子书阅读器
本篇文章的项目地址基于Core Text实现的TXT电子书阅读器. 最近花了一点时间学习了iOS的底层文字处理的框架Core Text.在网上也参考很多资料,具体的资料在文章最后列了出来,有兴趣的可参 ...
随机推荐
- JavaScript 变量生命周期
变量在它声明时初始化. 局部变量在函数调用时创建,当函数执行完毕后销毁,这和为什么要使用闭包也有一点关系,当然这是另外的话题了. 全局变量在页面(当前页面)关闭后销毁.
- ruby -- 进阶学习(三)Strong Parameters在rail3.0和4.0中的区别
今天coding的时候遇到一个未知的类型,于是用puts logo_params.class查了下数据类型,然后google了一下发现是 Strong Parameter Strong paramet ...
- 《编写高质量代码:改善C#程序的157个建议》源码下载
==== 目录 前 言第一部分 语言篇第1章 基本语言要素 / 2建议1:正确操作字符串 / 2建议2:使用默认转型方法 / 6建议3:区别对待强制转型与as和is / 9建议4:TryParse比P ...
- MVC显示Base64图片
本篇演示ASP.NET MVC应用程序,显示Base64图片. Insus.NET浏览网页,发现一个站点http://www.base64-image.de/ 想起以前也有实现过<如何把数据流转 ...
- Erlang进程的Link机制
这篇文章还不是最终版,有时间时,我会再来补充完善. 什么是link Erlang程序基于进程建模,进程之间的交互机制有收发消息,link和monitor.其中,收发消息通常用于正常的进程间通讯,而li ...
- python 在sublime 中的配置
首先可以先装package control 方法——按ctrl+`,然后在命令行里复制粘贴以下代码, import urllib2,os;pf='Package Control.sublime-pac ...
- HT图形组件设计之道(四)
在<HT图形组件设计之道(二)>我们展示了HT在2D图形矢量的数据绑定功能,这种机制不仅可用于2D图形,HT的通用组件甚至3D引擎都具备这种数据绑定机制,此篇我们将构建一个3D飞机模型,展 ...
- NVelocity的基本用法
NVelocity常用语法指令 默认情况下,NVelocity解析是不分大小写的,当然可以通过设置runtime.strict.math=true,采用严格解析模式. 严格区分大小写有时候还是挺有用途 ...
- 转载:第四弹!全球首个微信小程序(应用号)开发教程!通宵吐血赶稿,每日更新!
感谢大家支持!博卡君周末休息了两天,今天又回到战斗状态了.上周五晚上微信放出官方工具和教程了,推荐程序猿小伙伴们都去试一试,结合教程和代码,写写自己的 demo 也不错. 闲话不多说,开始更新! 第七 ...
- 写出优美代码的两个方式:一步到位VS迭代优化
最近把手头这个安卓APP的所有事务性方法都写完了,有了以下体会,新手体会,老鸟轻拍 想写成优美代码的人一般都会有这样的想法: 一定要在写每一句代码,写每一个方法,构造每一个类的时候,都要记得优化: ...