CN114327701A - 一种应用界面的布局方法及电子设备 - Google Patents
一种应用界面的布局方法及电子设备 Download PDFInfo
- Publication number
- CN114327701A CN114327701A CN202110687153.8A CN202110687153A CN114327701A CN 114327701 A CN114327701 A CN 114327701A CN 202110687153 A CN202110687153 A CN 202110687153A CN 114327701 A CN114327701 A CN 114327701A
- Authority
- CN
- China
- Prior art keywords
- sub
- layout
- controls
- control
- container
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 170
- 238000009434 installation Methods 0.000 claims description 69
- 238000004590 computer program Methods 0.000 claims description 11
- 230000004044 response Effects 0.000 claims description 9
- 101100134058 Caenorhabditis elegans nth-1 gene Proteins 0.000 claims description 4
- 230000009191 jumping Effects 0.000 claims description 3
- 230000003044 adaptive effect Effects 0.000 description 96
- 230000000694 effects Effects 0.000 description 80
- 238000005259 measurement Methods 0.000 description 69
- 238000010586 diagram Methods 0.000 description 52
- 230000008569 process Effects 0.000 description 39
- 238000011161 development Methods 0.000 description 37
- 230000006870 function Effects 0.000 description 37
- 238000013461 design Methods 0.000 description 24
- 238000007726 management method Methods 0.000 description 23
- 230000008859 change Effects 0.000 description 21
- 239000010410 layer Substances 0.000 description 21
- 238000004364 calculation method Methods 0.000 description 18
- 238000012423 maintenance Methods 0.000 description 15
- 238000012545 processing Methods 0.000 description 14
- 230000036961 partial effect Effects 0.000 description 12
- 238000004422 calculation algorithm Methods 0.000 description 11
- 238000004891 communication Methods 0.000 description 11
- 238000012935 Averaging Methods 0.000 description 9
- 230000009286 beneficial effect Effects 0.000 description 5
- 238000000691 measurement method Methods 0.000 description 5
- 238000010295 mobile communication Methods 0.000 description 5
- 238000001914 filtration Methods 0.000 description 4
- 230000001960 triggered effect Effects 0.000 description 4
- 230000001419 dependent effect Effects 0.000 description 3
- 238000009826 distribution Methods 0.000 description 3
- 238000005516 engineering process Methods 0.000 description 3
- 230000006399 behavior Effects 0.000 description 2
- 238000013500 data storage Methods 0.000 description 2
- 230000003247 decreasing effect Effects 0.000 description 2
- 230000002349 favourable effect Effects 0.000 description 2
- 238000009877 rendering Methods 0.000 description 2
- 230000000007 visual effect Effects 0.000 description 2
- 108091029480 NONCODE Proteins 0.000 description 1
- 238000013528 artificial neural network Methods 0.000 description 1
- 230000003416 augmentation Effects 0.000 description 1
- 230000003190 augmentative effect Effects 0.000 description 1
- 230000015572 biosynthetic process Effects 0.000 description 1
- 230000002860 competitive effect Effects 0.000 description 1
- 239000012792 core layer Substances 0.000 description 1
- 238000001514 detection method Methods 0.000 description 1
- 239000004744 fabric Substances 0.000 description 1
- 230000004927 fusion Effects 0.000 description 1
- 230000036541 health Effects 0.000 description 1
- 230000003993 interaction Effects 0.000 description 1
- 230000007774 longterm Effects 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 238000004806 packaging method and process Methods 0.000 description 1
- 230000036316 preload Effects 0.000 description 1
- 238000012913 prioritisation Methods 0.000 description 1
- 230000009467 reduction Effects 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
- 238000003786 synthesis reaction Methods 0.000 description 1
- 238000009966 trimming Methods 0.000 description 1
- 238000009827 uniform distribution Methods 0.000 description 1
Images
Landscapes
- User Interface Of Digital Computer (AREA)
Abstract
一种应用界面的布局方法及电子设备,涉及电子技术领域,可以减少应用开发人员开发和维护应用界面的布局文件的工作量,该方法具体包括:开发人员在应用的布局文件中,设置具有自适应布局能力的布局容器,其中自适应布局能力包括延伸能力、占比能力、均分能力、折行能力、隐藏能力、拉伸能力、或缩放能力中至少一项。这样,当电子设备在运行该应用时,根据自身的屏幕参数以及布局文件中该布局容器的自适应布局能力,布局布局容器中的子控件在显示界面中的大小和位置。
Description
本申请要求于2020年9月29日提交国家知识产权局、申请号为202011058008.5、申请名称为“一种应用界面的布局方法及电子设备”的中国专利申请的优先权;要求于2020年10月16日提交国家知识产权局、申请号为202011110788.3、申请名称为“一种应用界面的布局方法及电子设备”的中国专利申请的优先权;要求于2020年10月22日提交国家知识产权局、申请号为202011142738.3、申请名称为“一种应用界面的布局方法及终端”的中国专利申请的优先权;要求于2020年10月22日提交国家知识产权局、申请号为202011142649.9、申请名称为“一种应用界面的布局方法及终端”的中国专利申请的优先权;要求于2020年10月22日提交国家知识产权局、申请号为202011141053.7、申请名称为“一种应用界面的布局方法及终端”的中国专利申请的优先权;要求于2020年10月29日提交国家知识产权局、申请号为202011183319.4、申请名称为“一种应用界面的布局方法及终端”的中国专利申请的优先权;要求于2020年10月29日提交国家知识产权局、申请号为202011183328.3、申请名称为“一种应用界面的布局方法及终端”的中国专利申请的优先权;要求于2020年10月30日提交国家知识产权局、申请号为202011189853.6、申请名称为“一种应用界面的布局方法及终端”的中国专利申请的优先权,这几件专利的全部内容通过引用结合在本申请中。
技术领域
本申请涉及电子技术领域,尤其涉及一种应用界面的布局方法及电子设备。
背景技术
电子设备通过应用程序(以下简称应用)的方式为用户提供多样化的应用功能。一般,在开发应用时,开发人员会设计应用中每个显示界面中控件(View)或控件组(ViewGroup)的布局,形成布局文件,并打包在应用的安装包中。当电子设备安装并运行该应用时,调用相应的布局文件,从而在显示屏上呈现相应的显示界面。目前,电子设备品类越来越多,出现各种规格(例如尺寸)的显示屏。若需要开发人员针对每种规格的显示屏均设计和开发不同的布局文件,开发和维护的工作量极大。
发明内容
本申请提供的一种应用界面的布局方法及电子设备,可以减少应用开发人员开发和维护应用界面的布局文件的工作量。
为了实现上述目的,本申请实施例提供了以下技术方案:
第一方面、提供一种应用界面的布局方法,电子设备安装第一应用的应用安装包,应用安装包包括第一布局文件,第一布局文件指示N个子控件及已开启的预设能力,N为正整数;预设能力包括延伸能力、占比能力、均分能力、拉伸能力、隐藏能力中的一种或者几种;该方法包括:电子设备接收用户在第一界面上的第一操作;响应于接收到的第一操作,电子设备根据电子设备的设备参数和预设能力确定N个子控件的属性值,其中,电子设备的设备参数包括电子设备的屏幕类型取值、屏幕尺寸取值或运行状态取值中的至少一个,N个子控件的属性值用于指示N个子控件在第二界面中的大小和位置;电子设备根据N个子控件的属性值在第二界面中显示N个子控件。
其中,屏幕类型包括全面屏、曲面屏、刘海屏、珍珠屏、折叠屏等中任一项。容易理解,屏幕类型影响着第一应用整体在屏幕的显示大小和显示位置,进一步影响着第一布局容器中子控件的显示。其中,运行状态包括电子设备的横竖屏状态、分屏状态以及折叠状态中的一项或多项。容易理解,电子设备的运行状态不同时,第一应用在屏幕的显示大小和显示位置不同,进而约束着第一布局容器中子控件的显示。
可以看出,在第一布局文件中N个子控件的属性值并不是固定的,而是与电子设备的设备参数相关,设备参数包括设备的屏幕类型、屏幕尺寸或者运行状态中至少一个。换言之,当电子设备参数不同时,电子设备根据根据电子设备的设备参数和预设能力自适应的改变N个子控件的大小和/或位置。进而可知,本方案能实现具有不同设备参数的电子设备可以根据相同的布局文件呈现不同的显示效果,在减少开发人员的开发和维护的工作量的同时,满足各种类型电子设备的显示需求。
此外,相较于应用安装包中需要携带多套布局文件的方案,本方案在应用安装包中携带一套布局文件,有利于提升电子设备下载应用安装包的流量成本和时间成本。并且,当电子设备安装该应用后,不需要保存其他多余的布局文件,提升了电子设备存储空间的利用率。
还需要说明的是,也就是说,上述预设能力(即自适应布局能力)可以独立使用,也可以相互组合使用。例如,为同一应用界面中不同的对象(View或ViewGroup)设置不同的自适应布局能力的属性。或者,对同一个对象设置两个或两个以上自适应布局能力的属性。可以理解的是,在实际的应用开发过程中,除了组合时出现冲突的情况外,上述自适应布局能力之间可以根据实际需求进行任意组合。例如,拉伸能力可以与隐藏能力、占比能力、均分能力和折行能力中任一个能力进行组合。缩放能力可以与隐藏能力、占比能力、均分能力和折行能力中任一个能力进行组合等。
一种可能的实现方式中,第一布局文件包括与预设能力对应的预设参数,电子设备根据电子设备的设备参数和预设能力确定N个子控件的属性值,包括:电子设备根据电子设备的设备参数、预设能力以及预设参数确定N个子控件的属性值。
一种可能的实现方式中,电子设备的运行状态包括电子设备的横竖屏状态、分屏状态以及折叠状态中的一项或多项。
一种可能的实现方式中,第一操作为启动第一应用的操作,或者跳转至第二界面的操作,或者切换电子设备的运行状态的操作中任一项。
示例性的,若第二界面是第一应用的首页,那么,第一操作为启动第一应用的操作。若第二界面不是第一应用的首页,那么,第一操作为指示由第一界面跳转至第二界面的操作。在另一场景中,在电子设备显示第一应用的某个界面时,若检测到用户切换电子设备运行状态时,例如从竖屏切换至横屏,或者从展开状态切换至折叠状态,或者从未分屏状态切换至分屏状态等,那么电子设备重新获取设备的设备参数,根据更新后的设备的设备参数和预设能力重新计算N个子控件的属性值,刷新当前界面。也就是说,第一应用的同一个功能界面在电子设备不同的运行状态下有不同的布局,即第二界面和第一界面中N个子控件的布局不同。
一种可能的实现方式中,预设能力为延伸能力;第一布局文件指示在第一布局容器的第一方向上排列N个子控件;第一方向为水平方向或垂直方向;电子设备根据电子设备的设备参数和预设能力确定N个子控件的属性值,包括:电子设备根据设备参数确定第一布局容器在第一方向上的尺寸;根据第一布局容器在第一方向上的尺寸以及N个子控件在第一方向上的尺寸,确定N个子控件中的N1个子控件以及第N1+1个子控件,其中,N1小于N;电子设备根据N个子控件的属性值在第二界面中显示N个子控件,包括:电子设备根据N个子控件的属性值在第二界面中完全显示N1个子控件以及部分显示第N1+1个子控件。
换言之,当布局容器的宽度发生变化时,可以自动根据布局容器的尺寸确定显示的子控件的数量,从而满足具有不同屏幕尺寸电子设备的显示需求。另外,本申请不仅可以根据布局容器的变化自适应减少显示的子控件的数量,还可以显示一个仅显示部分内容的子控件,该子控件显示的部分内容的尺寸可以保持一个固定值(即尺寸阈值)。这样,该仅显示部分内容的子控件可用于提示用户该布局容器中还有未显示的子控件。另外,保持尺寸阈值为固定值,可以避免因屏幕尺寸不同导致显示部分内容的子控件的尺寸不同,给用户造成参差不齐的混乱感。
一种可能的实现方式中,延伸能力的预设参数包括第一尺寸和第一间距;电子设备根据电子设备的设备参数和预设能力确定N个子控件的属性值,包括:根据第一布局容器在第一方向上的尺寸,N个子控件在第一方向上的尺寸,第一尺寸,以及第一间距,确定第一布局容器中显示N1个子控件,以及确定第N1+1个子控件显示的部分内容;电子设备根据N个子控件的属性值在第二界面中显示N个子控件,包括:电子设备在第二界面中显示N1个子控件以及第N1+1个子控件的部分内容,且相邻两个子控件的间距大于或等于第一间距。
其中,第一间距为间距阈值。第一尺寸为第N1+1个子控件显示的尺寸。由此,开发人员可以对第一布局容器中第一子控件之间的间距进行设置,避免第一子控件过于拥挤,或者出现内容重叠。
一种可能的实现方式中,延伸能力的预设参数还包括第二间距,第二间距大于第一间距;在根据第一布局容器在第一方向上的尺寸,N个子控件在第一方向上的尺寸,第一尺寸,以及第一间距,确定第一布局容器中显示N1个子控件,以及确定第N1+1个子控件显示的部分内容之前,该方法还包括:根据第一布局容器在第一方向上的尺寸,N个子控件在第一方向上的尺寸,以及第二间距,确定第一布局容器不能显示全部的N个子控件;减小相邻两个子控件之间的间距,且保持相邻两个子控件之间的间距不小于第一间距;在减小相邻两个子控件之间的间距的过程中,确定第一布局容器不能显示全部的N个子控件。
由此可见,开发人员可以设置第一子控件的默认间距,当第一布局容器的尺寸不足以显示全部的第一子控件时,还可以通过减小第一子控件之间的间距,尝试显示全部的第一子控件。当减小第一子控件之间的间距也不能显示全部的第一子控件后,可以显示不完全显示的子控件。
一种可能的实现方式中,根据第一布局容器在第一方向上的尺寸,N个子控件在第一方向上的尺寸,第一尺寸,以及第一间距,确定第一布局容器中显示N1个子控件,以及确定第N1+1个子控件显示的部分内容,包括:根据第一布局容器在第一方向上的尺寸,N个子控件在第一方向上的尺寸,第二间距,以及第一尺寸,确定第一布局容器中显示N2个子控件,N2个子控件中相邻两个子控件之间的间距为第三间距;其中,N2大于或等于N1,且小于N;若第三间距小于第一间距,则N2的数值减一;根据第一布局容器在第一方向上的尺寸、N2个子控件在第一方向上的尺寸,以及第一尺寸,调整第三间距;当调整后的第三间距不小于第一间距时,确定第一布局容器中显示N1个子控件,确定第N1+1个子控件显示的部分内容,确定相邻两个子控件之间的间距为第四间距,其中N1=N2,第四间距与调整后的第三间距的差值在1个像素之内。
换言之,当第一布局容器不能显示全部的第一子控件时,可以先根据默认间距、第一布局容器的尺寸、第一子控件的尺寸确定能够完全显示的第一子控件的数量N2,再调整相邻两个第一子控件之间的第三间距。若第三间距不满足间距阈值,则N2的数值减一,重新调整第三间距。如此重复,一直到第三间距能够满足间距阈值,则确定调整后的N2为第一布局容器能够完全显示的第一子控件的数量,并且确定第一子控件之间的间距。
另外,由于电子设备显示是以像素为单位的,故一般不能做到将剩余空间(第一布局容器的尺寸扣除内边距、第一子控件的尺寸之和等)严格意义的均分,即第三间距可能不是整数。因此,还可以对子控件之间的间距进行微调,以使得各个子控件之间的间距占满该剩余空间。微调后的间距与第三间距的差值在1个像素之内,具体微调方法可参考说明书相关内容。
一种可能的实现方式中,该方法还包括:接收到用户在第二界面上的第二操作;响应于第二操作,显示第三界面,第三界面显示第N1+2个子控件。
由于第二界面中没有显示第一布局容器中全部的第一子控件,故可以通过第二操作查看第二界面中未显示的第一子控件,例如第N1+2个第一子控件。
一种可能的实现方式中,预设能力为占比能力,第一布局文件指示在第一布局容器的第一方向上排列N个子控件,第一方向为水平方向或垂直方向;占比能力对应的预设参数包括N个子控件中的第一子控件的占比值;电子设备根据电子设备的设备参数和预设能力确定N个子控件的属性值,包括:电子设备根据设备参数确定第一布局容器在第一方向上的尺寸;根据第一布局容器在第一方向上的尺寸以及第一子控件的占比值,确定第一子控件在第一方向上的尺寸;电子设备根据N个子控件的属性值在第二界面中显示N个子控件,包括:电子设备在第二界面中显示第一子控件。其中,第一方向可以为第一布局容器的布局方向,也可以为用户指定的方向。
换言之,当电子设备运行该应用时,电子设备获取设备参数,并根据设备参数确定该应用的显示尺寸以及显示位置,进一步确定第一布局容器的尺寸等。然后根据设置的子控件的占比值和第一布局容器的尺寸计算子控件的尺寸,从而满足在不同屏幕参数的电子设备上的显示需求。可见,本方案的隐藏能力能实现具有不同屏幕规格的电子设备可以根据相同的布局设置呈现不同的显示效果,在减少开发人员的开发和维护的工作量的同时,满足各种类型电子设备的显示需求。
一种可能的实现方式中,占比能力对应的预设参数还包括N个子控件中的第二子控件的占比值;电子设备根据电子设备的设备参数和预设能力确定N个子控件的属性值,还包括:根据第一布局容器在第一方向上的尺寸,以及第二子控件的占比值,确定第二子控件在第一方向上的尺寸,第二子控件的占比值与第一子控件的占比值相同或不同;电子设备根据N个子控件的属性值在第二界面中显示N个子控件,还包括:电子设备根据N个子控件的属性值在第二界面中还显示第二子控件。
换言之,在第一布局容器中不同的子控件可以有不同的占比值,满足不同的显示需求。
一种可能的实现方式中,占比能力对应的预设参数还包括N个子控件中的第三子控件未设置占比值,或者,占比能力对应的预设参数不包括第三子控件的占比值,电子设备根据电子设备的设备参数和预设能力确定N个子控件的属性值,还包括:确定第一布局容器在第一方向上的剩余空间;第一布局容器在第一方向上的剩余空间为根据第一布局容器在第一方向上的尺寸、第一布局容器在第一方向上的内边距、第一布局容器中包含的设置有占比值的子控件的尺寸确定的;根据第一布局容器在第一方向上的剩余空间确定第三子控件在第一方向上的尺寸;电子设备根据N个子控件的属性值在第二界面中显示N个子控件,还包括:电子设备根据N个子控件的属性值在第二界面中还显示第三子控件。
可见,第一布局容器中可以有设置占比值的子控件,也可以有未设置占比值的子控件。可以先确定设置有占比值的子控件的尺寸,然后根据第一布局容器中的剩余空间确定未设置占比值的子控件的尺寸。
一种可能的实现方式中,第一子控件为布局容器类的控件,第一子控件包括设置占比值的第四子控件,且第一子控件的布局方向为第二方向,第二方向垂直于第一方向;电子设备根据电子设备的设备参数和预设能力确定N个子控件的属性值,还包括:电子设备根据设备参数确定第一子控件在第二方向上的尺寸;根据第一子控件在第二方向上的尺寸,以及第四子控件的占比值,确定第四子控件在第二方向上的尺寸;电子设备根据N个子控件的属性值在第二界面中显示N个子控件包括:电子设备在第一子控件中显示第四子控件。
换言之,一个开启占比能力的布局容器中嵌套另一个开启占比能力的布局容器的界面。
在具体实现中,可以针对文本控件、按钮控件、图片控件等所在的布局容器设置占比能力。当布局容器的宽度或高度发生变化时,可以自动根据布局容器的宽度或高度自适应改变文本控件、按钮控件或图片控件的宽度或高度,从而满足具有不同屏幕尺寸电子设备的显示需求。可见,本方案的占比能力能实现具有不同屏幕参数的电子设备可以根据相同的布局设置呈现不同的显示效果,在减少开发人员的开发和维护的工作量的同时,满足各种类型电子设备的显示需求。
一种可能的实现方式中,预设能力为均分能力,第一布局文件指示在第一布局容器的第一方向上排列N个子控件,N个子控件中每个子控件在第一方向上的尺寸以及第一布局容器在第一方向上的内边距;电子设备根据电子设备的设备参数和预设能力确定N个子控件的属性值,包括:电子设备根据设备参数确定第一布局容器在第一方向上的尺寸;根据第一布局容器在第一方向上的尺寸,N个子控件中每个子控件在第一方向上的尺寸以及第一布局容器在第一方向上的内边距,确定第一间距,第一间距为相邻两个子控件之间的间距,相邻两个子控件之间的间距相等;电子设备根据N个子控件的属性值在第二界面中显示N个子控件,包括:电子设备根据N个子控件的属性值在第二界面中显示N个子控件,且相邻两个子控件的间距为第一间距。
换言之,当电子设备运行该应用时,电子设备获取设备参数,并根据设备参数确定该应用的显示尺寸以及显示位置,进一步确定第一布局容器的尺寸等。然后根据第一布局容器的宽度/高度、第一布局容器的内边距、以及第一布局容器中各个子控件的宽度/高度,自适应地确定相邻子控件之间的间距。可见,本方案的均分能力能实现具有不同屏幕规格的电子设备可以根据相同的布局设置呈现不同的显示效果,在减少开发人员的开发和维护的工作量的同时,满足各种类型电子设备的显示需求。
一种可能的实现方式中,均分能力的预算参数包括第一布局容器对应的间距类型;间距类型为第一类型或第二类型;在确定第一间距之后,该方法还包括:根据第一方向,以及第一布局容器对应的间距类型,确定N个子控件中第一个子控件的位置;当第一方向为水平方向,且第一布局容器对应第一类型时,第一个子控件的左侧边缘与第一布局容器的左侧边缘的距离为零或第一布局容器的距左内边距;当第一方向为水平方向,且第一布局容器对应第二类型时,第一个子控件的左侧边缘与第一布局容器的左侧边缘的距离为根据第一布局容器的距左内边距和第一间距确定;当第一方向为垂直方向,且第一布局容器对应第一类型时,第一个子控件的上方边缘与第一布局容器的上方边缘的距离为零或第一布局容器的距上内边距;当第一方向为垂直方向,且第一布局容器对应第二类型时,第一个子控件的上方边缘与第一布局容器的上方边缘的距离为根据第一布局容器的距上内边距和第一间距确定。
由此可见,定义了两种不同类型的均分方法。其中,上述第一类型的均分方法,是指不需要为第一个子控件在布局方向上最靠近布局容器的一侧,以及最后一个子控件在布局方向上最靠近布局容器的一侧分配间距。上述第二类型的均分能力,是指需要为第一个子控件在布局方向上最靠近布局容器的一侧,以及最后一个子控件在布局方向上最靠近布局容器的一侧分配间距。由此满足用户不同的调整间距的需求。
一种可能的实现方式中,均分能力的预算参数还包括第一阈值,确定第一间距,包括:根据第一布局容器在第一方向上的尺寸,N个子控件中每个子控件在第一方向上的尺寸以及第一布局容器在第一方向上的内边距确定第一空间的尺寸;当第一布局容器对应第一类型时,将第一空间的尺寸平均分为N-1份,每一份的尺寸为第二间距;当第一布局容器对应第二类型时,将第一空间的尺寸平均分为N+1份,每一份的尺寸为第二间距;当第二间距大于第一阈值时,确定第一阈值为第一间距;当第二间距不大于第一阈值时,确定第二间距为第一间距。
由此可见,可以设置第一阈值用于约束子控件之间的调整后间距的范围,使得调整后的间距不大于第一阈值。
一种可能的实现方式中,在根据第一方向,以及第一布局容器对应的间距类型,确定N个子控件中第一个子控件的位置之后,该方法还包括:当确定第一阈值为第一间距后,根据N个子控件在第一布局容器中的对齐方式,调整第一个子控件在第一布局容器中的位置;其中,对齐方式为水平居中、左对齐、右对齐、垂直居中、上对齐和底对齐中任一项。
一种可能的实现方式中,均分能力的预算参数还包括第二阈值,该方法还包括:确定第一间距,包括:根据第一布局容器在第一方向上的尺寸,N个子控件中每个子控件在第一方向上的尺寸以及第一布局容器在第一方向上的内边距确定第一空间的尺寸;当第一布局容器对应第一类型时,将第一空间的尺寸平均分为N-1份,每一份的尺寸为第三间距;当第一布局容器对应第二类型时,将第一空间的尺寸平均分为N+1份,每一份的尺寸为第三间距;当第三间距小于第二阈值时,确定第二阈值为第一间距;当第三间距不小于第二阈值时,确定第三间距为第一间距。
由此可见,还可以设置第二阈值用于约束子控件之间的调整后间距的范围,使得调整后的间距不小于第二阈值。
一种可能的实现方式中,预设能力为隐藏能力,第一布局文件指示在第一布局容器的第一方向上排列N个子控件,N个子控件每个子控件在第一方向上的尺寸,以及第一布局容器在第一方向上的内边距;电子设备根据电子设备的设备参数和预设能力确定N个子控件的属性值,包括:电子设备根据设备参数确定第一布局容器在第一方向上的尺寸;当第一尺寸大于第二尺寸时,从N个子控件中确定M个子控件,其中M为小于N的整数,第一尺寸为根据N个子控件在第一方向上的尺寸确定的;第二尺寸为根据第一布局容器在第一方向上的尺寸以及第一布局容器在第一方向上的内边距确定的;电子设备根据N个子控件的属性值在第二界面中显示N个子控件,包括:电子设备根据N个子控件的属性值在第二界面中显示M个子控件。
换言之,当电子设备运行该应用时,电子设备获取设备参数,并根据设备参数确定该应用的显示尺寸以及显示位置,进一步确定第一布局容器的尺寸等。当布局容器的宽度或高度不足以显示全部的子控件时,可以自动确定隐藏布局容器中的部分子控件,从而满足具有不同屏幕尺寸电子设备的显示需求。可见,本方案的隐藏能力能实现具有不同屏幕规格的电子设备可以根据相同的布局设置呈现不同的显示效果,在减少开发人员的开发和维护的工作量的同时,满足各种类型电子设备的显示需求。
一种可能的实现方式中,M个子控件在第一方向上的尺寸之和小于或等于第二尺寸。
在现有技术中,当电子设备不能显示第一布局容器中的全部的子控件时,简单的截断超出第一布局容器尺寸的内容,可能造成部分子控件仅显示了部分内容,显示界面混乱。然而,本申请提供的方案中,第一布局容器中显示的M个子控件为内容完整的子控件,即为显示了M个子控件的全部内容,显示界面呈现整齐划一的效果。
一种可能的实现方式中,当第一尺寸大于第二尺寸时,从N个子控件中确定M个子控件,包括:当第一尺寸大于第二尺寸时,根据N个子控件的优先级从N个子控件中确定M个子控件。
一种可能的实现方式中,M个子控件的优先级均低于N个子控件中另N-M个子控件的优先级。
也就是说,可以通过设置子控件的优先级来设置第一布局容器中子控件的重要程度。这样,可以避免当第一布局容器中不能显示全部的子控件时,单一地隐藏或不显示排列在后的子控件。
一种可能的实现方式中,隐藏能力的预设参数包括N个子控件包括至少一个第一子控件、至少一个第二子控件,以及至少一个第三子控件,且第一子控件的优先级高于第二子控件的优先级,第二子控件的优先级高于第三子控件的优先级;当第一尺寸大于第二尺寸时,根据N个子控件的优先级从N个子控件中确定M个子控件,包括:当第一尺寸大于第二尺寸时,确定M个子控件不包括第一子控件;当第二子控件与第三子控件在第一方向上的尺寸之和小于或等于第二尺寸时,确定M个子控件包括第二子控件和第三子控件;当第二子控件与第三子控件在第一方向上的尺寸之和大于第二尺寸时,确定M个子控件不包括第一子控件和第二子控件;当第三子控件在第一方向上的尺寸之和小于或等于第二尺寸时,确定M个子控件包括第三子控件。
也就是说,当第一布局容器中不能显示全部的子控件时,按照子控件的隐藏优先级,从高到低的顺序,依次确定隐藏的子控件。
一种可能的实现方式中,隐藏能力的预设参数还包括N个子控件包括至少一个第一子控件、至少一个第二子控件,以及至少一个第三子控件,第一子控件的优先级高于第二子控件的优先级,第二子控件的优先级高于第三子控件的优先级;当第一尺寸大于第二尺寸时,根据N个子控件的优先级确定M个子控件,包括:确定M个子控件包括第三子控件;当第三子控件与第二子控件在第一方向上的尺寸之和小于或等于第二尺寸时,确定M个子控件还包括第二子控件;当第三子控件与第二子控件在第一方向上的尺寸之和大于第二尺寸时,确定M个子控件不包括第二子控件和第一子控件。
也就是说,当第一布局容器中不能显示全部的子控件时,按照子控件的隐藏优先级,从低到高的顺序,依次确定显示的子控件。
一种可能的实现方式中,在从N个子控件中确定M个子控件之后,该方法还包括:根据第二尺寸,以及M个子控件在第一方向上的尺寸之和确定M个子控件中相邻子控件之间的间距。
在确定布局容器中显示的子控件的数量后,进一步调整相邻子控件之间的间距,提升布局容器呈现更好的显示效果。
一种可能的实现方式中,M个子控件中相邻子控件之间的间距相等或不等。
一种可能的实现方式中,预设能力为拉伸能力,第一布局文件指示在第一布局容器的第二方向上排列N个子控件,拉伸能力对应的预设参数包括第一布局容器在第一方向上的第一阈值和/或第二阈值;其中第二方向与第一方向不同,第二阈值小于第一阈值;电子设备根据电子设备的设备参数和预设能力确定N个子控件的属性值,包括:电子设备根据设备参数确定第一布局容器在第一方向上的尺寸的初值;若初值大于第一阈值,确定第一布局容器在第一方向上的尺寸为第一阈值;或者,若初值小于第二阈值,确定第一布局容器在第一方向上的尺寸为第二阈值;根据第一布局容器在第一方向上的尺寸确定第一布局容器中的第一子控件在第一方向上的尺寸;其中,第一子控件为N个子控件中的一个;电子设备根据N个子控件的属性值在第二界面中显示N个子控件,包括:电子设备根据N个子控件的属性值在第二界面中显示第一子控件。
当电子设备运行该应用时,电子设备获取设备参数,并根据设备参数确定该应用的显示尺寸以及显示位置,进一步根据第一布局容器的父布局容器传递的尺寸约束等确定第一布局容器的在第一方向上的尺寸的初值,或者将布局文件中设置的尺寸确定第一布局容器在第一方向上的尺寸的初值。其中,第一阈值可以为布局文件中设置的第一布局容器在第一方向的最大尺寸值,第二阈值可以为布局文件中设置的第一布局容器在第一方向的最小尺寸值。
可见,在本申请中,在确定第一布局容器在第一方向上的尺寸的初值后,可以通过第一阈值和第二阈值对第一布局容器在第一方向上的尺寸进行调整,从而避免第一布局容器过度放大或缩小,进一步保证第一布局容器中的第一子控件能够呈现更好的显示效果。换言之,本申请提供了一种能够根据电子设备的设备参数适应性调整尺寸的布局容器,从而使得布局容器中的控件也可以根据电子设备的设备参数自适应调整。那么,可以为不同设备参数的电子设备设置一套布局文件,从而避免开发人员为不同设备参数的电子设备分别设计不同的布局文件。如此,本申请既减少开发人员的开发和维护的工作量的,又满足各种类型电子设备的显示需求。
需要说明的是,一般应用的安装包中包括逻辑代码文件、资源文件以及布局文件等多个类型的文件。其中,布局文件用于定义GUI图形用户界面(graphical userinterface,GUI)(即显示界面),即定义显示界面中控件和布局容器的结构层次关系,以及尺寸位置等属性。逻辑代码文件为显示界面中控件和布局容器背后的执行逻辑。资源文件包括显示界面中控件和布局容器中显示的内容,例如图片、视频、网址等。
一种可能的实现方式中,第一布局容器在第一方向上的尺寸越大,第一子控件在第一方向上的尺寸也越大。
也就是说,在不同设备参数的电子设备上,第一子控件在第一方向的尺寸会随着第一布局容器在第一方向上的尺寸的变大而变大,达到第一子控件在不同设备参数的电子设备上可以自适应调整尺寸。这样,开发人员可以为不同设备参数的电子设备设置一套布局文件。
一种可能的实现方式中,根据第一布局容器在第一方向上的尺寸确定第一布局容器中的第一子控件在第一方向上的尺寸,包括:确定第一子控件在第一方向上的尺寸与第一布局容器在第一方向上的尺寸相同;或者,确定第一子控件在第一方向上的尺寸为第一布局容器在第一方向上的尺寸减去第一布局容器在第一方向的内边距。
在一个示例中,第一子控件在第一方向上的尺寸与第一布局容器在第一方向上的尺寸相同,第一布局容器在第一方向上最大的呈现第一子控件,有利于第一子控件显示更多的内容。
在另一个示例中,还可以设置第一布局容器的内边距。这样,可以通过保证第一布局容器中第一子控件与第一布局容器的边缘保持一定距离,达到显示界面呈现杂志化的布局,如大留白,使得显示界面呈现杂志般的阅读感,提升用户的视觉体验。
一种可能的实现方式中,第一方向包括水平方向和/或垂直方向。
也就是说,开发人员可以为第一布局容器设置一个方向上的拉伸能力,也可以同时设置两个方向上的拉伸能力。例如,设置第一布局容器在水平方向的拉伸能力,则第一布局容器的宽度会随着屏幕的宽度的变化而变化。设置第一布局容器在垂直方向的拉伸能力,则第一布局容器的高度会随着屏幕的高度的变化而变化。设置第一布局容器在水平方向和垂直方向上的拉伸能力,则第一布局容器的宽度会随着屏幕的宽度的变化而变化,第一布局容器的高度会随着屏幕的高度的变化而变化。
一种可能的实现方式中,当第一方向为水平方向时,第一布局容器在第一方向上的内边距包括距左内边距和/或距右内边距;其中,距左内边距为布局容器中最左侧的控件的左边缘距离布局容器左边缘的距离;距右内边距为布局容器中最右侧的控件的右边缘距离布局容器右边缘的距离;当第一方向为垂直方向时,第一布局容器在第一方向上的内边距包括距上内边距和/或距下内边距;其中,距上内边距为布局容器中最上侧的控件的上边缘距离布局容器上边缘的距离;距下内边距为布局容器中最下侧的控件的下边缘距离布局容器下边缘的距离。
一种可能的实现方式中,N个子控件为文本控件、编辑控件、按钮控件、图片按钮控件中任一项。
第二方面、提供一种电子设备,包括:处理器、存储器和触摸屏,存储器、触摸屏与处理器耦合,存储器用于存储计算机程序代码,计算机程序代码包括计算机指令,当处理器运行存储器中计算机指令,以使得所述电子设备执行如上述第一方面及其中任一种可能的实现方式中所述的方法。
第三方面、提供一种装置,该装置包含在电子设备中,该装置具有实现上述第一方面及可能的实现方式中任一方法中电子设备行为的功能。该功能可以通过硬件实现,也可以通过硬件执行相应的软件实现。硬件或软件包括至少一个与上述功能相对应的模块或单元。例如,接收模块或单元、显示模块或单元、以及处理模块或单元等。
第四方面、提供一种计算机可读存储介质,包括计算机指令,当计算机指令在电子设备上运行时,使得电子设备执行如上述第一方面及其中任一种可能的实现方式中所述的方法。
第五方面、提供一种电子设备上的图形用户界面,所述电子设备具有显示屏、存储器、以及一个或多个处理器,所述一个或多个处理器用于执行存储在所述存储器中的一个或多个计算机程序,所述图形用户界面包括所述电子设备执行如上述第一方面及其中任一种可能的实现方式中所述的方法时显示的图形用户界面。
第六方面、提供一种计算机程序产品,该计算机程序产品包括计算机指令,当计算机指令在计算机上运行时,使得计算机执行如上述第一方面中及其中任一种可能的实现方式中所述的方法。
第七方面、提供一种芯片系统,包括处理器,当处理器执行指令时,处理器执行如上述第一方面中及其中任一种可能的实现方式中所述的方法。
可以理解地,上述各个方面所提供的电子设备、装置、计算机可读存储介质以及计算机程序产品、图形用户界面、芯片系统均应用于上文所提供的对应方法,因此,其所能达到的有益效果可参考上文所提供的对应方法中的有益效果,此处不再赘述。
附图说明
图1为本申请实施例提供的一种显示界面的结构示意图;
图2为本申请实施例提供的一种显示界面的自适应布局方法的过程示意图;
图3为本申请实施例提供的又一种显示界面的自适应布局方法的流程示意图;
图4为本申请实施例提供的一些显示界面布局文件的开发界面的示意图;
图5为本申请实施例提供的一种电子设备的结构示意图;
图6为本申请实施例提供的又一种电子设备的结构示意图;
图7为本申请实施例提供的又一种显示界面的布局方法的示意图;
图8为本申请实施例提供的一种具有延伸能力的布局容器在不同场景下的显示效果图;
图9为本申请实施例提供的又一种具有延伸能力的布局容器不同场景下的显示效果图;
图10A为本申请实施例提供的一种视图系统中测量方法的流程示意图;
图10B为本申请实施例提供的不同电子设备显示具有延伸能力的布局容器的效果图;
图11为本申请实施例提供的又一种应用界面自适应布局的方法的示意图;
图12为本申请实施例提供的一种具有占比能力的布局容器在不同场景下的显示效果图;
图13为本申请实施例提供的又一种具有占比能力的布局容器在不同场景下的显示效果图;
图14为本申请实施例提供的又一种具有占比能力的布局容器在不同场景下的显示效果图;
图15A为本申请实施例提供的又一种视图系统中测量方法的流程示意图;
图15B为本申请实施例提供的不同电子设备显示具有占比能力的布局容器的效果图;
图16为本申请实施例提供的又一种应用界面自适应布局的方法的示意图;
图17为本申请实施例提供的一种具有均分能力的布局容器在不同场景下的显示效果图;
图18为本申请实施例提供的又一种具有均分能力的布局容器在不同场景下的显示效果图;
图19为本申请实施例提供的又一种具有均分能力的布局容器在不同场景下的显示效果图;
图20为本申请实施例提供的又一种具有均分能力的布局容器在不同场景下的显示效果图;
图21A为本申请实施例提供的又一种视图系统中测量方法的流程示意图;
图21B为本申请实施例提供的不同电子设备显示具有均分能力的布局容器的效果图;
图22为本申请实施例提供的又一种应用界面自适应布局的方法的示意图;
图23为本申请实施例提供的一种具有隐藏能力的布局容器在不同场景下的显示效果图;
图24A为本申请实施例提供的又一种视图系统中测量方法的流程示意图;
图24B为本申请实施例提供的又一种视图系统中测量方法的流程示意图;
图25为本申请实施例提供的不同电子设备显示具有隐藏能力的布局容器的效果图;
图26为本申请实施例提供的又一种应用界面自适应布局的方法的示意图;
图27为本申请实施例提供的一种具有拉伸能力的布局容器在不同场景下的显示效果图;
图28为本申请实施例提供的又一种具有拉伸能力的布局容器在不同场景下的显示效果图;
图29为本申请实施例提供的又一种具有拉伸能力的布局容器在不同场景下的显示效果图;
图30A为本申请实施例提供的又一种视图系统中测量方法的流程示意图;
图30B为本申请实施例提供的不同电子设备显示具有拉伸能力的布局容器的效果图;
图31为本申请实施例提供的一些具有多个自适应布局能力的布局容器在不同场景下的显示效果图;
图32为本申请实施例提供的又一些具有多个自适应布局能力的布局容器在不同场景下的显示效果图;
图33为本申请实施例提供的又一些具有多个自适应布局能力的布局容器在不同场景下的显示效果图;
图34为本申请实施例提供的又一些具有多个自适应布局能力的布局容器在不同场景下的显示效果图;
图35为本申请实施例提供的又一些具有多个自适应布局能力的布局容器在不同场景下的显示效果图;
图36为本申请实施例提供的又一些具有多个自适应布局能力的布局容器在不同场景下的显示效果图;
图37为本申请实施例提供的又一些具有多个自适应布局能力的布局容器在不同场景下的显示效果图;
图38为本申请实施例提供的又一些具有多个自适应布局能力的布局容器在不同场景下的显示效果图;
图39为本申请实施例提供的一种芯片系统的结构示意图。
具体实施方式
在本申请实施例的描述中,除非另有说明,“/”表示或的意思,例如,A/B可以表示A或B;本文中的“和/或”仅仅是一种描述关联对象的关联关系,表示可以存在三种关系,例如,A和/或B,可以表示:单独存在A,同时存在A和B,单独存在B这三种情况。以下,术语“第一”、“第二”仅用于描述目的,而不能理解为指示或暗示相对重要性或者隐含指明所指示的技术特征的数量。由此,限定有“第一”、“第二”的特征可以明示或者隐含地包括一个或者更多个该特征。在本申请实施例的描述中,除非另有说明,“多个”的含义是两个或两个以上。在本申请实施例中,“示例性的”或者“例如”等词用于表示作例子、例证或说明。本申请实施例中被描述为“示例性的”或者“例如”的任何实施例或设计方案不应被解释为比其它实施例或设计方案更优选或更具优势。确切而言,使用“示例性的”或者“例如”等词旨在以具体方式呈现相关概念。
以Android系统为例进行说明。应用通过布局文件定义图形用户界面(graphicaluser interface,GUI)(即显示界面)。布局文件包括视图树,其中视图树包括控件和布局容器。
其中,控件是在GUI中呈现的元素,能够为用户提供一定的操作功能或用于显示一定内容。示例性的,控件具体可以包括文本控件,例如TextView控件、EditText控件等,也可以包括按钮控件,例如Button控件、ImageButton控件等,还可以包括图片控件,例如ImageView控件等,本申请实施例对此不做任何限制。
其中,布局容器,用于存放控件以及其他布局容器的布局结构。即,一个布局容器可以包括一个或多个控件,以及嵌套一个或多个布局容器。
以Andriod系统的显示界面为例进行说明。一般一个显示界面对应一个Activity,而一个Activity持有一个Window对象(其实例为PhoneWindow),该Window用来绘制各种控件。PhoneWindow作为Android系统最基本的窗口系统,持有顶层View对象DecorView(实质是一个ViewGroup)。DecorView为所有View和ViewGroup的根视图(ViewRoot),也称为根节点控件。DecorView包含ContentView(实质是一个ViewGroup),ContentView是各个应用自定义的视图,即应用的显示界面,ContentView也称为内容控件。ContentView包括一个或多个View,和/或,一个或多个ViewGroup。需要说明的是,在显示界面的过程中,电子设备是从根视图的performTraversals()方法开始,从上到下遍历整个视图树,每个View控制负责绘制自己,而ViewGroup还需要负责通知自己的子View进行绘制操作。可选的,DecorView还包含TitleView(标题控件),可用于自定义该显示界面的导航。
请参见图1,图1中(1)为一个闹钟界面10的示意图。该闹钟界面10对应一个DecorView。其中,DecorView包括View1(文本控件)、View2(图片控件)以及ViewGroup1。其中,ViewGroup1具体包括ViewGroup2、ViewGroup3以及View7(按钮控件)。ViewGroup2包括View3(文本控件)和View4(按钮控件)。类似的,ViewGroup3包括View5(文本控件)和View6(按钮控件)。其中,闹钟界面10中各个View和ViewGroup的层次结构关系可参考图1中(2)示出的视图树。
示例性的,开发人员可使用线性布局(LinearLayout)、表格布局(TableLayout)、相对布局(RelativeLayout)、层布局(FrameLayout)、绝对布局(AbsoluteLayout)或网格布局(GridLayout)等布局方式设计应用中每个显示界面内的View或ViewGroup,从而生成每个显示界面的布局文件,即layout文件。
换言之,开发人员可以在各个显示界面的布局文件中设置该显示界面中每个View以及ViewGroup的层次结构,以及属性值(例如尺寸(宽高)、位置等)。然后,将这些显示界面的布局文件打包在应用的安装包中,并将应用的安装包上架到应用市场。后续,电子设备可以从应用市场下载并安装应用的安装包。当在电子设备中运行某个应用时,电子设备通过获取该应用的布局文件,可按照该布局文件绘制相应显示界面,并呈现给用户。
需要注意的是,在一种方案中,这些显示界面的布局文件中,对该显示界面中包含的View和ViewGroup可以有确定的属性值。布局文件中一旦设置好显示界面中各个View和ViewGroup的属性值,显示界面中View或ViewGroup的尺寸以及位置是不变的。也就是说,开发人员在开发应用时,已经确定出每个显示界面呈现给用户时的样子。可以理解的是,当屏幕规格不同的电子设备在采用该布局文件绘制的显示界面是相同的,或者是简单地将整个显示界面进行缩放或放大。由于目前电子设备的屏幕规格各异,复用相同的显示界面常常出现显示效果差的情况。目前,一些应用的开发人员针对不同规格的显示屏设计不同的布局文件,并适配相应的逻辑等,开发和维护的工作量极大。并且,在应用的安装包中打包大量布局文件,造成应用的安装包过大,影响电子设备下载安装包的速度,以及安装后存储安装文件占据的空间。
在另一种技术方案中,针对屏幕尺寸大的电子设备,可以直接复用多个小尺寸电子设备的布局文件。例如,大屏幕尺寸是平板电脑,平板电脑的屏幕的尺寸为1280*800像素。小屏幕尺寸是手机,手机屏幕的尺寸为720*1080像素。那么,平板电脑在显示应用界面时,可以同时显示两个或两个以上窗口。其中每一个窗口使用手机对应的一个显示界面的布局文件。换言之,平板电脑在显示一个显示界面时,同时显示了相当于手机上显示的两个或两个以上的显示界面。比如,平板电脑的屏幕被平均划分为两个窗口,每一个窗口的大小可以为640*800像素。每一窗口用于显示一个手机的一个界面。显然平板电脑中一个窗口的宽高比为640:800(即4:5),手机界面的宽高比为720:1080(即2:3)。
需要注意的是,即便大尺寸的电子设备可以通过多窗口管理的方式复用多个小尺寸的电子设备的布局文件,但大尺寸电子设备上每一个窗口的宽高比与小尺寸的电子设备的宽高比大多数情况下不一致,因此,直接复用小尺寸的电子设备的布局文件,也可能不能呈现较好的界面布局。
本申请实施例提供一种显示界面的布局方法,为应用的一个显示界面开发一套布局文件,该布局文件适用于各种不同屏幕规格的电子设备。这是因为,电子设备在运行该应用时,可以根据电子设备的屏幕参数自适应的调整显示界面的布局,既有利于提升不同屏幕规格的电子设备的显示效果,又减轻开发人员开发和维护的成本。其中,屏幕参数包括屏幕规格(尺寸)参数以及屏幕状态参数(例如横竖屏,折叠屏的折叠状态)等。
另外,类型相同或相似的电子设备,即便具有不同屏幕参数,但多数的使用场景(与用户的交互方式、具有的功能控件等)相似,故呈现给用户的显示界面往往是相似的。故针对同一个应用设计一套布局文件,可以满足应用开发人员的设计初衷。而具有不同屏幕参数的电子设备根据布局文件中的View和ViewGroup的自适应布局能力,自适应调整显示界面中View和ViewGroup的尺寸和/或位置,弱化不同电子设备的显示限制,有利于用户在不同的电子设备之间切换显示,满足用户不同场景下的显示需求。例如,在分布式显示场景,用户可以将一个显示界面中不同功能模块对应的显示界面发送到不同的电子设备上进行显示。又例如,用户会根据当前的应用场景(驾驶场景、家居场景、健身场景等),切换不同的电子设备用于显示显示界面。
示例性的,应用的开发人员在设计应用中各个显示界面的布局文件时,可以为显示界面中包含的View和ViewGroup设置本申请实施例扩展的属性值。这些扩展的属性值并不唯一确定View或ViewGroup的尺寸和位置,而是约束这些View或ViewGroup,与显示界面中其他View(或其他ViewGroup)的相对关系(例如相对大小、相对位置关系)。也就是说,开发人员在开发应用时,并没有确定出每个显示界面呈现给用户时的样子。后续,当电子设备在采用该布局文件绘制显示界面时,获取该电子设备自身的屏幕参数,确定该显示界面的显示参数(例如该显示界面在电子设备屏幕中的显示位置、显示大小等),根据布局文件中该显示界面中包含的各个View和ViewGroup的层级结构以及扩展属性值,以及电子设备的屏幕参数布局显示界面中每个View和ViewGroup的尺寸以及位置等。例如,电子设备在运行应用时,根据电子设备的屏幕参数确定出每个显示界面呈现给用户时的样子。可以理解是,具有不同屏幕参数的电子设备根据同一个布局文件绘制的显示界面不同。
在又一些实施例中,本申请实施例提供的方案也可以与大尺寸屏幕复用小尺寸屏幕的布局文件的方案结合使用。例如,大尺寸屏幕的电子设备可以通过多窗口管理的方式复用多套小尺寸的电子设备的布局文件。需要注意的是,这里多套小尺寸的电子设备的布局文件是分别对应不同的显示界面。换言之,这里应用的同一个显示界面仍然对应一套布局文件。
那么,大尺寸屏幕的电子设备在显示每一个窗口中的显示界面时,根据该窗口对应的显示界面的布局文件,以及该窗口的尺寸大小,自适应调整该显示界面中每个View和ViewGroup的尺寸以及位置等。换言之,即便大尺寸屏幕的电子设备上每一个窗口的宽高比与小尺寸屏幕的电子设备的宽高比不一致,通过本申请实施例提供的自适应布局方案,也能使得大尺寸屏幕的电子设备中每一个窗口显示的界面呈现较好的显示效果。
如图2所示,在开发阶段,开发人员在开发者设备(例如电脑)上,使用相关开发工具为应用的每一个显示界面开发一套布局文件(该布局文件中包括设置有本申请扩展的属性值的View和ViewGroup),并打包在该应用的安装包中。将应用安装包上传到服务器侧(云端)。后续,具有不同屏幕参数的电子设备(例如不同类型的电子设备或相同类型不同型号的电子设备)均可以从服务器侧下载该应用安装包,并运行该应用安装包。可见,这些不同的电子设备分别获取自身的屏幕参数,以及确定该应用的显示界面的显示参数(例如该应用的显示界面在各自屏幕中的显示位置、显示大小等)。然后,结合该应用的显示参数和上述应用安装包中的布局文件布局该应用的显示界面中的View和ViewGroup,并显示相应的显示界面。例如,手机绘制如1B中所示的界面21,智能手表绘制如1B中所示的界面22,智慧屏绘制如1B中所示的界面23。
需要说明的是,本文中将具有扩展属性的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)数量的能力。延伸能力包括一般延伸能力和扩展的延伸能力。其中,一般延伸能力,是指当布局容器的尺寸发生变化时,根据布局容器的尺寸、布局容器中子控件的尺寸、以及默认间距确定布局容器中完全显示的子控件的数量。其中,完全显示的子控件,也称为完整显示的子控件等,是指布局容器中显示该子控件的全部内容。扩展的延伸能力,是指布局容器中还可以显示不完全显示的子控件。其中,不完全显示的子控件,也称为不完整显示的子控件,部分显示的子控件等,是指布局容器中显示该子控件的部分内容。例如,可以设置布局容器中尺寸阈值。那么,当布局容器的尺寸发生变化时,根据布局容器中的子控件的尺寸、布局容器的尺寸以及尺寸阈值确定布局容器中完全显示的子控件,以及不完全显示的子控件显示部分内容的尺寸。
需要说明的是,延伸能力包括水平方向的延伸能力和垂直方向的延伸能力。其中水平方向的延伸能力,是指针对水平排列的子控件,根据布局容器宽度来确定显示的子控件的数量。垂直方向的延伸能力,是指针对垂直排列的子控件,根据布局容器的高度来确定显示的子控件的数量。本文是以水平方向的延伸能力为例进行说明的,垂直方向的延伸能力可以参考水平方向的延伸能力的实现方式,本文将不做赘述。
如图3所示,为本申请实施例中实现View或ViewGroup的自适应布局能力的大体流程。首先,开发人员使用开发工具开发应用界面。在开发过程中,可以从View和ViewGroup的能力库(包括Android原生能力和本申请扩展的自适应布局能力)中选择需要使用的能力得到布局文件,完成应用界面的开发,生成应用的安装包。而后,电子设备可以从应用市场下载该应用安装包,并安装运行。电子设备在运行该应用时,根据布局文件以及电子设备的环境(例如屏幕参数)完成自动布局,绘制相应的应用界面,即为用户看到的界面。
下面,对本申请中实现View或ViewGroup的自适应布局能力的具体方案进行说明。
开发人员在开发应用时,使用集成开发环境(Integrated DevelopmentEnvironment,IDE)工具开发应用。其中,IDE工具集成了代码编写功能、分析功能、编译功能、调试功能等一体化的开发软件服务套。例如,典型的Android系统的IDE工具包括Android Studio、DevEco Studio中任一种。
如图4中(1)所示,为开发人员开发应用时的开发界面20的示例。开发界面20中包括应用目录树21、应用依赖包22、以及应用显示界面1的开发界面,应用显示界面1的开发界面包括布局文件(如111.xml)23以及JAVA源码(如222.java)24。
其中,应用目录树21包括应用名称、编译依赖包、应用程序包以及应用源码。开发人员可以通过应用目录树21快速开启相应的文件,方便开发人员进行编辑。例如,开发人员可以通过应用源码中的JAVA源码或布局文件,快速开启JAVA源码文件或布局文件,开发人员可以对JAVA源码文件或布局文件进行编辑,编辑应用中每个显示界面的布局。
需要说明的是,在对显示界面的布局进行编辑之前,需要添加开发应用时依赖的库。具体的,可以在应用依赖包22中添加依赖的库。例如,以开发Android系统上的应用为例,需要依赖扩展库(External Libs)以及Android API库。
在添加依赖的库后,开发人员可以通过在JAVA源码24中调用相应的API接口的方式设置应用中每个显示界面包含的View以及ViewGroup的层级结构、属性值、各个View的显示资源等信息。或者,开发人员也可以通过在布局文件23中设置应用中每个显示界面包含的View以及ViewGroup的层级结构、属性值、各个View的显示资源等信息。
需要说明的是,本申请实施例提供的View和ViewGroup具有自适应布局的能力,除了要依赖Android系统基本的库(External Libs、Android API库)外,那么还需要依赖本申请扩展的库,例如自适应布局属性包。在一种具体实现中,该自适应布局属性包包括View和ViewGroup各个自适应布局能力的声明,各个自适应布局能力调用的接口信息,以及各个自适应布局能力对应的预设算法(其中预设算法可以包括针对设置有各个自适应布局能力的布局容器进行布局时的测量流程等)。那么,开发人员在开发应用时,使用各个自适应布局能力的声明,或者各个自适应布局能力调用的接口信息等设计应用的布局文件。也就是说,在该布局文件中包括有被设置为具有自适应布局能力的View或ViewGroup。开发人员将设计好的布局文件、各个自适应布局能力对应的预设算法,以及应用所需的其他程序代码和资源打包在应用的安装包里。在另一种具体实现中,开发人员使用各个自适应布局能力的声明,或者各个自适应布局能力调用的接口信息设计应用的布局文件,将设计好的应用的布局文件、以及应用所需的其他程序代码和资源打包在应用的安装包里。在该示例中,后续安装该应用的安装包的电子设备需要具备支持本申请实施例提供的各个自适应布局能力,例如预先安装有各个自适应布局能力对应的算法模块。
换言之,在一个具体实施例中,开发人员打包的应用安装包里包括上述布局文件、布局文件中设置的自适应布局能力对应的预设算法。在另一个具体实施例中,开发人员打包的应用安装包里包括上述布局文件,但可以不包括上述布局文件中设置的自适应布局能力对应的预设算法。在该实施例中,后续运行该应用安装包的电子设备预装上述布局文件中设置的自适应布局能力对应的预设算法模块。例如,电子设备的预装的操作系统包含该自适应布局能力对应的预设算法模块,或者电子设备可以从服务器(例如提供自适应布局能力的服务器,或者电子设备的服务器)处下载并安装该自适应布局能力对应的预设算法模块等。
当电子设备下载并安装该应用的安装包后,且运行该应用时,可以根据各个自适应布局能力调用的接口获取自适应布局能力的View或ViewGroup的属性值,以及调用各个自适应布局能力测量布局时对应的处理流程完成测量和布局,最后绘制显示界面。其中,各个自适应布局能力调用的接口,各个自适应布局能力对应的处理流程(例如,各个自适应布局能力对应的预设算法)将在后面介绍电子设备的处理流程时进行详细说明。
例如,如图4中(1)所示,开发人员可以通过控件25添加自适应布局属性包。如图4中(2)所示的开发界面27,其中应用依赖包中新增自适应布局属性包26。
从布局文件23中可以看出:“android:”引导的为Android系统原生的View或ViewGroup的属性值。“app:”引导的为本申请扩展的View或ViewGroup属性值,即具有自适应布局能力的View或ViewGroup的属性值。或者,从JAVA源码24中可以看出开发人员调用的自适应布局能力对应的API接口,例如setAttr1(),getAttr1(),setAttr2(),getAttr2()。
而后,开发人员使用IDE工具将所开发应用的源代码、资源(包括布局文件)、依赖的库等打包成安装包(例如APK文件)。即,开发人员完成该应用的开发工作。而后,应用的安装包上架到应用市场。用户可以使用不同的电子设备上下载并安装该应用。需要说明的是,具有不同屏幕参数的电子设备使用相同的布局文件绘制该应用的显示界面。
示例性的,本申请实施例中电子设备例如可以为手机、平板电脑、个人计算机(personal computer,PC)、个人数字助理(personal digital assistant,PDA)、上网本、可穿戴电子设备(如智能手环、智能手表)、增强现实技术(augmented reality,AR)设备、虚拟现实(virtual reality,VR)设备、车载设备、智慧屏、智能汽车、智能音响等,本申请对该电子设备的具体形式不做特殊限制。
图5示出了电子设备100的结构示意图。可以理解的是,本发明实施例示意的结构并不构成对电子设备100的具体限定。在本申请另一些实施例中,电子设备100可以包括比图示更多或更少的部件,或者组合某些部件,或者拆分某些部件,或者不同的部件布置。图示的部件可以以硬件,软件或软件和硬件的组合实现。
电子设备100可以包括处理器110,外部存储器接口120,内部存储器121,通用串行总线(universal serial bus,USB)接口130,充电管理模块140,电源管理模块141,电池142,天线1,天线2,移动通信模块150,无线通信模块160,音频模块170,扬声器170A,受话器170B,麦克风170C,耳机接口170D,传感器模块180,按键190,马达191,指示器192,摄像头193,显示屏194,以及用户标识模块(subscriber identification module,SIM)卡接口195等。
处理器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的等待时间,因而提高了系统的效率。
内部存储器121可以用于存储计算机可执行程序代码,所述可执行程序代码包括指令。内部存储器121可以包括存储程序区和存储数据区。其中,存储程序区可存储操作系统,至少一个功能所需的应用程序(比如声音播放功能,图像播放功能等)等。存储数据区可存储电子设备100使用过程中所创建的数据(比如音频数据,电话本等)等。此外,内部存储器121可以包括高速随机存取存储器,还可以包括非易失性存储器,例如至少一个磁盘存储器件,闪存器件,通用闪存存储器(universal flash storage,UFS)等。处理器110通过运行存储在内部存储器121的指令,和/或存储在设置于处理器中的存储器的指令,执行电子设备100的各种功能应用以及数据处理。
外部存储器接口120可以用于连接外部存储卡,例如Micro SD卡,实现扩展电子设备100的存储能力。外部存储卡通过外部存储器接口120与处理器110通信,实现数据存储功能。例如将音乐,视频等文件保存在外部存储卡中。
充电管理模块140用于从充电器接收充电输入。其中,充电器可以是无线充电器,也可以是有线充电器。在一些有线充电的实施例中,充电管理模块140可以通过USB接口130接收有线充电器的充电输入。在一些无线充电的实施例中,充电管理模块140可以通过电子设备100的无线充电线圈接收无线充电输入。充电管理模块140为电池142充电的同时,还可以通过电源管理模块141为电子设备供电。
电源管理模块141用于连接电池142,充电管理模块140与处理器110。电源管理模块141接收电池142和/或充电管理模块140的输入,为处理器110,内部存储器121,显示屏194,摄像头193,和无线通信模块160等供电。电源管理模块141还可以用于监测电池容量,电池循环次数,电池健康状态(漏电,阻抗)等参数。在其他一些实施例中,电源管理模块141也可以设置于处理器110中。在另一些实施例中,电源管理模块141和充电管理模块140也可以设置于同一个器件中。
电子设备100的无线通信功能可以通过天线1,天线2,移动通信模块150,无线通信模块160,调制解调处理器以及基带处理器等实现。其中,移动通信模块150可以提供应用在电子设备100上的包括2G/3G/4G/5G等无线通信的解决方案。无线通信模块160可以提供应用在电子设备100上的包括无线局域网(wireless local area networks,WLAN)(如无线保真(wireless fidelity,Wi-Fi)网络),蓝牙(bluetooth,BT),全球导航卫星系统(globalnavigation satellite system,GNSS),调频(frequency modulation,FM),近距离无线通信技术(near field communication,NFC),红外技术(infrared,IR)等无线通信的解决方案。
在一些实施例中,电子设备100的天线1和移动通信模块150耦合,天线2和无线通信模块160耦合,使得电子设备100可以通过无线通信技术与网络以及其他设备通信。所述无线通信技术可以包括全球移动通讯系统(global system for mobile communications,GSM),通用分组无线服务(general packet radio service,GPRS),码分多址接入(codedivision multiple access,CDMA),宽带码分多址(wideband code division multipleaccess,WCDMA),时分码分多址(time-division code division multiple access,TD-SCDMA),长期演进(long term evolution,LTE),BT,GNSS,WLAN,NFC,FM,和/或IR技术等。所述GNSS可以包括全球卫星定位系统(global positioning system,GPS),全球导航卫星系统(global navigation satellite system,GLONASS),北斗卫星导航系统(beidounavigation satellite system,BDS),准天顶卫星系统(quasi-zenith satellitesystem,QZSS)和/或星基增强系统(satellite based augmentation systems,SBAS)。
电子设备100通过GPU,显示屏194,以及应用处理器等实现显示功能。电子设备100可以通过ISP,摄像头193,视频编解码器,GPU,显示屏194以及应用处理器等实现拍摄功能。电子设备100可以通过音频模块170,扬声器170A,受话器170B,麦克风170C,耳机接口170D,以及应用处理器等实现音频功能。例如音乐播放,录音等。
按键190包括开机键,音量键等。按键190可以是机械按键。也可以是触摸式按键。电子设备100可以接收按键输入,产生与电子设备100的用户设置以及功能控制有关的键信号输入。马达191可以产生振动提示。马达191可以用于来电振动提示,也可以用于触摸振动反馈。例如,作用于不同应用(例如拍照,音频播放等)的触摸操作,可以对应不同的振动反馈效果。作用于显示屏194不同区域的触摸操作,马达191也可对应不同的振动反馈效果。不同的应用场景(例如:时间提醒,接收信息,闹钟,游戏等)也可以对应不同的振动反馈效果。触摸振动反馈效果还可以支持自定义。指示器192可以是指示灯,可以用于指示充电状态,电量变化,也可以用于指示消息,未接来电,通知等。SIM卡接口195用于连接SIM卡。
其中传感器模块180可以包括触摸传感器。触摸传感器,也称“触控器件”。触摸传感器可以设置于显示屏194,由触摸传感器与显示屏194组成触摸屏,也称“触控屏”。触摸传感器用于检测作用于其上或附近的触摸操作。触摸传感器可以将检测到的触摸操作传递给应用处理器,以确定触摸事件类型。可以通过显示屏194提供与触摸操作相关的视觉输出。在另一些实施例中,触摸传感器也可以设置于电子设备100的表面,与显示屏194所处的位置不同。
图6是本发明实施例的电子设备100的软件结构框图。
分层架构将软件分成若干个层,每一层都有清晰的角色和分工。层与层之间通过软件接口通信。在一些实施例中,将Android系统分为四层,从上至下分别为应用程序层,应用程序框架层,安卓运行时(Android runtime)和系统库,以及内核层。
应用程序层可以包括一系列应用程序包。如图6所示,应用程序包可以包括图库应用、时钟应用等。需要注意的是,这里图库应用或时钟应用是采用上述应用安装包安装的应用,即图库应用、时钟应用等对应的布局文件中包含设置有上述自适应布局能力的View或ViewGroup。
应用程序框架层为应用程序层的应用程序提供应用编程接口(applicationprogramming interface,API)和编程框架。应用程序框架层包括一些预先定义的函数。如图6所示,应用程序框架层可以包括活动管理系统(Activity Manager System,AMS)、资源管理器(Resource Manager)、窗口管理系统(Windows Manager System,WMS)(图中未示出)以及视图系统(View System)。
其中,AMS,用于控制应用生命周期和活动栈的所有方面。资源管理器,用于提供对非代码嵌入资源的访问,如字符串,颜色设置和用户界面布局。WMS,用于获取显示屏大小,判断是否有状态栏,锁定屏幕,截取屏幕等。视图系统,用于提供视图集合,用于创建应用程序用户界面。
具体的,在应用(例如时钟应用)启动后,由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绘图的绘图引擎。
内核层是硬件和软件之间的层。内核层至少包含显示驱动等。
电子设备100在安装完上述应用后,电子设备100的内部存储器121中存储有该应用各个显示界面的布局文件。当电子设备100检测到运行该应用的操作时,电子设备100启动该应用,并根据各个显示界面的布局文件开始绘制该应用的显示界面。
以搭载Android系统的电子设备100,运行时钟应用为例进行说明。
请参见图7,显示界面701为电子设备100(例如具体是手机)显示的主屏幕界面。响应于检测到用户在显示界面701上操作时钟应用的图标702,手机启动时钟应用,并绘制时钟应用的首页703。其中,首页703中的控件704所在的布局容器为具有延伸能力。控件704会跟随布局容器的变化而变化。其中,时钟应用的首页可以理解为时钟应用运行后显示的第一个界面。
还需要说明的是,这里是以开启应用显示首页为例进行说明的。在开启该应用后,响应于用户的操作,手机显示其他界面(非首页)时也适用于本申请提供的方法。
具体的,在启动时钟应用后,手机会创建该应用对应的Activity,即主Activity,然后,利用Activity中的attach()方法生成PhoneWindow实例。在PhoneWindow实例中创建DecroView,并获取电子设备的屏幕参数确定PhoneWindow以及DecroView的尺寸以及位置(四个顶点的位置,即上下左右边框的位置)。而后,调用Window的setContentView()方法的inflate流程,读取该时钟应用的布局文件。该布局文件包括时钟应用各个显示界面(例如时钟应用的首页)包含的View和ViewGroup,这些View和ViewGroup的层次结构,以及这些View和ViewGroup具有的属性。手机调用相应的接口,写入这些View和ViewGroup的各个属性值。并根据布局文件中视图树的层次结构,从根部逐级确定DecroView中每个ViewGroup以及每个View的尺寸以及位置。也就是说,DecroView中的每一个View都是根据父布局容器传递过来的尺寸约束以及自身的配置(即配置的属性值)计算自身的尺寸以及位置。而后,手机绘制所有的View,即得到时钟应用的首页。
需要注意的是,这里这些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的Android系统原生的属性进行布局的过程均可参考现有技术相关内容,这里不再赘述。
下文,针对本申请实施例扩展的每一个自适应布局能力,详细说明开发人员如何设计包含自适应布局能力的View或ViewGroup的布局文件,以及电子设备运行应用时根据布局文件实现自适应布局的方法。
一)延伸能力
开发人员在开发应用时,添加自适应布局属性包的依赖后,可以在显示界面中设置具有延伸能力的ViewGroup。具体的,开发人员在编辑显示界面的布局文件时,可以通过在布局文件(例如xml文件)中设置ViewGroup的延伸能力相关的属性值,或者在JAVA源码文件中通过添加调用接口的方式来设置ViewGroup的延伸能力相关的属性值。
如表一所示,为与延伸能力相关的属性示例。
表一
需要说明的是,开发人员可以设置布局容器的属性时,通过一般延伸能力使能开启该布局容器的一般延伸能力,以及设置布局容器中子控件的默认间距。还可以通过扩展延伸能力使能开启布局容器中显示的最后一个子控件显示部分内容的能力。显示部分内容的子控件,可用于提示用户当前布局容器中还有未显示的子控件或者有未完全显示的子控件,便于用户通过执行相应的操作,查看未显示的子控件。进一步的,还可以设置尺寸阈值,以及布局容器中子控件的间距阈值。后续,电子设备运行该应用,并绘制该子控件时,会根据布局容器的尺寸,以及子控件的尺寸阈值、间距阈值等确定显示子控件的数量,以及调整子控件之间的间距等。
以下,结合附图详细说明延伸能力相关各个属性的含义,以及布局容器和子控件的显示效果。
一些实施例中,开发人员可以设置布局容器的一般延伸能力使能打开,并设置布局容器的默认间距。那么,电子设备根据布局容器的宽度、包含的各个子控件的宽度、以及默认间距确定布局容器实际能够完整显示的子控件的数量。
例如,设置某个布局容器中包括水平排列的5个子控件,分别为子控件A至子控件E。
如图8中(1)所示,为电子设备1显示的布局容器的效果图。此时,由于电子设备1显示的布局容器的宽度≥布局容器中子控件宽度之和+默认间距*(子控件数量-1)。因此,电子设备1上的布局容器可以水平显示全部的子控件(子控件A至子控件E),且子控件之间保持默认间距。此时,子控件A至子控件E为完整显示。
如图8中(2)所示,电子设备2显示的布局容器的效果图。此时,由于电子设备2显示的布局容器的宽度<布局容器中子控件宽度之和+默认间距*(子控件数量-1)。因此,电子设备2上的布局容器不能完整显示全部的子控件。因此,电子设备2可以根据实际的布局容器的宽度、子控件的宽度和默认间距,确定电子设备2上能够完整显示的子控件的数量。比如,电子设备2上布局容器一次最多能完整显示4个子控件,分别为子控件A至子控件D,且子控件之间保持默认间距。此时,子控件A至子控件D为完整显示。
需要说明的是,布局容器支持滚动查看,也就是说,用户可以通过操作布局容器查看当前未显示在屏幕上的其他子控件。例如,响应于用户在电子设备2布局容器的位置上执行向左滑动的操作,电子设备2显示如图8中(3)所示的界面,该界面中显示出子控件E。可以看出,此时电子设备2的布局容器中也最多能完整显示4个子控件。
在具体实现中,可以针对图片控件、按钮控件等所在的布局容器设置延伸能力。当布局容器的宽度发生变化时,可以自动根据布局容器的宽度确定显示的图片控件或按钮控件的数量,从而满足具有不同屏幕尺寸电子设备的显示需求。可见,本方案的一般延伸能力能实现具有不同屏幕参数的电子设备可以根据相同的布局设置呈现不同的显示效果,在减少开发人员的开发和维护的工作量的同时,满足各种类型电子设备的显示需求。
在另一些实施例中,开发人员还可以设置布局容器的扩展延伸能力使能打开,设置尺寸阈值、以及间距阈值等属性。那么,电子设备根据布局容器的宽度,各个子控件的宽度,以及默认间距确定布局容器是否能够完整显示全部的子控件。若不能完整显示全部的子控件,则减小默认间距直至达到间距阈值。若减小为间距阈值时,仍不能完整显示全部的子控件,则根据布局容器的实际尺寸、各个子控件的宽度以及尺寸阈值确定实际能够完整显示的子控件的数量。
例如,设置某个布局容器中包括水平排列的5个子控件,分别为子控件A至子控件E。
如图9中(1)所示,为电子设备1显示的布局容器的效果图。此时,由于电子设备1显示的布局容器的宽度≥布局容器中子控件宽度之和+默认间距*(子控件数量-1)。因此,电子设备1上的布局容器可以水平显示全部的子控件(子控件A至子控件E),且子控件之间保持默认间距。此时,子控件A至子控件E为完整显示。
或者,虽然电子设备1显示的布局容器的宽度<布局容器中子控件宽度之和+默认间距*(子控件数量-1),但电子设备1显示的布局容器的宽度≥布局容器中子控件宽度之和+间距阈值*(子控件数量-1)。电子设备1也可以调整子控件之间的间距,使得电子设备1的布局容器可以完整显示全部的子控件(子控件A至子控件E),且子控件之间的间距大于或等于间距阈值。
如图9中(2)所示,为电子设备2显示的布局容器的效果图。此时,由于电子设备2显示的布局容器的宽度<布局容器中子控件宽度之和+间距阈值*(子控件数量-1)。因此,电子设备2上的布局容器不能完整显示全部的子控件。那么,电子设备需要显示部分内容的子控件。电子设备2可以根据布局容器的实际尺寸、各个子控件的宽度、尺寸阈值、以及间距阈值,确定布局容器能够完整显示的子控件的数量。比如,电子设备2确定布局容器一次最多能显示4个完整的子控件(分别为子控件A至子控件D)以及1个子控件的部分内容(子控件E的部分内容),且子控件之间的间距大于或等于间距阈值。
如图9中(3)所示,为电子设备3显示的布局容器的效果图。此时,由于电子设备3显示的布局容器的宽度<布局容器中子控件宽度之和+间距阈值*(子控件数量-1)。因此,电子设备3上的布局容器不能显示全部的子控件。那么,电子设备需要显示仅显示部分内容的子控件。电子设备3可以根据布局容器的实际尺寸、各个子控件的宽度、尺寸阈值、以及间距阈值,确定布局容器能够显示的子控件的数量。比如,电子设备3确定布局容器一次最多能显示3个完整的子控件(分别为子控件A至子控件C)以及1个子控件的部分内容(子控件D的部分内容),且子控件之间的间距大于或等于间距阈值。
需要说明的是,布局容器支持滚动查看,也就是说,用户可以通过操作布局容器查看当前未显示在屏幕上的其他子控件。例如,响应于用户在电子设备3布局容器的位置上执行向左滑动的操作,电子设备3显示如图9中(4)所示的界面,该界面中显示出子控件D的全部内容以及子控件E的部分内容。
由上可见,本申请实施例不仅可以根据布局容器的变化自适应减少显示的子控件的数量,还可以显示一个仅显示部分内容的子控件,该子控件显示的部分内容的尺寸可以保持一个固定值(即尺寸阈值)。这样,该仅显示部分内容的子控件可用于提示用户该布局容器中还有未显示的子控件。另外,保持尺寸阈值为固定值,可以避免因屏幕尺寸不同导致显示部分内容的子控件的尺寸不同,给用户造成参差不齐的混乱感。
以下,给出一个布局文件(xml文件)的示例,该布局文件中设置有开启延伸能力的布局容器,且该布局容器中包括四个子控件,分别为四个线性布局容器,其中每一个线性布局容器中分别存放一个图片控件和一个文本控件。需要说明的是,由于延伸能力需要支持滚动查看,因此需要将整个具有延伸能力的布局容器放到ScrollView中,水平延伸需要放置到HorizontalScrollView中,并且需要将layout_width配置为match_parent。垂直延伸能力类推。
上述实施例,是开发人员通过在布局文件(例如xml文件)中设置View或ViewGroup的延伸能力相关的属性值,设计显示界面自适应布局的方案。也可以通过在JAVA源码文件中通过添加调用接口的方式来设置View或ViewGroup的延伸能力相关的属性值。
如表二所示,为设置View或ViewGroup的延伸能力相关的属性值相对应的接口的示例。
表二
以上详细介绍了延伸能力的含义。开发人员可以根据应用中每个显示界面的布局设计,结合延伸能力、其他自适应布局能力以及基本的布局能力(例如Android原生的属性)配置好布局文件,将布局文件与应用的其他的源代码以及资源等打包成安装包(例如APK文件),并上架到应用市场。电子设备从应用市场下载该安装包,并安装该应用。以下,详细说明电子设备运行该应用时,如何根据上述布局文件实现自适应布局的方案。
具体的,手机针对布局文件中的每一个布局容器执行如图10A所示测量流程,该方法具体包括:
S1001、读取布局容器的布局参数。
从布局文件(例如xml文件)中读取该布局容器的布局参数,该布局容器的布局参数包括布局容器在显示界面中的层次关系(包括该布局容器的父布局容器、该布局容器的子控件等)、该布局容器的尺寸和位置(该尺寸和位置不一定是固定值,可以是一个约束条件)、布局容器的内边距、布局容器中包含的子布局容器以及控件的尺寸以及间距等布局信息。
示例性的,这里的布局容器可以是显示界面中任一个层次的布局容器。例如,这里的布局容器可以是该显示界面较上层的布局容器,例如为图1中所述的内容控件。那么,电子设备获取自身的屏幕参数(包括屏幕类型、屏幕尺寸、屏幕状态等),用于确定该内容控件的显示大小(即尺寸)和显示位置等。又例如,这里的布局容器也可以是该显示界面中位于中间层次的布局容器,例如为控件组3。那么,电子设备根据自身的屏幕参数,按照图1所示的层次关系,依次从上向下确定各个布局容器的尺寸和位置,直到确定控件组3的显示大小(即尺寸)和显示位置等。
S1002、确定布局容器是否开启延伸能力。
若根据布局文件获取到该布局容器未开启扩展延伸能力,且未开启一般延伸能力,则采用Android系统原生的测量流程进行测量即可。若布局容器未开启扩展延伸能力,但开启一般延伸能力,则手机根据布局容器的尺寸和默认间距确定显示的子控件的数量,并进行排列。此时,手机显示的子控件均为完整显示。若布局容器开启扩展延伸能力,则执行步骤S1003。
需要说明的是,布局文件中包含的使能延伸能力(一般延伸能力和扩展延伸能力)的属性值可以是开发人员在开发应用时设置的,该布局容器的延伸能力固定为开启或关闭。在其他一些实施例中,开发人员在开发应用时也可以设置该布局容器的延伸能力为用户可以设置。那么,用户可以开启该布局容器的延伸能力,或者关闭该布局容器的延伸能力。
S1003、计算布局容器能够完全显示的子控件的数量N1。
具体的,根据布局容器的尺寸、各个子控件的尺寸、默认间距、尺寸阈值初步确定能够显示的子控件的数量N1。例如,N1(四舍五入型)=(布局容器的宽度-尺寸阈值-布局容器的内边距)/(子控件的宽度+默认间距)。
S1004、根据N1计算布局容器的剩余空间。
示例性的,布局容器的剩余空间(±双精度类型)=(布局容器的宽度-尺寸阈值-布局容器内边距)-N1*(子控件的宽度+默认间距)。
S1005、根据N1以及布局容器的剩余空间计算子控件间的间距变化量△M。
示例性的,子控件间的间距变化量△M(±双精度类型)=布局容器的剩余空间/N1。
S1006、根据子控件间的间距变化量△M和默认间距计算间距值M。
示例性的,间距值M(±双精度型)=子控件间的间距变化量△M+默认间距。
S1007、确定间距值M是否大于或等于布局文件中设置的间距阈值。
若间距值M小于间距阈值,则将能够显示的子控件的数量N1减一,而后继续调整子控件之间的间距,即执行步骤S1008。若间距值M大于或等于间距阈值,则当前子控件可以按照间距值进行排列,执行步骤S1009。
S1008、N1=N1-1。而后,执行步骤S1004。
S1009、计算需要调宽间距的子控件的个数Na,以及需要调窄间距的子控件的个数Nb。Na+Nb=N1。
S1010、更新N1个子控件的间距。
需要说明的是,该实施例中需要将布局容器中除去显示子控件的空间、显示尺寸阈值的空间、以及布局容器保留的内边距空间之外的剩余空间平均分配为各个子控件(包括显示部分内容的子控件)之间的间距。由于电子设备显示是以像素为单位的,故一般不能做到将剩余空间严格意义的均分。因此,在获得到满足条件(不小于间距阈值)的间距值后,还可以对子控件之间的间距进行微调,以使得各个子控件之间的间距占满该剩余空间。例如,将得到满足条件的间距值以像素为单位,向上进行取整,可以得到调宽后的间距。此时,调宽间距的子控件的个数Na=间距值的小数部分*N1。将得到满足条件的间距值以像素为单位,向下进行取整,可以得到调窄后的间距。此时,调窄间距的子控件的个数Nb=N1-Na。
例如,根据上述步骤计算得到需要显示的子控件的个数为5,间距值为3.2像素。那么,间距值向上取整得到调宽后的间距值为4。需要调宽间距的子控件的个数=(3.2-3)*5=1,即需要其中一个子控件的间距确定为4像素。间距值向下取整得到调宽后的间距值为3像素。需要调窄间距的子控件的个数=5-1=4个,即其中4个子控件的间距确定为3像素。具体如何确定哪些子控件需要调宽间距,哪些子控件需要调窄间距,本申请实施例不做具体限制。当然,也可以采用其他方法对布局容器中各个子控件间的间距进行调整。
由此,实现在布局容器中的各个子控件的间距值大致相等,误差保持在±1个像素之内。
需要注意的是,该实施例中布局容器中显示第N1+1个子控件的部分内容。
还需要说明的是,这里是以布局容器中包含的子控件的宽度相等为例进行说明的,若子控件的宽度不相等,则可以默认不开启扩展延伸能力。即,布局容器不显示只有部分内容的子控件。具体的,电子设备可以需要根据布局容器中包含的所有子控件的排列顺序、各个子控件的宽度和默认间距进行计算,以确定布局容器能够完整显示的子控件的数量。将能够完整显示的子控件按照默认间距进行排列。
可以理解的是,不同屏幕尺寸的电子设备(例如手机和平板电脑)在使用同一布局文件(包括有设置有延伸能力的布局容器),按照上述图10A的测量流程,最终绘制的应用界面会呈现出不同的布局效果。
例如,手机的屏幕宽度为720像素,平板电脑的屏幕宽度为1280像素。手机和平板电脑均使用同一安装包安装应用市场。其中该应用市场的首页对应的布局文件中包括用于展示精品应用的布局容器,且该布局容器开启扩展延伸能力。并且,该布局容器中包括水平方向布局的10个子控件,每个子控件对应一个应用图标。其中,每一个子控件的宽度为120像素,默认间距为40像素,尺寸阈值(即不完全显示的子控件的宽度)为80像素。另外,该布局容器的宽度等于设备屏幕的宽度,且内边距为0像素。
那么,当手机在绘制应用市场的首页时,执行上述图10A中的测量流程时,计算手机能够显示的子控件的数量N1=(布局容器的宽度-尺寸阈值-布局容器的内边距)/(子控件的宽度+默认间距)=(720-80-0)/(120+40)=4个。也就是说,手机能够显示4个完整显示的子控件,以及1个不完整显示的子控件。手机显示如图10B中(1)所示的界面101,其中布局容器102中包括4个完整显示的应用图标,以及1个不完整显示的应用图标。
当平板电脑在绘制应用市场的首页时,执行上述图10A中的测量流程时,计算平板电脑能够显示的子控件的数量N1=(布局容器的宽度-尺寸阈值-布局容器的内边距)/(子控件的宽度+默认间距)=(1280-80-0)/(120+40)=7.5个。也就是说,平板电脑能够显示7个完整显示的子控件,以及1个不完整显示的子控件。平板电脑显示如图10B中(2)所示的界面103,其中布局容器104中包括7个完整显示的应用图标,以及1个不完整显示的应用图标。
如图11所示,为又一种本申请实施例提供的应用界面自适应布局的方法示意图。开发人员在应用开发阶段,可以通过例如Xml文件的布局文件中设置延伸能力相关的属性。例如,开启延伸能力使能,设置默认间距、设置间距阈值、开启扩展延伸能力使能、设置尺寸阈值等。后续,开发人员将布局文件以及其他的应用代码、资源等打包成安装包,上架到应用市场。后续,用户可以使用电子设备从应用市场上下载该安装包,并安装该应用。在电子设备运行该应用时,电子设备中的布局模块会从布局文件中解析与延伸能力相关的属性,得到延伸能力相关的属性值,并将该属性值发送给电子设备中的延伸模块。而后,布局模块进行测量,并启动延伸能力进程,即延伸模块根据延伸能力相关的属性值计算相关控件的参数,例如控件的尺寸等。布局模块根据更新后的控件的参数进行布局,得到应用中特定显示界面中控件的位置。最后,电子设备可以进行绘制并显示该特定显示界面。在一个具体示例中,布局模块可以为Android系统原生的视图系统中的测量和布局模块。延伸模块可以视图系统中测量模块中新增的功能模块,可以执行上述图10A中的相关步骤。
二)占比能力
开发人员在开发应用时,添加自适应布局属性包的依赖后,可以在显示界面中设置具有占比能力的布局容器(即ViewGroup)。具体的,开发人员在编辑显示界面的布局文件时,可以通过在布局文件(例如xml文件)中设置ViewGroup的占比能力相关的属性值,或者在JAVA源码文件中通过添加调用接口的方式来设置ViewGroup的占比能力相关的属性值。
如表三所示,为与占比能力相关的属性示例。
表三
需要说明的是,开发人员可以设置布局容器的属性时,通过占比能力使能开启该布局容器的占比能力,以及针对布局容器中各个子控件(即布局容器中存放的View或ViewGroup)设置占比值。后续,电子设备运行该应用,并绘制布局容器中的子控件时,会根据布局容器的尺寸,以及子控件的占比值绘制该布局容器中的各个子控件。
以下,结合附图详细说明占比能力相关各个属性的含义,以及布局容器和子控件的显示效果。
如图12中(1)所示,子控件与布局容器的水平方向的占比,是指子控件的宽度(X)占据布局容器总宽度(Y)的比值,即X/Y。子控件与布局容器的垂直方向的占比,是指子控件的高度(R)占据布局容器总高度(T)的比值,即R/T。
在设置布局容器的属性时,设置占比能力使能的属性值为true。然后,针对子控件设置占比值为M(M为百分比)。占比值M的具体含义(水平方向的占比值还是垂直方向的占比值)可以根据布局容器的布局方向确定。
示例性的,若布局容器的布局方向为水平方向(或称为横向),则占比值M表示子控件的水平方向的占比值,即子控件的宽度占据布局容器总宽度的百分比。那么,当布局容器的宽度发生变化时,将对布局容器中的子控件的宽度进行缩放,直到缩放后的子控件的宽度占布局容器的总宽度保持M。但,子控件的高度不会随着布局容器的高度变化而变化。例如,相较于图12中(1)所示的布局容器的尺寸,图12中(2)所示的布局容器的宽度发生变化(变为Y'),但高度未变。那么,子控件的宽度相应地变化为X',X'=M*Y';子控件的高度不变,仍为R。又例如,相较于图12中(1)所示的布局容器的尺寸,图12中(3)所示的布局容器的宽度发生变化(变为X'),高度也发生变化(变为T')。那么,子控件的宽度相应地变化为X',X'=M*Y',子控件的高度不变,仍为R。需要说明的是,这里是以布局文件中未设置有对子控件的高度进行变化的布局参数。综上,占比能力仅作用于子控件在布局容器的布局方向(该示例的布局方向为水平方向)上的尺寸,不作用于子控件在其他方向(该示例中例如为垂直方向)上的尺寸。
若布局容器的布局方向为垂直方向(或称为竖向),则比值M表示子控件的垂直方向的占比值,即子控件的高度占据布局容器总高度的百分比。那么,当布局容器的高度发生变化时,将对布局容器中的子控件的高度进行缩放,直到缩放后的子控件的高度占布局容器的总宽度保持M。但,子控件的宽度不会随着布局容器的宽度变化而变化。例如,相较于图12中(1)所示的布局容器的尺寸,图12中(4)所示的布局容器的高度发生变化(变为T'),宽度未变。那么,子控件的高度相应地变化为R',R'=M*T',子控件的宽度不变,仍为X。又例如,相较于图12中(1)所示的布局容器的尺寸,图12中(5)所示的布局容器的高度发生变化(变为T'),宽度也发生变化(变为Y')。那么,子控件的高度相应地变化为R',且R'=M*T',子控件的宽度不变,仍为X。需要说明的是,这里是以布局文件中未设置有对子控件的宽度进行变化的布局参数。综上,占比能力仅作用于子控件在布局容器的布局方向(在该示例中布局方向为垂直方向)上的尺寸,不作用于子控件在其他方向(该示例中,例如为水平方向)上的尺寸。
需要说明的是,上述是以仅设置了一个参数,即占比值M为例进行说明的,在该示例中,占比值M的具体含义(水平方向的占比值还是垂直方向的占比值)可以根据布局容器的布局方向确定。在其他一些示例中,也可以设置不同的参数,分别用于表示水平方向的占比值(例如占比值P)和垂直方向的占比值(例如占比值Q),本申请实施例对此不做限定。
举个例子,开发人员可以为子控件设置占比值为50%。如图12中(1)所示,布局容器在电子设备1上的尺寸为1080*540(宽*高,单位为pixel),子控件的尺寸为540*270。此时,子控件的水平方向占比和垂直方向占比均刚好达到50%。
一些示例中,布局容器的布局方向设置为横向。如图12中(2)所示,若布局容器在电子设备2上的尺寸为2160*540(单位为pixel)。此时,电子设备2上的布局容器的高度与电子设备1上的布局容器的高度相同,但宽度增加了。那么,根据水平方向占比(50%)对子控件进行缩放,计算子控件的尺寸为1080*270(单位为pixel)。如图12中(3)所示,若布局容器在电子设备3上的尺寸为2160*1080(单位为pixel)。此时,电子设备3上的布局容器的宽高均大于电子设备1上的布局容器。那么,根据水平方向占比(50%)对子控件进行缩放,计算子控件的尺寸为1080*270(单位为pixel)。
另一些示例中,布局容器的布局方向设置为竖向。如图12中(4)所示,若布局容器在电子设备4上的尺寸为1080*1080(单位为pixel)。此时,电子设备4上的布局容器的高度与电子设备1上的布局容器的宽度相同,但高度增加了。那么,根据垂直方向占比(50%)对子控件进行缩放,计算子控件的尺寸为540*540(单位为pixel)。如图12中(5)所示,若布局容器在电子设备5上的尺寸为2160*1080(单位为pixel)。此时,电子设备5上的布局容器的高度均大于与电子设备1上的布局容器的宽度和高度。那么,根据垂直方向占比(50%)对子控件进行缩放,计算子控件的尺寸为540*540(单位为pixel)。
在具体实现中,可以针对文本控件、按钮控件、图片控件等所在的布局容器设置占比能力。当布局容器的宽度或高度发生变化时,可以自动根据布局容器的宽度或高度自适应改变文本控件、按钮控件或图片控件的宽度或高度,从而满足具有不同屏幕尺寸电子设备的显示需求。可见,本方案的占比能力能实现具有不同屏幕参数的电子设备可以根据相同的布局设置呈现不同的显示效果,在减少开发人员的开发和维护的工作量的同时,满足各种类型电子设备的显示需求。
上述实施例是以布局容器中的一个子控件进行说明的。当布局容器中包括多个子控件时,可以分别针对多个子控件中的每一个子控件设置占比值,也可以针对多个子控件中的部分子控件设置占比值。
在一些实施例中,针对多个子控件中的每一个子控件设置占比值,则每一个子控件的在指定方向上的缩放方法可以参考上述实施例中子控件在指定方向上的缩放方法,这里不再赘述。需要说明的是,若所有子控件的占比值之和大于100%,则会出现截断,即布局容器中不能显示出全部的子控件。在一些示例中,可以在开发人员设置子控件的占比值时,当设置的占比值之和大于100%时,可以提示开发人员,以便开发人员更改部分子控件的占比值,或者,提示开发人员设置布局容器的其他能力,例如隐藏能力等。在另一些示例中,也可以在电子设备显示该布局容器时,提示用户对界面进行调整等。若所有子控件的占比值之和小于100%,则会出现留白。另一些示例中,可以提示用户选择或者默认增加子控件之间的间距等。
在另一些实施例中,针对布局容器中部分子控件设置占比值,部分子控件未设置占比值的情况,可以先计算设置占比值的各个子控件在指定方向的尺寸,然后,将布局容器中剩余的空间分配给未设置占比值的子控件。例如,确定设置占比值的各个子控件在指定方向的尺寸后,将布局容器中剩余的空间平均分配给未设置占比值的子控件。
举个例子,如图13中(1)所示,布局容器中包括子控件1、子控件2和子控件3三个子控件。布局容器的布局方向为水平方向。
如图13中(2)所示,若针对子控件1至子控件3均设置占比值,例如为20%,则当布局容器的宽度发生变化时,子控件1至子控件3分别占布局容器的宽度的比值均保持在20%。
如图13中(3)所示,若针对子控件1设置占比值,比如为20%,而未设置子控件2和子控件3的占比值,则当布局容器的宽度发生变化时,先保持子控件1占布局容器的宽度的比值为20%。然后,将布局容器中剩余空间(80%)平均分配给子控件2和子控件3,即子控件2和子控件3分别占布局容器的宽度为40%。可以注意到,在本示例中,子控件1、子控件2和子控件3的占比值刚好等于100%。也就是说,子控件之间没有间距。在一些示例中,可以在开发人员设置子控件的占比值时,当设置的占比值之和等于100%时,可以提示开发人员子控件之间没有间距。若开发人员希望子控件之间有间距,设置的每个子控件之和小于100%。
以下结合一个开启占比能力的布局容器中嵌套另一个开启占比能力的布局容器的界面,对布局容器的占比能力的应用进行说明。
如图14中(1)所示的界面,布局容器1400中包括子控件1401和子控件1402。其中,布局容器1400开启占比能力,且布局容器1400的布局方向为垂直方向。设置子控件1401的占比值A(比如为60%)。此时,子控件1401的占比值为垂直占比值,也就是说,子控件1401的高度会随着布局容器1400的高度变化而变化,并且保持子控件1401的高度与布局容器1400高度的百分比为占比A。
其中,子控件1401和子控件1402实质上均为一个ViewGroup,即一个布局容器,也称为布局容器类的控件。其中,子控件1402包括上一首、播放、下一首和更多的播放控件。子控件1401也开启了占比能力,且子控件1401的布局方向为水平方向。子控件1401包括子控件1403(一个图片控件)和子控件1404(多个文本控件)。设置子控件1403的占比值B(比如为30%)。此时,子控件1403的占比值为水平占比值,也就是说,子控件1403的宽度会随着布局容器1401宽度的变化而变化,并且,保持子控件1403的宽度与布局容器1401的布局宽度的百分比为占比B。
由此可见,一方面,子控件1403的高度会随着布局容器1400的高度变化而变化,另一方面,子控件1403的宽度会随着子控件1401的宽度变化而变化,而子控件1401的宽度会随着布局容器1400的变化而变化。因此,子控件1403在宽度和高度随着布局容器1400的变化而变化,但子控件1403的宽高比可能发生变化。换言之,这里子控件1403的宽高变化与缩放能力中子控件保持宽高比进行缩放的方法不同,可以满足应用界面更多的显示需求。
举个例子,如图14中(1)所示,若布局容器1400在电子设备1上的尺寸为1080*540(宽*高,单位为pixel),子控件1401(即子布局容器)的尺寸为1080*324(单位为pixel)(其中,子控件1401的高度=(540*60%)pixel)。子控件1402的尺寸为1080*216(单位为pixel)(其中,子控件1402的高度=(540-324)pixel)。子控件1403的尺寸为324*324(单位为pixel)(其中,子控件1403的宽度=(1080*30%)pixel)。子控件1404的尺寸为756*324(单位为pixel)。
如图14中(2)所示,若布局容器1400在电子设备2上的尺寸为1280*540(宽*高,单位为pixel),子控件1401(即子布局容器)的尺寸为1280*324(单位为pixel)(其中,子控件1401的高度=(540*60%)pixel)。子控件1402的尺寸为1280*216(单位为pixel)(其中,子控件1402的高度=(540-324)pixel)。子控件1403的尺寸为384*324(单位为pixel)(其中,子控件1403的宽度=(1280*30%)pixel)。子控件1404的尺寸为896*324(单位为pixel)。
如图14中(3)所示,若布局容器1400在电子设备3上的尺寸为1080*640(宽*高,单位为pixel),子控件1401(即子布局容器)的尺寸为1080*384(单位为pixel)(其中,子控件1401的高度=(640*60%)pixel)。子控件1402的尺寸为1080*256(单位为pixel)(其中,子控件1402的高度=(640-384)pixel)。子控件1403的尺寸为324*384(单位为pixel)(其中,子控件1403的宽度=(1080*30%)pixel)。子控件1404的尺寸为756*384(单位为pixel)。
如图14中(4)所示,若布局容器1400在电子设备4上的尺寸为1280*640(宽*高,单位为pixel),子控件1401(即子布局容器)的尺寸为1280*384(单位为pixel)(其中,子控件1401的高度=(640*60%)pixel)。子控件1402的尺寸为1280*256(单位为pixel)(其中,子控件1402的高度=(640-384)pixel)。子控件1403的尺寸为384*384(单位为pixel)(其中,子控件1403的宽度=(1280*30%)pixel)。子控件1404的尺寸为896*384(单位为pixel)。
以下,给出一个布局容器1400的布局文件(xml文件)的示例。
上述实施例,是开发人员通过在布局文件(例如xml文件)中设置View或ViewGroup的占比能力相关的属性值,设计显示界面自适应布局的方案。也可以通过在JAVA源码文件中通过添加调用接口的方式来设置View或ViewGroup的占比能力相关的属性值。
如表四所示,为设置View或ViewGroup的占比能力相关的属性值相对应的接口的示例。
表四
以上详细介绍了占比能力的含义。开发人员可以根据应用中每个显示界面的布局设计,结合占比能力、其他自适应布局能力以及基本的布局能力(例如Android原生的属性)配置好布局文件,将布局文件与应用的其他的源代码以及资源等打包成安装包(例如APK文件),并上架到应用市场。电子设备从应用市场下载该安装包,并安装该应用。以下,详细说明电子设备运行该应用时,如何根据上述布局文件实现自适应布局的方案。
具体的,手机针对布局文件中的每一个布局容器执行如图15A所示测量流程,该方法具体包括:
S1501、确定布局容器开启占比能力,获取布局容器中子控件的布局参数。
根据布局文件中布局容器的布局参数,确定布局容器是否开启占比能力,以及布局容器中布局方向是水平方向还是垂直方向。进一步获取布局容器中包含的子控件,以及配置的子控件的占比值。若布局容器的布局方向是水平方向,则子控件的占比值为水平方向的占比值。若布局容器的布局方向是垂直方向,则子控件的占比值为垂直方向的占比值。
此时,布局容器的在布局方向的剩余空间=布局容器的宽度/高度-左右/上下内边距。具体的,若布局容器的布局方向为水平方向,则布局容器的剩余宽度=布局容器的宽度-布局容器左右的内边距。若布局容器的布局方向为垂直方向,则布局容器的剩余高度=布局容器的高度-布局容器上下的内边距。
S1502、当前子控件的占比值是否大于零。若是,执行步骤S1503,若否,执行步骤S1505。
S1503、根据布局容器的布局方向确定当前子控件的尺寸。
其中,布局方向是指布局容器排列子控件的方向,包括水平方向和垂直方向。若布局容器的布局方向为水平方向,则当前子控件的宽度=占比值*布局容器的宽度。若布局容器的布局方向为垂直方向,则当前子控件的高度=占比值*布局容器的高度。
S1504、更新布局容器剩余空间。
若布局容器的布局方向为水平方向,则布局容器剩余宽度=布局容器的宽度-当前子控件的宽度-左右内边距。若布局容器的布局方向为垂直方向,则布局容器剩余高度=布局容器的高度-当前子控件的高度-上下内边距。
而后,执行步骤S1506。
S1505、记录当前子控件为未配置占比值或者配置的占比值无效的子控件。
S1506、确定布局容器中子控件是否全部遍历完。若遍历完,则执行步骤S1507,若未遍历完,则执行步骤S1510。
S1507、确定布局容器的剩余空间是否大于零。若是,则执行步骤S1508,否则,执行步骤S1509。
S1508、将布局容器的剩余空间平均分配给未配置占比值或配置的占比值无效的子控件。
测量结束。
S1509、未配置占比值或配置的占比值无效的子控件的尺寸为零。
测量结束。
S1510、确定下一个子控件为当前子控件。而后,执行步骤S1502。
由此提供了一种布局容器中包括设置有占比值的子控件和未设置占比值的子控件的测量方法。可以理解的是,这里是将布局容器在布局方向上剩余空间(布局容器总宽度/总高度-左右/上下内边距-设置占比值的子控件宽度之和/高度之和)平均分配给未设置占比值的子控件为例进行说明。当然,也可以按照其他规则将布局方向上剩余空间如何分配给未设置占比值的子控件,本申请实施例对此不做限定。
可以理解的是,不同屏幕尺寸的电子设备(例如手机和平板电脑)在使用同一布局文件(包括有设置有占比能力的布局容器),按照上述图15A的测量流程,最终绘制的应用界面会呈现出不同的布局效果。
例如,手机的屏幕宽度为720像素,平板电脑的屏幕宽度为1280像素。手机和平板电脑均使用同一安装包安装音乐应用。其中该音乐应用的首页对应的布局文件中包括用于展示排行榜的布局容器,该布局容器开启占比能力。其中,该布局容器包括水平方向布局的子控件1(用于展示排行榜1的海报)、子布局容器(用于展示排名前3首歌曲的信息),以及子控件2(用于提示用户后续还有其他的排行榜)。其中,子控件1的占比值设置为30%,子布布局容器未设置占比值,子控件2的占比值设置为15%。
那么,当手机在绘制音乐应用的首页时,针对该展示排行榜的布局容器执行上述图15A中的测量流程时,手机计算出布局容器的宽度=手机屏幕宽度=720像素。那么,子控件1的宽度=布局容器的宽度*子控件1的占比值=720*30%=216像素。再计算子控件2的宽度=布局容器的宽度*子控件2的占比值=720*15%=108像素。子布局容器的宽度=布局容器的宽度-已确定的子控件的宽度之和=720-(216+108)=396像素。手机显示如图15B中(1)所示的界面151,其中布局容器152中子控件153的宽度为216像素,子控件155的宽度为108像素,子布局容器154的宽度为396像素。
当平板电脑在绘制音乐应用的首页时,针对该展示排行榜的布局容器执行上述图15A中的测量流程时,平板电脑计算出布局容器的宽度=平板电脑的屏幕宽度=1280像素。那么,子控件1的宽度=布局容器的宽度*子控件1的占比值=1280*30%=384像素。再计算子控件2的宽度=布局容器的宽度*子控件2的占比值=1280*15%=192像素。子布局容器的宽度=1280-384-192=704像素。平板电脑显示如图15B中(2)所示的界面156,其中布局容器156中子控件158的宽度为384像素,子控件150的宽度为192像素,子布局容器159的宽度为704像素。
如图16所示,为又一种本申请实施例提供的应用界面自适应布局的方法示意图。开发人员在应用开发阶段,可以通过例如Xml文件的布局文件中设置占比能力相关的属性。例如,开启占比能力,设置布局容器的布局方向,设置子控件的占比值等。后续,开发人员将布局文件以及其他的应用代码、资源等打包成安装包,上架到应用市场。后续,用户可以使用电子设备从应用市场上下载该安装包,并安装该应用。在电子设备运行该应用时,电子设备中的布局模块会从布局文件中解析与占比能力相关的属性,得到占比能力相关的属性值,并将该属性值发送给电子设备中的占比模块。而后,布局模块进行测量,并启动占比能力进程,即占比模块根据占比能力相关的属性值计算相关控件的参数,例如控件的尺寸等。布局模块根据更新后的控件的参数进行布局,得到应用中特定显示界面中控件的位置。最后,电子设备可以进行绘制并显示该特定显示界面。在一个具体示例中,占比模块可以执行上述图15A中的相关步骤。布局模块可以为Android系统原生的视图系统中的测量模块和布局模块。而占比模块则为本申请在为Android系统原生的视图系统中的测量模块中新增的功能模块。
三)均分能力
开发人员在开发应用时,添加自适应布局属性包的依赖后,可以在显示界面中设置具有均分能力的布局容器(即ViewGroup)。具体的,开发人员在编辑显示界面的布局文件时,可以通过在布局文件(例如xml文件)中设置ViewGroup的均分能力相关的属性值,或者在JAVA源码文件中通过添加调用接口的方式来设置ViewGroup的均分能力相关的属性值。
如表五所示,为与均分能力相关的属性示例。
表五
需要说明的是,开发人员可以设置布局容器的属性时,通过均分能力使能开启该布局容器的均分能力,还可以设置均分类型,设置间距阈值A和间距阈值B。后续,电子设备运行该应用,并绘制布局容器中的子控件时,会根据布局容器的尺寸,以及子控件的尺寸确定子控件之间的间距,并绘制该布局容器中的各个子控件。
以下,结合附图详细说明均分能力相关各个属性的含义,以及布局容器和子控件的显示效果。
示例性的,均分能力可以包括第一类型的均分能力和第二类型的均分能力。
其中,均分能力,可理解为在指定方向上,将布局容器中的可用空间减去各个子控件占据的空间后的剩余空间平均分配用作子控件之间的间距。其中,当布局容器未设置内边距时,布局容器的可用空间=布局容器的尺寸。当布局容器设置内边距时,布局容器的可用空间=布局容器的尺寸减去内边距。
其中,上述第一类型的均分能力,是指不需要为第一个子控件在布局方向上最靠近布局容器的一侧,以及最后一个子控件在布局方向上最靠近布局容器的一侧分配间距。
例如,布局容器的布局方向为水平方向(或称为横向),且开启布局容器第一类型的均分能力。在一些示例中,布局容器未设置内边距,布局容器的可用宽度为布局容器的宽度。布局容器中显示的子控件可以为如图17中(1)所示的位置关系。其中,第一个子控件的左侧边缘与布局容器的左侧边缘重合,布局容器中最后一个子控件的右侧边缘与布局容器的右侧边缘重合,并且相邻子控件之间的间距相等或大体上相等。在另一些示例中,布局容器设置了在布局方向的内边距,如距左内边距(或称为左侧内边距、左内边距)、距右内边距(或称为右侧内边距、右内边距)。此时,布局容器的可用宽度为布局容器的宽度-距左内边距-距右内边距。则布局容器显示的子控件可以为如图17中(2)所示的位置关系。其中,第一个子控件的左侧边缘与布局容器的左侧边缘距离等于布局容器的距左内边距,布局容器中最后一个子控件的右侧边缘与布局容器的右侧边缘距离等于布局容器的距右内边距,并且相邻子控件之间的间距相等或大体上相等。
又例如,布局容器的布局方向为垂直方向(或称为竖向),且开启布局容器第一类型的均分能力。在一些示例中,布局容器未设置内边距,布局容器的可用高度为布局容器的高度。布局容器中显示的子控件可以为如图18中(1)所示的位置关系。其中,第一个子控件的上方边缘与布局容器的上方边缘重合,布局容器中最后一个子控件的下方边缘与布局容器的下方边缘重合,并且相邻子控件之间的间距相等或大体上相等。在另一些示例中,布局容器设置了在布局方向的内边距,如距上内边距(或称为上方内边距、上内边距)、距下内边距(或称为下方内边距、下内边距)。此时,布局容器的可用高度为布局容器的高度-距上内边距-距下内边距。则布局容器显示的子控件可以为如图18中(2)所示的位置关系。其中,第一个子控件的上方边缘与布局容器的上方边缘距离等于布局容器的距上内边距,布局容器中最后一个子控件的下方边缘与布局容器的下方边缘距离等于布局容器的距下内边距,并且相邻子控件之间的间距相等或大体上相等。
其中,上述第二类型的均分能力,是指需要为第一个子控件在布局方向上最靠近布局容器的一侧,以及最后一个子控件在布局方向上最靠近布局容器的一侧分配间距。
例如,布局容器的布局方向为水平方向,且开启布局容器第二类型的均分能力。在一些示例中,布局容器未设置内边距,布局容器的可用宽度为布局容器的宽度。布局容器中显示的子控件可以为如图17中(3)所示的位置关系。其中,第一个子控件的左侧边缘与布局容器的左侧边缘的间距,布局容器中最后一个子控件的右侧边缘与布局容器的右侧边缘的间距,以及相邻子控件之间的间距,均相等或大体上相等。在另一些示例中,布局容器设置了在布局方向的内边距,如距左内边距、距右内边距。此时,布局容器的可用宽度为布局容器的宽度-距左内边距-距右内边距。那么,布局容器显示的子控件可以为如图17中(4)所示的位置关系。其中,相邻子控件之间水平方向的间距相等或大体上相等,记为间距C。并且,第一个子控件的左侧边缘与布局容器的左侧边缘距离等于布局容器的距左内边距+间距C,布局容器中最后一个子控件的右侧边缘与布局容器的右侧边缘距离等于布局容器的距右内边距+间距C。
又例如,布局容器的布局方向为垂直方向,且开启布局容器第二类型的均分能力。在一些示例中,布局容器未设置内边距,布局容器的可用高度为布局容器的高度。布局容器中显示的子控件可以为如图18中(3)所示的位置关系。其中,第一个子控件上方边缘到布局容器上方边缘的距离,布局容器中最后一个子控件下方边缘与布局容器下方边缘的距离,以及相邻子控件之间的间距,均相等或大体上相等。在另一些示例中,布局容器设置了在布局方向的内边距,如距上内边距、距下内边距。此时,布局容器的可用高度=布局容器的高度-距上内边距-距下内边距。那么,布局容器显示的子控件可以为如图18中(4)所示的位置关系。其中,相邻子控件之间垂直方向的间距相等或大体上相等,记为间距D。并且,第一个子控件的上方边缘与布局容器的上方边缘距离等于布局容器的距上内边距+间距D,布局容器中最后一个子控件的下方边缘与布局容器的下方边缘距离等于布局容器的距下内边距+间距D。
在一种具体实现中,可以针对包含多个相同或相似的子控件的布局容器设置均分能力。子控件例如为文本控件、按钮控件、图片控件、图标按钮控件等。当布局容器的宽度或高度发生变化时,可以自动根据布局容器的宽度或高度自适应改变子控件之间的间距,从而满足具有不同屏幕尺寸电子设备的显示需求。可见,本方案的均分能力能实现具有不同屏幕参数的电子设备可以根据相同的布局设置呈现不同的显示效果,在减少开发人员的开发和维护的工作量的同时,满足各种类型电子设备的显示需求。
在另一些实施例中,针对开启均分能力的布局容器还可以设置间距阈值A或间距阈值B,用于约束子控件之间的调整后间距的范围。调整后,子控件之间的间距不大于间距阈值A。调整后,子控件之间的间距不小于间距阈值B。
示例性的,以布局容器的布局方向为水平方向,且开启第一类型的均分能力为例进行说明。采用上述方法,根据布局容器的可用空间、各个子控件的尺寸,确定各个子控件之间间距为间距E。而后,将间距E与间距阈值A进行比较。若间距E大于间距阈值A,则确定相邻子控件之间的间距为间距阈值A,调整第一个子控件左边缘与布局容器左边缘的间距,和/或,调整最后一个子控件右边缘与布局容器右边缘的间距。
例如,如图19中(1)所示,布局容器根据布局容器的可用空间,以及子控件的尺寸,确定的子控件之间的间距为间距E。此时,间距E大于间距阈值A。在一个示例中,如图19中(2)所示,确定子控件之间的间距等于间距阈值A,并且将所有子控件作为一个整体,在布局容器中居中显示(即水平居中)。此时,第一个子控件的左边缘与布局容器的左边缘的间距增大,且最后一个子控件的右边缘与布局容器的右边缘的间距增大。在另一个示例中,如图19中(3)所示,确定子控件之间的间距等于间距阈值A,并且将所有子控件作为一个整体,在布局容器中左对齐。此时,仅增加最后一个子控件的右边缘与布局容器的右边缘的间距。在又一个示例中,如图19中(4)所示,确定子控件之间的间距等于间距阈值A,并且将所有子控件作为一个整体,在布局容器中右对齐。此时,仅增加第一个子控件的左边缘与布局容器的左边缘的间距。
若布局容器的布局方向为水平方向,且开启第二类型的均分能力。当确定相邻的子控件之间的间距大于距离阈值A时,也可以采用与开启第一类型的均分能力相同的方法进行调整。
若布局容器的布局方向为垂直方向,且开启均分能力(包括第一类型的均分能力和第二类型的均分能力),当确定相邻的子控件之间的间距大于距离阈值A时,仍确定相邻子控件之间的间距为间距阈值A,并调整第一个子控件上边缘与布局容器上边缘的间距,和/或,调整最后一个子控件下边缘与布局容器下边缘的间距。子控件在布局容器中可以居中显示(即垂直居中),或顶对齐,或底对齐,可参考布局方向为水平方向时的描述,这里不再展开说明。
再示例性,以布局容器的布局方向为水平方向,且开启第一类型的均分能力为例进行说明。采用上述方法,根据布局容器的可用空间、各个子控件的尺寸,确定各个子控件之间间距为间距E。而后,将间距E与间距阈值B进行比较。若间距E小于间距阈值B,则确定相邻子控件之间的间距为间距阈值B。此时,第一个子控件和/或最后一个子控件显示部分内容。比如,若保持子控件居中显示,那么第一个子控件的左侧部分,以及最后一个的右侧部分则可能截断,不显示。若保持子控件居左显示,那么排列在右侧的子控件可能截断,不显示。若保持子控件居右显示,那么排列在左侧的子控件可能截断,不显示。
在另一些实施例中,布局容器还可以设置隐藏能力。那么,在当间距E调整为间距阈值B后,布局容器中仍不能显示全部的子控件时,可以触发隐藏能力。在触发隐藏能力后,可以根据子控件的隐藏优先级确定隐藏的子控件,即减少布局容器显示的子控件的数量。那么,重新根据调整后的子控件的数量和布局容器的可用空间确定相邻子控件之间的间距等。
需要说明的是,这里是先根据均分能力划分子控件的间距。当划分的子控件间距小于间距阈值B后,触发隐藏能力,再使用均分能力确定显示的子控件之间的间距。在另一些示例中,也可以先根据隐藏能力确定隐藏的子控件,再根据均分能力确定显示的子控件之间的间距。本申请实施例对此不做具体限定。
在另一些实施例中,布局容器还可以设置折行能力。那么,在当间距E调整为间距阈值B后,布局容器中仍不能显示全部的子控件时,可以触发折行能力。在触发折行能力后,可以先确定布局容器显示这些子控件时的行数或列数,以及每一行或每一列显示的子控件的数量。那么,布局容器可以根据每一行或每一列显示的子控件的数量以及尺寸确定每一行或每一列子控件之间的间距,
需要说明的是,这里是先根据均分能力划分子控件的间距。当划分的子控件间距小于间距阈值B后,触发折行能力,再使用均分能力确定显示的每一行或每一列子控件之间的间距。在另一些示例中,也可以先根据折行能力确定布局容器包括的行数或列数,再根据均分能力确定每一行的子控件之间的间距。本申请实施例对此不做具体限定。
以上,是以布局容器的布局方向为水平方向,且开启第一类型的均分能力为例进行说明。若布局容器的布局方向为水平方向,且开启第二类型的均分能力;或者,布局容器的布局方向为垂直方向,且开启均分能力(包括第一类型的均分能力和第二类型的均分能力)。那么,当确定相邻的子控件之间的间距小于距离阈值B时,也可以采用类似的方法进行调整。
需要说明的是,以上实施例中均是为布局容器中包含的子控件的尺寸相同为例进行说明的,本申请对开启均分能力的布局容器中子控件的尺寸并不做限定,子控件的尺寸可以相同,也可以不同。
另外,上文也已经提到,开启均分能力后,布局容器中的相邻子控件的间距可以相等或大体上相等,也可以不同,例如采用别的规律进行分配。以下给出几种示例。
例如,如图20中(1)所示,相邻子控件之间的间距呈现从小到大的规律。其中,间距1<间距2<间距3。或者,如图20中(2)所示,相邻子控件之间的间距呈现从大到小的规律性变化。其中,间距1>间距2>间距3。或者,如图20中(3)所示,相邻子控件之间的间距的大小交替变化。其中,间距4<间距5。
以下,给出一个布局文件(xml文件)的示例,该布局文件中设置有开启均分能力的布局容器,且该布局容器中包括四个子控件,分别为四个图片控件。
上述实施例,是开发人员通过在布局文件(例如xml文件)中设置布局容器的均分能力相关的属性值,设计显示界面自适应布局的方案。也可以通过在JAVA源码文件中通过添加调用接口的方式来设置布局容器的均分能力相关的属性值。
如表六所示,为设置布局容器的均分能力相关的属性值相对应的接口的示例。
表六
以上详细介绍了均分能力的含义。开发人员可以根据应用中每个显示界面的布局设计,结合均分能力、其他自适应布局能力以及基本的布局能力(例如Android原生的属性)配置好布局文件,将布局文件与应用的其他的源代码以及资源等打包成安装包(例如APK文件),并上架到应用市场。电子设备从应用市场下载该安装包,并安装该应用。以下,详细说明电子设备运行该应用时,如何根据上述布局文件实现自适应布局的方案。
具体的,手机针对布局文件中的每一个布局容器执行如图21A所示测量流程,该方法具体包括:
S2100、获取布局容器的布局参数。
其中,布局容器的布局参数包括布局容器是否开启均分能力、布局容器中包含的子控件以及子控件的布局参数。若开启均分能力,还包括均分类型、间距阈值A、间距阈值B等。在确定布局容器开启均分能力后,执行如下步骤。
S2101、测量布局容器中各个子控件在布局方向上的尺寸。
示例性的,先采用Android原生的测量方法,以及子控件的布局参数得到子控件的尺寸,包括在布局方向上的尺寸。
S2102、确定布局容器是否为多行/多列。若是,执行步骤S2104,若否,执行步骤S2103。
一些示例中,布局容器还开启了折行能力,则需要先根据折行能力相关的属性确定布局容器中包含的行数或列数,以及每一行或每一列中包含的子控件数量。针对每一行或每一列中子控件之间的间距值。若布局容器未开启折行能力,则布局容器中包含一行或一列子控件,则计算该行或该列子控件的间距即可。
S2103、根据均分类型,确定布局容器中子控件之间的间距E。
示例性的,根据均分类型、布局容器的尺寸、内边距、布局方向、子控件的尺寸等确定子控件之间的间距E。相邻子控件之间的间距E相等。
若为第一类型的均分,那么,间距E=[布局容器在布局方向上的尺寸空间-布局方向上的内边距-∑(w1,w2…,wN)]/(N-1)。若为第二类型的均分,那么,间距E=[布局容器在布局方向上的尺寸空间-布局方向上的内边距-∑(w1,w2…,wN)]/(N+1)。
其中,布局容器中包括N个子控件,其中Wi为第i个子控件在布局方向上的尺寸,i=1,2,……,N。N为大于1的整数。
而后,执行步骤S2105。
S2104、根据均分类型,计算每一行/每一列子控件的间距E。
针对每一行/每一列子控件的数量,以及子控件的尺寸计算间距E,具体计算方法可以参考步骤S2103中的描述。
S2105、确定间距E是否大于间距阈值A。若是,则执行步骤S2106,否则执行步骤S2107。
S2106、确定相邻子控件之间的间距等于间距阈值A。
S2107、确定间距E是否小于间距阈值B。若是,则执行步骤S2108,否则执行步骤S2109。
S2108、确定相邻子控件之间的间距等于间距阈值B。
S2109、确定布局容器中各个子控件的位置。
在确定相邻子控件之间的间距后,将所有子控件作为一个整体在布局容器中居中显示,或者居左显示,或者居右显示,或居上显示,或居下显示,确定各个子控件的位置。
需要注意的是,若根据间距阈值A或间距阈值B调整了相邻子控件的间距,则在将所有子控件作为一个整体在布局容器中居中显示,或者居左显示,或者居右显示,或居上显示,或居下显示时,可能还需要调整两侧子控件外侧的边缘距离布局容器的距离。具体的调整过程可以参考图19的相关内容,这里不再赘述。
需要说明的是,如果第一行只有一个子控件,那么该子控件可以居中显示。如果第一行有多个子控件,则这多个子控件根据均分类型进行显示。
如果第一行只有一个子控件,第二行开始有多个子控件,那么第二行开始根据均分类型进行显示。第三行以及之后的行可以根据第二行计算的间距进行显示。这样,从第二行开始,各个子控件可以呈现网格效果。或者,在其他一些示例中,第三行以及之后的行也可以根据每一行自己包含的子控件的数据以及各个子控件的宽度(或高度)独立进行计算相邻子控件之间的间距,并根据计算得到的间距进行显示。
可以理解的是,不同屏幕尺寸的电子设备(例如手机和平板电脑)在使用同一布局文件(包括有设置有均分能力的布局容器),按照上述图21A的测量流程,最终绘制的应用界面会呈现出不同的布局效果。
例如,手机的屏幕宽度为720像素,平板电脑的屏幕宽度为1280像素。手机和平板电脑均使用同一安装包安装图库应用。其中该图库应用的页面对应的布局文件中包括用于显示导航的布局容器,该布局容器开启第二类型的均分能力。其中,该布局容器包括水平方向布局的4个子控件(分别为“照片”控件、“相册”控件、“时刻”控件、以及“发现”控件)。其中,该4个子控件的宽度相等为80像素。布局容器的内边距设置为0像素。
那么,当手机在绘制图库应用的页面时,针对该布局容器执行上述图21A中的测量流程时,手机计算各个子控件之间的间距=[布局容器在布局方向上的尺寸空间-布局方向上的内边距-∑(w1,w2…,wN)]/(N+1)=(720-0-80*4)/5=80像素。手机显示如图21B中(1)所示的界面211,其中布局容器212中各个子控件的间距为80像素。
当平板电脑在绘制图库应用的页面时,针对该布局容器执行上述图21A中的测量流程时,平板电脑计算各个子控件之间的间距=[布局容器在布局方向上的尺寸空间-布局方向上的内边距-∑(w1,w2…,wN)]/(N+1)=(1280-0-80*4)/5=192像素。平板电脑显示如图21B中(2)所示的界面213,其中布局容器214中各个子控件的间距为192像素。
如图22所示,为又一种本申请实施例提供的应用界面自适应布局的方法示意图。开发人员在应用开发阶段,可以通过例如Xml文件的布局文件中设置均分能力相关的属性。例如,开启均分能力,设置均分类型,设置间距阈值A和间距阈值B等。后续,开发人员将布局文件以及其他的应用代码、资源等打包成安装包,上架到应用市场。后续,用户可以使用电子设备从应用市场上下载该安装包,并安装该应用。在电子设备运行该应用时,电子设备中的布局模块会从布局文件中解析与均分能力相关的属性,得到均分能力相关的属性值,并将该属性值发送给电子设备中的均分模块。而后,布局模块进行测量,并启动均分能力进程,即均分模块根据均分能力相关的属性值计算相关控件的参数,例如控件的尺寸等。布局模块根据更新后的控件的参数进行布局,得到应用中特定显示界面中控件的位置。最后,电子设备可以进行绘制并显示该特定显示界面。在一个具体示例中,均分模块可以执行上述图21A中的相关步骤。布局模块可以为Android系统原生的视图系统中的测量模块和布局模块。而均分模块则为本申请在为Android系统原生的视图系统中的测量模块中新增的功能模块。
四)隐藏能力
开发人员在开发应用时,添加自适应布局属性包的依赖后,可以在显示界面中设置具有隐藏能力的布局容器(即ViewGroup)。具体的,开发人员在编辑显示界面的布局文件时,可以通过在布局文件(例如xml文件)中设置ViewGroup的隐藏能力相关的属性值,或者在JAVA源码文件中通过添加调用接口的方式来设置ViewGroup的隐藏能力相关的属性值。
如表七所示,为与隐藏能力相关的属性示例。
表七
需要说明的是,开发人员可以设置布局容器的属性时,通过水平隐藏能力使能/垂直隐藏能力使能开启该布局容器的水平隐藏能力/垂直隐藏能力。并且,还可以针对子控件(布局容器中的View或ViewGroup)设置隐藏优先级。后续,电子设备运行该应用,并绘制布局容器中的子控件时,若根据布局容器的尺寸,确定在水平方向/垂直方向上不能显示全部的子控件时,可以根据各个子控件的隐藏优先级确定隐藏的子控件,或者确定显示的子控件。而后,绘制该布局容器中的各个子控件,从而实现在电子设备上自适应布局。
还需要说明的是,表七中各个属性仅为示例。在其他一些实施例中,也可以设置隐藏能力使能,以及隐藏优先级。这样,当开启布局容器的隐藏能力后,可以根据子控件的隐藏优先级默认在布局容器的布局方向上确定隐藏的子控件。可选的,还可以设置隐藏能力的方向。当用户设置了隐藏能力的方向后,则根据子控件的隐藏优先级在指定方向上确定隐藏的子控件。本申请实施例对此不做限定。
以下,以表七为例,结合附图详细说明隐藏能力相关各个属性的含义,以及布局容器和子控件的显示效果。
在一些实施例中,可以开启布局容器的水平隐藏能力,并针对布局容器中的子控件分别设置水平隐藏优先级或水平显示优先级。这里以水平隐藏优先级为例进行说明。那么,在确定布局容器的宽度后,根据布局容器中水平排列的子控件的宽度,确定布局容器是否能够显示全部的子控件。若能,则显示全部的子控件。若不能,则进一步根据各个子控件的水平隐藏优先级确定隐藏的子控件,即布局容器中不显示的子控件。在一些示例中,电子设备运行应用时,不绘制该布局容器中确定隐藏的子控件,或者仅绘制该布局容器中确定显示的子控件。还需要说明的是,本申请中显示子控件,是指完整显示该子控件的内容,即显示该子控件的全部内容。
例如,设置某个布局容器中包括水平排列的6个子控件,分别为子控件A至子控件F。且这6个子控件的水平隐藏优先级从低到高的顺序为:(子控件A、子控件B、子控件D)<(子控件E、子控件F)<子控件C。其中,子控件A、子控件B和子控件D的水平隐藏优先级相同,子控件E和子控件F的水平隐藏优先级相同。
如图23中(1)所示,为电子设备1显示的布局容器的效果图。此时,由于电子设备1显示的布局容器的可用宽度≥布局容器中所有子控件宽度之和。其中,布局容器的可用宽度是指布局容器的总宽度-左右内边距。图23中(1)是以左右内边距为零为例进行说明的。因此,电子设备1上的布局容器可以水平显示全部的子控件(子控件A至子控件F)。
需要说明的是,若还设置有相邻子控件之间的间距,则布局容器中所有子控件宽度之和包括各个子控件本身的宽度,以及相邻子控件之间的间距。类似的,下文中在判断是否能够放置下多个子控件时,多个子控件的宽度之和包括多个子控件中相邻子控件之间的间距,以下将不再特别说明。其中,相邻子控件之间的间距可以相同,也可以不同。在一些示例中,相邻子控件之间的间距可以为布局文件中设置的固定值。在另一些示例中,布局容器中也可以设置相邻子控件之间的间距初值。根据相邻子控件之间的间距初值,以及各个子控件本身的宽度确定布局容器中隐藏的子控件或显示的子控件后,再根据布局容器的宽度以及显示的子控件的宽度调整相邻子控件之间的间距,本申请实施例对此不做限定。
当布局容器的可用宽度<布局容器中所有子控件宽度之和时,确定布局容器中不能显示全部的子控件。那么,根据布局容器的可用空间、各个子控件的宽度以及各个子控件的水平隐藏优先级确定隐藏的子控件,或者确定显示的子控件。
在一种技术方案中,当布局容器不能够显示全部的子控件时,按照子控件的水平隐藏优先级的顺序,优先隐藏布局容器中水平隐藏优先级高的子控件。
例如,如图23中(2)所示,电子设备2显示的布局容器的效果图。由于电子设备2显示的布局容器的可用宽度<布局容器中子控件宽度之和,优先隐藏布局容器中水平隐藏优先级最高的子控件(例如子控件C)。在隐藏子控件C后,电子设备2上的布局容器能够显示其他5个子控件,即子控件A、子控件B、子控件D至子控件F。
又例如,如图23中(3)所示,电子设备3显示的布局容器的效果图。由于电子设备3显示的布局容器的可用宽度<布局容器中子控件宽度之和,优先隐藏布局容器中水平隐藏优先级最高的子控件(例如子控件C)。再根据其他子控件(如子控件A、子控件B、子控件D至子控件F))的宽度,确定布局容器仍不能够全部显示这5个子控件。进一步的,再确定隐藏布局容器中水平隐藏优先级仅次于子控件C的子控件(如子控件E和子控件F)。那么,再根据其他子控件(子控件A、子控件B、以及子控件D)的宽度,确定布局容器能够全部显示这3个子控件。那么,电子设备3显示该3个子控件。
需要说明的是,在一些示例中,水平隐藏优先级相同的多个子控件同时隐藏或同时显示。例如,子控件E和子控件F为水平隐藏优先级相同的子控件。那么,子控件E和子控件F同时显示在布局容器中,或同时不显示在布局容器中。在另一些示例中,在水平隐藏优先级相同的多个子控件之间,也可以确定其中排列在后的子控件优先于排列在前的子控件优先隐藏。例如,子控件E和子控件F为水平隐藏优先级相同的子控件。在确定隐藏子控件时,子控件F优先于子控件E被隐藏。也就是说,当确定电子设备3不能全部显示5个子控件(子控件A、子控件B、以及子控件D至子控件F)时,进一步确定隐藏子控件F。那么确定布局容器是否能够全部显示其他子控件(子控件A、子控件B、子控件D和子控件E)。若确定能够显示该4个子控件,则如图23中(4)所示,布局容器中显示该4个子控件。当然,针对水平隐藏优先级相同的子控件,也可以采用其他方法确定优先隐藏的子控件或者随机确定,本申请实施例对此不做限定。
需要说明的是,这里子控件的排列顺序的先后可以根据用户阅读文字的习惯确定,例如具体可以根据子控件上显示的文字的语种确定用户的阅读习惯。一般,对于中文英文等语言,用户习惯从左至右,从上至下地阅读,因此,针对水平排列的多个子控件,左侧子控件可认为是排列在先,右侧的子控件为排列在后。针对垂直排列的多个子控件,上方的子控件可认为是排列在先,下侧的子控件为排列在后。而对于另一些语言,针对水平排列的多个子控件,后侧子控件可认为是排列在先,左侧的子控件为排列在后;针对垂直排列的多个子控件,下方的子控件可认为是排列在先,上侧的子控件为排列在后。另外,也可以让用户设置水平排列的多个子控件以左侧还是右侧为排列在先,和/或设置垂直排列的多个子控件以上侧还是下侧为排列在先。以上关于子控件的排列顺序仅为示例,本申请不对此进行限定。
在另一种技术方案中,当布局容器不能够显示全部的子控件时,按照子控件的水平隐藏优先级的顺序,依次计算布局容器中能够显示的子控件。
具体的,根据子控件的水平隐藏优先级的顺序,从低到高,依次确定每一次计算待确定是否显示的子控件,简称为待确定的子控件。其中,每一次计算待确定的子控件的水平隐藏优先级相同。在每一次计算过程中,若布局容器的可用宽度-已确定显示的子控件的宽度之和≥本次计算待确定的子控件的宽度之和,确定布局容器中能够显示本次计算待确定的子控件。若确定布局容器的可用宽度<本次计算待确定的子控件的宽度之和,确定布局容器中不能够显示本次计算待确定的子控件。
另外,若布局容器的可用宽度-已确定显示的子控件的宽度之和>本次计算待确定的子控件的宽度之和,还需要进一步确定布局容器中是否还可以放置其他子控件。确定水平隐藏优先级高于本次待确定的子控件的其他子控件作为下一次计算的待确定子控件。
若布局容器的可用宽度-已确定显示的子控件的宽度之和=本次计算待确定的子控件的宽度之和,说明除本次计算待确定的子控件外,布局容器不能再显示更多的子控件了。
以下结合实例具体说明。为了简化说明,用w(M)标识子控件M的宽度,其中M为变量。例如,w(A)表示子控件A的宽度。
例如,如图23中(2)所示,电子设备2显示的布局容器的可用宽度<布局容器中子控件宽度之和。
首先,确定布局容器中水平隐藏优先级最低(或者水平显示优先级最高)的子控件(如子控件A、子控件B和子控件D)为最先显示的子控件,为本次计算待确定的子控件。由于电子设备2的布局容器的可用空间>∑[w(A),w(B),w(D)],那么确定布局容器中能够显示子控件A、子控件B和子控件D。而且,还需要进一步确定是否还可以显示其他子控件。
需要说明的是,若确定布局容器的可用宽度=∑[w(A),w(B),w(D)],则布局容器中仅能够显示子控件A、子控件B和子控件D。
进一步的,确定水平隐藏优先级略高的其他子控件(例如,子控件E和子控件F)为本次计算待确定的子控件。当确定布局容器的可用宽度-∑[w(A),w(B),w(D)]≥∑[w(E),w(F)]时,确定布局容器中还能够显示子控件E和子控件F。此时,布局容器的可用宽度-∑[w(A),w(B),w(D)]>∑[w(E),w(F)],还需要进一步确定是否还可以显示其他子控件。
需要说明的是,若确定布局容器的可用宽度-∑[w(A),w(B),w(D)]=∑[w(E),w(F)],则布局容器中仅能够显示子控件A、子控件B、子控件D、子控件E和子控件F。
进一步的,确定水平隐藏优先级再高一些的其他子控件(例如,子控件C)是否能够显示在布局容器中。此时,布局容器的可用宽度-∑[w(A),w(B),w(D),w(E),w(F)]<w(C),则布局容器中不能再显示子控件C。
综上,电子设备2的布局容器中显示子控件A、子控件B、以及子控件D至子控件F,共5个子控件。
又例如,如图23中(2)所示,电子设备2显示的布局容器的可用宽度<布局容器中子控件宽度之和。
首先,确定布局容器中水平隐藏优先级最低的子控件(如子控件A、子控件B和子控件D)为最先显示的子控件,为本次计算待确定的子控件。由于电子设备2的布局容器的可用空间>∑[w(A),w(B),w(D)],那么确定布局容器中能够显示子控件A、子控件B和子控件D。而且,还需要进一步确定是否还可以显示其他子控件。
进一步的,确定水平隐藏优先级略高的其他子控件(例如,子控件E和子控件F)为本次计算待确定的子控件。确定布局容器的可用宽度-∑[w(A),w(B),w(D)]<∑[w(E),w(F)],确定布局容器中不能够显示子控件E和子控件F。此时,布局容器中仅显示子控件A、子控件B和子控件D。
在另一些实施例中,可以开启布局容器的垂直隐藏能力,并针对布局容器中的子控件分别设置垂直隐藏优先级或垂直显示优先级。那么,在确定布局容器的高度后,根据布局容器中垂直排列的子控件的宽度,确定布局容器是否能够显示全部的子控件。若能,则显示全部的子控件。若不能,则进一步根据各个子控件的垂直隐藏优先级确定隐藏的子控件,即布局容器中不显示的子控件。其中,垂直隐藏能力的具体实现方法可参考水平隐藏能力中的相关内容,这里不再赘述。
在一种具体实现中,可以针对包含多个子控件的布局容器设置隐藏能力。子控件例如为文本控件、按钮控件、图片控件、图标按钮控件(ImageButton View)等。当布局容器的宽度或高度发生变化时,可以自动确定隐藏布局容器中的部分子控件,从而满足具有不同屏幕尺寸电子设备的显示需求。可见,本方案的隐藏能力能实现具有不同屏幕参数的电子设备可以根据相同的布局设置呈现不同的显示效果,在减少开发人员的开发和维护的工作量的同时,满足各种类型电子设备的显示需求。
以下,给出一个布局文件(xml文件)的示例,该布局文件中设置有开启隐藏能力的布局容器,且该布局容器中包括四个子控件,分别为四个图片控件。
上述实施例,是开发人员通过在布局文件(例如xml文件)中设置布局容器的隐藏能力相关的属性值,设计显示界面自适应布局的方案。也可以通过在JAVA源码文件中通过添加调用接口的方式来设置布局容器的隐藏能力相关的属性值。
如表八所示,为设置布局容器的隐藏能力相关的属性值相对应的接口的示例。
表八
以上详细介绍了隐藏能力的含义。开发人员可以根据应用中每个显示界面的布局设计,结合隐藏能力、其他自适应布局能力以及基本的布局能力(例如Android原生的属性)配置好布局文件,将布局文件与应用的其他的源代码以及资源等打包成安装包(例如APK文件),并上架到应用市场。电子设备从应用市场下载该安装包,并安装该应用。以下,详细说明电子设备运行该应用时,如何根据上述布局文件实现自适应布局的方案。
具体的,手机针对布局文件中的每一个布局容器执行如图24A所示测量流程,该方法具体包括:
S2400、获取布局容器的布局参数。
布局容器的布局参数包括是否开启水平隐藏能力、垂直隐藏能力、布局容器的尺寸、内边距等。
S2401、确定布局容器开启水平隐藏能力,获取布局容器包含的所有子控件。
这里以布局容器开启水平隐藏能力为例进行说明。获取布局容器包含的所有子控件以及各个子控件对应的布局参数。各个子控件对应的布局参数包括各个子控件尺寸的属性值,以及各个子控件对应的水平隐藏优先级或水平显示优先级。在一些示例中,若某个子控件未设置隐藏优先级,可认为该子控件为隐藏优先级最低的子控件,或者为需要显示的子控件。
S2402、对布局容器中所有子控件进行测量,保存各个子控件的宽度。
根据各个子控件的布局参数(除水平隐藏优先级外的其他布局参数),以及从布局容器传递的参数等,对布局容器中所有子控件进行初始测量(如按照Android原始测量流程进行测量),得到各个子控件的宽度,并保存。
S2403、按照各个子控件的水平隐藏优先级确定多个批次的子控件。从水平隐藏优先级最低的一批子控件开始计算这一批次子控件的宽度之和。
换言之,将水平隐藏优先级相同的一个或多个子控件确定为一批次的子控件。按照水平隐藏优先级从低到高的顺序,分批次确定布局容器中显示的子控件。第一批次的子控件为水平隐藏优先级最低的一批子控件,计算这一批子控件的宽度之和。
S2404、判断布局容器的可用空间<已确定显示的子控件和本批次子控件的宽度之和。若小于,则执行步骤S2405。若不小于,则执行步骤S2406。
其中,布局容器的可用空间=布局容器的宽度-左右内边距。在计算第一批次子控件时,没有已确定显示的子控件。
若布局容器的可用空间<已确定显示的子控件和本批次子控件的宽度之和,表明布局容器的可用空间不能放置下本批次子控件,即执行步骤S2405。若布局容器的可用空间≥已确定显示的子控件和本批次子控件的宽度之和,表明布局容器的可用空间能够放置下本批次子控件。
需要说明的是,若还设置有子控件的间距,则判断时,还需要加上已确定显示的子控件之间的间距,以及本批次子控件之间的间距。
S2405、确定布局容器中不显示本批次子控件,也不显示隐藏优先级高于本批次子控件的其他子控件。
测量流程结束。
S2406、确定布局容器中显示本批次的子控件。
S2407、判断是否遍历所有批次的子控件。若已遍历,则测量流程结束。若未遍历完,执行步骤S2408。
S2408、计算隐藏优先级高于本批次子控件的下一批次子控件的宽度之和。而后,执行步骤S2404。
上述是开启水平隐藏能力为例进行说明的。若开启垂直隐藏能力,则需要根据布局容器的高度以及各个子控件的高度进行计算和判断。其余内容可以参考图24A中的相关描述。
如图24B所示,为本申请实施例提供的另一种布局容器的测量方法的流程示意图。即,上述步骤S2403-步骤S2408替换为步骤S2409-步骤S2415。具体如下:
S2400、获取布局容器的布局参数。
布局容器的布局参数包括是否开启水平隐藏能力、垂直隐藏能力、布局容器的尺寸、内边距等。
S2401、确定布局容器开启水平隐藏能力,获取布局容器包含的所有子控件。
这里以布局容器开启水平隐藏能力为例进行说明。获取布局容器包含的所有子控件以及各个子控件对应的布局参数。各个子控件对应的布局参数包括各个子控件尺寸的属性值,以及各个子控件对应的水平隐藏优先级或水平显示优先级。在一些示例中,若某个子控件未设置隐藏优先级,可认为该子控件为隐藏优先级最低的子控件,或者为需要显示的子控件。
S2402、对布局容器中所有子控件进行测量,保存各个子控件的宽度。
根据各个子控件的布局参数(除水平隐藏优先级外的其他布局参数),以及从布局容器传递的参数等,对布局容器中所有子控件进行初始测量(如按照Android原始测量流程进行测量),得到各个子控件的宽度,并保存。
S2409、判断布局容器的可用空间≥所有子控件的宽度之和。若满足,执行步骤S2410,否则执行步骤S2411。
若还设置有子控件之间的间距,判断时不等式右侧还需要加上子控件间的间距之和。
S2410、布局容器中显示所有子控件。
测量流程结束。
S2411、按照各个子控件的水平隐藏优先级确定多个批次子控件。首先隐藏水平隐藏优先级最高的一批子控件。
S2412、判断布局容器的可用空间≥所有子控件的宽度之和-确定隐藏的子控件的宽度之和。若满足,则执行步骤S2413。否则,执行步骤814。
若还设置有子控件的间距,判断时,不等式右侧还需要加上除去确定隐藏子控件之外其他子控件之间的间距。
S2413、布局容器中显示除确定隐藏的子控件之外的其他子控件。
测量结束。
S2414、判断是否遍历所有批次的子控件。若是,测量流程结束,若否,则执行步骤S2415。
S2415、确定隐藏水平隐藏优先级低于本批次子控件的下一批子控件。而后,执行步骤S2412。
可以理解的是,不同屏幕尺寸的电子设备(例如手机和平板电脑)在使用同一布局文件(包括有设置有隐藏能力的布局容器),按照上述图24A或者图24B的测量流程,最终绘制的应用界面会呈现出不同的布局效果。
例如,手机的屏幕宽度为720像素,平板电脑的屏幕宽度为1280像素。手机和平板电脑均使用同一安装包安装音乐应用。其中该音乐应用的播放页面对应的布局文件中包括用于控制播放的布局容器,该布局容器开启隐藏能力。其中,该布局容器包括水平方向布局的5个子控件(分别为“上一首”控件、“播放/暂停”控件、“下一首”控件、“更多”控件以及“收藏”控件)。且,设置的隐藏优先级由低向高的排列为:(“上一首”控件、“播放/暂停”控件、“下一首”控件)<“更多”控件<“收藏”控件。并且,该5个子控件的宽度相等为100像素,且子控件的间距为180像素。布局容器的内边距设置为0像素。
那么,当手机在绘制音乐应用的播放页面时,针对该布局容器执行上述图24A(以图24A为例)中的测量流程时,手机确定第一批次显示的子控件为“上一首”控件、“播放/暂停”控件、“下一首”控件,且计算这三个子控件的宽度之和以及这三个子控件之间的间距总共需占据的宽度为100*3+180*2=660像素<手机的屏幕宽度720像素。故手机确定显示该三个子控件。此时,在显示该三个子控件后手机屏幕剩余宽度=720-660=60像素。根据隐藏优先级确定下一批的子控件,为“更多”控件。若需要再显示“更多”控件,还需占用的宽度为100+180=280像素>手机屏幕剩余的宽度60像素。因此,手机确定不显示本批次的子控件以及其他的子控件。手机显示如图25中(1)所示的界面251,其中布局容器252中显示有三个子控件:“上一首”控件、“播放/暂停”控件、以及“下一首”控件。
当平板电脑在绘制音乐应用的播放页面时,针对该布局容器执行上述图24A(以图24A为例)中的测量流程时,平板电脑计算确定第一批次显示的子控件为“上一首”控件、“播放/暂停”控件、“下一首”控件,且计算这三个子控件的宽度之和以及这三个子控件之间的间距总共需占据的宽度为100*3+180*2=660像素<平板电脑的屏幕宽度1280像素。故平板电脑确定显示该三个子控件。此时,在显示该三个子控件后平板电脑屏幕剩余的宽度=1280-660=620像素。根据隐藏优先级确定下一批的子控件,为“更多”控件。若需要再显示“更多”控件,还需占用的宽度为100+180=280像素<显示该三个子控件后平板电脑屏幕剩余宽度620像素。故平板电脑确定还显示该“更多”控件,此时平板电脑屏幕剩余的宽度为620-280=340像素。接着,根据隐藏优先级确定再下一批的子控件,为“收藏”控件。若需要再显示“收藏”控件,则还需占用的宽度为100+180=280像素<平板电脑屏幕剩余宽度340像素。故平板电脑确定还显示该“更多”控件。平板电脑显示如图25中(2)所示的界面253,其中布局容器254中显示有五个子控件:“上一首”控件、“播放/暂停”控件、以及“下一首”控件、“更多”控件以及“收藏”控件。
如图26所示,为又一种本申请实施例提供的应用界面自适应布局的方法示意图。开发人员在应用开发阶段,可以通过例如Xml文件的布局文件中设置隐藏能力相关的属性。例如,开启水平隐藏能力或垂直隐藏能力,设置各个子控件的水平隐藏优先级或垂直隐藏优先级。后续,开发人员将布局文件以及其他的应用代码、资源等打包成安装包,上架到应用市场。后续,用户可以使用电子设备从应用市场上下载该安装包,并安装该应用。在电子设备运行该应用时,电子设备中的布局模块会从布局文件中解析与隐藏能力相关的属性,得到隐藏能力相关的属性值,并将该属性值发送给电子设备中的隐藏模块。而后,布局模块进行测量,并启动隐藏能力进程,即隐藏模块根据隐藏能力相关的属性值计算相关控件的参数,例如控件的尺寸等。布局模块根据更新后的控件的参数进行布局,得到应用中特定显示界面中控件的位置。最后,电子设备可以进行绘制并显示该特定显示界面。在一个具体示例中,隐藏模块可以执行上述图24A中的相关步骤。布局模块可以为Android系统原生的视图系统中的测量模块和布局模块。而隐藏模块则为本申请在为Android系统原生的视图系统中的测量模块中新增的功能模块。
五)拉伸能力
开发人员在开发应用时,添加自适应布局属性包的依赖后,可以在显示界面中设置具有拉伸能力的ViewGroup。具体的,开发人员在编辑显示界面的布局文件时,可以通过在布局文件(例如xml文件)中设置ViewGroup的拉伸能力相关的属性值,或者在JAVA源码文件中通过添加调用接口的方式来设置ViewGroup的拉伸能力相关的属性值。
如表九所示,为与拉伸能力拉伸能力相关的属性示例。
表九
需要说明的是,开发人员可以设置布局容器的属性时,通过拉伸能力使能开启该布局容器的拉伸能力。然后,针对布局容器中包含的子控件(即布局容器中存放的View或ViewGroup)设置子控件的宽度为“match_parent”,和/或,设置子控件的高度为“match_parent”。后续,电子设备运行该应用,并绘制该子控件时,会根据布局容器的尺寸对子控件进行拉伸。
例如,设置布局容器具有水平方向的拉伸能力时,当电子设备上布局容器的尺寸为720*1080像素时,子控件的尺寸可以为720*600像素。当电子设备上布局容器的尺寸为1280*800像素时,子控件的尺寸可以为1280*600像素。又例如,设置布局容器具有水平方向拉伸能力,且距左内边距和距右内边距均设置为10像素。当电子设备上布局容器的尺寸为720*1080像素时,子控件的尺寸可以为700*600像素。当电子设备上布局容器的尺寸为1280*800像素时,子控件的尺寸可以为1260*600像素。
以下,结合附图详细说明拉伸能力相关各个属性的含义,以及布局容器和子控件的显示效果。
一些实施例中,开发人员可以设置布局容器的水平拉伸使能打开,或者,设置布局容器的垂直拉伸使能打开,或者,设置布局容器的水平拉伸使能和垂直拉伸使能打开。
例如,如图27中(1)所示的界面中,子控件占满布局容器。开启布局容器的拉伸能力后,当布局容器的尺寸发生变化时,将对布局容器中的子控件在指定方向上进行拉伸。
一些示例中,设置布局容器水平拉伸能力使能的属性值为true。且,设置子控件的宽度为“match_parent”。那么,当布局容器的尺寸发生变化时,将子控件在水平方向上进行拉伸。即,如图27中(2)、图27中(3)以及图27中(4)所示,子控件的宽度随着布局容器的宽度自适应变化。
需要注意的是,若布局容器的高度也发生变化,则子控件根据自身设置的布局参数进行调整。例如,若子控件的高度为固定值,则子控件的高度保持固定值。随着布局容器的高度变化,子控件未占满布局容器垂直方向的空间,则也可以进一步设置子控件在垂直方向上的对齐方式。在垂直方式上的对齐方式包括垂直居中(如图27中(2)所示)、顶部对齐(如图27中(3)所示)、底部对齐。其中,顶部对齐,是指子控件的上边框与布局容器的上边框对齐。垂直居中,是指子控件的上边框与布局容器的上边框的距离,与子控件的下边框与布局容器的下边框的距离相等。底部对齐,是指子控件的下边框与布局容器的下边框对齐。当然,也可以设置子控件上边框与布局容器上边框的距离(即距上内边距)。那么,如图27中(4)所示,当容器尺寸的高度变化时,保持子控件上边框与布局容器上边框的距离为设置值,子控件下边框与布局容器下边框的距离随着布局容器的变化而变化。或者,设置子控件下边框与布局容器下边框的距离(即距下内边距)。那么,当容器尺寸的高度变化时,保持子控件下边框与布局容器下边框的距离为设置值,子控件上边框与布局容器上边框的距离随着布局容器的变化而变化。
若子控件的高度为match_parent,则子控件的高度随着布局容器变化而变化。
另一些示例中,设置布局容器垂直拉伸能力使能的属性值为true。且,设置子控件的高度为“match_parent”。那么,当布局容器的尺寸发生变化时,将子控件在垂直方向上进行拉伸。即,如图27中(5)、图27中(6)、图27中(7)所示,子控件的高度随着布局容器的高度自适应变化。
需要注意的是,若布局容器的宽度也发生变化,则子控件根据自身设置的布局参数进行调整。例如,若子控件的宽度为固定值,则子控件的宽度保持固定值。随着布局容器的宽度变化,子控件未占满布局容器水平方向的空间,则也可以进一步设置子控件在水平方向上的对齐方式。在水平方式上的对齐方式包括水平居中(如图27中(5)所示)、左对齐(如图27中(6)所示)、右对齐。其中,左对齐,是指子控件的左边框与布局容器的左边框对齐。水平居中,是指子控件的左边框与布局容器的左边框的距离,与子控件的右边框与布局容器的右边框的距离相等。右对齐,是指子控件的右边框与布局容器的右边框对齐。当然,也可以设置子控件左边框与布局容器左边框的距离(即距左内边距)。那么,如图27中(7)所示,当容器尺寸的宽度变化时,保持子控件左边框与布局容器左边框的距离为设置值,子控件右边框与布局容器右边框的距离随着布局容器的变化而变化。或者,设置子控件右边框与布局容器右边框的距离(即距右内边距)。那么,当容器尺寸的宽度变化时,保持子控件右边框与布局容器右边框的距离为设置值,子控件左边框与布局容器左边框的距离随着布局容器的变化而变化。又例如,若子控件的高度为match_parent,则子控件的高度随着布局容器变化而变化。
在又一些示例中,设置布局容器水平拉伸能力使能的属性值为true,子控件的宽度为“match_parent”;以及,设置布局容器的垂直拉伸能力使能的属性值均为true,设置子控件的高度为“match_parent”。那么,当布局容器的尺寸发生变化时,将子控件在水平方向和垂直方向上进行拉伸。即,如图27中(8)所示,子控件的高度随着布局容器的高度自适应变化,且子控件的宽度随着布局容器的宽度自适应变化。
由此可见,本申请实施例提供的拉伸能力,使得具有拉伸能力的布局容器中的子控件可以根据布局容器的变化自适应进行拉伸。从而实现具有不同屏幕参数的电子设备可以根据相同的布局设置呈现不同的显示效果,在减少开发人员的开发和维护的工作量的同时,满足各种类型电子设备的显示需求。例如,可以针对文本控件(例如TextView控件、EditText控件等),按钮控件(例如Button控件、ImageButton控件)等所在的布局容器设置拉伸能力。可以在布局容器的宽度和/或高度发生变化时,在指定方向自适应的拉伸,以满足显示需求。
在另一些实施例中,开发人员在设置开启布局容器的拉伸能力后,还可以设置布局容器在拉伸方向上的内边距。那么,布局容器中的子控件可以在保持与布局容器的内边距的情况下,随着布局容器尺寸的变化在指定方向进行拉伸。
例如,如图28中(1)所示,此时子控件未占满布局容器。开启布局容器的拉伸能力后,当布局容器的尺寸发生变化时,将对布局容器中的子控件在指定方向上进行拉伸。
一些示例中,设置布局容器水平拉伸能力使能的属性值为true。且,设置子控件的宽度为“match_parent”。还设置了水平方向的内边距。如,距左内边距和/或距右内边距。那么,如图28中(2)所示,当布局容器的尺寸发生变化时,保持子控件水平方向的内边距为设置值,并将子控件在水平方向上进行拉伸。即,子控件的宽度随着布局容器的宽度自适应变化。当然,开发人员也可以设置水平方向中任一个内边距,则未设置的另一个内边距默认为0dp。
需要说明的是,对于子控件在垂直方向的变化可参考图27中相关内容的描述,这里不再赘述。
另一些示例中,设置布局容器垂直拉伸能力使能的属性值为true。且,设置子控件的高度为“match_parent”。还设置了垂直方向的内边距。如,距上内边距和/或距下内边距。那么,如图28中(3)所示,当布局容器的尺寸发生变化时,保持子控件垂直方向的内边距为设置值,并将子控件在垂直方向上进行拉伸。即,子控件的宽度随着布局容器的高度自适应变化。当然,开发人员也可以设置垂直方向中任一个内边距,则未设置的另一个内边距默认为0dp。
需要说明的是,对于子控件在水平方向的变化可参考图27中相关内容的描述,这里不再赘述。
又一些示例中,设置布局容器水平拉伸能力使能的属性值为true,子控件的宽度为“match_parent”,设置水平方向的内边距;以及,设置布局容器的垂直拉伸能力使能的属性值均为true,设置子控件的高度为“match_parent”,设置垂直方向的内边距。那么,当布局容器的尺寸发生变化时,将子控件在水平方向和垂直方向上进行拉伸。即,如图28中(4)所示,子控件的高度随着布局容器的高度自适应变化,且子控件的宽度随着布局容器的宽度自适应变化。
由此可见,通过设置布局容器的内边距,保证布局容器中控件与布局容器的边缘保持一定距离,可以满足不同的显示需求。例如,可以通过保证布局容器中控件与布局容器的边缘保持一定距离,达到显示界面呈现杂志化的布局,如大留白,使得显示界面呈现杂志般的阅读感,提升用户的视觉体验。
在又一些实施例中,除了设置布局容器容器指定方向上的拉伸能力,以及指定方向上的内边距值之外,还可以针对布局容器的尺寸设置最值,例如最大宽度、最小宽度、最大高度和最小高度等。其中,最大宽度,是指布局容器中所有子控件在水平方向的宽度之和(包括子控件之间的水平方向的间距)能够达到的最大数值。最小宽度,是指布局容器中所有子控件在水平方向的宽度之和(包括子控件之间的水平方向的间距)能够达到的最小数值。最大高度,是指布局容器中所有子控件在垂直方向的高度之和(包括子控件之间的垂直方向的间距)能够达到的最大数值。最小高度,是指布局容器中所有子控件在垂直平方向的宽度之和(包括子控件之间的垂直方向的间距)能够达到的最小数值。需要说明是,当子控件拉伸过程中,当所有子控件的尺寸之和与布局容器设置的尺寸的最值发生冲突时,可以根据尺寸的最值确定子控件实际拉伸的比例。在又一些示例中,若未设置布局容器的尺寸最值时,也可以采用默认值。例如,默认最大宽度为无穷大。默认最小宽度为0dp。默认最大高度为无穷大。默认最小高度为0dp。当然,默认值也可以是其他值,本申请实施例不做限定。
由此可见,通过设置布局容器的尺寸最值,可以避免布局容器中控件在指定方向出现过度放大或缩小的情况。例如,在指定方向不过度放大,可以保证布局容器中控件的信息不丢失,例如图片控件不发生失真或变形。在指定方向不过度缩小,可以保证布局容器中控件的内容不出现重叠,影响显示效果。
需要说明的是,上述子控件为View时,那么电子设备在运行应用时,根据布局容器的实际尺寸,按照布局容器的内边距、尺寸的最值,对View在指定方向上进行拉伸,并显示。上述控件为ViewGroup时,那么电子设备在运行应用时,采用相同的方法,对ViewGroup在指定方向上进行拉伸。需要注意的是,针对ViewGroup中嵌套的View或ViewGroup则采用该ViewGroup对应的属性进行布局。例如,若该ViewGroup也设置开启拉伸能力使能,则针对ViewGroup中嵌套的View或ViewGroup采用拉伸能力对应的方法进行绘制。又例如,若该ViewGroup未设置开启拉伸能力使能,则针对ViewGroup中嵌套的View或ViewGroup不采用拉伸能力对应的方法进行绘制。换言之,针对布局容器设置的拉伸能力可以作用到该布局容器中存放的子控件上,但不能作用到子控件内嵌套的View或ViewGroup上。
以下,给出一个布局文件(xml文件)的示例,该布局文件中设置有开启拉伸能力使能的布局容器,且该布局容器中包括一个子控件(按钮控件)。
为了更好理解本申请实施例中拉伸能力实现的自适应布局的效果,这里以具有不同屏幕尺寸的车机显示音乐播放界面为例进行说明。需要注意的是,这里音乐播放界面对应的布局文件相同,即音乐播放界面中View和ViewGroup的布局参数相同。
如图29中(1)所示,界面2901为车机1显示的音乐播放界面的示例。在界面2901中,布局容器2900设置了水平拉伸的能力。该布局容器2900中存放有多个按钮控件,如按钮控件2910、按钮控件2911和按钮控件2913。这些按钮控件的宽度设置为“match parent”,高度设置为固定值。那么,当布局容器2900的水平方向的尺寸发生变化时,这些按钮控件会在水平方向进行拉伸。
例如,如图29中(2)所示,界面2902为车机2显示的音乐播放界面的示例。随着车机2的屏幕尺寸相对于车机1的屏幕尺寸,宽度变宽了,布局容器2900的宽度也增加了。因此,车机2在显示音乐播放界面时,会对布局容器2900中的按钮控件(如按钮控件2910、按钮控件2911和按钮控件2913)进行水平方向的拉伸。在一些示例中,随着按钮控件的宽度增加,按钮控件中显示的资源(例如文字)也可以适应性增加。这些按钮控件的高度保持为设置的固定值。
上述实施例,是开发人员通过在布局文件(例如xml文件)中设置View或ViewGroup的拉伸能力相关的属性值,设计显示界面自适应布局的方案。也可以通过在JAVA源码文件中通过添加调用接口的方式来设置View或ViewGroup的拉伸能力相关的属性值。
如表十所示,为设置View或ViewGroup的拉伸能力相关的属性值相对应的接口的示例。
表十
以上详细介绍了拉伸能力的含义。开发人员可以根据应用中每个显示界面的布局设计,结合拉伸能力、其他自适应布局能力以及基本的布局能力(例如Android原生的属性)配置好布局文件,将布局文件与应用的其他的源代码以及资源等打包成安装包(例如APK文件),并上架到应用市场。电子设备从应用市场下载该安装包,并安装该应用。以下,详细说明电子设备运行该应用时,如何根据上述布局文件实现自适应布局的方案。
具体的,手机针对布局文件中的每一个布局容器执行如图30A所示测量流程,该方法具体包括:
S3001、获取布局容器宽度的测量模式和初始宽度。
一般,布局容器的测量模式和初始宽度由其父布局容器传递过来的参数MeasureSpec确定。其中,MeasureSpec表示的是一个32位的整数值,它的高2位表示测量模式(SpecMode),低30位表示某种测量模式下的规格大小(SpecSize),即初始宽度。
S3002、根据布局文件获取布局容器的宽度最值。
S3003、判断布局容器的水平拉伸能力是否开启。若开启,则执行步骤S3004,否则执行步骤S3011。
S3004、宽度最值更新为经过最值过滤后的宽度最值。
示例性的,手机确定布局文件中开发人员设置的布局容器的最大宽度是否大于或等于布局容器的最小宽度。若满足,若确认使用设置的布局容器的最大宽度和最小宽度。即,设置的布局容器的最大宽度和最小宽度经过最值过滤后的宽度最值。
S3005、判断布局容器的初始宽度是否大于最大宽度。若是,则执行步骤S3006,否则执行步骤S3007。
S3006、布局容器的宽度修改为最大宽度。
S3007、判断布局容器的初始宽度是否小于最小宽度。若是,则执行步骤S3008,否则执行步骤S3009。
S3008、布局容器的宽度修改为最小宽度。
S3009、采用原宽度测量模式和调整后的布局容器的宽度进行测量。
也就是说,此时仍采用步骤S3001中确定测量模式和经过步骤S3006或步骤S3008调整后的布局容器的宽度进行测量。
S3010、布局容器中子控件的宽度设置为match_parent。
也就是说,布局容器中子控件的宽度会随着布局容器的宽度变化而变化。
S3011、获取布局容器高度的测量模式和初始宽度。
同理,布局容器的测量模式和初始高度由其父布局容器传递过来的参数MeasureSpec确定。其中,MeasureSpec表示的是一个32位的整数值,它的高2位表示测量模式(SpecMode),低30位表示某种测量模式下的规格大小(SpecSize),即初始高度。
S3012、根据布局文件获取布局容器的高度最值。
S3013、判断布局容器的垂直拉伸能力是否开启。若开启,则执行步骤S3014,否则结束。
S3014、高度最值更新为经过最值过滤后的高度最值。
示例性的,手机确定布局文件中开发人员设置的布局容器的最大高度是否大于或等于布局容器的最小高度。若满足,若确认使用设置的布局容器的最大高度和最小高度。即,设置的布局容器的最大高度和最小高度经过最值过滤后的高度最值。
S3015、判断布局容器的初始高度是否大于最大高度。若是,则执行步骤S3016,否则执行步骤S3017。
S3016、布局容器的高度修改为最大高度。
S3017、判断布局容器的初始高度是否小于最小高度。若是,则执行步骤S3018,否则执行步骤S3019。
S3018、布局容器的高度修改为最小高度。
S3019、采用原高度测量模式和调整后的布局容器的高度进行测量。
也就是说,此时仍采用步骤S3011中确定测量模式和经过步骤S3016或步骤S3018调整后的布局容器的宽度进行测量。
S3020、布局容器中子控件的高度设置为match_parent。
也就是说,布局容器中子控件的高度会随着布局容器的高度变化而变化。
需要说明的是,上述测量流程仅为示例。其中部分步骤的顺序可以变化,也可以合并或简化等。例如,也可以先测量布局容器的高度,后测量布局容器宽度,即步骤S3011-步骤S3020可以在步骤S3001-步骤810之前或者同时执行。又例如,在确定布局容器初始尺寸是否大于最大尺寸,以及是否小于最小尺寸时,也可以交换确定顺序或同时执行。本申请实施例对扩展的测量流程的步骤不做限定。
可以理解的是,不同屏幕尺寸的电子设备(例如手机和平板电脑)在使用同一布局文件(包括有设置有拉伸能力的布局容器),按照上述图30A的测量流程,最终绘制的应用界面会呈现出不同的布局效果。
例如,手机的屏幕宽度为720像素,平板电脑的屏幕宽度为1280像素。手机和平板电脑均使用同一安装包安装音乐应用。其中该音乐应用的播放页面对应的布局文件中包括用于展示歌词的布局容器,且该布局容器开启水平拉伸能力。并且,该布局容器中包括水平方向布局的1个文本控件,用于显示歌词。其中,该布局容器的左右内边距为20像素,最大宽度为1000像素,最小宽度为500像素。
那么,当手机在绘制该音乐应用的播放页面时,执行上述图30A中的测量流程时,计算该布局容器的宽度为屏幕宽度-左右内边距=720-20-20=680像素。满足该布局容器最大宽度和最小宽度的要求。进一步,由于布局容器中的文本控件的宽度为match-parent,那么布局容器中的文本控件的宽度为680像素。手机显示如图30B中(1)所示的界面301,其中布局容器302中文本控件的宽度为680像素。若该布局容器还设置了垂直拉伸能力,则与计算布局容器宽度的方法类似,可计算布局容器以及布局容器中文本控件的高度,这里不再赘述。
当平板电脑在绘制音乐应用的播放页面时,执行上述图30A中的测量流程时,计算该布局容器的宽度为屏幕宽度-左右内边距=1280-20-20=1240像素。计算得到的布局容器的宽度(1240像素)>设置的最大宽度(1000像素),因此将该布局容器的宽度调整至设置的最大宽度1000像素。进一步,进一步,由于布局容器中的文本控件的宽度为match-parent,那么布局容器中的文本控件的宽度为1000像素。平板电脑显示如图30B中(2)所示的界面303,其中布局容器304中文本控件的宽度为1000像素。若该布局容器还设置了垂直拉伸能力,则与计算布局容器宽度的方法类似,可计算布局容器以及布局容器中文本控件的高度,这里不再赘述。
综上所述,应用的开发人员在开发应用阶段,在布局文件中,设置显示界面中View和ViewGroup设置有自适应布局能力(例如,延伸能力、占比能力、均分能力、隐藏能力、拉伸能力等)的属性。当具有不同屏幕参数的电子设备在安装该应用后,可以根据布局文件中View和ViewGroup的自适应布局能力的属性,结合自身的屏幕参数自动调整各个布局容器中的View和ViewGroup的尺寸和/或布局,实现显示界面的自适应布局。这样,开发人员仅需要设计一套布局文件,即可满足具有不同屏幕参数的电子设备的显示需求,有利于降低开发人员的开发成本以及维护成本。
另外,相较于应用安装包中需要携带多套布局文件的方案,本方案在应用安装包中携带一套布局文件,有利于提升电子设备下载应用安装包的流量成本和时间成本。并且,当电子设备安装该应用后,不需要保存其他多余的布局文件,提升了电子设备存储空间的利用率。
可以理解的是,本申请实施例扩展的多个自适应布局能力之间可以相互组合使用。例如,为同一应用界面中不同的对象(View或ViewGroup)设置不同的自适应布局能力的属性。或者,对同一个对象设置两个或两个以上自适应布局能力的属性。需要说明的是,在对同一对象设置两个或两个以上自适应布局能力的属性时,可以针对每个自适应布局能力分别设置布局容器开启或关闭自适应布局能力,也可以针对多个自适应布局能力统一开启或关闭布局容器的多个自适应布局能力,本申请对具体实现不做限定。可以理解的是,在实际的应用开发过程中,除了组合时出现冲突的情况外,上述自适应布局能力之间可以根据实际需求进行任意组合。例如,拉伸能力可以与隐藏能力、占比能力、均分能力和折行能力中任一个能力进行组合。缩放能力可以与隐藏能力、占比能力、均分能力和折行能力中任一个能力进行组合等等。这里给出几个自适应布局能力组合的一些示例。
1、拉伸能力+均分能力。
例如,为同一个对象设置拉伸能力和均分能力。如图31中(1)所示,界面3101为一种音乐播放界面。在界面3101中,布局容器3100设置了水平拉伸的能力。该布局容器3100中存放有多个子布局容器,如子布局容器3110、子布局容器3111和子布局容器3113。这些子布局容器的宽度设置为“match parent”,高度设置为固定值。除此之外,布局容器3100还设置了在垂直方向的均分能力。
例如,如图31中(2)所示,界面3103为车机2显示的音乐播放界面的示例。一方面,随着车机2的屏幕尺寸相对于图31中(1)所示的车机1的屏幕尺寸,宽度变宽了,布局容器3100的宽度也增加了。因此,车机2在显示音乐播放界面时,会对布局容器3100中的子布局容器(如子布局容器3110、子布局容器3111和子布局容器3113)进行水平方向的拉伸。另一方面,随着车机2的屏幕尺寸相对于车机1的屏幕尺寸,高度变高了,布局容器3100的宽度也增加了。但布局容器3100中子布局容器的高度保持为固定值。由于布局容器3100设置了垂直方向的均分能力,故布局容器3100中这些子布局容器的间距增加了,且保持子布局容器之间的间距相等。
2、拉伸能力+隐藏能力
例如,为同一个对象设置拉伸能力和隐藏能力。仍然以图31中(1)所示的音乐播放界面为例。在界面3101中,布局容器3100设置了水平拉伸的能力。该布局容器3100中存放有多个子布局容器,如子布局容器3110、子布局容器3111和子布局容器3113。这些子布局容器的宽度设置为“match parent”,高度设置为固定值。除此之外,布局容器3100还设置了在垂直方向的隐藏能力。
例如,如图31中(3)所示,界面3104为车机3显示的音乐播放界面的示例。一方面,随着车机3的屏幕尺寸相对于图31中(1)所示的车机1的屏幕尺寸,宽度变宽了,布局容器3100的宽度也增加了。因此,车机3在显示音乐播放界面时,会对布局容器3100中的子布局容器(如子布局容器3110、子布局容器3111和子布局容器3113)进行水平方向的拉伸。另一方面,随着车机3的屏幕尺寸相对于车机1的屏幕尺寸,高度变高了,布局容器3100的宽度也增加了。但布局容器3100中子布局容器的高度保持为固定值。由于布局容器3100设置了垂直方向的隐藏能力,故随着布局容器3100的高度增加,可以显示更多的子布局容器,例如显示子布局容器3113。其中,在界面3101中,车机1的屏幕较小时,子布局容器3113可以认为是被隐藏了。
综上,不同屏幕参数的电子设备根据同一个布局文件绘制了不同的显示界面。也就是说,不同屏幕参数的电子设备可以根据布局文件自适应调整显示界面的布局,满足不同的显示需求。
3、拉伸能力+缩放能力+隐藏能力
例如,为同一界面中的不同对象分别设置不同的自适应能力,例如拉伸能力、缩放能力以及隐藏能力。如图32中(1)所示,为手机运行音乐应用时,显示的播放界面3201。播放界面3201包括图片控件3202(显示专辑封面)、文本控件3203(显示歌曲信息)以及按钮控件组3204(包括上一首、播放、下一首、播放列表等按钮控件)。其中,图片控件3202设置有缩放能力(均设置了水平可用空间占比和垂直可用空间占比),文本控件3203设置有拉伸能力,按钮控件组3204设置有隐藏能力。
如图32中(2)所示,为平板运行音乐应用时,显示的播放界面3205。可见,平板的屏幕比手机的屏幕宽,但高度减小了,故根据图片控件3202对应的缩放能力,需对图片控件3202进行缩小。由于文本控件3203具有拉伸能力,故在平板的屏幕的宽度增加的情况下,文本控件3203的宽度也增加了。在平板的屏幕的宽度增加的情况下,按钮控件组3204显示的宽度增加,可以显示更多的按钮控件,即显示一些被隐藏的按钮控件(例如收藏控件)。换言之,当屏幕的宽/高发生变化时,缩放能力可以实现图片控件的缩放。与此同时,拉伸能力实现文本控件在屏幕的宽/高发生变化时自适应拉伸或收缩。隐藏能力实现按钮控件在屏幕宽/高发生变化时,自适应增加或减少显示的数量。
4、均分能力+折行能力
以图库应用的浏览界面为例进行说明。
如图33中(1)所示,为平板运行图库应用时,显示的浏览界面。浏览界面包括一个布局容器,该布局容器包括多个图片控件(显示照片或视频的缩略图)。该布局容器设置有折行能力和均分能力(例如为第二类型的均分能力)。此时,多个图片控件的宽度刚好为折行参考值。
如图33中(2)所示,为手机运行图库应用时,显示的浏览界面。首先,手机根据该布局容器内各个图片控件的折行参考值,确定该布局容器的行数,以及每一行显示的图片控件的数量。例如,确定在手机上每一行最多显示三个图片控件。那么,可以确定出手机上需要分两行显示这五个图片控件。又由于布局容器还设置了均分能力,因此手机在每一行显示图片控件时,还保持每一行图片控件均有相同的间距。可以注意到,在手机上,第二行显示的图片控件的数量小于第一行显示的图库控件的数量,第二行图片控件之间的间距大于第一行图片控件之间的间距。对比图33中(2)的浏览界面与图33中(1)的浏览界面,可发现,虽然手机的宽度相对平板减小了,每一行显示图片控件的数量减少了,且每一行图片控件之间的间距自适应调整了。
或者,如图33中(3)所示,为平板运行图库应用时,显示的另一种浏览界面。与图33中(2)所示的浏览界面不同之处在于:第二行图片控件显示方法。在图33中(2)所示的浏览界面中,平板根据第二行实际包含的子控件的数量,以及各个子控件的宽度,按照设置的均分类型重新计算相邻子控件之间的间距,并按照重新计算的间距进行显示。在图33中(3)所示的浏览界面中,平板直接根据第一行计算的间距,对第二行的子控件进行显示。即,第二行中相邻子控件之间的间距与第一行中相邻子控件之间的间距相等或近似。
可见,开发人员可以无需关注电子设备的屏幕尺寸,无需关心一行可以显示多少图片控件,而直接使用折行能力和均分能力使得电子设备自适应调整布局,且能自适应调整图片控件之间的间距,能够实现网格化效果。
5、均分能力+隐藏能力
以音乐应用的播放界面为例进行说明。
如图34中(1)所示,为平板运行音乐应用时,显示的播放界面。播放界面包括一个布局容器,该布局容器包括多个图片按钮控件(收藏、上一首、播放、下一首和播放列表)。该布局容器设置有均分能力(例如为第二类型的均分能力)和隐藏能力。其中,上一首、播放和下一首的隐藏优先级低于播放列表,播放列表的隐藏优先级又低于收藏。
如图34中(2)所示,为手机运行音乐应用时,显示的播放界面。相比较于平板,手机的宽度减少了,相应的,布局容器的宽度也减少。那么,手机先根据布局容器的宽度、以及各个图标按钮控件的宽度确定布局容器中不能显示全部的图标按钮控件。手机会根据图标按钮控件的隐藏优先级确定需要隐藏的图标按钮控件。首先,隐藏收藏的图标按钮控件,确定布局容器中可以显示下其余四个图标按钮控件。而后,手机根据其余四个图标按钮控件的尺寸,布局容器的尺寸确定四个图标按钮控件之间的间距。若布局容器不能显示四个图标按钮控件,则进一步确定还需要隐藏的图标按钮控件,依次类推。
这里给出一个同时开启均分能力和隐藏能力的布局文件的示例。
6、均分能力+缩放能力
仍然以图库应用的浏览界面为例进行说明。
如图35中(1)所示,为手机运行图库应用时,显示的浏览界面。图库应用包括一个布局容器,该布局容器包括多个图片控件(显示照片或视频的缩略图)。该布局容器设置有缩放能力,且每一个图片控件还设置了水平可用空间占比和垂直可用空间占比。该布局容器还设置有均分能力(例如第二类型的均分能力)。
如图35中(2)所示,为平板运行图库应用时,显示的浏览界面。相比手机,平板的宽度增加。根据布局容器的宽度、图片控件的水平可用空间占比和垂直可用空间占比,对图片控件进行放大。在确定放大后的图片控件的宽度后,基于布局容器的可用空间确定相邻的两个图片控件的间距。
7、隐藏能力+折行能力
以图库应用的浏览界面为例进行说明。
如图36中(1)所示,为平板运行图库应用时,显示的浏览界面。浏览界面包括一个布局容器,该布局容器包括多个图片控件(显示照片或视频的缩略图),分别为图片控件A至图片控件E。该布局容器设置有折行能力和隐藏能力。图片控件A和图片控件E的隐藏优先级最高,图片控件B和图片控件D次之,图片控件C最低。此时,多个图片控件的宽度刚好为折行参考值。
如图36中(2)所示,为平板分屏显示两个窗口的界面示意。其中左侧窗口用于显示图库应用的浏览界面。右侧窗口用于显示音乐应用的播放界面。由于用于显示图库应用的浏览界面的窗口尺寸变小,触发平板对布局容器的折行显示。根据该布局容器内各个图片控件的折行参考值,确定每一行只能显示一个图片控件。此时,图36中(2)所示的界面中刚好垂直显示这五个图片控件。若平板用于显示图库应用浏览界面的窗口的高度不足以显示五个图片控件时,将触发平板根据隐藏优先级的高低对这五个图片控件进行隐藏。如图36中(3)所示的界面,不再显示隐藏优先级最高的图片控件A和图片控件E。
以下,给出一个布局文件(xml文件)的示例,该布局文件中设置有开启隐藏能力的布局容器,且该布局容器中包括四个子控件,分别为四个图片控件。
8、占比能力+缩放能力
以图库应用的浏览界面为例进行说明。
如图37中(1)所示,为手机运行图库应用时,显示的浏览界面。图库应用包括一个布局容器,该布局容器包括多个图片控件(显示照片或视频的缩略图)。该布局容器设置有缩放能力(其中每一个图片空间未设置水平可用空间占比和垂直可用空间占比)。且该布局容器设置还设置有占比能力(例如设置水平方向的占比值,如33.33%)。
如图37中(2)所示,为平板运行图库应用时,显示的浏览界面。可见,每个图片控件将平板水平方向的可用空间均分(每个图片控件宽度为平板总宽度的1/3)。每个图片控件的缩放能力使得每个图片控件进行缩放,占满水平方向的可用空间。换言之,占比能力,控制着每个图片控件水平方向的大小。缩放能力则保证每个图片控件保证宽高比进行缩放,避免图片变形失真。
9、占比能力+缩放能力+折行能力
仍然以图库应用的浏览界面为例进行说明。
如图38中(1)所示,为平板运行图库应用时,显示的浏览界面。图库应用包括一个布局容器,该布局容器包括多个图片控件(显示照片或视频的缩略图)。该布局容器设置有缩放能力(其中图片控件未设置水平可用空间占比和垂直可用空间占比)。且该布局容器设置有水平方向的占比能力以及水平方向的折行能力。
如图38中(2)所示,为手机运行图库应用时,显示的浏览界面。首先,手机根据该布局容器内各个图片控件的折行参考值,确定每一行显示的图片控件的数量。例如,确定在手机上每一行只能显示三个图片控件。而后,按照水平方向的占比能力确定第一行三个图片控件的宽度,然后,根据图片控件的缩放能力,保持图片控件的形状进行缩放。其他行的图片控件的水平方向的占比参考第一行的图片控件的宽度。对比图38中(2)的浏览界面与图38中(1)的浏览界面,可发现,虽然手机的宽度相对平板减小了,但每一行的图片控件却放大了。
以下给出一个缩放能力、折行能力以及占比能力组合使用的xml文件的示例。
可以理解的是,上述组合形式仅为示例。针对上述自适应布局能力组合时出现冲突的情况,在应用开发者设计应用界面时,开发设备可以给出提示和建议。或者,在电子设备运行应用时,在测量某个对象(View或ViewGroup)时发现出现多个布局能力冲突时,可以采用相应的冲突解决方案。
示例性的,一般不能对同一界面中的同一个对象(View或ViewGroup)在同一方向上同时设置拉伸能力和缩放能力。若应用开发者在设置应用界面的布局文件时,针对同一个对象的同一方向上同时设置拉伸能力和缩放能力时,可以提示错误。或者,在应用开发者针对某一个对象设置拉伸能力(或缩放能力)后,缩放能力(或拉伸能力)的设置项被置灰,即无法设置。又或者,在电子设备在绘制该应用界面时,默认其中一个能力的设置生效,例如拉伸能力或缩放能力。还可以根据该对象的类型确定生效其中一个能力的设置生效。例如,该对象为图片控件时,默认生效缩放能力的设置,拉伸能力的设置为无效。又例如,该对象为文本控件时,默认生效拉伸能力的设置,缩放能力的设置为无效。又或者,电子设备可以向用户询问选择某一个能力的设置生效。
再示例性的,一般不能对同一界面中的同一个对象同时设置延伸能力和其他自适应布局能力。若应用开发者在设置应用界面的布局文件时,针对同一个对象设置延伸能力时,可以提供无法与其他自适应布局能力进行组合。或者,在应用开发者针对某一个对象设置延伸能力后,其余几个自适应布局能力的设置项被置灰,即无法设置。
再示例性的,一般不能对同一界面中的同一个对象在同一方向上同时设置占比能力和均分能力。若应用开发者在设置应用界面的布局文件时,针对同一个对象在同一方向上同时设置占比能力和均分能力时,可以提示错误。或者,在电子设备在绘制该应用界面时,默认其中一个能力的设置生效,或者根据该对象的类型确定生效其中一个能力的设置生效。例如,该对象包括一个控件或者多个不同类型的控件时,默认生效占比能力的设置。又例如,该对象包括多个同类型的控件时,默认生效均分能力的设置。
再示例性的,一般不能对同一界面中的同一个对象在同一方向上同时设置折行能力和隐藏能力。若应用开发者在设置应用界面的布局文件时,针对同一个对象在同一方向上同时设置折行能力和隐藏能力时,可以提示错误。或者,在应用开发者在设置应用界面的布局文件时,针对同一个对象在同一方向上同时设置折行能力和隐藏能力时,提示应用开发者为两个能力设置优先级。也就是说,后续电子设备在根据该布局文件绘制应用界面时,当发现针对同一个对象在同一方向上同时设置折行能力和隐藏能力后,可以根据应用开发者设置的优先级,选择根据优先级高的能力(例如折行能力)进行布局。换言之,此时优先级低的能力(例如隐藏能力)的设置未生效。可选的,若根据优先级高的能力进行布局时,确定布局容器在该方向上的空间不足以按照该优先级高的能力进行布局时,重新根据优先级低的能力进行布局。此时优先级高的能力的设置未生效。又或者,在电子设备在绘制该应用界面时,默认其中一个能力的设置生效,或者根据该对象的类型确定其中一个能力的设置生效,又或者根据用户的设置优先选择其中一个能力的设置生效。
可以理解的是,上述冲突解决方案可以独立使用,也可以进行组合,例如按照一定的优先策略进行组合。并且,上述解决方案或者解决方案的组合也可以适用于上述实施例之外的其他两个或两个以上能力组合时出现冲突时的情况。总而言之,本申请实施例对多个能力组合时出现冲突的解决方案并不做限定。
本申请实施例还提供一种芯片系统,如图39所示,该芯片系统包括至少一个处理器3901和至少一个接口电路3902。处理器3901和接口电路3902可通过线路互联。例如,接口电路3902可用于从其它装置(例如电子设备100的存储器)接收信号。又例如,接口电路3902可用于向其它装置(例如处理器3901)发送信号。示例性的,接口电路3902可读取存储器中存储的指令,并将该指令发送给处理器3901。当所述指令被处理器3901执行时,可使得电子设备执行上述实施例中的电子设备100(比如,手机)执行的各个步骤。当然,该芯片系统还可以包含其他分立器件,本申请实施例对此不作具体限定。
本申请实施例还提供一种装置,该装置包含在电子设备中,该装置具有实现上述实施例中任一方法中电子设备行为的功能。该功能可以通过硬件实现,也可以通过硬件执行相应的软件实现。硬件或软件包括至少一个与上述功能相对应的模块或单元。例如,检测模块或单元、显示模块或单元、确定模块或单元、以及计算模块或单元等。
本申请实施例还提供一种计算机存储介质,包括计算机指令,当计算机指令在电子设备上运行时,使得电子设备执行如上述实施例中任一方法。
本申请实施例还提供一种计算机程序产品,当计算机程序产品在计算机上运行时,使得计算机执行如上述实施例中任一方法。
本申请实施例还提供一种电子设备上的图形用户界面,所述电子设备具有显示屏、摄像头、存储器、以及一个或多个处理器,所述一个或多个处理器用于执行存储在所述存储器中的一个或多个计算机程序,所述图形用户界面包括所述电子设备执行如上述实施例中任一方法时显示的图形用户界面。
可以理解的是,上述电子设备等为了实现上述功能,其包含了执行各个功能相应的硬件结构和/或软件模块。本领域技术人员应该很容易意识到,结合本文中所公开的实施例描述的各示例的单元及算法步骤,本申请实施例能够以硬件或硬件和计算机软件的结合形式来实现。某个功能究竟以硬件还是计算机软件驱动硬件的方式来执行,取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能,但是这种实现不应认为超出本发明实施例的范围。
本申请实施例可以根据上述方法示例对上述电子设备等进行功能模块的划分,例如,可以对应各个功能划分各个功能模块,也可以将两个或两个以上的功能集成在一个处理模块中。上述集成的模块既可以采用硬件的形式实现,也可以采用软件功能模块的形式实现。需要说明的是,本发明实施例中对模块的划分是示意性的,仅仅为一种逻辑功能划分,实际实现时可以有另外的划分方式。
通过以上的实施方式的描述,所属领域的技术人员可以清楚地了解到,为描述的方便和简洁,仅以上述各功能模块的划分进行举例说明,实际应用中,可以根据需要而将上述功能分配由不同的功能模块完成,即将装置的内部结构划分成不同的功能模块,以完成以上描述的全部或者部分功能。上述描述的系统,装置和单元的具体工作过程,可以参考前述方法实施例中的对应过程,在此不再赘述。
在本申请实施例各个实施例中的各功能单元可以集成在一个处理单元中,也可以是各个单元单独物理存在,也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现,也可以采用软件功能单元的形式实现。
所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时,可以存储在一个计算机可读取存储介质中。基于这样的理解,本申请实施例的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来,该计算机软件产品存储在一个存储介质中,包括若干指令用以使得一台计算机设备(可以是个人计算机,服务器,或者网络设备等)或处理器执行本申请各个实施例所述方法的全部或部分步骤。而前述的存储介质包括:快闪存储器、移动硬盘、只读存储器、随机存取存储器、磁碟或者光盘等各种可以存储程序代码的介质。
以上所述,仅为本申请的具体实施方式,但本申请的保护范围并不局限于此,任何在本申请揭露的技术范围内的变化或替换,都应涵盖在本申请的保护范围之内。因此,本申请的保护范围应以所述权利要求的保护范围为准。
Claims (16)
1.一种应用界面的布局方法,其特征在于,电子设备安装第一应用的应用安装包,所述应用安装包包括第一布局文件,所述第一布局文件指示N个子控件及已开启的预设能力,所述N为正整数;所述预设能力包括延伸能力、占比能力、均分能力、拉伸能力、隐藏能力中的一种或者几种;所述方法包括:
所述电子设备接收用户在第一界面上的第一操作;
响应于接收到的所述第一操作,所述电子设备根据所述电子设备的设备参数和所述预设能力确定所述N个子控件的属性值,其中,所述电子设备的设备参数包括所述电子设备的屏幕类型取值、屏幕尺寸取值或运行状态取值中的至少一个,所述N个子控件的属性值用于指示所述N个子控件在第二界面中的大小和位置;
所述电子设备根据所述N个子控件的属性值在所述第二界面中显示所述N个子控件。
2.根据权利要求1所述的方法,其特征在于,所述第一布局文件包括与所述预设能力对应的预设参数,
所述电子设备根据所述电子设备的设备参数和所述预设能力确定所述N个子控件的属性值,包括:
所述电子设备根据所述电子设备的设备参数、所述预设能力以及所述预设参数确定所述N个子控件的属性值。
3.根据权利要求1或2所述的方法,其特征在于,所述电子设备的运行状态包括所述电子设备的横竖屏状态、分屏状态以及折叠状态中的一项或多项。
4.根据权利要求1-3任一项所述的方法,其特征在于,所述第一操作为启动所述第一应用的操作,或者跳转至所述第二界面的操作,或者切换所述电子设备的所述运行状态的操作中任一项。
5.根据权利要求1-4任一项所述的方法,其特征在于,所述预设能力为延伸能力;所述第一布局文件指示在第一布局容器的第一方向上排列所述N个子控件;所述第一方向为水平方向或垂直方向;
所述电子设备根据所述电子设备的设备参数和所述预设能力确定所述N个子控件的属性值,包括:
所述电子设备根据所述设备参数确定所述第一布局容器在所述第一方向上的尺寸;
根据所述第一布局容器在所述第一方向上的尺寸以及所述N个子控件在所述第一方向上的尺寸,确定所述N个子控件中的N1个子控件以及第N1+1个子控件,其中,N1小于N;
所述电子设备根据所述N个子控件的属性值在所述第二界面中显示所述N个子控件,包括:
所述电子设备根据所述N个子控件的属性值在所述第二界面中完全显示所述N1个子控件以及部分显示所述第N1+1个子控件。
6.根据权利要求5所述的方法,其特征在于,所述方法还包括:
接收到所述用户在所述第二界面上的第二操作;
响应于所述第二操作,显示第三界面,所述第三界面显示所述N个子控件中的第N1+2个子控件。
7.根据权利要求1-4任一项所述的方法,其特征在于,所述预设能力为占比能力,所述第一布局文件指示在第一布局容器的第一方向上排列所述N个子控件以及所述N个子控件中的第一子控件的占比值,所述第一方向为水平方向或垂直方向;
所述电子设备根据所述电子设备的设备参数和所述预设能力确定所述N个子控件的属性值,包括:
所述电子设备根据所述设备参数确定所述第一布局容器在第一方向上的尺寸;
根据所述第一布局容器在所述第一方向上的尺寸以及所述第一子控件的占比值,确定所述第一子控件在所述第一方向上的尺寸;
所述电子设备根据所述N个子控件的属性值在所述第二界面中显示所述N个子控件,包括:
所述电子设备根据所述N个子控件的属性值在所述第二界面中显示所述第一子控件。
8.根据权利要求1-4任一项所述的方法,其特征在于,所述预设能力为均分能力,所述第一布局文件指示在所述第一布局容器的第一方向上排列所述N个子控件、所述N个子控件中每个子控件在所述第一方向上的尺寸以及所述第一布局容器在所述第一方向上的内边距;
所述电子设备根据所述电子设备的设备参数和所述预设能力确定所述N个子控件的属性值,包括:
所述电子设备根据所述设备参数确定所述第一布局容器在所述第一方向上的尺寸;
根据所述第一布局容器在所述第一方向上的尺寸,所述N个子控件中每个子控件在所述第一方向上的尺寸以及所述第一布局容器在所述第一方向上的内边距,确定第一间距,所述第一间距为相邻两个子控件之间的间距,所述相邻两个子控件之间的间距相等;
所述电子设备根据所述N个子控件的属性值在所述第二界面中显示所述N个子控件,包括:
所述电子设备根据所述N个子控件的属性值在所述第二界面中显示所述N个子控件,且相邻两个子控件的间距为所述第一间距。
9.根据权利要求1-4任一项所述的方法,其特征在于,所述预设能力为隐藏能力,所述第一布局文件指示在所述第一布局容器的第一方向上排列所述N个子控件、所述N个子控件中的每个子控件在所述第一方向上的尺寸以及所述第一布局容器在所述第一方向上的内边距;
所述电子设备根据所述电子设备的设备参数和所述预设能力确定所述N个子控件的属性值,包括:
所述电子设备根据所述设备参数确定所述第一布局容器在所述第一方向上的尺寸;
当第一尺寸大于第二尺寸时,从所述N个子控件中确定M个子控件,其中M为小于N的整数,所述第一尺寸为根据所述N个子控件在所述第一方向上的尺寸确定的;所述第二尺寸为根据所述第一布局容器在所述第一方向上的尺寸以及所述第一布局容器在所述第一方向上的内边距确定的;
所述电子设备根据所述N个子控件的属性值在所述第二界面中显示所述N个子控件,包括:
所述电子设备根据所述N个子控件的属性值在所述第二界面中显示所述M个子控件。
10.根据权利要求9所述的方法,其特征在于,所述第一布局文件还指示所述N个子控件的隐藏优先级,所述当第一尺寸大于第二尺寸时,从所述N个子控件中确定M个子控件,包括:
当所述第一尺寸大于所述第二尺寸时,根据所述N个子控件的隐藏优先级从所述N个子控件中确定M个子控件。
11.根据权利要求1-4任一项所述的方法,其特征在于,所述预设能力为拉伸能力,所述第一布局文件指示在所述第一布局容器的第二方向上排列所述N个子控件以及第一布局容器在第一方向上的第一阈值和/或第二阈值;其中所述第二方向与所述第一方向不同,所述第二阈值小于所述第一阈值;
所述电子设备根据所述电子设备的设备参数和所述预设能力确定所述N个子控件的属性值,包括:
所述电子设备根据所述设备参数确定所述第一布局容器在所述第一方向上的尺寸的初值;
若所述初值大于所述第一阈值,确定所述第一布局容器在所述第一方向上的尺寸为所述第一阈值;或者,若所述初值小于所述第二阈值,确定所述第一布局容器在所述第一方向上的尺寸为所述第二阈值;
根据所述第一布局容器在所述第一方向上的尺寸确定所述第一布局容器中的第一子控件在所述第一方向上的尺寸;其中,所述第一子控件为所述N个子控件中的一个;
所述电子设备根据所述N个子控件的属性值在所述第二界面中显示所述N个子控件,包括:
所述电子设备根据所述N个子控件的属性值在所述第二界面中显示所述第一子控件。
12.根据权利要求11所述的方法,其特征在于,所述根据所述第一布局容器在所述第一方向上的尺寸确定所述第一布局容器中的第一子控件在所述第一方向上的尺寸,包括:
确定所述第一子控件在所述第一方向上的尺寸与所述第一布局容器在所述第一方向上的尺寸相同;
或者,确定所述第一子控件在所述第一方向上的尺寸为所述第一布局容器在所述第一方向上的尺寸减去第一布局容器在所述第一方向的内边距。
13.根据权利要求1-12任一项所述的方法,其特征在于,所述N个子控件为文本控件、编辑控件、按钮控件、图片按钮控件中任一项。
14.一种电子设备,其特征在于,包括:处理器、存储器和触摸屏,存储器、触摸屏与处理器耦合,存储器用于存储计算机程序代码,计算机程序代码包括计算机指令,当处理器运行存储器中计算机指令,以使得所述电子设备执行如权利要求1-12任一项所述的方法。
15.一种计算机可读存储介质,其特征在于,包括计算机指令,当计算机指令在电子设备上运行时,使得电子设备执行如权利要求1-12任一项所述的方法。
16.一种计算机程序产品,其特征在于,包括计算机指令,当所述计算机指令在计算机上运行时,使得计算机执行如权利要求1-12任一项所述的方法。
Priority Applications (4)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
PCT/CN2021/118570 WO2022068594A1 (zh) | 2020-09-29 | 2021-09-15 | 一种应用界面的布局方法及电子设备 |
JP2023519551A JP2023545659A (ja) | 2020-09-29 | 2021-09-15 | アプリケーションインターフェースレイアウト方法および電子デバイス |
EP21874255.9A EP4209898A4 (en) | 2020-09-29 | 2021-09-15 | LAYOUT METHOD FOR AN APPLICATION INTERFACE AND ELECTRONIC DEVICE |
US18/191,378 US20230281025A1 (en) | 2020-09-29 | 2023-03-28 | Application Interface Layout Method and Electronic Device |
Applications Claiming Priority (16)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202011058008 | 2020-09-29 | ||
CN2020110580085 | 2020-09-29 | ||
CN2020111107883 | 2020-10-16 | ||
CN202011110788 | 2020-10-16 | ||
CN202011141053 | 2020-10-22 | ||
CN2020111427383 | 2020-10-22 | ||
CN2020111426499 | 2020-10-22 | ||
CN202011142649 | 2020-10-22 | ||
CN2020111410537 | 2020-10-22 | ||
CN202011142738 | 2020-10-22 | ||
CN2020111833283 | 2020-10-29 | ||
CN202011183328 | 2020-10-29 | ||
CN202011183319 | 2020-10-29 | ||
CN2020111833194 | 2020-10-29 | ||
CN202011189853 | 2020-10-30 | ||
CN2020111898536 | 2020-10-30 |
Publications (1)
Publication Number | Publication Date |
---|---|
CN114327701A true CN114327701A (zh) | 2022-04-12 |
Family
ID=81044278
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202110687153.8A Pending CN114327701A (zh) | 2020-09-29 | 2021-06-21 | 一种应用界面的布局方法及电子设备 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN114327701A (zh) |
Cited By (5)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN115328483A (zh) * | 2022-08-22 | 2022-11-11 | 北京达佳互联信息技术有限公司 | 业务功能入口的管理方法、装置、电子设备及存储介质 |
CN116048324A (zh) * | 2022-05-26 | 2023-05-02 | 荣耀终端有限公司 | 桌面管理方法、电子设备及存储介质 |
WO2023160489A1 (zh) * | 2022-02-22 | 2023-08-31 | 华为技术有限公司 | 一种应用程序的用户界面的处理方法以及相关设备 |
WO2023207694A1 (zh) * | 2022-04-28 | 2023-11-02 | 华为技术有限公司 | 一种显示方法、装置及存储介质 |
WO2023231818A1 (zh) * | 2022-05-28 | 2023-12-07 | 华为技术有限公司 | 一种应用界面显示方法及电子设备 |
Citations (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN103164197A (zh) * | 2011-12-14 | 2013-06-19 | 中兴通讯股份有限公司 | Ui布局自适应方法、移动设备以及布局生成设备 |
CN103488403A (zh) * | 2013-08-30 | 2014-01-01 | 小米科技有限责任公司 | 界面布局切换方法、装置和移动终端 |
CN105511725A (zh) * | 2015-12-09 | 2016-04-20 | 网易(杭州)网络有限公司 | 界面中控件的显示方法及装置 |
CN111651109A (zh) * | 2020-05-11 | 2020-09-11 | 广州视源电子科技股份有限公司 | 显示界面布局调整方法、装置、电子设备及存储介质 |
-
2021
- 2021-06-21 CN CN202110687153.8A patent/CN114327701A/zh active Pending
Patent Citations (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN103164197A (zh) * | 2011-12-14 | 2013-06-19 | 中兴通讯股份有限公司 | Ui布局自适应方法、移动设备以及布局生成设备 |
CN103488403A (zh) * | 2013-08-30 | 2014-01-01 | 小米科技有限责任公司 | 界面布局切换方法、装置和移动终端 |
CN105511725A (zh) * | 2015-12-09 | 2016-04-20 | 网易(杭州)网络有限公司 | 界面中控件的显示方法及装置 |
CN111651109A (zh) * | 2020-05-11 | 2020-09-11 | 广州视源电子科技股份有限公司 | 显示界面布局调整方法、装置、电子设备及存储介质 |
Cited By (7)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
WO2023160489A1 (zh) * | 2022-02-22 | 2023-08-31 | 华为技术有限公司 | 一种应用程序的用户界面的处理方法以及相关设备 |
WO2023207694A1 (zh) * | 2022-04-28 | 2023-11-02 | 华为技术有限公司 | 一种显示方法、装置及存储介质 |
CN116048324A (zh) * | 2022-05-26 | 2023-05-02 | 荣耀终端有限公司 | 桌面管理方法、电子设备及存储介质 |
CN116048324B (zh) * | 2022-05-26 | 2023-10-20 | 荣耀终端有限公司 | 桌面管理方法、电子设备及存储介质 |
WO2023231818A1 (zh) * | 2022-05-28 | 2023-12-07 | 华为技术有限公司 | 一种应用界面显示方法及电子设备 |
CN115328483A (zh) * | 2022-08-22 | 2022-11-11 | 北京达佳互联信息技术有限公司 | 业务功能入口的管理方法、装置、电子设备及存储介质 |
CN115328483B (zh) * | 2022-08-22 | 2024-03-19 | 北京达佳互联信息技术有限公司 | 业务功能入口的管理方法、装置、电子设备及存储介质 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN114327701A (zh) | 一种应用界面的布局方法及电子设备 | |
WO2022068594A1 (zh) | 一种应用界面的布局方法及电子设备 | |
US9760239B2 (en) | Control device and control method thereof | |
EP3379397B1 (en) | Display method and terminal | |
WO2022037432A1 (zh) | 一种显示界面的布局方法及电子设备 | |
RU2589392C2 (ru) | Гибкое устройство отображения и способ предоставления пользовательского интерфейса с помощью него | |
US20140179377A1 (en) | Mobile electronic device having program notification function and program notification method thereof | |
US8631349B2 (en) | Apparatus and method for changing application user interface in portable terminal | |
US9411561B2 (en) | Apparatus and method for changing theme of application in portable terminal | |
CN110941784A (zh) | 一种页面生成的方法及装置 | |
CN104904229A (zh) | 显示装置及其控制方法 | |
US20160210726A1 (en) | Method and device for adjusting page display | |
CN112612386B (zh) | 移动终端及其应用卡片的显示方法 | |
WO2023179428A1 (zh) | 一种界面的自适应显示方法及终端设备 | |
CN116450251A (zh) | 一种适配多设备的页面布局的方法及电子设备 | |
US20230229375A1 (en) | Electronic Device, Inter-Device Screen Coordination Method, and Medium | |
CN107077823B (zh) | 显示装置,显示系统,和显示控制程序 | |
CN113792328A (zh) | 权限管理方法、用户界面及电子设备 | |
WO2023109764A1 (zh) | 一种壁纸显示方法及电子设备 | |
CN115390935A (zh) | 主题资源处理方法及电子设备 | |
KR20170011363A (ko) | 디스플레이 장치 및 디스플레이 방법 | |
US20130227497A1 (en) | Apparatus and method for generating standby screen | |
JP2022511602A (ja) | マルチデプスイメージ表示装置及び方法 | |
CN113407082B (zh) | 应用于终端设备的字体颜色控制方法及相关装置 | |
CN116055715B (zh) | 编解码器的调度方法及电子设备 |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
PB01 | Publication | ||
PB01 | Publication | ||
SE01 | Entry into force of request for substantive examination | ||
SE01 | Entry into force of request for substantive examination |