CN103678267B - 一种图文混合内容的排版和渲染方法及系统 - Google Patents

Abstract

本发明提供一种通过分片排版和渲染来提高内存使用率的图文混合内容的排版和渲染方法及系统。该方法包括：利用服务器解析内容，将文本内容分片并储存为一个数组，将图片内容分片，标记为图片类型，插入到数组中对应的位置，并储存对应的图片数据；应用软件向服务器请求内容数据；服务器将对应的内容数组发送给应用软件；应用软件对内容数组中的各个分片进行排版和渲染，当该分片为文本段落时，利用CoreText对其进行排版，并将该段落作为表格的一项添加到UITableView进行渲染；当该分片为图片时，利用一个默认的图片作为占位符，并作为表格的一项添加到UITableView进行渲染，并向服务器请求内容中的图片数据，且在收到图片数据后，用收到的图片替换默认的图片。

Description

一种图文混合内容的排版和渲染方法及系统

技术领域

本发明涉及网络技术，尤其涉及一种IOS系统中利用UITableView和CoreText进行图文混合内容分片排版和渲染的方法和系统。

背景技术

现有的一种图文混合内容的排版和渲染实现方案是由服务器把包含图片链接的文字信息转换成适合智能终端展示的特定CSS（Cascading Style Sheets，层叠样式表）样式的HTML格式的网页，存储到服务器。用户使用终端的应用软件向服务器请求，获取到HTML格式的内容之后，应用软件把内容传递给IOS系统（由苹果公司开发的手持设备的软件操作系统）的用于展示网页内容的视图控件UIWebView，UIWebView会对文字进行自动排版和渲染。如果应用软件发现内容中有图片链接，会立即再次去向服务器请求图片数据，在收到图片数据后，再把图片数据发送给UIWebView，排版和渲染出图片。如果需要对视图进行图片插入等操作，需要执行JavaScript脚本操作内存中的内容DOM（Document Object Model，文档对象模型)树来实现。

然，上述方案的仍有以下不足：（1）内存效率较低：UIWebView视图控件较大，本身的运行就要消耗较多的内存资源，而且将UIWebView视图控件销毁时，其占用的内存不能马上释放出来。（2）排版效率较低且排版之后的修改调整不灵活：UIWebView所展示内容的排版方式必须要在排版前通过HTML的CSS样式设定好，排版过程由UIWebView内部自动进行，不可进行干预和调整，排版之后的调整必须通过执行JavaScript来实现。

现有的另外一种实现方案是由服务器把内容中的文本和图片数据抽取出来，并且标记图片在文本中的对应位置，储存到服务器。用户使用终端的应用软件向服务器请求，获取到文本内容之后，如果发现文本中有图片标记，先用一个默认的图片插入替代，然后开始对整篇文本调用CoreText（IOS系统中用于对文字进行排版和渲染的系统软件模块）进行排版和渲染。在此同时，从网络向服务器请求文本中标记的图片数据，等收到图片数据之后，再替换文本中默认的图片。

然，上述方案的内存效率也较低：由于是一次性对所有文本进行排版和渲染，如果文本较长，包含该文本所用的视图区域将会很大，会占用很大的内存资源；如果文本中的图片很多，也会占用很大的内存资源，严重时会因为内存耗尽而导致应用软件退出。

发明内容

有鉴于此，有必要提供一种可提高内存使用效率、且排版后方便修改的图文混合内容的排版和渲染方法及系统。

上述的图文混合内容的排版和渲染方法及系统是通过以下技术方案实现的：

一种图文混合内容的排版和渲染方法，其包括：服务器对由内容源获取的内容进行解析，将文本内容按段落分片并储存为一个数组，将图片内容分片，标记为图片类型，插入到数组中对应的位置，并储存对应的图片数据；应用软件向服务器请求内容数据；服务器根据应用软件的请求查找对应的内容数组，将只含文本段落和图片标记的内容数组发送给应用软件；应用软件在收到内容数组后依次对每个分片进行排版和渲染，当该分片为文本段落时，利用文字排版和渲染模块对该文本段落进行排版，并将该文本段落作为表格的一项添加到表格视图控件进行渲染；当该分片为图片时，利用一个默认的图片作为占位符，并作为表格的一项添加到表格视图控件进行渲染，并向服务器请求内容中的图片数据，且在图片数据下载成功后，用收到的图片替换默认的图片。

一种图文混合内容的排版和渲染系统，包括服务器和应用软件，该应用软件包括文字排版和渲染模块及表格视图控件。该服务器用于对由内容源获取的内容进行解析，将文本内容按段落分片并储存为一个数组，将图片内容分片，标记为图片类型，插入到数组中对应的位置，并储存对应的图片数据。该服务器还根据应用软件的请求查找对应的内容数组，将只含文本段落和图片标记的内容数组发送给应用软件。该应用软件用于向服务器请求内容数据，并在收到内容数组后依次对每个分片进行排版和渲染，该文字排版和渲染模块用于在该分片为文本段落时，对该文本段落进行排版，该表格视图控件用于将该文本段落作为表格的一项添加到表格视图控件进行渲染。该应用软件还用于在该分片为图片时，利用一个默认的图片作为占位符，该表格视图控件还用于将该图片占位符作为表格的一项添加到表格视图控件进行渲染。该应用软件还用于在该分片为图片时，向服务器请求内容中的图片数据，并在图片数据下载成功后，用收到的图片替换默认的图片。

本发明的图文混合内容的排版和渲染方法和系统，利用表格视图控件及文字排版和渲染模块进行图文混合内容的分片排版和渲染，对于含有较长的文本和含有较多图片的内容，可以做到低内存占用、高速排版和渲染，具有较高的系统稳定性，减少了用户的等待时间。利用系统的表格视图控件分片显示内容，可以随时动态调整内容的各个段落。利用表格视图控件进行视图的自动动态调整，使得代码量大大减少，代码结构简单清晰，后期的修改和维护非常容易。

为让本发明的上述和其他目的、特征和优点能更明显易懂，下文特举较佳实施例，并配合所附图式，作详细说明如下。

附图说明

图1为本发明所揭示的一种图文混合内容的排版和渲染方法的流程图。

图2为本发明所揭示的一种图文混合内容的排版和渲染系统的示意图。

具体实施方式

为更进一步阐述本发明为实现预定发明目的所采取的技术手段及功效，以下结合附图及较佳实施例，对依据本发明提出的图文混合内容的排版和渲染方法及系统的具体实施方式、结构、特征及其功效，详细说明如后。

图1所示为一种图文混合内容的排版和渲染方法的流程示意图，该方法用于由苹果公司开发的手持设备的软件操作系统IOS中。如图1所示，该方法包括：

步骤S 101：服务器对由内容源获取的HTML格式的内容进行解析，将文本内容按段落分片并储存为一个数组，数组中的每个数组项对应一个文字段落。同时，服务器也将图片内容分片，并标记为图片类型，插入到数组中对应的位置。然后，服务器会向内容源请求获取对应的图片数据，并将获取的图片数据储存到服务器。

步骤S102：应用软件向服务器请求内容数据。

步骤S103：服务器根据应用软件的请求查找对应的内容数组，将对应的内容数组（只含文本段落和图片标记，不含图片数据）发送给应用软件。

步骤S104：应用软件在收到内容数组后依次对每个分片进行排版和渲染。当该分片为文本段落时，利用文字排版和渲染模块CoreText对该文本段落进行排版，当一个排版完成之后，利用表格视图控件UITableView将该文本段落作为表格的一项（对应一个UITableViewCell视图控件示例）添加到UITableView进行渲染。这样，UITableView222会自动对排版好的分片用设定好的基于CoreText的渲染代码进行渲染显示。用户马上就能看到一段文字。

当该分片为图片时，应用软件先用一个默认的图片作为占位符，并作为表格的一项添加到UITableView进行渲染，这样，用户会马上看到默认的图片，知道这里会有一张图片将要显示。

与此同时，应用软件会向服务器请求内容中的图片数据，且在图片数据下载成功后，用收到的图片替换默认的图片，这样用户就能马上能看到显示的图片。

具体而言，在步骤S102至S104中，当应用软件向服务器请求内容数据时，会先开启一个子任务，向服务器请求下载预先下载好的对应的内容数组。开启子任务是为了不减慢或阻塞负责界面绘制和更新的主线程。

应用软件的子任务在收到内容数组后，开始遍历内容数组，在子任务上依次对每个分片进行排版和渲染。

当该分片为文本段落时，该子任务调用CoreText的排版接口按照应用软件设定的格式（文本排版宽度、设定字体、字体大小、字体颜色、字间距等）对该文本段落进行排版，排好后得到该文本段落的多个CTLine类型的数据对象（每个CTLine数据对象对应文本段落的一行），将该段落的CTLine数据对象作为数组的一项保存到一个内容数组中，作为UITableView的一个数据源，内容数组的每一项对应一个UITableViewCell视图控件实例。然后，应用软件的子任务通知主线程有新的段落数据到达，把界面的绘制和更新交由主线程进行，子任务这个时候不会阻塞，会继续对下一个分片进行处理。主线程在下一轮执行循环中构造一个UITableViewCell对象，将该文本段落添加到UITableView中进行渲染。这样，一个新的段落添加到UITableView之后，就会马上渲染显示给用户。

当该分片为图片时，该子任务先构造一个图片显示控件UIImageView，利用一个默认的图片作为占位符，并通知主线程有新的图片占位符。主线程在下一轮执行循环中构造一个UITableViewCell对象，把该图片占位符加入到UITableViewCell，然后添加到UITableView中进行渲染。用户会立即看到一个图片占位符出现。

应用软件在开启子任务获取服务器的内容数组时，如果发现内容中有图片，则另外启动一个子任务向服务器请求当前内容中的图片数据，在收到图片数据之后，通知主线程有图片数据到达，主线程在下一轮执行循环中用下载的图片替换对应的UITableViewCell中的图片，并对UITableViewCell重新计算高度，刷新UITableView。用户会立即看到新下载的图片。

本发明中的表格视图控件UITableView可以复用UITable ViewCell对象，动态生成当前屏幕区域上可见的UITableViewCell视图的内容，并且只对当前屏幕区域上可见的UITableViewCell视图进行绘制。当手指滑动屏幕浏览内容时，UITableView能自动释放移出屏幕可见区域外的UITableViewCell视图的内容，并添加和绘制新的可见的UITableViewCell视图的内容。也就是说，UITableView只需创建当前屏幕上可见区域的UITableViewCell视图的内容。当内容文本很长的时候，也只有当前可见段落的视图被创建并渲染，而可以节省内存。

另外，应用软件在把文本段落添加到UITableView之前，已经做完了该文本段落的排版工作，这样，在UITableView动态生成和绘制UITableViewCell时，只需调用CoreText进行渲染绘制，而且只需要绘制可见的UITableViewCell视图，而可以节省渲染所需要的时间。

综上所述，本发明的图文混合内容的排版和渲染方法中，利用UITableView和CoreText进行图文混合内容的分片排版和渲染，对于含有较长的文本和含有较多图片的内容，可以做到低内存占用、高速排版和渲染，具有较高的系统稳定性，减少了用户的等待时间。本方法利用系统的UITableView来分片显示内容，可以随时动态调整内容的各个段落。利用UITableView进行视图的自动动态调整，使得代码量大大减少，代码结构简单清晰，后期的修改和维护非常容易。

图2为本发明所揭示的一种图文混合内容的排版和渲染系统的示意图，该图文混合内容的排版和渲染系统用于由苹果公司开发的手持设备的软件操作系统IOS中。如图2所示，本发明的图文混合内容的排版和渲染系统包括服务器210和应用软件220。其中，应用软件220包括文字排版和渲染模块CoreText221及表格视图控件UITableView222。

服务器210用于对由内容源获取的HTML格式的内容进行解析，将文本内容按段落分片并储存为一个数组，数组中的每个数组项对应一个文字段落。同时，该服务器210也将图片内容分片，并标记为图片类型，插入到数组中对应的位置。然后，服务器210会再次向内容源获取对应的图片数据，并将对应的图片数据储存到服务器210。

应用软件220用于向服务器210请求内容数据。

服务器210还用于根据应用软件220的请求查找对应的内容数组，将只含文本段落和图片标记且不含图片数据的内容数组发送给应用软件220。

应用软件220还用于在收到内容数组后依次对每个分片进行排版和渲染。CoreText221用于在该分片为文本段落时，对该文本段落进行排版。UITableView222用于将该文本段落作为表格的一项添加到UITableView222进行渲染。

应用软件220还用于在该分片为图片时，利用一个默认的图片作为占位符，UITableView222还用于将该图片占位符作为表格的一项添加到UITableView222进行渲染。

应用软件220还用于在该分片为图片时，向服务器210请求内容中的图片数据，并在图片数据下载成功后，用收到的图片替换默认的图片。

具体而言，应用软件220在向服务器210请求内容数据时，会先开启一个子任务，向服务器210请求下载预先下载好的对应的内容数组。开启子任务是为了不减慢或阻塞负责界面绘制和更新的主线程。

该应用软件220的子任务在收到内容数组后，开始遍历内容数组，在子任务上依次对每个分片进行排版和渲染。

当该分片为文本段落时，该子任务调用CoreText221的排版接口按照应用软件220设定的格式（文本排版宽度、设定字体、字体大小、字体颜色、字间距等）对该文本段落进行排版，排好后得到与该文本段落的各行一一对应的多个CTLine类型的数据对象，将该段落的CTLine数据对象作为数组的一项保存到一个内容数组中，作为UITableView222的一个数据源，内容数组的每一项对应一个UITableViewCell视图控件实例。然后，应用软件220的子任务通知主线程有新的段落数据到达，把界面的绘制和更新交由主线程进行，子任务这个时候不会阻塞，会继续对下一个分片进行处理。主线程在下一轮执行循环中构造一个UITableViewCell对象，将该文本段落添加到UITableView222中进行渲染。

当该分片为图片时，该子任务先构造一个图片显示控件UIImageView，利用一个默认的图片作为占位符，并通知主线程有新的图片占位符。主线程在下一轮执行循环中构造一个UITableViewCell对象，把该图片占位符加入到UITableViewCell，然后添加到UITableView222中进行渲染。

应用软件220在开启子任务获取服务器210的内容数组时，如果发现内容中有图片，则另外启动一个子任务向服务器210请求当前内容中的图片数据，在收到图片数据之后，通知主线程有图片数据到达，主线程在下一轮执行循环中用下载的图片替换对应的UITableViewCell中的图片，并对UITableViewCell重新计算高度，刷新UITableView222。

本发明中的表格视图控件UITableView222可以复用UITableViewCell对象，动态生成当前屏幕区域上可见的UITableViewCell视图的内容，并且只对当前屏幕区域上可见的UITableViewCell视图进行绘制。当手指滑动屏幕浏览内容时，UITableView222能自动释放移出屏幕可见区域外的UITableViewCell视图的内容，并添加和绘制新的可见的UITableViewCell视图的内容。也就是说，UITableView222只需创建当前屏幕上可见区域的UITableViewCell视图的内容。当内容文本很长的时候，也只有当前可见段落的视图被创建并渲染，而可以节省内存。

另外，应用软件220在把文本段落添加到UITableView222之前，已经做完了该文本段落的排版工作，这样，在UITableView222动态生成和绘制UITableViewCell时，只需调用CoreText221进行渲染绘制，而且只需要绘制可见的UITableViewCell视图，而可以节省渲染所需要的时间。

综上所述，本发明的图文混合内容的排版和渲染系统利用UITableView222和CoreText221进行图文混合内容的分片排版和渲染，对于含有较长的文本和含有较多图片的内容，可以做到低内存占用、高速排版和渲染，具有较高的系统稳定性，减少了用户的等待时间。利用系统的UITableView222来分片显示内容，可以随时动态调整内容的各个段落。利用UITableView222进行视图的自动动态调整，使得代码量大大减少，代码结构简单清晰，后期的修改和维护非常容易。

以上所述，仅是本发明的较佳实施例而已，并非对本发明作任何形式上的限制，虽然本发明已以较佳实施例揭示如上，然而并非用以限定本发明，任何本领域技术人员，在不脱离本发明技术方案范围内，当可利用上述揭示的技术内容作出些许更动或修饰为等同变化的等效实施例，但凡是未脱离本发明技术方案内容，依据本发明的技术实质对以上实施例所作的任何简介修改、等同变化与修饰，均仍属于本发明技术方案的范围内。

Claims (10)

1.一种图文混合内容的排版和渲染方法，其特征在于，该方法包括：

服务器对由内容源获取的内容进行解析，将文本内容按段落分片并储存为一个数组，将图片内容分片，标记为图片类型，插入到数组中对应的位置，并储存对应的图片数据；

应用软件向服务器请求内容数据；

服务器根据应用软件的请求查找对应的内容数组，将只含文本段落和图片标记的内容数组发送给应用软件；

应用软件在收到内容数组后依次对每个分片进行排版和渲染，当该分片为文本段落时，利用文字排版和渲染模块对该文本段落进行排版，并将该文本段落作为表格的一项添加到表格视图控件进行渲染；

当该分片为图片时，利用一个默认的图片作为占位符，并作为表格的一项添加到表格视图控件进行渲染，并向服务器请求内容中的图片数据，且在图片数据下载成功后，用收到的图片替换默认的图片。

2.如权利要求1所述的图文混合内容的排版和渲染方法，其特征在于：在将文本内容按段落分片并储存为一个数组的步骤中，每个数组项对应一个文字段落。

3.如权利要求2所述的图文混合内容的排版和渲染方法，其特征在于：

应用软件向服务器请求内容数据时，先开启一个子任务，向服务器请求下载预先下载好的对应的内容数组；

应用软件的子任务在收到内容数组后依次对每个分片进行排版和渲染，当该分片为文本段落时，该子任务利用文字排版和渲染模块对该文本段落进行排版，得到与该文本段落的各行相对应的多个数据对象，将该段落的数据对象作为数组的一项保存到一个内容数组中，作为表格视图控件的一个数据源，并通知主线程有新的段落数据到达，主线程在下一轮执行循环中构造一个表格项对象，将该文本段落添加到表格视图控件中进行渲染，其中，一个表格项对应所述表格的一项；

当该分片为图片时，该子任务先利用一个默认的图片作为占位符，并通知主线程有新的图片占位符，主线程在下一轮执行循环中构造一个表格项对象，并将该图片占位符添加到表格视图控件中进行渲染。

4.如权利要求3所述的图文混合内容的排版和渲染方法，其特征在于：

应用软件在开启子任务获取服务器的内容数组时，如果发现内容中有图片，则另外启动一个子任务向服务器请求当前内容中的图片数据，在收到图片数据之后，通知主线程有图片数据到达，主线程在下一轮执行循环中用下载的图片替换对应的表格项中的图片。

5.如权利要求1所述的图文混合内容的排版和渲染方法，其特征在于：该方法用于IOS系统中，该文字排版和渲染模块为CoreText，该表格视图控件为UITableView，该表格的一项与一个UITableViewCell相对应。

6.一种图文混合内容的排版和渲染系统，包括服务器和应用软件，该应用软件包括文字排版和渲染模块及表格视图控件，其特征在于，

该服务器用于对由内容源获取的内容进行解析，将文本内容按段落分片并储存为一个数组，将图片内容分片，标记为图片类型，插入到数组中对应的位置，并储存对应的图片数据；该服务器还根据应用软件的请求查找对应的内容数组，将只含文本段落和图片标记的内容数组发送给应用软件；

该应用软件用于向服务器请求内容数据，并在收到内容数组后依次对每个分片进行排版和渲染，该文字排版和渲染模块用于在该分片为文本段落时，对该文本段落进行排版，该表格视图控件用于将该文本段落作为表格的一项添加到表格视图控件进行渲染；

该应用软件还用于在该分片为图片时，利用一个默认的图片作为占位符，该表格视图控件还用于将该图片占位符作为表格的一项添加到表格视图控件进行渲染；

该应用软件还用于在该分片为图片时，向服务器请求内容中的图片数据，并在图片数据下载成功后，用收到的图片替换默认的图片。

7.如权利要求6所述的图文混合内容的排版和渲染系统，其特征在于：该内容数组中的每个数组项对应一个文字段落。

8.如权利要求7所述的图文混合内容的排版和渲染系统，其特征在于：

该应用软件还用于在向服务器请求内容数据时，开启一个子任务，向服务器请求下载预先下载好的对应的内容数组；

该应用软件的子任务在收到内容数组后依次对每个分片进行排版和渲染，当该分片为文本段落时，该子任务利用文字排版和渲染模块对该文本段落进行排版，得到与该文本段落的各行相对应的多个数据对象，将该段落的数据对象作为数组的一项保存到一个内容数组中，作为表格视图控件的一个数据源，并通知主线程有新的段落数据到达，该主线程在下一轮执行循环中构造一个表格项对象，将该文本段落添加到表格视图控件中进行渲染，其中，一个表格项对应所述表格的一项；

当该分片为图片时，该子任务先利用一个默认的图片作为占位符，并通知主线程有新的图片占位符，该主线程在下一轮执行循环中构造一个表格项对象，并将该图片占位符添加到表格视图控件中进行渲染。

9.如权利要求8所述的图文混合内容的排版和渲染系统，其特征在于：

该应用软件在开启子任务获取服务器的内容数组时，如果发现内容中有图片，则另外启动一个子任务向服务器请求当前内容中的图片数据，在收到图片数据之后，通知主线程有图片数据到达，该主线程在下一轮执行循环中用下载的图片替换对应的表格项中的图片。

10.如权利要求6所述的图文混合内容的排版和渲染系统，其特征在于：该图文混合内容的排版和渲染系统用于IOS系统，该文字排版和渲染模块为CoreText，该表格视图控件为UITableView，该表格的一项与一个UITableViewCell相对应。