CN110070593B - 图片预览信息的显示方法、装置、设备及介质 - Google Patents

Abstract

本公开实施例公开了图片预览信息的显示方法、装置、设备及介质。其中，所述方法包括：获取用户在信息输入界面中选择添加的至少一张目标图片；如果确定所述信息输入界面的顶部未设置有预览视图界面，则生成填充有所述目标图片的预览视图界面，所述预览视图界面用于对填充的图片进行小图预览；将所述预览视图界面设置在所述信息输入界面的顶部进行显示。本公开实施例的技术方案能够丰富图片信息的预览形式，提高输入信息的编辑效率。

Description

图片预览信息的显示方法、装置、设备及介质

技术领域

本公开实施例涉及信息展示技术，尤其涉及一种图片预览信息的显示方法、装置、设备及介质。

背景技术

随着社交类应用程序的不断发展，在社交类应用程序中发布内容，或者对已发布的内容进行评论，并将发布或者评论的信息展示，已经成为进行信息交换，促进信息传播和用户沟通的重要途径。其中，在用户编辑发布内容和评论信息时，以何种方式展示信息，是影响用户的编辑效率和最终展示效果的重要因素。

现有的针对图片信息的预览方式中，一般将用户添加的图片与文字作为一个整体对待，随着文字的输入量增大，图片会被隐藏于信息输入界面之外，当用户需要修改添加的图片时，需要调整信息输入界面的当前显示内容。

发明人在实现本公开的过程中，发现现有技术存在如下缺陷：将图片与文字作为同一级别的信息编辑显示，当文字的信息量较多时，会影响图片的显示，导致用户无法在编辑文字时，实时查看当前添加的图片。进一步的，当文字与图片的关联性较大时，图片被遮挡或者隐藏，都可能影响文字的编辑效果，降低用户的编辑效率。

发明内容

本公开实施例提供一种图片预览信息的显示方法、装置、设备及介质，以丰富图片信息的预览形式，提高输入信息的编辑效率。

第一方面，本公开实施例提供了一种图片预览信息的显示方法，包括：

获取用户在信息输入界面中选择添加的至少一张目标图片；

如果确定所述信息输入界面的顶部未设置有预览视图界面，则生成填充有所述目标图片的预览视图界面，所述预览视图界面用于对填充的图片进行小图预览；

将所述预览视图界面设置在所述信息输入界面的顶部进行显示。

第二方面，本公开实施例还提供了一种图片预览信息的显示装置，包括：

目标图片获取模块，用于获取用户在信息输入界面中选择添加的至少一张目标图片；

预览视图界面生成模块，用于如果确定所述信息输入界面的顶部未设置有预览视图界面，则生成填充有所述目标图片的预览视图界面，所述预览视图界面用于对填充的图片进行小图预览；

预览视图界面显示模块，用于将所述预览视图界面设置在所述信息输入界面的顶部进行显示。

第三方面，本公开实施例还提供了一种电子设备，该电子设备包括：

一个或多个处理器；

存储器，用于存储一个或多个程序；

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如本公开任意实施例所述的图片预览信息的显示方法。

第四方面，本公开实施例还提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现如本公开任意实施例所述的图片预览信息的显示方法。

本公开实施例在输入信息包含图片时，将图片填充于信息输入界面顶部的预览视图界面中，并进行显示，保证了用户在编辑信息时，图片可以置顶预览，避免出现图片被遮挡或者隐藏的情况。解决了现有技术中，将图片与文字作为同一级别的信息编辑显示时，由于文字的显示形式具有多样性，导致图片被遮挡或者隐藏问题，进一步的，还解决了由于图片被遮挡或者隐藏，导致的用户编辑信息效率降低的问题，实现了丰富图片信息的预览形式，提高输入信息的编辑效率的效果。

附图说明

图1a是本公开实施例一提供的一种图片预览信息的显示方法的流程图；

图1b是本公开实施例一提供的一种预览视图界面的示意图；

图2a是本公开实施例二提供的一种图片预览信息的显示方法的流程图；

图2b是本公开实施例二提供的一种信息输入界面的示意图；

图3a是本公开实施例三提供的一种图片预览信息的显示方法的流程图；

图3b是本公开实施例三提供的一种预览视图界面的示意图；

图4是本公开实施例四提供的一种图片预览信息的显示装置的结构示意图；

图5是本公开实施例五提供的一种电子设备的结构示意图。

具体实施方式

下面结合附图和实施例对本公开作进一步的详细说明。可以理解的是，此处所描述的具体实施例仅仅用于解释本公开，而非对本公开的限定。另外还需要说明的是，为了便于描述，附图中仅示出了与本公开相关的部分而非全部结构。下述各实施例中，每个实施例中同时提供了可选特征和示例，实施例中记载的各个特征可进行组合，形成多个可选方案，不应将每个编号的实施例仅视为一个技术方案。

实施例一

图1a为本公开实施例一提供的一种图片预览信息的显示方法的流程图，本实施例可适用于在社交类应用程序中，编辑包含图片的输入信息的情况，该方法可以由图片预览信息的显示装置来执行，该装置可以采用软件和/或硬件的方式实现，该装置可以配置于电子设备中，典型的，该电子设备为智能终端，例如手机、平板电脑等。如图1a所示，该方法具体包括如下步骤：

步骤110、获取用户在信息输入界面中选择添加的至少一张目标图片。

在本实施例中，用户通过社交类应用程序发布信息，该发布的信息可以是主题信息，也可以是针对主题信息的回复信息或者评论信息等。当用户发布的信息中包含图片时，用户需要通过信息输入界面选择要添加的目标图片。

典型的，信息输入界面中包含图片选择标识，用户通过点击图片选择标识，可以浏览本地或者网络中的图片，并从中选择目标图片。

在本实施例的一个可选的实施方式中，所述信息输入界面包括：评论输入界面；

获取用户在信息输入界面中选择添加的至少一张目标图片，包括：

根据在所述评论输入界面中检测到的图片评论添加请求，将图片选择器提供给用户进行图片的选择；

接收所述图片选择器反馈的，所述用户选择添加的至少一张目标图片。

在本可选的实施方式中，用户输入的信息为评论信息，信息输入界面为评论输入界面，用户通过点击评论输入界面上的标识或者其他任意操作，触发评论输入界面检测到图片评论添加请求，该图片评论添加请求用于请求调取图片选择器，其中，图片选择器是用来浏览图片的，与设定图片库关联的选择控件。当接收到用户通过图片选择器反馈的目标图片信息后，进行后续操作。由此，本可选的实施方式提供了一种确定目标图片的方式。

步骤120、如果确定所述信息输入界面的顶部未设置有预览视图界面，则生成填充有所述目标图片的预览视图界面。

其中，所述预览视图界面用于对填充的图片进行小图预览。

在本实施例中，当确定信息输入界面的顶部未设置有预览视图界面，即已输入的信息不包含图片时，按照设定布局规则，将目标图片填充于预览视图界面中，以使目标图片以小图形式在预览视图界面中展示。

典型的，如图1b所示，预览视图界面中设置有滚动条，以在目标图片数量大于设定数量时，将多余的目标图片隐藏显示。进一步的，当与图片关联的文字中有设定的图片关联标识时，随着用户编辑包含图片关联标识的文字，预览视图界面中对应的图片可以居中显示。

在本实施例的一个可选的实施方式中，如果所述信息输入界面的顶部设置有预览视图界面，则将所述至少一张目标图片追加填充于所述预览视图界面中，以对所述预览视图界面中的显示内容进行更新显示。

在本可选的实施方式中，提供了已输入的信息包含图片时，预览视图界面的显示方式。按照设定布局规则，将目标图片追加填充于预览视图界面中，以使针对用户当前编辑的所有图片位于预览视图界面中。

步骤130、将所述预览视图界面设置在所述信息输入界面的顶部进行显示。

在本实施例中，为了避免图片预览信息位于信息输入界面底部时，由于输入法或者其他通用信息的遮挡，导致的图片预览受阻，将预览视图界面设置在信息输入界面的顶部进行显示。

具体的，将预览视图界面设置在信息输入界面的顶部进行显示的方式，可以是在信息输入界面的区域固定时，在信息输入界面的顶部追加设置预览视图界面；也可以是在信息输入界面的区域不固定时，扩大信息输入界面区域面积，以使预览视图界面设置在扩大后的信息输入界面的顶部。

本公开实施例在输入信息包含图片时，将图片填充于信息输入界面顶部的预览视图界面中，并进行显示，保证了用户在编辑信息时，图片可以置顶预览，避免出现图片被遮挡或者隐藏的情况。解决了现有技术中，将图片与文字作为同一级别的信息编辑显示时，由于文字的显示形式具有多样性，导致图片被遮挡或者隐藏问题，进一步的，还解决了由于图片被遮挡或者隐藏，导致的用户编辑信息效率降低的问题，实现了丰富图片信息的预览形式，提高输入信息的编辑效率的效果。

实施例二

图2a为本公开实施例二提供的一种图片预览信息的显示方法的流程图。本实施例可以与上述一个或者多个实施例中各个可选方案结合，在本实施例中，将所述预览视图界面设置在所述信息输入界面的顶部进行显示，可以为：移动所述信息输入界面的顶部边界或者底部边界，以增大所述信息输入界面的显示区域的区域面积，其中，增大的区域面积与所述预览视图界面的面积相匹配；将所述信息输入界面由顶至下划分为第一显示区域以及第二显示区域，所述第一显示区域的区域面积与所述预览视图界面的面积相匹配；将所述预览视图界面覆盖在所述第一显示区域之上进行显示，并将所述信息输入界面中的当前显示内容，移动至所述第二显示区域内进行显示。

相应的，如图2a所示，该方法具体包括如下步骤：

步骤210、获取用户在信息输入界面中选择添加的至少一张目标图片。

在本实施例的一个可选的实施方式中，在获取用户在信息输入界面中选择添加的至少一张目标图片之前，还包括：

基于MVVM框架生成图片预览组件，所述图片预览组件包括：视图模型；所述视图模型用于根据注入的数据源生成所述预览视图界面.

其中，MVVM(模型-视图-视图模型，Model-View-ViewModel)是MVC(模型-视图-控制器，Model-View-Controller)的改进版。MVVM将MVC中的视图的状态和行为抽象化，将预览视图界面和业务逻辑分开。视图模型可以提取模型的数据，同时处理预览视图界面中展示内容涉及的业务逻辑。

由此，本可选的实施方式提供了一种建立预览视图界面的底层实现方式，基于MVVM框架，利用其中的视图模型阻隔模型与预览视图界面，即在二者之间加入了一个黑箱，用于实现各种业务逻辑，提高了预览视图界面的可拓展性和可复用性。

步骤220、判断所述信息输入界面的顶部是否设置有预览视图界面，若否，执行步骤230，若是，执行步骤240。

步骤230、生成填充有所述目标图片的预览视图界面，执行步骤250。

其中，所述预览视图界面用于对填充的图片进行小图预览。

基于上述可选的实施方式，生成填充有所述目标图片的预览视图界面，包括：

将所述至少一张目标图片注入至所述图片预览组件的所述视图模型中，以使完成图片填充的所述视图模型生成所述预览视图界面。

在本可选的实施方式中，当确定信息输入界面上未设置有预览视图界面时，将获取的至少一张目标图片作为视图模型的输入数据，对应的，视图模型输出包含该目标图片的预览视图界面。

步骤240、将所述至少一张目标图片追加填充于所述预览视图界面中，以对所述预览视图界面中的显示内容进行更新显示，执行步骤250。

可选的，当确定信息输入界面上设置有预览视图界面时，可以将当前所用目标图片作为视图模型的输入数据，也可以仅将新增加的目标图片作为视图模型的输入数据，对应生成更新的预览视图界面。

步骤250、移动所述信息输入界面的顶部边界或者底部边界，以增大所述信息输入界面的显示区域的区域面积。

其中，增大的区域面积与所述预览视图界面的面积相匹配。

在本实施例中，信息输入界面的区域面积不固定，通过移动信息输入界面的顶部边界或者底部边界，可以增大信息输入界面的显示区域的区域面积，以使增大后的信息输入界面可以容纳预览视图界面以及原有的信息输入界面。

步骤260、将所述信息输入界面由顶至下划分为第一显示区域以及第二显示区域，所述第一显示区域的区域面积与所述预览视图界面的面积相匹配。

步骤270、将所述预览视图界面覆盖在所述第一显示区域之上进行显示，并将所述信息输入界面中的当前显示内容，移动至所述第二显示区域内进行显示。

在本实施例中，如图2b所示，第一显示区域以及第二显示区域由上之下设置于信息输入界面中。而且，第一显示区域的区域面积与预览视图界面的面积相匹配，将预览视图界面适应性覆盖在第一显示区域之上进行显示，为了提高信息输入界面的观赏性，并不对预览视图界面覆盖在第一显示区域之上的方式做具体限定。同时，将原有的信息输入界面中的当前显示内容，移动至第二显示区域内进行显示。由此，实现了当信息输入界面上未设置有预览视图界面时，添加目标图片的具体方式。

可以理解的，当信息输入界面上设置有预览视图界面时，信息输入界面的更新方式与信息输入界面上未设置有预览视图界面时的相似，仅是在已有的第一显示区域以及第二显示区域上进行更新。

在本实施例的一个可选的实施方式中，将所述预览视图界面覆盖在所述第一显示区域之上进行显示，包括：

将所述预览视图界面的顶部边界的高度，设置为所述信息输入界面的顶部边界的高度，以将所述预览视图界面覆盖在所述第一显示区域之上进行显示。

本可选的实施方式提供了一种优选的将预览视图界面覆盖在所述第一显示区域之上的方式，即将预览视图界面的顶部边界的高度设置为信息输入界面的顶部边界的高度。

本实施未详细解释之处，请详见前述实施例，在此不再赘述。

本公开实施例提供了当信息输入界面上未设置有预览视图界面时，添加目标图片的具体方式，保证了预览视图界面合理的设置于信息输入界面中。

实施例三

图3a为本公开实施例三提供的一种图片预览信息的显示方法的流程图。本实施例可以与上述一个或者多个实施例中各个可选方案结合，在本实施例中，所述方法，还可以为：获取用户在当前显示的预览视图界面中选择删除的至少一张删除图片；其中，所述预览视图界面中的填充图片关联对应的删除选项；将所述删除图片从所述预览视图界面中移除；如果移除操作后，所述预览视图界面中填充有至少一张图片，则更新所述预览视图界面中的图片排布方式。

相应的，如图3a所示，该方法具体包括如下步骤：

步骤310、获取用户在信息输入界面中选择添加的至少一张目标图片。

步骤320、判断所述信息输入界面的顶部是否设置有预览视图界面，若否，执行步骤330，若是，执行步骤340。。

步骤330、生成填充有所述目标图片的预览视图界面，执行步骤350。

步骤340、将所述至少一张目标图片追加填充于所述预览视图界面中，以对所述预览视图界面中的显示内容进行更新显示，执行步骤350。

步骤350、将所述预览视图界面设置在所述信息输入界面的顶部进行显示。

步骤360、获取用户在当前显示的预览视图界面中选择删除的至少一张删除图片。

其中，所述预览视图界面中的填充图片关联对应的删除选项，如图3b所示。

在本实施例中，针对MVVM框架，建立集合列表，预览视图界面中的每一张图片对应为集合列表中的一个列表项。可以将集合列表理解为MVVM框架的数据源，位于MVVM框架的前端。集合列表中附加手势，并注入多种方法，例如数据清理方法以及回调方法等。

当用户选择删除当前显示的预览视图界面中的一张图片时，由用户的删除手势操作，可以触发集合列表调用与手势操作对应的数据清理方法，将该数据清理方法作用在集合列表中的一个列表项上，MVVM框架再根据更新的集合列表进行预览视图界面以及信息输入界面的更新。

步骤370、将所述删除图片从所述预览视图界面中移除。

步骤380、如果移除操作后，所述预览视图界面中填充有至少一张图片，则更新所述预览视图界面中的图片排布方式。

在本实施例中，由MVVM框架对预览视图界面的更新，可以将删除图片从预览视图界面中移除。若移除操作后，预览视图界面中填充有至少一张图片，则需要根据设定布局规则，更新预览视图界面中的图片排布方式。

在本实施例的一个可选的实施方式中，如果移除操作后，所述预览视图界面中未填充任何图片，则将所述预览视图界面从所述信息输入界面的顶部移除。

进一步的，在将所述预览视图界面从所述信息输入界面的顶部移除之后，还包括：

移动所述信息输入界面的顶部边界或者底部边界，以缩小所述信息输入界面的显示区域的区域面积，其中，缩小的区域面积与所述预览视图界面的面积相匹配。

本可选的实施方式提供了移除操作后，若预览视图界面中未填充任何图片时，信息输入界面恢复至无预览视图界面的方式，保证了在输入内容中不再包含图片时，信息输入界面可以恢复至初始状态，以减少对终端屏幕空间的占用。

可以理解的，本实施例仅是提供了一种可行的实施方式。步骤360至步骤380可以发生在预览视图界面显示后的任意时刻，只要在当前信息输入界面中包含预览视图界面，就可以进行移除操作，以及本实施例中各个可选的实施方式中的操作步骤。

本实施未详细解释之处，请详见前述实施例，在此不再赘述。

本公开实施例的技术方案提供了预览视图界面的细化功能，即可对预览视图界面中的图片执行移除操作，为用户使用预览视图界面提供了便利。进一步的，在移除操作后，当预览视图界面中填充有图片时的操作步骤，本公开实施例的技术方案还提供了优选的更新预览视图界面的方式，保证了用户可以准确浏览图片。

实施例四

图4为本公开实施例四提供的一种图片预览信息的显示装置的结构示意图，可适用于在社交类应用程序中，编辑包含图片的输入信息的情况，该装置可以采用软件和/或硬件的方式实现，该装置一般可以配置于电子设备中。如图4所示，该装置可以包括：目标图片获取模块410、预览视图界面生成模块420以及预览视图界面显示模块430，其中，

目标图片获取模块410，用于获取用户在信息输入界面中选择添加的至少一张目标图片；

预览视图界面生成模块420，用于如果确定所述信息输入界面的顶部未设置有预览视图界面，则生成填充有所述目标图片的预览视图界面，所述预览视图界面用于对填充的图片进行小图预览；

预览视图界面显示模块430，用于将所述预览视图界面设置在所述信息输入界面的顶部进行显示。

本公开实施例在输入信息包含图片时，将图片填充于信息输入界面顶部的预览视图界面中，并进行显示，保证了用户在编辑信息时，图片可以置顶预览，避免出现图片被遮挡或者隐藏的情况。解决了现有技术中，将图片与文字作为同一级别的信息编辑显示时，由于文字的显示形式具有多样性，导致图片被遮挡或者隐藏问题，进一步的，还解决了由于图片被遮挡或者隐藏，导致的用户编辑信息效率降低的问题，实现了丰富图片信息的预览形式，提高输入信息的编辑效率的效果。

在上述各实施例的基础上，还可以包括：

预览视图界面追加模块，用于在获取用户在信息输入界面中选择添加的至少一张目标图片之后，如果所述信息输入界面的顶部设置有预览视图界面，则将所述至少一张目标图片追加填充于所述预览视图界面中，以对所述预览视图界面中的显示内容进行更新显示。

在上述各实施例的基础上，预览视图界面显示模块430，可以包括：

区域面积增大单元，用于移动所述信息输入界面的顶部边界或者底部边界，以增大所述信息输入界面的显示区域的区域面积，其中，增大的区域面积与所述预览视图界面的面积相匹配；

显示区域划分单元，用于将所述信息输入界面由顶至下划分为第一显示区域以及第二显示区域，所述第一显示区域的区域面积与所述预览视图界面的面积相匹配；

预览视图界面显示单元，用于将所述预览视图界面覆盖在所述第一显示区域之上进行显示，并将所述信息输入界面中的当前显示内容，移动至所述第二显示区域内进行显示。

在上述各实施例的基础上，预览视图界面显示单元，可以具体用于：

将所述预览视图界面的顶部边界的高度，设置为所述信息输入界面的顶部边界的高度，以将所述预览视图界面覆盖在所述第一显示区域之上进行显示。

在上述各实施例的基础上，还可以包括：

删除图片获取模块，用于获取用户在当前显示的预览视图界面中选择删除的至少一张删除图片；其中，所述预览视图界面中的填充图片关联对应的删除选项；

删除图片移除模块，用于将所述删除图片从所述预览视图界面中移除；

图片排布方式更新模块，用于如果移除操作后，所述预览视图界面中填充有至少一张图片，则更新所述预览视图界面中的图片排布方式。

在上述各实施例的基础上，还可以包括：

预览视图界面移除模块，用于在将所述删除图片从所述预览视图界面中移除之后，如果移除操作后，所述预览视图界面中未填充任何图片，则将所述预览视图界面从所述信息输入界面的顶部移除。

在上述各实施例的基础上，还可以包括：

区域面积缩小单元，用于在将所述预览视图界面从所述信息输入界面的顶部移除之后，移动所述信息输入界面的顶部边界或者底部边界，以缩小所述信息输入界面的显示区域的区域面积，其中，缩小的区域面积与所述预览视图界面的面积相匹配。

在上述各实施例的基础上，所述信息输入界面包括：评论输入界面；

目标图片获取模块410，可以包括：

图片选择器提供单元，用于根据在所述评论输入界面中检测到的图片评论添加请求，将图片选择器提供给用户进行图片的选择；

目标图片接收单元，用于接收所述图片选择器反馈的，所述用户选择添加的至少一张目标图片。

在上述各实施例的基础上，还可以包括：

图片预览组件生成模块，用于在获取用户在信息输入界面中选择添加的至少一张目标图片之前，基于MVVM框架生成图片预览组件，所述图片预览组件包括：视图模型；所述视图模型用于根据注入的数据源生成所述预览视图界面；

目标图片填充模块，用于在获取用户在信息输入界面中选择添加的至少一张目标图片之前，如果确定所述信息输入界面上未设置有预览视图界面，则生成填充有所述目标图片的预览视图界面，包括：

目标图片注入模块，用于在获取用户在信息输入界面中选择添加的至少一张目标图片之前，如果确定所述信息输入界面上未设置有预览视图界面，则将所述至少一张目标图片注入至所述图片预览组件的所述视图模型中，以使完成图片填充的所述视图模型生成所述预览视图界面。

本公开实施例提供的图片预览信息的显示装置，与本公开任意实施例提供的图片预览信息的显示方法属于同一构思，未在本公开实施例中详尽描述的技术细节可参见上述实施例，并且本公开实施例与上述实施例具有相同的有益效果。

实施例五

本公开实施例五提供了一种电子设备，下面参考图5，其示出了适于用来实现本公开实施例的电子设备(例如客户端或服务器端)500的结构示意图。本公开实施例中的电子设备可以包括但不限于诸如移动电话、笔记本电脑、数字广播接收器、个人数字助理(PDA)、平板电脑(PAD)、便携式多媒体播放器(PMP)、车载终端(例如车载导航终端)等等的移动终端以及诸如数字TV、台式计算机等等的固定终端。图5示出的电子设备仅仅是一个示例，不应对本公开实施例的功能和使用范围带来任何限制。

如图5所示，电子设备500可以包括处理装置(例如中央处理器、图形处理器等)501，其可以根据存储在只读存储器(ROM)502中的程序或者从存储装置508加载到随机访问存储器(RAM)503中的程序而执行各种适当的动作和处理。在RAM 503中，还存储有电子设备500操作所需的各种程序和数据。处理装置501、ROM 502以及RAM 503通过总线504彼此相连。输入/输出(I/O)接口505也连接至总线504。

通常，以下装置可以连接至I/O接口505：包括例如触摸屏、触摸板、键盘、鼠标、摄像头、麦克风、加速度计、陀螺仪等的输入装置506；包括例如液晶显示器(LCD)、扬声器、振动器等的输出装置507；包括例如磁带、硬盘等的存储装置508；以及通信装置509。通信装置509可以允许电子设备500与其他设备进行无线或有线通信以交换数据。虽然图5示出了具有各种装置的电子设备500，但是应理解的是，并不要求实施或具备所有示出的装置。可以替代地实施或具备更多或更少的装置。

特别地，根据本公开的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本公开的实施例包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信装置509从网络上被下载和安装，或者从存储装置508被安装，或者从ROM 502被安装。在该计算机程序被处理装置501执行时，执行本公开实施例的图片预览信息的显示方法中限定的上述功能。

也即：获取用户在信息输入界面中选择添加的至少一张目标图片；如果确定所述信息输入界面的顶部未设置有预览视图界面，则生成填充有所述目标图片的预览视图界面，所述预览视图界面用于对填充的图片进行小图预览；将所述预览视图界面设置在所述信息输入界面的顶部进行显示。

实施例六

本公开实施例六还提供了一种计算机可读存储介质，计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本公开中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本公开中，计算机可读信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读信号介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：电线、光缆、射频(RF)等等，或者上述的任意合适的组合。

上述计算机可读介质可以是上述电子设备中所包含的；也可以是单独存在，而未装配入该电子设备中。

上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被该电子设备执行时，使得该电子设备：获取用户在信息输入界面中选择添加的至少一张目标图片；如果确定所述信息输入界面的顶部未设置有预览视图界面，则生成填充有所述目标图片的预览视图界面，所述预览视图界面用于对填充的图片进行小图预览；将所述预览视图界面设置在所述信息输入界面的顶部进行显示。

可以以一种或多种程序设计语言或其组合来编写用于执行本公开的操作的计算机程序代码，上述程序设计语言包括面向对象的程序设计语言—诸如Java、Smalltalk、C++，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中，远程计算机可以通过任意种类的网络——包括局域网(LAN)或广域网(WAN)—连接到用户计算机，或者，可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。

附图中的流程图和框图，图示了按照本公开各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，该模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

描述于本公开实施例中所涉及到的模块可以通过软件的方式实现，也可以通过硬件的方式来实现。其中，模块的名称在某种情况下并不构成对该模块本身的限定，例如，“标准字符图像获得模块”还可以被描述为“获得至少一个标准字符图像的模块”。

以上描述仅为本公开的较佳实施例以及对所运用技术原理的说明。本领域技术人员应当理解，本公开中所涉及的公开范围，并不限于上述技术特征的特定组合而成的技术方案，同时也应涵盖在不脱离上述公开构思的情况下，由上述技术特征或其等同特征进行任意组合而形成的其它技术方案。例如上述特征与本公开中公开的(但不限于)具有类似功能的技术特征进行互相替换而形成的技术方案。

Claims (10)

1.一种图片预览信息的显示方法，其特征在于，应用于发布信息，包括：

获取用户在信息输入界面中选择添加的至少一张目标图片；

如果确定所述信息输入界面的顶部未设置有预览视图界面，则生成填充有所述目标图片的预览视图界面，所述预览视图界面用于对填充的图片进行小图预览，且随着用户编辑与图片关联的包含设定的图片关联标识的文字，将对应的图片居中显示于所述预览视图界面；

将所述预览视图界面设置在所述信息输入界面的顶部进行显示；其中，所述预览视图界面中设置有滚动条；

获取用户在当前显示的预览视图界面中选择删除的至少一张删除图片；其中，所述预览视图界面中的填充图片关联对应的删除选项；

将所述删除图片从所述预览视图界面中移除；

如果移除操作后，所述预览视图界面中填充有至少一张图片，则更新所述预览视图界面中的图片排布方式；

其中，在获取用户在信息输入界面中选择添加的至少一张目标图片之前，还包括：

基于MVVM框架生成图片预览组件，所述图片预览组件包括：视图模型；所述视图模型用于根据注入的数据源生成所述预览视图界面；

其中，如果确定所述信息输入界面上未设置有预览视图界面，则生成填充有所述目标图片的预览视图界面，包括：

如果确定所述信息输入界面上未设置有预览视图界面，则将所述至少一张目标图片注入至所述图片预览组件的所述视图模型中，以使完成图片填充的所述视图模型生成所述预览视图界面；

其中，所述更新所述预览视图界面中的图片排布方式，包括：

MVVM框架根据更新的集合列表进行预览视图界面以及信息输入界面的更新。

2.根据权利要求1所述的方法，其特征在于，在获取用户在信息输入界面中选择添加的至少一张目标图片之后，还包括：

如果所述信息输入界面的顶部设置有预览视图界面，则将所述至少一张目标图片追加填充于所述预览视图界面中，以对所述预览视图界面中的显示内容进行更新显示。

3.根据权利要求1或2所述的方法，其特征在于，将所述预览视图界面设置在所述信息输入界面的顶部进行显示，包括：

移动所述信息输入界面的顶部边界或者底部边界，以增大所述信息输入界面的显示区域的区域面积，其中，增大的区域面积与所述预览视图界面的面积相匹配；

将所述信息输入界面由顶至下划分为第一显示区域以及第二显示区域，所述第一显示区域的区域面积与所述预览视图界面的面积相匹配；

将所述预览视图界面覆盖在所述第一显示区域之上进行显示，并将所述信息输入界面中的当前显示内容，移动至所述第二显示区域内进行显示。

4.根据权利要求3所述的方法，其特征在于，将所述预览视图界面覆盖在所述第一显示区域之上进行显示，包括：

将所述预览视图界面的顶部边界的高度，设置为所述信息输入界面的顶部边界的高度，以将所述预览视图界面覆盖在所述第一显示区域之上进行显示。

5.根据权利要求1所述的方法，其特征在于，在将所述删除图片从所述预览视图界面中移除之后，还包括：

如果移除操作后，所述预览视图界面中未填充任何图片，则将所述预览视图界面从所述信息输入界面的顶部移除。

6.根据权利要求5所述的方法，其特征在于，在将所述预览视图界面从所述信息输入界面的顶部移除之后，还包括：

移动所述信息输入界面的顶部边界或者底部边界，以缩小所述信息输入界面的显示区域的区域面积，其中，缩小的区域面积与所述预览视图界面的面积相匹配。

7.根据权利要求1所述的方法，其特征在于，所述信息输入界面包括：评论输入界面；

获取用户在信息输入界面中选择添加的至少一张目标图片，包括：

根据在所述评论输入界面中检测到的图片评论添加请求，将图片选择器提供给用户进行图片的选择；

接收所述图片选择器反馈的，所述用户选择添加的至少一张目标图片。

8.一种图片预览信息的显示装置，其特征在于，应用于发布信息，包括：

目标图片获取模块，用于获取用户在信息输入界面中选择添加的至少一张目标图片；

预览视图界面生成模块，用于如果确定所述信息输入界面的顶部未设置有预览视图界面，则生成填充有所述目标图片的预览视图界面，所述预览视图界面用于对填充的图片进行小图预览，且随着用户编辑与图片关联的包含设定的图片关联标识的文字，将对应的图片居中显示于所述预览视图界面；

预览视图界面显示模块，用于将所述预览视图界面设置在所述信息输入界面的顶部进行显示；其中，所述预览视图界面中设置有滚动条；

删除图片获取模块，用于获取用户在当前显示的预览视图界面中选择删除的至少一张删除图片；其中，所述预览视图界面中的填充图片关联对应的删除选项；

删除图片移除模块，用于将所述删除图片从所述预览视图界面中移除；

图片排布方式更新模块，用于如果移除操作后，所述预览视图界面中填充有至少一张图片，则更新所述预览视图界面中的图片排布方式；

图片预览组件生成模块，用于在获取用户在信息输入界面中选择添加的至少一张目标图片之前，基于MVVM框架生成图片预览组件，所述图片预览组件包括：视图模型；所述视图模型用于根据注入的数据源生成所述预览视图界面；

目标图片注入模块，用于在获取用户在信息输入界面中选择添加的至少一张目标图片之前，如果确定所述信息输入界面上未设置有预览视图界面，则将所述至少一张目标图片注入至所述图片预览组件的所述视图模型中，以使完成图片填充的所述视图模型生成所述预览视图界面；

其中，图片排布方式更新模块，具体用于：

MVVM框架根据更新的集合列表进行预览视图界面以及信息输入界面的更新。

9.一种电子设备，其特征在于，包括：

一个或多个处理器；

存储器，用于存储一个或多个程序；

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如权利要求1-7任一项所述的图片预览信息的显示方法。

10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现如权利要求1-7任一项所述的图片预览信息的显示方法。

Images