iOS富文本
背景:前些天突然想做一个笔记本功能,一开始,觉得挺简单的呀,一个UITextView,网络缓存也不干了,直接本地NSUserDefault存储,然后完事了,美工,弄几张好看的图片,加几个动画,也就这样了。接着,按照惯例,查看已有的备忘录软件,其app store知名的软件:Weiconote等。
才发现没那么简单。这里先不考虑图文混排的问题,首先面对的就是:键盘隐藏之后,文字的位置移动问题啦。细心的体验后发现:系统的备忘录,已经一些做得好的软件,都会进行一些处理,例如:
1.当我编辑的时候,光标应该是一直不被键盘高度隐藏的才对。
2.我在文字中间进行编辑的话,编辑完成隐藏键盘,UITextView的文字位置这个时候应该是我刚才编辑的部分。
于是开始写:
1. 查看了暴露出来的API,属性,不被键盘高度遮住,frame,contentInset,textContainerInset,都可以做到。
根据键盘的本身的 notification ,或者UITextView delegate ,能轻易做到。
部分代码:
2.解决方法比较麻烦,查看了所有的api,就只有父类的这个api有用的:
- (void)scrollRectToVisible:(CGRect)rect animated:(bool)animate;
接下来的问题来了,根据光标当前的位置高度,手动计算属性,然后,获取要移动的位置,进行跳转。因为默认的情况是:只要键盘隐藏了,会自动跳到UITextView的最前面的。至于获取光标位置,以及计算移动的位置的问题,可以很快查到资料的。
这里的这位哥,也遇到同样的问题,解决方式也是一样的。 http://petersteinberger.com/blog/2014/fixing-uitextview-on-ios-7/ 里边也已经有了github源码分享。(不做重复的事情)
事实上,问题2最好的解决方式是:自己根据TextKit封装一个UITextView...
上面的背景就是这样了,解决了问题后,发现,为什么不顺便把图文混排的问题也一次性解决了。一直以来,富文本编辑都是没有深入的,之前也是直接用的开源代码,或者UIWebView,总是心里不踏实,卡顿的情况偶尔发生,非常不开心。于是,接下来,才是今天主要想分享的东西了:富文本问题。
关键词:coretext textkit
第三方库分析:DTCoretext M80AttributedLabel FastText EGOText
官网参考资料:
UITextKit: https://developer.apple.com/library/ios/documentation/StringsTextFonts/Conceptual/TextAndWebiPhoneOS/Introduction/Introduction.html
CoreText: https://developer.apple.com/library/ios/documentation/StringsTextFonts/Conceptual/CoreText_Programming/Introduction/Introduction.html#//apple_ref/doc/uid/TP40005533
TextKit能让我们自己手动管理字体的颜色,样式(Text Layout),触摸事件,排版,图文的混排规则。
Textkit是基于CoreText的,与WebKit是两个不同的分支。我主要查看的也是TextKit,用coreText太麻烦了。而它们之间的关系逻辑如下图所示:
具体到显示上,渲染的流程是先从存储的NSTextStorage中获取text以及它的attributes,再经过NSLayoutManager布局显示容器包括形状,大小等,再经过NSTextContainer布局呈具体的显示,最后展示在UI上。渲染和实现的流程:
这里注意描述:By using multiple text containers, each with an associated text view, more complex layout arrangements are possible.
到了这里,基本心理有个谱了。大致清楚这个逻辑了。接下来细分一下:
a.这里,先说一下具体到文本的样式,先上一张官方的说明图:
我们可以设置文字的字体各种细节,段落排版,对其方式,缩进规则等。
关于样式:自带有六种,通过UIFont直接设置:
UIFontTextStyleHeadline, UIFontTextStyleSubheadline, UIFontTextStyleBody, UIFontTextStyleFootnot, UIFontTextStyleCaption1, UIFontTextStyleCaption2
b.然后开始写图文混排了
参考代码:
NSMutableAttributedString *string;
通过插入NSTextAttachment设置image对象,其中NSTextAttachment可以继承重写方法实现修改插入内容大小。
这里实际上就是找到一个NSRange位置然后插入图片,常见的插入表情。然后表情转换成字符串输出出来。字符串再转换成图片输出。
我们可以遍历输入的字符串,通过NSTextStorage设置字符串的字体,进行自定义规则处理等,例如,##进行标题大写,高亮等。
通过NSLayoutManager来设置输入文本内容行数,文本段的缩进规则,行间距等。
通过NSTextContainer来设置文字的布局方式,例如图文环绕方式,等。
基本的Text Kit 功能这样子了,基本能满足富文本的所有要求了。自己排版,按照自己项目的业务逻辑做一些事情。
最后还是附加开头提到的一些库,阅读好的源码分析比什么都好:
M80AttributedLabel:基本的TextKit封装,代码易懂,例子非常好用简单,试过效果挺好,需要做一些性能优化处理。
DTCoretext: CoreText封装,解析正规的HTML源码,展示出来成富文本,非常强大,如果安卓端和IOS使用同一套接口的时候,就非常好用了。兼容问题。
部分参考链接:
http://esoftmobile.com/2013/10/17/text-kit%E8%BF%9B%E9%98%B6/#more
https://github.com/xiangwangfeng/M80AttributedLabel
https://github.com/Cocoanetics/DTCoreText
⚠:DTCoreText 运行的时候有提示需要先进行:git submodule init update
posted on 2015-04-16 11:35 yanshanLove 阅读(...) 评论(...) 编辑 收藏