<dl id='4zy9'></dl>

<fieldset id='4zy9'></fieldset>
<i id='4zy9'></i>

  1. <span id='4zy9'></span>

      1. <tr id='4zy9'><strong id='4zy9'></strong><small id='4zy9'></small><button id='4zy9'></button><li id='4zy9'><noscript id='4zy9'><big id='4zy9'></big><dt id='4zy9'></dt></noscript></li></tr><ol id='4zy9'><table id='4zy9'><blockquote id='4zy9'><tbody id='4zy9'></tbody></blockquote></table></ol><u id='4zy9'></u><kbd id='4zy9'><kbd id='4zy9'></kbd></kbd>

        <code id='4zy9'><strong id='4zy9'></strong></code>
        <acronym id='4zy9'><em id='4zy9'></em><td id='4zy9'><div id='4zy9'></div></td></acronym><address id='4zy9'><big id='4zy9'><big id='4zy9'></big><legend id='4zy9'></legend></big></address><i id='4zy9'><div id='4zy9'><ins id='4zy9'></ins></div></i>
          <ins id='4zy9'></ins>

          轻量富文本异步绘制框架

          • 时间:
          • 浏览:13
          • 来源:124软件资讯网

            前言

            若是遇到上面一个需求, 你会怎么处置惩罚, 若干个 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)(必须指定attachSize属性)、视图(CALayer/UIView)

            • 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(仅枚举了三种, 其他值也有差别效果)

            图片属性

            • attachSize 图片尺寸, 默以为图片自己尺寸, 会凭据图片缩放(2x 3x)自动调整

            • attachAlign 图片对齐模式, 0为默认, 基准线对齐. 1为居中对齐至特定字体巨细 参看 ZJTextAttachAlign

            段落属性

            • 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, 都在子线程, 究竟处置惩罚的逻辑比系统的多.

            4. 总体性能与 YYText 相仿

            安装

            Github

            ZJAttributedText

            Pod