zoukankan      html  css  js  c++  java
  • 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
     
    官网参考资料:
     
    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直接设置:
     
    b.然后开始写图文混排了
    参考代码:
    NSMutableAttributedString *string;
    通过插入NSTextAttachment设置image对象,其中NSTextAttachment可以继承重写方法实现修改插入内容大小。
    这里实际上就是找到一个NSRange位置然后插入图片,常见的插入表情。然后表情转换成字符串输出出来。字符串再转换成图片输出。
    我们可以遍历输入的字符串,通过NSTextStorage设置字符串的字体,进行自定义规则处理等,例如,##进行标题大写,高亮等。
    通过NSLayoutManager来设置输入文本内容行数,文本段的缩进规则,行间距等。
    通过NSTextContainer来设置文字的布局方式,例如图文环绕方式,等。
    基本的Text Kit 功能这样子了,基本能满足富文本的所有要求了。自己排版,按照自己项目的业务逻辑做一些事情。
     
    最后还是附加开头提到的一些库,阅读好的源码分析比什么都好:
    M80AttributedLabel:基本的TextKit封装,代码易懂,例子非常好用简单,试过效果挺好,需要做一些性能优化处理。
    DTCoretext: CoreText封装,解析正规的HTML源码,展示出来成富文本,非常强大,如果安卓端和IOS使用同一套接口的时候,就非常好用了。兼容问题。
     
    部分参考链接:
    ⚠:DTCoreText 运行的时候有提示需要先进行:git submodule init  update 
     
     
     
  • 相关阅读:
    font-weight(字体粗细)属性
    Node.js入门(三)
    js难点问题
    Node.js入门(二)
    Node.js入门(一)
    Reactjs的Controller View模式
    智能社的邀请码
    react native 学习资料汇总
    jquery操作select
    分享
  • 原文地址:https://www.cnblogs.com/Lxiaolong/p/4431589.html
Copyright © 2011-2022 走看看