CN114077429A - 一种显示界面的布局方法及电子设备 - Google Patents

Abstract

本申请提供一种显示界面的布局方法及电子设备，涉及终端领域，开发人员可使用应用开发工具在开发界面中显示预设的初始布局文件，进而，开发人员可在上述初始布局文件中添加一个或多个控件单元，并设置控件单元的属性约束条件，以得到第一应用中与第一显示界面对应的第一布局文件；其中，控件单元的属性值(例如大小、位置等)为第一应用的运行设备按照对应的属性约束条件计算得到的；后续，第一应用的运行设备可根据第一布局文件中设置的属性约束条件计算各个控件单元的属性值，从而按照各个控件单元的属性值自动完成第一显示界面的布局和显示，这样，开发人员不需要分别针对不同的运行设备设计多个布局文件，使得应用的开发效率提高。

Description

一种显示界面的布局方法及电子设备

本申请要求以下5件中国专利申请的优先权。其中，这5件中国专利申请包括：于2020年08月18日提交国家知识产权局、申请号为202010833382.1的中国专利申请；于2020年12月28日提交国家知识产权局、申请号为202011583597.9的中国专利申请；于2020年09月10日提交国家知识产权局、申请号为202010949895.9的中国专利申请；于2020年10月30日提交国家知识产权局、申请号为202011185677.9的中国专利申请；于2020年10月22日提交国家知识产权局、申请号为202011141090.8的中国专利申请。上述5件中国专利申请全部内容通过引用结合在本申请中。

技术领域

本申请涉及终端领域，尤其涉及一种显示界面的布局方法及电子设备。

背景技术

手机等电子设备中通常安装有一个或多个应用，这些应用可实现丰富的应用功能。目前，开发人员在开发每个应用时，需要设计应用中每个显示界面中各个控件的布局(layout)，得到每个显示界面的布局文件，并将布局文件携带在应用安装包中。这样，电子设备安装了该应用的安装包之后，在运行该应用时，可获取到相关显示界面的布局文件，从而按照该布局文件显示出对应的显示界面。

但是，随着电子设备的种类越来越多，每种电子设备的规格也越来越多，开发人员需要花费大量的时间和精力设计应用在不同电子设备上的布局文件。以车机为例，不同厂商生产的车机至少有十几种显示界面的规格，那么，针对同一应用中的同一显示界面，开发人员对每一种规格的车机均需要设计该显示界面的布局文件。显然，这种开发显示界面的布局文件的方法较为耗时费力，使得开发人员开发应用的难度增大，效率降低。

发明内容

本申请提供一种显示界面的布局方法及电子设备，可根据电子设备的设备特点自动完成显示界面的布局，降低了应用的开发难度，使得应用的开发效率提高。

为达到上述目的，本申请采用如下技术方案：

第一方面，本申请提供一种显示界面的布局方法，包括：运行设备安装第一应用的应用安装包，应用安装包中包括第一布局文件，第一布局文件包含第一控件单元(例如View或ViewGroup)与第一预设算法之间的第一对应关系，第一预设算法的输入参数为运行设备的第一属性约束条件的取值，第一属性约束条件包括设备类型、设备尺寸、显示方向、设备能力或交互方式中的至少一个，第一预设算法的输出参数为第一控件单元的属性值，第一控件单元的属性值用于指示第一控件单元在第一显示界面中的大小和位置，当然，第一属性值还可以指示第一控件单元的颜色、形状字体等属性；后续，运行设备可获取其设备参数，设备参数包括运行设备的设备类型取值、运行设备的设备尺寸取值、运行设备的显示方向取值、运行设备的设备能力取值或运行设备的交互方式取值中的至少一个；进而，运行设备将获取到的设备参数作为输入参数输入第一预设算法后，可得到第一控件单元的第一属性值，使得运行设备可按照第一属性值布局第一控件单元并在第一显示界面中显示第一控件单元。

也就是说，第一应用的运行设备可根据布局文件中开发人员为各个View或ViewGroup设置的属性约束条件获取对应的设备参数，进而根据获取到的设备参数自适应的布局显示界面中的各个View或ViewGroup，使显示界面中各个View或ViewGroup的呈现效果与当前运行设备的设备特点(例如设备类型、尺寸、交互方式或功能等)相匹配。

结合第一方面提供的一种显示界面的布局方法，在第一种可能的实现方式中，上述第一布局文件还可以包括第二控件单元与第二预设算法之间的第二对应关系，类似的，第二预设算法的输入参数为运行设备的第二属性约束条件的取值，第二属性约束条件包括设备类型、设备尺寸、显示方向、设备能力或交互方式中的至少一个，第二预设算法的输出参数为第二控件单元的属性值，第二控件单元的属性值用于指示第二控件单元在所述第一显示界面中的大小和位置等属性，此时，上述方法还包括：运行设备根据上述设备参数和第二预设算法计算第二控件单元的第二属性值；进而，运行设备可按照第二属性值布局第二控件单元并在第一显示界面显示第二控件单元。

结合上述第一方面和第一方面的第一种可能的实现方式，在第二种可能的实现方式中，上述第一控件单元的属性值还可以用于指示第一控件单元的显示风格。

结合上述第一方面和第一种可能的实现方式，在第三种可能的实现方式中，上述设备类型可包括手机、电视、车机或手表。

结合上述第一方面和第一方面的第一种可能的实现方式，在第四种可能的实现方式中，上述设备尺寸可包括设备分辨率或长宽比。

结合上述第一方面和第一方面的第一种可能的实现方式，在第五种可能的实现方式中，上述显示方向包括横屏方向或竖屏方向。

结合上述第一方面和第一方面的第一种可能的实现方式，在第六种可能的实现方式中，上述设备能力包括摄像能力、定位能力或通话能力，上述交互方式包括触摸交互、遥控器交互或语音交互。

结合上述第一方面和第一方面的第一种可能的实现方式，在第七种可能的实现方式中，上述第一布局文件还包括第一控件单元的第一功能项，第一功能项包括缩放、拉伸、隐藏、均分或折行中的一个布局能力；上述方法还包括：运行设备获取与第一功能项对应的第三预设算法；运行设备将对应的设备参数作为输入参数输入第三预设算法，通过第三预设算法计算得到第一控件单元的第三属性值。

结合上述第一方面和第一方面的第一种可能的实现方式，在第八种可能的实现方式中，上述第一布局文件中包括与第三控件单元对应的第三设备能力，上述方法还包括：运行设备查询具有第三设备能力的显示输出设备；运行设备可指示该显示输出设备显示第三控件单元。

结合上述第一方面的第八种可能的实现方式，在第九种可能的实现方式中，运行设备指示显示输出设备显示第三控件单元包括：运行设备可将第三控件单元对应的显示资源发送给显示输出设备，以使得显示输出设备显示第三控件单元。

这样一来，运行设备按照布局文件中为各个View或ViewGroup设置的设备能力，可将不同的View或ViewGroup分布至具有相关设备能力的一个或多个电子设备中显示，使得一个显示界面中的不同View或ViewGroup可在与其功能相匹配的对应电子设备上呈现给用户。

第二方面，本申请提供一种生成布局文件的方法，包括：显示第一应用的开发界面；如果检测到用户(例如开发人员)输入的第一操作，可在开发界面中显示预设的初始布局文件；进而，如果检测到用户输入的第二操作，可在上述初始布局文件中添加第一控件单元，第一控件单元用于在第一应用的第一显示界面中显示，控件单元可以为控件(View)或控件组(ViewGroup)；进而，如果检测到用户输入的第三操作，可在上述初始布局文件中设置第一控件单元的第一属性约束条件，其中，第一控件单元的属性值(例如第一控件单元的大小、位置等属性)为第一应用的运行设备按照上述第一属性约束条件计算得到的；也就是说，布局文件中各个View或ViewGroup的属性值不是固定的，而是按照运行设备按照上述第一属性约束条件计算得到的；后续，当开发人员按照上述方法将第一显示界面中的所有需要的控件单元、控件单元的属性约束条件都添加至上述初始布局文件后，可得到与第一显示界面对应的第一布局文件，第一布局文件用于指示第一显示界面中N个控件单元的布局方式；进而，应用开发工具可根据第一布局文件生成第一应用的应用安装包。

这样一来，安装有第一应用的应用安装包的电子设备(可称为运行设备)可根据第一布局文件中为各个控件(或控件组)设置的属性约束条件，动态的计算各个控件(或控件组)的属性值，从而按照各个控件(或控件组)的属性值自动完成第一显示界面的布局和显示。

也就是说，开发人员只需要在布局文件中设置各个控件(或控件组)的属性约束条件，便可使不同的运行设备按照该属性约束条件自适应的进行布局，不需要开发人员分别针对不同的运行设备设计多套布局文件，从而降低了应用的开发难度，使得应用的开发效率提高。

结合上述第二方面，在第一种可能的实现方式中，上述开发界面中可以设置属性窗口，属性窗口中包括一个或多个属性约束条件，该属性约束条件用于定义第一应用的运行设备计算控件单元的属性值时获取的设备参数，例如，属性约束条件可以包括运行设备的设备类型、设备尺寸、显示方向、设备能力以及交互方式中的至少一个。

那么，在初始布局文中设置第一控件单元的第一属性约束条件之前，还可以包括：检测到用户输入的第三操作，第三操作为用户在上述属性窗口中选择第一属性约束条件的操作；此时，在初始布局文中设置第一控件单元的第一属性约束条件，包括：按照第三操作中用户在属性窗口中选择的第一属性约束条件，在第一布局文件中建立第一属性约束条件与第一控件单元之间的第一对应关系。例如，用户为第一控件单元选择的第一属性约束条件为设备尺寸，则应用开发工具可以建立第一控件单元与设备尺寸之间的对应关系，即第一控件单元的具体属性值由运行设备的设备尺寸动态决定。

结合上述第二方面和第二方面的第一种可能的实现方式，在第二种可能的实现方式中，上述属性窗口中还可以包括一个或多个属性选项，例如，宽度、高度以及显示位置中的至少一个；当用户在上述一个或多个属性选项中选中第一属性选项(例如宽度)时，上述第一对应关系为第一属性约束条件与第一控件单元的第一属性选项之间的对应关系。例如，第一对应关系为第一控件单元的宽度(即第一控件单元的第一属性选项)与设备尺寸(即第一属性约束条件)之间的对应关系，即第一控件单元的宽度这一属性值由运行设备的设备尺寸动态决定。

结合上述第二方面和第二方面的第一种可能的实现方式，在第三种可能的实现方式中，上述属性窗口中还可以包括一个或多个功能项或功能项组，其中，上述功能项包括缩放、拉伸、隐藏、均分以及折行中的至少一个布局能力，上述功能项组为多个功能项叠加后组成的布局能力，例如，经过缩放、拉伸、隐藏等布局能力的叠加后可实现沉浸式布局的布局能力。

那么，当用户在上述一个或多个功能项中选中第一功能项时，上述第一对应关系为第一属性约束条件、第一功能项与第一控件单元之间的对应关系；和/或，当用户在上述一个或多个功能项组中选中第一功能项组时，上述第一对应关系为第一属性约束条件、第一功能项组与第一控件单元之间的对应关系。例如，第一对应关系为第一控件单元、缩放(即第一功能项)与设备尺寸(即第一属性约束条件)之间的对应关系，即第一控件单元实现缩放的布局能力时，其具体属性值由运行设备的设备尺寸动态决定。

结合上述第二方面的第一至第三中任一种可能的实现方式，在第四种可能的实现方式中，在设置第一控件单元的第一属性约束条件之后，还包括：在第一布局文件中建立第一预设算法与第一控件单元之间的第二对应关系；其中，第一预设算法的输入参数为第一应用的运行设备获取的与第一属性约束条件对应的设备参数(例如运行设备具体的设备尺寸、设备类型等)，第一预设算法的输出参数为第一控件单元的属性值(例如控件大小、位置等)。

结合上述第二方面以及第二方面的第一至第四中任一种可能的实现方式，在第五种可能的实现方式中，上述开发界面中还可以设置控件库和视图树，其中，控件库内包括不同类型的控件单元，视图树用于指示第一显示界面中各个控件单元之间的结构关系；其中，第二操作为用户(即开发人员)在控件库中选择第一控件单元，并将第一控件单元添加至上述视图树的操作，此时，在初始布局文件中添加第一控件单元，具体包括：按照用户在第二操作中选择的第一控件单元，将第一控件单元添加至用户在第二操作中选择的视图树的第一位置。也即开发人员可在开发界面中选择添加的控件单元并设置控件单元在视图树中的位置。

结合上述第二方面以及第二方面的第一至第五中任一种可能的实现方式，在第六种可能的实现方式中，上述开发界面中还可以设置预览窗口，该预览窗口用于模拟第一应用运行时呈现的第一显示界面；那么，在初始布局文件中添加第一控件单元之后，还包括：将第一控件单元显示在预览窗口的第一显示界面内，以便开发人员预览第一控件单元在运行设备上的显示效果。

结合上述第二方面以及第二方面的第一至第六中任一种可能的实现方式，在第七种可能的实现方式中，在初始布局文件中设置第一控件单元的第一属性约束条件之后，与添加第一控件单元类似的，还可以在初始布局文件中添加第二控件单元，第二控件单元也用于在第一显示界面中显示；进而，开发人员可在初始布局文中设置第二控件单元的第二属性约束条件，第二控件单元的属性值(例如第二控件单元在第一显示界面中的位置和大小)为第一应用的运行设备按照第二属性约束条件计算得到的。

结合上述第二方面以及第二方面的第一至第六中任一种可能的实现方式，在第八种可能的实现方式中，在初始布局文件中设置第一控件单元的第一属性约束条件之后，开发人员还可以在初始布局文件中添加第三控件单元，第三控件单元也用于在第一显示界面中显示；不同的是，开发人员可以直接在初始布局文中设置第三控件单元的属性值，而不是在初始布局文中设置第三控件单元的属性约束条件，也就是说，本申请中生成的第一布局文件中可以有一部分控件单元按照现有的开发方式进行布局，本申请实施例对此不做任何限制。

第三方面，本申请提供一种应用界面的布局方法，包括：接收到用户的第一操作；响应于接收到第一操作，根据第一界面对应的第一布局文件，确定第一界面中第一控件的第一属性值，以及第一控件的第二属性值；根据第一属性值确定第一控件的第一尺寸和第一位置；根据第一控件的第一尺寸和第一位置，电子设备的屏幕参数，以及第一控件的第二属性值确定第一控件的第二尺寸和第二位置；其中，第二尺寸与第一尺寸不同，和/或，第二位置与第一位置不同；根据第二尺寸和第二位置绘制第一控件，并显示第一界面。

其中，用户的第一操作例如为开启某个应用的操作，或者在某个应用的界面上执行特定操作，需要该界面需跳转到第一界面。第一属性值可以为Android系统原生的属性值，第二属性值可以为本申请实施例扩展的属性值。需要注意的是，扩展的属性值并不唯一确定第一控件的尺寸和位置，而是约束第一控件，与显示界面中其他控件的相对关系(例如相对大小、相对位置关系)。也就是说，开发人员在开发应用时，并没有确定出每个显示界面呈现给用户时的样子。后续，当电子设备在采用该布局文件绘制显示界面时，会根据布局文件中第一控件的层级结构以及扩展属性值，以及电子设备的屏幕参数确定显示界面中第一控件的尺寸以及位置等。

这样，开发人员仅需要设计一套布局文件，即可满足具有不同屏幕参数的电子设备的显示需求，有利于降低开发人员的开发成本以及维护成本。

另外，相较于应用安装包中需要携带多套布局文件的方案，本方案在应用安装包中携带一套布局文件，有利于提升电子设备下载应用安装包的流量成本和时间成本。并且，当电子设备安装该应用后，不需要保存其他多余的布局文件，提升了电子设备存储空间的利用率。

结合上述第三方面，在第一种可能的实现方式中，第一属性值包括第一控件的尺寸、外边距值、内边距值中的一项或多项；第二属性值包括第一控件的缩放能力相关的属性值、拉伸能力相关的属性值、隐藏能力相关的属性值、折行能力相关的属性值、均分能力相关的属性值、占比能力相关的属性值和延伸能力相关的属性值中的一项或多项。

例如，电子设备可以先读取布局文件中第一控件具有第一属性和第二属性，再通过布局文件调用相应的接口，写入第一控件的第一属性值和第二属性值。或者，电子设备也可以直接调用接口，写入第一控件的第一属性值和第二属性值。

结合上述第三方面的第一种可能的实现方式，在第二种可能的实现方式中，当第一控件的第二属性值包括第一控件的缩放能力相关的属性值，且第一控件的缩放能力相关的属性值包括第一控件的水平可用空间占比值和垂直可用控件占比值时，根据第一控件的第一尺寸，电子设备的屏幕参数，以及第一控件的第二属性值确定第一控件的第二尺寸，包括：根据电子设备的屏幕参数确定第一控件的布局容器的尺寸；根据第一控件的布局容器的尺寸、以及水平可用空间占比值和垂直可用控件占比值，对第一控件的第一尺寸进行缩放，得到第一控件的第二尺寸；其中，第一控件的第二尺寸的宽高比与第一控件的第一尺寸的宽高比相同；第一控件的第二尺寸中的宽度与布局容器的宽度的比值等于水平可用空间占比值，和/或，第二尺寸中的高度与布局容器的高度的比值等于垂直可用控件占比值。

其中，水平可用空间占比值，是指第一控件的宽度占第一控件的布局容器的宽度的比例。垂直可用控件占比值，是指第一控件的高度占第一控件的布局容器的高度的比例。

示例性的，电子设备在绘制第一控件时，会根据布局容器的尺寸对第一控件进行缩放，使得缩放后的第一控件尽量满足开发人员设置的水平方向和垂直方向上的可用空间占比。在一些示例中，缩放后的第一控件能够同时满足水平方向和垂直方向上的可用空间占比。在另一些示例中，缩放后的第一控件不能同时满足水平方向和垂直方向上的可用空间占比。那么，在缩放的过程中，当第一控件达到某一方向的可用空间占比后，可以停止缩放该第一控件。

由此可见，本申请实施例提供的缩放能力，使得具有缩放能力的控件可以根据布局容器的变化自适应进行缩放，能够保证控件原本的形状不变(即宽高比不变)。例如，可以针对图片的控件，或者包含图片的控件设置缩放能力。如果是单方向的拉伸图片，可能造成图片变形和失真，影响图片的显示效果。又例如，可以针对具有圆角的按钮控件设置缩放能力，避免单方向拉伸按钮控件时，圆角的信息丢失。

另外，相较于简单地把图片的宽和高按照相同的缩放比例进行缩放，并使得缩放后的控件的宽度与布局容器的宽度相同，或者缩放后的控件的高度与布局容器的高度相同。本申请实施例提供的缩放能力，是按照水平可用空间的占比以及垂直可用空间的占比来缩放的子控件。也就是说，在缩放子控件时，还可以保证子控件宽高与布局容器的宽高具有一定比例，保证布局的设计感和美感。

结合上述第三方面的第二种可能的实现方式，在第三种可能的实现方式中，缩放相关的属性值还包括第一控件缩放最大尺寸，和/或，第一控件缩放最小尺寸。

结合上述第三方面的第一种可能的实现方式，在第四种可能的实现方式中，当第一控件的第二属性值包括第一控件的缩放能力相关的属性值，且第一控件的缩放相关的属性值包括第一控件的布局容器的缩放能力使能，且不包含第一控件水平可用空间占比值和垂直可用控件占比值时，根据第一控件的第一尺寸，电子设备的屏幕参数，以及第一控件的第二属性值确定第一控件的第二尺寸，包括：根据电子设备的屏幕参数确定第一控件的布局容器的尺寸；根据布局容器中存放的全部控件的尺寸和边距，确定布局容器中的全部控件的整体缩放比例；按照整体缩放比例对第一控件的第一尺寸进行缩放，得到第一控件的第二尺寸；其中，第一控件的第二尺寸的宽高比与第一控件的第一尺寸的宽高比相同。

在另一些实施例中，在设置布局容器的属性时，设置缩放能力使能的属性值为true。也可以不针对布局容器中包含的子控件(例如第一控件)设置水平方向和垂直方向上的可用空间占比。那么，子控件可以默认水平可用空间占比和垂直可用空间占比均为100％，即布局容器内子控件根据布局容器的变化等比例放大或缩小。在一些示例中，缩放后的子控件能够同时满足水平方向和垂直方向上的可用空间占比均为100％。在一些示例中，缩放后的子控件不能同时满足水平方向和垂直方向上的可用空间占比均为100％。那么，在缩放的过程中，当子控件达到某一方向的可用空间占比后，可以停止缩放该子控件。

结合上述第三方面的第四种可能的实现方式，在第五种可能的实现方式中，缩放相关的属性值还包括第一控件的布局容器的最大尺寸，和/或，第一控件的布局容器的最小尺寸。

结合上述第三方面以及第三方面的第一至第五种可能的实现方式中的任意一种实现方式，在第六种可能的实现方式中，屏幕参数包括屏幕规格参数和屏幕状态参数，其中屏幕规格参数包括屏幕的尺寸、分辨率、屏幕类型中的一项或多项，屏幕状态参数包括横竖屏状态、分屏状态以及折叠状态中的一项或多项。

第四方面，本申请提供一种应用界面的布局系统，包括第一电子设备和第二电子设备；第一电子设备，用于接收到用户的第一操作；第一电子设备，还用于响应于接收到第一操作，根据第一界面对应的第一布局文件，确定第一界面中第一控件的第一属性值，以及第一控件的第二属性值；第一电子设备，还用于根据第一属性值确定第一控件的第一尺寸和第一位置；根据第一控件的第一尺寸和第一位置，第一电子设备的屏幕参数、以及第一控件的第二属性值确定第一控件的第二尺寸和第二位置；其中，第二尺寸与第一尺寸不同，和/或，第二位置与第一位置不同；第一电子设备，还用于根据第二尺寸和第二位置绘制第一控件，并显示第一界面；第二电子设备，用于接收到用户的第二操作；第二电子设备，还用于响应于接收到第二操作，根据第二界面对应的第二布局文件，确定第二界面中第二控件的第三属性值，以及第二控件的第四属性值；第二电子设备，还用于根据第三属性值确定第二控件的第三尺寸和第三位置；根据第二控件的第三尺寸和第三位置，第二电子设备的屏幕参数、以及第一控件的第四属性值确定第二控件的第四尺寸和第四位置；其中，第四尺寸与第三尺寸不同，和/或，第四位置与第三位置不同；第二电子设备，还用于根据第四尺寸和第四位置绘制第二控件，并显示第二界面；其中，第二界面和第一界面为同一应用的同一界面；第二布局文件中第二控件的第三属性值和第四属性值，分别与第一布局文件中第一控件的第一属性值和第二属性值相同；第二电子设备的屏幕参数与第一电子设备的屏幕参数不同，第二电子设备显示的第二界面中第二控件与第一电子设备显示的第一界面中第一控件的尺寸不同，和/或，位置不同。

由此可见，具有不同屏幕参数的电子设备根据同一个布局文件绘制的显示界面不同。换言之，电子设备根据同一个布局文件可以自适应的调整显示界面的布局，即减轻了应用开发人员针对布局文件的开发工作量，又满足了不同屏幕参数的电子设备的显示需求。

结合上述第四方面，在第一种可能的实现方式中，第一属性值包括第一控件的尺寸、外边距值、内边距值中的一项或多项；第二属性值包括第一控件的缩放能力相关的属性值、拉伸能力相关的属性值、隐藏能力相关的属性值、折行能力相关的属性值、均分能力相关的属性值、占比能力相关的属性值和延伸能力相关的属性值中的一项或多项；第三属性值包括第二控件的尺寸、外边距值、内边距值中的一项或多项；第四属性值包括第二控件的缩放能力相关的属性值、拉伸能力相关的属性值、隐藏能力相关的属性值、折行能力相关的属性值、均分能力相关的属性值、占比能力相关的属性值和延伸能力相关的属性值中的一项或多项。

结合上述第四方面的第一种可能的实现方式，在第二种可能的实现方式中，缩放能力相关的属性值包括控件的水平可用空间占比值和垂直可用控件占比值、控件缩放最大尺寸、控件缩放最小尺寸、控件的布局容器的缩放能力使能、控件的布局容器的最大尺寸、控件的布局容器的最小尺寸中的一项或多项。

结合上述第四方面以及第四方面的第一至第二种可能的实现方式中的任意一种实现方式，在第三种可能的实现方式中，屏幕参数包括屏幕规格参数和屏幕状态参数，其中屏幕规格参数包括屏幕的尺寸、分辨率、屏幕类型中的一项或多项，屏幕状态参数包括横竖屏状态、分屏状态以及折叠状态中的一项或多项。

第五方面，本申请提供一种应用界面的布局系统，包括第一电子设备和第二电子设备；第一电子设备，用于接收到用户的第一操作；第一电子设备，还用于响应于接收到第一操作，根据第一界面对应的第一布局文件，确定第一界面中第一控件的水平可用空间占比值和垂直可用控件占比值；其中，第一控件的水平可用空间占比值为第一比值，第一控件的垂直可用控件占比值为第二比值；第一电子设备，还用于根据第一电子设备的屏幕参数和第一属性值确定第一控件的尺寸和位置；第一电子设备，还用于显示第一界面；第二电子设备，用于接收到用户的第二操作；第二电子设备，还用于响应于接收到第二操作，根据第二界面对应的第二布局文件，确定第二界面中第二控件水平可用空间占比值和垂直可用控件占比值；其中，第二控件的水平可用空间占比值为第一比值，第二控件的垂直可用控件占比值为第二比值；第二电子设备，还用于根据第二电子设备的屏幕参数和第二属性值确定第二控件的尺寸和位置；第二电子设备，还用于显示第二界面；其中，第二界面和第一界面为同一应用的同一界面；第二电子设备的屏幕参数与第一电子设备的屏幕参数不同；在第一界面中，第一控件的宽度占第一控件的布局容器宽度的比值为第一比值；或者，第一控件的高度占第一控件的布局容器高度的比值为第二比值；在第二界面中，第二控件的宽度占第二控件的布局容器宽度的比值为第一比值；或者，第二控件的高度占第二控件的布局容器高度的比值为第二比值。

由此可见，本申请实施例提供的缩放能力，使得具有缩放能力的控件可以根据布局容器的变化自适应进行缩放，能够保证控件原本的形状不变(即宽高比不变)。例如，可以针对图片的控件，或者包含图片的控件设置缩放能力。如果是单方向的拉伸图片，可能造成图片变形和失真，影响图片的显示效果。又例如，可以针对具有圆角的按钮控件设置缩放能力，避免单方向拉伸按钮控件时，圆角的信息丢失。

另外，相较于简单地把图片的宽和高按照相同的缩放比例进行缩放，并使得缩放后的控件的宽度与布局容器的宽度相同，或者缩放后的控件的高度与布局容器的高度相同。本申请实施例提供的缩放能力，是按照水平可用空间的占比以及垂直可用空间的占比来缩放的子控件。也就是说，在缩放子控件时，还可以保证子控件宽高与布局容器的宽高具有一定比例，保证布局的设计感和美感。

结合上述第五方面，在第一种可能的实现方式中，当第二控件的布局容器的宽度大于第一控件的布局容器的宽度，且第二控件的高度等于第一控件的布局容器的高度时，第二控件的尺寸与第一控件的尺寸相同；当第二控件的布局容器的宽度等于第一控件的布局容器的宽度，且第二控件的高度大于第一控件的布局容器的高度时，第二控件的尺寸与第一控件的尺寸相同；当第二控件的布局容器的宽度大于第一控件的布局容器的宽度，且第二控件的高度大于第一控件的布局容器的高度时，第二控件的尺寸大于第一控件的尺寸，且第二控件的宽高比与第一控件的宽高比相同。

第六方面，本申请提供一种应用界面的布局方法，接收到用户在第一界面上的第一操作；响应于接收到第一操作，确定第二界面中的第一布局容器，第一布局容器配置有第一方向上排列的N个第一控件，N为大于1的整数；根据电子设备的显示参数确定第一布局容器在第一方向上的尺寸；根据第一布局容器在第一方向上的尺寸，以及第一控件在第一方向上的第一尺寸，确定第一布局容器中显示第一控件的行数或列数，以及每一行或每一列显示第一控件的数量；根据第一布局容器在第一方向上的尺寸，以及每一行或每一列显示的第一控件的数量确定每一行或每一列中第一控件的在第一方向上的第二尺寸，第二尺寸与第一尺寸相同或不同；显示第二界面，第二界面包括第一控件，第一控件在第一方向上的尺寸为第二尺寸。

其中，第一控件在第一方向上的第一尺寸，为第一控件在第一方向的参考尺寸。N个第一控件在第一方向上的参考尺寸可以相同，也可以不同。

由此可见，本申请实施例提供的方法，可以使得布局容器中的多个子控件可以根据布局容器的变化自适应分行显示。实现具有不同屏幕参数的电子设备可以根据相同的布局设置呈现不同的显示效果，在减少开发人员的开发和维护的工作量的同时，满足各种类型电子设备的显示需求。

此外，相较于应用安装包中需要携带多套布局文件的方案，本方案在应用安装包中携带一套布局文件，有利于提升电子设备下载应用安装包的流量成本和时间成本。并且，当电子设备安装该应用后，不需要保存其他多余的布局文件，提升了电子设备存储空间的利用率。

结合上述第六方面，在第一种可能的实现方式中，第一方向为水平方向或垂直方向。

其中，第一方向可以为第一布局容器的布局方向，也可以为用户设置的方向。

结合上述第六方面或第六方面的第一种可能的实现方式，在第二种可能的实现方式中，第一布局容器的布局参数包括折行方向，折行方向包括正向折行或反向折行；其中正向折行是指第一布局容器中水平方向排列的第一控件在分行时，排列在后的第一控件位于排列在先的第一控件的下一行；或者，第一布局容器中垂直方向排列的第一控件在分列时，排列在下的第一控件位于排列在上的第一控件的右侧一行；反向折行是指第一布局容器中水平方向排列的第一控件在分行时，排列在后的第一控件位于排列在先的第一控件的上一列；或者，第一布局容器中垂直方向排列的第一控件在分列时，排列在下的第一控件位于排列在上的第一控件的左侧一列；在根据第一布局容器在第一方向上的尺寸，以及每一行或每一列显示的第一控件的数量确定每一行或每一列中第一控件在第一方向上的第二尺寸之后，方法还包括：根据第一布局容器在第一方向上的尺寸，每一行或每一列中第一控件在第一方向上的第二尺寸，以及折行方向，确定每一行或每一列中第一控件的在第一布局容器中的位置。

需要说明的是，这里子控件的排列顺序的先后可以根据用户阅读文字的习惯确定，例如具体可以根据子控件上显示的文字的语种确定用户的阅读习惯。一般，对于中文英文等语言，用户习惯从左至右，从上至下地阅读，因此，针对水平排列的多个子控件，左侧子控件可认为是排列在先，右侧的子控件为排列在后。针对垂直排列的多个子控件，上方的子控件可认为是排列在先，下侧的子控件为排列在后。

由此，提供了两种不同的折行方向，满足不同语言，不同阅读习惯的显示需求。

结合上述第六方面以及第六方面的第一至第二种可能的实现方式中的任意一种实现方式，在第三种可能的实现方式中，第一布局容器的布局参数还包括折行对齐方式，折行对齐方式包括左对齐、垂直居中、右对齐、顶对齐、水平居中和底对齐；其中，左对齐，是指第一布局容器中每一行最左侧的第一控件的左边缘对齐；垂直居中，是指第一布局容器中每一行中所有的第一控件的垂直中心线对齐；右对齐，是指第一布局容器中每一行最右侧的第一控件的右边缘对齐；顶对齐，是指第一布局容器中每一列最上方的第一控件的上边缘对齐；水平居中，是指第一布局容器中每一列中所有的第一控件的水平中心线对齐；底对齐，是指第一布局容器中每一列最下方的第一控件的下边缘对齐；在根据第一布局容器在第一方向上的尺寸，以及每一行或每一列显示的第一控件的数量确定每一行或每一列中第一控件在第一方向上的第二尺寸之后，方法还包括：根据第一布局容器在第一方向上的尺寸，每一行或每一列中第一控件在第一方向上的第二尺寸，以及折行对齐方式，确定每一行或每一列中第一控件的在第一布局容器中的位置。

结合上述第六方面以及第六方面的第一至第三种可能的实现方式中的任意一种实现方式，在第四种可能的实现方式中，第一布局容器开启在第一方向上的占比能力，以及开启缩放能力，在第一方向上的占比能力是指第一布局容器中第一控件在第一方向保持预设占比的能力，缩放能力是指第一布局容器中第一控件可根据第一布局容器的尺寸缩小或放大的能力；根据第一布局容器在第一方向上的尺寸，以及每一行或每一列显示的第一控件的数量确定每一行或每一列中第一控件在第一方向上的第二尺寸，包括：根据第一布局容器在第一方向上的尺寸，每一行或每一列显示的第一控件的数量，以及第一方向上的占比能力确定每一行或每一列中第一控件在第一方向上的第二尺寸，第二尺寸与第一尺寸不同；根据每一行或每一列中第一控件在第一方向上的第二尺寸，以及缩放能力确定每一行或每一列中第一控件在第二方向上的尺寸，第二方向为垂直于第一方向的方向。

可见，折行能力还可以和占比能力、缩放能力组合使用，实现不同的显示需求。

结合上述第六方面以及第六方面的第一至第三种可能的实现方式中的任意一种实现方式，在第五种可能的实现方式中，第一布局容器开启在第一方向上的均分能力，第一方向上的均分能力，是指第一布局容器在第一方向上相邻的第一控件在第一方向的间距相等；在根据第一布局容器在第一方向上的尺寸，以及每一行或每一列显示的第一控件的数量确定每一行或每一列中第一控件在第一方向上的第二尺寸之后，方法还包括：根据第一布局容器在第一方向上的尺寸，每一行或每一列中第一控件在第一方向上的第二尺寸，以及第一布局容器在第一方向上的均分能力，确定每一行或每一列中第一控件的在第一布局容器中的位置。

可见，折行能力还可以和均分能力组合使用，实现不同的显示需求。

结合上述第六方面以及第六方面的第一至第三种可能的实现方式中的任意一种实现方式，在第六种可能的实现方式中，第一布局容器开启在第二方向上的隐藏能力，第二方向为垂直与第一方向的方向，隐藏能力是指第一布局容器在第二方向能够隐藏至少一个第一控件；方法还包括：根据电子设备的屏幕参数确定第二界面中第一布局容器在第二方向上的尺寸；当根据第一布局容器在第一方向上的尺寸，以及第一控件在第一方向上的第一尺寸，确定第一布局容器中显示第一控件的行数或列数，并且确定每一行或每一列显示第一控件的数量为1时，根据第一布局容器在第二方向上的尺寸，第一控件在第二方向上的尺寸，以及第一控件的隐藏优先级，确定第二界面中显示的第一控件。

可见，折行能力还可以和隐藏能力组合使用，实现不同的显示需求。

结合上述第六方面以及第六方面的第一至第六种可能的实现方式中的任意一种实现方式，在第七种可能的实现方式中，第一控件为图片控件、按钮控件、文本控件、图标按钮控件中任一种或任几种。

结合上述第五方面以及第五方面的第一至第七种可能的实现方式中的任意一种实现方式，在第八种可能的实现方式中，第一操作为启动应用的操作，或者跳转到第二界面的操作，或者切换电子设备横竖屏状态的操作，或者切换电子设备的分屏状态的操作中任一项。

第七方面，本申请提供一种计算机可读存储介质，包括计算机指令，该计算机指令用于显示第一应用的第一显示界面，第一显示界面中包括第一控件单元(第一控件单元为控件或控件组)；其中，当计算机指令在第一运行设备上运行时，可使得第一运行设备按照第一设备参数在第一显示界面中显示第一控件单元；当计算机指令在第二运行设备上运行时，可使得第二运行设备按照第二设备参数在第一显示界面中显示第一控件单元；其中，第一控件单元在第一运行设备中呈现的布局方式与第一控件单元在第二运行设备中呈现的布局方式不同。也就是说，开发人员只需要对应用的每个显示界面设计一套对应的计算机指令，便可在不同的运行设备上实现显示界面中各个View或ViewGroup的布局过程，开发人员不需要针对同一显示界面为不同运行设备分别开发对应的计算机指令。

示例性的，上述第一设备参数或第二设备参数包括设备类型、设备尺寸、显示方向、设备能力以及交互方式中的至少一个。

第八方面，本申请提供一种计算机可读存储介质，例如，应用开发工具，该应用开发工具具体可包括计算机指令，当计算机指令在上述电子设备上运行时，可使电子设备执行上述任一方面中所述的方法。

第九方面，本申请提供一种电子设备，包括：显示屏、输入设备、一个或多个处理器、一个或多个存储器、以及一个或多个计算机程序；其中，处理器与输入设备、显示屏以及存储器均耦合，上述一个或多个计算机程序被存储在存储器中，当电子设备运行时，处理器可执行存储器存储的一个或多个计算机程序，以使电子设备执行上述任一方面中所述的方法。

第十方面，本申请提供一种运行设备，包括：显示屏、一个或多个处理器、一个或多个存储器、以及一个或多个计算机程序；其中，处理器与显示屏以及存储器均耦合，上述一个或多个计算机程序被存储在存储器中，当运行设备运行上述第一应用时，处理器可执行存储器存储的一个或多个计算机程序，以使运行设备执行上述任一方面中所述的方法。

可以理解地，上述各个方面所提供的电子设备、运行设备以及计算机可读存储介质均应用于上文所提供的对应方法，因此，其所能达到的有益效果可参考上文所提供的对应方法中的有益效果，此处不再赘述。

附图说明

图1为现有技术中显示界面中控件和控件组的示意图；

图2为本申请实施例提供的一种电子设备的结构示意图一；

图3A为本申请实施例提供的一种开发界面的示意图一；

图3B为本申请实施例提供的一种开发界面的示意图二；

图4A为本申请实施例提供的一种开发界面的示意图三；

图4B为本申请实施例提供的一种开发界面的示意图四；

图5为本申请实施例提供的一种显示界面的布局方法的应用示意图一；

图6为本申请实施例提供的一种显示界面的布局方法的应用示意图二；

图7为本申请实施例提供的一种显示界面的布局方法的应用示意图三；

图8为本申请实施例提供的一种显示界面的布局方法的应用示意图四；

图9为本申请实施例提供的一种显示界面的布局方法的流程示意图一；

图10为本申请实施例提供的一种开发界面的示意图五；

图11为本申请实施例提供的一种显示界面的布局方法的原理示意图一；

图12为本申请实施例提供的一种显示界面的布局方法的原理示意图二；

图13为本申请实施例提供的一种显示界面的布局方法的原理示意图三；

图14为本申请实施例提供的一种显示界面的布局方法的原理示意图四；

图15为本申请实施例提供的一种显示界面的布局方法的应用示意图五；

图16为本申请实施例提供的一种显示界面的布局方法的流程示意图二；

图17为本申请实施例提供的一种显示界面的布局方法的流程示意图三；

图18为本申请实施例提供的一种显示界面的布局方法的流程示意图四；

图19为本申请实施例提供的一种显示界面的布局方法的应用示意图六；

图20为本申请实施例提供的一种显示界面的布局方法的应用示意图七；

图21为本申请实施例提供的一种显示界面的布局方法的应用示意图八；

图22为本申请实施例提供的一种显示界面的布局方法的应用示意图九；

图23为本申请实施例提供的一种显示界面的布局方法的应用示意图十；

图24为本申请实施例提供的一种显示界面的布局方法的流程示意图五；

图25为本申请实施例提供的一种显示界面的布局方法的应用示意图十一；

图26为本申请实施例提供的一种显示界面的布局方法的应用示意图十二；

图27为本申请实施例提供的一种显示界面的布局方法的应用示意图十三；

图28为本申请实施例提供的一种显示界面的布局方法的应用示意图十四；

图29为本申请实施例提供的一种显示界面的布局方法的应用示意图十五；

图30为本申请实施例提供的一种显示界面的布局方法的流程示意图五；

图31为本申请实施例提供的一种显示界面的布局方法的流程示意图六；

图32为本申请实施例提供的一种显示界面的布局方法的应用示意图十六；

图33为本申请实施例提供的一种显示界面的布局方法的应用示意图十七；

图34为本申请实施例提供的一种显示界面的布局方法的应用示意图十八；

图35为本申请实施例提供的一种电子设备的结构示意图二；

图36为本申请实施例提供的一种电子设备的结构示意图三。

具体实施方式

为了方便理解下述各实施例，首先给出相关技术的简要介绍：

控件(View)：通常可将在GUI(graphical user interface，图形用户界面)中呈现的元素称为控件，控件能够为用户提供一定的操作功能或用于显示一定内容。

示例性的，上述控件具体可以包括文本控件，例如TextView控件、EditText控件等，也可以包括按钮控件，例如Button控件、ImageButton控件等，还可以包括图片控件，例如Image控件等，本申请实施例对此不做任何限制。

以安卓系统举例，应用(APP)中所有显示界面内的元素都是由控件(View)和控件组(ViewGroup)构成的。

如图1所示，一个显示界面中可以包含一个或多个View或ViewGroup。View是显示在显示界面中的一个元素；ViewGroup是一个用于存放View(或ViewGroup)的布局容器。ViewGroup中可以添加新的View或ViewGroup，使得各个View之间按照一定的层次和结构关系进行排列。

示例性的，开发人员可使用线性布局(LinearLayout)、表格布局(TableLayout)、相对布局(RelativeLayout)、层布局(FrameLayout)、绝对布局(AbsoluteLayout)或网格布局(GridLayout)等布局方式设计APP中每个显示界面内的View或ViewGroup，从而生成每个显示界面的布局文件，即layout文件。

这些显示界面的布局文件可携带在APP的应用安装包中以安装在手机等电子设备内。这样，当APP在电子设备中运行时，电子设备通过获取对应的布局文件，可按照该布局文件布局对应显示界面中的View或ViewGroup，从而向用户呈现对应的显示界面。

下面将结合附图对本实施例的实施方式进行详细描述。

本申请实施例提供的一种显示界面的布局方法可应用于手机、平板电脑、笔记本电脑、超级移动个人计算机(ultra-mobile personal computer，UMPC)、手持计算机、上网本、个人数字助理(personal digital assistant，PDA)、可穿戴电子设备、车载设备(也可称为车机)、虚拟现实设备等具有显示功能的电子设备中，本申请实施例对此不做任何限制。

示例性的，以手机作为上述电子设备举例，图2示出了手机的结构示意图。

手机可以包括处理器110，外部存储器接口120，内部存储器121，通用串行总线(universal serial bus，USB)接口130，天线1，天线2，移动通信模块150，无线通信模块160，音频模块170，扬声器170A，受话器170B，麦克风170C，耳机接口170D，传感器模块180等。

可以理解的是，本发明实施例示意的结构并不构成对手机的具体限定。在本申请另一些实施例中，手机可以包括比图示更多或更少的部件，或者组合某些部件，或者拆分某些部件，或者不同的部件布置。图示的部件可以以硬件，软件或软件和硬件的组合实现。

处理器110可以包括一个或多个处理单元，例如：处理器110可以包括应用处理器(application processor，AP)，调制解调处理器，图形处理器(graphics processingunit，GPU)，图像信号处理器(image signal processor，ISP)，控制器，存储器，视频编解码器，数字信号处理器(digital signal processor，DSP)，基带处理器，和/或神经网络处理器(neural-network processing unit，NPU)等。其中，不同的处理单元可以是独立的器件，也可以集成在一个或多个处理器中。

处理器110中还可以设置存储器，用于存储指令和数据。在一些实施例中，处理器110中的存储器为高速缓冲存储器。该存储器可以保存处理器110刚用过或循环使用的指令或数据。如果处理器110需要再次使用该指令或数据，可从所述存储器中直接调用。避免了重复存取，减少了处理器110的等待时间，因而提高了系统的效率。

手机的无线通信功能可以通过天线1，天线2，移动通信模块150，无线通信模块160，调制解调处理器以及基带处理器等实现。

天线1和天线2用于发射和接收电磁波信号。

移动通信模块150可以提供应用在手机上的包括2G/3G/4G/5G等无线通信的解决方案。在一些实施例中，移动通信模块150的至少部分功能模块可以被设置于处理器110中。在一些实施例中，移动通信模块150的至少部分功能模块可以与处理器110的至少部分模块被设置在同一个器件中。

无线通信模块160可以提供应用在手机上的包括无线局域网(wireless localarea networks，WLAN)(如无线保真(wireless fidelity，Wi-Fi)网络)，蓝牙(bluetooth，BT)，全球导航卫星系统(global navigation satellite system，GNSS)，调频(frequencymodulation，FM)，近距离无线通信技术(near field communication，NFC)，红外技术(infrared，IR)等无线通信的解决方案。

在一些实施例中，手机的天线1和移动通信模块150耦合，天线2和无线通信模块160耦合，使得手机可以通过无线通信技术与网络以及其他设备通信。

手机通过GPU，显示屏194，以及应用处理器等实现显示功能。GPU为图像处理的微处理器，连接显示屏194和应用处理器。GPU用于执行数学和几何计算，用于图形渲染。处理器110可包括一个或多个GPU，其执行程序指令以生成或改变显示信息。

显示屏194用于显示图像，视频等。显示屏194包括显示面板。显示面板可以采用液晶显示屏(liquid crystal display，LCD)，有机发光二极管(organic light-emittingdiode，OLED)，有源矩阵有机发光二极体或主动矩阵有机发光二极体(active-matrixorganic light emitting diode的，AMOLED)，柔性发光二极管(flex light-emittingdiode，FLED)，Miniled，MicroLed，Micro-oLed，量子点发光二极管(quantum dot lightemitting diodes，QLED)等。在一些实施例中，手机可以包括1个或N个显示屏194，N为大于1的正整数。

手机可以通过ISP，摄像头193，视频编解码器，GPU，显示屏194以及应用处理器等实现拍摄功能。

摄像头193用于捕获静态图像或视频。物体通过镜头生成光学图像投射到感光元件。感光元件可以是电荷耦合器件(charge coupled device，CCD)或互补金属氧化物半导体(complementary metal-oxide-semiconductor，CMOS)光电晶体管。感光元件把光信号转换成电信号，之后将电信号传递给ISP转换成数字图像信号。ISP将数字图像信号输出到DSP加工处理。DSP将数字图像信号转换成标准的RGB，YUV等格式的图像信号。在一些实施例中，手机可以包括1个或N个摄像头193，N为大于1的正整数。

外部存储器接口120可以用于连接外部存储卡，例如Micro SD卡，实现扩展手机的存储能力。外部存储卡通过外部存储器接口120与处理器110通信，实现数据存储功能。例如将音乐，视频等文件保存在外部存储卡中。

内部存储器121可以用于存储计算机可执行程序代码，所述可执行程序代码包括指令。处理器110通过运行存储在内部存储器121的指令，从而执行手机的各种功能应用以及数据处理。内部存储器121可以包括存储程序区和存储数据区。其中，存储程序区可存储操作系统，至少一个功能所需的应用程序(比如声音播放功能，图像播放功能等)等。存储数据区可存储手机使用过程中所创建的数据(比如音频数据，电话本等)等。此外，内部存储器121可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件，闪存器件，通用闪存存储器(universal flash storage，UFS)等。

手机可以通过音频模块170，扬声器170A，受话器170B，麦克风170C，耳机接口170D，以及应用处理器等实现音频功能。例如音乐播放，录音等。

音频模块170用于将数字音频信息转换成模拟音频信号输出，也用于将模拟音频输入转换为数字音频信号。音频模块170还可以用于对音频信号编码和解码。在一些实施例中，音频模块170可以设置于处理器110中，或将音频模块170的部分功能模块设置于处理器110中。

扬声器170A，也称“喇叭”，用于将音频电信号转换为声音信号。手机可以通过扬声器170A收听音乐，或收听免提通话。

受话器170B，也称“听筒”，用于将音频电信号转换成声音信号。当手机接听电话或语音信息时，可以通过将受话器170B靠近人耳接听语音。

麦克风170C，也称“话筒”，“传声器”，用于将声音信号转换为电信号。当拨打电话或发送语音信息时，用户可以通过人嘴靠近麦克风170C发声，将声音信号输入到麦克风170C。手机可以设置至少一个麦克风170C。在另一些实施例中，手机可以设置两个麦克风170C，除了采集声音信号，还可以实现降噪功能。在另一些实施例中，手机还可以设置三个，四个或更多麦克风170C，实现采集声音信号，降噪，还可以识别声音来源，实现定向录音功能等。

耳机接口170D用于连接有线耳机。耳机接口170D可以是USB接口130，也可以是3.5mm的开放移动电子设备平台(open mobile terminal platform，OMTP)标准接口，美国蜂窝电信工业协会(cellular telecommunications industry association of the USA，CTIA)标准接口。

传感器模块180中可以包括压力传感器，陀螺仪传感器，气压传感器，磁传感器，加速度传感器，距离传感器，接近光传感器，指纹传感器，温度传感器，触摸传感器，环境光传感器，骨传导传感器等。

当然，手机还可以包括充电管理模块、电源管理模块、电池、按键、指示器以及1个或多个SIM卡接口等，本申请实施例对此不做任何限制。

一般，开发人员开发完成的应用可采用应用安装包的形式在应用市场中上架，应用市场中可以提供各个应用的应用安装包供用户下载。例如，应用安装包可以为APK文件。

仍以手机为上述电子设备举例，用户可使用手机在应用市场中下载某一应用的应用安装包。以音乐APP举例，手机下载到音乐APP的应用安装包后，通过运行该应用安装包可将音乐APP安装在手机中。

示例性的，音乐APP的应用安装包中可以包括开发人员设计的每一显示界面的布局文件。布局文件中的内容决定了显示界面呈现给用户的样子。例如，布局文件1中可以定义显示界面1中包含的控件(View)或控件组(ViewGroup)，以及这些控件(View)或控件组(ViewGroup)之间的结构关系。同时，各个控件(View)或控件组(ViewGroup)的显示资源，例如，按钮的图标、文本内容、头像或者图片等，也可携带在音乐APP的应用安装包中安装在用户的手机中。这样，音乐APP在运行时，手机可获取相关显示界面的布局文件，按照该布局文件定义的控件或控件组获取对应控件或控件组的显示资源，进而，手机可按照该布局文件将对应控件或控件组的显示资源加载在显示界面中的对应位置，即完成布局文件中各个控件或控件组的布局。最终，手机可将完成加载各个应控件或控件组显示在显示屏中，呈现出相应的显示界面。

在现有技术中，开发人员可以在布局文件中定义各个控件(View)或控件组(ViewGroup)的属性值。一个控件或控件组的属性值可用于指示该控件或控件组在显示界面中显示时的位置和大小。当然，上述属性值还可以用于指示该控件或控件组在显示界面中显示时的颜色、字体、分辨率等具体的显示方式和显示效果，本申请实施例对此不做任何限制。

例如，控件1为名称为“123”的图片1，控件1的分辨率为1080p，控件1显示时的形状为圆角矩形，控件1的显示位置在控件2上层居中的位置等。也就是说，布局文件中各个View或ViewGroup的属性值是明确的。这样，手机读取到布局文件中控件1的属性值后，可按照控件1的属性值布局控件1。例如，按照控件1为名称获取对应的图片1(即显示资源)，并按照布局文件中为控件1定义的分辨率、形状和显示位置等属性值将图片1加载在显示界面中，从而显示出对应的显示界面。

由于不同电子设备的显示规格(例如显示屏的尺寸、分辨率等)通常不同，用户在不同电子设备上对应用中显示界面的需求也不尽相同，如果在各个电子设备上都使用同样的布局文件布局应用的显示界面，则会出现显示效果不佳的问题。为了使不同电子设备显示应用的显示界面时达到较好的显示效果，需要开发人员在开发APP的显示界面时，对每一种电子设备设计对应显示界面的布局文件，使得开发人员开发和维护APP的过程较为复杂，开发和维护效率降低。

在本申请实施例中，开发人员在应用的布局文件中无需为各个View或ViewGroup设置明确的属性值，相应的，开发人员可在布局文件中设置各个View或ViewGroup的属性值的约束条件(后续可称为属性约束条件)。每个View(或ViewGroup)的具体属性值取决于这些属性约束条件的具体取值。

示例性的，View 1的属性约束条件可以包括设备类型。例如，当设备类型为手机时，View1的属性值具体包括：分辨率为1080p、显示方向为竖屏显示方向；当设备类型为电视时，View 1的属性值具体包括：分辨率为2048p、显示方向为横屏显示方向。需要说明的是，View1的属性值还可以包括大小、形状、颜色等，这些属性值均可受到设备类型这一属性约束条件的影响，本申请实施例对此不做任何限制。

当然，View 1的属性约束条件也可以包括多个。例如，View 1的属性约束条件可以包括设备类型、显示尺寸以及与用户的交互方式等。当电子设备的设备类型、显示尺寸或者与用户的交互方式不同时，View 1可对应不同的属性值，从而向用户呈现View 1不同的显示效果。其中，电子设备根据布局文件中的属性约束条件布局View或ViewGroup的具体方法将在后续实施例中详细阐述，故此处不予赘述。

也就是说，不同的电子设备在布局应用的显示界面时，可根据开发人员在布局文件中为各个控件(或控件组)设置的属性约束条件，获取运行该应用的电子设备(即运行设备)的设备类型、显示尺寸或与用户的交互方式等，自动确定与属性约束条件匹配的各个控件(或控件组)的属性值，从而按照各个控件(或控件组)的属性值自动完成显示界面的布局。

这样，不同的电子设备可以根据布局文件中的属性约束条件自适应的布局显示界面中的控件(或控件组)，同时，开发人员只需要在显示界面的布局文件中设置各个控件(或控件组)的属性约束条件，便可使不同的电子设备按照该属性约束条件自适应的进行布局，不需要开发人员分别针对不同的电子设备设计多套布局文件，从而降低了应用的开发难度，使得应用的开发效率提高。

示例性的，开发人员可使用相应的应用开发工具(例如Android Studio)设计某一应用中显示界面内各个控件(或控件组)的布局，进而得到该显示界面的布局文件。

仍以音乐APP举例，如图3A所示，开发人员可在应用开发工具的开发界面301中设计音乐APP的各个显示界面。例如，开发人员在设计音乐APP中播放歌曲的显示界面(也可称为播放界面)时，可在开发界面301中为播放界面创建布局文件302。例如，布局文件302可以是名称为“activity_main”，格式为xml(Extensible Markup Language，可扩展标记语言)的文件。此时，应用开发工具创建的布局文件302为默认的初始布局文件。后续，开发人员可在该初始布局文件中添加播放界面中需要的View或ViewGroup。

仍如图3A所示，开发界面301中设置有控件库303，控件库303中包括各种类型的View和ViewGroup。例如，文本控件、图片控件等。开发人员可在控件库303中向布局文件302中添加相应的View或ViewGroup。这些View或ViewGroup组成了音乐APP的播放界面。

仍如图3A所示，开发界面301中还可以设置预览窗口304，开发人员通过预览窗口304可以实时的看到已添加的View或ViewGroup组成的显示界面的显示效果。例如，在预览窗口304中，当前音乐APP的播放界面中包括3个ViewGroup，即标题栏401、播放状态栏402以及操作栏403。其中，标题栏401中包括返回按钮41和标题42这两个View；播放状态栏402中包括封面43、歌曲名称44、歌手45、歌词46这四个View；操作栏403中包括进度条404、暂停按钮48、上一首按钮47、下一首按钮49以及收藏按钮50这五个View。

以开发人员添加操作栏403中的进度条(ProgressBar)404这一View举例，开发人员在控件库303中选择了进度条404这一View之后，可将进度条404作为一个节点添加到视图树305(例如Component Tree)对应的ViewGroup内。例如，进度条404为ViewGroup1中的一个子节点。此时，应用开发工具可按照视图树305中进度条404与ViewGroup1中其他view之间的结构关系将进度条404显示在预览窗口304中。

示例性的，当开发人员将进度条404添加至视图树305时，应用开发工具可按照进度条404在视图树305中的具体位置为进度条404设置一组默认的属性值，例如，进度条404的宽度为宽度1，高度为高度1，显示位置为位置1。进而，应用开发工具可按照该默认的属性值将进度条404显示在预览窗口304的相应位置。其中，某一View或ViewGroup的属性值除了宽度、高度、显示位置之外，还可以包括颜色、形状、字体等，这些属性值决定了该View或ViewGroup在显示界面中的显示方式和显示效果。

在本申请实施例中，开发人员可以在布局文件302中将一个或多个View或ViewGroup的属性值设置为动态可变的。仍以进度条404举例，如果开发人员不希望进度条404在播放界面中显示时的具体属性值为固定不变的，如图3A所示，开发人员可以在开发界面301的属性窗口306中对进度条404设置该View的属性值的约束条件，即属性约束条件。该View的具体属性值取决于对应属性约束条件的具体取值。

示例性的，View或ViewGroup的属性约束条件可以包括设备类型、设备尺寸、显示方向、设备能力以及交互方式中的一个或多个。其中，设备类型的具体取值可以是手机、电视、车机、手表等，还可以是具体某一型号或规格的设备。设备尺寸的具体取值可以是设备的分辨率、长宽比等。显示方向的具体取值可以是横屏方向或竖屏方向等。设备能力的具体取值可以是摄像能力、定位能力、通话能力等设备提供的功能。交互方式的具体取值可以是触摸交互、遥控器交互、语音交互等与用户交互的具体方式。

仍以进度条404这一View举例，开发人员可以在属性窗口306中设置进度条404的属性约束条件。例如，如果开发人员勾选“交互方式”这一属性约束条件，说明开发人员设置了进度条404这一View的具体属性值取决于运行音乐APP的设备与用户的交互方式。此时，应用开发工具可将与“交互方式”对应的控件属性的预设算法(例如第一预设算法F)携带在布局文件302中，或者，将上述第一预设算法F携带在音乐APP的应用安装包中。并且，应用开发工具可在布局文件302中建立第一预设算法F与进度条404这一View之间的对应关系。其中，第一预设算法F中可以包括开发人员预设的一个或多个算法，第一预设算法F1的输入参数为“交互方式”这一属性约束条件的具体取值，第一预设算法F1的输出参数为进度条404这一View的具体属性值(例如高度、宽度、显示位置等)。

例如，第一预设算法F1中可以包括高度算法F11、宽度算法F12以及位置算法F13。后续，当运行音乐APP的设备(例如手机)在显示播放界面中的进度条404时，可根据布局文件302中开发人员设置的“交互方式”这一属性约束条件获取当前的交互方式为“触摸交互”，即交互方式的具体取值为“触摸交互”。进而，手机可将“触摸交互”这一参数输入至高度算法F11中，通过高度算法F11计算出进度条404的高度。类似的，手机可将“触摸交互”这一参数输入至宽度算法F12中，通过宽度算法F12计算出进度条404的宽度。同样，手机可将“触摸交互”这一参数输入至位置算法F13中，通过位置算法F13计算出进度条404的显示位置。这样，手机可按照计算出的高度、宽度和显示位置在播放界面中显示进度条404。也就是说，运行音乐APP的设备可根据布局文件302中开发人员设置的属性约束条件动态的确定出相关View或ViewGroup的属性值，从而动态的布局显示界面中的View或ViewGroup。

在另一些实施例中，如图3B所示，属性窗口306中还可以包括“宽度”、“高度”、“显示位置”等属性选项。仍以进度条404这一View举例，开发人员将进度条404添加至视图树305后，如果开发人员认为应用开发工具为进度条404默认设置的高度1和位置1这两个属性值不需要修改，但为进度条404默认设置的宽度1这个参数需要修改，则开发人员可选中“宽度”的属性选项。进而，针对“宽度”这一属性值，开发人员可继续在属性窗口306中设置该属性值的属性约束条件。例如，如果开发人员勾选“设备尺寸”这一属性约束条件，说明开发人员设置了进度条404的宽度的具体属性值取决于运行音乐APP的设备的设备尺寸。此时，应用开发工具可将以“设备尺寸”为自变量，以“宽度”这一控件属性值为因变量的第二预设算法F2携带在布局文件302(或音乐APP的应用安装包)中。并且，布局文件302中记录了第二预设算法F2与进度条404的宽度这一属性值之间的对应关系。

后续，当运行音乐APP的设备(例如手机)在显示播放界面中的进度条404时，需要确定进度条404的宽度、高度和显示位置等属性值。其中，手机通过读取布局文件可确定进度条404的高度为默认的高度1，进度条404的显示位置为默认的位置1，进度条404的宽度依赖于“设备尺寸”这一属性约束条件。进而，手机可获取当前“设备尺寸”的具体取值。例如，“设备尺寸”为2400*1080，那么，手机可将2400*1080这一参数输入至第二预设算法F2中，通过第二预设算法F2计算出进度条404的宽度。这样，手机可按照布局文件302中默认的高度1、默认的位置1以及计算出的高度在播放界面中显示进度条404。也就是说，View或ViewGroup中的一个或多个属性值可以根据开发人员在布局文件302中设置的属性约束条件动态确定，从而实现View或ViewGroup在显示界面中的动态布局。

需要说明的是，上述预览窗口304可以默认手机为运行音乐APP的设备(即运行设备)，从而在预览窗口304中显示各个View或ViewGroup在手机屏幕中的布局情况。开发人员也可以将预览窗口304切换为其他运行设备(例如电视、车机等)的预览模式，在预览窗口304中显示其他设备屏幕中各个View或ViewGroup的布局情况，本申请实施例对此不做任何限制。

并且，开发人员在上述布局文件302中可以为播放界面中所有的View或ViewGroup设置对应的属性约束条件，也可以为播放界面中的一个或部分View或ViewGroup设置对应的属性约束条件。当开发人员在布局文件302中添加了所有的View或ViewGroup后，应用开发工具可生成与播放界面对应的一个布局文件302。后续，应用开发工具通过编译该布局文件302可将布局文件302携带在音乐APP的应用安装包中。

也就是说，开发人员在使用上述方法布局应用的显示界面时，可对显示界面中的一个或多个View或ViewGroup设置相应的属性约束条件，使得显示界面中的View或ViewGroup在不同的电子设备中运行时可根据属性约束条件的具体取值自适应的进行布局。这样，开发人员不需要为不同电子设备分别创建对应的布局文件，并在不同的布局文件中分别设置各个View或ViewGroup的属性值，从而降低了应用的开发难度，使得应用的开发效率提高。

在另一些实施例中，仍以上述播放界面的布局文件302举例，开发人员还可以在开发界面301中设置View或ViewGroup所支持的功能项。例如，View或ViewGroup所支持的功能选项可以包括缩放、拉伸、隐藏、均分或折行等基本布局能力的功能项。其中，缩放是指View或ViewGroup的宽度和高度按照一定的比例进行放大或缩小的显示能力。拉伸是指View或ViewGroup的宽度和高度按照不同的比例进行放大或缩小的显示能力。隐藏是指View或ViewGroup在显示界面中可见或不可见的显示能力。均分是指View或ViewGroup中的内容在显示界面中均匀分布的显示能力。折行是指View或ViewGroup中的内容在显示界面中通过一行或多行显示的显示能力。

其中，通过在布局文件302中为View或ViewGroup设置缩放、折行等能力，使得电子设备在显示相应界面时实现自适应布局的具体方法可参见后续实施例中的详细阐述。

如图4A所示，仍以上述操作栏403中的进度条404这一View举例，开发人员在视图树305的ViewGroup1中添加了进度条404后，开发人员还可以在属性窗口306中设置进度条404所支持的功能项，以及实现该功能项时进度条404的属性约束条件。例如，如果开发人员勾选“缩放”这一功能项，说明开发人员将进度条404设置为具有“缩放”这一显示能力的View。如果开发人员勾选“设备类型”这一属性约束条件，说明进度条404在实现“缩放”功能时其属性值取决于音乐APP的运行设备的设备类型。

示例性的，开发人员可预先设置与“缩放”这一功能项对应的控件属性值的预设算法Y1。当向预设算法Y1输入不同属性约束条件的具体取值时，通过预设算法Y1可计算出对应控件不同的属性值。例如，可以将“设备类型”的具体取值作为输入参数输入至预设算法Y1中，通过预设算法Y1计算得到进度条404的宽度、高度以及显示位置等属性值。又例如，预设算法Y1中又进一步包括用于计算控件宽度的预设算法Y11、用于计算控件高度的预设算法Y12以及用于计算控件显示位置的预设算法Y13。那么，如果将“设备类型”的具体取值作为输入参数输入至预设算法Y11后，通过预设算法Y11可计算得到进度条404的宽度。如果将“设备类型”的具体取值作为输入参数输入至预设算法Y12后，通过预设算法Y12可计算得到进度条404的高度。如果将“设备类型”的具体取值作为输入参数输入至预设算法Y13后，通过预设算法Y13可计算得到进度条404的显示位置。

类似的，开发人员还可以预先设置与“拉伸”、“隐藏”、“均分”以及“折行”等功能项分别对应的控件属性值的预设算法。这样，当开发人员在布局文件302中为某一View或ViewGroup设置了对应的功能项后，应用开发工具可将对应的预设算法携带在布局文件或应用安装包中下发给安装音乐APP的设备。后续，安装音乐APP的设备在显示相关的View或ViewGroup时，可根据布局文件302中设置的功能项获取对应的预设算法，并向预设算法中输入开发人员设置的属性约束条件的具体取值，从而动态的计算出该View或ViewGroup的具体属性值，以便按照View或ViewGroup的具体属性值在显示界面中动态布局该View或ViewGroup。

在一些实施例中，View或ViewGroup通过上述缩放、延伸、隐藏、均分或折行等基本局部能力的组合和叠加，还可以被设计为由多种基本布局能力组成的功能项组。例如，View1通过缩放、延伸和隐藏可实现沉浸式布局的功能项组。又例如，ViewGroup1中的各个View通过缩放和折行可实现动态合并展开的功能项组。开发人员可按照实际应用场景或用户需求对上述基本局部能力进行排列组合后设计相应的功能项组，本申请实施例对此不作任何限制。

类似的，开发人员可以预先为不同的功能项组设置对应的控件属性值的预设算法。例如，与“沉浸式布局”这一功能项组对应的控件属性值的预设算法为预设算法Y2。当向预设算法Y2输入不同属性约束条件的具体取值时，通过预设算法Y2可计算出对应控件不同的属性值。示例性的，由于“沉浸式布局”这一功能项组集成了缩放、延伸和隐藏等多种基本局部能力，因此，预设算法Y2中可以包括与缩放、延伸和隐藏等多个功能项对应的控件属性值的预设算法，本申请实施例对此不做任何限制。

例如，如图4B所示，以上述操作栏403这一ViewGroup举例，开发人员在视图树305中添加了与操作栏403对应的ViewGroup1后，开发人员还可以在属性窗口306中设置操作栏403所支持的功能项组。例如，开发人员通过勾选“沉浸式布局”这一功能项组，可以设置操作栏403具有沉浸式布局的布局能力。进而，开发人员可继续在属性窗口306中设置与“沉浸式布局”这一功能项对应的属性约束条件，即操作栏403在实现“沉浸式布局”的布局能力时，操作栏403的属性值的约束条件。例如，开发人员设置的属性约束条件为交互方式。

那么，运行音乐APP的设备(例如手机)在显示操作栏403时，可根据布局文件302中设置的“沉浸式布局”这一功能项组获取对应的预设算法Y2。并且，手机可根据布局文件302中设置的“交互方式”这一属性约束条件获取该设备与用户的交互方式为触摸交互，即“交互方式”的具体取值为：触摸交互。进而，手机可将触摸交互作为输入参数输入至预设算法Y2中，通过预设算法Y2计算出操作栏403的具体属性值(例如显示位置、高度以及宽度等)。这样，手机可按照计算出的具体属性值动态的在显示界面中布局操作栏403，使得操作栏403可以根据手机与用户的交互方式实现沉浸式布局的功能。

也就是说，开发人员还可以以View或ViewGroup为单位，在布局文件中设置View或ViewGroup所支持的功能项(或功能项组)，以及该功能项(或功能项组)对应的属性约束条件。后续，运行音乐APP的电子设备可获取上述属性约束条件的具体取值，从而按照属性约束条件的具体取值自适应的布局对应的View或ViewGroup，使View或ViewGroup能够实现开发人员设置的功能项。

同样，使用这种布局文件的开发方法开发显示界面时，开发人员只需要对应用的每个显示界面设计一套布局文件便可在不同的电子设备上适用，开发人员不需要为不同电子设备分别创建多套对应的布局文件，并在各个布局文件中分别设置各个View或ViewGroup的属性值，从而降低了应用的开发难度，使得应用的开发效率提高。

并且，后续开发人员在维护音乐APP时，如果需要修改某一显示界面中的布局，则开发人员可在对应的布局文件中修改各个View或ViewGroup的功能项、功能项组或属性约束条件，生成新的布局文件，并将新的布局文件更新至用户使用的电子设备中。开发人员不需要针对不同的电子设备分别修改布局文件中的各个View或ViewGroup，从而简化了应用开发完成后应用的维护过程。

上述实施例是以开发人员设计音乐APP中一个显示界面(即播放界面)的布局文件举例说明的。可以理解的是，开发人员可以按照上述方法生成音乐APP中各个显示界面的布局文件，每个布局文件中都声明了对应显示界面中包含的各个View或ViewGroup，显示界面中一个或多个View或ViewGroup所支持的功能项(或功能项组)，以及该功能项(或功能项组)对应的属性约束条件。进而，开发人员可将这些布局文件携带在音乐APP的应用安装包中，使得不同的电子设备通过下载和安装音乐APP的应用安装包能够获取到不同显示界面的布局文件。这样，不同的电子设备在运行音乐APP时，可按照相应的布局文件布局显示界面中的View或ViewGroup，从而呈现给用户完整的显示界面。

仍以上述音乐APP举例，用户在手机中下载了音乐APP的应用安装包后，可将该应用安装包安装在手机中。此时，应用安装包中携带的开发人员设计的各个显示界面的布局文件也一并保存在手机中。例如，在安装音乐APP的应用安装包时，手机可在指定的路径下创建名称为“音乐”的文件夹1，并将应用安装包中携带的各个显示界面的布局文件存储在文件夹1中。

当然，音乐APP的应用安装包中还可以携带开发人员设置的其他信息。例如，音乐APP的应用安装包中还可以携带相关View或ViewGroup的显示资源，例如按钮的图标、联系人的头像、图片、文本或网页链接等。这些显示资源也可以存储在手机为音乐APP创建的文件夹内，例如，存储至上述名称为“音乐”的文件夹1内。音乐APP在运行时可根据布局文件获取对应View或ViewGroup的显示资源，从而使用View或ViewGroup的显示资源加载对应的View或ViewGroup，以显示出对应的显示界面。

在本申请实施例中，手机在运行音乐APP时可显示音乐APP中不同的显示界面。例如，当音乐APP需要显示播放界面时，音乐APP通过调用相应的接口可触发手机从上述名称为“音乐”的文件夹1中获取与播放界面对应的布局文件，即图3A、图3B、图4A或图4B中开发人员创建的布局文件302。

示例性的，如图5所示，布局文件302中定义了ViewGroup1、ViewGroup2以及ViewGroup3。ViewGroup1与播放界面中的操作栏对应，ViewGroup1中包括进度条、暂停按钮、上一首按钮、下一首按钮以及收藏按钮这5个View。ViewGroup2与播放界面中的播放状态栏对应，ViewGroup2中包括封面、歌曲名称、歌手、歌词这4个View。ViewGroup3与播放界面中的标题栏对应，ViewGroup3中包括返回按钮和标题这2个View。

并且，仍如图5所示，开发人员在布局文件302中为相关的View或ViewGroup设置了对应的功能项(或功能项组)，以及该功能项(或功能项组)对应的属性约束条件。例如，ViewGroup1支持的功能项组为“沉浸式布局”，对应的属性约束条件1包括：设备类型和交互方式。又例如，ViewGroup2支持的功能项组为“动态合并展开”，对应的属性约束条件2包括：设备类型和显示方向。又例如，ViewGroup3支持的功能项为“缩放”，对应的属性约束条件3包括：设备尺寸。

需要说明的是，图5中是以ViewGroup为粒度设置了每个ViewGroup的功能项和属性约束条件，可以理解的，开发人员在设计布局文件时也可以以View为粒度，为每个View设置对应的功能项和属性约束条件，本申请实施例对此不做任何限制。

以上述ViewGroup1举例，手机通过读取布局文件302可确定ViewGroup1中包括进度条、暂停按钮、上一首按钮、下一首按钮以及收藏按钮这5个View。进而，手机可从上述文件夹1中获取这5个View中每个View的显示资源。

并且，手机通过读取布局文件302可确定ViewGroup1的功能项组为“沉浸式布局”，对应的属性约束条件1包括：设备类型和交互方式。进而，仍如图5所示，手机可按照“沉浸式布局”这一功能项组获取对应的控件属性的预设算法1。其中，不同功能项(或功能项组)与不同预设算法之间的对应关系可携带在布局文件302或音乐APP的应用安装包中下发给手机。并且，仍如图5所示，手机可按照属性约束条件1获取对应的设备参数1(即属性约束条件1的具体取值)。例如，设备参数1中包括与设备类型对应的设备参数为手机，即设备类型＝手机；并且，设备参数1中包括与交互方式对应的设备参数为触摸交互，即交互方式＝触摸交互。

进而，手机可将设备参数1＝(手机，触摸交互)作为输入参数输入至预设算法1中，通过预设算法1计算ViewGroup1中每个View的具体属性值，例如View的大小、形状、显示位置等。例如，当设备参数1中的设备类型＝手机，交互方式＝触摸交互时，可设置ViewGroup1中的View位于手机屏幕底部，方便用户操作。当然，手机还可以根据设备参数1计算ViewGroup1中每个View的大小、形状等属性值，本申请实施例对此不做任何限制。进而，仍如图5所示，手机可按照计算出的各个View的具体属性值，使用各个View的显示资源在播放界面501中加载ViewGroup1中的各个View，从而在手机的显示屏中显示出播放界面501中的操作栏502。

上述实施例中是以手机按照布局文件302显示ViewGroup1举例说明的。类似的，在显示ViewGroup2时，手机通过读取布局文件302可从上述文件夹1中获取ViewGroup2中每个View的显示资源。

并且，仍如图5所示，手机通过读取布局文件302可确定ViewGroup2的功能项为“动态合并展开”，对应的属性约束条件2包括：设备类型和显示方向。进而，仍如图5所示，手机可按照“动态合并展开”这一功能项组获取对应的控件属性的预设算法2。并且，手机可按照属性约束条件2获取对应的设备参数2(即属性约束条件2的具体取值)。例如，设备参数2中包括与设备类型对应的设备参数为手机，即设备类型＝手机；并且，设备参数2中包括与显示方向对应的设备参数为竖屏显示，即显示方向＝竖屏显示。

进而，手机可将设备参数2＝(手机，竖屏显示)作为输入参数输入至预设算法2中，通过预设算法2计算ViewGroup2中每个View的具体属性值，例如View的大小、形状、显示位置等。例如，当设备参数2中的设备类型＝手机，显示方向＝竖屏显示时，可设置ViewGroup2中的各个View按照竖直方向展开排列。进而，仍如图5所示，手机可按照计算出的各个View的具体属性值，使用各个View的显示资源在播放界面501中加载ViewGroup2中的各个View，从而在手机的显示屏中显示出播放界面501中的播放状态栏503。

类似的，仍如图5所示，手机通过读取布局文件302可确定ViewGroup3中包含的View，并获取对应View的显示资源。并且，布局文件302中定义了ViewGroup3的功能项为“缩放”，对应的属性约束条件3包括：设备尺寸。进而，仍如图5所示，手机可按照“缩放”这一功能项获取对应的控件属性的预设算法3。并且，手机可按照属性约束条件3获取对应的设备参数3(即属性约束条件3的具体取值)。例如，设备参数3中包括与设备尺寸对应的设备参数为2400*1080，即设备尺寸＝2400*1080。

进而，手机可将设备参数3＝(2400*1080)作为输入参数输入至预设算法3中，通过预设算法3计算ViewGroup3中每个View的具体属性值，例如View的大小、形状、显示位置等。例如，当设备参数3中的设备尺寸＝2400*1080时，可设置ViewGroup3位于屏幕顶部，ViewGroup3中的各个View中字体的大小为14号。进而，仍如图5所示，手机可按照计算出的各个View的具体属性值，使用各个View的显示资源在播放界面501中加载ViewGroup3中的各个View，从而在手机的显示屏中显示出播放界面501中的标题栏504。

这样，手机在显示音乐APP的播放界面501时，可按照布局文件302中为各个View或ViewGroup设置的功能项(或功能项组)获取计算具体控件属性值的预设算法，并按照为各个View或ViewGroup设置的属性约束条件获取对应的设备参数，进而根据获取到的设备参数使用对应的预设算法计算出对应View或ViewGroup的属性值，从而按照该属性值布局各个View或ViewGroup，最终为用户在显示屏中显示出相应的播放界面501。

类似的，手机在运行音乐APP显示音乐APP中的其他显示界面时，也可按照上述方法获取对应的布局文件布局各个View或ViewGroup，从而显示出相应的显示界面。

也就是说，手机可根据布局文件中开发人员为各个View或ViewGroup设置的功能项和属性约束条件获取对应的设备参数，进而根据获取到的设备参数自适应的布局显示界面中的各个View或ViewGroup，使显示界面中各个View或ViewGroup的呈现效果与当前运行设备的设备特点(例如设备类型、尺寸、交互方式或功能等)相匹配。

仍以上述音乐APP举例，与手机运行音乐APP类似的，当用户将音乐APP的应用安装包安装在车机1时，车机1也可以将应用安装包中各个显示界面的布局文件存储在指定路径的文件夹中。

仍以上述播放界面的布局文件302举例，当音乐APP需要显示播放界面时，音乐APP通过调用相应的接口可触发车机1获取与播放界面对应的布局文件302。布局文件302中包括与操作栏对应的ViewGroup1、与播放状态栏对应的ViewGroup2以及与标题栏对应的ViewGroup3。

那么，车机1通过读取布局文件302可分别获取ViewGroup1、ViewGroup2以及ViewGroup3中各个View的显示资源。

并且，如图6所示，车机1通过读取布局文件302可确定ViewGroup1的功能项组为“沉浸式布局”，对应的属性约束条件1包括：设备类型和交互方式。进而，如图6所示，车机1可按照“沉浸式布局”这一功能项组获取对应的控件属性的预设算法1。并且，车机1可按照属性约束条件1获取对应的设备参数1(即属性约束条件1的具体取值)。例如，设备参数1中包括与设备类型对应的设备参数为车机，即设备类型＝车机；并且，设备参数1中包括与交互方式对应的设备参数为语音交互，即交互方式＝语音交互。

进而，车机1可将设备参数1＝(车机1，触摸交互)作为输入参数输入至预设算法1中，通过预设算法1计算ViewGroup1中每个View的具体属性值，例如View的大小、形状、显示位置等。

例如，当设备参数1中的设备类型＝车机，交互方式＝语音交互时，用户不需要点击ViewGroup1中的按钮，因此可设置将ViewGroup1中的暂停按钮、上一首按钮、下一首按钮以及收藏按钮隐藏在播放界面601中，并将ViewGroup1中的进度条显示在播放界面601中，实现沉浸式布局的显示效果。进而，仍如图6所示，车机1可将ViewGroup1对应的View隐藏在播放界面601中不显示，并将进度条显示在播放界面601中。此时，播放界面601的操作栏602中只有进度条这一个View。

类似的，车机1通过读取布局文件302可确定ViewGroup2的功能项为“动态合并展开”，对应的属性约束条件2包括：设备类型和显示方向。进而，仍如图6所示，车机1可按照“动态合并展开”这一功能项组获取对应的控件属性的预设算法2。并且，车机1可按照属性约束条件2获取对应的设备参数2(即属性约束条件2的具体取值)。例如，设备参数2中包括与设备类型对应的设备参数为车机1，即设备类型＝车机；并且，设备参数2中包括与显示方向对应的设备参数为横屏显示，即显示方向＝横屏显示。

进而，车机1可将设备参数2＝(车机，横屏显示)作为输入参数输入至预设算法2中，通过预设算法2计算ViewGroup2中每个View的具体属性值，例如View的大小、形状、显示位置等。

例如，当设备参数2中的设备类型＝车机，显示方向＝横屏显示时，可设置ViewGroup2中的各个View按照水平方向展开排列。进而，仍如图6所示，车机1可按照计算出的各个View的具体属性值，使用各个View的显示资源在播放界面601中加载ViewGroup2中的各个View，从而显示出播放界面601中的播放状态栏603。

类似的，仍如图6所示，车机1通过读取布局文件302可确定ViewGroup3的功能项为“缩放”，对应的属性约束条件3包括：设备尺寸。进而，仍如图6所示，车机1可按照“缩放”这一功能项获取对应的控件属性的预设算法3。并且，车机1可按照属性约束条件3获取对应的设备参数3(即属性约束条件3的具体取值)。例如，设备参数3中包括与设备尺寸对应的设备参数为800*480，即设备尺寸＝800*480。

进而，车机1可将设备参数3＝(800*480)作为输入参数输入至预设算法3中，通过预设算法3计算ViewGroup3中每个View的具体属性值，例如View的大小、形状、显示位置等。例如，当设备参数3中的设备尺寸＝800*480时，可设置ViewGroup3位于屏幕顶部，ViewGroup3中的各个View中字体的大小为10号。进而，仍如图6所示，车机1可按照计算出的各个View的具体属性值，使用各个View的显示资源在播放界面601中加载ViewGroup3中的各个View，从而显示出播放界面601中的标题栏604。

这样，车机1在显示音乐APP的播放界面601时，可按照布局文件302中为各个View或ViewGroup设置的功能项和属性约束条件获取对应的设备参数，进而根据获取到的设备参数自适应的设置各个View或ViewGroup的属性值，从而按照该属性值布局各个View或ViewGroup，最终显示出相应的播放界面601。

需要说明的是，不是显示界面中的所有View或ViewGroup均需要设置对应的功能项和属性约束条件。开发人员可以根据具体的应用场景或实际经验在布局文件302中对一个或多个View或ViewGroup设置对应的功能项和属性约束条件，开发人员可对其他View或ViewGroup在布局文件302中设置具体的属性值(例如宽度、高度以及显示位置等)。那么，如果车机1(或手机)从布局文件302中读取到没有设置功能项和属性约束条件的View或ViewGroup时，可按照布局文件302中为该View或ViewGroup设置具体的属性值进行布局，本申请实施例对此不做任何限制。

可以看出，无论是手机按照布局文件302显示音乐APP中播放界面501的过程，还是车机1按照布局文件302显示音乐APP中播放界面601的过程，虽然手机和车机1最终显示出的播放界面中控件的布局形态不尽相同，但手机和车机1使用的布局文件是相同的(即上述布局文件302)。也就是说，不同的电子设备在显示应用中的同一显示界面时，可按照相关布局文件中为各个View或ViewGroup设置的功能项和属性约束条件自适应的布局显示界面中的各个View或ViewGroup。这样，开发人员不需要为不同电子设备分别创建对应的布局文件，从而降低了应用的开发难度，使得应用的开发效率提高。

在一些实施例中，开发人员还可以更新布局文件(例如上述布局文件302)中为某个View或ViewGroup设置的功能项(或功能项组)和属性约束条件。更新后的布局文件302可携带在最新版本的音乐APP的应用安装包中被下载至用户的电子设备(例如上述手机、车机1)中，使得用户的电子设备可以获取到相关显示界面最新的布局文件。

例如，如图5或图6所述，上述布局文件302中为开发人员ViewGroup2设置的功能项组为“动态合并展开”，对应的属性约束条件2包括：设备类型和显示方向。如图7所示，开发人员可将属性约束条件2修改为：设备类型、显示方向和设备尺寸，得到更新后的布局文件701。进而，开发人员可将更新后的布局文件701携带在最新版本的音乐APP的应用安装包中。

如果车机1和车机2均安装了最新版本的音乐APP的应用安装包举例，则车机1和车机2均可获取到应用安装包中更新后的布局文件701。

那么，与上述实施例中布局播放界面中各个View或ViewGroup的过程类似的，车机1在显示ViewGroup2时，车机1通过读取布局文件701可确定ViewGroup2的功能项为“动态合并展开”，对应的属性约束条件2包括：设备类型、显示方向和设备尺寸。进而，车机1可按照属性约束条件2获取对应的设备参数2。例如，设备参数2包括：设备类型＝车机，显示方向＝横屏显示，设备尺寸＝800*480。那么，车机1可按照获取到的设备参数2使用上述预设算法2计算ViewGroup2中每个View的具体属性值。例如，由于设备尺寸中的屏幕宽度(即800)小于门限值，因此可将ViewGroup2中的封面702与其他view(即歌曲名称、歌手、歌词)并列横向排布。进而，如图7所示，车机1可在播放界面703中将ViewGroup2中的封面702与其他view(即歌曲名称、歌手、歌词)并列横向排布进行显示。

类似的，车机2在显示ViewGroup2时，车机2通过读取布局文件701可确定ViewGroup2的功能项为“动态合并展开”，对应的属性约束条件2包括：设备类型、显示方向和设备尺寸。进而，车机2可按照属性约束条件2获取对应的设备参数2。例如，设备参数2包括：设备类型＝车机，显示方向＝横屏显示，设备尺寸＝1080*480。那么，车机2可按照获取到的设备参数2使用上述预设算法2计算ViewGroup2中每个View的具体属性值。此时，由于设备尺寸中的屏幕宽度(即1080)大于门限值，因此可将ViewGroup2中的封面702放大后展示在屏幕右侧。进而，如图7所示，车机2可在播放界面704中将ViewGroup2中的封面702放大后布局在屏幕右侧显示。

可以看出，当布局文件中View或ViewGroup的属性约束条件改变时，不同的电子设备可根据最新的属性约束条件获取最新的设备参数，从而根据最新的设备参数自适应的调整View或ViewGroup的布局，使显示界面中各个View或ViewGroup的呈现效果与当前运行设备的设备特点(例如设备类型、尺寸、交互方式或功能等)相匹配。

在一些实施例中，不同品牌的电子设备在显示各个View或ViewGroup时可以设置统一的显示风格。例如，品牌A的手机统一使用第一字体显示显示界面中的各个View或ViewGroup，品牌B的手机统一使用第二字体显示显示界面中的各个View或ViewGroup。那么，音乐APP的运行设备在按照其布局文件布局对应的显示界面时，还可以获取当前运行设备的品牌信息。进而，运行设备还可以根据获取到的品牌信息调整当前待显示的显示界面中各个View或ViewGroup属性值，例如，标题的颜色，标题的字体，按钮的圆角大小等，本申请实施例对此不做任何限制。

另外，上述实施例中均以音乐APP的布局文件举例说明，可理解的是，开发人员还可以按照上述方法开发其他APP中各个显示界面的布局文件。这样，电子设备在获取到相应布局文件后，可按照上述方法根据布局文件中各个View或ViewGroup的功能项和属性约束条件获取对应的设备参数，从而按照获取到的设备参数自适应的布局显示界面中的各个View或ViewGroup。

在另一些实施例中，开发人员还可以在布局文件中设置各个View或ViewGroup所需要的设备能力。例如，用于播放视频的View需要运行设备具有视频显示功能；又例如，用于显示地图的View需要运行设备具有定位功能；又例如，用于支付的View需要运行设备具有安全认证的运行环境。

那么，如图8所示，假设一个显示界面的布局文件(例如布局文件801)中既有用于播放视频的View1、还有用于显示地图的View2以及用于支付的View3。以运行设备为手机举例，手机获取到布局文件801后，可查询手机附近是否存在具有视频显示功能的电子设备，是否存在具有定位功能的电子设备以及是否存在具有安全认证的运行环境的电子设备。

例如，手机可与位于同一Wi-Fi网络中的电子设备进行通信，以获取附近电子设备的设备能力。如果手机查询到位于同一Wi-Fi网络中的电视具有视频显示功能，则手机可与电视建立网络连接。进而，手机可将View1的显示资源发送给具有视频显示功能的电子设备(例如电视)，由电视显示View1。

示例性的，手机还可以根据布局文件801中为View1设置的功能项和属性约束条件获取对应的设备参数，并按照获取到的设备参数计算View1的属性值，例如View1的大小、形状、显示位置等。进而，手机可将View1的属性值也发送给电视，使得电视可以按照View1的属性值使用View1的显示资源显示View1。

或者，手机还可以将布局文件801中为View1设置的功能项和属性约束条件发送给电视。进而，电视可以根据布局文件801中为View1设置的功能项和属性约束条件获取对应的设备参数，并按照获取到的设备参数计算View1的属性值。进而，电视可以按照计算出的View1的属性值使用View1的显示资源显示View1。

类似的，仍如图8所示，如果手机查询到位于同一Wi-Fi网络中的手表具有定位功能，则手机可与手表建立网络连接。进而，手机可将View2的显示资源发送给具有定位功能的电子设备(例如手表)，由手表显示View2。其中，View2的属性值可以由手机按照布局文件801中设置的功能项和属性约束条件计算后发送给手表，也可以由手机将布局文件801中为View2设置的功能项和属性约束条件发送给手表，由手表按照布局文件801中设置的功能项和属性约束条件计算得到View2的属性值。

仍如图8所示，如果手机没有查询到位于同一Wi-Fi网络内的其他电子设备具有安全认证的运行环境，而手机自身具有安全认证的运行环境，则手机可按照布局文件801中为View3设置的功能项和属性约束条件获取对应的设备参数。进而，手机可按照获取到的设备参数计算View3的属性值，并按照计算出的View3的属性值在手机屏幕中显示View3。

当然，当手机具有视频显示功能时，手机也可以在自身的屏幕中显示上述View1。又例如，当手机具有定位功能时，手机也可以在自身的屏幕中显示上述View2，本申请实施例对此不做任何限制。

这样一来，手机按照布局文件801中为各个View或ViewGroup设置的设备能力，可将不同的View或ViewGroup分布至具有相关设备能力的一个或多个电子设备中显示，使得一个显示界面中的不同View或ViewGroup可在与其功能相匹配的对应电子设备上呈现给用户。

需要说明的是，本申请实施例中可将设置有上述功能项和属性约束条件的View或ViewGroup称为具有自适应布局能力的View或ViewGroup。换言之，本申请实施例中显示界面中的各个View或ViewGroup具有自适应布局的能力。这些View或ViewGroup的自适应布局能力可以通过代码模块实现，下文会以缩放能力为例详细介绍实现过程。

其中，布局文件中的View或ViewGroup可存放在布局容器中。也就是说，布局容器是指用于存放控件以及其他布局容器的布局结构。即，一个布局容器可以包括一个或多个控件，以及嵌套一个或多个布局容器

示例性的，上述View和ViewGroup具有的自适应布局能力包括但不限于：缩放能力、拉伸能力、隐藏能力、折行能力(也可称为自动分行能力)、均分能力、占比能力、和延伸能力。这里先对View和ViewGroup具有的自适应布局能力进行简单介绍，后文会详细说明。

其中，缩放能力，是指View或ViewGroup在布局容器中水平方向和垂直方向具有自适应的缩小或放大的能力。例如，可以设置View或ViewGroup在布局容器中指定方向上的占比值。这样，当布局容器的尺寸发生变化时，布局容器中的View或ViewGroup保持原本的形状(例如宽高比)进行缩放，使得缩放后View或ViewGroup在布局容器水平方向的占比达到设定的占比值，和/或，缩放后View或ViewGroup在布局容器垂直方向的占比达到设定的占比值。

拉伸能力，是指View或ViewGroup在布局容器中指定方向上具有自适应拉伸的能力。例如，可以设置View或ViewGroup在布局容器中指定方向上(水平和/或垂直)的边距值。其中，边距值是指View或ViewGroup距离布局容器边缘的距离值。这样，当布局容器的尺寸发生变化时，布局容器中的View或ViewGroup会保持与布局容器在指定方向上的边距值，在指定方向上随着布局容器的尺寸而自适应变化。

需要说明的是，本申请实施例中的拉伸，包括View或ViewGroup在指定方向的放大(尺寸变大)，以及在指定方向的缩小(尺寸变小)。例如，View或ViewGroup在水平方向的拉伸，包括View和ViewGroup宽度变大，或者宽度变小。View或ViewGroup在垂直方向的拉伸，包括View和ViewGroup在高度变大，或者高度变小。

隐藏能力，是指View或ViewGroup在显示时根据优先级自动隐藏的能力。例如，可以设置View或ViewGroup在布局容器中隐藏的优先级。以隐藏优先级为例，当布局容器的尺寸发生变化，不足以显示设计的全部View或ViewGroup时，根据各个View或ViewGroup的隐藏优先级高低进行隐藏。

折行能力，是指布局容器中的View或ViewGroup具有自适应折行的能力。例如，可以设置布局容器的折行参考值。当布局容器中一行的View或ViewGroup的总宽度和间距大于折行参考值时，大于折行参考值的其他View或ViewGroup自动换行显示。

需要说明的是，这里的折行能力，包括水平方向的折行和垂直方向的折行。其中水平方向的折行，是指多个子控件原本为水平排列的，电子设备在显示时可以根据布局容器的宽度自动确定分行显示这多个子控件。其中垂直方向的折行，是指多个子控件原本为垂直排列的，电子设备在显示时可以根据布局容器的高度自动确定分列显示这多个子控件。在另一些示例中，垂直方向的折行也可以认为是水平方向的折行的逆运算。因此，本申请中的折行能力也可表述为分行能力、分列能力、分段能力、分栏能力等，本申请实施例对此不做具体限定。

均分能力，是指布局容器中的View或ViewGroup具有自动调整间距的能力。例如，可以设置布局容器内View或ViewGroup在指定方向上的间距为均分。那么，当布局容器的尺寸发生变化时，布局容器中的View或ViewGroup会根据自身的尺寸与布局容器的尺寸，自适应调整布局容器内View或ViewGroup的间距。

占比能力，是指View或ViewGroup在布局容器中指定方向保持固定占比的能力。例如，可以设置布局容器在指定方向上(例如水平方向或垂直方向)的占比值。这样，当布局容器的尺寸发生变化时，布局容器中的View或ViewGroup保持原本的形状(例如宽高比)进行缩放，使得缩放后View或ViewGroup在布局容器中指定方向上的占比满足设定的占比值。

延伸能力，是指布局容器中View或ViewGroup具有自动调整显示控件的数量的能力。例如，可以设置布局容器中露出特征的尺寸。那么，当布局容器的尺寸发生变化时，布局容器中的View或ViewGroup会根据自身的尺寸、布局容器的尺寸以及露出特征的尺寸确定布局容器中显示多少数量的View或ViewGroup。其中，露出特征为布局容器中显示一部分内容的View。

如图9所示，为本申请中实现View或ViewGroup的自适应布局能力的大体流程。首先，开发人员使用开发工具开发应用界面。在开发过程中，可以从View和ViewGroup的能力库(包括Android原生能力和本申请扩展的自适应布局能力)中选择需要使用的能力得到布局文件，生成应用的安装包，完成应用界面的开发。而后，电子设备可以从应用市场下载该应用安装包，并安装运行。电子设备在运行该应用时，根据布局文件以及电子设备的环境(例如屏幕参数)完成自动布局，绘制相应的应用界面，即为用户看到的界面。

下面，对本申请中实现View或ViewGroup的自适应布局能力的具体方案进行说明。

开发人员在开发应用时，可使用集成开发环境(Integrated DevelopmentEnvironment，IDE)工具开发应用。其中，IDE工具集成了代码编写功能、分析功能、编译功能、调试功能等一体化的开发软件服务套。例如，典型的Android系统的IDE工具包括Android Studio、DevEco Studio中任一种。

如图10中(1)所示，为开发人员开发应用时的开发界面1000的示例。开发界面1000中包括应用目录树1001(即上述实施例中的视图树305)、应用依赖包1002、以及应用显示界面1的开发界面，应用显示界面1的开发界面包括布局文件(如111.xml)1003以及JAVA源码(如222.java)1004。

其中，应用目录树1001包括应用名称、编译依赖包、应用程序包以及应用源码。开发人员可以通过应用目录树1001快速开启相应的文件，方便开发人员进行编辑。例如，开发人员可以通过应用源码中的JAVA源码或布局文件，快速开启JAVA源码文件或布局文件，开发人员可以对JAVA源码文件或布局文件进行编辑，编辑应用中每个显示界面的布局。

需要说明的是，在对显示界面的布局进行编辑之前，需要添加开发应用时依赖的库。具体的，可以在应用依赖包1002中添加依赖的库。例如，以开发Android系统上的应用为例，需要依赖扩展库(External Libs)以及Android API库。

在添加依赖的库后，开发人员可以通过在JAVA源码1004中调用相应的API接口的方式设置应用中每个显示界面包含的View以及ViewGroup的层级结构、属性值、各个View的显示资源等信息。或者，开发人员也可以通过在布局文件1003中设置应用中每个显示界面包含的View以及ViewGroup的层级结构、属性值、各个View的显示资源等信息。

需要说明的是，本申请实施例提供的View和ViewGroup具有自适应布局的能力，除了要依赖Android系统基本的库(External Libs、Android API库)外，那么还需要依赖本申请扩展的库，例如自适应布局属性包。该自适应布局属性包包括View和ViewGroup各个自适应布局能力的声明，各个自适应布局能力调用的接口，各个自适应布局能力测量布局时对应的处理流程等。

其中，在开发人员设计布局文件时，需要使用到各个自适应布局能力的声明，以便对显示界面中的View或ViewGroup设置相应的自适应布局能力。而各个自适应布局能力调用的接口，各个自适应布局能力测量布局时对应的处理流程等将携带在安装包内，以便传递给电子设备。后续电子设备运行该应用时，可以根据各个自适应布局能力调用的接口获取自适应布局能力的View或ViewGroup的属性值，以及调用各个自适应布局能力测量布局时对应的处理流程完成测量和布局，最后绘制显示界面。其中，各个自适应布局能力调用的接口，各个自适应布局能力测量布局时对应的处理流程将在后面介绍电子设备的处理流程时进行详细说明。

例如，如图10中(1)所示，开发人员可以通过控件1005添加自适应布局属性包。如图10中(2)所示的开发界面1007，其中应用依赖包中新增自适应布局属性包1006，该自适应布局属性包1006可对应于上述实施例中属性窗口306中的各个功能项。

从布局文件1003中可以看出：“android：”引导的为Android系统原生的View或ViewGroup的属性值。“app：”引导的为本申请扩展的View或ViewGroup属性值，即具有自适应布局能力的View或ViewGroup的属性值。或者，从JAVA源码1004中可以看出开发人员调用的自适应布局能力对应的API接口，例如setAttr1()，getAttr1()，setAttr2()，getAttr2()。

而后，开发人员使用IDE工具将所开发应用的源代码、资源(包括布局文件)、依赖的库等打包成安装包(例如APK文件)。即，开发人员完成该应用的开发工作。而后，应用的安装包上架到应用市场。用户可以使用不同的电子设备上下载并安装该应用。需要说明的是，具有不同屏幕参数的电子设备使用相同的布局文件绘制该应用的显示界面。

当电子设备运行该应用时，电子设备获取自身的屏幕参数，并根据自身的屏幕参数确定该应用的显示尺寸以及显示位置。然后，电子设备再结合布局文件中各个View和ViewGroup的属性值(包括Android原生属性值和扩展属性值)确定显示界面中各个View和ViewGroup的尺寸以及位置，并绘制相应的显示界面。

其中，屏幕参数包括屏幕规格参数以及屏幕状态参数等。上述屏幕规格包括屏幕的尺寸，即屏幕的宽高。屏幕规格决定着电子设备实际用于显示应用内容的区域尺寸。在一些示例中，显示屏的形态也影响着电子设备实际用于显示应用内容的区域尺寸。例如，显示屏为刘海屏时，刘海屏的区域不用于显示应用内容。又例如，显示屏为曲面屏时，边缘处弯曲的区域不用于显示应用内容。

除了电子设备配置的屏幕的规格以及形态等决定着电子设备实际用于显示应用内容的区域尺寸，电子设备的屏幕状态也影响着电子设备实际用于显示应用内容的区域。其中，上述屏幕状态包括电子设备的横竖屏状态、折叠状态，分屏状态等。半折叠状态是指折叠屏支持多次折叠时，有部分屏幕处于折叠状态，有部分屏幕处于展开状态。电子设备的横竖屏状态影响电子设备绘制应用的显示界面的宽高。电子设备的分屏状态影响着电子设备绘制应用的显示界面的尺寸以及显示界面在屏幕中的位置。

具体的，响应于检测到开启某个应用的操作后，电子设备创建该应用对应的Activity。然后，利用Activity中的attach()方法生成PhoneWindow实例。在PhoneWindow实例中创建DecroView，并获取电子设备的屏幕参数确定PhoneWindow以及DecroView的尺寸以及位置(四个顶点的位置，即上下左右边框的位置)。而后，调用Window的setContentView()方法加载相应的布局文件，根据布局文件中视图树的层次结构，从根部逐级确定DecroView中每个ViewGroup以及每个View的尺寸以及位置，绘制所有的View，即得到该应用的显示界面。

下文以缩放能力为例，详细说明开发人员如何设计包含自适应布局能力的View或ViewGroup的布局文件，以及电子设备运行应用时根据布局文件实现自适应布局的方法。

首先，开发人员在开发应用时，添加自适应布局属性包的依赖后，可以在显示界面中设置具有缩放能力的View或ViewGroup。具体的，开发人员在编辑显示界面的布局文件时，可以通过在布局文件(例如xml文件)中设置View或ViewGroup的缩放能力相关的属性值，或者在JAVA源码文件中通过添加调用接口的方式来设置View或ViewGroup的缩放能力相关的属性值。

如表一所示，为本申请实施例针对缩放能力扩展的属性(即与缩放能力相关的布局参数)示例。

表一

需要说明的是，开发人员可以设置布局容器的属性时，通过缩放能力使能开启该布局容器的缩放能力。然后，针对布局容器中包含的子控件(即布局容器中存放的View或ViewGroup)设置水平方向和垂直方向上的可用空间占比。

后续，电子设备运行该应用，并绘制该子控件时，会根据布局容器的尺寸对子控件进行缩放，使得缩放后的子控件尽量满足开发人员设置的水平方向和垂直方向上的可用空间占比。在一些示例中，缩放后的子控件能够同时满足水平方向和垂直方向上的可用空间占比。在另一些示例中，缩放后的子控件不能同时满足水平方向和垂直方向上的可用空间占比。那么，在缩放的过程中，当子控件达到某一方向的可用空间占比后，可以停止缩放该子控件。

例如，如图11中(1)所示，子控件与布局容器的水平方向的占比(即水平可用空间占比)，是指子控件的宽度(X)占据布局容器(Y)总宽度的比值，即X/Y。子控件与布局容器的垂直方向的占比(即垂直可用空间占比)，是指子控件的高度(R)占据布局容器总高度(T)的比值，即R/T。

开发人员在设置布局容器的属性时，可设置缩放能力使能的属性值为true，即缩放这一功能项被选中。然后，针对子控件设置水平可用空间占比为A(即X/Y＝A)，以及子控件设置垂直可用空间占比为B(即R/T＝B)。那么，当布局容器的尺寸发生变化时，将对布局容器中的子控件进行缩放(保持子控件宽高比不变)，直到缩放后的子控件的宽度占据变化后布局容器宽度比值为A，且缩放后的子控件的高度占据变化后布局容器高度比值为B。例如，缩放后子控件的宽度为X'，高度为R'；变化后布局容器的宽度为Y'，高度为T'，那么，X'/Y'＝A，且R'/T'＝B。

在一些示例中，缩放后的子控件无法同时满足X'/Y'＝A，且R'/T'＝B。即，缩放后的子控件满足X'/Y'＝A，R'/T'<B。或者，缩放后的子控件满足X'/Y'<A，R'/T'＝B。

举个例子，开发人员可以为子控件设置的缩放能力为水平可用空间占比(50％)以及垂直可用控件占比(50％)。如图11中(1)所示，若布局容器在电子设备1上的尺寸为1080*540(宽*高，单位为pixel)，子控件的尺寸为540*270。此时，子控件的水平可用空间占比和垂直可用空间占比均刚好达到50％。

如图11中(2)所示，若布局容器在电子设备2上的尺寸为2160*1080(单位为pixel)。此时，电子设备2上的布局容器的宽高均与电子设备1上的布局容器成正比增加。那么，根据水平可用空间占比(50％)以及垂直可用控件占比(50％)对子控件进行缩放，计算子控件的尺寸为1080*540(单位为pixel)。

如图11中(3)所示，若布局容器在电子设备3上的尺寸为2160*540(单位为pixel)。此时，电子设备3上的布局容器的高度与电子设备1上的布局容器的高度相同，但宽度增加了。由于子控件的垂直可用空间占比已达到50％，即使水平可用空间占比未达到50％，也不再对子控件进行缩放，即子控件的尺寸仍然为540*270(单位为pixel)。

如图11中(4)所示，若布局容器在电子设备4上的尺寸为1080*1080(单位为pixel)。此时，电子设备4上的布局容器的高度与电子设备1上的布局容器的宽度相同，但高度增加了。由于子控件的水平可用空间占比已达到50％，即使垂直可用空间占比未达到50％，也不再对子控件进行缩放，即子控件的尺寸仍然为540*270(单位为pixel)。

由此可见，本申请实施例提供的缩放能力，使得具有缩放能力的控件可以根据布局容器的变化自适应进行缩放，能够保证控件原本的形状不变(即宽高比不变)。例如，可以针对图片的控件，或者包含图片的控件设置缩放能力。如果是单方向的拉伸图片，可能造成图片变形和失真，影响图片的显示效果。又例如，可以针对具有圆角的按钮控件设置缩放能力，避免单方向拉伸按钮控件时，圆角的信息丢失。

另外，相较于简单地把图片的宽和高按照相同的缩放比例进行缩放，并使得缩放后的控件的宽度与布局容器的宽度相同，或者缩放后的控件的高度与布局容器的高度相同。本申请实施例提供的缩放能力，是按照水平可用空间的占比以及垂直可用空间的占比来缩放的子控件。也就是说，在缩放子控件时，还可以保证子控件宽高与布局容器的宽高具有一定比例，保证布局的设计感和美感。

在又一些实施例中，除了设置子控件的水平可用空间占比和垂直可用空间占比外，还可以针对子控件的尺寸设置最值，例如缩放最大宽度、缩放最小宽度、缩放最大高度和缩放最小高度等。

其中，缩放最大宽度，是指缩放后的子控件宽度最大能达到的数值。缩放最小宽度，是指缩放后的子控件宽度最小能达到的数值。缩放最大高度，是指缩放后的子控件高度最大能达到的数值。缩放最小高度，是指缩放后的子控件高度最小能达到的数值。需要说明是，当子控件缩放过程中，水平可用空间占比、垂直可用空间占比与尺寸的最值发生冲突时，可以根据尺寸的最值确定子控件实际缩放的比例。在又一些示例中，若未设置子控件尺寸最值时，也可以采用默认值。例如，默认缩放最大宽度为无穷大。默认缩放最小宽度为0dp。默认缩放最大高度为无穷大。默认缩放最小高度为0dp。当然，默认值也可以是其他值，本申请实施例不做限定。

需要说明的是，上述子控件为View时，那么电子设备在运行应用时，根据布局容器的实际尺寸，按照水平可用空间占比、垂直可用空间占比、尺寸的最值，对View进行缩放，并显示。上述控件为ViewGroup时，那么电子设备在运行应用时，采用相同的方法，对ViewGroup进行缩放。需要注意的是，针对ViewGroup中嵌套的View或ViewGroup则采用该ViewGroup对应的属性进行布局。例如，若该ViewGroup也设置开启缩放能力使能，则针对ViewGroup中嵌套的View或ViewGroup采用缩放能力对应的方法进行绘制。又例如，若该ViewGroup未设置开启缩放能力使能，则针对ViewGroup中嵌套的View或ViewGroup不采用缩放能力对应的方法进行绘制。

以下，给出一个布局文件(xml文件)的示例，该布局文件中设置有开启缩放能力使能的布局容器，且该布局容器中包括一个子控件(例如图片控件)。

上述实施例，是以布局容器中包括一个控件(View或ViewGroup)为例进行说明的，在其他一些实施例中，布局容器中可以包括多个控件(View或ViewGroup)。

例如，如图12中(1)所示，布局容器中包括子控件1和子控件2。布局容器在电子设备1上的尺寸为Y*T。为了便于说明，该示例中仅以水平可用空间占比为例进行说明，不考虑垂直可用空间占比对子控件1和子控件2缩放的限制，也不再说明缩放过程中子控件1和子控件2的高度变化。

如图12中(2)所示，若开发人员设置了子控件1的水平可用空间占比(X1/Y＝A1)和垂直可用控件占比，设置了子控件2的水平可用空间占比和垂直可用空间占比(X2/Y＝A2)。当布局容器的尺寸发生变化时，子控件1和子控件2均采用上文描述的方法，分别按照各自对应的水平可用空间占比和垂直可用控件占比，进行缩放。缩放后，X1'/Y'＝A1且X2'/Y'＝A2。

如图12中(3)所示，若开发人员设置了子控件2的水平可用空间占比和垂直可用空间占比(X2/Y＝A2)，而未设置子控件1的水平可用空间占比和垂直可用控件占比。当布局容器的尺寸发生变化时，子控件2采用上文描述的方法，分别按照其对应的水平可用空间占比和垂直可用控件占比，进行缩放。缩放后，X2'/Y'＝A2。子控件1则不进行缩放。当然，也可以设置子控件1具有其他的自适应布局能力，或者具有Android原生的属性值。换言之，本实施例设置的缩放能力不作用于子控件1，而子控件1根据自身的属性进行绘制。

在另一些实施例中，在设置布局容器的属性时，设置缩放能力使能的属性值为true。也可以不针对布局容器中包含的子控件设置水平方向和垂直方向上的可用空间占比。那么，子控件可以默认水平可用空间占比和垂直可用空间占比均为100％，即布局容器内子控件根据布局容器的变化等比例放大或缩小。在一些示例中，缩放后的子控件能够同时满足水平方向和垂直方向上的可用空间占比均为100％。在一些示例中，缩放后的子控件不能同时满足水平方向和垂直方向上的可用空间占比均为100％。那么，在缩放的过程中，当子控件达到某一方向的可用空间占比后，可以停止缩放该子控件。

例如，如图13中(1)所示，布局容器中包括一个子控件。可以开启该布局容器的缩放能力使能，但未针对子控件设置水平可用空间占比和垂直可用空间占比。此时，电子设备1上布局容器中子控件的水平可用空间占比和垂直可用空间占比刚好均达到100％。

如图13中(2)所示，当电子设备2上布局容器的宽高与电子设备1上布局容器的宽高成正比，那么，电子设备2上绘制子控件时，对子控件进行缩放。缩放后的子控件的水平可用空间占比和垂直可用空间占比均达到100％。

如图13中(3)所示，当电子设备3上布局容器的宽高与电子设备1上布局容器的宽度不变，高度增加了。但由于子控件的水平可用空间占比已经达到100％，即便高度仍有空间可以缩放，也不再对子控件进行缩放。

如图13中(4)所示，当电子设备4上布局容器的宽高与电子设备1上布局容器的高度不变，宽度增加了。但由于子控件的垂直可用空间占比已经达到100％，即便宽度仍有空间可以缩放，也不再对子控件进行缩放。

当布局容器中包括多个子控件时，这里的水平可用空间占比，是指布局容器中所有子控件的宽度以及水平方向的间距的总和，与布局容器的总宽度的比值。这里的垂直可用空间占比，是指布局容器中所有子控件的高度以及垂直方向的间距的总和，与布局容器的总高度的比值。

在该实施例的又一些示例中，还可以设置布局容器的尺寸的最值。也就是说，当布局容器中所有子控件在整体缩放过程中，当水平可用空间占比、垂直可用空间占比与布局容器的尺寸的最值发生冲突时，可以根据布局容器的尺寸的最值确定所有子控件实际缩放的比例。

以下，给出一个布局文件(xml文件)的示例，该布局文件中设置有开启缩放能力使能的布局容器，且该布局容器中包括两个子控件(例如，两个图片控件)。

上述实施例，是开发人员通过在布局文件(例如xml文件)中设置View或ViewGroup的缩放能力相关的属性值，设计显示界面自适应布局的方案。也可以通过在JAVA源码文件中通过添加调用接口的方式来设置View或ViewGroup的缩放能力相关的属性值。

如表二所示，为设置View或ViewGroup的缩放能力相关的属性值相对应的接口的示例。

表二

以上详细介绍了缩放能力的含义。开发人员可以根据应用中每个显示界面的布局设计，结合缩放能力、其他自适应布局能力以及基本的布局能力(例如Android原生的属性)配置好布局文件，将布局文件与应用的其他的源代码以及资源等打包成安装包(例如APK文件)，并上架到应用市场。电子设备从应用市场下载该安装包，并安装该应用。

以下，将详细说明电子设备运行该应用时，如何根据上述布局文件实现自适应布局的方案。

示例性的，图14是本发明实施例的电子设备的软件结构框图。

分层架构将软件分成若干个层，每一层都有清晰的角色和分工。层与层之间通过软件接口通信。在一些实施例中，将Android系统分为四层，从上至下分别为应用程序层，应用程序框架层，安卓运行时(Android runtime)和系统库，以及内核层。

应用程序层可以包括一系列应用程序包。如图14所示，应用程序包可以包括图库应用、时钟应用等。需要注意的是，这里图库应用或时钟应用是采用上述应用安装包安装的应用，即图库应用、时钟应用等对应的布局文件中包含设置有上述自适应布局能力的View或ViewGroup。

应用程序框架层为应用程序层的应用程序提供应用编程接口(applicationprogramming interface，API)和编程框架。应用程序框架层包括一些预先定义的函数。如图14所示，应用程序框架层可以包括活动管理系统(Activity Manager System，AMS)、资源管理器(Resource Manager)、窗口管理系统(Windows Manager System，WMS)(图中未示出)以及视图系统(View System)。

其中，AMS，用于控制应用生命周期和活动栈的所有方面。资源管理器，用于提供对非代码嵌入资源的访问，如字符串，颜色设置和用户界面布局。WMS，用于获取显示屏大小，判断是否有状态栏，锁定屏幕，截取屏幕等。视图系统，用于提供视图集合，用于创建应用程序用户界面。

具体的，仍如图14所示，在应用(例如时钟应用)启动后，由AMS响应点击(Touch)事件，启动一个主Activity。在主Activity中通过setContentView中的inflate流程，从资源管理器中读取显示界面包含的View或ViewGroup的属性值。一些示例中，在资源管理器中先读取布局文件，再通过布局文件调用相应的接口，写入显示界面包含的各个View和ViewGroup的属性值。另一些示例中，在资源管理器中也可以直接调用接口，写入显示界面包含的各个View和ViewGroup的属性值。需要注意的是，这里View和ViewGroup的属性值包括Android原生的属性值以及本申请扩展的自适应布局能力相关的属性值。然后进入视图系统的窗口绘制流程，经过测量(Measure)、布局(Layout)和绘制(Draw)三大流程完成显示界面的绘制。其中，测量流程包括Android元素的测量流程和本申请扩展的与自适应布局能力相关的测量流程。

Android Runtime包括核心库和虚拟机。Android runtime负责安卓系统的调度和管理。

核心库包含两部分：一部分是java语言需要调用的功能函数，另一部分是安卓的核心库。

应用程序层和应用程序框架层运行在虚拟机中。虚拟机将应用程序层和应用程序框架层的java文件执行为二进制文件。虚拟机用于执行对象生命周期的管理，堆栈管理，线程管理，安全和异常的管理，以及垃圾回收等功能。

系统库可以包括多个功能模块。例如：表面管理器(surface manager)，媒体库(Media Libraries)，三维图形处理库(例如：OpenGL ES)，2D图形引擎(例如：SGL)等。

其中，表面管理器用于对显示子系统进行管理，并且为多个应用程序提供了2D和3D图层的融合。媒体库支持多种常用的音频，视频格式回放和录制，以及静态图像文件等。媒体库可以支持多种音视频编码格式，例如:MPEG4，H.264，MP3，AAC，AMR，JPG，PNG等。三维图形处理库用于实现三维图形绘图，图像渲染，合成，和图层处理等。2D图形引擎是2D绘图的绘图引擎。

内核层是硬件和软件之间的层。内核层至少包含显示驱动等。

电子设备在安装完上述应用后，电子设备可在存储器中存储该应用各个显示界面的布局文件。当电子设备检测到运行该应用的操作时，电子设备可启动该应用，并根据各个显示界面的布局文件开始绘制该应用的显示界面。

仍以以搭载Android系统的电子设备，运行时钟应用为例进行说明。

请参见图15，显示界面1501为电子设备(例如具体是手机)显示的主屏幕界面。响应于检测到用户在显示界面1501上操作时钟应用的图标1502，手机启动时钟应用，并绘制时钟应用的首页1503。其中，时钟应用的首页可以理解为时钟应用运行后显示的第一个界面。

还需要说明的是，这里是以开启应用显示首页为例进行说明的。在开启该应用后，响应于用户的操作，手机显示其他界面(非首页)时也适用于本申请提供的方法。

具体的，在启动时钟应用后，手机会启动一个主Activity，并在主Activity中通过setContentView中的inflate流程，读取该时钟应用的布局文件。该布局文件包括时钟应用各个显示界面(例如时钟应用的首页)包含的View和ViewGroup，这些View和ViewGroup的层次结构，以及这些View和ViewGroup具有的属性。手机调用相应的接口，写入这些View和ViewGroup的各个属性值。需要注意的是，这里这些View和ViewGroup具有的属性包括Android原生属性以及本申请实施例扩展的自适应布局能力相关属性。然后手机进入窗口绘制流程，经过测量(Measure)、布局(Layout)和绘制(Draw)三大流程完成显示界面的绘制。

其中，上述测量是用来计算View的实际大小。从performMeasure方法开始，其中包括参数MeasureSpec。MeasureSpec表示的是一个32位的整数值，它的高2位表示测量模式(SpecMode)，低30位表示某种测量模式下的规格大小(SpecSize)。也就是说，MeasureSpec用来说明应该如何测量这个View。上述布局是用来确定View在父布局容器中的位置。他是父布局容器获取子View的位置参数后，调用子View的layout方法并将位置参数传入实现的。上述绘制是用来绘制控件，从performDraw方法开始。其中，布局和绘制的过程可参考现有技术的相关内容，这里不再赘述。

需要说明的是，对DecorView而言，它的MeasureSpec由窗口尺寸和其自身的布局参数(LayoutParams)共同决定；对于普通的View，它的MeasureSpec由其所在的布局容器(即父布局容器)的MeasureSpec和其本身的LayoutParams共同决定。

在本申请实施例中，窗口尺寸是由手机的屏幕参数决定的。屏幕参数包括屏幕的尺寸、分辨率，以及屏幕当前的状态。屏幕当前状态包括是屏幕处于横屏状态，还是竖屏状态。若屏幕为可折叠屏，屏幕处于折叠状态、半折叠状态、展开状态等。若屏幕支持分屏，当前应用显示的窗口的尺寸等。

上述View以及ViewGroup本身的LayoutParams包括Android系统原生的属性，以及本申请实施例扩展的自适应布局能力相关的属性(例如缩放能力相关的属性)等。因此，在测量过程中，手机需要根据布局文件中View以及ViewGroup的Android系统原生的属性进行测量，还需要根据布局文件中View以及ViewGroup的自适应布局能力相关的属性进行测量。其中，手机根据布局文件中View以及ViewGroup的Android系统原生的属性进行测量的过程可参考现有技术相关内容，这里不再赘述。这里对手机根据布局文件中View以及ViewGroup的自适应布局能力相关的属性进行测量的过程进行介绍。

需要注意的是，这里是以缩放能力为例进行说明的，在缩放能力中，测量过程会涉及到根据扩展的缩放能力相关的属性进行测量(图16-图18中的测量流程)，而布局和绘制过程均采用现有技术即可。但在其他能力(例如折行能力)中，在布局过程还会涉及到根据扩展的能力相关的属性进行布局，绘制过程采用现有技术即可。

具体的，手机针对布局文件中的每一个布局容器执行如图16所示测量流程，该方法具体包括：

S1601、根据布局容器的布局参数，确定该布局容器的缩放能力使能是否打开。若缩放能力使能已打开，继续执行步骤S1602，否则针对配置有缩放能力的布局容器的测量流程结束。

其中，该布局容器也可以为ContentView中任意设置了自适应布局能力的ViewGroup。例如，该布局控件可以为ViewGroup1、ViewGroup2、ViewGroup3等。

S1602、遍历该布局容器中所有的子控件，获取各个子控件的布局参数。

S1603、若该布局容器中任一个子控件配置了水平可用空间占比和垂直可用空间占比，则执行单个子控件的缩放流程，即执行步骤S1604。若该布局容器中所有子控件均未配置水平可用空间占比和垂直可用空间占比，则执行所有子控件整体缩放流程，即执行步骤S1605。

其中，该布局容器中的所有子控件包括：该布局在该布局容器中的View或ViewGroup。需要注意的是，这里布局容器中所有的子控件不包含布局容器中ViewGroup中嵌套的子控件(View或ViewGroup)。例如，若布局控件为ViewGroup1，则ViewGroup1包含的子控件有ViewGroup2、ViewGroup3和View7，不包含View3、View4、View5和View6。

S1604、执行单个子控件的缩放流程。

也就是说，针对各个设置有水平可用空间占比和垂直可用空间占比的子控件，按照设置的水平可用空间占比和垂直可用空间占比进行缩放，对于未设置有水平可用空间占比和垂直可用空间占比的子控件不执行缩放。

而后，针对配置有缩放能力的布局容器的测量流程结束。

S1605、执行所有子控件整体缩放流程。

也就是说，针对布局容器中所有的子控件，按照水平可用空间占比为100％，以及垂直可用空间占比为100％进行缩放。

如图17所示，上述步骤S1604包括步骤S1700-步骤S1709，具体包括：

S1700、遍历布局容器中的子控件。

S1701、布局容器中的子控件是否配置了水平可用空间占比和垂直可用空间占比。若配置了，则执行步骤S1702，否则，本流程结束。

在一些示例中，若布局容器中的子控件配置了水平可用空间占比和垂直可用空间占比，则可以为该子控件设置第一标志位，用于标志该子控件需执行单个子控件的缩放流程。

S1702、子控件是否保存有缩放规格信息。若保存有，则执行步骤S1706，若未保存有，则执行步骤S1703。

其中，子控件的缩放规格信息包括子控件的宽高、内边距和外边距等信息。其中，子控件的宽高可以为开发人员设置的子控件的原始宽高。内边距，是指子控件的内容(例如文字或图片)与子控件的各个边框的距离。外边距，是指子控件的边框与布局容器各个边框之间的距离。

需要说明的是，此时子控件的的缩放规格信可以为根据布局文件中配置的Android原生的属性值进行初步测量后，得到该子控件的初始缩放规格。

S1703、确定子控件的布局参数是否为指定值。若为指定值，则确定子控件的布局参数为子控件的缩放规格信息，执行步骤S1705。若不为指定值，执行步骤S1704。

如果布局文件中设置子控件的布局参数(例如子控件的宽和高)为wrap_content或者match_parent，则确定子控件的布局参数不为指定值。如果布局文件中设置子控件的布局参数(例如子控件的宽和高)为具体的数值，则确定子控件的布局参数为指定值。

S1704、按照未指定(UNSPECIFIC)模式触发子控件的测量。

如果布局文件中设置子控件的布局参数(例如子控件的宽和高)不为指定值，则触发未指定模式测量。其中，未指定模式测量，是指父布局容器不对子控件的尺寸做限制，这样可以获得子控件的原始尺寸。也就是说，后续将以子控件的原始尺寸进行缩放，进而保证子控件中的内容不变形不失真。

S1705、保存子控件的缩放规格信息。

S1706、根据设置的子控件的水平可用空间占比和垂直可用空间占比计算布局容器的可用空间大小。

其中，根据布局容器的父布局容器以及布局容器的布局参数确定布局容器的大小，再根据设置的子控件的水平可用空间占比和垂直可用空间占比计算布局容器的可用空间大小。

S1707、根据布局容器的可用空间大小，以及子控件的缩放规格信息计算子控件的缩放比例。

此时需要解决水平可用空间占比和垂直可用空间占比冲突的问题，具体的计算方法可参考前文的描述。

S1708、根据设置的子控件的缩放最值，调整子控件的缩放比例。

其中，子控件的缩放最值包括缩放最大宽度、缩放最小宽度、缩放最大高度和缩放最小高度等。

S1709、根据调整后的缩放比例，重新触发子控件的测量。

即，根据调整后的缩放比例，重新确定子控件的宽高、内边距以及外边距等规格信息。

如图18所示，上述步骤S1605包括步骤S1800-步骤S1807，具体包括：

S1800、检测当前需要整体缩放的子控件的个数。

S1801、确定需要整体缩放的子控件的个数与已保存的子控件的个数是否不一致。若不一致，则可以设置第二标志位，用于标记整体缩放的子控件的个数与已保存的子控件的个数不一致。

S1802、遍历已保存的子控件的缩放规格信息。

S1803、根据子控件的缩放规格信息，计算需要整体缩放的子控件的总宽度和总高度。

其中，子控件的缩放规格信息包括子控件的宽高、内边距和外边距等信息。需要整体缩放的子控件的总宽度，是指需要整体缩放的子控件的宽度之和，加上在水平方向上的外边距之和。需要整体缩放的子控件的总高度，是指需要整体缩放的子控件的高度之和，加上在垂直方向上的外边距之和。

S1804、计算布局容器的可用空间大小。

其中，根据布局容器的父布局容器以及布局容器的布局参数确定布局容器的大小，再根据设置的子控件的水平可用空间占比(默认为100％)和垂直可用空间占比(默认为100％)计算布局容器的可用空间大小。

S1805、根据布局容器的可用空间大小，以及子控件的总宽度和总高度，计算子控件整体缩放比例。

此时需要解决水平可用空间占比和垂直可用空间占比冲突的问题，具体的计算方法可参考前文的描述。

S1806、根据设置的布局容器的最值，调整子控件整体缩放比例。

其中，布局容器的最值包括布局容器的最大宽度、最小宽度、最大高度和最小高度等。

S1807、根据调整后的子控件整体缩放比例，重新触发子控件的测量。

即，根据调整后的子控件整体缩放比例，重新确定各个子控件的宽高、内边距以及外边距等规格信息。

综上，应用的开发人员在开发应用阶段，在布局文件中，设置显示界面中View和ViewGroup设置有自适应布局能力(例如，缩放能力)的属性。当具有不同屏幕参数的电子设备在安装该应用后，可以根据布局文件中View和ViewGroup的自适应布局能力(例如，缩放能力)的属性，结合自身的屏幕参数自适应缩放View和ViewGroup，实现显示界面的自适应布局。这样，开发人员仅需要设计一套布局文件，即可满足具有不同屏幕参数的电子设备的显示需求，有利于降低开发人员的开发成本以及维护成本。

另外，相较于应用安装包中需要携带多套布局文件的方案，本方案在应用安装包中携带一套布局文件，有利于提升电子设备下载应用安装包的流量成本和时间成本。并且，当电子设备安装该应用后，不需要保存其他多余的布局文件，提升了电子设备存储空间的利用率。

为了更好理解本申请实施例中缩放能力实现的自适应布局的效果，这里以具有不同屏幕参数的电子设备运行时钟应用为例进行说明。其中，时钟应用的布局文件中，时钟控件所在的布局容器设置为开启缩放能力，时钟控件的宽高比为1：1，且时钟控件的水平可用空间占比为数值P(例如80％)，垂直可用空间占比为数值Q(例如50％)。

请参见图19，手机1的屏幕尺寸为720*1280(宽*高，单位为pixel)。那么，根据时钟控件的水平可用空间占比为数值P(例如80％)，垂直可用空间占比为数值Q(例如50％)，以及时钟的宽高比，计算得到时钟的尺寸为576*576(单位为pixel)，如图19中手机1显示的界面1901。

手机2的屏幕尺寸为720*860(单位为pixel)。那么，那么，根据时钟控件的水平可用空间占比为数值P(例如80％)，垂直可用空间占比为数值Q(例如50％)，以及时钟的宽高比，计算得到时钟的尺寸为430*430(单位为pixel)，如图19中手机2显示的界面1902。

由此可见，对于相同的布局文件，由具有不同屏幕参数的手机进行绘制后，得到不同的显示界面，且保存了控件原本的形状(宽高比)。

前文已说明，本申请实施例扩展的多个自适应布局能力之间可以相互组合使用。这里给出缩放能力与其他自适应布局能力组合的几个示例。

示例一、缩放+拉伸+隐藏

以音乐应用的播放界面为例进行说明。

如图20中(1)所示，为手机运行音乐应用时，显示的播放界面。音乐应用包括图片控件(显示专辑封面)、文本控件(显示歌曲信息)以及按钮控件(上一首、播放、下一首、播放列表)。其中，图片控件设置有缩放能力(均设置了水平可用空间占比和垂直可用空间占比)，文本控件设置有拉伸能力，按钮控件设置有隐藏能力。

如图20中(2)所示，为平板运行音乐应用时，显示的播放界面。可见，平板的屏幕比手机的屏幕宽，但高度减小了，故根据图片控件对应的缩放能力，需对图片控件进行缩小。由于文本控件具有拉伸能力，故在平板的屏幕的宽度增加的情况下，文本控件的宽度也增加了。在平板的屏幕的宽度增加的情况下，按钮控件显示的宽度增加，可以显示更多的按钮控件，即显示一些被隐藏的按钮控件(例如收藏控件)。换言之，当屏幕的宽/高发生变化时，缩放能力可以实现图片控件的缩放。与此同时，拉伸能力实现文本控件在屏幕的宽/高发生变化时自适应拉伸或收缩。隐藏能力实现按钮控件在屏幕宽/高发生变化时，自适应增加或减少显示的数量。

示例二、缩放+占比

以图库应用的浏览界面为例进行说明。

如图21中(1)所示，为手机运行图库应用时，显示的浏览界面。图库应用包括一个布局容器，该布局容器包括多个图片控件(显示照片或视频的缩略图)。该布局容器设置有缩放能力(其中每一个图片空间未设置水平可用空间占比和垂直可用空间占比)。且该布局容器设置还设置有占比能力(例如设置水平方向的平均分配占比，例如33.33％)。

如图21中(2)所示，为平板运行图库应用时，显示的浏览界面。可见，每个图片控件将平板水平方向的可用空间均分(每个图片控件宽度为平板总宽度的1/3)。每个图片控件的缩放能力使得每个图片控件进行缩放，占满水平方向的可用空间。换言之，占比能力，控制着每个图片控件水平方向的大小。缩放能力则保证每个图片控件保证宽高比进行缩放，避免图片变形失真。

示例三、缩放+均分

仍然以图库应用的浏览界面为例进行说明。

如图22中(1)所示，为手机运行图库应用时，显示的浏览界面。图库应用包括一个布局容器，该布局容器包括多个图片控件(显示照片或视频的缩略图)。该布局容器设置有缩放能力，且每一个图片空间还设置了水平可用空间占比和垂直可用空间占比。该布局容器还设置有均分能力(例如设置水平方向的最小的边距值)。

如图22中(2)所示，为平板运行图库应用时，显示的浏览界面。每一个图片控件根据水平可用空间占比和垂直可用空间占比进行缩放，且相邻的两个图片控件在水平方向保持相同的间距。

示例四、缩放+折行+占比

仍然以图库应用的浏览界面为例进行说明。

如图23中(1)所示，为平板运行图库应用时，显示的浏览界面。图库应用包括一个布局容器，该布局容器包括多个图片控件(显示照片或视频的缩略图)。该布局容器设置有缩放能力(其中图片控件未设置水平可用空间占比和垂直可用空间占比)。且该布局容器设置有水平方向的占比能力以及水平方向的折行能力。

如图23中(2)所示，为手机运行图库应用时，显示的浏览界面。首先，手机根据该布局容器内各个图片控件的初始规格信息，确定每一行显示的图片控件的数量。例如，确定在手机上每一行只能显示三个图片控件。而后，按照水平方向的占比能力确定第一行三个图片控件的宽度，然后，根据图片控件的缩放能力，保持图片控件的形状进行缩放。其他行的图片控件的水平方向的占比参考第一行的图片控件的宽度。对比图23中(2)的浏览界面与图23中(1)的浏览界面，可发现，虽然手机的宽度相对平板减小了，但每一行的图片控件却放大了。

综上，不同屏幕参数的电子设备根据同一个布局文件绘制了不同的显示界面。也就是说，不同屏幕参数的电子设备可以根据布局文件自适应调整显示界面的布局，满足不同的显示需求。

上述实施例中是以缩放能力为例，阐述开发人员如何设计包含自适应布局能力的View或ViewGroup的布局文件，以及电子设备运行应用时根据布局文件实现自适应布局的具体过程。

以下将以折行能力为例，详细说明开发人员如何设计包含自适应布局能力的View或ViewGroup的布局文件，以及电子设备运行应用时根据布局文件实现自适应布局的方法。

首先，开发人员在开发应用时，添加自适应布局属性包的依赖后，可以在显示界面中设置具有折行能力(即折行这一功能项)的ViewGroup。具体的，开发人员在编辑显示界面的布局文件时，可以通过在布局文件(例如xml文件)中设置ViewGroup的折行能力相关的属性值，或者在JAVA源码文件中通过添加调用接口的方式来设置ViewGroup的折行能力相关的属性值。

如表三所示，为与折行能力相关的属性示例。

表三

需要说明的是，开发人员可以设置布局容器的属性时，通过折行能力使能开启该布局容器的折行能力，以及设置折行方向和折行对齐方式等。还可以设置布局容器中包含的子控件(即布局容器中存放的View或ViewGroup)设置子控件的折行参考值。

后续，电子设备运行该应用，执行如图24所示的步骤，具体包括：

S2401、获取布局容器的布局参数，以及布局容器中子控件的布局参数。

示例性的，通过读取布局文件中布局容器的布局参数，该布局容器中包含的子控件，以及各个子控件的布局参数。

S2402、根据布局容器的宽度(或高度)，以及子控件的折行参考值划分行(或列)。

若布局容器为水平方向的折行，即由一行排列转换为多行排列，则根据布局容器的宽度，以及子控件的折行参考值(子控件期望显示的宽度)确定是否是否分行显示，以及如何划分每一行(例如每一行包含哪几个子控件)。

若布局容器为垂直方向的折行，即由一列排列转换为多列排列，则根据布局容器的高度，以及子控件的折行参考值(子控件期望显示的高度)确定是否是否分列显示，以及如何划分每一列(例如每一列包含哪几个子控件)。

需要说明的是，本文是以水平方向的折行为例，对布局容器的折行能力的实现进行详细说明。对于垂直方向的折行可以参考水平方向的折行的具体实现方式，本文将不再展开说明。

S2403、基于划分的行(或列)确定布局容器中各个子控件的位置。

可选的，若布局容器的布局参数中还设置了折行方向、对齐方式等，还要基于这些布局容器的布局参数一同确定布局容器中各个子控件的位置。

而后，电子设备根据确定好的该布局容器中的各个子控件的尺寸和位置执行绘制，并显示最终绘制好的显示界面。

以下，结合附图详细说明折行能力相关各个属性的含义，以及布局容器和子控件的显示效果。

一些实施例中，开发人员可以设置布局容器的折行能力使能打开，并为布局容器中各个子控件设置折行参考值。

例如，设置某个布局容器中包括子控件1和子控件2，且子控件1和子控件2为水平排列。设置子控件1的折行参考宽度为100像素，子控件2的折行参考宽度为80像素。

如图25中(1)所示，电子设备1上的布局容器的尺寸为200像素*120像素(宽*高)。由于此时电子设备1的布局容器的宽度为200像素>(100像素+80像素)，因此，电子设备1上的布局容器可以水平显示子控件1和子控件2。

如图25中(2)所示，电子设备2上布局容器的尺寸为140像素*160像素。由于此时电子设备2的布局容器的宽度为140像素<(100像素+80像素)，因此，电子设备2需要折行显示子控件1和子控件2，即分行显示子控件1和子控件2。比如，电子设备2显示如图25中(2)或者显示图25中(3)所示的界面。

又例如，设置某个布局容器中包括子控件1至子控件5，且子控件1至子控件5为水平排列，设置每个子控件的折行参考宽度均为20像素。

如图26中(1)所示，电子设备3上布局容器的尺寸为120像素*80像素。由于此时电子设备3的布局容器的宽度为120像素>20像素*5，因此电子设备3上布局容器可以水平显示子控件1至子控件5。

如图26中(2)所示，电子设备4上的布局容器尺寸为50像素*80像素。由于此时电子设备4的布局容器的宽度为50像素<20像素*5，因此电子设备4上的布局容器可以折行显示子控件1至子控件5。具体的，20像素*2<电子设备4的布局容器的宽度为50像素<20像素*3，因此，每一行至多显示2个子控件。那么，电子设备4的布局容器使用三行显示子控件1至子控件5。例如，电子设备4显示如图26中(2)所示的界面，或者显示如图26中(3)所示的界面。

需要说明的是，该示例中布局容器中的子控件的折行参考值设置为相同，在其他一些示例中，布局容器中的子控件的折行参考值也可以设置为不同。那么，根据多个子控件的折行参考值之和确定是否折行，确定每一行显示的子控件数量和具体显示哪一些子控件。

由此可见，本申请实施例提供的折行能力，使得具有折行能力的布局容器中的多个子控件可以根据布局容器的变化自适应分行显示。实现具有不同屏幕参数的电子设备可以根据相同的布局设置呈现不同的显示效果，在减少开发人员的开发和维护的工作量的同时，满足各种类型电子设备的显示需求。例如，可以针对图片控件、按钮控件、图标按钮控件(ImageButton View)等所在的布局容器设置折行能力。当布局容器的宽度发生变化时，可以自动根据布局容器的宽度确定分行显示多个图片控件或按钮控件或图标按钮控件，达到适应性调整布局的效果。

在另一些实施例中，开发人员还可以设置布局容器的折行方向。

示例性的，折行方向可以包括正向折行和反向折行。其中，正向折行，是指水平排列的子控件在触发折行时，排列在后的子控件位于排列在先的子控件的下一行。例如，如图25中(2)所示的界面，右侧的子控件2显示在子控件1的下一行。正向折行也包括垂直排列的子控件在触发折行时，排列在后的子控件位于排列在先的子控件的右侧一列。

其中，反向折行，是指水平排列的子控件在触发折行时，排列在后的子控件位于排列在先的子控件的上一行。例如，如图25中(3)所示的界面，也可以将右侧的子控件2显示在子控件1的上一行。反向折行也包括垂直排列的子控件在触发折行时，排列在后的子控件位于排列在先的子控件的左侧一列。

需要说明的是，这里子控件的排列顺序的先后可以根据用户阅读文字的习惯确定，例如具体可以根据子控件上显示的文字的语种确定用户的阅读习惯。一般，对于中文英文等语言，用户习惯从左至右，从上至下地阅读，因此，针对水平排列的多个子控件，左侧子控件可认为是排列在先，右侧的子控件为排列在后。针对垂直排列的多个子控件，上方的子控件可认为是排列在先，下侧的子控件为排列在后。

还需要说明的是，这里的正向折行和反向折行仅为本申请实施例提供的一种折行方向的示例，本申请对折行方向的具体定义不做限定。

在又一些实施例中，开发人员还可以设置布局容器的折行对齐方式。

示例性的，以图27中(1)所示的子控件1-5举例，折行对齐方式包括左对齐、垂直居中、右对齐、顶对齐、水平居中和底对齐。

其中，左对齐，当子控件间的水平相对位置转换到垂直相对位置时，在垂直方向每一行中最左侧的子控件保持左侧边缘对齐。例如，图26中(2)所示的子控件2的左边缘与子控件1的左边缘对齐。又例如，图27中(2)所示，第一行的子控件1，第二行的子控件3以及第三行的子控件5的左侧边缘保持对齐。

垂直居中，当子控件间的水平相对位置转换到垂直相对位置时，在垂直方向每一行所有子控件的垂直中心线保持对齐。例如图26中(1)所示的子控件2的垂直中心线与子控件1的垂直中心线保持对齐。又例如，图27中(4)所示，第一行的子控件1和子控件2的垂直中心线，第二行的子控件3和子控件4的垂直中心线，以及第三行的子控件5的的垂直中心线保持对齐。

右对齐，当子控件间的水平相对位置转换到垂直相对位置时，在垂直方向每一行最右侧的子控件保持右侧边缘对齐。例如，图26中(3)所示的子控件2的右边缘与子控件1的右边缘对齐。又例如，图27中(3)所示，第一行的子控件2，第二行的子控件4以及第三行的子控件5的右侧边缘保持对齐。

其中，顶对齐，当子控件间的垂直相对位置转换到水平相对位置时，在水平方向每一列最上方的子控件保持上侧边缘对齐。例如，图28中(1)所示的子控件2的上边缘与子控件1的上边缘对齐。水平居中，当子控件间的垂直相对位置转换到水平相对位置时，在水平方向每一列所有子控件的水平中心线保持对齐。例如图28中(2)所示的子控件2的水平中心线与子控件1的水平中心线保持对齐。底对齐，当子控件间的垂直相对位置转换到水平相对位置时，在水平方向最下方的子控件保持底部边缘对齐。例如，图28中(3)所示的子控件2的底部边缘与子控件1的底部边缘对齐。

以下，给出一个布局文件(xml文件)的示例，该布局文件中设置有开启折行能力使能的布局容器，且该布局容器中包括两个子控件：一个图片控件和一个相对布局容器。该相对布局容器中存放两个子控件-两个本文控件。

上述实施例，是开发人员通过在布局文件(例如xml文件)中设置View或ViewGroup的折行能力相关的属性值，设计显示界面自适应布局的方案。也可以通过在JAVA源码文件中通过添加调用接口的方式来设置View或ViewGroup的折行能力相关的属性值。

如表四所示，为设置View或ViewGroup的折行能力相关的属性值相对应的接口的示例。

表四

以上详细介绍了折行能力的含义。开发人员可以根据应用中每个显示界面的布局设计，结合折行能力、其他自适应布局能力以及基本的布局能力(例如Android原生的属性)配置好布局文件，将布局文件与应用的其他的源代码以及资源等打包成安装包(例如APK文件)，并上架到应用市场。电子设备从应用市场下载该安装包，并安装该应用。

以下，详细说明电子设备运行该应用时，如何根据上述布局文件实现自适应布局的方案。

仍以搭载Android系统的电子设备，运行时钟应用为例进行说明。

请参见图29，显示界面2901为电子设备100(例如具体是手机)显示的主屏幕界面。响应于检测到用户在显示界面2901上操作时钟应用的图标2902，手机启动时钟应用，并绘制时钟应用的首页2903。其中，首页2903中的控件2904所在的布局容器为具有折行能力。控件2904会跟随布局容器的变化而变化。其中，时钟应用的首页可以理解为时钟应用运行后显示的第一个界面。

还需要说明的是，这里是以开启应用显示首页为例进行说明的。在开启该应用后，响应于用户的操作，手机显示其他界面(非首页)时也适用于本申请提供的方法。

具体的，在启动时钟应用后，手机会启动一个主Activity，并在主Activity中通过setContentView中的inflate流程，读取该时钟应用的布局文件。该布局文件包括时钟应用各个显示界面(例如时钟应用的首页)包含的View和ViewGroup，这些View和ViewGroup的层次结构，以及这些View和ViewGroup具有的属性。手机调用相应的接口，写入这些View和ViewGroup的各个属性值。需要注意的是，这里这些View和ViewGroup具有的属性包括Android原生属性以及本申请实施例扩展的自适应布局能力相关属性。然后手机进入窗口绘制流程，经过测量(Measure)、布局(Layout)和绘制(Draw)三大流程完成显示界面的绘制。

其中，上述测量是用来计算View的实际大小。从performMeasure方法开始，其中包括参数MeasureSpec。MeasureSpec表示的是一个32位的整数值，它的高2位表示测量模式(SpecMode)，低30位表示某种测量模式下的规格大小(SpecSize)。也就是说，MeasureSpec用来说明应该如何测量这个View。上述布局是用来确定View在父布局容器中的位置。他是父布局容器获取子View的位置参数后，调用子View的layout方法并将位置参数传入实现的。上述绘制是用来绘制控件，从performDraw方法开始。其中，布局和绘制的过程可参考现有技术的相关内容，这里不再赘述。

需要说明的是，对DecorView而言，它的MeasureSpec由窗口尺寸和其自身的布局参数(LayoutParams)共同决定；对于普通的View，它的MeasureSpec由其所在的布局容器(即父布局容器)的MeasureSpec和其本身的LayoutParams共同决定。

在本申请实施例中，窗口尺寸是由手机的屏幕参数决定的。屏幕参数包括屏幕的尺寸、分辨率，以及屏幕当前的状态。屏幕当前状态包括是屏幕处于横屏状态，还是竖屏状态。若屏幕为可折叠屏，屏幕处于折叠状态、半折叠状态、展开状态等。若屏幕支持分屏，当前应用显示的窗口的尺寸等。

上述View以及ViewGroup本身的LayoutParams包括Android系统原生的属性，以及本申请实施例扩展的自适应布局能力相关的属性(例如折行能力相关的属性)等。因此，在测量过程中，手机根据布局文件中View以及ViewGroup的Android系统原生的属性进行测量，还需要根据布局文件中View以及ViewGroup的自适应布局能力相关的属性进行测量。在布局过程中，手机需要根据布局文件中View以及ViewGroup的Android系统原生的属性进行布局，还需要根据布局文件中View以及ViewGroup的自适应布局能力相关的属性进行布局。其中，手机根据布局文件中View以及ViewGroup的Android系统原生的属性进行测量的过程，以及根据布局文件中View以及ViewGroup的Android系统原生的属性进行布局的过程均可参考现有技术相关内容，这里不再赘述。

这里对手机根据布局文件中View以及ViewGroup的自适应布局能力相关的属性进行测量和布局的过程进行介绍。

具体的，手机针对布局文件中的每一个布局容器执行如图30所示测量流程，该方法具体包括：

S3001、获取布局容器的布局参数。

其中，布局容器的布局参数包括折行能力使能，还可以包括折行方向以及折行对齐方式，还可以包括布局容器初始的尺寸值等。

S3002、确定布局容器的折行能力使能是否打开。若开启，则执行步骤S3003，否则该流程结束。

S3003、重置行管理器。

其中，行管理器(RowManager)用于确定布局容器中子控件的布局，包括布局容器中分几行(或分几列)显示所有的子控件。

需要强调的是，图30和图31均是以水平方向的折行为例，对与布局容器的折行能力相关的测量和布局流程进行说明的。

S3004、新建一行作为当前行，并初始化当前行的参数。

例如，当前行的行参考值＝0，当前行的宽度＝0，当前行的高度＝0。其中，当前行的行参考值为变量，后续用于确定当前行可以放置子控件的数量。此时，还可以记录当前行的起始位置，用于后续布局时确定子控件的位置。例如，记录当前行的左上位置的坐标值(可简称为左上坐标)，记为(Left，Top)。

S3005、是否遍历布局容器中所有子控件。若是，则执行步骤S3006，否则执行步骤S3014。

S3006、获取子控件的布局参数。

其中，子控件的布局参数可以包括子控件的折行参考值。子控件的布局参考值还可以包括子控件的初始的尺寸值、外边距等。

S3007、确定当前子控件是否设置了折行参考值。若设置了，则执行步骤S30030。若未设置，则执行步骤S3009。

需要说明的是，第一次执行到该步骤时，可以选择布局容器中的第一个子控件作为当前子控件，执行本步骤以及如下步骤。当后续循环执行到该步骤时，可以选择当前子控件的下一个子控件更新为新的当前子控件。

S30030、更新当前行的行参考值。当前行的行参考值＝行参考值+当前子控件的折行参考值。

而后，执行步骤S3010。

S3009、更新当前行的行参考值。当前行的行参考值＝行参考值+当前子控件的初始宽度+当前子控件的外边距。

S3010、确定行参考值是否大于布局容器的宽度。若大于，则执行步骤S3011，否则，执行S3014。

S3011、当前行加入行管理器，更新行管理器的尺寸值。

如果行参考值大于布局容器的宽度，则确定不将当前子控件添加在当前行，而是添加在下一行。此时，可以确定当前行的宽度和高度，并确定在行管理器中增加该当前行，并更新行管理器的尺寸。那么，行管理器的宽度为行管理器中包含的所有行的宽度的最大值，行管理的高度为行管理器中所有行的高度之和。即，行管理器的宽度＝MAX(行的宽度)，行管理器的高度＝SUM(行的高度)。

S3012、新建一行作为当前行，并初始化当前行的参数。

例如，当前行的行参考值＝当前子控件的折行参考值，或者，当前行的行参考值＝当前子控件宽度+当前子控件的外边距。还可以确定当前行的起始位置，例如当前行的左上位置的坐标值。

S3013、当前子控件加入当前行，更新当前行的参数。

当前行的宽度为当前行中包含的所有子控件的宽度之和，当前行的高度为当前行包含的所有子控件的高度中的最大值。即，当前行的宽度＝当前行的行参考值；当前行的高度＝MAX(当前行中子控件的高度)。

而后执行步骤S3005。

S3014、确定行管理器的尺寸为布局容器的尺寸。

当遍历网布局容器中所有的子控件后，确定好行管理中包含的行以及行的参数后，即确定好行管理的尺寸，也即确定好布局容器的尺寸。此时，完成了该布局容器的测量过程。

完成测量过程之后，手机针对布局文件中的每一个布局容器执行如图31所示测量流程，该方法具体包括：

S3101、确定是否遍历所有行。若是，则该布局容器的布局过程结束。否则，执行步骤S3102。

S3102、计算当前行的第一子控件的Left值。

布局过程中需确定布局容器中各个子控件的位置。每个子控件的位置可由左上位置的坐标，记为(Left，Top)，和右下位置的坐标，记为(Right，Bottom)确定。即，各个子控件的位置包括四个参数值：Left值、Top值、Right值以及Bottom值。

在测量过程中已确定了布局容器中每一行的位置，包括每一行的左上坐标(Left，Top)，以及每一行的宽度和高度。因此，可以根据布局容器中每一行的位置，以及布局容器设置的折行对齐方式确定每一行的第一子控件的Left值。

例如，若对齐方式为左对齐，第一个子控件的左边缘与当前行的左边缘对齐，那么当前行的Left值＝当前行第一个子控件的Left值。若对齐方式为右对齐，当前行的最后一个子控件的右边缘与当前行的右边缘对齐，那么第一个子控件的Left值＝当前行的Left值+当前行的宽度-SUM(当前行包含的子控件的宽度+外边距)。若对齐方式为垂直居中，当前行所有子控件的垂直中心线与当前行的垂直中心线对齐，那么第一个子控件的Left值＝当前行的Left值+[当前行的宽度/2-SUM(当前行包含的子控件的宽度+外边距)/2]。

S3103、计算当前子控件的Top值。

与确定当前子控件的Left值类似，根据布局容器中每一行的位置，以及布局容器设置的折行对齐方式确定每一行中子控件的Top值。

例如，若对齐方式为顶对齐，子控件的上边缘与当前行的上边缘对齐，那么当前行的的Top值＝当前行第一个子控件的Top值。若对齐方式为底对齐，当前行的垂直方向尺寸最大(即高度最大)的子控件的下边缘与当前行的下边缘对齐，那么子控件的Top值＝当前行的Top值+当前行中高度最大的子控件的高度-当前子控件的高度。若对齐方式为水平居中，当前行所有子控件的水平中心线与当前行的水平中心线对齐，那么当前子控件的Top值＝当前行的Top值+[当前行的高度/2-SUM(当前行高度最大的子控件的高度/2)]。

S3104、计算当前子控件的Right值。当前子控件的Right值＝Left值+子控件的宽度。

在测量过程中，已确定子控件的宽度，因此可以确定子控件的Right值。

S3105、计算当前子控件的Bottom值。当前子控件的Bottom值＝Top值+子控件的高度。

在测量过程中，已确定子控件的高度，因此可以确定子控件的Bottom值。

当然，本申请实施例并不限定步骤S3104和S3105的执行顺序，可以同时执行，也可以交换执行顺序。

S3106、基于Left值、Right值、Top值和Bottom值确定当前子控件的位置。

S3107、确定是否遍历当前所有子控件。若是，则执行步骤S3101，否则执行步骤S3108。

S3108、确定下一个子控件的Left值。

下一个子控件的Left值＝当前子控件的Right值+当前子控件的外边距。而后，执行步骤S3103，即将该下一个子控件作为当前子控件，继续确定其Top值、Right值和Bottom值。一直到遍历该行的所有子控件。

综上，应用的开发人员在开发应用阶段，在布局文件中，设置显示界面中View和ViewGroup设置有自适应布局能力(例如，折行能力)的属性。当具有不同屏幕参数的电子设备在安装该应用后，可以根据布局文件中View和ViewGroup的自适应布局能力的属性，结合自身的屏幕参数确定分几行显示各个布局容器中的View和ViewGroup，实现显示界面的自适应布局。这样，开发人员仅需要设计一套布局文件，即可满足具有不同屏幕参数的电子设备的显示需求，有利于降低开发人员的开发成本以及维护成本。

另外，相较于应用安装包中需要携带多套布局文件的方案，本方案在应用安装包中携带一套布局文件，有利于提升电子设备下载应用安装包的流量成本和时间成本。并且，当电子设备安装该应用后，不需要保存其他多余的布局文件，提升了电子设备存储空间的利用率。

前文已说明，本申请实施例扩展的多个自适应布局能力之间可以相互组合使用。这里给出折行能力与其他自适应布局能力组合的几个示例。

1、折行能力+缩放能力+均分能力

仍然以图库应用的浏览界面为例进行说明。

如图32中(1)所示，为平板运行图库应用时，显示的浏览界面。浏览界面包括一个布局容器，该布局容器包括多个图片控件(显示照片或视频的缩略图)。该布局容器设置有缩放能力(其中图片控件未设置水平可用空间占比和垂直可用空间占比)。且该布局容器设置有水平方向的占比能力以及水平方向的折行能力。

如图32中(2)所示，为手机运行图库应用时，显示的浏览界面。首先，手机根据该布局容器内各个图片控件的初始规格信息，确定该布局容器的行数，以及每一行显示的图片控件的数量。例如，确定在手机上每一行只能显示三个图片控件。而后，按照水平方向的占比能力确定第一行三个图片控件的宽度，然后，根据图片控件的缩放能力，保持图片控件的形状进行缩放。其他行的图片控件的水平方向的占比参考第一行的图片控件的宽度。对比图32中(2)的浏览界面与图32中(1)的浏览界面，可发现，虽然手机的宽度相对平板减小了，但每一行的图片控件却放大了。

2、折行能力+均分能力

以图库应用的浏览界面为例进行说明。

如图33中(1)所示，为平板运行图库应用时，显示的浏览界面。浏览界面包括一个布局容器，该布局容器包括多个图片控件(显示照片或视频的缩略图)。该布局容器设置有折行能力和均分能力。此时，多个图片控件的宽度刚好为折行参考值。

如图33中(2)所示，为手机运行图库应用时，显示的浏览界面。首先，手机根据该布局容器内各个图片控件的折行参考值，确定该布局容器的行数，以及每一行显示的图片控件的数量。例如，确定在手机上每一行最多显示三个图片控件。那么，可以确定出手机上需要分两行显示这五个图片控件。又由于布局容器还设置了均分能力，因此手机在每一行显示图片控件时，还保持每一行图片控件均有相同的间距。对比图33中(2)的浏览界面与图33中(1)的浏览界面，可发现，虽然手机的宽度相对平板减小了，每一行显示图片控件的数量减少了，且每一行图片控件之间的间距自适应调整了。

可见，开发人员可以无需关注电子设备的屏幕尺寸，无需关心一行可以显示多少图片控件，而直接使用折行能力使得电子设备自适应调整布局，能够实现网格化效果。

3、折行能力+隐藏能力

仍然以图库应用的浏览界面为例进行说明。

如图34中(1)所示，为平板运行图库应用时，显示的浏览界面。浏览界面包括一个布局容器，该布局容器包括多个图片控件(显示照片或视频的缩略图)，分别为图片控件A至图片控件E。该布局容器设置有折行能力和隐藏能力。图片控件A和图片控件E的隐藏优先级最高，图片控件B和图片控件D次之，图片控件C最低。此时，多个图片控件的宽度刚好为折行参考值。

如图34中(2)所示，为平板分屏显示两个窗口的界面示意。其中左侧窗口用于显示图库应用的浏览界面。右侧窗口用于显示音乐应用的播放界面。由于用于显示图库应用的浏览界面的窗口尺寸变小，触发平板对布局容器的折行显示。根据该布局容器内各个图片控件的折行参考值，确定每一行只能显示一个图片控件。此时，图34中(2)所示的界面中刚好垂直显示这五个图片控件。若平板用于显示图库应用浏览界面的窗口的高度不足以显示五个图片控件时，将触发平板根据隐藏优先级的高低对这五个图片控件进行隐藏。如图34中(3)所示的界面，不再显示隐藏优先级最高的图片控件A和图片控件E。

综上，不同屏幕参数的电子设备根据同一个布局文件绘制了不同的显示界面。也就是说，不同屏幕参数的电子设备可以根据布局文件自适应调整显示界面的布局，满足不同的显示需求。

如图35所示，本申请实施例公开了一种电子设备，该电子设备可以为运行上述应用开发工具的电子设备。该电子设备具体可以包括：显示屏3501；输入设备3502(例如鼠标、键盘或触摸屏等)；一个或多个处理器3503；存储器3504；通信模块3505；一个或多个应用程序(未示出)；以及一个或多个计算机程序3506，上述各器件可以通过一个或多个通信总线3507连接。其中，上述一个或多个计算机程序3506被存储在上述存储器3504中并被配置为被该一个或多个处理器3503执行，该一个或多个计算机程序3506包括指令，该指令可以用于执行上述实施例中的相关步骤。

如图36所示，本申请实施例公开了一种电子设备，该电子设备可以为安装有包含上述布局文件的应用安装包的电子设备(也可称为运行设备)。该电子设备具体可以包括：显示屏3601；一个或多个处理器3603；存储器3604；通信模块3605；一个或多个应用程序(未示出)；以及一个或多个计算机程序3606，上述各器件可以通过一个或多个通信总线3607连接。其中，上述一个或多个计算机程序3606被存储在上述存储器3604中并被配置为被该一个或多个处理器3603执行，该一个或多个计算机程序3606包括指令，该指令可以用于执行上述实施例中的相关步骤。

通过以上的实施方式的描述，所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，仅以上述各功能模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能模块完成，即将装置的内部结构划分成不同的功能模块，以完成以上描述的全部或者部分功能。上述描述的系统，装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

在本申请实施例各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请实施例的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)或处理器执行本申请各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：快闪存储器、移动硬盘、只读存储器、随机存取存储器、磁碟或者光盘等各种可以存储程序代码的介质。

以上所述，仅为本申请实施例的具体实施方式，但本申请实施例的保护范围并不局限于此，任何在本申请实施例揭露的技术范围内的变化或替换，都应涵盖在本申请实施例的保护范围之内。因此，本申请实施例的保护范围应以所述权利要求的保护范围为准。

Claims (22)

1.一种显示界面的布局方法，其特征在于，包括：

运行设备安装第一应用的应用安装包，所述应用安装包包括第一布局文件，所述第一布局文件包含第一控件单元与第一预设算法之间的第一对应关系，所述第一预设算法的输入参数为所述运行设备的第一属性约束条件的取值，所述第一属性约束条件包括设备类型、设备尺寸、显示方向、设备能力或交互方式中的至少一个，所述第一预设算法的输出参数为所述第一控件单元的属性值，所述第一控件单元的属性值用于指示所述第一控件单元在第一显示界面中的大小和位置；

所述运行设备获取所述运行设备的设备参数，所述设备参数包括所述运行设备的设备类型取值、所述运行设备的设备尺寸取值、所述运行设备的显示方向取值、所述运行设备的设备能力取值或所述运行设备的交互方式取值中的至少一个；

所述运行设备根据所述设备参数和所述第一预设算法计算所述第一控件单元的第一属性值；

所述运行设备按照所述第一属性值布局所述第一控件单元并在所述第一显示界面显示所述第一控件单元。

2.根据权利要求1所述的方法，其特征在于，所述第一布局文件还包括第二控件单元与第二预设算法之间的第二对应关系，所述第二预设算法的输入参数为所述运行设备的第二属性约束条件的取值，所述第二属性约束条件包括设备类型、设备尺寸、显示方向、设备能力或交互方式中的至少一个，所述第二预设算法的输出参数为所述第二控件单元的属性值，所述第二控件单元的属性值用于指示所述第二控件单元在所述第一显示界面中的大小和位置，所述方法还包括：

所述运行设备根据所述设备参数和所述第二预设算法计算所述第二控件单元的第二属性值；

所述运行设备按照所述第二属性值布局所述第二控件单元并在所述第一显示界面显示所述第二控件单元。

3.根据权利要求1或2所述的方法，其特征在于，所述第一控件单元的属性值还用于指示所述第一控件单元的显示风格。

4.根据权利要求1或2所述的方法，其特征在于，所述设备类型包括手机、电视、车机或手表。

5.根据权利要求1或2所述的方法，其特征在于，所述设备尺寸包括设备分辨率或长宽比。

6.根据权利要求1或2所述的方法，其特征在于，所述显示方向包括横屏方向或竖屏方向。

7.根据权利要求1或2所述的方法，其特征在于，所述设备能力包括摄像能力、定位能力或通话能力，所述交互方式包括触摸交互、遥控器交互或语音交互。

8.根据权利要求1或2所述的方法，其特征在于，所述第一布局文件还包括所述第一控件单元的第一功能项，所述第一功能项包括缩放、拉伸、隐藏、均分或折行中的一个布局能力，所述方法还包括：

所述运行设备获取与所述第一功能项对应的第三预设算法；

所述运行设备将所述设备参数作为输入参数输入所述第三预设算法，通过所述第三预设算法计算得到所述第一控件单元的第三属性值。

9.根据权利要求1或2所述的方法，其特征在于，所述第一布局文件中包括与第三控件单元对应的第三设备能力，所述方法还包括：

所述运行设备查询具有所述第三设备能力的显示输出设备；

所述运行设备指示所述显示输出设备显示所述第三控件单元。

10.根据权利要求9所述的方法，其特征在于，所述运行设备指示所述显示输出设备显示所述第三控件单元包括：

所述运行设备将所述第三控件单元对应的显示资源发送给所述显示输出设备，以使得所述显示输出设备显示所述第三控件单元。

11.一种生成布局文件的方法，其特征在于，包括：

显示第一应用的开发界面；

响应于用户输入的第一操作，在所述开发界面中显示预设的初始布局文件；

响应于用户输入的第二操作，在所述初始布局文件中添加第一控件单元，所述第一控件单元用于在所述第一应用的第一显示界面中显示，所述控件单元为控件或控件组；

响应于用户输入的第三操作，在所述初始布局文件中设置所述第一控件单元的第一属性约束条件，得到第一布局文件；其中，所述第一控件单元的属性值为所述第一应用的运行设备按照所述第一属性约束条件计算得到的，所述第一控件单元的属性值用于指示所述第一控件单元在所述第一显示界面中的位置和大小；所述第一布局文件用于指示所述第一显示界面中N个控件单元的布局方式，所述第一控件单元为所述N个控件单元中的一个，N为大于0的整数；

根据所述第一布局文件生成所述第一应用的应用安装包。

12.根据权利要求11所述的方法，其特征在于，所述开发界面中设置有属性窗口，所述属性窗口中包括一个或多个属性约束条件，所述属性约束条件用于定义所述第一应用的运行设备计算控件单元的属性值时获取的设备参数，所述属性约束条件包括所述运行设备的设备类型、设备尺寸、显示方向、设备能力以及交互方式中的至少一个；

在所述初始布局文中设置所述第一控件单元的第一属性约束条件之前，还包括：

检测到用户输入的第三操作，所述第三操作为用户在所述属性窗口中选择所述第一属性约束条件的操作；

其中，在所述初始布局文中设置所述第一控件单元的第一属性约束条件，包括：

按照所述第三操作中用户在所述属性窗口中选择的所述第一属性约束条件，在所述第一布局文件中建立所述第一属性约束条件与所述第一控件单元之间的第一对应关系。

13.根据权利要求12所述的方法，其特征在于，所述属性窗口中还包括一个或多个属性选项，所述属性选项包括宽度、高度以及显示位置中的至少一个；

当用户在所述一个或多个属性选项中选中第一属性选项时，所述第一对应关系为所述第一属性约束条件与所述第一控件单元的第一属性选项之间的对应关系。

14.根据权利要求12所述的方法，其特征在于，所述属性窗口中还包括一个或多个功能项或功能项组，所述功能项包括缩放、拉伸、隐藏、均分以及折行中的至少一个布局能力，所述功能项组为多个所述功能项叠加后组成的布局能力；

当用户在所述一个或多个功能项中选中第一功能项时，所述第一对应关系为所述第一属性约束条件、所述第一功能项与所述第一控件单元之间的对应关系；和/或，

当用户在所述一个或多个功能项组中选中第一功能项组时，所述第一对应关系为所述第一属性约束条件、所述第一功能项组与所述第一控件单元之间的对应关系。

15.根据权利要求12-14中任一项所述的方法，其特征在于，在设置所述第一控件单元的第一属性约束条件之后，还包括：

在所述第一布局文件中建立第一预设算法与所述第一控件单元之间的第二对应关系；

其中，所述第一预设算法的输入参数为所述第一应用的运行设备获取的与所述第一属性约束条件对应的设备参数，所述第一预设算法的输出参数为所述第一控件单元的属性值。

16.根据权利要求11-15中任一项所述的方法，其特征在于，所述开发界面中设置有控件库和视图树，所述控件库内包括不同类型的控件单元，所述视图树用于指示所述第一显示界面中各个控件单元之间的结构关系；

其中，在所述初始布局文件中添加第一控件单元，包括：

将用户在所述控件库中选择的第一控件单元添加至所述视图树的第一位置。

17.根据权利要求11-16中任一项所述的方法，其特征在于，所述开发界面中设置有预览窗口，所述预览窗口用于模拟所述第一应用运行时呈现的所述第一显示界面；在所述初始布局文件中添加第一控件单元之后，还包括：

将所述第一控件单元显示在所述预览窗口的第一显示界面内。

18.根据权利要求11-17中任一项所述的方法，其特征在于，在所述初始布局文件中设置所述第一控件单元的第一属性约束条件之后，还包括：

在所述初始布局文件中添加第二控件单元，所述第二控件单元用于在所述第一显示界面中显示，所述第二控件单元为所述N个控件单元中的一个；

在所述初始布局文中设置所述第二控件单元的第二属性约束条件，所述第二控件单元的属性值为所述第一应用的运行设备按照所述第二属性约束条件计算得到的，所述第二控件单元的属性值用于指示所述第二控件单元在所述第一显示界面中的位置和大小。

19.根据权利要求11-17中任一项所述的方法，其特征在于，在所述初始布局文件中设置所述第一控件单元的第一属性约束条件之后，还包括：

在所述初始布局文件中添加第三控件单元，所述第三控件单元用于在所述第一显示界面中显示，所述第三控件单元为所述N个控件单元中的一个；

在所述初始布局文中设置所述第三控件单元的属性值，所述第三控件单元的属性值用于指示所述第三控件单元在所述第一显示界面中的位置和大小。

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

一个或多个处理器；

显示屏；

存储器；

其中，所述存储器中存储有一个或多个计算机程序，所述一个或多个计算机程序包括指令，当所述指令被所述电子设备执行时，使得所述电子设备执行如权利要求11-19中任一项所述的生成布局文件的方法。

21.一种计算机可读存储介质，所述计算机可读存储介质中存储有指令，其特征在于，当所述指令在电子设备上运行时，使得所述电子设备执行如权利要求11-19中任一项所述的生成布局文件的方法。

22.一种运行设备，其特征在于，包括：

一个或多个处理器；

显示屏；

存储器；

其中，所述存储器中存储有一个或多个计算机程序，所述一个或多个计算机程序包括指令，当所述指令被所述运行设备执行时，使得所述运行设备执行如权利要求1-10中任一项所述的显示界面的布局方法。

Images