图文混排实现方法及装置与流程

本发明涉及互联网技术领域，具体而言，涉及一种图文混排实现方法及装置。

背景技术：

目前系统里有一个文本工具textview，该文本工具能够搭配使用复合文本构造器spannablestringbuilder在一定程度上实现图文混排，但是该文本工具主要用于显示纯文本，对于图文混排实现程度有限。使用该文本工具实现图文混排主要是使用文本占位符为需插入该位置的图片进行占位，进而将实际需要插入的图片赋值于定义的图片元素，再读取文本占位符所占的位置，将图片元素插入进相应的位置，进而实现图文混排。因此，该文本工具本质上还是将所有内容视为唯一一串文本，但会把文本占位符替换成图片，文本中混搭的图片越多，需要替换的图片越多，因此十分耗费时间。因此，提供一种图文混排实现方法是十分必要的。

技术实现要素：

本发明的目的在于提供一种图文混排实现方法，以实现图片和文本的同时输出，同时系统运行简单，节约了系统运行时间。

本发明的另一目的在于提供一种图文混排实现装置，以实现图片和文本的同时输出，同时系统运行简单，节约了系统运行时间。

为了实现上述目的，本发明实施例采用的技术方案如下：

第一方面，本发明实施例提供了一种图文混排实现方法，应用于电子设备，所述方法包括：

创建互独立的图片元素和文本元素；

通过所述图片元素中赋值的图片地址获取图片；

通过文本元素赋值文本内容以获取文本；

将获取的所述图片和所述文本依次绘制于所述电子设备的画布上；

当所述图片和所述文本所占用的总宽度超过所述电子设备的屏幕宽度，则换行，以便于显示于所述电子设备的屏幕供用户查看。

第二方面，本发明实施例还提供了一种图文混排实现装置，应用于电子设备，所述装置包括：

创建模块，用于创建独立的图片元素和文本元素；

第一获取模块，用于通过所述图片元素中赋值的图片地址获取图片；

第二获取模块，用于通过文本元素赋值文本内容以获取文本；

绘制模块，用于将获取的所述图片和所述文本依次绘制于所述电子设备的画布上；

换行模块，用于当所述图片和所述文本所占用的总宽度超过所述电子设备的屏幕宽度，则换行，以便于显示于所述电子设备的屏幕供用户查看。

本发明实施例提供的一种图文混排实现方法及装置，该图文混排实现方法及装置均应用于电子设备，该图文混排实现方法包括创建独立的图片元素和文本元素，通过图片元素中赋值的图片地址获取图片，通过文本元素赋值的文本内容以获取文本，将获取的所述图片和所述文本依次绘制于所述电子设备的画布上，当所述图片和所述文本所占用的总宽度超过所述电子设备的屏幕宽度，则换行，以便于显示于所述电子设备的屏幕供用户查看。在本发明中通过将所述图片和所述文本定义为独立的元素，以分别获取图片和文本，同时实现图片和文本的自动换行，以实现图文混排的功能，系统运行简单，节约了系统运行时间。

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

附图说明

为了更清楚地说明本发明实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本发明的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。

图1示出了本发明实施例提供的一种图文混排实现方法的流程示意图。

图2示出了本发明实施例提供的一种图文混排实现方法的子步骤的流程示意图。

图3示出了本发明实施例提供的一种图文混排实现方法的另一子步骤的流程示意图。

图4示出了本发明实施例提供的一种图文混排实现方法实际应用的举例示意图。

图5示出了本发明实施例提供的一种图文混排实现方法另一种实际应用的举例示意图。

图6示出了本发明实施例提供的一种图文混排实现装置的功能模块示意图。

图示：100-图文混排实现装置；110-创建模块；120-第一获取模块；130-第二获取模块；140-绘制模块；150-换行模块；160-第一记录模块；170-第二记录模块。

具体实施方式

下面将结合本发明实施例中附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本发明实施例的组件可以以各种不同的配置来布置和设计。因此，以下对在附图中提供的本发明的实施例的详细描述并非旨在限制要求保护的本发明的范围，而是仅仅表示本发明的选定实施例。基于本发明的实施例，本领域技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本发明保护的范围。

应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。同时，在本发明的描述中，术语“第一”、“第二”等仅用于区分描述，而不能理解为指示或暗示相对重要性。

在现有技术中，通常是使用textview文本工具实现一定程度上的图文混排，但是textview文本工具主要是显示纯文本，对图文混排的实现程度有限。在使用textview文本工具实现图文混排主要为：创建一个复合文本构造器spannablestringbuilder，使用该复合文本构造器赋值文本内容为“这是一条图文混排消息[image]消息既有文字也有图片”，其中[image]用来为将要插入的图片进行占位，同时确定[image]在整条文本中的位置，如起始位置为10，终止位置为17。进而，创建一个图片元素imagespan，将需插入的图片赋值于该图片元素imagespan，将图片元素imagespan赋值于复合文本构造器，并指定图片元素imagespan的位置为[image]在整条文本中的位置，即起始位置为10，终止位置为17。换句话说，[image]用于实现为图片元素imagespan在整条文本中进行占位，图片元素imagespan赋值图片后将图片放置于所占的位置中，进而实现图片和文本的同时输出。因此，本质上，textview文本工具只能实现文本输出，同时采用这种方式同时输出图片和文本，耗时长。

因此，本发明实施例提供一种图文混排实现方法，通过在chatview控件中定义独立的图片元素和文本元素，以实现图片和文本的同时输出，同时可以实现图片和文本的自动换行，以极大地提升了系统运行时间。

本发明实施例提供的一种图文混排实现方法及装置均应用于电子设备，该电子设备可以是，但不限于，电脑或手机等电子设备。

请参照图1，是本发明实施例提供的一种图文混排实现方法的流程示意图，该图文混排实现方法包括：

步骤s110，创建相互独立的图片元素和文本元素。

本发明定义了两个相互独立的元素drawableelement与textelement，其中，drawableelement为图片元素，textelement为文本元素。

步骤s120，通过所述图片元素中赋值的图片地址获取图片。

将图片地址赋值入图片元素后，该电子设备将通过该图片地址获取图片。如通过drawable.createfrompath()将图片的路径赋值于图片元素，该电子设备将通过该图片的路径加载图片；又如通过context.getdrawable()将指定id的图片加载。该电子设备获取图片后，将通过getintrinsicwidth()与getintrinsicheight()方法获取并存储加载图片的宽度和高度。

步骤s130，通过文本元素赋值文本内容以获取文本。

通过将文本内容赋值于文本元素textelement以获取文本。

步骤s140，将获取的所述图片和所述文本依次绘制于所述电子设备的画布上。

请参照图2，是本发明实施例提供的一种图文混排实现方法的子步骤s140的流程示意图，该步骤s140包括：

步骤s141，获取所述图片和所述文本的高度。

通过图片元素获取的图片和通过文本元素获取的文本都有一定高度，因此，获取每一个图片的高度和每一个文本的高度。

步骤s142，若将要绘制于所述电子设备的画布上的所述图片或所述文本的高度小于所述图片和所述文本当前行的行高，则将所述画布移动预设距离以便于所述图片和所述文本处于当前行垂直方向上居中位置。

该当前行的行高的计算方式为：记录当前行绘制于该画布上前一个数据的高度，该前一个数据可以是图片或文本，将绘制于画布上的当前数据的高度与前一个数据的高度进行比较，该当前数据可以是图片或文本，若当前数据的高度高于前一个数据的高度，则当前数据的高度为当前行的行高，若当前数据的高度低于或等于前一个数据的高度，则前一个数据的高度为当前行的行高。

由于绘制于该画布上的数据(图片或文本)高度不一致，则当绘制于画布上的图片或文本的高度小于当前行的行高时，向下移动画布预设距离，以使得绘制于画布的图片或文本始终处于当前行垂直方向上居中位置。该预设距离为，当前行行高减去实时绘制的图片或文本的高度的差值，取该差值的一半即为预设距离。当需要绘制相对于该图片和文本的下一个图片或文本时，则将画布上移该预设距离，以使得下一个绘制的图片或文本能正常绘制。

步骤s150，当所述图片和所述文本所占用的总宽度超过所述电子设备的屏幕宽度，则换行，以便于显示于所述电子设备的屏幕供用户查看。

请参照图3，是本发明实施例提供的一种图文混排实现方法的步骤s150的子步骤的流程示意图，该步骤s150包括：

步骤s151，获取所述图片和所述文本的个体宽度，根据所述图片和所述文本的个体宽度计算所述图片和所述文本在当前行实际占用的宽度。

通过图片元素获取的图片和通过文本元素获取的文本都有一定的宽度，因此获取每一个图片和每一个文本的个体宽度。

根据当前行图片和文本的个数以及每一个图片和每一个文本的个体宽度，计算当前行中所有图片和文本实际占用的宽度。

步骤s152，根据所述图片和所述文本在当前行实际占用的宽度计算计算剩余屏幕宽度。

每一行的宽度都是固定的，每一行的宽度均为电子设备的屏幕宽度，根据所述图片和文本在当前行中实际占用的宽度，根据电子设备的屏幕宽度计算出当前行剩余的屏幕宽度。

步骤s153，获取需要输入的所述文本的总字符。

计算并存储通过文本元素获取的所有文本数量。

步骤s154，调用截断函数根据所述总字符的截断位置以及剩余屏幕宽度计算所述剩余屏幕宽度能容纳的剩余的总字符的数量，所述剩余的总字符的数量为所述总字符从所述截断位置开始计数的字符数量。

如图4所示，是本发明实施例提供的一种图文混排实现方法实际应用的举例示意图。如：通过文本元素获取所有需要输入的文本内容“这是一条图文混排消息，消息既有文字也有图片，当文字信息过长时，会自动截断换行”，通过图片元素获取所有需要输入的图片，即图中所示的“球”“飞机”“放大镜”“手机”“锁链”。

图中显示的图片和文字共分为两行，第一行中文字“这是一条图文混排消息”“消息既有文字也有图片”和图片“球形”的宽度之和等于屏幕宽度，则文字内容从“消息既有文字也有图片”中“图片”处开始截断，此处为截断位置，余下的文字内容“当文字消息过长时，会自动截断换行”将在下一行中进行显示，则余下的文字内容“当文字信息过长时，会自动截断换行”的字符量为总字符从截断位置开始计算的字符数量，即为剩余的总字符的数量。

在第二行中，先是依次绘制了多个图片，如“飞机”“放大镜”“手机”“锁链”，此多个图片占据了一定的屏幕宽度，则调用截断函数根据总字符的截断位置以及剩余屏幕宽度计算剩余屏幕宽带还能容纳的剩余字符数量，即判断此行剩余的屏幕宽度还能容纳“当文字信息过长时，会自动截断换行”中字符个数。同时，如图中所示，由于文字和图片在绘制过程中始终实时比较图片和文字的高度与当前行的行高以保证图片和文字处于当前行的垂直居中位置，进而文字和图片展现出中心水平的效果。

步骤s155，若所述剩余屏幕宽度实际能容纳的剩余的总字符的数量小于剩余的总字符的数量，则所述图片和所述文本所占用的宽度超过所述电子设备的屏幕宽度。

若剩余屏幕宽度实际能容纳的字符数量小于剩余字符的数量，即小于“当文字消息过长时，会自动截断换行”中的字符数量，则表明当前行的图片和文本所占用的宽度将超过电子设备的屏幕宽度，则需要进行换行，以便于用户能享受更好的显示效果。如图5所示，是本发明实施例提供的另一种图文混排实现方法的实际应用的举例示意图。由于“截断换行”字符不能被当前行的剩余屏幕宽度容纳，因此自动显示于下一行中。

此外，该电子设备将存储当前行剩余屏幕宽度实际容纳的字符数量，以及字符的下一截断位置，以便于对判断下一行的屏幕宽度能否容纳余下字符量。同时，该电子设备也将记录当前行的图片和文本实际占用的宽度，以便于在画布上绘制下一行的图片或文字时，能将画布左移上一行图片或文本实际占用的宽度，以便于绘制下一行的图片或文字。

请参照图6，是本发明实施例提供的一种图文混排实现装置100的功能模块示意图，该图文混排实现装置100包括创建模块110、第一获取模块120、第二获取模块130、绘制模块140、换行模块150、第一记录模块160以及第二记录模块170，其中：

创建模块110，用于创建独立的图片元素和文本元素。

在本发明实施例中，步骤s110可以由创建模块110执行。

第一获取模块120，用于通过所述图片元素中赋值的图片地址获取图片。

在本发明实施例中，步骤s120可以由第一获取模块120执行。

第二获取模块130，用于通过文本元素赋值文本内容以获取文本。

在本发明实施例中，步骤s130可以由第二获取模块130执行。

绘制模块140，用于将获取的所述图片和所述文本依次绘制于所述电子设备的画布上。

在本发明实施例中，步骤s140～s142可以由绘制模块140执行。

换行模块150，用于当所述图片和所述文本所占用的总宽度超过所述电子设备的屏幕宽度，则换行，以便于显示于所述电子设备的屏幕供用户查看。

在本发明实施例中，步骤s150～s155可以由换行模块150执行。

第一记录模块160，用于录所述剩余屏幕宽度实际容纳的剩余的总字符的数量，以及所述总字符的下一个截断位置，所述下一个截断位置为所述剩余的总字符的数量由所述剩余屏幕宽度容纳后余下总字符数量开始计算的位置。

第二记录模块170，用于记录当前行的所述图片和所述文本实际占用的宽度。

由于在图文混排实现方法部分已经详细描述，在此不再赘述。

综上所示，本发明实施例提供一种图文混排实现方法及装置，该图文混排实现方法及装置均应用于电子设备，该图文混排实现方法包括创建相互独立的图片元素和文本元素，通过图片元素中赋值的图片地址获取图片，通过文本元素赋值文本内容以获取文本，若将要绘制于电子设备的画布上的图片或文本的高度小于图片或文本当前行的行高，则将画布移动预设距离以便于图片或文本处于当前行垂直方向上的居中位置，同时，当所述图片和所述文本的所占用的总宽度超过电子设备的屏幕宽度，则换行，以便于显示于电子设备的屏幕供用户查看。通过本发明实现了图片和文本的同时输出，同时节约了系统运行时间。

在本申请所提供的几个实施例中，应该理解到，所揭露的装置和方法，也可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的，例如，附图中的流程图和框图显示了根据本发明的多个实施例的装置、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段或代码的一部分，所述模块、程序段或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现方式中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个连续的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或动作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

另外，在本发明各个实施例中的各功能模块可以集成在一起形成一个独立的部分，也可以是各个模块单独存在，也可以两个或两个以上模块集成形成一个独立的部分。

所述功能如果以软件功能模块的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

以上所述仅为本发明的优选实施例而已，并不用于限制本发明，对于本领域的技术人员来说，本发明可以有各种更改和变化。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。

以上所述，仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应所述以权利要求的保护范围为准。