V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
iOS 开发实用技术导航
NSHipster 中文版
http://nshipster.cn/
cocos2d 开源 2D 游戏引擎
http://www.cocos2d-iphone.org/
CocoaPods
http://cocoapods.org/
Google Analytics for Mobile 统计解决方案
http://code.google.com/mobile/analytics/
WWDC
https://developer.apple.com/wwdc/
Design Guides and Resources
https://developer.apple.com/design/
Transcripts of WWDC sessions
http://asciiwwdc.com
Cocoa with Love
http://cocoawithlove.com/
Cocoa Dev Central
http://cocoadevcentral.com/
NSHipster
http://nshipster.com/
Style Guides
Google Objective-C Style Guide
NYTimes Objective-C Style Guide
Useful Tools and Services
Charles Web Debugging Proxy
Smore
Syik
V2EX  ›  iDev

开源一个轻量富文本异步绘制框架

  •  
  •   Syik · 2018-06-29 10:58:56 +08:00 · 6034 次点击
    这是一个创建于 2341 天前的主题,其中的信息可能已经有所发展或是发生改变。

    前言

    如果遇到上面一个需求, 你会怎么处理, 若干个 UILabel + UIImageView? NSAttributedString 拼接? CoreText?

    我相信不论是哪种方式代码量都不小, 并且难以复用, 其他语言写富文本是那么轻松, Android 天生支持简单 HTML, RN(JS) 标签套标签, 而只要用过 iOS 中的富文本都会觉得难用... 目前业界功能强大、较为好用的是 YYText, 但设计思想是尽可能与 UILabel、UITextView 相似, 所以相对使用也不是特别简单, 而且框架较重. 基于现状开发了一套轻量的框架, 满足大部分富文本需求, 并且提供了手势响应、 绘制回调、 图文对齐、CoreText 属性扩展、 支持网络图片、 异步绘制性能优化, 最重要的是使用简单, 通过链式语法轻松写出一篇图文混排文本.

    示例说明

    如图所示一篇图文混排, 涉及到字体, 颜色, 字间距, 行间距, 图片对齐, 文字对齐, 描边等等属性, 还有网络图片与本地图片混排, 手势响应等需求, 使用本框架可以下面这样实现:

        //...省略常量声明
    
        //标题
        title.font(titleFont).color(titleColor).onClicked(titleOnClicked).onLayout(titleOnLayout);
        //首段
        firstPara.color(firstParaColor).align(@0);
        //图片需要用一个空字符串起头
        NSString *webImageString = @"".append(webImageURL).font(separateLineFont).minLineHeight(@100);
        //分割线
        separateLine.font(separateLineFont).strokeColor(separateLineColor).strokeWidth(@1);
        //本地图片
        NSString *locolImageString = @"".append(locolImage);
        //最后一段
        lastPara.font(lastParaFont).align(@1);
        //书名
        bookName.font(bookNameFont).color(bookNameColor).onClicked(bookOnClicked).align(@1);
        //引用
        quote.color(quoteColor).letterSpace(@0).minLineSpace(@8).align(@0);
        
        //设置全局默认属性, 优先级低于指定属性
        NSString *defaultAttributes = @"".entire()
        .maxSize(maxSize).align(@2).letterSpace(@3).minLineHeight(@20).maxLineHeight(@20).imageAlign(@1).onClicked(textOnClicked).imageSize(imageSize);
        
        //拼接
        title.append(firstPara).append(webImageString).append(separateLine).append(locolImageString).append(lastPara).append(bookName).append(quote)
        //设置默认属性
        .append(defaultAttributes)
        //绘制 View
        .drawView(^(UIView *drawView) {
            [self.view addSubview:drawView];
        });
    

    甚至可以这样实现:

        //...省略常量声明
    
        @""
        //拼接全文
        .append(title).font(titleFont).color(titleColor).onClicked(titleOnClicked).onLayout(titleOnLayout)
        .append(firstPara).color(firstParaColor).align(@0)
        .append(webImageURL).font(separateLineFont).minLineHeight(@100)
        .append(separateLine).font(separateLineFont).strokeColor(separateLineColor).strokeWidth(@1)
        .append(locolImage)
        .append(lastPara).font(lastParaFont).align(@1)
        .append(bookName).font(bookNameFont).color(bookNameColor).onClicked(bookOnClicked).align(@1)
        .append(quote).color(quoteColor).letterSpace(@0).minLineSpace(@8).align(@0)
        //设置默认属性
        .entire().maxSize(maxSize).align(@2).letterSpace(@3).minLineHeight(@20).maxLineHeight(@20).imageAlign(@1).onClicked(textOnClicked).imageSize(imageSize)
        //绘制
        .drawView(^(UIView *drawView) {
            [self.view addSubview:drawView];
        });
    
    

    核心方法与属性

    对 NSString 的扩展

    核心方法
    • append(id content)

        拼接
        content 可以是文本(NSString)、图片(UIImage)、图片链接(NSURL)(必须指定 imageSize 属性)
      
    • entire()

        设置整段富文本
        优先级低于指定属性, 较为重要的属性 maxSize 设置绘制约束, 部分段落属性只在整段中设置生效
      
    • drawLayer(^(CALayer *drawLayer)completion)

        绘制 layer, 无法响应手势
      
    • drawView(^(UIView *drawView)completion)

        绘制 View, 可响应手势
      
    属性
    通用属性
    • verticalOffset 垂直偏移
    • onClicked 点击回调
    • onLayout 展示回调
    • cacheFrame 缓存该段文本绘制位置
    字符串属性
    • font 字体: 文字字体 /图片居中对齐字体
    • color 颜色
    • letterSpace 字间距
    • strokeWidth 描边宽度, 整数为镂空, Color 不生效; 负数 Color 生效
    • strokeColor 描边颜色
    • verticalForm 文字绘制随文字书写方向, 默认 否(0), 是(非 0)
    • underline 下划线类型, 整形, 0 为 none, 1 为细线 2 为加粗 9 为双条 参考 CTUnderlineStyle(仅枚举了三种, 其他值也有不同效果)
    图片属性
    • imageSize 图片尺寸, 默认为图片本身尺寸, 会根据图片缩放(2x 3x)自动调整
    • imageAlign 图片对齐模式, 0 为默认, 基准线对齐. 1 为居中对齐至特定字体大小 参看 ZJTextImageAlign
    段落属性
    • maxSize 绘制的约束尺寸, 默认不限制
    • minLineSpace 最小行间距
    • maxLineSpace 最大行间距
    • minLineHeight 最小行高
    • maxLineHeight 最小行高
    • align 对齐, 整形, 0 为默认靠左 1 为靠右 2 为居中, 参考 CTTextAlignment
    • lineBreakMode 对齐, 整形, 参考 NSLineBreakMode

    性能

    总体采用 CoreText + 异步绘制图片完成, 理论上性能会比较高, 经过测试如下数据供参考:

    内容: 一段文本加上两张图片

    机型: iPhone 6

    测试结果:

    常规(使用 NSAttributedString + UILabel)过程: 创建->显示(绘制) 常规分析:

    1. 主线程代码在 28ms 左右. (主线程代码开始 至 结束耗时)
    2. UILabel 显示(绘制)耗时在 42ms 左右. (addSubview 至 drawRect 耗时)
    3. 综合耗时 70ms 左右, 全部在主线程

    异步绘制(本框架)过程: 创建->异步绘制->显示 异步绘制分析:

    1. 主线程(创建)代码在 28ms 左右. (主线程代码开始 至 结束耗时)
    2. 创建(主线程) + 异步绘制耗时 84ms 左右. (主线程代码开始 至 绘制出图片回调)
    3. 由 1、2 得出子线程绘制耗时 56ms 左右, 另外经过多次试验(大段文字绘制)得出绘制复杂的段落也耗时增长较少
    4. 显示耗时 0.75 ms 左右. (addSubview 至 drawRect 耗时)
    5. 综合耗时 85ms 左右, 其中主线程 29ms, 子线程 56ms

    结论:

    1. 相较于常规方式降低了主线程压力 70ms -> 29ms
    2. 越复杂的文本收益越高(多控件合一, 异步绘制), 上图中大段富文本绘制时间也只多了 15ms, 耗时增长少
    3. 总体耗时增加了 15ms, 都在子线程, 毕竟处理的逻辑比系统的多.

    安装

    Github

    ZJAttributedText

    Pod

    pod 'ZJAttributedText'
    

    本框架依赖 SDWebImage (几乎所有 App 都集成了, 可以共用一套缓存逻辑)

    尾巴

    内部实现代码不多, 几乎所有步骤都添加了注释, 如果需要学习 CoreText, 异步绘制, 链式语法, 还算是个不错的 Demo, 如果大家感兴趣, 可以补充下 CoreText 相关内容, 这部分网上的资料都比较老, 错误也比较多. 欢迎 issue 与 star~

    1 条回复    2018-07-01 13:09:41 +08:00
    xi_lin
        1
    xi_lin  
       2018-07-01 13:09:41 +08:00
    赞一个,很用心了
    可惜 iOS 的样式不好抽离复用
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3655 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 04:32 · PVG 12:32 · LAX 20:32 · JFK 23:32
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.