一种界面布局方法、电子设备以及计算机可读存储介质技术

本发明专利技术实施例提供的一种界面布局方法、电子设备以及计算机可读存储介质的技术方案中，获取设备信息，获取参考界面的布局单元，获取开发端设备生成的布局配置文件，布局配置文件用于适配不同的电子设备，布局配置文件包括布局单元的类型对应的配置信息，根据布局单元的类型对应的配置信息、获取的布局单元所属的父布局的大小和位置以及设备信息，确定出布局单元的大小和位置，根据每个布局单元的大小和位置，生成显示界面，显示界面包括至少一个布局单元，能够根据布局配置文件，确定出不同设备的可显示区域中布局单元的大小和位置，降低开发成本的同时，还能够实现布局单元的自适应调节，从而实现界面的自适应布局。

【技术实现步骤摘要】
一种界面布局方法、电子设备以及计算机可读存储介质
本专利技术涉及电子
，具体地涉及一种界面布局方法、电子设备以及计算机可读存储介质。
技术介绍
在分布式场景下，同一个应用需要在多个具有不同显示界面的电子设备上进行展示。由于电子设备不同，分辨率可能也不相同，例如智能手机和电脑的屏幕分辨率不同，所以同一应用的布局单元在智能手机和电脑上的界面布局也不相同。在相关技术中，开发人员需针对不同的设备形态编写不同的布局配置文件，使得电子设备根据对应的布局配置文件，实现布局单元的自适应布局，从而造成应用程序的开发成本大的问题。
技术实现思路
有鉴于此，本专利技术提供一种界面布局方法、电子设备以及计算机可读存储介质，能够根据一布局配置文件，计算出不同设备中的布局单元的大小和位置，从而降低了开发成本。第一方面，本专利技术实施例提供了一种界面布局方法，包括：获取设备信息；获取参考界面的布局单元；获取开发端设备生成的布局配置文件，所述布局配置文件用于适配不同的电子设备，所述布局配置文件包括布局单元的类型对应的配置信息；根据所述布局单元的类型对应的配置信息、获取的所述布局单元所属的父布局的大小和位置以及所述设备信息，确定出所述布局单元的大小和位置；根据每个所述布局单元的大小和位置，生成显示界面，所述显示界面包括所述至少一个布局单元。在一种可能的实现方式中，所述设备信息包括显示分辨率和设备类型，所述显示分辨率用于确定所述布局单元的位置的像素坐标，所述设备类型用于确定屏幕形态，以用于限定可显示区域的大小。在一种可能的实现方式中，所述布局单元的类型包括自适应类型；所述根据所述布局单元的类型对应的配置信息、获取的所述布局单元所属的父布局的大小和位置以及所述设备信息，确定出所述布局单元的大小和位置，包括：根据所述自适应类型对应的配置信息、获取的所述布局单元所属的父布局的大小和位置以及设备信息，将参考界面中所述布局单元的初始大小作为所述布局单元的大小，并生成所述布局单元的位置。在一种可能的实现方式中，所述配置信息包括定位点；所述生成所述布局单元的位置，包括：根据所述布局单元所属的父布局的大小和位置、设备信息、所述定位点确定出所述布局单元的位置，所述定位点用于将所述布局单元吸附至所述布局单元所属的父布局的指定位置，且所述布局单元的位置位于所述布局单元所属的父布局的范围内，所述设备信息用于确定所述布局单元的位置的像素坐标。在一种可能的实现方式中，所述布局单元的类型包括静态类型；所述根据所述布局单元的类型对应的配置信息、获取的所述布局单元所属的父布局的大小和位置以及所述设备信息，确定出所述布局单元的大小和位置，包括：根据所述静态类型对应的配置信息、获取的所述布局单元所属的父布局的大小和位置以及设备信息，将参考界面中所述布局单元的初始大小作为所述布局单元的大小，并生成所述布局单元的位置。在一种可能的实现方式中，所述配置信息包括定位点和父级间距；所述生成所述布局单元的位置，包括：将所述布局单元的至少一个指定边和所述父布局的与所述指定边对应的边之间的间距设置为所述父级间距；根据所述布局单元所属的父布局的大小和位置以及设备信息、所述定位点和所述父级间距确定出所述布局单元的位置，所述定位点用于将所述布局单元吸附至所述布局单元所属的父布局的指定位置，且所述布局单元与所述布局单元所属的父布局之间的间距包括父级间距，所述布局单元的位置位于所述布局单元所属的父布局的范围内，所述设备信息用于确定所述布局单元的位置的像素坐标。在一种可能的实现方式中，所述布局单元的类型包括变形类型；所述根据所述布局单元的类型对应的配置信息、获取的所述布局单元所属的父布局的大小和位置以及所述设备信息，确定出所述布局单元的大小和位置，包括：根据所述变形类型对应的配置信息、获取的所述布局单元所属的父布局的大小和位置以及设备信息，改变所述布局单元的样式，将参考界面的所述布局单元的初始大小作为所述布局单元的大小，并生成所述布局单元的位置。在一种可能的实现方式中，所述配置信息包括定位点和父级间距；所述生成所述布局单元的位置，包括：将所述布局单元的至少一个指定边和所述父布局的与所述指定边对应的边之间的间距设置为所述父级间距；根据所述布局单元所属的父布局的大小和位置以及设备信息、所述定位点和所述父级间距确定出所述布局单元的位置，所述定位点用于将所述布局单元吸附至所述布局单元所属的父布局的指定位置，且所述布局单元与所述布局单元所属的父布局之间的间距包括父级间距，所述布局单元的位置位于所述布局单元所属的父布局的范围内，所述设备信息用于确定所述布局单元的位置的像素坐标。在一种可能的实现方式中，所述布局单元的类型包括动态类型；所述根据所述布局单元的类型对应的配置信息、获取的所述布局单元所属的父布局的大小和位置以及所述设备信息，确定出所述布局单元的大小和位置，包括：根据所述动态类型对应的配置信息、获取的所述布局单元所属的父布局的大小和位置以及设备信息，调整参考界面中所述布局单元的初始大小生成所述布局单元的大小，并生成所述布局单元的位置。在一种可能的实现方式中，所述配置信息包括参考点，或者参考边；所述调整参考界面中所述布局单元的初始大小生成所述布局单元的大小，包括：以所述布局单元的指定的参考点为锁定点并以指定的参考边作为基准边，根据所述布局单元所属的父布局的大小，将参考界面中所述布局单元的初始大小等比例放大或者缩小，生成所述布局单元的大小；或者，以所述布局单元的指定的参考边作为锁定边，根据所述布局单元所属的父布局的大小，将参考界面中所述布局单元的初始大小非等比例放大或者缩小，生成所述布局单元的大小。在一种可能的实现方式中，所述配置信息包括定位点；所述生成所述布局单元的位置，包括：根据所述布局单元所属的父布局的大小和位置、设备信息、所述定位点确定出所述布局单元的位置，所述定位点用于将所述布局单元吸附至所述布局单元所属的父布局的指定位置，且所述布局单元的位置位于所述布局单元所属的父布局的范围内，所述设备信息用于确定所述布局单元的位置的像素坐标。在一种可能的实现方式中，所述配置信息包括定位点和链关系，所述链关系包括所述布局单元与其它的布局单元之间的跟随关系；所述生成所述布局单元的位置，包括：根据布局单元的大小、所述定位点、所述链关系和所述布局单元所属的父布局的大小，调整所述布局单元与其它的布局单元之间的排列位置；根据所述排列位置、所述布局单元所属的父布局的大小和位置以及设备信息、所述定位点确定出所述布局单元的位置，所述定位点用于将所述布局单元吸附至所述布局单元所属的父布局的指定位置，且所述布局单元与其它的布局单元之间的排列位置位于所述布局单元所属的父布局的范围内，所述设备信息用于确定所述布局单元的位置的像素坐标。在一本文档来自技高网...

【技术保护点】
1.一种界面布局方法，其特征在于，所述方法应用于电子设备，所述方法包括：/n获取设备信息；/n获取参考界面的布局单元；/n获取开发端设备生成的布局配置文件，所述布局配置文件用于适配不同的电子设备，所述布局配置文件包括布局单元的类型对应的配置信息；/n根据所述布局单元的类型对应的配置信息、获取的所述布局单元所属的父布局的大小和位置以及所述设备信息，确定出所述布局单元的大小和位置；/n根据每个所述布局单元的大小和位置，生成显示界面，所述显示界面包括所述至少一个布局单元。/n

【技术特征摘要】
1.一种界面布局方法，其特征在于，所述方法应用于电子设备，所述方法包括：
获取设备信息；
获取参考界面的布局单元；
获取开发端设备生成的布局配置文件，所述布局配置文件用于适配不同的电子设备，所述布局配置文件包括布局单元的类型对应的配置信息；
根据所述布局单元的类型对应的配置信息、获取的所述布局单元所属的父布局的大小和位置以及所述设备信息，确定出所述布局单元的大小和位置；
根据每个所述布局单元的大小和位置，生成显示界面，所述显示界面包括所述至少一个布局单元。


2.根据权利要求1所述的方法，其特征在于，所述设备信息包括显示分辨率和设备类型，所述显示分辨率用于确定所述布局单元的位置的像素坐标，所述设备类型用于确定屏幕形态，以用于限定可显示区域的大小。


3.根据权利要求1所述的方法，其特征在于，所述布局单元的类型包括自适应类型；
所述根据所述布局单元的类型对应的配置信息、获取的所述布局单元所属的父布局的大小和位置以及所述设备信息，确定出所述布局单元的大小和位置，包括：
根据所述自适应类型对应的配置信息、获取的所述布局单元所属的父布局的大小和位置以及设备信息，将参考界面中所述布局单元的初始大小作为所述布局单元的大小，并生成所述布局单元的位置。


4.根据权利要求3所述的方法，其特征在于，所述配置信息包括定位点；
所述生成所述布局单元的位置，包括：
根据所述布局单元所属的父布局的大小和位置、设备信息、所述定位点确定出所述布局单元的位置，所述定位点用于将所述布局单元吸附至所述布局单元所属的父布局的指定位置，且所述布局单元的位置位于所述布局单元所属的父布局的范围内，所述设备信息用于确定所述布局单元的位置的像素坐标。


5.根据权利要求1所述的方法，其特征在于，所述布局单元的类型包括静态类型；
所述根据所述布局单元的类型对应的配置信息、获取的所述布局单元所属的父布局的大小和位置以及所述设备信息，确定出所述布局单元的大小和位置，包括：
根据所述静态类型对应的配置信息、获取的所述布局单元所属的父布局的大小和位置以及设备信息，将参考界面中所述布局单元的初始大小作为所述布局单元的大小，并生成所述布局单元的位置。


6.根据权利要求5所述的方法，其特征在于，所述配置信息包括定位点和父级间距；
所述生成所述布局单元的位置，包括：
将所述布局单元的至少一个指定边和所述父布局的与所述指定边对应的边之间的间距设置为所述父级间距；
根据所述布局单元所属的父布局的大小和位置以及设备信息、所述定位点和所述父级间距确定出所述布局单元的位置，所述定位点用于将所述布局单元吸附至所述布局单元所属的父布局的指定位置，且所述布局单元与所述布局单元所属的父布局之间的间距包括父级间距，所述布局单元的位置位于所述布局单元所属的父布局的范围内，所述设备信息用于确定所述布局单元的位置的像素坐标。


7.根据权利要求1所述的方法，其特征在于，所述布局单元的类型包括变形类型；
所述根据所述布局单元的类型对应的配置信息、获取的所述布局单元所属的父布局的大小和位置以及所述设备信息，确定出所述布局单元的大小和位置，包括：
根据所述变形类型对应的配置信息、获取的所述布局单元所属的父布局的大小和位置以及设备信息，改变所述布局单元的样式，将参考界面中所述布局单元的初始大小作为所述布局单元的大小，并生成所述布局单元的位置。


8.根据权利要求7所述的方法，其特征在于，所述配置信息包括定位点和父级间距；
所述生成所述布局单元的位置，包括：
将所述布局单元的至少一个指定边和所述父布局的与所述指定边对应的边之间的间距设置为所述父级间距；
根据所述布局单元所属的父布局的大小和位置以及设备信息、所述定位点和所述父级间距确定出所述布局单元的位置，所述定位点用于将所述布局单元吸附至所述布局单元所属的父布局的指定位置，且所述布局单元与所述布局单元所属的父布局之间的间距包括父级间距，所述布局单元的位置位于所述布局单元所属的父布局的范围内，所述设备信息用于确定所述布局单元的位置的像素坐标。


9.根据权利要求1所述的方法，其特征在于，所述布局单元的类型包括动态类型；
所述根据所述布局单元的类型对应...

【专利技术属性】
技术研发人员：杨婉艺，曹原，陈锋，
申请(专利权)人：华为技术有限公司，
类型：发明
国别省市：广东;44