一种布局关系的代码生成方法及装置与流程

本发明涉及应用程序技术领域，特别是涉及一种布局关系的代码生成方法及装置。

背景技术：

在ui(userinterface，用户界面)开发场景中，通常由设计人员对ui界面进行设计，得到设计文件，再由开发人员根据设计文件进行ui开发。

设计人员所设计的ui界面通常包含多个图层，各个图层可能会分布在ui的不同位置，形成图层之间的布局关系。开发人员在开发ui过程中需要通过代码实现上述布局关系。

现有技术中，一般需要开发人员分析设计文件，得到上述布局关系，再依据布局关系编写代码。这样导致生成布局关系的代码过程中需要花费较大的人力资源，导致生成布局关系的代码的效率较低。

技术实现要素：

本发明实施例的目的在于提供一种布局关系的代码生成方法，以提高生成布局关系的代码的效率。具体技术方案如下：

在本发明实施的第一方面，首先提供了一种布局关系的代码生成方法，所述方法包括：

确定用户界面的设计文件反映的所述用户界面中各个图层的位置与尺寸；

根据各个图层的位置，确定各个图层的依赖信息，每一图层的依赖信息表征生成所述用户界面时确定该图层位置要参考的位置；

根据每一图层的依赖信息和每一图层的位置，获得每一图层的位置与该图层的依赖信息所表示的位置间相对位置的描述信息；

根据每一图层的描述信息和尺寸，生成各个图层的布局关系；

参照预设的代码规则，生成用于描述所述布局关系的代码。

本发明的一个实施例中，所述根据各个图层的位置，确定各个图层的依赖信息，包括：

确定各个图层中的基准图层，并根据所述基准图层的位置获得所述基准图层的备选依赖信息；

根据各个图层的位置，确定所述用户界面中外层的图层单元，其中，所述图层单元为：图层行或图层列，所述图层行中各图层沿横向扩展后与至少一个其他图层存在相交区域，所述图层列中各图层沿纵向扩展后与至少一个其他图层存在相交区域；

按照预设的遍历顺序确定方式，确定各个外层的图层单元的遍历顺序，其中，所述遍历顺序确定方式为：根据图层单元与用户界面的边缘之间的距离，以及图层单元之间的距离，确定图层单元的遍历顺序；

针对每一外层的图层单元，以该图层单元为待操作单元，按照所述遍历顺序确定方式，获得所述待操作单元中按照行列交错方式确定的图层单元的遍历顺序，将所述待操作单元更新为所确定的图层单元中包含多个图层的图层单元，并返回所述按照所述遍历顺序确定方式，获得所述待操作单元中按照行列交错方式确定的图层单元的遍历顺序的步骤，直至所确定的图层单元中不存在包含多个图层的图层单元，其中，所述行列交错方式为：所述待操作单元为图层行时，所确定的图层单元为图层列，所述待操作图层单元为图层列时，所确定的图层单元为图层行；

针对除所述基准图层外的每一图层，将第一图层、第二图层以及所述基准图层作为该图层的备选依赖信息，其中，所述第一图层为：遍历顺序位于目标图层单元之前的外层的图层单元所包含的图层，所述第二图层为：在所述目标图层单元中遍历顺序位于该图层之前的图层，所述目标图层单元为：该图层所在的外层的图层单元；

根据每一图层的备选依赖信息，确定每一图层的依赖信息。

本发明的一个实施例中，所述根据每一图层的备选依赖信息，确定每一图层的依赖信息，包括：

按照以下方式确定每一图层的依赖信息：

从该图层的备选依赖信息中，选择所表征的位置与图层的位置间横向距离最小的第一备选依赖信息；

从该图层的备选依赖信息中，选择所表征的位置与图层的位置间纵向距离最小的第二备选依赖信息；

将所述第一备选依赖信息与第二备选依赖信息确定为该图层的依赖信息。

本发明的一个实施例中，所述根据每一图层的描述信息和尺寸，生成各个图层的布局关系，包括：

根据每一图层的描述信息，生成按照以下方式中的一种描述图层尺寸的各个图层的布局关系：

在所述布局关系中以所述设计文件反映的图层的尺寸描述图层尺寸；

在所述布局关系中以图层与其父图层间的比例描述图层尺寸；

在所述布局关系中以图层中内容的尺寸描述图层尺寸；

在所述布局关系中以图层的宽高比描述图层尺寸。

本发明的一个实施例中，在图层上存在蒙版的情况下，所述设计文件反映的图层的尺寸为：图层与蒙版间重叠区域的尺寸。

在本发明实施的第二方面，还提供了一种布局关系的代码生成装置，所述装置包括：

位置尺寸确定模块，用于确定用户界面的设计文件反映的所述用户界面中各个图层的位置与尺寸；

依赖信息确定模块，用于根据各个图层的位置，确定各个图层的依赖信息，每一图层的依赖信息表征生成所述用户界面时确定该图层位置要参考的位置；

描述信息获得模块，用于根据每一图层的依赖信息和每一图层的位置，获得每一图层的位置与该图层的依赖信息所表示的位置间相对位置的描述信息；

布局关系生成模块，用于根据每一图层的描述信息和尺寸，生成各个图层的布局关系；

代码生成模块，用于参照预设的代码规则，生成用于描述所述布局关系的代码。

本发明的一个实施例中，所述依赖信息确定模块，包括：

第一备选确定子模块，用于确定各个图层中的基准图层，并根据所述基准图层的位置获得所述基准图层的备选依赖信息；

外层单元确定子模块，用于根据各个图层的位置，确定所述用户界面中外层的图层单元，其中，所述图层单元为：图层行或图层列，所述图层行中各图层沿横向扩展后与至少一个其他图层存在相交区域，所述图层列中各图层沿纵向扩展后与至少一个其他图层存在相交区域；

外层顺序确定子模块，用于按照预设的遍历顺序确定方式，确定各个外层的图层单元的遍历顺序，其中，所述遍历顺序确定方式为：根据图层单元与用户界面的边缘之间的距离，以及图层单元之间的距离，确定图层单元的遍历顺序；

图层顺序确定子模块，用于针对每一外层的图层单元，以该图层单元为待操作单元，按照所述遍历顺序确定方式，获得所述待操作单元中按照行列交错方式确定的图层单元的遍历顺序，将所述待操作单元更新为所确定的图层单元中包含多个图层的图层单元，并返回所述按照所述遍历顺序确定方式，获得所述待操作单元中按照行列交错方式确定的图层单元的遍历顺序的步骤，直至所确定的图层单元中不存在包含多个图层的图层单元，其中，所述行列交错方式为：所述待操作单元为图层行时，所确定的图层单元为图层列，所述待操作图层单元为图层列时，所确定的图层单元为图层行；

第二备选确定子模块，用于针对除所述基准图层外的每一图层，将第一图层、第二图层以及所述基准图层作为该图层的备选依赖信息，其中，所述第一图层为：遍历顺序位于目标图层单元之前的外层的图层单元所包含的图层，所述第二图层为：在所述目标图层单元中遍历顺序位于该图层之前的图层，所述目标图层单元为：该图层所在的外层的图层单元；

依赖信息确定子模块，用于根据每一图层的备选依赖信息，确定每一图层的依赖信息。

本发明的一个实施例中，所述依赖信息确定子模块，具体用于：

按照以下方式确定每一图层的依赖信息：

从该图层的备选依赖信息中，选择所表征的位置与图层的位置间横向距离最小的第一备选依赖信息；

从该图层的备选依赖信息中，选择所表征的位置与图层的位置间纵向距离最小的第二备选依赖信息；

将所述第一备选依赖信息与第二备选依赖信息确定为该图层的依赖信息。

本发明的一个实施例中，所述布局关系生成模块，具体用于：

根据每一图层的描述信息，生成按照以下方式中的一种描述图层尺寸的各个图层的布局关系：

在所述布局关系中以所述设计文件反映的图层的尺寸描述图层尺寸；

在所述布局关系中以图层与其父图层间的比例描述图层尺寸；

在所述布局关系中以图层中内容的尺寸描述图层尺寸；

在所述布局关系中以图层的宽高比描述图层尺寸。

本发明的一个实施例中，在图层上存在蒙版的情况下，所述设计文件反映的图层的尺寸为：图层与蒙版间重叠区域的尺寸。

第三方面，本发明实施例提供了一种电子设备，包括处理器、通信接口、存储器和通信总线，其中，处理器，通信接口，存储器通过通信总线完成相互间的通信；

存储器，用于存放计算机程序；

处理器，用于执行存储器上所存放的程序时，实现上述第一方面任一所述的方法步骤。

在本发明实施的又一方面，还提供了一种计算机可读存储介质，所述计算机可读存储介质内存储有计算机程序，所述计算机程序被处理器执行时实现上述第一方面任一所述的方法步骤。

在本发明实施的又一方面，还提供了一种包含指令的计算机程序产品，当其在计算机上运行时，使得计算机执行上述第一方面任一所述的方法步骤。

由以上可见，本发明实施例提供的生成布局关系的代码的方案中，可以根据用户界面的设计文件确定每一图层的依赖信息以及该图层与该图层的依赖信息表征的位置之间的相对位置的描述信息，从而使得每一图层均可以根据依赖信息表征的位置确定自身的位置，因此根据每一图层的尺寸和描述信息便可以确定各个图层的布局关系，参照布局关系和预设的代码规则便可以生成用于描述布局关系的代码。此过程中不需要开发人员分析设计文件并确定图层的布局关系，可以直接根据设计文件记录的信息确定图层的布局关系，并生成布局关系的代码，因此节省了人力资源，提高了生成布局关系的代码的效率。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍。

图1为本发明实施例中提供的第一种布局关系的代码生成方法的流程示意图；

图2为本发明实施例中提供的第二种布局关系的代码生成方法的流程示意图；

图3为本发明实施例中提供的一种用户界面中图层分布的示意图；

图4为本发明实施例中提供的第三种布局关系的代码生成方法的流程示意图；

图5为本发明实施例中提供的第一种布局关系的代码生成装置的结构示意图；

图6为本发明实施例中提供的第二种布局关系的代码生成装置的结构示意图；

图7为本发明实施例中提供的一种电子设备的结构示意图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行描述。

由于当前生成布局关系的代码的效率较低，为解决这一问题，本发明实施例提供了一种布局关系的代码生成方法及装置。

本发明的一个实施例中，提供了一种布局关系的代码生成方法，上述方法包括：

确定用户界面的设计文件反映的上述用户界面中各个图层的位置与尺寸。

根据各个图层的位置，确定各个图层的依赖信息，每一图层的依赖信息表征生成上述用户界面时确定该图层位置要参考的位置。

根据每一图层的依赖信息和每一图层的位置，获得每一图层的位置与该图层的依赖信息所表示的位置间相对位置的描述信息。

根据每一图层的描述信息和尺寸，生成各个图层的布局关系。

参照预设的代码规则，生成用于描述上述布局关系的代码。

由以上可见，可以根据用户界面的设计文件确定每一图层的依赖信息以及该图层与该图层的依赖信息表征的位置之间的相对位置的描述信息，从而使得每一图层均可以根据依赖信息表征的位置确定自身的位置，因此根据每一图层的尺寸和描述信息便可以确定各个图层的布局关系，参照布局关系和预设的代码规则便可以生成用于描述布局关系的代码。此过程中不需要开发人员分析设计文件并确定图层的布局关系，可以直接根据设计文件记录的信息确定图层的布局关系，并生成布局关系的代码，因此节省了人力资源，提高了生成布局关系的代码的效率。

下面通过具体的实施例对本发明实施例提供的布局关系的代码生成方法及装置进行说明。

参见图1，本发明实施例提供了第一种布局关系的代码生成方法的流程示意图，上述方法包括以下步骤s101-s105。

s101：确定用户界面的设计文件反映的上述用户界面中各个图层的位置与尺寸。

其中，上述设计文件可以为sketch文件，由于设计文件是设计人员设计用户界面时生成的文件，因此sketch文件中的各个图层可以分别表示用户界面中的图层，则sketch文件中各个图层的位置与尺寸即为用户界面中各个图层的位置与尺寸。在sketch文件中包含symbol类型的图层的情况下，symbol类型的图层中可以包含其他图层，可以只确定symbol类型的图层中所包含的其他图层的位置与尺寸，而不确定symbol类型的图层的位置与尺寸。

另外，上述设计文件也可以为图片形式的文件，图片内容表示的是用户界面，还可以以数字的形式记录每一图层的位置与尺寸。

具体的，上述位置为设计文件反映的各个图层在用户界面中的绝对位置，上述位置可以根据用户界面的预设坐标系确定，例如，由于大多数用户界面均为矩形，因此上述坐标系的坐标原点可以为用户界面的左上角顶点，水平向右的方向为坐标系的横轴正向，垂直向下的方向为坐标系的纵轴正向，另外，也可以以用户界面的右上角顶点、左下角顶点或其他用户界面中的任意点。

可以通过图层中预设点在用户界面中的位置表示图层在用户界面中的位置，例如，上述图层大多为规则图形，如矩形，可以以图层左上角顶点作为预设点，以左上角顶点在用户界面中的位置表示图层的位置，也可以以图层右上角顶点、右下角顶点、左下角顶点或图层中的任意点作为上述预设点。

另外，由于上述图层大多为规则图形，如矩形，因此可以通过图层的长与高的尺寸确定上述图层的尺寸。

本发明的一个实施例中，在图层上存在蒙版的情况下，由于图层中仅有与蒙版重叠的区域能够被显示，因此在图层上存在蒙版的情况下，上述设计文件反映的图层的尺寸为：图层与蒙版间重叠区域的尺寸，不与蒙版重叠的区域由于不会被显示，因此也不需要考虑图层中不与蒙版重叠的区域。

s102：根据各个图层的位置，确定各个图层的依赖信息。

其中，每一图层的依赖信息表征生成上述用户界面时确定该图层位置要参考的位置。

具体的，上述每一图层的依赖信息可以为其他图层，即该图层参考其他图层的位置确定自身的位置，也可以为用户界面，即该图层参考自身在用户界面中的位置确定自身的位置。

由于用户界面为二维平面，因此需要根据图层的横向与纵向位置共同确定图层的位置，因此图层的依赖信息包含横向依赖信息与纵向依赖信息，上述横向依赖信息与纵向依赖信息可以为不同的信息，使得图层在横向与纵向上分别参照不同的位置确定自身的位置。

另外，上述图层中可以包含与用户界面尺寸相同的图层，则该图层的依赖信息可以为用户界面，而其他图层可以参考与用户界面尺寸相同的图层。

s103：根据每一图层的依赖信息和每一图层的位置，获得每一图层的位置与该图层的依赖信息所表示的位置间相对位置的描述信息。

具体的，由于上述每一图层的位置均为该图层在用户界面中的位置，因此在图层的依赖信息为用户界面的情况下，可以直接以图层的位置作为上述描述信息，在图层的依赖信息为其他图层的情况下，可以根据该图层的位置与该图层所参考的其他图层的位置，确定该图层与所参考的其他图层之间的相对位置作为上述描述信息。

其中，上述相对位置包括水平方向的相对位置与垂直方向的相对位置，上述相对位置既表示每一图层与该图层的依赖信息之间在水平或垂直方向上的相对方向关系，如该图层位于该图层的依赖信息的右侧、下方等，也表示每一图层与该图层的依赖信息之间在水平或垂直方向上的间距，如该图层与该图层的依赖信息之间在水平方向上间距10像素，在垂直方向上间距15像素等。

具体的，上述图层在水平或垂直方向上的间距可以以图层边缘之间的距离表示，如图层a与图层b之间的水平间距可以为图层a的左边缘与图层b的左边缘之间的间距，也可以为图层a与图层b之间最接近的边缘之间的间距，如图层a位于图层b左侧，则可以以图层a的右边缘与图层b的左边缘之间的间距表示图层a与图层b之间的水平间距。

另外，上述图层在水平方向上的间距也可以以图层中心点所在的垂直线之间的距离表示，上述图层在垂直方向上的间距也可以以图层中心点所在的水平线之间的距离表示。

再者，也可以根据图层在用户界面中的坐标确定图层之间的相对位置，以图层之间横坐标的差值确定图层在横向上的相对位置，以横坐标差值的绝对值表示图层之间在横向上的间距，以横坐标差值的正负表示图层间在横向上的相对方向。以图层之间纵坐标的差值确定图层在纵向上的相对位置，以纵坐标差值的绝对值表示图层之间的在纵向上的间距，以纵坐标差值的正负表示图层间在纵向上的相对方向。

例如，若在用户界面的坐标系中，右向为水平方向的正方向，向下为垂直方向的正方向，则若图层1与图层2的横坐标差值为10，则说明图层1在图层2右侧10像素的位置处，若图层1与图层2的纵坐标差值为-5，则说明图层1在图层2上方5像素的位置处。

本发明的一个实施例中，设计文件所反映的用户界面的尺寸是固定的，但不同电子设备的屏幕的尺寸不同，因此在不同电子设备的屏幕中显示上述用户界面时，用户界面的尺寸不同。但设计文件所反映的图层在用户界面中的位置，是图层在固定尺寸的用户界面中的位置，因此若直接使用设计文件所反映的图层在用户界面中的位置，图层的位置不会随着用户界面尺寸的变化而发生变化。因此本发明实施例以每一图层的位置与该图层的依赖信息所表示的位置间相对位置的描述信息，使得某一图层的位置随着用户界面的尺寸发生变化的情况下，参照于该图层的位置确定自身位置的其他图层在用户界面中的位置也会发生变化。

s104：根据每一图层的描述信息和尺寸，生成各个图层的布局关系。

具体的，上述图层的布局关系可以用于描述各个图层的位置与该图层的依赖信息的位置之间的相对位置，以及各个图层的尺寸，因此根据上述布局关系便可以确定用户界面中图层的布局。

本发明的一个实施例中，可以按照以下方式(一)至(四)中的一种描述图层尺寸。

(一)在上述布局关系中以上述设计文件反映的图层的尺寸描述图层尺寸。

即图层在用户界面中始终保持上述设计文件反映的图层的尺寸。

(二)在上述布局关系中以图层与其父图层间的比例描述图层尺寸。

其中，上述父图层为包含该图层的图层，上述图层与其父图层间的比例包括该图层的宽度与父图层间的比例，以及该图层的高度与父图层间的比例，如40％等，因此在父图层的尺寸变大时，该图层的尺寸也会变大，父图层对的尺寸变小时，该图层的尺寸也会变小。

具体的，在设计文件中反映的、该图层与父图层间的尺寸的比例达到预设比例的情况下，可以以图层与其父图层间的比例描述图层尺寸，例如，上述预设比例可以为80％。

(三)在上述布局关系中以图层中内容的尺寸描述图层尺寸。

具体的，为了能够完整地显示图层中的内容，可以以图层中的内容的尺寸描述图层尺寸。

在设计文件中反映的、该图层中的内容为预设种类的内容的情况下，可以以图层中的内容的尺寸描述图层尺寸，例如，上述预设种类可以为字符、图片、视频等。

(四)在上述布局关系中以图层的宽高比描述图层尺寸。

具体的，由于图层的宽高比改变，图层所显示的内容的宽高比可能随之发生改变，使得图层所显示的内容无法达到最好的显示效果，因此可以以图层的宽高比描述图层尺寸，如宽高比为16:9等。

在设计文件中反映的、该图层的宽高比为预设宽高比的情况下，可以以图层的宽高比描述图层尺寸，例如，上述预设宽高比可以为4:3、16:9等。

本发明的一个实施例中，可以分别使用上述(一)至(四)中的不同方式描述不同图层的尺寸。

s105：参照预设的代码规则，生成用于描述上述布局关系的代码。

具体的，由于不同操作系统中运行的应用程序的代码需要符合该操作系统的代码规则，因此需要根据显示上述用户界面的操作系统的代码规则生成用于描述上述布局关系的代码。

另外，也可以确定各个图层的颜色、所包含的内容的类型等其他属性信息，在生成用于描述上述布局关系的代码时，定义各个图层的颜色与所包含的内容的类型。

例如，上述图层所包含的内容的类型可以为字符类型、图片类型等。

由以上可见，可以根据用户界面的设计文件确定每一图层的依赖信息以及该图层与该图层的依赖信息表征的位置之间的相对位置的描述信息，从而使得每一图层均可以根据依赖信息表征的位置确定自身的位置，因此根据每一图层的尺寸和描述信息便可以确定各个图层的布局关系，参照布局关系和预设的代码规则便可以生成用于描述布局关系的代码。此过程中不需要开发人员分析设计文件并确定图层的布局关系，可以直接根据设计文件记录的信息确定图层的布局关系，并生成布局关系的代码，因此节省了人力资源，提高了生成布局关系的代码的效率。

参见图2，提供了第二种布局关系的代码生成方法的流程示意图，与前述图1所示的实施例相比，上述步骤s102可以通过以下步骤s102a-s102d实现。

s102a：确定各个图层中的基准图层，并根据上述基准图层的位置获得上述基准图层的备选依赖信息。

具体的，由于各个图层需要根据依赖信息所表征的位置确定自身的信息，因此要确定用户界面里各个图层的位置，需要优先确定一个基准图层，以基准图层作为确定各个图层的位置的基础，其他图层在该基准图层的基础上互相参照确定自身的位置。

在上述用户界面中包含与用户界面尺寸相同的图层的情况下，可以以上述与用户界面尺寸相同的图层作为基准图层，此时也可以将该基准图层称之为父图层。

本发明的一个实施例中，可以以任意图层作为上述基准图层。

本发明的一个实施例中，可以以基准图层的自身作为基准图层的备选依赖信息，也可以以用户界面作为基准图层的备选依赖信息。

s102b：根据各个图层的位置，确定上述用户界面中外层的图层单元。

其中，上述图层单元为：图层行或图层列。

上述图层行中各图层沿横向扩展后与至少一个其他图层存在相交区域。

上述图层列中各图层沿纵向扩展后与至少一个其他图层存在相交区域。

具体的，将用户界面中的图层划分为图层行或图层列，作为外层图层单元，可以获得各个图层之间的排列关系。其中，若用户界面中包含与用户图层大小相同的图层，则对除与用户图层大小相同的图层之外的图层划分图层行与图层列。

本发明的一个实施例中，可以根据各个图层上边缘与下边缘的纵坐标之间的大小关系，将各个图层划分为各个图层行。具体的，针对每一图层，若该图层的上边缘或下边缘的纵坐标在另一图层上边缘与下边缘的纵坐标之间，则上述两个图层位于同一图层行。

可以根据各个图层左边缘与右边缘的横坐标之间的大小关系，将各个图层划分为各个图层列。具体的，针对每一图层，若该图层的左边缘或右边缘的横坐标在另一图层左边缘与右边缘的横坐标之间，则上述两个图层位于同一图层列。

参见图3，提供了一种用户界面中图层分布的示意图。

其中，最大的实线框表示与用户界面大小相同的图层h，其他实线框表示用户界面中的各个图层a-g，虚线区域表示各个图层行与图层列。

由图可见，图层a与图层b沿横向扩展之后存在相交区域，图层c、图层d、图层e、图层f、图层g沿横向扩展之后存在相交区域，因此图层a与图层b属于同一图层行1，图层c-图层g属于同一图层行2。图层行1与图层行2分别为用户界面中的两个外层的图层单元。

s102c：按照预设的遍历顺序确定方式，确定各个外层的图层单元的遍历顺序。

其中，上述遍历顺序确定方式为：根据图层单元与用户界面的边缘之间的距离，以及图层单元之间的距离，确定图层单元的遍历顺序。

具体的，可以选择与用户界面的边缘之间的距离最小的外层的图层单元，作为第一个已确定图层单元。

针对每一未确定的外层的图层单元，确定该外层的图层单元与已确定图层单元之间的距离、以及与用户界面的边缘之间的距离中最小的距离，作为该外层的图层单元的单元距离。确定单元距离最小的未确定的外层的图层单元，作为下一个已确定图层单元。

每确定一个新的已确定图层单元，需要重新确定每一未确定的外层的图层单元的单元距离。依次确定各个外层的图层单元，直至各个外层的图层单元均被确定，将确定各个外层的图层单元的顺序作为各个外层的图层单元的遍历顺序。

本发明的一个实施例中，若外层的图层单元为图层行，则可以计算外层的图层单元中包含的各个图层与用户界面的上边缘或下边缘之间的距离，可以选择计算得到的距离的最小值，作为最大图层单元与用户界面的边缘之间的距离。

若外层的图层单元为图层列，则可以计算外层的图层单元中包含的各个图层与用户界面的左边缘或右边缘之间的距离，可以选择计算得到的距离的最小值，作为外层的图层单元与用户界面的边缘之间的距离。

计算一个外层的图层单元中包含的图层与另一个外层的图层单元中包含的图层之间的距离，可以选择计算得到的距离的最小值作为外层的图层单元之间的距离。

本发明的另一个实施例中，也可以根据外层的图层单元与用户界面之间距离的最大值、外层的图层单元之间距离的最大值确定各个外层的图层单元的遍历顺序，或者以外层的图层单元在用户界面中的排列顺序作为外层的图层单元的遍历顺序，还可以用其他方式确定各个外层的图层单元的遍历顺序。

参见图3，由于图层行1与用户界面的上边缘之间的距离小于图层行2与用户界面的下边缘之间的距离，因此先确定图层行1，再确定图层行2，外层的图层单元的遍历顺序为图层行1、图层行2。

s102d：针对每一外层的图层单元，以该图层单元为待操作单元，按照上述遍历顺序确定方式，获得上述待操作单元中按照行列交错方式确定的图层单元的遍历顺序，将上述待操作单元更新为所确定的图层单元中包含多个图层的图层单元，并返回上述按照上述遍历顺序确定方式，获得上述待操作单元中按照行列交错方式确定的图层单元的遍历顺序的步骤，直至所确定的图层单元中不存在包含多个图层的图层单元。

其中，上述行列交错方式为：上述待操作单元为图层行时，所确定的图层单元为图层列，上述待操作图层单元为图层列时，所确定的图层单元为图层行。

本发明的一个实施例中，若最大图层单元为图层行，且包含多个图层列，则将该图层行作为待操作单元，针对该图层行，确定该图层行中包含的图层列的遍历顺序，若所确定的图层列中包含多个图层，则将包含多个图层的图层列作为新的待操作单元，确定该图层列中包含的图层行的遍历顺序，若所确定的图层行中又包含多个图层，则将包含多个图层的图层行作为新的待操作单元，确定该图层行中包含的图层列的遍历顺序，依次类推，直至不再存在包含多个图层的图层单元，也就是说各个仅包含一个图层的最小的图层单元均被确定，由于每一最小的图层单元中仅包含一个图层，因此最小的图层单元的遍历顺序即为各个最小的图层单元包含的图层的遍历顺序。

具体的，确定各个图层列与用户界面之间的距离，可以选择距离最小的作为第一个已确定图层列，针对每一未确定的图层列，确定该图层列与已确定图层列之间的距离、以及与用户界面的边缘之间的距离中最小的距离，作为该图层列的列距离，确定列距离最小的未确定的图层列，作为下一个已确定图层列。

每确定一个新的已确定图层列，需要重新确定每一未确定的图层列的列距离。依次确定各个图层列，直至各个图层列均被确定，将确定各个图层列的顺序作为各个图层列的遍历顺序。

若已确定遍历顺序的图层列中包含多个图层行，则确定各个图层行与用户界面之间的距离、与该图层列之外的其他图层列之间的距离，选择距离最小的作为第一个已确定图层行，针对每一未确定的图层行，确定该图层行与已确定图层行之间的距离、以及与用户界面的边缘之间的距离中最小的距离，作为该图层行的行距离，确定行距离最小的未确定的图层行，作为下一个已确定图层行。

每确定一个新的已确定图层行，需要重新确定每一未确定的图层行的行距离。依次确定各个图层行，直至各个图层行均被确定，将确定各个图层行的顺序作为各个图层行的遍历顺序。

若已确定遍历顺序的图层行中有包含多个图层列，则继续确定各个图层列的遍历顺序，以此类推。

最大图层单元为图层列的情况与最大图层单元为图层行的情况相似，在此不再赘述。

对于图层列而言，则可以计算图层列中包含的各个图层与用户界面的左边缘或右边缘之间的距离，选择计算得到的距离的最小值，作为图层列与用户界面的边缘之间的距离。

对于图层行而言，则可以计算图层行中包含的各个图层与用户界面的上边缘或下边缘之间的距离，选择计算得到的距离的最小值，作为图层行与用户界面的边缘之间的距离。

可以计算一个图层行中包含的图层与另一个图层行中包含的图层之间的距离、图层与用户界面边缘之间的距离，选择计算得到的距离的最小值作为图层行之间的距离。计算一个图层列中包含的图层与另一个图层列中包含的图层之间的距离，可以选择计算得到的距离的最小值作为图层列之间的距离。

另外，也可以计算一个图层行中包含的图层与另一个图层行中包含的图层之间的距离、图层与用户界面边缘之间的距离，选择计算得到的距离的最大值作为图层行之间的距离，计算一个图层列中包含的图层与另一个图层列中包含的图层之间的距离，可以选择计算得到的距离的最大值作为图层列之间的距离，也可以通过其他方式确定图层行之间的距离与图层列之间的距离。

参见图3，图层行1中包含图层列11与图层列12，图层列11中包含图层a，图层列12中包含图层b。由于图层a与用户界面的左边缘之间的距离小于图层b与用户界面右边缘之间的距离，因此图层列11的遍历顺序在图层列12之前。

图层行2中包含图层列21、图层列22、图层列23与图层列24，其中图层列21中包含图层c，图层列22中包含图层d与图层e，图层列23中包含图层f，图层列24中包含图层g，图层列22中还包含图层行221与图层行222，图层行221中包含图层d，图层行222中包含图层e。

在确定图层列21-图层列24的遍历顺序的过程中，由于图层列24与用户边缘之间的距离最小，因此先确定图层列24，由于图层列23与图层列24之间的距离小于图层列21与用户界面左边缘之间的距离，因此再确定图层列23，而图层列22与图层列23之间的距离大于图层列21与用户界面边缘之间的距离，因此再确定包含图层c的图层列21，最后确定图层列22。

由于图层列22中包含两个图层行221和222，因此再确定图层行221与图层行222的遍历顺序，由于图层行221与图层c的上边缘平齐，因此先确定图层行221，再确定图层行222。

因此图层行2中包含的图层的遍历顺序为图层g、图层f、图层c、图层d、图层e。

s102e：针对除上述基准图层外的每一图层，将第一图层、第二图层以及上述基准图层作为该图层的备选依赖信息。

其中，上述第一图层为：遍历顺序位于目标图层单元之前的外层的图层单元所包含的图层，上述第二图层为：在上述目标图层单元中遍历顺序位于该图层之前的图层，上述目标图层单元为：该图层所在的外层的图层单元。

本发明的一个实施例中，可以按外层的图层单元的遍历顺序依次确定各个外层的图层单元，在遍历每一外层的图层单元的过程中，按照该外层的图层单元中图层的遍历顺序依次确定各个图层，在该外层的图层单元中的图层遍历结束后，再按外层的图层单元的遍历顺序遍历下一个外层的图层单元中的图层，依次类推，从而确定用户界面中所有图层的排列顺序，具体的，可以以数组的形式依次存储各个图层的图层标记，各个图层标记在数组中存储的顺序便是图层标记对应的图层的排列顺序。

由于上述确定图层的排列顺序的过程是按外层的图层单元的遍历顺序进行的，因此对于每一图层而言，遍历顺序位于目标图层单元之前的外层的图层单元中包含的图层均排列在该图层之前，又由于在同一外层的图层单元中，确定图层的排列顺序的过程是按图层的遍历顺序进行的，因此对于每一图层而言，在目标图层单元中图层的遍历顺序位于该图层之前的图层也排列在该图层之前。因此对于每一图层而言，可以将在图层的排列顺序中位于该图层之前的其他图层作为该图层的备选依赖信息。

但对于排列顺序位于第一位的图层，不存在排列在该图层之前的其他图层，因此将基准图层确定为该图层的备选依赖信息。

参见图3，图层a-图层g的排列顺序为图层a、图层b、图层g、图层f、图层c、图层d、图层e，基准图层为图层h。

则对于图层e而言，图层a、图层b、图层g、图层f、图层c、图层d和图层f为图层e的备选依赖信息。

s102f：根据每一图层的备选依赖信息，确定每一图层的依赖信息。

具体的，对于每一图层，可以在备选依赖信息中随机选择依赖信息，或选择所表征的位置与该图层的位置相距最远的备选依赖信息，作为该图层的依赖信息，还可以通过步骤s102f1-s102f3确定每一图层的依赖信息，在此暂不详述。

由以上可见，本方案实施例根据图层行与图层列之间的距离、图层行和图层列与用户界面之间的距离，确定各个图层的备选依赖信息，再在备选依赖信息中选择每一图层的依赖信息，使得各个图层之间互相依赖的顺序总体上满足相邻图层所在图层行与图层列之间的距离最小的规律，使得各个图层与该图层的依赖信息在相对位置上总体保持相同的规律。

参见图4，本发明实施例提供了第三种布局关系的代码生成方法的流程示意图，可以通过以下步骤s102f1-s102f3确定每一图层的依赖信息。

s102f1：从该图层的备选依赖信息中，选择所表征的位置与图层的位置间横向距离最小的第一备选依赖信息。

具体的，可以分别计算该图层的位置与该图层的各个备选依赖信息所表征的位置之间的横向距离，选择横向距离最小的备选依赖信息作为第一备选依赖信息。

s102f2：从该图层的备选依赖信息中，选择所表征的位置与图层的位置间纵向距离最小的第二备选依赖信息。

具体的，可以分别计算该图层的位置与该图层的各个备选依赖信息所表征的位置之间的纵向距离，选择纵向距离最小的备选依赖信息作为第二备选依赖信息。

上述第一备选依赖信息与第二备选依赖信息可以相同也可以不同。

s102f3：将上述第一备选依赖信息与第二备选依赖信息确定为该图层的依赖信息。

由于用户界面为二维平面，因此需要在横向与纵向上分别确定图层的位置，从而确定该图层在用户界面中的位置。因此需要分别确定横向上的第一备选依赖信息与纵向上的第二备选依赖信息均作为该图层的依赖信息。

由以上可见，各个图层的依赖信息为与该图层的距离最近的依赖信息，因此根据依赖信息所表征的位置确定该图层的位置，可以使得确定得到的该图层的位置较精确。

本发明的一个实施例中，以图3为例，对确定各个图层的依赖信息的过程进行说明。

首先将图层a-图层g划分为不同的图层行，再在各个图层行中划分图层列。

其中，图层a与图层b属于同一图层行1，图层c-图层g属于另一图层行2。图层行1中包含图层a所在的图层列11，以及图层b所在的图层列12。图层行2中包含图层c所在的图层列21，以及图层d和图层e所在的图层列22，图层f所在的图层列23，图层g所在的图层列24。图层列22中包含图层d所在的图层行221以及图层e所在的图层行222。。

其次，确定图层行1和图层行2的遍历顺序。

其中，图层行1与用户界面上边缘之间的距离小于图层行2与用户界面下边缘之间的距离，因此图层行1的单元遍历顺序位于图层行2之前。

再者，分别确定图层行1与图层行2中包含的图层的图层遍历顺序。

其中，图层行1中包含图层列11与图层列12，由于图层列11与用户界面左边缘之间的距离小于图层列12与用户界面右边缘之间的距离，因此图层列11排列在图层列12之前，图层a的遍历顺序位于图层b之前。

图层行2中图层的遍历顺序在上文中已经进行了描述，图层的遍历顺序为图层g、图层f、图层c、图层d与图层e，在此不再赘述。

再次，确定各个图层的备选依赖信息。

其中，以图层c为例，图层c的备选依赖信息为图层a、图层b与图层h，以图层d为例，图层d的备选依赖信息为图层a、图层b、图层g、图层f、图层c与图层h。

最后，针对每一图层，在该图层的备选依赖信息中确定该图层的依赖信息。

针对每一图层，以选择与该图层横向距离最小的图层与纵向距离最小的图层作为该图层的依赖信息为例，对于图层a而言，确定图层h作为图层a的依赖信息；对于图层b而言，确定图层a作为图层b的纵向上的依赖信息，确定图层h为图层b的横向上的依赖信息；对于图层g而言，确定图层b作为图层g纵向上的依赖信息，确定图层h作为图层g横向上的依赖信息，依次类推，确定各个图层的依赖信息。

与前述布局关系的代码生成方法相对应，本发明实施例还提供了一种布局关系的代码生成装置。

参见图5，本发明提供了第一种布局关系的代码生成装置的结构示意图，所述装置包括：

位置尺寸确定模块501，用于确定用户界面的设计文件反映的所述用户界面中各个图层的位置与尺寸；

依赖信息确定模块502，用于根据各个图层的位置，确定各个图层的依赖信息，每一图层的依赖信息表征生成所述用户界面时确定该图层位置要参考的位置；

描述信息获得模块503，用于根据每一图层的依赖信息和每一图层的位置，获得每一图层的位置与该图层的依赖信息所表示的位置间相对位置的描述信息；

布局关系生成模块504，用于根据每一图层的描述信息和尺寸，生成各个图层的布局关系；

代码生成模块505，用于参照预设的代码规则，生成用于描述所述布局关系的代码。

由以上可见，可以根据用户界面的设计文件确定每一图层的依赖信息以及该图层与该图层的依赖信息表征的位置之间的相对位置的描述信息，从而使得每一图层均可以根据依赖信息表征的位置确定自身的位置，因此根据每一图层的尺寸和描述信息便可以确定各个图层的布局关系，参照布局关系和预设的代码规则便可以生成用于描述布局关系的代码。此过程中不需要开发人员分析设计文件并确定图层的布局关系，可以直接根据设计文件记录的信息确定图层的布局关系，并生成布局关系的代码，因此节省了人力资源，提高了生成布局关系的代码的效率。

参见图6，本发明实施例提供了第二种布局关系的代码生成装置的结构示意图，与前述图5所示的实施例相比，上述依赖信息确定模块502，包括：

第一备选确定子模块502a，用于确定各个图层中的基准图层，并根据所述基准图层的位置获得所述基准图层的备选依赖信息；

外层单元确定子模块502b，用于根据各个图层的位置，确定所述用户界面中外层的图层单元，其中，所述图层单元为：图层行或图层列，所述图层行中各图层沿横向扩展后与至少一个其他图层存在相交区域，所述图层列中各图层沿纵向扩展后与至少一个其他图层存在相交区域；

外层顺序确定子模块502c，用于按照预设的遍历顺序确定方式，确定各个外层的图层单元的遍历顺序，其中，所述遍历顺序确定方式为：根据图层单元与用户界面的边缘之间的距离，以及图层单元之间的距离，确定图层单元的遍历顺序；

图层顺序确定子模块502d，用于针对每一外层的图层单元，以该图层单元为待操作单元，按照所述遍历顺序确定方式，获得所述待操作单元中按照行列交错方式确定的图层单元的遍历顺序，将所述待操作单元更新为所确定的图层单元中包含多个图层的图层单元，并返回所述按照所述遍历顺序确定方式，获得所述待操作单元中按照行列交错方式确定的图层单元的遍历顺序的步骤，直至所确定的图层单元中不存在包含多个图层的图层单元，将仅包含一个图层的最小的图层单元的排列顺序作为最小的图层单元所包含的图层的排列顺序，其中，所述行列交错方式为：所述待操作单元为图层行时，所确定的图层单元为图层列，所述待操作图层单元为图层列时，所确定的图层单元为图层行；

第二备选信息子模块502e，用于针对除所述基准图层外的每一图层，将第一图层、第二图层以及所述基准图层作为该图层的备选依赖信息，其中，所述第一图层为：遍历顺序位于目标图层单元之前的外层的图层单元所包含的图层，所述第二图层为：在所述目标图层单元中遍历顺序位于该图层之前的图层，所述目标图层单元为：该图层所在的外层的图层单元；

依赖信息确定子模块502f，用于根据每一图层的备选依赖信息，确定每一图层的依赖信息。

由以上可见，本方案实施例根据图层行与图层列之间的距离、图层行和图层列与用户界面之间的距离，确定各个图层的备选依赖信息，再在备选依赖信息中选择每一图层的依赖信息，使得各个图层之间互相依赖的顺序总体上满足相邻图层所在图层行与图层列之间的距离最小的规律，使得各个图层与该图层的依赖信息在相对位置上总体保持相同的规律。

本发明的一个实施例中，上述依赖信息确定子模块502f，具体用于：

按照以下方式确定每一图层的依赖信息：

从该图层的备选依赖信息中，选择所表征的位置与图层的位置间横向距离最小的第一备选依赖信息；

从该图层的备选依赖信息中，选择所表征的位置与图层的位置间纵向距离最小的第二备选依赖信息；

将所述第一备选依赖信息与第二备选依赖信息确定为该图层的依赖信息。

由以上可见，各个图层的依赖信息为与该图层的距离最近的依赖信息，因此根据依赖信息所表征的位置确定该图层的位置，可以使得确定得到的该图层的位置较精确。

本发明的一个实施例中，所述布局关系生成模块504，具体用于：

根据每一图层的描述信息，生成按照以下方式中的一种描述图层尺寸的各个图层的布局关系：

在所述布局关系中以所述设计文件反映的图层的尺寸描述图层尺寸；

在所述布局关系中以图层与其父图层间的比例描述图层尺寸；

在所述布局关系中以图层中内容的尺寸描述图层尺寸；

在所述布局关系中以图层的宽高比描述图层尺寸。

本发明的一个实施例中，在图层上存在蒙版的情况下，所述设计文件反映的图层的尺寸为：图层与蒙版间重叠区域的尺寸。

本发明实施例还提供了一种电子设备，如图7所示，包括处理器701、通信接口702、存储器703和通信总线704，其中，处理器701，通信接口702，存储器703通过通信总线704完成相互间的通信，

存储器703，用于存放计算机程序；

处理器701，用于执行存储器703上所存放的程序时，实现上述布局关系的代码生成方法任一所述的方法步骤。

应用本发明实施例提供的电子设备生成布局关系的代码时，可以根据用户界面的设计文件确定每一图层的依赖信息以及该图层与该图层的依赖信息表征的位置之间的相对位置的描述信息，从而使得每一图层均可以根据依赖信息表征的位置确定自身的位置，因此根据每一图层的尺寸和描述信息便可以确定各个图层的布局关系，参照布局关系和预设的代码规则便可以生成用于描述布局关系的代码。此过程中不需要开发人员分析设计文件并确定图层的布局关系，可以直接根据设计文件记录的信息确定图层的布局关系，并生成布局关系的代码，因此节省了人力资源，提高了生成布局关系的代码的效率。

上述终端提到的通信总线可以是外设部件互连标准(peripheralcomponentinterconnect，简称pci)总线或扩展工业标准结构(extendedindustrystandardarchitecture，简称eisa)总线等。该通信总线可以分为地址总线、数据总线、控制总线等。为便于表示，图中仅用一条粗线表示，但并不表示仅有一根总线或一种类型的总线。

通信接口用于上述终端与其他设备之间的通信。

存储器可以包括随机存取存储器(randomaccessmemory，简称ram)，也可以包括非易失性存储器(non-volatilememory)，例如至少一个磁盘存储器。可选的，存储器还可以是至少一个位于远离前述处理器的存储装置。

上述的处理器可以是通用处理器，包括中央处理器(centralprocessingunit，简称cpu)、网络处理器(networkprocessor，简称np)等；还可以是数字信号处理器(digitalsignalprocessing，简称dsp)、专用集成电路(applicationspecificintegratedcircuit，简称asic)、现场可编程门阵列(field－programmablegatearray，简称fpga)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。

在本发明提供的又一实施例中，还提供了一种计算机可读存储介质，所述计算机可读存储介质内存储有计算机程序，所述计算机程序被处理器执行时实现上述布局关系的代码生成方法任一所述的方法步骤。

应用本实施例提供的计算机可读存储介质中存储的计算机程序生成布局关系的代码时，可以根据用户界面的设计文件确定每一图层的依赖信息以及该图层与该图层的依赖信息表征的位置之间的相对位置的描述信息，从而使得每一图层均可以根据依赖信息表征的位置确定自身的位置，因此根据每一图层的尺寸和描述信息便可以确定各个图层的布局关系，参照布局关系和预设的代码规则便可以生成用于描述布局关系的代码。此过程中不需要开发人员分析设计文件并确定图层的布局关系，可以直接根据设计文件记录的信息确定图层的布局关系，并生成布局关系的代码，因此节省了人力资源，提高了生成布局关系的代码的效率。

在本发明提供的又一实施例中，还提供了一种包含指令的计算机程序产品，当其在计算机上运行时，使得计算机执行上述实施例中布局关系的代码生成方法任一所述的方法步骤。

执行本实施例提供的计算机程序产品生成布局关系的代码时，可以根据用户界面的设计文件确定每一图层的依赖信息以及该图层与该图层的依赖信息表征的位置之间的相对位置的描述信息，从而使得每一图层均可以根据依赖信息表征的位置确定自身的位置，因此根据每一图层的尺寸和描述信息便可以确定各个图层的布局关系，参照布局关系和预设的代码规则便可以生成用于描述布局关系的代码。此过程中不需要开发人员分析设计文件并确定图层的布局关系，可以直接根据设计文件记录的信息确定图层的布局关系，并生成布局关系的代码，因此节省了人力资源，提高了生成布局关系的代码的效率。

在上述实施例中，可以全部或部分地通过软件、硬件、固件或者其任意组合来实现。当使用软件实现时，可以全部或部分地以计算机程序产品的形式实现。所述计算机程序产品包括一个或多个计算机指令。在计算机上加载和执行所述计算机程序指令时，全部或部分地产生按照本发明实施例所述的流程或功能。所述计算机可以是通用计算机、专用计算机、计算机网络、或者其他可编程装置。所述计算机指令可以存储在计算机可读存储介质中，或者从一个计算机可读存储介质向另一个计算机可读存储介质传输，例如，所述计算机指令可以从一个网站站点、计算机、服务器或数据中心通过有线(例如同轴电缆、光纤、数字用户线(dsl))或无线(例如红外、无线、微波等)方式向另一个网站站点、计算机、服务器或数据中心进行传输。所述计算机可读存储介质可以是计算机能够存取的任何可用介质或者是包含一个或多个可用介质集成的服务器、数据中心等数据存储设备。所述可用介质可以是磁性介质，(例如，软盘、硬盘、磁带)、光介质(例如，dvd)、或者半导体介质(例如固态硬盘solidstatedisk(ssd))等。

需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

本说明书中的各个实施例均采用相关的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于装置、电子设备、计算机可读存储介质和计算机程序产品，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

以上所述仅为本发明的较佳实施例，并非用于限定本发明的保护范围。凡在本发明的精神和原则之内所作的任何修改、等同替换、改进等，均包含在本发明的保护范围内。