一种布局关系的代码生成方法及装置制造方法及图纸

本发明专利技术实施例提供了一种布局关系的代码生成方法及装置，涉及应用程序技术领域，其中，上述方法包括：确定用户界面的设计文件反映的用户界面中各个图层的位置与尺寸；根据各个图层的位置，确定各个图层的依赖信息；根据每一图层的依赖信息和每一图层的位置，获得每一图层的位置与该图层的依赖信息所表示的位置间相对位置的描述信息；根据每一图层的描述信息和尺寸，生成各个图层的布局关系；参照预设的代码规则，生成用于描述布局关系的代码。应用本发明专利技术实施例提供的方案生成布局关系的代码，提高了生成布局关系的代码的效率。

【技术实现步骤摘要】
一种布局关系的代码生成方法及装置
本专利技术涉及应用程序
，特别是涉及一种布局关系的代码生成方法及装置。
技术介绍
在UI(UserInterface，用户界面)开发场景中，通常由设计人员对UI界面进行设计，得到设计文件，再由开发人员根据设计文件进行UI开发。设计人员所设计的UI界面通常包含多个图层，各个图层可能会分布在UI的不同位置，形成图层之间的布局关系。开发人员在开发UI过程中需要通过代码实现上述布局关系。现有技术中，一般需要开发人员分析设计文件，得到上述布局关系，再依据布局关系编写代码。这样导致生成布局关系的代码过程中需要花费较大的人力资源，导致生成布局关系的代码的效率较低。
技术实现思路
本专利技术实施例的目的在于提供一种布局关系的代码生成方法，以提高生成布局关系的代码的效率。具体技术方案如下：在本专利技术实施的第一方面，首先提供了一种布局关系的代码生成方法，所述方法包括：确定用户界面的设计文件反映的所述用户界面中各个图层的位置与尺寸；根据各个图层的位置，确定各个图层的依赖信息，每一图层的依赖信息表征生成所述用户界面时确定该图层位置要参考的位置；根据每一图层的依赖信息和每一图层的位置，获得每一图层的位置与该图层的依赖信息所表示的位置间相对位置的描述信息；根据每一图层的描述信息和尺寸，生成各个图层的布局关系；参照预设的代码规则，生成用于描述所述布局关系的代码。本专利技术的一个实施例中，所述根据各个图层的位置，确定各个图层的依赖信息，包括：确定各个图层中的基准图层，并根据所述基准图层的位置获得所述基准图层的备选依赖信息；根据各个图层的位置，确定所述用户界面中外层的图层单元，其中，所述图层单元为：图层行或图层列，所述图层行中各图层沿横向扩展后与至少一个其他图层存在相交区域，所述图层列中各图层沿纵向扩展后与至少一个其他图层存在相交区域；按照预设的遍历顺序确定方式，确定各个外层的图层单元的遍历顺序，其中，所述遍历顺序确定方式为：根据图层单元与用户界面的边缘之间的距离，以及图层单元之间的距离，确定图层单元的遍历顺序；针对每一外层的图层单元，以该图层单元为待操作单元，按照所述遍历顺序确定方式，获得所述待操作单元中按照行列交错方式确定的图层单元的遍历顺序，将所述待操作单元更新为所确定的图层单元中包含多个图层的图层单元，并返回所述按照所述遍历顺序确定方式，获得所述待操作单元中按照行列交错方式确定的图层单元的遍历顺序的步骤，直至所确定的图层单元中不存在包含多个图层的图层单元，其中，所述行列交错方式为：所述待操作单元为图层行时，所确定的图层单元为图层列，所述待操作图层单元为图层列时，所确定的图层单元为图层行；针对除所述基准图层外的每一图层，将第一图层、第二图层以及所述基准图层作为该图层的备选依赖信息，其中，所述第一图层为：遍历顺序位于目标图层单元之前的外层的图层单元所包含的图层，所述第二图层为：在所述目标图层单元中遍历顺序位于该图层之前的图层，所述目标图层单元为：该图层所在的外层的图层单元；根据每一图层的备选依赖信息，确定每一图层的依赖信息。本专利技术的一个实施例中，所述根据每一图层的备选依赖信息，确定每一图层的依赖信息，包括：按照以下方式确定每一图层的依赖信息：从该图层的备选依赖信息中，选择所表征的位置与图层的位置间横向距离最小的第一备选依赖信息；从该图层的备选依赖信息中，选择所表征的位置与图层的位置间纵向距离最小的第二备选依赖信息；将所述第一备选依赖信息与第二备选依赖信息确定为该图层的依赖信息。本专利技术的一个实施例中，所述根据每一图层的描述信息和尺寸，生成各个图层的布局关系，包括：根据每一图层的描述信息，生成按照以下方式中的一种描述图层尺寸的各个图层的布局关系：在所述布局关系中以所述设计文件反映的图层的尺寸描述图层尺寸；在所述布局关系中以图层与其父图层间的比例描述图层尺寸；在所述布局关系中以图层中内容的尺寸描述图层尺寸；在所述布局关系中以图层的宽高比描述图层尺寸。本专利技术的一个实施例中，在图层上存在蒙版的情况下，所述设计文件反映的图层的尺寸为：图层与蒙版间重叠区域的尺寸。在本专利技术实施的第二方面，还提供了一种布局关系的代码生成装置，所述装置包括：位置尺寸确定模块，用于确定用户界面的设计文件反映的所述用户界面中各个图层的位置与尺寸；依赖信息确定模块，用于根据各个图层的位置，确定各个图层的依赖信息，每一图层的依赖信息表征生成所述用户界面时确定该图层位置要参考的位置；描述信息获得模块，用于根据每一图层的依赖信息和每一图层的位置，获得每一图层的位置与该图层的依赖信息所表示的位置间相对位置的描述信息；布局关系生成模块，用于根据每一图层的描述信息和尺寸，生成各个图层的布局关系；代码生成模块，用于参照预设的代码规则，生成用于描述所述布局关系的代码。本专利技术的一个实施例中，所述依赖信息确定模块，包括：第一备选确定子模块，用于确定各个图层中的基准图层，并根据所述基准图层的位置获得所述基准图层的备选依赖信息；外层单元确定子模块，用于根据各个图层的位置，确定所述用户界面中外层的图层单元，其中，所述图层单元为：图层行或图层列，所述图层行中各图层沿横向扩展后与至少一个其他图层存在相交区域，所述图层列中各图层沿纵向扩展后与至少一个其他图层存在相交区域；外层顺序确定子模块，用于按照预设的遍历顺序确定方式，确定各个外层的图层单元的遍历顺序，其中，所述遍历顺序确定方式为：根据图层单元与用户界面的边缘之间的距离，以及图层单元之间的距离，确定图层单元的遍历顺序；图层顺序确定子模块，用于针对每一外层的图层单元，以该图层单元为待操作单元，按照所述遍历顺序确定方式，获得所述待操作单元中按照行列交错方式确定的图层单元的遍历顺序，将所述待操作单元更新为所确定的图层单元中包含多个图层的图层单元，并返回所述按照所述遍历顺序确定方式，获得所述待操作单元中按照行列交错方式确定的图层单元的遍历顺序的步骤，直至所确定的图层单元中不存在包含多个图层的图层单元，其中，所述行列交错方式为：所述待操作单元为图层行时，所确定的图层单元为图层列，所述待操作图层单元为图层列时，所确定的图层单元为图层行；第二备选确定子模块，用于针对除所述基准图层外的每一图层，将第一图层、第二图层以及所述基准图层作为该图层的备选依赖信息，其中，所述第一图层为：遍历顺序位于目标图层单元之前的外层的图层单元所包含的图层，所述第二图层为：在所述目标图层单元中遍历顺序位于该图层之前的图层，所述目标图层单元为：该图层所在的外层的图层单元；依赖信息确定子模块，用于根据每一图层的备选依赖信息，确定每一图层的依赖信息。本专利技术的一个实施例中，所述依赖信息确定子模块，具体用于：按照以下方式确定每一图层的依赖信息：从该图层的备本文档来自技高网...

【技术保护点】
1.一种布局关系的代码生成方法，其特征在于，所述方法包括：/n确定用户界面的设计文件反映的所述用户界面中各个图层的位置与尺寸；/n根据各个图层的位置，确定各个图层的依赖信息，每一图层的依赖信息表征生成所述用户界面时确定该图层位置要参考的位置；/n根据每一图层的依赖信息和每一图层的位置，获得每一图层的位置与该图层的依赖信息所表示的位置间相对位置的描述信息；/n根据每一图层的描述信息和尺寸，生成各个图层的布局关系；/n参照预设的代码规则，生成用于描述所述布局关系的代码。/n

【技术特征摘要】
1.一种布局关系的代码生成方法，其特征在于，所述方法包括：
确定用户界面的设计文件反映的所述用户界面中各个图层的位置与尺寸；
根据各个图层的位置，确定各个图层的依赖信息，每一图层的依赖信息表征生成所述用户界面时确定该图层位置要参考的位置；
根据每一图层的依赖信息和每一图层的位置，获得每一图层的位置与该图层的依赖信息所表示的位置间相对位置的描述信息；
根据每一图层的描述信息和尺寸，生成各个图层的布局关系；
参照预设的代码规则，生成用于描述所述布局关系的代码。


2.根据权利要求1所述的方法，其特征在于，所述根据各个图层的位置，确定各个图层的依赖信息，包括：
确定各个图层中的基准图层，并根据所述基准图层的位置获得所述基准图层的备选依赖信息；
根据各个图层的位置，确定所述用户界面中外层的图层单元，其中，所述图层单元为：图层行或图层列，所述图层行中各图层沿横向扩展后与至少一个其他图层存在相交区域，所述图层列中各图层沿纵向扩展后与至少一个其他图层存在相交区域；
按照预设的遍历顺序确定方式，确定各个外层的图层单元的遍历顺序，其中，所述遍历顺序确定方式为：根据图层单元与用户界面的边缘之间的距离，以及图层单元之间的距离，确定图层单元的遍历顺序；
针对每一外层的图层单元，以该图层单元为待操作单元，按照所述遍历顺序确定方式，获得所述待操作单元中按照行列交错方式确定的图层单元的遍历顺序，将所述待操作单元更新为所确定的图层单元中包含多个图层的图层单元，并返回所述按照所述遍历顺序确定方式，获得所述待操作单元中按照行列交错方式确定的图层单元的遍历顺序的步骤，直至所确定的图层单元中不存在包含多个图层的图层单元，其中，所述行列交错方式为：所述待操作单元为图层行时，所确定的图层单元为图层列，所述待操作图层单元为图层列时，所确定的图层单元为图层行；
针对除所述基准图层外的每一图层，将第一图层、第二图层以及所述基准图层作为该图层的备选依赖信息，其中，所述第一图层为：遍历顺序位于目标图层单元之前的外层的图层单元所包含的图层，所述第二图层为：在所述目标图层单元中遍历顺序位于该图层之前的图层，所述目标图层单元为：该图层所在的外层的图层单元；
根据每一图层的备选依赖信息，确定每一图层的依赖信息。


3.根据权利要求2所述的方法，其特征在于，所述根据每一图层的备选依赖信息，确定每一图层的依赖信息，包括：
按照以下方式确定每一图层的依赖信息：
从该图层的备选依赖信息中，选择所表征的位置与图层的位置间横向距离最小的第一备选依赖信息；
从该图层的备选依赖信息中，选择所表征的位置与图层的位置间纵向距离最小的第二备选依赖信息；
将所述第一备选依赖信息与第二备选依赖信息确定为该图层的依赖信息。


4.根据权利要求1所述的方法，其特征在于，所述根据每一图层的描述信息和尺寸，生成各个图层的布局关系，包括：
根据每一图层的描述信息，生成按照以下方式中的一种描述图层尺寸的各个图层的布局关系：
在所述布局关系中以所述设计文件反映的图层的尺寸描述图层尺寸；
在所述布局关系中以图层与其父图层间的比例描述图层尺寸；
在所述布局关系中以图层中内容的尺寸描述图层尺寸；
在所述布局关系中以图层的宽高比描述图层尺寸。


5.根据权利要求1-4中任一项所述的方法，其特征在于，在图层上存在蒙版的情况下，所述设计文件反映的图层的尺寸为：图层与蒙版间重叠区域的尺寸。


6.一种布局关系的代码生成装置，其特征在于，所述装置包括：
位置尺寸确定模块，用于确定用户界面的设计文件反映的所述用户界面中各个图层的位置与尺寸；
依赖信息确定模块，用于根据各个图层的位置，确定各个...

【专利技术属性】
技术研发人员：蔡宇，吴瑞卿，
申请(专利权)人：北京爱奇艺科技有限公司，
类型：发明
国别省市：北京;11