CN112363721A - 用户界面的处理方法和装置 - Google Patents

Abstract

本公开公开了一种用户界面的处理方法和装置，属于通信技术领域。该用户界面的处理方法包括：获取目标图像；基于识别出的目标图像中每个元素的形状，得到目标图像对应的布局文件；在本地显示布局文件对应的用户界面。采用本公开提供的用户界面的处理方法和装置，可以提高对用户界面的处理效率。

Description

用户界面的处理方法和装置

技术领域

本公开涉及数据处理技术领域，具体涉及一种用户界面的处理方法和装置。

背景技术

客户端开发过程中，需要将目标图像转化成客户端布局文件。客户端基于布局文件可以显示该布局文件对应的用户界面(User Interface，UI)图像。UI图像通常用于描述客户端的页面效果。客户端布局文件用来描述客户端页面布局，包括控件以及控件之间的位置关系。

目前是开发人员根据自己以往的开发经验，人工基于目标图像生成对应的布局文件，效率低下，进而降低用户界面的处理效率。

发明内容

本公开实施例的目的是提供一种用户界面的处理方法、装置、电子设备及存储介质，以至少解决现有用户界面的处理效率较低的问题。

本公开的技术方案如下：

根据本公开实施例的第一方面，提供一种用户界面的处理方法，该方法可以包括：

获取目标图像；

基于识别出的目标图像中每个元素的形状，得到目标图像对应的布局文件；

在本地显示布局文件对应的用户界面。

在其中一个实施例中，基于识别出的目标图像中每个元素的形状，得到目标图像对应的布局文件，包括：

从目标图像识别出的元素中，选取符合预设布局条件的元素作为目标元素；预设布局条件包括元素的形状与多个预设形状中的任意一个预设形状相匹配；

根据每个目标元素的形状，得到目标图像对应的布局文件。

在其中一个实施例中，用户界面的处理方法还可以包括：

对识别出的目标图像中的每个元素进行边框识别，目标图像中的元素是基于图像分割算法进行识别的；

对于目标图像中的每个元素，若识别出元素具有边框，则将元素的边框的形状确定为元素的形状，若识别出元素无边框，则将元素的形状确定为包围元素的预设形状。

在其中一个实施例中，根据每个目标元素的形状，得到目标图像对应的布局文件，包括：

对于每个目标元素，基于目标元素的形状确定目标元素对应的控件，并将形状的约束位置信息确定为控件的约束位置信息；形状的约束位置信息是基于目标图像中除目标元素之外的其他目标元素的形状确定的；

基于每个控件以及每个控件的约束位置信息，得到目标图像对应的布局文件。

在其中一个实施例中，基于目标元素的形状确定目标元素对应的控件，包括：

基于预设的元素特征信息和控件的对应关系以及目标元素的特征信息，确定目标元素对应的控件；元素特征信息包括元素的形状。

在其中一个实施例中，对于目标形状，目标形状的约束位置信息包括目标形状与目标形状对应的父类形状的相对位置信息以及目标形状与目标形状对应的兄弟形状的相对位置信息；目标形状为目标图像中任意一个目标元素的形状；

目标形状对应的父类形状是基于每个目标元素的形状之间的位置关系确定的直接包围目标形状的形状，目标形状对应的兄弟形状是基于每个目标元素的形状之间的位置关系确定的与目标形状具有相同的父类形状，且与目标形状不交叠的形状。

在其中一个实施例中，获取目标图像，包括：

获取第一图像；

对识别出的第一图像中每个元素进行边框识别；

对识别出的第一图像中每个元素的边框进行加粗和/或锐化处理，得到处理后的第一图像；

基于处理后的第一图像，得到目标图像。

在其中一个实施例中，基于处理后的第一图像，得到目标图像，包括：

对处理后的第一图像进行模糊化处理，得到目标图像。

在其中一个实施例中，模糊化处理包括降噪处理以及降低灰度处理。

在其中一个实施例中，用户界面的处理方法还可以包括：

接收对布局文件的修改操作；

响应于修改操作，在本地显示与修改后的布局文件对应的用户界面。

根据本公开实施例的第二方面，提供一种用户界面的处理装置，该装置可以包括：

获取模块，被配置为执行获取目标图像；

布局文件确定模块，被配置为执行基于识别出的目标图像中每个元素的形状，得到目标图像对应的布局文件；

显示模块，被配置为执行在本地显示布局文件对应的用户界面。

在其中一个实施例中，布局文件确定模块，包括：

目标元素确定单元，被配置为执行从目标图像识别出的元素中，选取符合预设布局条件的元素作为目标元素；预设布局条件包括元素的形状与多个预设形状中的任意一个预设形状相匹配；

布局文件确定单元，被配置为执行根据每个目标元素的形状，得到目标图像对应的布局文件。

在其中一个实施例中，用户界面的处理装置还包括：

边框识别模块，被配置为执行对识别出的目标图像中的每个元素进行边框识别，目标图像中的元素是基于图像分割算法进行识别的；

形状确定模块，被配置为执行对于目标图像中的每个元素，若识别出元素具有边框，则将元素的边框的形状确定为元素的形状，若识别出元素无边框，则将元素的形状确定为包围元素的预设形状。

在其中一个实施例中，布局文件确定单元包括：

控件确定子单元，被配置为执行对于每个目标元素，基于目标元素的形状确定目标元素对应的控件，并将形状的约束位置信息确定为控件的约束位置信息；形状的约束位置信息是基于目标图像中除目标元素之外的其他目标元素的形状确定的；

布局文件确定子单元，被配置为执行基于每个控件以及每个控件的约束位置信息，得到目标图像对应的布局文件。

在其中一个实施例中，控件确定子单元用于：

基于预设的元素特征信息和控件的对应关系以及目标元素的特征信息，确定目标元素对应的控件；元素特征信息包括元素的形状。

在其中一个实施例中，对于目标形状，目标形状的约束位置信息包括目标形状与目标形状对应的父类形状的相对位置信息以及目标形状与目标形状对应的兄弟形状的相对位置信息；目标形状为目标图像中任意一个目标元素的形状；

目标形状对应的父类形状是基于每个目标元素的形状之间的位置关系确定的直接包围目标形状的形状，目标形状对应的兄弟形状是基于每个目标元素的形状之间的位置关系确定的与目标形状具有相同的父类形状，且与目标形状不交叠的形状。

在其中一个实施例中，获取模块，包括：

第一图像获取单元，被配置为执行获取第一图像；

边框识别单元，被配置为执行对识别出的第一图像中每个元素进行边框识别；

处理单元，被配置为执行对识别出的第一图像中每个元素的边框进行加粗和/或锐化处理，得到处理后的第一图像；

目标图像确定单元，被配置为执行基于处理后的第一图像，得到目标图像。

在其中一个实施例中，目标图像确定单元用于：

对处理后的第一图像进行模糊化处理，得到目标图像。

在其中一个实施例中，模糊化处理包括降噪处理以及降低灰度处理。

在其中一个实施例中，用户界面的处理装置还包括：

接收模块，被配置为执行接收对布局文件的修改操作；

显示模块，还被配置为执行响应于修改操作，在本地显示与修改后的布局文件对应的用户界面。

根据本公开实施例的第三方面，提供一种电子设备，该电子设备可以包括：

处理器；

用于存储处理器可执行指令的存储器；

其中，处理器被配置为执行指令，以实现如第一方面的任一项实施例中所示的用户界面的处理方法。

根据本公开实施例的第四方面，提供一种存储介质，当存储介质中的指令由用户界面的处理装置或者服务器的处理器执行时，以使用户界面的处理装置或者服务器实现以实现如第一方面的任一项实施例中所示的用户界面的处理方法。

根据本公开实施例的第五方面，提供一种计算机程序产品，该计算机程序产品包括计算机程序，该计算机程序存储在可读存储介质中，设备的至少一个处理器从存储介质读取并执行计算机程序，使得设备执行第一方面的任一项实施例中所示的用户界面的处理方法。

本公开的实施例提供的技术方案至少带来以下有益效果：

本公开实施例通过对目标图像中的元素进行形状识别，并基于识别出的目标图像中的每个元素的形状，自动得到目标图像的布局文件，并基于布局文件在本地显示布局文件对应的用户界面。本申请提供的用户界面的处理方法，通过对目标图像的元素进行形状识别，自动确定目标图像对应的布局文件，不需要人工基于目标图像生成对应的布局文件，提高了目标图像生成布局文件的效率，进而可以提高对用户界面的处理效率。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限值本公开。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本公开的实施例，并与说明书一起用于解释本公开的原理，并不构成对本公开的不当限定。

图1是根据一示例性实施例示出的一种用户界面的处理方法的流程图；

图2是根据一示例性实施例示出的一种用户界面的处理的架构图；

图3是根据一示例性实施例示出的另一种用户界面的处理方法的流程图；

图4是根据一示例性实施例示出的一种目标图像的示意图；

图5是根据一示例性实施例示出的一种目标图像的元素对应的形状的示意图；

图6是根据一示例性实施例示出的确定目标形状的约束位置信息的流程图；

图7是根据一示例性实施例示出的兄弟形状和父类形状的位置关系示意图；

图8是根据一示例性实施例示出的再一种用户界面的处理方法的流程图；

图9是根据一示例性实施例示出的又一种用户界面的处理方法的流程图

图10是根据一示例性实施例示出的又一种用户界面的处理方法的流程图

图11是根据一示例性实施例示出的一种用户界面的处理装置的结构框图；

图12是根据一示例性实施例示出的一种电子设备的结构框图。

具体实施方式

为了使本领域普通人员更好地理解本公开的技术方案，下面将结合附图，对本公开实施例中的技术方案进行清楚、完整地描述。

需要说明的是，本公开的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本公开的实施例能够以除了在这里图示或描述的那些以外的顺序实施。以下示例性实施例中所描述的实施方式并不代表与本公开相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本公开的一些方面相一致的装置和方法的例子。

为了引用和清楚起见，下文中使用的技术名词的说明，总结如下：

用户界面：软件系统的重要组成部分，可以用来接收用户的输入信息并显示程序处理的结果。用户界面是系统和用户之间进行交互和信息交换的媒介，它实现信息的内部形式与人类可以接受形式之间的转换。用户界面体现了软件在客户端的页面效果。其中，客户端是指具有数据处理能力的终端，包括但不限于智能手机、掌上电脑、平板电脑、计算机、个人数字助理、智能电视等。例如，客户端可以是指具有安卓(Android)系统的智能手机或者iOS系统的智能手机。

布局文件：布局文件大多都是描述语言，用于描述客户端的页面布局。布局文件可以用于描述用户界面中包括的用户界面控件以及用户界面控件之间的位置关系。例如，若客户端为具有安卓(Android)系统的电子设备，则布局文件可以为可扩展标记语言(Extensible Markup Language，XML)文件。若客户端为具有iOS系统的电子设备，则布局文件可以为XIB文件。XIB文件是一种用于描述iOS应用程序外观界面元素的可扩展标记语言。

用户界面控件：为用于开发构建用户界面的控件，帮助完成软件开发中视窗、文本框、按钮、下拉式菜单等界面元素的开发。其中，界面元素是指可满足交互需求的软件或系统界面所包含的满足用户交互要求的一系列界面元素。

电子设备通过调用布局文件，然后按照布局文件显示对应的用户界面。因此，在客户端开发过程中，搭建用户界面，以及生成用户界面对应的布局文件是非常重要的。在相关技术中，首先设计人员根据产品人员提出的需求设计与用户界面相关的目标图像，然后由开发人员基于目标图像开发对应的客户端布局文件。

图1示出相关技术中客户端布局文件的开发流程。如图1所示，首先，开发人员对目标图像进行初步分析。通过分析识别出目标图像中的元素。接着，开发人员从系统库中查找与目标图像中的元素对应的控件。即将目标图像中的元素进行控件的转化。其中，该系统库与客户端的操作系统相关。例如，客户端的操作系统可以为安卓系统或者iOS系统。若开发人员从系统库中查找到与目标图像中的元素对应的控件，则基于目标图像多次调整该控件的样式和位置，以达到和目标图像的效果基本一致，即满足要求。若开发人员未从系统库中找到目标图像中的元素对应的控件，则需要开发人员创建该元素对应的控件，并基于目标图像多次调整该控件的样式和位置，以达到和目标图像的效果基本一致。

目前，开发人员手动开发布局文件，主要利用研发的经验，需要开发人员多次基于目标图像调整控件的位置，进而达到和目标图像的视觉稿一致。但是，通过人工将目标图像转换为对应的布局文件，效率较为低下，进而降低对用户界面的处理效率。

基于此，本申请提供一种用户界面的处理方法、装置、电子设备及介质，可以实现基于目标图像自动生成为对应的布局文件，提高了布局文件的生成效率，进而可以提高用户界面的处理效率。

本公开所提供的用户界面的处理方法，可以应用于如图2的架构中，具体结合图2进行详细说明。

如图2所示，该架构图中可以包括电子设备20和用户21。基于上述架构，在开发人员需要根据目标图像得到用户界面的场景下，为了提高对用户界面的处理效率，则当开发人员获取已经设计好的目标图像之后，基于该架构，开发人员可以将目标图像存入电子设备20。用户21可以从电子设备20的本地存储中获取目标图像。然后，电子设备20自身可以对目标图像的元素的形状进行识别，并基于识别出的目标图像中每个元素的形状，得到目标图像对应的布局文件。其中，目标图像中元素可以为目标图像中的可满足交互需求的一系列元素，例如文字、符号、图形、图片等元素。最后电子设备20可以在本地显示布局文件对应的用户界面。如此可以实现基于目标图像自动生成布局文件，不需要人工多次基于目标图像调整目标图像中每个元素对应的控件的位置，节省了时间，可以提高对布局文件生成的效率，并在本地显示布局文件对应的用户界面，进而提高了对用户界面的处理效率。

根据上述架构以及应用场景，下面结合图3-图10对本公开实施例提供的用户界面的处理方法进行详细说明，该用户界面的处理方法可以由图2中所示的电子设备20执行，本公开实施例对此不作限定。

图3是根据一示例性实施例示出的一种用户界面的处理方法的流程图。

如图3所示，该用户界面的处理方法具体可以包括如下步骤：

步骤310，获取目标图像；

步骤320，基于识别出的目标图像中每个元素的形状，得到目标图像对应的布局文件；

步骤330，在本地显示布局文件对应的用户界面。

本公开实施例通过对目标图像中的元素进行形状识别，并基于识别出的目标图像中的每个元素的形状，自动得到目标图像的布局文件，并基于布局文件在本地显示布局文件对应的用户界面。本申请提供的用户界面的处理方法，通过对目标图像的元素进行形状识别，自动确定目标图像对应的布局文件，不需要人工基于目标图像生成对应的布局文件，提高了目标图像生成布局文件的效率，进而可以提高用户界面的处理效率。

下面对步骤310～步骤330中的每个步骤的具体实现方式进行详细说明。

首先，涉及步骤310，本公开实施例中的目标图像可以是UI设计人员预先设计的与用户界面相关的图像。例如，目标图像是由UI设计人员根据产品人员的需求设计出的具有用户界面显示效果的图像。图4是根据一示例性实施例示出的目标图像的示意图。图4示出的目标图像是一个短视频应用程序的用户界面的图像。

在本公开的一些实施例中，目标图像可以为psd格式的文件，psd格式是一种图形文件格式。对于目标图像的格式包括但不限于psd格式，也可以为bmp格式、jpg格式或者png格式等格式。

在本公开的一些实施例中，为了便于进一步提高生成布局文件的效率，可以预先设定目标图像的大小。例如，可以预先设定目标图像的输入格式为720p，从而便于统一进行识别，不需要单独再对不同大小的目标图像进行分别处理，以提高生成目标图像的布局文件的效率。

在本申请的一些实施例中，在步骤310之后和步骤320之前，本公开提供的用户界面的处理方法还包括：步骤311和步骤313。步骤311，对识别出的目标图像中的每个元素进行边框识别，目标图像中的元素是基于图像分割算法进行识别的；步骤313，对于目标图像中的每个元素，若识别出元素具有边框，则将元素的边框的形状确定为元素的形状，若识别出元素无边框，则将元素的形状确定为包围元素的预设形状。

本公开的实施例中，对于目标图像中的元素，有的元素有边框，有的元素没有边框。例如，图4中包含用户头像的圆形元素，该元素的边框的形状为圆形。对于图4中的文字元素(例如图4左上角的登录)以及搜索符号元素，均没有边框。

在本公开的实施例中，元素对应的形状可以为该元素自身的边框的形状或者包围该元素的边框的形状。例如，对于识别出的有边框的元素，则该元素的边框的形状即为该元素对应的形状。对于识别出的无边框的元素，则可以根据该元素的大小，为该元素生成一个边框，并将该生成的边框的形状作为该无边框界面元素对应的形状。

在本申请的实施例中，可以利用边框识别算法来识别目标图像中一个元素的边框。作为一个示例，边框识别算法可以为预先建立的边框识别模型，该边框识别模型可以识别出预先定义的边框，例如圆形边框、矩形边框等边框。通过利用具有不同边框的正样本图像和负样本图像，以及反向传播算法，则可以训练得到边框识别模型。

在本申请的实施例中，可以利用边框识别算法对目标图像的每个元素进行边框识别，若可以识别出该元素的边框，则该元素为有边框元素，则将该有边框元素的边框的形状确定为该元素对应的形状。例如，对于图4中的图像元素41，该元素自身具有边框，且该边框的形状为矩形，因此该元素对应的形状为图像元素41自身的轮廓对应的形状。

在本公开的实施例中，对于某个元素，若利用边框识别算法无法识别出该元素的边框，则认为该元素无边框。例如，图4中的文字元素“登录”，该元素没有边框，但是为了生成布局文件，为该元素生成一个边框，该边框可以包围“登录”即可。例如，可以为“登录”生成一个矩形框，该矩形框包围“登录”这两个字。

在本公开的实施例中，图5示出图4中的每个界面元素对应的形状。参见图4，对于无边框的元素，例如文字元素(例如登录以及4个数字)以及符号元素(例如心形符号以及搜索符号)，均生成了包括该元素的矩形边框。而对于四个面积较大的图片元素41以及用于表征用户头像的四个圆形的图像元素42，以及四个面积较小的图片元素43，均是有边框元素。对于这些有边框的元素对应的形状，则为该元素自身的边框的形状。

在本公开的实施例中，对于无边框的元素，为了便于布局文件的生成，则可以为该元素生成一个形状，即将该元素的形状确定为包围该元素的预设形状，以提高布局文件生成的准确性。

在本公开的实施例中，由于布局文件中包括控件之间的位置信息，而控件之间的位置信息一般包括控件的边框之间的相对位置信息。由于在生成目标图像的布局文件时，是基于目标图像中元素的形状形成的，因此将目标图像中元素的边框的形状确定为该元素的边框的形状，可以提高生成布局文件生成的准确性。

接着，涉及步骤320，在本公开的实施例中，目标图像中的元素可以为图像中的可满足交互需求的一系列元素，例如文字、符号、图片等元素。例如，参见图4，图4中的目标图像中的元素包括文字元素(例如图4左上角的登录)、符号元素(图4右上角的搜索符号)、图形元素(图4中的心形、包含有用户头像的圆形)以及图片元素等元素。

在本公开的一些实施例中，为了提高生成布局文件的广泛性，步骤320包括步骤3201和步骤3202。步骤3201，从目标图像识别出的元素中，选取符合预设布局条件的元素作为目标元素；预设布局条件包括元素的形状与多个预设形状中的任意一个预设形状相匹配；步骤3202，根据每个目标元素的形状，得到目标图像对应的布局文件。

在本公开的实施例中，目标图像中的元素可以是基于图像分割算法进行识别的。其中，可以先利用图像分割算法对目标图像进行处理，得到多个目标区域。图像分割就是把图像分成若干个特定的、具有独特性质的区域并提出感兴趣目标的技术和过程。它是由图像处理到图像分析的关键步骤。图像分割算法可以为：基于阈值的分割算法、基于区域的分割算法、基于边缘的分割算法以及基于特定理论的分割算法等。

然后，对图像分割算法得到的每个目标区域进行图像识别，以识别出目标图像中的元素。图像识别是指利用计算机对图像进行处理、分析和理解，以识别各种不同模式的目标和对象的技术，是应用深度学习算法的一种实践应用。例如，可以利用文字识别算法对每个目标区域进行识别，以识别出文字元素。再例如，可以利用符号识别算法识别出符号元素。对于既不是文字也不是符号的可以识别为图像元素。在本公开的实施例中，对于元素的识别的具体方法不做具体限定。

在本公开的实施例中，当识别出目标图像中的每个元素之后，可以基于预设布局条件筛选出目标元素。在一些实施例中，预设布局条件包括元素的形状与预设形状中的任意一个预设形状相匹配。在一些示例中，多个预设形状可以包括圆形、椭圆形以及矩形等形状。在一些实施例中，若元素的形状与某预设形状的相似度大于预设相似度阈值，则可以确定该元素的形状与该预设形状相匹配。

在本公开的实施例中，当筛选出每个目标元素之后，则可以根据每个目标元素的形状，得到目标图像对应的布局文件。

在本公开的实施例中，可以根据预设布局文件筛选出目标元素，以实现根据不同的布局需求生成目标图像对应的布局文件，因此适用性更加广泛。

在本公开的实施例中，步骤3201包括：对于每个目标元素，基于目标元素的形状确定目标元素对应的控件，并将形状的约束位置信息确定为控件的约束位置信息；形状的约束位置信息是基于目标图像中除目标元素之外的其他目标元素的形状确定的；基于每个控件以及每个控件的约束位置信息，得到目标图像对应的布局文件。

在本公开的一些实施例中，可以基于预设的元素特征信息和控件的对应关系以及目标元素的特征信息，确定目标元素对应的控件；其中，元素特征信息包括元素的形状。

在本公开的一些示例中，元素特征信息包括元素的形状。在本公开的另一些实施例中，元素特征信息包括元素的形状和元素的内容。

作为一个示例，若目标元素的元素特征信息包括目标元素的内容为文字以及目标元素的形状为矩形，则可以基于预设的元素特征信息和控件的对应关系，查找到该目标元素对应的控件为文字控件。作为另外一个示例，若目标元素的元素特征信息包括目标元素的形状圆形，则可以基于预设的元素特征信息和控件的对应关系，查找到该目标元素对应的控件为图片控件。作为又一些示例，若目标元素对应的形状为椭圆或者目标元素为带有边框的文字，则该目标元素对应的控件为按钮。

在本公开的实施例中，由于目标元素的元素特征信息可以体现该元素的属性特征，因此通过基于目标元素的元素特征信息确定目标元素对应的控件，可以提高对控件转换的准确性。

在本公开的实施例中，位置信息是用户界面控件的一个必要组成部分，因此，需要对每个目标元素对应的形状的位置关系进行约束。

在本公开的实施例中，对于目标形状，目标形状的约束位置信息包括目标形状与目标形状对应的父类形状的相对位置信息以及目标形状与目标形状对应的兄弟形状的相对位置信息；目标形状为目标图像中任意一个目标元素的形状。

在本公开的实施例中，目标形状对应的父类形状是基于每个目标元素的形状之间的位置关系确定的直接包围目标形状的形状，目标形状对应的兄弟形状是基于每个目标元素的形状之间的位置关系确定的与目标形状具有相同的父类形状，且与目标形状不交叠的形状。

在本申请的实施例中，对于目标图像中的一个目标元素，该目标元素对应的目标形状所对应的父类形状，是指能够直接容纳该目标形状的形状。也就是说，能够直接包围该目标形状的形状。参见图5，对于图5中的图片元素41的矩形形状是直接包围图像元素42的圆形形状的父类形状。

在本申请的实施例中，对于目标图像中的一个目标元素，该目标元素对应的目标形状所对应的兄弟形状，是指与该目标形状具有相同父类形状，且与目标形状无交叠的形状。参见图5，对于图5中的图片元素43的矩形形状50是直接包围心形图像元素对应的矩形形状51和数字元素对应的矩形形状52的父类形状。心形图像元素对应的矩形形状51和数字元素对应的矩形形状52互为对方的兄弟形状。

在本公开的实施例中，可以基于目标图像中每个目标元素对应的形状在该目标图像中的像素位置信息，可以确定形状之间的位置关系。例如，形状之间的关系可以为包围关系、部分重叠关系、不重叠关系等关系。因此，基于目标形状与目标图像中除目标形状对应的元素之外的其他每个元素各自所对应的形状之间的位置关系，可以确定目标形状对应的父类形状和兄弟形状。需要说明的是，对于一个目标形状，该目标形状可以只有父类形状或兄弟形状。

在本公开的实施例中，由于位置信息是控件的一个必要信息，且本公开实施例是利用识别出的元素对应的形状来生成目标图像对应的布局文件，因此需要对目标图像中每个目标元素的位置信息进行约束。参见图6，当识别出每个元素对应的形状之后，可以确定目标形状与其父类形状的相对位置信息，以及目标形状与其兄弟形状的相对位置信息，接着通过利用目标形状与其父类形状的相对位置信息，以及目标形状与其兄弟形状的相对位置信息，则可以确定目标形状的完整位置信息，实现对目标形状的位置信息进行更精确地约束。

在本申请的实施例中，在对目标图像中的每个元素的形状进行识别时，可以获取每个形状在目标图像中的像素位置信息，因此，根据目标形状在目标图像中的位置信息以及父类形状在目标图像中的位置信息，可以确定目标形状与父类形状的相对位置信息。并且，基于目标形状在目标图像中的位置信息以及兄弟形状在目标图像中的位置信息，确定目标形状与兄弟形状的相对位置信息。

在本申请的实施例中，目标形状与父类形状的相对位置信息包括目标形状沿多个不同的预设方向与父类形状之间的距离。目标形状与兄弟形状的相对位置关系包括目标形状沿多个不同的预设方向与兄弟形状之间的距离。

参见图7，以图5中的一个重复单元700为例，该重复单元700包括矩形71、圆形72、矩形73、矩形74和矩形75。作为一个示例，多个不同的预设方向包括图7中所示的第一方向、第二方向、第三方向和第四方向。

参见图7，对于圆形72而言，圆形72的父类形状是矩形71，圆形72无兄弟形状，因此圆形72的约束位置信息包括圆形72在第一方向、第二方向、第三方向和第四方向分别与矩形71之间的距离。

对于矩形73，矩形73的父类形状是矩形71，矩形73无兄弟形状，因此矩形73的约束位置信息包括矩形73在第一方向、第二方向、第三方向和第四方向分别与矩形71之间的距离。

对于矩形74，矩形74的父类形状是矩形73，矩形74的兄弟形状为矩形75。矩形74的约束位置信息包括矩形74在第一方向、第二方向、第三方向和第四方向分别与矩形73之间的距离以及矩形74在第一方向、第二方向、第三方向和第四方向分别与矩形75之间的距离。同理，对于矩形75，矩形75的父类形状是矩形73，矩形75的兄弟形状为矩形74。矩形75的约束位置信息包括矩形75在第一方向、第二方向、第三方向和第四方向分别与矩形73之间的距离以及矩形75在第一方向、第二方向、第三方向和第四方向分别与矩形74之间的距离。也就是说，图7中示出了图5中的重复单元700的带有约束位置信息的布局。

在本公开的实施例中，由于元素的形状可以体现出该元素的特征信息，因此通过基于目标元素的形状自动确定目标元素对应的控件，不仅提高了控件的转化效率，还可以提高控件转换的准确性。并且，由于目标元素的形状是目标元素的边框的形状，因此将目标元素的形状的约束位置信息确定为控件的约束位置信息，可以提高对控件的位置信息约束的准确性，进而可以提高布局文件生成的准确性。

在本申请的一些实施例中，图8是根据一示例性实施例示出的一种用户界面的处理方法的流程图。为了增加对目标图像中元素的形状识别的精度，步骤310包括：步骤3101～步骤3103。步骤3101，获取第一图像；步骤3102，对识别出的第一图像中每个元素进行边框识别；步骤3103，对识别出的第一图像中每个元素的边框进行加粗和/或锐化处理，得到处理后的第一图像；步骤3104，基于处理后的第一图像，得到目标图像。

在本公开的实施例中，步骤3102的具体实现方式与步骤311的具体实现方式相类似，在此不再赘述。例如，可以利用边框识别算法来识别第一图像中每个元素的边框。

在一些实施例中，可以对第一图像中每个元素的边框进行加粗处理。例如，对边框进行加粗处理包括对识别出的边框的宽度进行增加，以实现对边框的加粗。通过对边框进行加粗，可以提高步骤311中对形状的识别精度，进而提高生成的布局文件的精度。

在本公开的实施例中，锐化处理是补偿图像的轮廓，增强图像的边缘及灰度跳变的部分，是为了突出图像上地物的边缘、轮廓，或某些线性目标要素的特征。

在本申请的实施例中，通过对目标图像的边框进行锐化处理，可以对边框进行锐化，提高目标图像中元素的边框的识别率。

在步骤3104中，可以将处理后的第一图像直接确定为目标图像。

在本申请的一些实施例中，为了进一步增加对目标图像中元素的形状识别的精度，步骤3104包括：对处理后的第一图像进行模糊化处理，得到目标图像。

在本申请的实施例中，通过对处理后的第一图像进行模糊化处理，则可以降低非边框内容对边框识别的干扰，从而可以提高对目标图像中元素的边框识别的准确度。

在一些实施例中，模糊化处理包括降噪处理以及降低灰度处理。

其中，图像降噪是指减少数字图像中噪声的过程，有时候又称为图像去噪。例如，可以采用邻域平均法的均值滤波器、几何均值滤波器、自适应维纳滤波器或者小波去噪等图像降噪方法去除处理后的第一图像中的噪声。

需要说明的是，降噪处理以及降低灰度处理的处理顺序不做限制。在步骤3104中，可以先对处理后的第一图像进行降噪处理，然后对降噪处理后的图像进行降低灰度处理，得到目标图像。在步骤3104中，也可以先对处理后的第一图像进行减低灰度处理，然后对降低灰度处理后的图像进行降噪处理，得到目标图像。

在本公开的实施例中，通过对处理后的第一图像进行降噪处理，可以减少图像中的噪声对目标图像中元素的形状进行识别的干扰，以提高对目标图像中元素的形状识别的精确度。

在本公开的实施例中，由于在步骤3103中已经对目标图像中边框进行了突出处理，因此在步骤3104中对处理后的第一图像进行降低灰度处理，可以在目标图像中的边框保持一定清晰度的基础上对非边框内容进行了模糊化处理，即弱化非边框内容，从而可以提高对目标图像中有边框元素的形状进行识别的精确性，进而提高生成布局文件的精确性。

图9是根据一示例性实施例示出的一种用户界面的处理方法的流程图。如图9所示，首先获取第一图像。然后，对识别出的第一图像中每个元素的边框进行加粗处理，得到处理后的第一图像。接着，对处理后的第一图像进行模糊化处理，得到第二图像。再接着，对识别出的目标图像中的每个元素进行边框识别。若识别出元素具有边框，则将元素的边框的形状确定为元素的形状，若识别出元素无边框，则将元素的形状确定为包围元素的预设形状，以得到每个元素的形状。再然后，对每个形状进行位置约束添加，得到每个元素的形状的约束位置信息。再接着，对于目标图像中的每个元素，基于该元素的形状确定该元素对应的控件，并将该形状的约束位置信息确定为该控件的约束位置信息。紧接着基于每个控件以及每个控件的约束位置信息，得到目标图像对应的布局文件。最后可以在本地显示布局文件对应的用户界面。

在本公开的实施例中，通过对目标面图像中的元素进行形状识别，并基于该形状对应的元素进一步转换为对应的控件，更将目标图像中的元素的位置和元素的内容联系在一起，生成了无差别的布局文件，而且避免开发人员和UI设计人员多次对位置进行校准，节省了时间，进而提高了布局文件生成的效率，进而提升了用户界面的处理效率。

图10是根据一示例性实施例示出的一种用户界面的处理方法的流程图。在本申请的一些实施例中，为了提高对用户界面处理的灵活性，在步骤330之后，本申请提供的用户界面的处理方法还包括步骤340和步骤350。步骤340，接收对布局文件的修改操作；步骤350，响应于修改操作，在本地显示与修改后的布局文件对应的用户界面。

在本申请的实施例中，对布局文件的修改操作可以是对布局文件中控件之间的约束位置信息的修改操作。例如，修改操作可以包括对布局文件中的信息的删除操作和增加操作。

在本申请的实施例中，通过响应于对布局文件的修改操作，在本地显示与修改后的布局文件对应的用户界面，可以向用户展示用户界面的显示效果，以使用户便于对用户界面的显示方式进行修改，提高了用户界面处理的灵活性。

近年来React Native和Flutter盛行，一套代码可以Android和iOS公用的多端复用技术。React Native是开源的跨平台移动应用开发框架，支持iOS和安卓两大平台。ReactNative使用Javascript语言，因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。React Native着力于提高多平台开发的开发效率。Flutter是开源的UI工具包，帮助开发者通过一套代码库高效构建多平台精美应用，支持移动、Web、桌面和嵌入式平台。

在本公开的实施例中，利用本申请提供的用户界面布局文件的生成方法，将布局转换引擎进行升级，就可以适应React Native和Flutter这些新技术，进而提高研发效率。

在本公开的实施例中，通过将目标图像自动转化成客户端布局文件，不用根据目标图像从头开始开发，可以节省开发时间，提高研发效率，进而降低研发成本。

需要说明的是，上述本公开实施例描述的应用场景是为了更加清楚的说明本公开实施例的技术方案，并不构成对于本公开实施例提供的技术方案的限定，本领域普通技术人员可知，随着新应用场景的出现，本公开实施例提供的技术方案对于类似的技术问题，同样适用。

基于相同的发明构思，本公开还提供了一种用户界面的处理装置。具体结合图11进行详细说明。

图11是根据一示例性实施例示出的一种用户界面的处理装置的结构示意图。

如图11所示，该用户界面的处理装置11具体可以包括：

获取模块1110，被配置为执行获取目标图像；

布局文件确定模块1120，被配置为执行基于识别出的目标图像中每个元素的形状，得到目标图像对应的布局文件；

显示模块1130，被配置为执行在本地显示布局文件对应的用户界面。

本公开实施例通过对目标图像中的元素进行形状识别，并基于识别出的目标图像中的每个元素的形状，自动得到目标图像的布局文件，并基于布局文件在本地显示布局文件对应的用户界面。本申请提供的用户界面的处理方法，通过对目标图像的元素进行形状识别，自动确定目标图像对应的布局文件，不需要人工基于目标图像生成对应的布局文件，提高了目标图像生成布局文件的效率，进而可以提高用户界面的处理效率。

在本公开的一些实施例中，布局文件确定模块1120，包括：

目标元素确定单元，被配置为执行从目标图像识别出的元素中，选取符合预设布局条件的元素作为目标元素；预设布局条件包括元素的形状与多个预设形状中的任意一个预设形状相匹配；

布局文件确定单元，被配置为执行根据每个目标元素的形状，得到目标图像对应的布局文件。

在本公开的一些实施例中，参见图11，用户界面的处理装置11还包括：

边框识别模块1140，被配置为执行对识别出的目标图像中的每个元素进行边框识别，目标图像中的元素是基于图像分割算法进行识别的；

形状确定模块1150，被配置为执行对于目标图像中的每个元素，若识别出元素具有边框，则将元素的边框的形状确定为元素的形状，若识别出元素无边框，则将元素的形状确定为包围元素的预设形状。

在本公开的一些实施例中，布局文件确定单元包括：

控件确定子单元，被配置为执行对于每个目标元素，基于目标元素的形状确定目标元素对应的控件，并将形状的约束位置信息确定为控件的约束位置信息；形状的约束位置信息是基于目标图像中除目标元素之外的其他目标元素的形状确定的；

布局文件确定子单元，被配置为执行基于每个控件以及每个控件的约束位置信息，得到目标图像对应的布局文件。

在本公开的一些实施例中，控件确定子单元用于：

基于预设的元素特征信息和控件的对应关系以及目标元素的特征信息，确定目标元素对应的控件；元素特征信息包括元素的形状。

在本公开的一些实施例中，对于目标形状，目标形状的约束位置信息包括目标形状与目标形状对应的父类形状的相对位置信息以及目标形状与目标形状对应的兄弟形状的相对位置信息；目标形状为目标图像中任意一个目标元素的形状；

目标形状对应的父类形状是基于每个目标元素的形状之间的位置关系确定的直接包围目标形状的形状，目标形状对应的兄弟形状是基于每个目标元素的形状之间的位置关系确定的与目标形状具有相同的父类形状，且与目标形状不交叠的形状。

在本公开的一些实施例中，获取模块1110，包括：

第一图像获取单元，被配置为执行获取第一图像；

边框识别单元，被配置为执行对识别出的第一图像中每个元素进行边框识别；

处理单元，被配置为执行对识别出的第一图像中每个元素的边框进行加粗和/或锐化处理，得到处理后的第一图像；

目标图像确定单元，被配置为执行基于处理后的第一图像，得到目标图像。

在本公开的一些实施例中，目标图像确定单元用于：

对处理后的第一图像进行模糊化处理，得到目标图像。

在本公开的一些实施例中，模糊化处理包括降噪处理以及降低灰度处理。

在本公开的一些实施例中，参见图11，用户界面的处理装置11还包括：

接收模块1160，被配置为执行接收对布局文件的修改操作；

显示模块1130，还被配置为执行响应于修改操作，在本地显示与修改后的布局文件对应的用户界面。

关于上述实施例中的装置，其中各个模块执行操作的具体方式已经在有关该方法的实施例中进行了详细描述，此处将不做详细阐述说明。

基于同一发明构思，本公开实施例还提供了一种电子设备，具体结合图12进行详细说明。

图12是根据一示例性实施例示出的一种电子设备的结构框图。

如图12所示，该电子设备12能够实现根据本公开实施例中的用户界面的处理方法以及用户界面的处理装置的计算设备的示例性硬件架构的结构图。该计算设备可以指代本公开实施例中的电子设备以及服务器。

该电子设备12可以包括处理器1201以及存储有计算机程序指令的存储器1202。

具体地，上述处理器1201可以包括中央处理器(CPU)，或者特定集成电路(application specific integrated circuit，ASIC)，或者可以被配置成实施本申请实施例的一个或多个集成电路。

存储器1202可以包括用于信息或指令的大容量存储器。举例来说而非限制，存储器1202可包括硬盘驱动器(hard disk drive，HDD)、软盘驱动器、闪存、光盘、磁光盘、磁带或通用串行总线(universal serial bus，USB)驱动器或者两个及其以上这些的组合。在合适的情况下，存储器1202可包括可移除或不可移除(或固定)的介质。在合适的情况下，存储器1202可在综合网关设备的内部或外部。在特定实施例中，存储器1202是非易失性固态存储器。在特定实施例中，存储器1202包括只读存储器(ROM)。在合适的情况下，该ROM可以是掩模编程的ROM、可编程ROM(PROM)、可擦除PROM(EPROM)、电可擦除PROM(EEPROM)、电可改写ROM(EAROM)或闪存，或者两个或及其以上这些的组合。

处理器1201通过读取并执行存储器1202中存储的计算机程序指令，以执行如下步骤：

处理器1201，执行获取目标图像；基于识别出的目标图像中每个元素的形状，得到目标图像对应的布局文件；在本地显示布局文件对应的用户界面。

在其中一个实施例中，上述涉及的处理器1201执行从目标图像识别出的元素中，选取符合预设布局条件的元素作为目标元素；预设布局条件包括元素的形状与多个预设形状中的任意一个预设形状相匹配；根据每个目标元素的形状，得到目标图像对应的布局文件。

在其中一个实施例中，上述涉及的处理器1201执行对识别出的目标图像中的每个元素进行边框识别，目标图像中的元素是基于图像分割算法进行识别的；对于目标图像中的每个元素，若识别出元素具有边框，则将元素的边框的形状确定为元素的形状，若识别出元素无边框，则将元素的形状确定为包围元素的预设形状。

在其中一个实施例中，上述涉及的处理器1201执行对于每个目标元素，基于目标元素的形状确定目标元素对应的控件，并将形状的约束位置信息确定为控件的约束位置信息；形状的约束位置信息是基于目标图像中除目标元素之外的其他目标元素的形状确定的；

基于每个控件以及每个控件的约束位置信息，得到目标图像对应的布局文件。

在其中一个实施例中，上述涉及的处理器1201执行基于预设的元素特征信息和控件的对应关系以及目标元素的特征信息，确定目标元素对应的控件；元素特征信息包括元素的形状。

在其中一个实施例中，上述涉及的处理器1201执行获取第一图像；对识别出的第一图像中每个元素进行边框识别；对识别出的第一图像中每个元素的边框进行加粗和/或锐化处理，得到处理后的第一图像；基于处理后的第一图像，得到目标图像。

在其中一个实施例中，上述涉及的处理器1201执行对处理后的第一图像进行模糊化处理，得到目标图像。

在其中一个实施例中，上述涉及的处理器1201执行接收对布局文件的修改操作；响应于修改操作，在本地显示与修改后的布局文件对应的用户界面

在一个示例中，该电子设备12还可包括收发器1203和总线1204。其中，如图12所示，处理器1201、存储器1202和收发器1203通过总线1204连接并完成相互间的通信。

总线1204包括硬件、软件或两者。举例来说而非限制，总线可包括加速图形端口(AGP)或其他图形总线、增强工业标准架构(EISA)总线、前端总线(FSB)、超传输(HT)互连、工业标准架构(ISA)总线、无限带宽互连、低引脚数(LPC)总线、存储器总线、微信道架构(MCA)总线、外围控件互连(PCI)总线、PCI-Express(PCI-X)总线、串行高级技术附件(SATA)总线、视频电子标准协会局部(VLB)总线或其他合适的总线或者两个或更多个以上这些的组合。在合适的情况下，总线1204可包括一个或多个总线。尽管本申请实施例描述和示出了特定的总线，但本申请考虑任何合适的总线或互连。

本公开实施例还提供了一种计算机存储介质，计算机存储介质中存储有计算机可执行指令，计算机可执行指令用于实现本公开任一实施例所记载的用户界面的处理方法。

在一些可能的实施方式中，本公开提供的方法的各个方面还可以实现为一种程序产品的形式，其包括程序代码，当程序产品在计算机设备上运行时，程序代码用于使计算机设备执行本说明书上述描述的根据本公开各种示例性实施方式的方法中的步骤，例如，计算机设备可以执行本公开实施例所记载的用户界面的处理方法。

所述程序产品可以采用一个或多个可读介质的任意组合。可读介质可以是可读信号介质或者可读存储介质。可读存储介质例如可以是但不限于：电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。

本公开是参照根据本公开的方法、设备和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程用户界面的处理设备的处理器以产生一个机器，使得通过计算机或其他可编程用户界面的处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程用户界面的处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程用户界面的处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

显然，本领域的技术人员可以对本公开进行各种改动和变型而不脱离本公开的精神和范围。这样，倘若本公开的这些修改和变型属于本公开权利要求及其等同技术的范围之内，则本公开也意图包含这些改动和变型在内。

Claims (10)

1.一种用户界面的处理方法，其特征在于，包括：

获取目标图像；

基于识别出的所述目标图像中每个元素的形状，得到所述目标图像对应的布局文件；

在本地显示所述布局文件对应的用户界面。

2.根据权利要求1所述的方法，其特征在于，所述基于识别出的所述目标图像中每个元素的形状，得到所述目标图像对应的布局文件，包括：

从所述目标图像识别出的元素中，选取符合预设布局条件的元素作为目标元素；所述预设布局条件包括元素的形状与多个预设形状中的任意一个预设形状相匹配；

根据每个目标元素的形状，得到所述目标图像对应的布局文件。

3.根据权利要求1所述的方法，其特征在于，所述方法还包括：

对识别出的所述目标图像中的每个元素进行边框识别，所述目标图像中的元素是基于图像分割算法进行识别的；

对于所述目标图像中的每个元素，若识别出所述元素具有边框，则将所述元素的边框的形状确定为所述元素的形状，若识别出所述元素无边框，则将所述元素的形状确定为包围所述元素的预设形状。

4.根据权利要求2所述的方法，其特征在于，所述根据每个目标元素的形状，得到所述目标图像对应的布局文件，包括：

对于每个所述目标元素，基于所述目标元素的形状确定所述目标元素对应的控件，并将所述形状的约束位置信息确定为所述控件的约束位置信息；所述形状的约束位置信息是基于所述目标图像中除所述目标元素之外的其他目标元素的形状确定的；

基于每个所述控件以及每个所述控件的约束位置信息，得到所述目标图像对应的布局文件。

5.根据权利要求4所述的方法，其特征在于，所述基于所述目标元素的形状确定所述目标元素对应的控件，包括：

基于预设的元素特征信息和控件的对应关系以及所述目标元素的特征信息，确定所述目标元素对应的控件；元素特征信息包括元素的形状。

6.根据权利要求4所述的方法，其特征在于，对于目标形状，所述目标形状的约束位置信息包括所述目标形状与所述目标形状对应的父类形状的相对位置信息以及所述目标形状与所述目标形状对应的兄弟形状的相对位置信息；所述目标形状为所述目标图像中任意一个目标元素的形状；

所述目标形状对应的父类形状是基于每个所述目标元素的形状之间的位置关系确定的直接包围所述目标形状的形状，所述目标形状对应的兄弟形状是基于每个所述目标元素的形状之间的位置关系确定的与所述目标形状具有相同的父类形状，且与所述目标形状不交叠的形状。

7.根据权利要求1所述的方法，其特征在于，所述获取目标图像，包括：

获取第一图像；

对识别出的所述第一图像中每个元素进行边框识别；

对识别出的所述第一图像中每个元素的边框进行加粗和/或锐化处理，得到处理后的第一图像；

基于所述处理后的第一图像，得到所述目标图像。

8.根据权利要求7所述的方法，其特征在于，所述基于所述处理后的第一图像，得到所述目标图像，包括：

对所述处理后的第一图像进行模糊化处理，得到所述目标图像。

9.根据权利要求1所述的方法，其特征在于，所述方法还包括：

接收对所述布局文件的修改操作；

响应于所述修改操作，在本地显示与修改后的布局文件对应的用户界面。

10.一种用户界面的处理装置，其特征在于，包括：

获取模块，被配置为执行获取目标图像；

布局文件确定模块，被配置为执行基于识别出的所述目标图像中每个元素的形状，得到所述目标图像对应的布局文件；

显示模块，被配置为执行在本地显示所述布局文件对应的用户界面。

Images