CN118103809A - 页面显示方法、电子设备及计算机可读存储介质 - Google Patents
页面显示方法、电子设备及计算机可读存储介质 Download PDFInfo
- Publication number
- CN118103809A CN118103809A CN202280069500.3A CN202280069500A CN118103809A CN 118103809 A CN118103809 A CN 118103809A CN 202280069500 A CN202280069500 A CN 202280069500A CN 118103809 A CN118103809 A CN 118103809A
- Authority
- CN
- China
- Prior art keywords
- display screen
- layout file
- page
- displayed
- electronic device
- 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 81
- 230000006978 adaptation Effects 0.000 claims abstract description 109
- 238000004590 computer program Methods 0.000 claims description 19
- 230000000694 effects Effects 0.000 abstract description 26
- 239000010410 layer Substances 0.000 description 33
- 238000004891 communication Methods 0.000 description 25
- 230000006854 communication Effects 0.000 description 25
- 230000006870 function Effects 0.000 description 21
- 238000012545 processing Methods 0.000 description 21
- 238000011161 development Methods 0.000 description 18
- 230000002829 reductive effect Effects 0.000 description 13
- 238000010295 mobile communication Methods 0.000 description 12
- 238000010586 diagram Methods 0.000 description 11
- 230000008569 process Effects 0.000 description 11
- 238000009877 rendering Methods 0.000 description 9
- 238000007726 management method Methods 0.000 description 6
- 230000003287 optical effect Effects 0.000 description 5
- 238000013528 artificial neural network Methods 0.000 description 4
- 238000001514 detection method Methods 0.000 description 4
- 238000012423 maintenance Methods 0.000 description 4
- 230000004044 response Effects 0.000 description 4
- 230000001133 acceleration Effects 0.000 description 3
- 230000008859 change Effects 0.000 description 3
- 230000008878 coupling Effects 0.000 description 3
- 238000010168 coupling process Methods 0.000 description 3
- 238000005859 coupling reaction Methods 0.000 description 3
- 230000000670 limiting effect Effects 0.000 description 3
- 238000013341 scale-up Methods 0.000 description 3
- 229920001621 AMOLED Polymers 0.000 description 2
- 230000003416 augmentation Effects 0.000 description 2
- 230000003190 augmentative effect Effects 0.000 description 2
- 230000015572 biosynthetic process Effects 0.000 description 2
- 230000007774 longterm Effects 0.000 description 2
- 230000002093 peripheral effect Effects 0.000 description 2
- 238000003786 synthesis reaction Methods 0.000 description 2
- 230000000007 visual effect Effects 0.000 description 2
- 108010001267 Protein Subunits Proteins 0.000 description 1
- 230000003321 amplification Effects 0.000 description 1
- 230000007175 bidirectional communication Effects 0.000 description 1
- 238000013529 biological neural network Methods 0.000 description 1
- 230000005540 biological transmission Effects 0.000 description 1
- 210000004556 brain Anatomy 0.000 description 1
- 238000004422 calculation algorithm Methods 0.000 description 1
- 238000004364 calculation method Methods 0.000 description 1
- 230000000295 complement effect Effects 0.000 description 1
- 239000004020 conductor Substances 0.000 description 1
- 239000012792 core layer Substances 0.000 description 1
- 238000013500 data storage Methods 0.000 description 1
- 230000003247 decreasing effect Effects 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 238000001914 filtration Methods 0.000 description 1
- 230000004927 fusion Effects 0.000 description 1
- 230000005484 gravity Effects 0.000 description 1
- 230000001939 inductive effect Effects 0.000 description 1
- 230000003993 interaction Effects 0.000 description 1
- 239000010985 leather Substances 0.000 description 1
- 239000004973 liquid crystal related substance Substances 0.000 description 1
- 230000004807 localization Effects 0.000 description 1
- 229910044991 metal oxide Inorganic materials 0.000 description 1
- 150000004706 metal oxides Chemical class 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 210000002569 neuron Anatomy 0.000 description 1
- 238000003199 nucleic acid amplification method Methods 0.000 description 1
- 230000036961 partial effect Effects 0.000 description 1
- 239000002096 quantum dot Substances 0.000 description 1
- 230000009467 reduction Effects 0.000 description 1
- 230000002441 reversible effect Effects 0.000 description 1
- 239000004065 semiconductor Substances 0.000 description 1
- 230000003238 somatosensory effect Effects 0.000 description 1
- 230000005236 sound signal Effects 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
- 230000001360 synchronised effect Effects 0.000 description 1
- 230000002194 synthesizing effect Effects 0.000 description 1
- 238000012546 transfer Methods 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F1/00—Details not covered by groups G06F3/00 - G06F13/00 and G06F21/00
- G06F1/16—Constructional details or arrangements
- G06F1/1613—Constructional details or arrangements for portable computers
- G06F1/1633—Constructional details or arrangements of portable computers not specific to the type of enclosures covered by groups G06F1/1615 - G06F1/1626
- G06F1/1637—Details related to the display arrangement, including those related to the mounting of the display in the housing
- G06F1/1641—Details related to the display arrangement, including those related to the mounting of the display in the housing the display being formed by a plurality of foldable display components
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F1/00—Details not covered by groups G06F3/00 - G06F13/00 and G06F21/00
- G06F1/16—Constructional details or arrangements
- G06F1/1613—Constructional details or arrangements for portable computers
- G06F1/1633—Constructional details or arrangements of portable computers not specific to the type of enclosures covered by groups G06F1/1615 - G06F1/1626
- G06F1/1637—Details related to the display arrangement, including those related to the mounting of the display in the housing
- G06F1/1647—Details related to the display arrangement, including those related to the mounting of the display in the housing including at least an additional display
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F1/00—Details not covered by groups G06F3/00 - G06F13/00 and G06F21/00
- G06F1/16—Constructional details or arrangements
- G06F1/1613—Constructional details or arrangements for portable computers
- G06F1/1633—Constructional details or arrangements of portable computers not specific to the type of enclosures covered by groups G06F1/1615 - G06F1/1626
- G06F1/1637—Details related to the display arrangement, including those related to the mounting of the display in the housing
- G06F1/1652—Details related to the display arrangement, including those related to the mounting of the display in the housing the display being flexible, e.g. mimicking a sheet of paper, or rollable
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F1/00—Details not covered by groups G06F3/00 - G06F13/00 and G06F21/00
- G06F1/16—Constructional details or arrangements
- G06F1/1613—Constructional details or arrangements for portable computers
- G06F1/1633—Constructional details or arrangements of portable computers not specific to the type of enclosures covered by groups G06F1/1615 - G06F1/1626
- G06F1/1675—Miscellaneous details related to the relative movement between the different enclosures or enclosure parts
- G06F1/1677—Miscellaneous details related to the relative movement between the different enclosures or enclosure parts for detecting open or closed state or particular intermediate positions assumed by movable parts of the enclosure, e.g. detection of display lid position with respect to main body in a laptop, detection of opening of the cover of battery compartment
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
- G06F3/04817—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance using icons
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
- G06F3/0482—Interaction with lists of selectable items, e.g. menus
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/14—Digital output to display device ; Cooperation and interconnection of the display device with other functional units
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/14—Digital output to display device ; Cooperation and interconnection of the display device with other functional units
- G06F3/1423—Digital output to display device ; Cooperation and interconnection of the display device with other functional units controlling a plurality of local displays, e.g. CRT and flat panel display
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Computer Hardware Design (AREA)
- Software Systems (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本申请适用于终端技术领域,尤其涉及一种页面显示方法、电子设备及计算机可读存储介质。该方法中,在将第一显示屏对应的应用适用于第二显示屏的电子设备时,其中,第一显示屏的第一分辨率与第二显示屏的第二分辨率不相同,电子设备可以根据第二显示屏和预设适配规则对第一布局文件中的字体和/或图标等进行调整,以使得该应用的页面在第二显示屏中显示时的字体大小和/或图标大小等不会变得过大或过小,提高页面显示效果,提升用户体验。
Description
本申请要求于2021年10月22日提交国家知识产权局、申请号为202111237545.0、申请名称为“页面显示方法、电子设备及计算机可读存储介质”的中国专利申请的优先权,其全部内容通过引用结合在本申请中。
本申请属于终端技术领域,尤其涉及页面显示方法、电子设备及计算机可读存储介质。
随着电子设备的发展,电子设备显示屏的分辨率也在不断变化,为使得同一应用可以适用于不同分辨率的显示屏,开发人员需要针对不同的显示屏开发应用的不同版本,极大地增加了开发人员的开发工作量。目前,为降低开发工作量,开发人员可以针对任一分辨率的显示屏进行应用开发,而在其他分辨率的显示屏中适用该应用时,则可以按宽度或者按高度等比例缩放该应用的页面。这种按宽度或者按高度等比例缩放页面的方式会使得页面中的字体和/或图标等变得过大或者过小,造成页面显示不美观,影响用户体验。发明内容
本申请实施例提供了一种页面显示方法、电子设备及计算机可读存储介质,可以解决在不同分辨率的显示屏中页面的字体和/或图标等过大或者过小,造成页面显示不美观,影响用户体验的问题。
第一方面,本申请实施例提供了一种页面显示方法,应用于电子设备,所述电子设备包括第二显示屏,所述方法可以包括:
获取待显示页面对应的第一布局文件,所述待显示页面为第一显示屏对应的应用的页面,所述第一显示屏的第一分辨率与所述第二显示屏的第二分辨率不相同;
根据预设适配规则、所述第二显示屏和所述第一布局文件,将所述待显示页面显示于所述第二显示屏,所述预设适配规则为对所述第一布局文件中的字体、图标和图片中的至少一个进行调整的规则。
通过上述的页面显示方法,在将第一显示屏对应的应用适用于第二显示屏的电子设备时,电子设备可以根据第二显示屏和预设适配规则对第一布局文件中的字体和/或图标等进行调整,使得待显示页面在第二显示屏中显示时的字体大小和/或图标大小等与第二显示屏相适配,以解决待显示页面在第二显示屏中显示时的字体和/或图标等过大或过小的问题,提高页面显示效果,提升用户体验。而且,不需要开发人员开发并维护多个应用版本,极大地减少了开发人员的开发和维护工作量,具有较强的易用性和实用性。应理解,第一显示屏对应的应用可以是指基于第一显示屏的第一分辨率所开发的应用。
在一种可能的实现方式中,所述根据预设适配规则、所述第二显示屏和所述第一布局文件,将所述待显示页面显示于所述第二显示屏,可以包括:
确定所述第一布局文件是否与所述第二显示屏适配;
当所述第一布局文件未与所述第二显示屏适配时,根据所述预设适配规则、所述第二显示屏和所述第一布局文件,将所述待显示页面显示于所述第二显示屏。
在该实现方式提供的页面显示方法中,电子设备可以仅对应用中需要适配的待显示页面进行处理,并不会影响应用中已与第二显示屏适配的待显示页面,可以极大地提高页面显示效率,提高页面显示方法的鲁棒性。
在一个示例中,所述确定所述第一布局文件是否与所述第二显示屏适配,可以包括:
获取所述待显示页面对应的页面标签,并根据所述页面标签确定所述第一布局文件是否与所述第二显示屏适配。
在该实现方式提供的页面显示方法中,开发人员在进行页面时,可以添加页面标签,以标识该待显示页面是否与第二显示屏适配,因此,电子设备可以直接根据该待显示页面对应的页面标签来确定该待显示页面是否与第二显示屏适配,提高确定速度。
在另一个示例中,所述确定所述第一布局文件是否与所述第二显示屏适配,可以包括:
获取所述第一显示屏的第一分辨率和所述第二显示屏的第二分辨率,以及获取目标文本在所述第一布局文件中的字体大小和/或目标图标在所述第一布局文件中的图标大小,所述目标文本为所述待显示页面中的任一文本,所述目标图标为所述待显示页面中的任一图标;
当所述第一分辨率小于所述第二分辨率时,若所述目标文本在所述第一布局文件中的字体大小大于第一预设阈值,和/或所述目标图标在所述第一布局文件中的图标大小大于第三预设阈值时,确定所述第一布局文件未与所述第二显示屏适配;
当所述第一分辨率大于所述第二分辨率时,若所述目标文本在所述第一布局文件中的字体大小小于第二预设阈值,和/或所述目标图标在所述第一布局文件中的图标大小小于第四预设阈值时,确定所述第一布局文件未与所述第二显示屏适配。
在该实现方式提供的页面显示方法中,电子设备可以自动根据第一布局文件中的字体大小和/或图标大小确定该待显示页面是否与第二显示屏适配,不需要开发人员进行页面标签的设置,可以降低开发人员的开发工作量。此时,第一布局文件可以为根据第二显示屏和原有显示方式对原始布局文件进行处理后的布局文件。其中,原有显示方式是指开发人员设置的适配第二显示屏的显示方式,例如可以为按宽度或者高度等比例缩放的方式。
其中,第一预设阈值和第二预设阈值可以为相对于原始字体大小的比值,此时,对于任一文本,若该文本的字体大小与原始字体大小的比值大于第一预设阈值,可以认为字体过大;若该文本的字体大小与原始字体大小的比值小于第二预设阈值,可以认为字体过小。原始字体大小是指该待显示页面在第一显示屏中显示时的字体大小。
或者,可以分别为不同的文本设置不同的第一预设阈值和第二预设阈值,此时第一预设阈值和第二预设阈值可以为具体数值或比值。即任一文本均具有对应的第一预设阈值和第二预设阈值。因此,对于任一文本,可以根据该文本所对应的第一预设阈值和第二预设阈值来确定该文本是否字体过大或过小。
类似的,第三预设阈值和第四预设阈值也可以为相对于原始图标大小的比值,或者可以分别为不同的图标设置不同的第三预设阈值和第四预设阈值。原始图标大小是指该待显示页面在第一显示屏中显示时的图标大小。
在一种可能的实现方式中,所述根据预设适配规则、所述第二显示屏和所述第一布局文件,将所述待显示页面显示于所述第二显示屏,可以包括:
根据所述预设适配规则和所述第二显示屏对所述第一布局文件进行调整,得到第二布局文件;
根据所述第二布局文件将所述待显示页面显示于所述第二显示屏。
在一个示例中,当所述第一布局文件为所述待显示页面在所述第一显示屏中显示时的原始布局文件时,所述根据所述预设适配规则和所述第二显示屏对所述第一布局文件进行调整,得到第二布局文件,可以包括:
根据所述预设适配规则和所述第二显示屏调整所述第一布局文件中的图标排列,和/或,根据所述预设适配规则和所述第二显示屏调整所述第一布局文件中的图片大小或图片排列,得到所述第二布局文件。
在该实现方式提供的页面显示方法中,电子设备可以直接在原始布局文件的基础上进行布局调整,此时,电子设备可以仅调整图标排列或图片排列或图片大小,或者电子设备可以仅调整图标排列和图片排列, 或者电子设备可以仅调整图标排列和图片大小,或者电子设备可以仅调整图标排列、图片排列和图片大小,而不用对第一布局文件中的字体大小、图标大小和图片大小等进行调整,可以减少调整工作量,提高调整效率,提高页面显示速度。
可以理解的是,当第一布局文件为待显示页面在第一显示屏中显示时的原始布局文件时,电子设备也可以根据第一布局文件对该待显示页面进行渲染显示,并在渲染显示时,根据第二显示屏和预设适配规则来调整该待显示页面,此时电子设备还可以将该待显示页面在第二显示屏中显示时的布局文件保存为第二布局文件,后续再需要在第二显示屏中显示该待显示页面时,电子设备可以直接根据第二布局文件将该待显示页面渲染显示在电子设备的第二显示屏。
应理解,当第一布局文件为待显示页面在第一显示屏中显示时的原始布局文件时,电子设备也可以在确保该待显示页面在第二显示屏中显示时的第二字体大小与在第一显示屏中显示时的第一字体大小的变化差异较小的基础上,适当调整字体大小,例如将第二字体大小调整为第一字体大小的1.1倍,以提高页面显示效果。
类似的,电子设备也可以在确保该待显示页面在第二显示屏中显示时的第二图标大小与在第一显示屏中显示时的第一图标大小的变化差异较小的基础上,适当调整图标大小,例如将第二图标大小调整为第一图标大小的1.2倍,以提高页面显示效果。
类似的,对于小图片,电子设备也可以在确保该待显示页面在第二显示屏中显示时的第二图片大小与在第一显示屏中显示时的第一图片大小的变化差异较小的基础上,适当调整图标大小,以提高页面显示效果。
示例性的,所述根据所述预设适配规则和所述第二显示屏调整所述第一布局文件中的图片大小或图片排列,可以包括:
当所述第一布局文件中的图片宽度小于第一宽度阈值时,根据所述预设适配规则和所述第二显示屏调整所述第一布局文件中的图片排列;
当所述第一布局文件中的图片宽度大于或等于第一宽度阈值时,根据所述预设适配规则和所述第二显示屏调整所述待显示页面中的图片大小。
在该实现方式提供的页面显示方法中,在待显示页面中包含的图片较小时,电子设备可以像调整图标一样调整图片,使得第二显示屏可以显示较多内容。在待显示页面中包含的图片较大时,电子设备则可以不调整图片排列,仅调整图片大小,以使得图片与第二显示屏适配,提高页面显示效果。
在另一个示例中,当所述第一布局文件为根据所述第二显示屏对原始布局文件等比例缩放后的布局文件时,所述根据所述预设适配规则和所述第二显示屏对所述第一布局文件进行调整,得到第二布局文件,可以包括:
根据所述预设适配规则和所述第二显示屏调整所述第一布局文件中的字体大小,得到所述第二布局文件;和/或,
根据所述预设适配规则和所述第二显示屏调整所述第一布局文件中的图标大小和图标排列,得到所述第二布局文件。
示例性的,当所述第一显示屏的第一分辨率小于所述第二显示屏的第二分辨率时,所述第二布局文件中的字体大小为所述第一布局文件中的字体大小的α倍,α=h/(h+w);
当所述第一显示屏的第一分辨率大于所述第二显示屏的第二分辨率时,所述第二布局文件中的字体大小为所述第一布局文件中的字体大小的β倍,β=(h+w)/h;
其中,h为所述第二显示屏的高度,w为所述第二显示屏的宽度。
在该实现方式提供的页面显示方法中,电子设备可以在基于原有调整方式对原始布局文件进行调整后的基础上再进行布局调整,此时,可以根据预设适配规则和第二显示屏调整字体大小和/或图标大小,以使得该待显示页面在第二显示屏中显示时,不会存在字体过大或过小的问题,提高用户体验。另外,还可以根据预设适配规则和第二显示屏调整图标排列,以使得第二显示屏可以显示尽可能多的内容,提高页面显示效果。
在另一个示例中,当所述第一布局文件为根据所述第二显示屏对原始布局文件等比例缩放后的布局文件时,所述根据所述预设适配规则和所述第二显示屏对所述第一布局文件进行调整,得到第二布局文件,可以包括:
当所述第一布局文件中的图片宽度小于第二宽度阈值时,根据所述预设适配规则和所述第二显示屏调整所述第一布局文件中的图片大小和图片排列,得到所述第二布局文件。
在该实现方式提供的页面显示方法中,电子设备可以在基于原有调整方式对原始布局文件进行调整后的基础上再进行布局调整,此时,若该待显示页面包含图片,且图片较小时,电子设备还可以根据预设适配规则和第二显示屏调整图片大小和图片排列,提高页面显示效果,提升用户体验。
在一种可能的实现方式中,所述电子设备为具有折叠屏的电子设备,所述第一显示屏为所述折叠屏处于折叠态的显示屏,所述第二显示屏为所述折叠屏处于展开态的显示屏;或者,
所述第一显示屏为所述折叠屏处于展开态的显示屏,所述第二显示屏为所述折叠屏处于折叠态的显示屏。
该实现方式提供的页面显示方法可以应用于具有折叠屏的电子设备。示例性的,在将基于折叠态的显示屏开发的应用适用于具有折叠屏的电子设备时,若用户将折叠屏由折叠态切换至展开态,电子设备可以根据展开态的显示屏和预设适配规则对折叠态对应的第一布局文件进行调整,使得待显示页面中的字体和/或图标等不会变得过大,以提高页面显示效果,提升用户体验。当用户将折叠屏由展开态恢复至折叠态时,电子设备还可以将调整后的第一布局文件恢复至折叠态对应的第一布局文件,以将该待显示页面中的字体和/或图标等恢复至未调整前的状态。
类似的,在将基于展开态的显示屏开发的应用适用于具有折叠屏的电子设备时,若用户将折叠屏由展开态切换至折叠态,电子设备可以根据折叠态的显示屏和预设适配规则对展开态对应的第一布局文件进行调整,使得待显示页面中的字体和/或图标等不会变得过小,以提高页面显示效果,提升用户体验。当用户将折叠屏由折叠态恢复至展开态时,电子设备可以将调整后的第一布局文件恢复至展开态对应的第一布局文件,以将该待显示页面中的字体和/或图标等恢复至未调整前的状态。
第二方面,本申请实施例提供了一种页面显示装置,应用于电子设备,所述电子设备包括第二显示屏,所述页面显示装置可以包括:
布局文件获取模块,用于获取待显示页面对应的第一布局文件,所述待显示页面为第一显示屏对应的应用的页面,所述第一显示屏的第一分辨率与所述第二显示屏的第二分辨率不相同;
页面显示模块,用于根据预设适配规则、所述第二显示屏和所述第一布局文件,将所述待显示页面显示于所述第二显示屏,所述预设适配规则为对所述第一布局文件中的字体、图标和图片中的至少一个进行调整的规则。
在一种可能的实现方式中,所述页面显示模块,可以包括:
适配确定单元,用于确定所述第一布局文件是否与所述第二显示屏适配;
第一页面显示单元,用于当所述第一布局文件未与所述第二显示屏适配时,根据所述预设适配规则、所述第二显示屏和所述第一布局文件,将所述待显示页面显示于所述第二显示屏。
在一个示例中,所述适配确定单元,可以包括:
标签获取分单元,用于获取所述待显示页面对应的页面标签,并根据所述页面标签确定所述第一布局文件是否与所述第二显示屏适配。
在另一个示例中,所述适配确定单元,可以包括:
大小获取分单元,用于获取所述第一显示屏的第一分辨率和所述第二显示屏的第二分辨率,以及获取目标文本在所述第一布局文件中的字体大小和/或目标图标在所述第一布局文件中的图标大小,所述目标文本为所述待显示页面中的任一文本,所述目标图标为所述待显示页面中的任一图标;
第一适配确定分单元,用于当所述第一分辨率小于所述第二分辨率时,若所述目标文本在所述第一布局文件中的字体大小大于第一预设阈值,和/或所述目标图标在所述第一布局文件中的图标大小大于第三预设阈值时,确定所述第一布局文件未与所述第二显示屏适配;
第二适配确定分单元,用于当所述第一分辨率大于所述第二分辨率时,若所述目标文本在所述第一布局文件中的字体大小小于第二预设阈值,和/或所述目标图标在所述第一布局文件中的图标大小小于第四预设阈值时,确定所述第一布局文件未与所述第二显示屏适配。
在一种可能的实现方式中,所述页面显示模块,可以包括:
布局调整单元,用于根据所述预设适配规则和所述第二显示屏对所述第一布局文件进行调整,得到第二布局文件;
第二页面显示单元,用于根据所述第二布局文件将所述待显示页面显示于所述第二显示屏。
在一个示例中,当所述第一布局文件为所述待显示页面在所述第一显示屏中显示时的原始布局文件时,所述布局调整单元,可以用于根据所述预设适配规则和所述第二显示屏调整所述第一布局文件中的图标排列,和/或,根据所述预设适配规则和所述第二显示屏调整所述第一布局文件中的图片大小或图片排列,得到所述第二布局文件。
示例性的,当所述第一布局文件中的图片宽度小于第一宽度阈值时,所述布局调整单元,还可以用于根据所述预设适配规则和所述第二显示屏调整所述第一布局文件中的图片排列。
当所述第一布局文件中的图片宽度大于或等于第一宽度阈值时,所述布局调整单元,还可以用于根据所述预设适配规则和所述第二显示屏调整所述待显示页面中的图片大小。
在另一个示例中,当所述第一布局文件为根据所述第二显示屏对原始布局文件等比例缩放后的布局文件时,所述布局调整单元,还可以用于根据所述预设适配规则和所述第二显示屏调整所述第一布局文件中的字体大小,得到所述第二布局文件;和/或,根据所述预设适配规则和所述第二显示屏调整所述第一布局文件中的图标大小和图标排列,得到所述第二布局文件。
示例性的,当所述第一显示屏的第一分辨率小于所述第二显示屏的第二分辨率时,所述第二布局文件中的字体大小为所述第一布局文件中的字体大小的α倍,α=h/(h+w);
当所述第一显示屏的第一分辨率大于所述第二显示屏的第二分辨率时,所述第二布局文件中的字体大小为所述第一布局文件中的字体大小的β倍,β=(h+w)/h;
其中,h为所述第二显示屏的高度,w为所述第二显示屏的宽度。
在另一个示例中,当所述第一布局文件为根据所述第二显示屏对原始布局文件等比例缩放后的布局文件时,所述布局调整单元,还可以用于当所述第一布局文件中的图片宽度小于第二宽度阈值时,根据所述预设适配规则和所述第二显示屏调整所述第一布局文件中的图片大小和图片排列,得到所述第二布局文件。
在一种可能的实现方式中,所述电子设备为具有折叠屏的电子设备,所述第一显示屏为所述折叠屏处于折叠态的显示屏,所述第二显示屏为所述折叠屏处于展开态的显示屏;或者,
所述第一显示屏为所述折叠屏处于展开态的显示屏,所述第二显示屏为所述折叠屏处于折叠态的显示屏。
第三方面,本申请实施例提供了一种电子设备,包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序,所述处理器执行所述计算机程序时,使所述电子设备实现上述第一方面中任一项所述的页面显示方法。
第四方面,本申请实施例提供了一种计算机可读存储介质,所述计算机可读存储介质存储有计算机程序,所述计算机程序被计算机执行时,使所述计算机实现上述第一方面中任一项所述的页面显示方法。
第五方面,本申请实施例提供了一种计算机程序产品,当计算机程序产品在电子设备上运行时,使得电子设备执行上述第一方面中任一项所述的页面显示方法。
可以理解的是,上述第二方面至第五方面的有益效果可以参见上述第一方面中的相关描述,在此不再赘述。
图1是本申请实施例提供的页面显示方法所适用于的电子设备的结构示意图;
图2是本申请实施例提供的页面显示方法所适用于的软件架构示意图;
图3是本申请实施例提供的调整图标的示例图;
图4是本申请实施例提供的调整图片的示例图;
图5是本申请实施例提供的应用场景示意图一;
图6是本申请实施例提供的应用场景示意图二;
图7是本申请实施例提供的页面显示方法的示意性流程图。
应当理解,当在本申请说明书和所附权利要求书中使用时,术语“包括”指示所描述特征、整体、步骤、操作、元素和/或组件的存在,但并不排除一个或多个其它特征、整体、步骤、操作、元素、组件和/或其集合的存在或添加。
还应当理解,在本申请说明书和所附权利要求书中使用的术语“和/或”是指相关联列出的项中的一个或多个的任何组合以及所有可能组合,并且包括这些组合。
如在本申请说明书和所附权利要求书中所使用的那样,术语“如果”可以依据上下文被解释为“当...时”或“一旦”或“响应于确定”或“响应于检测到”。类似地,短语“如果确定”或“如果检测到[所描述条件或事件]”可以依据上下文被解释为意指“一旦确定”或“响应于确定”或“一旦检测到[所描述条件或事件]”或“响应于检测到[所描述条件或事件]”。
另外,在本申请说明书和所附权利要求书的描述中,术语“第一”、“第二”、“第三”等仅用于区分描述,而不能理解为指示或暗示相对重要性。
在本申请说明书中描述的参考“一个实施例”或“一些实施例”等意味着在本申请的一个或多个实施例中包括结合该实施例描述的特定特征、结构或特点。由此,在本说明书中的不同之处出现的语句“在一个实施例中”、“在一些实施例中”、“在其他一些实施例中”、“在另外一些实施例中”等不是必然都参考相同的实施例,而是意味着“一个或多个但不是所有的实施例”,除非是以其他方式另外特别强调。术语“包括”、“包含”、“具有”及它们的变形都意味着“包括但不限于”,除非是以其他方式另外特别强调。
此外,本申请实施例中提到的“多个”应当被解释为两个或两个以上。
本申请实施例中提供的页面显示方法中所涉及到的步骤仅仅作为示例,并非所有的步骤均是必须执行的步骤,或者并非各个信息或消息中的内容均是必选的,在使用过程中可以根据需要酌情增加或减少。本 申请实施例中同一个步骤或者具有相同功能的步骤或者消息在不同实施例之间可以互相参考借鉴。
本申请实施例描述的业务场景是为了更加清楚的说明本申请实施例提供的技术方案,并不构成对于本申请实施例提供的技术方案的限定,本领域普通技术人员可知,随着网络架构的演变和新业务场景的出现,本申请实施例提供的技术方案对于类似的技术问题,也可同样适用。
随着电子设备的发展,电子设备的显示屏的分辨率也在不断变化,为使得同一应用可适用于不同分辨率的显示屏,开发人员需要针对不同分辨率的显示屏开发应用的不同版本。例如,折叠设备处于折叠态的显示屏的分辨率一般按照按高宽比为16:9的比例设计,处于展开态的显示屏的分辨率一般按高宽比为8:7.1的比例设计,即折叠设备处于展开态的显示屏的宽度一般比处于折叠态的显示屏的宽度宽,或者折叠设备处于展开态的显示屏的高度一般比处于折叠态的显示屏的高度高。为使得同一应用可以适用于电子设备的折叠态和展开态,开发人员需要根据折叠态的显示屏和展开态的显示屏分别进行应用开发,即对于同一应用,需要同时开发折叠态的版本和展开态的版本。当折叠设备处于折叠态时,可以采用折叠态的版本进行页面显示;当折叠设备处于展开态时,可以采用展开态的版本进行页面显示。这种针对同一应用开发多个版本的方式,需要开发人员开发并维护多套应用代码,极大地增加了开发人员的开发和维护工作量。
其中,分辨率是指显示屏在纵向(即高度)上具有的像素数量和在横向(即宽度)上具有的像素数量。例如,分辨率为1920*1080的5.2寸的电子设备中,该电子设备的显示屏在高度上有1920个像素,在宽度上有1080个像素。该电子设备的像素密度(即每一寸屏幕具有的像素数量)为
显示屏的高度是指显示屏在纵向上具有的像素数量,显示屏的宽度在横向上具有的像素数量。
为减少开发和维护工作量,开发人员可针对任一分辨率的显示屏进行应用开发,当该应用适用于其他不同分辨率的显示屏时,可以按宽度或者按高度等比例缩放该应用的页面来进行显示。这种按宽度或者按高度等比例缩放页面的方式会使得页面中的字体和/或图标等变得过大或过小,造成页面显示不美观,影响用户体验。
为解决上述问题,本申请实施例提供了一种页面显示方法,该方法中,开发人员可以针对第一分辨率的第一显示屏进行应用开发,当该应用适用于第二显示屏的电子设备时,第二显示屏的第二分辨率与第一分辨率不相同,电子设备可以根据第二显示屏、预设适配规则和第一布局文件,将待显示页面渲染显示在第二显示屏。其中,预设适配规则为对第一布局文件中的字体和/或图标等进行调整的规则,使得待显示页面在第二显示屏中显示时的字体大小和/或图标大小等与第二显示屏相适配,以解决待显示页面在第二显示屏中显示时的字体和/或图标等过大或过小的问题,提高页面显示效果,提升用户体验。而且,不需要开发人员开发并维护多个应用版本,极大地减少了开发人员的开发和维护工作量,具有较强的易用性和实用性。
本申请实施例提供的页面显示方法可以应用于电子设备,电子设备可以为手机、平板电脑、可穿戴设备、车载设备、增强现实(augmented reality,AR)/虚拟现实(virtual reality,VR)设备、笔记本电脑、超级移动个人计算机(ultra-mobile personal computer,UMPC)、个人数字助理(personal digital assistant,PDA)、上网本等具有显示屏的电子设备,本申请实施例对电子设备的具体类型不作任何限制。
以下首先介绍本申请实施例涉及的电子设备。请参阅图1,图1示出了电子设备100的一种结构示意图。
如图1所示,电子设备100可以包括处理器110,外部存储器接口120,内部存储器121,通用串行总线(universal serial bus,USB)接口130,天线1,天线2,移动通信模块140,无线通信模块150,传感器模块160,按键170,摄像头180,显示屏190等。其中,传感器模块160可以包括压力传感器160A,陀螺仪传感器160B,磁传感器160C,加速度传感器160D,指纹传感器160E,触摸传感器160F等。
可以理解的是,本申请实施例示意的结构并不构成对电子设备100的具体限定。在本申请另一些实施 例中,电子设备100可以包括比图示更多或更少的部件,或者组合某些部件,或者拆分某些部件,或者不同的部件布置。图示的部件可以以硬件,软件或软件和硬件的组合实现。
处理器110可以包括一个或多个处理单元,例如:处理器110可以包括应用处理器(application processor,AP),调制解调处理器,图形处理器(graphics processing unit,GPU),图像信号处理器(image signal processor,ISP),控制器,视频编解码器,数字信号处理器(digital signal processor,DSP),基带处理器,和/或神经网络处理器(neural-network processing unit,NPU)等。其中,不同的处理单元可以是独立的器件,也可以集成在一个或多个处理器中。
控制器可以根据指令操作码和时序信号,产生操作控制信号,完成取指令和执行指令的控制。
处理器110中还可以设置存储器,用于存储指令和数据。在一些实施例中,处理器110中的存储器为高速缓冲存储器。该存储器可以保存处理器110刚用过或循环使用的指令或数据。如果处理器110需要再次使用该指令或数据,可从所述存储器中直接调用。避免了重复存取,减少了处理器110的等待时间,因而提高了***的效率。
在一些实施例中,处理器110可以包括一个或多个接口。接口可以包括集成电路(inter-integrated circuit,I2C)接口,集成电路内置音频(inter-integrated circuit sound,I2S)接口,脉冲编码调制(pulse code modulation,PCM)接口,通用异步收发传输器(universal asynchronous receiver/transmitter,UART)接口,移动产业处理器接口(mobile industry processor interface,MIPI),通用输入输出(general-purpose input/output,GPIO)接口,用户标识模块(subscriber identity module,SIM)接口,和/或通用串行总线(universal serial bus,USB)接口等。
I2C接口是一种双向同步串行总线,包括一根串行数据线(serial data line,SDA)和一根串行时钟线(derail clock line,SCL)。在一些实施例中,处理器110可以包含多组I2C总线。处理器110可以通过不同的I2C总线接口分别耦合触摸传感器160F,充电器,闪光灯,摄像头180等。例如:处理器110可以通过I2C接口耦合触摸传感器160F,使处理器110与触摸传感器160F通过I2C总线接口通信,实现电子设备100的触摸功能。
UART接口是一种通用串行数据总线,用于异步通信。该总线可以为双向通信总线。它将要传输的数据在串行通信与并行通信之间转换。在一些实施例中,UART接口通常被用于连接处理器110与无线通信模块150。例如:处理器110通过UART接口与无线通信模块150中的蓝牙模块通信,实现蓝牙功能。
MIPI接口可以被用于连接处理器110与显示屏190,摄像头180等***器件。MIPI接口包括摄像头串行接口(camera serial interface,CSI),显示屏串行接口(display serial interface,DSI)等。在一些实施例中,处理器110和摄像头180通过CSI接口通信,实现电子设备100的拍摄功能。处理器110和显示屏190通过DSI接口通信,实现电子设备100的显示功能。
GPIO接口可以通过软件配置。GPIO接口可以被配置为控制信号,也可被配置为数据信号。在一些实施例中,GPIO接口可以用于连接处理器110与摄像头180,显示屏190,无线通信模块150,传感器模块160等。GPIO接口还可以被配置为I2C接口,I2S接口,UART接口,MIPI接口等。
USB接口130是符合USB标准规范的接口,具体可以是Mini USB接口,Micro USB接口,USB Type C接口等。USB接口130可以用于连接充电器为电子设备100充电,也可以用于电子设备100与***设备之间传输数据。也可以用于连接耳机,通过耳机播放音频。该接口还可以用于连接其他电子设备,例如AR设备等。
可以理解的是,本申请实施例示意的各模块间的接口连接关系,只是示意性说明,并不构成对电子设备100的结构限定。在本申请另一些实施例中,电子设备100也可以采用上述实施例中不同的接口连接方式,或多种接口连接方式的组合。
电子设备100的无线通信功能可以通过天线1,天线2,移动通信模块140,无线通信模块150,调制解调处理器以及基带处理器等实现。
天线1和天线2用于发射和接收电磁波信号。电子设备100中的每个天线可用于覆盖单个或多个通信频带。不同的天线还可以复用,以提高天线的利用率。例如:可以将天线1复用为无线局域网的分集天线。在另外一些实施例中,天线可以和调谐开关结合使用。
移动通信模块140可以提供应用在电子设备100上的包括2G/3G/4G/5G等无线通信的解决方案。移动通信模块140可以包括至少一个滤波器,开关,功率放大器,低噪声放大器(low noise amplifier,LNA)等。移动通信模块140可以由天线1接收电磁波,并对接收的电磁波进行滤波,放大等处理,传送至调制解调处理器进行解调。移动通信模块140还可以对经调制解调处理器调制后的信号放大,经天线1转为电磁波辐射出去。在一些实施例中,移动通信模块140的至少部分功能模块可以被设置于处理器110中。在一些实施例中,移动通信模块140的至少部分功能模块可以与处理器110的至少部分模块被设置在同一个器件中。
调制解调处理器可以包括调制器和解调器。其中,调制器用于将待发送的低频基带信号调制成中高频信号。解调器用于将接收的电磁波信号解调为低频基带信号。随后解调器将解调得到的低频基带信号传送至基带处理器处理。低频基带信号经基带处理器处理后,被传递给应用处理器。应用处理器通过音频设备输出声音信号,或通过显示屏190显示图像或视频。在一些实施例中,调制解调处理器可以是独立的器件。在另一些实施例中,调制解调处理器可以独立于处理器110,与移动通信模块140或其他功能模块设置在同一个器件中。
无线通信模块150可以提供应用在电子设备100上的包括无线局域网(wireless local area networks,WLAN)(如无线保真(wireless fidelity,Wi-Fi)网络),蓝牙(bluetooth,BT),全球导航卫星***(global navigation satellite system,GNSS),调频(frequency modulation,FM),近距离无线通信技术(near field communication,NFC),红外技术(infrared,IR)等无线通信的解决方案。无线通信模块150可以是集成至少一个通信处理模块的一个或多个器件。无线通信模块150经由天线2接收电磁波,将电磁波信号调频以及滤波处理,将处理后的信号发送到处理器110。无线通信模块150还可以从处理器110接收待发送的信号,对其进行调频,放大,经天线2转为电磁波辐射出去。
在一些实施例中,电子设备100的天线1和移动通信模块140耦合,天线2和无线通信模块150耦合,使得电子设备100可以通过无线通信技术与网络以及其他设备通信。所述无线通信技术可以包括全球移动通讯***(global system for mobile communications,GSM),通用分组无线服务(general packet radio service,GPRS),码分多址接入(code division multiple access,CDMA),宽带码分多址(wideband code division multiple access,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),北斗卫星导航***(beidou navigation satellite system,BDS),准天顶卫星***(quasi-zenith satellite system,QZSS)和/或星基增强***(satellite based augmentation systems,SBAS)。
电子设备100通过GPU,显示屏190,以及应用处理器等实现显示功能。GPU为图像处理的微处理器,连接显示屏190和应用处理器。GPU用于执行数学和几何计算,用于图形渲染。处理器110可包括一个或多个GPU,其执行程序指令以生成或改变显示信息。
显示屏190用于显示图像,视频等。显示屏190包括显示面板。显示面板可以采用液晶显示屏(liquid crystal display,LCD),或者采用有机发光二极管(organic light-emitting diode,OLED),有源矩阵有机发光 二极体或主动矩阵有机发光二极体(active-matrix organic light emitting diode,AMOLED),柔性发光二极管(flex light-emitting diode,FLED),Miniled,MicroLed,Micro-oLed,量子点发光二极管(quantum dot light emitting diodes,QLED)等材料制成。在一些实施例中,电子设备100可以包括1个或N个显示屏190,N为大于1的正整数。
电子设备100可以通过ISP,摄像头180,视频编解码器,GPU,显示屏190以及应用处理器等实现拍摄功能。
ISP用于处理摄像头180反馈的数据。例如,拍照时,打开快门,光线通过镜头被传递到摄像头感光元件上,光信号转换为电信号,摄像头感光元件将所述电信号传递给ISP处理,转化为肉眼可见的图像。ISP还可以对图像的噪点,亮度,肤色进行算法优化。ISP还可以对拍摄场景的曝光,色温等参数优化。在一些实施例中,ISP可以设置在摄像头180中。
摄像头180用于捕获静态图像或视频。物体通过镜头生成光学图像投射到感光元件。感光元件可以是电荷耦合器件(charge coupled device,CCD)或互补金属氧化物半导体(complementary metal-oxide-semiconductor,CMOS)光电晶体管。感光元件把光信号转换成电信号,之后将电信号传递给ISP转换成数字图像信号。ISP将数字图像信号输出到DSP加工处理。DSP将数字图像信号转换成标准的RGB,YUV等格式的图像信号。在一些实施例中,电子设备100可以包括1个或N个摄像头180,N为大于1的正整数。
数字信号处理器用于处理数字信号,除了可以处理数字图像信号,还可以处理其他数字信号。例如,当电子设备100在频点选择时,数字信号处理器用于对频点能量进行傅里叶变换等。
视频编解码器用于对数字视频压缩或解压缩。电子设备100可以支持一种或多种视频编解码器。这样,电子设备100可以播放或录制多种编码格式的视频,例如:动态图像专家组(moving picture experts group,MPEG)1,MPEG2,MPEG3,MPEG4等。
NPU为神经网络(neural-network,NN)计算处理器,通过借鉴生物神经网络结构,例如借鉴人脑神经元之间传递模式,对输入信息快速处理,还可以不断的自学习。通过NPU可以实现电子设备100的智能认知等应用,例如:图像识别,人脸识别,语音识别,文本理解等。
外部存储器接口120可以用于连接外部存储卡,例如Micro SD卡,实现扩展电子设备100的存储能力。外部存储卡通过外部存储器接口120与处理器110通信,实现数据存储功能。例如将音乐,视频等文件保存在外部存储卡中。
内部存储器121可以用于存储计算机可执行程序代码,所述可执行程序代码包括指令。内部存储器121可以包括存储程序区和存储数据区。其中,存储程序区可存储操作***,至少一个功能所需的应用程序(比如声音播放功能,图像播放功能等)等。存储数据区可存储电子设备100使用过程中所创建的数据(比如音频数据,电话本等)等。此外,内部存储器121可以包括高速随机存取存储器,还可以包括非易失性存储器,例如至少一个磁盘存储器件,闪存器件,通用闪存存储器(universal flash storage,UFS)等。处理器110通过运行存储在内部存储器121的指令,和/或存储在设置于处理器中的存储器的指令,执行电子设备100的各种功能应用以及数据处理。
压力传感器160A用于感受压力信号,可以将压力信号转换成电信号。在一些实施例中,压力传感器160A可以设置于显示屏190。压力传感器160A的种类很多,如电阻式压力传感器,电感式压力传感器,电容式压力传感器等。电容式压力传感器可以是包括至少两个具有导电材料的平行板。当有力作用于压力传感器160A,电极之间的电容改变。电子设备100根据电容的变化确定压力的强度。当有触摸操作作用于显示屏190,电子设备100根据压力传感器160A检测所述触摸操作强度。电子设备100也可以根据压 力传感器160A的检测信号计算触摸的位置。在一些实施例中,作用于相同触摸位置,但不同触摸操作强度的触摸操作,可以对应不同的操作指令。例如:当有触摸操作强度小于第一压力阈值的触摸操作作用于短消息应用图标时,执行查看短消息的指令。当有触摸操作强度大于或等于第一压力阈值的触摸操作作用于短消息应用图标时,执行新建短消息的指令。
陀螺仪传感器160B可以用于确定电子设备100的运动姿态。在一些实施例中,可以通过陀螺仪传感器160B确定电子设备100围绕三个轴(即,x,y和z轴)的角速度。陀螺仪传感器160B可以用于拍摄防抖。示例性的,当按下快门,陀螺仪传感器160B检测电子设备100抖动的角度,根据角度计算出镜头模组需要补偿的距离,让镜头通过反向运动抵消电子设备100的抖动,实现防抖。陀螺仪传感器160B还可以用于导航,体感游戏场景。
磁传感器160C包括霍尔传感器。电子设备100可以利用磁传感器160C检测翻盖皮套的开合。在一些实施例中,当电子设备100是翻盖机时,电子设备100可以根据磁传感器160C检测翻盖的开合。进而根据检测到的皮套的开合状态或翻盖的开合状态,设置翻盖自动解锁等特性。
加速度传感器160D可检测电子设备100在各个方向上(一般为三轴)加速度的大小。当电子设备100静止时可检测出重力的大小及方向。还可以用于识别电子设备姿态,应用于横竖屏切换,计步器等应用。
指纹传感器160E用于采集指纹。电子设备100可以利用采集的指纹特性实现指纹解锁,访问应用锁,指纹拍照,指纹接听来电等。
触摸传感器160F,也称“触控器件”。触摸传感器160F可以设置于显示屏190,由触摸传感器160F与显示屏190组成触摸屏,也称“触控屏”。触摸传感器160F用于检测作用于其上或附近的触摸操作。触摸传感器可以将检测到的触摸操作传递给应用处理器,以确定触摸事件类型。可以通过显示屏190提供与触摸操作相关的视觉输出。在另一些实施例中,触摸传感器160F也可以设置于电子设备100的表面,与显示屏190所处的位置不同。
按键170包括开机键,音量键等。按键170可以是机械按键。也可以是触摸式按键。电子设备100可以接收按键输入,产生与电子设备100的用户设置以及功能控制有关的键信号输入。
电子设备100的软件***可以采用分层架构,事件驱动架构,微核架构,微服务架构,或云架构。本申请实施例以分层架构的Android操作***为例,示例性说明电子设备100的软件结构。
图2是本申请实施例的电子设备100的软件结构框图。
分层架构将软件分成若干个层,每一层都有清晰的角色和分工。层与层之间通过软件接口通信。在一些实施例中,将Android操作***分为四层,从上至下分别为应用程序层,应用程序框架层,安卓运行时(Android runtime)和***库,以及内核层。
应用程序层可以包括一系列应用程序包。
如图2所示,应用程序包可以包括
相机,图库,日历,通话,地图,导航,WLAN,蓝牙,音乐,视频等应用程序。
应用程序框架层为应用程序层的应用程序提供应用编程接口(application programming interface,API)和编程框架。应用程序框架层包括一些预先定义的函数。
如图2所示,应用程序框架层可以包括窗口管理器,内容提供器,视图***,电话管理器,资源管理器,通知管理器等。
窗口管理器用于管理窗口程序。窗口管理器可以获取显示屏大小,判断是否有状态栏,锁定屏幕,截取屏幕等。
内容提供器用来存放和获取数据,并使这些数据可以被应用程序访问。所述数据可以包括视频,图像, 音频,拨打和接听的电话,浏览历史和书签,电话簿等。
视图***包括可视控件,例如显示文字的控件,显示图片的控件等。视图***可用于构建应用程序。显示界面可以由一个或多个视图组成的。例如,包括短信通知图标的显示界面,可以包括显示文字的视图以及显示图片的视图。
电话管理器用于提供电子设备100的通信功能。例如通话状态的管理(包括接通,挂断等)。
资源管理器为应用程序提供各种资源,比如本地化字符串,图标,图片,布局文件,视频文件等等。
通知管理器使应用程序可以在状态栏中显示通知信息,可以用于传达告知类型的消息,可以短暂停留后自动消失,无需用户交互。比如通知管理器被用于告知下载完成,消息提醒等。通知管理器还可以是以图表或者滚动条文本形式出现在***顶部状态栏的通知,例如后台运行的应用程序的通知,还可以是以对话窗口形式出现在屏幕上的通知。例如在状态栏提示文本信息,发出提示音,电子设备振动,指示灯闪烁等。
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软件以及硬件的工作流程。
当触摸传感器160F接收到触摸操作,相应的硬件中断被发给内核层。内核层将触摸操作加工成原始输入事件(包括触摸坐标,触摸操作的时间戳等信息)。原始输入事件被存储在内核层。应用程序框架层从内核层获取原始输入事件,识别原始输入事件所对应的控件。以该触摸操作是触摸单击操作,该单击操作所对应的控件为
应用图标的控件为例。
应用调用应用框架层的接口,启动
应用,同时,应用程序框架层获取显示屏190的大小,并根据显示屏190的大小对
应用的页面进行布局、绘制后发送给内核层。
应用通过调用内核层启动显示驱动,以将
应用的页面渲染显示在显示屏190上。
以下将结合附图和具体应用场景对本申请实施例提供的页面显示方法进行详细说明。
本申请实施例中,开发人员可以针对第一分辨率的显示屏(以下称为第一显示屏)进行应用开发。当该应用适用于第二分辨率的显示屏(以下称为第二显示屏)的电子设备时,电子设备可以获取该应用的待显示页面,并根据第二显示屏、预设适配规则和第一布局文件,将该待显示页面渲染显示在电子设备的第二显示屏。其中,该待显示页面为第一显示屏对应的应用的页面,即该待显示页面可以为基于第一显示屏开发的应用的页面。第一分辨率与第二分辨率不相同。第一分辨率可以是第一显示屏的整个屏幕的分辨率,也可以是第一显示屏中用于显示内容的部分屏幕所对应的分辨率。同样的,第二分辨率可以是第二显示屏的 整个屏幕的分辨率,也可以是第二显示屏中用于显示内容的部分屏幕所对应的分辨率。第一布局文件为未与第二显示屏适配的布局文件,即第一布局文件为该待显示页面在第一显示屏中显示时的原始布局文件,或者为根据第二显示屏对原始布局文件按宽度或者按高度等比例缩放后的布局文件。预设适配规则为对第一布局文件中的字体和/或图标等进行调整的规则,使得该待显示页面在第二显示屏中显示时的字体大小和/或图标大小等与第二显示屏相适配,以解决根据第一显示屏开发的应用适用于第二显示屏时,页面中的字体和/或图标等过大或者过小的问题,提高页面显示效果,提升用户体验。
示例性的,电子设备可以根据第二显示屏和预设适配规则对第一布局文件进行调整,得到第二布局文件,并根据第二布局文件将待显示页面渲染显示于第二显示屏。或者,电子设备可以根据第一布局文件对该待显示页面进行渲染显示,并在渲染显示时,可以根据第二显示屏和预设适配规则来调整该待显示页面。此时电子设备还可以将该待显示页面在第二显示屏中显示时的布局文件保存为第二布局文件,后续需要在电子设备的第二显示屏中显示该待显示页面时,电子设备可以直接根据第二布局文件将该待显示页面渲染显示在电子设备的第二显示屏。
应理解,字体过大是指字体大小大于第一预设阈值,字体过小是指字体大小小于第二预设阈值,同样的,图标过大是指图标大小大于第三预设阈值,图标过小是指图标大小小于第四预设阈值。其中,第一预设阈值和第二预设阈值可以分别为一具体数值,此时,对于任一文本,若该文本的字体大小大于第一预设阈值,可以认为字体过大;若该文本的字体大小小于第二预设阈值,可以认为字体过小。
或者,第一预设阈值和第二预设阈值也可以为相对于原始字体大小的比值,此时,对于任一文本,若该文本的字体大小与原始字体大小的比值大于第一预设阈值,可以认为字体过大;若该文本的字体大小与原始字体大小的比值小于第二预设阈值,可以认为字体过小。原始字体大小是指该待显示页面在第一显示屏中显示时的字体大小。
或者,可以分别为不同的文本设置不同的第一预设阈值和第二预设阈值,即各文本分别具有对应的第一预设阈值和第二预设阈值。因此,对于任一文本,可以根据该文本所对应的第一预设阈值和第二预设阈值来确定该文本是否字体过大或过小。
类似的,第三预设阈值和第四预设阈值也可以分别为一具体数值,或者可以为相对于原始图标大小的比值,或者可以分别为不同的图标设置不同的第三预设阈值和第四预设阈值。原始图标大小是指该待显示页面在第一显示屏中显示时的图标大小。
在一个示例中,开发人员可以基于小分辨率的第一显示屏进行应用开发,当该应用适用于大分辨率的第二显示屏的电子设备时,电子设备可以根据大分辨率的第二显示屏、预设适配规则和第一布局文件,得到第二布局文件来进行显示。即第一显示屏的第一分辨率可以小于第二显示屏的第二分辨率。
例如,开发人员可以基于手机的显示屏进行应用开发,当该应用适用于平板电脑时,平板电脑可以根据平板电脑的显示屏、预设适配规则和第一布局文件,得到第二布局文件来进行显示。
例如,对于折叠设备,开发人员可以基于折叠态的显示屏进行应用开发,当折叠设备处于展开态时,折叠设备可以根据展开态的显示屏、预设适配规则和第一布局文件,得到第二布局文件来进行显示。
在另一个示例中,开发人员可以基于大分辨率的第一显示屏进行应用开发,当该应用适用于小分辨率的第二显示屏的电子设备时,电子设备可以根据小分辨率的第二显示屏、预设适配规则和第一布局文件,得到第二布局文件来进行显示。即第一显示屏的第一分辨率可以大于第二显示屏的第二分辨率。
例如,开发人员可以基于平板电脑的显示屏进行应用开发,当该应用适用于手机时,手机可以根据手机的显示屏、预设适配规则和第一布局文件,得到第二布局文件来进行显示。
例如,对于折叠设备,开发人员可以基于展开态的显示屏进行应用开发,当折叠设备处于折叠态时, 折叠设备可以根据折叠态的显示屏、预设适配规则和第一布局文件,得到第二布局文件来进行显示。
应理解,预设适配规则可以为对第一布局文件中的字体、图标、图片等界面元素进行调整的规则,即第二布局文件可以为对第一布局文件中的字体、图标、图片等界面元素进行调整后得到的布局文件。下面将分别说明:一、将基于小分辨率的第一显示屏开发的应用适用于大分辨率的第二显示屏时的预设适配规则;二、将基于大分辨率的第一显示屏开发的应用适用于小分辨率的第二显示屏时的预设适配规则。
一、将基于小分辨率的第一显示屏开发的应用适用于大分辨率的第二显示屏时的预设适配规则
由前述可知,待显示页面对应的第一布局文件可以为该待显示页面在第一显示屏中显示时的原始布局文件,或者可以为根据第二显示屏对原始布局文件按宽度或者按高度等比例缩放后的布局文件。宽度和高度可以分别是指显示屏在横向上具有的像素数量和在纵向上具有的像素数量。
示例性的,当待显示页面对应的第一布局文件为该待显示页面在第一显示屏中显示时的原始布局文件时,预设适配规则可以为:
(1)字体
字体大小可以不调整,即对于任一文本,该文本在第二布局文件中的第二字体大小可以与该文本在第一布局文件中的第一字体大小相同,或者,在一种可能的实现方式中,也可以将第二字体大小调整为第一字体大小的R1倍,且1<R1≤1.2,R1的取值可以由技术人员根据实际情况具体设置,确保该待显示页面在第二显示屏中显示时的字体大小与在第一显示屏中显示时的字体大小的变化差异较小,以避免该应用在第二显示屏中显示时,页面中的字体变得过大,影响页面显示效果。
在一种可能的实现方式中,对于任一文本,也可以由用户自定义设置该文本在第二布局文件中的第二字体大小,即用户可以在电子设备中自定义设置偏好的字体大小,电子设备可以将用户自定义设置的字体大小保存于预设适配规则中,使得电子设备可以基于用户偏好的字体大小来进行该待显示页面的显示,提升用户体验。应理解,对于任一图标或图片,也可以由用户自定义设置该图标或图片在第二布局文件中的大小。
(2)图标
图标大小可以不调整,即对于任一图标,该图标在第二布局文件中的第二图标大小可以与该图标在第一布局文件中的第一图标大小相同,或者,在一种可能的实现方式中,也可以将第二图标大小调整为第一图标大小的S1倍,且1<S1≤1.2,S1的取值可以由技术人员根据实际情况具体设置,确保该待显示页面在第二显示屏中显示时的图标大小与在第一显示屏中显示时的图标大小的变化差异较小,以避免该应用在第二显示屏中显示时,页面中的图标变得过大,影响页面显示效果。
对于多图标排列时,可以根据第二显示屏的宽度,在横向增加更多的图标,以减少图标行数,和/或增加图标列数,使得第二显示屏能显示更多的内容,充分发挥大尺寸显示屏的作用。例如,可以将两行图标调整为一行图标,或者可以将三行图标调整为两行图标,或者可以将单列图标调整为两列图标,或者可以将两列图标调整为三列图标,等等。
请参阅图3,图3示出了本申请实施例提供的调整图标的示例图。该示例图中,以第二显示屏的像素密度与第一显示屏的像素密度相同、第二宽度(即第二显示屏的宽度)为第一宽度(即第一显示屏的宽度)的两倍为例进行示例性说明。如图3中的(a)所示,当该待显示页面中包括两行图标时,其中,第一行中可以包括图标AA、BB、CC、DD以及EE,第二行中可以包括图标FF、GG、HH、II以及JJ,电子设备可以将这两行图标调整为图3中的(b)所示的一行来进行显示。或者,如图3中的(c)所示,当该待显示页面中包括三行图标时,第一行中可以包括图标AA、BB、CC、DD以及EE,第二行中可以包括图标FF、GG、HH、II以及JJ,第三行中可以包括图标KK、LL、MM、NN以及OO,电子设备可以将这三行图标调整为图3 中的(d)所示的两行来进行显示。
(3)图片
当图片的宽度小于第一宽度阈值时,可以不调整图片大小,即该图片在第二布局文件中的第二图片大小可以与该图片在第一布局文件中的第一图片大小相同,或者,在一种可能的实现方式中,也可以将第二图片大小调整为第一图片大小的T1倍,且1<T1≤1.2,T1的取值可以由技术人员根据实际情况具体设置,确保该待显示页面在第二显示屏中显示时的图片大小与在第一显示屏中显示时的图片大小的变化差异较小,以避免该应用在第二显示屏中显示时,页面中的小图片变得过大,影响页面显示效果。其中,图片的宽度是指图片在第一布局文件中的宽度,即图片在第一显示屏中显示时的宽度。第一宽度阈值可以由技术人员根据实际情况具体设置,例如可以将第一宽度阈值设置为第一宽度*70%。
此时,对于多图片排列时,可以根据第二显示屏的宽度,在横向增加更多的图片,以减少图片行数,和/或增加图片列数。例如,可以将两行图片调整为一行图片,或者可以将三行图片调整为两行图片,或者可以将单列图片调整为两列图片,或者可以将两列图片调整为三列图片,等等。
当图片的宽度大于或等于第一宽度阈值时,可以按第一宽度和第二宽度等比例放大该图片或者可以按第一高度(即第一显示屏的高度)和第二高度(即第二显示屏的高度)等比例放大该图片。具体地,当第二宽度/第一宽度小于第二高度/第一高度时,可以按第一宽度和第二宽度等比例放大图片;当第二宽度/第一宽度大于第二高度/第一高度时,可以按第一高度和第二高度等比例放大图片。
请参阅图4,图4示出了本申请实施例提供的调整图片的示例图。该示例图中,以第二显示屏的像素密度与第一显示屏的像素密度相同、第二宽度为第一宽度的两倍为例进行示例性说明。如图4中的(a)所示,当该待显示页面中包括一张第一图片401和一列第二图片402(即分别为“运动”、“静坐”、“游玩”以及“学习”等的第二图片402),其中,学习的第二图片402可以未显示于第一显示屏,且第一图片401的宽度等于第一宽度(即第一图片401的宽度大于第一宽度阈值)、第二图片402的宽度均等于第一宽度的一半(即各第二图片402的宽度小于第一宽度阈值)时,如图4中的(b)所示,电子设备可以根据第一宽度和第二宽度等比例放大第一图片401,以将第一图片401的宽度放大至第二宽度来进行显示,并可以将这一列第二图片402调整为两列来进行显示。
(4)其他界面元素
其他界面元素可以是按钮、输入框等。对于其他界面元素可以按第一宽度和第二宽度等比例缩放。或者,可以保持该界面元素的高度不变,仅对该界面元素的宽度进行延伸,但延伸后的宽度小于或者等于第二宽度。
下面结合具体应用场景对基于上述的预设适配规则对页面显示进行示例性说明。
请参阅图5,图5示出了本申请实施例提供的应用场景示意图一。该应用场景中,第二显示屏的像素密度与第一显示屏的像素密度相同,第二宽度为第一宽度的两倍,第二高度与第一高度相同,第一显示屏的第一分辨率小于第二显示屏的第二分辨率。具体地,开发人员可以基于第一显示屏进行应用开发,该应用的某一待显示页面在第一显示屏中显示时可以呈现如图5中的(a)所示的显示效果。如图5中的(a)所示,该待显示页面中可以包括搜索框501、第一图片502、两行图标503以及推荐项,推荐项中可以包括一列第二图片504以及各第二图片504对应的介绍信息。其中,第一图片502的宽度大于第一宽度阈值,第二图片504的宽度小于第一宽度阈值。
当该待显示页面在第二显示屏的电子设备中显示时,电子设备可以获取该待显示页面对应的第一布局文件,第一布局文件为呈现图5中的(a)所示的显示效果的布局文件。电子设备可以根据上述的预设适配规则对第一布局文件进行调整,即将两行图标503调整为一行,将推荐项中的一列第二图片504调整为两列, 并根据第一宽度和第二宽度等比例放大第一图片502,以及可以保持搜索框501的高度不变,根据第一宽度和第二宽度对搜索框501的宽度进行延伸,得到第二布局文件。
如图5中的(b)所示,电子设备根据第二布局文件显示该待显示页面时,该待显示页面中可以包括一行图标503’、两列第二图片504’、第一图片502’和搜索框501’,且该待显示页面中的字体大小与图5中的(a)所示的字体大小相同,图标503’的大小与图5中的(a)所示的图标503的大小,第二图片504’的大小与图5中的(a)所示的第二图片504的大小相同,第一图片502’由图5中的(a)所示的第一图片502按宽度等比例放大得到,搜索框501’由图5中的(a)所示的搜索框501进行宽度延伸得到。
示例性的,当待显示页面对应的第一布局文件为根据第二显示屏对原始布局文件按宽度或者按高度等比例缩放后的布局文件时,预设适配规则可以为:
(1)字体
可以根据第二显示屏的第二高度和第二宽度调整字体大小。在一种可能的实现方式中,对于任一文本,可以将该文本在第二布局文件中的第二字体大小调整为该文本在第一布局文件中的第一字体大小的α倍,其中,α=h/(h+w),h为第二显示屏的第二高度,w为第二显示屏的第二宽度,缩小第二布局文件中的字体大小,使得该待显示页面在第二显示屏中显示时的字体大小与在第一显示屏中显示时的字体大小的变化差异较小,以避免应用在第二显示屏中显示时,页面中的字体变得过大,影响页面显示效果。
在一种可能的实现方式中,对于任一文本,也可以由用户自定义设置该文本在第二布局文件中的第二字体大小,即用户可以在电子设备中自定义设置偏好的字体大小,电子设备可以将用户自定义设置的字体大小保存于预设适配规则中,使得电子设备可以基于用户偏好的字体大小来进行该待显示页面的显示,提升用户体验。应理解,对于任一图标或图片,也可以由用户自定义设置该图标或图片在第二布局文件中的大小。
(2)图标
可以根据第二高度和第二宽度调整图标大小。在一种可能的实现方式中,对于任一图标,可以将该图标在第二布局文件中的第二图标大小调整为该图标在第一布局文件中的第一图标大小的α倍,缩小第二布局文件中的图标大小,以避免应用在第二显示屏中显示时,页面中的图标变得过大,影响页面显示效果。
对于多图标排列时,还可以根据第二显示屏的宽度,在横向增加更多的图标,以减少图标行数,和/或增加图标列数,使得第二显示屏能显示更多的内容。示例性的,可以将两行图标调整为一行图标,或者可以将三行图标调整为两行图标,或者可以将单列图标调整为两列图标,或者可以将两列图标调整为三列图标,等等。
(3)图片
当图片的宽度小于第二宽度阈值时,可以根据第二高度和第二宽度调整图片大小。在一种可能的实现方式中,可以将该图片在第二布局文件中的第二图片大小调整为该图片在第一布局文件中的第一图片大小的α倍,缩小第二布局文件中的图片大小,以避免应用在第二显示屏中显示时,页面中的小图片变得过大,影响页面显示效果。其中,图片的宽度是指图片在第一布局文件中的宽度,即基于第二显示屏将图片在第一显示屏中显示时的宽度按宽度或者按高度等比例缩放后的宽度。第二宽度阈值可以由技术人员根据实际情况具体设置,例如可以将第二宽度阈值设置为第二宽度*70%。
此时,对于多图片排列时,还可以根据第二显示屏的宽度,在横向增加更多的图片,以减少图片行数,和/或增加图片列数。示例性的,可以将两行图片调整为一行图片,或者可以将三行图片调整为两行图片,或者可以将单列图片调整为两列图片,或者可以将两列图片调整为三列图片,等等。
当图片的宽度大于或等于第二宽度阈值时,由于第一布局文件中已对该图片进行了等比例放大来适应 第二显示屏,此时可以不调整图片大小,即该图片在第二布局文件中的第二图片大小可以与该图片在第一布局文件中的第一图片大小相同。
(4)其他界面元素
由于第一布局文件中已对其他界面元素进行了等比例放大处理来适应第二显示屏,此时可以不调整其他界面元素,即其他界面元素在第二布局文件中的大小可以与在第一布局文件中的大小相同。
下面结合具体应用场景对基于上述的预设适配规则对页面显示进行示例性说明。
请参阅图6,图6示出了本申请实施例提供的应用场景示意图二。该应用场景中,第二显示屏的像素密度与第一显示屏的像素密度相同,第二宽度为第一宽度的两倍,第二高度与第一高度相同,第一显示屏的第一分辨率小于第二显示屏的第二分辨率。具体地,开发人员可以基于第一显示屏进行应用开发,该应用的某一待显示页面在第一显示屏中显示时可以呈现如图6中的(a)所示的显示效果。如图6中的(a)所示,该待显示页面中可以包括搜索框601、两行图标602以及推荐项,推荐项中可以包括一列图片603以及各图片603对应的介绍信息。图片603的宽度小于第二宽度阈值。
应理解,当该待显示页面需要在第二显示屏的电子设备中显示时,若按照未与第二显示屏适配的原有显示方式对该待显示页面进行显示,如图6中的(b)所示,该待显示页面中可以包括搜索框601’、两行图标602’以及推荐项中的一列图片603’。此时,该待显示页面中的字体大小明显大于图6中的(a)所示的字体大小,图标602’的大小明显大于图6中的(a)所示的图标602的大小,图片603’的大小明显大于图6中的(a)所示的图片603的大小,不仅影响页面显示效果,还使得显示屏中显示内容减少,影响用户体验。
因此,本申请实施例中,电子设备可以获取该待显示页面对应的第一布局文件,第一布局文件为呈现图6中的(b)所示的显示效果的布局文件,并可以根据上述的预设适配规则对第一布局文件进行调整,即可以将字体大小调整为图6中的(b)所示的字体大小的α(即0.5)倍,将图标602”的大小调整为图6中的(b)所示的图标602’的大小的α倍,将图片603”的大小调整为图6中的(b)所示的图片603’的大小的α倍,并可以将两行图标602’调整为一行,同时将一列图片603’调整为两列,以得到第二布局文件。
如图6中的(c)所示,电子设备根据第二布局文件显示该待显示页面时,该待显示页面中可以包括搜索框601”、一行图标602”以及两列图片603”,且该待显示页面中的字体大小与图6中的(a)所示的字体大小基本相同,图标602”的大小与图6中的(a)所示的图标602的大小基本相同,图片603”的大小与图6中的(a)所示的图片603的大小基本相同,搜索框601”与图6中的(b)所示的搜索框601’相同。
二、将基于大分辨率的第一显示屏开发的应用适用于小分辨率的第二显示屏时的预设适配规则
应理解,将基于大分辨率的第一显示屏开发的应用适用于小分辨率的第二显示屏时的预设适配规则与前述“一、将基于小分辨率的第一显示屏开发的应用适用于大分辨率的第二显示屏时的预设适配规则”为相反的规则。
具体地,当待显示页面对应的第一布局文件为该待显示页面在第一显示屏中显示时的原始布局文件时,预设适配规则可以为:
(1)字体
字体大小可以不调整,即对于任一文本,该文本在第二布局文件中的第二字体大小可以与该文本在第一布局文件中的第一字体大小相同,或者,在一种可能的实现方式中,也可以将第二字体大小调整为第一字体大小的R2倍,且5/6≤R2<1,R2的取值可以由技术人员根据实际情况具体设置,确保该待显示页面在第二显示屏中显示时的字体大小与在第一显示屏中显示时的字体大小的变化差异较小,以避免应用在第二显示屏中显示时,页面中的字体变得过小,影响页面显示效果。
在一种可能的实现方式中,对于任一文本,也可以由用户自定义设置该文本在第二布局文件中的第二 字体大小,即用户可以在电子设备中自定义设置偏好的字体大小,电子设备可以将用户自定义设置的字体大小保存于预设适配规则中,使得电子设备可以基于用户偏好的字体大小来进行该待显示页面的显示,提升用户体验。应理解,对于任一图标或图片,也可以由用户自定义设置该图标或图片在第二布局文件中的大小。
(2)图标
图标大小可以不调整,即对于任一图标,该图标在第二布局文件中的第二图标大小可以与该图标在第一布局文件中的第一图标大小相同,或者,在一种可能的实现方式中,也可以将第二图标大小调整为第一图标大小的S2倍,且5/6≤S2<1,S2的取值可以由技术人员根据实际情况具体设置。另外,对于多图标排列时,还可以根据第二显示屏的宽度,减少横向上的图标数量,以增加图标行数,和/或减少图标列数。
(3)图片
当图片的宽度小于第一宽度阈值时,可以不调整图片大小,即该图片在第二布局文件中的第二图片大小可以与该图片在第一布局文件中的第一图片大小相同,或者,在一种可能的实现方式中,也可以将第二图片大小调整为第一图片大小的T2倍,且5/6≤T2<1,T2的取值可以由技术人员根据实际情况具体设置。此时,对于多图片排列时,还可以根据第二显示屏的宽度,减少横向上的图片数量,以增加图片行数,和/或减少图片列数。
当图片的宽度大于或等于第一宽度阈值时,可以按宽度等比例缩小图片或者可以按高度等比例缩小该图片。
(4)其他界面元素
同样地,对于其他界面元素可以按宽度等比例缩小。或者可以保持该界面元素的高度不变,仅对该界面元素的宽度进行收缩,收缩后的宽度小于或者等于第二宽度。
类似的,当待显示页面对应的第一布局文件为根据第二显示屏对原始布局文件按宽度或者按高度等比例缩放后的布局文件时,预设适配规则可以为:
(1)字体
可以根据第二高度和第二宽度调整字体大小。在一种可能的实现方式中,对于任一文本,可以将该文本在第二布局文件中的第二字体大小调整为该文本在第一布局文件中的第一字体大小的β倍,此时,β=(h+w)/h,h为第二显示屏的第二高度,w为第二显示屏的第二宽度,以放大第二布局文件中的字体大小,使得该待显示页面在第二显示屏中显示时的字体大小与在第一显示屏中显示时的字体大小的变化差异较小,避免应用在第二显示屏中显示时,页面中的字体变得过小,影响页面显示效果。
在一种可能的实现方式中,对于任一文本,也可以由用户自定义设置该文本在第二布局文件中的第二字体大小,即用户可以在电子设备中自定义设置偏好的字体大小,电子设备可以将用户自定义设置的字体大小保存于预设适配规则中,使得电子设备可以基于用户偏好的字体大小来进行该待显示页面的显示,提升用户体验。应理解,对于任一图标或图片,也可以由用户自定义设置该图标或图片在第二布局文件中的大小。
(2)图标
可以根据第二高度和第二宽度调整图标大小。在一种可能的实现方式中,对于任一图标,可以将该图标在第二布局文件中的第二图标大小调整为该图标在第一布局文件中的第一图标大小的β倍。同样地,对于多图标排列,还可以根据第二显示屏的宽度,减少横向上的图标数量,以增加图标行数,和/或减少图标列数。
(3)图片
当图片的宽度小于第二宽度阈值时,可以根据第二高度和第二宽度调整图片大小。在一种可能的实现方式中,可以将该图片在第二布局文件中的第二图片大小为该图片在第一布局文件中的第一图片大小的β倍。此时,对于多图片排列时,还可以根据第二显示屏的宽度,减少横向上的图片数量,以增加图片行数,和/或减少图片列数。
当图片的宽度大于或等于第二宽度阈值时,可以不调整图片大小,即该图片在第二布局文件中的第二图片大小与该图片在第一布局文件中的第一图片大小相同。
(4)其他界面元素
由于第一布局文件中已对其他界面元素进行了等比例缩小处理来适应第二显示屏,此时可以不调整其他界面元素,即其他界面元素在第二布局文件中的大小可以与在第一布局文件中的大小相同。
需要说明的是,本申请实施例提供的页面显示方法主要用于对应用中未与第二显示屏适配的待显示页面进行显示。其中,未与第二显示屏适配的待显示页面是指该待显示页面在第二显示屏中显示时,存在字体和/或图标等过大或过小的问题。具体地,在将基于第一显示屏开发的应用适用于第二显示屏时,可以先确定该应用的待显示页面是否与第二显示屏适配。当该待显示页面未与第二显示屏适配时,表明在第二显示屏中显示该待显示页面时,会存在字体和/或图标等过大或过小的问题,此时,电子设备可以利用本申请实施例提供的页面显示方法对该待显示页面进行显示。当该待显示页面已与第二显示屏适配时,表明开发人员在开发该应用时,已根据第二显示屏对该待显示页面进行适配处理,即在第二显示屏中显示该待显示页面时,不会存在字体和/或图标等过大或过小的问题,此时,电子设备可以根据该应用的原有显示方式对该待显示页面进行显示。即本申请实施例提供的页面显示方法仅对应用中需要适配的待显示页面进行处理,并不会影响应用中已与第二显示屏适配的待显示页面,可以极大地提高页面显示方法的鲁棒性。
示例性的,电子设备可以通过下述两种方式来确定该待显示页面是否与第二显示屏适配:
方式一、根据页面标签确定
应理解,开发人员根据第一显示屏开发应用的各页面时,可以分别为各页面添加页面标签,例如添加下述的页面标签meta,页面标签用于表示该页面在第二显示屏中显示时,是否需要重新布局,即是否与第二显示屏适配。具体地,当meta中的isRelayout为true时,表示该页面在第二显示屏中显示时,需要重新布局,即表明该页面未与第二显示屏适配,也就是说,开发人员开发该页面时,未根据第二显示屏对该页面进行适配处理,因此,当该页面适用于第二显示屏时,第一布局文件不会与第二显示屏适配;当isRelayout为false时,表示该页面在第二显示屏中显示时,不需要重新布局,即表明该页面已与第二显示屏适配,也就是说,开发人员开发该页面时,已根据第二显示屏对该页面进行了适配处理,因此当该页面适用于第二显示屏时,第一布局文件会自动与第二显示屏适配。基于此,电子设备可以获取该待显示页面的页面标签,以根据页面标签确定该待显示页面是否与第二显示屏适配。
方式二、根据页面内容确定
具体地,电子设备可以获取该待显示页面对应的第一布局文件,此时,第一布局文件可以为根据第二 显示屏和原有显示方式对原始布局文件进行处理后的布局文件。原有显示方式可以是指开发人员设置的适配第二显示屏的显示方式,例如可以为按宽度或者高度等比例缩放的方式。随后,电子设备可以确定目标文本在第一布局文件中的字体大小,和/或目标图标在第一布局文件中的图标大小等,并根据目标文本在第一布局文件中的字体大小,和/或目标图标在第一布局文件中的图标大小等确定该待显示页面是否与第二显示屏适配。目标文本可以为该待显示页面中的任一文本。目标图标可以为该待显示页面中的任一图标。
示例性的,在第一显示屏的第一分辨率小于第二显示屏的第二分辨率时,若目标文本在第一布局文件中的字体大小大于第一预设阈值,和/或目标图标在第一布局文件中的图标大小大于第三预设阈值,电子设备可以确定该待显示页面未与第二显示屏适配。在第一显示屏的第一分辨率大于第二显示屏的第二分辨率时,若目标文本在第一布局文件中的字体大小小于第二预设阈值,和/或目标图标在第一布局文件中的图标大小小于第四预设阈值,电子设备可以确定该待显示页面未与第二显示屏适配。
其中,第一预设阈值、第二预设阈值、第三预设阈值和第四预设阈值可以由技术人员根据实际情况具体设置。例如,可以将第一预设阈值和第二预设阈值设置为相对于原始字体大小的比值,将第三预设阈值和第四预设阈值设置为相对于原始图标大小的比值,并可以将第一预设阈值和第二预设阈值设置为1.4,将第三预设阈值和第四预设阈值设置为0.6,也就是说,当目标文本在第一布局文件中的字体大小与目标文本在原始布局文件中的字体大小的比值大于1.4时,电子设备可以确定该待显示页面未与第二显示屏适配。或者,当目标图标在第一布局文件中的图标大小与目标图标在原始布局文件中的图标大小的比值小于0.6时,电子设备可以确定该待显示页面未与第二显示屏适配。
可以理解的是,上述根据显示屏的分辨率确定第二布局文件中的字体和/或图标是否过大或过小,以确定该待显示页面是否与第二显示屏适配,仅做示意性解释,不应理解为对本申请实施例的限制。本申请实施例中,在第一显示屏的像素密度与第二显示屏的像素密度不相同时,电子设备还可以结合显示屏的物理尺寸和/或像素密度来确定第二布局文件中的字体和/或图标是否过大,以确定该待显示页面是否与第二显示屏适配。
示例性的,在第一显示屏的像素密度与第二显示屏的像素密度不同的场景中,例如在第一显示屏的第一分辨率高于第二显示屏的第二分辨率,而第一显示屏的物理尺寸小于第二显示屏的物理尺寸时,第一显示屏的像素密度高于第二显示屏的像素密度,此时,当将基于第一显示屏开发的应用适用于第二显示屏时,由于第二显示屏的像素密度小于第一显示屏的像素密度,因此,该待显示页面在第二显示屏中显示时字体和/或图标等本身会对应变大。由于第二分辨率大于第一分辨率,因此在按宽度或高度等比例缩放时,会缩小该待显示页面中的字体和/或图标大小。当缩小后,该待显示页面仍存在字体和/或图标过大或过小时,电子设备则可以确定该待显示页面未与第二显示屏适配。
其中,在第一显示屏的像素密度与第二显示屏的像素密度不同的应用场景中,可以根据第二显示屏的第二分辨率、物理尺寸和像素密度来确定预设适配规则。具体的设置方式可以由技术人员根据实际场景参照前述预设适配规则的确定方式。
应理解,在将基于第一显示屏开发的应用适用于第二显示屏的电子设备时,一般是在第一显示屏的第一分辨率与第二显示屏的第二分辨率不相同时,才可能存在页面中的字体和/或图标等过大或过小的问题。因此,本申请实施例中,在应用启动后,电子设备可以先获取该应用所适用的第一显示屏的第一分辨率和电子设备的第二显示屏的第二分辨率。当第一分辨率与第二分辨率相同时,电子设备可以直接确定该应用的待显示页面与第二显示屏适配,此时,电子设备可以直接根据该应用的原有显示方式对该待显示页面进行显示。当第一分辨率与第二分辨率不相同时,电子设备则需确定该待显示页面是否与第二显示屏适配,当确定该待显示页面未与第二显示屏适配时,电子设备则可以根据本申请实施例提供的页面显示方法对该 待显示页面进行显示。
本申请实施例中,待显示页面可以为原生页面,也可以为第五代超文本标记语言(hypertext markup language 5,HTML5)页面,HTML5页面也可以称为H5页面。也就是说,本申请实施例提供的页面显示方法可以用于对未与第二显示屏适配的原生页面进行显示,也可以用于对未与第二显示屏适配的H5页面进行显示。
其中,原生页面是在Android操作***(Operation System,OS)、iOS、Harmony OS等移动平台上使用官方提供的开发语言、开发工具以及开发类库等开发得到的页面。例如,对于具有Android操作***的电子设备,原生页面可以为使用Java在安卓开发工具(Android Studio)上开发的安卓页面。例如,对于具有Harmony OS的电子设备,原生页面可以为使用鸿蒙标记语言(harmonyos markup language,HML)、层叠样式表(cascading style sheets,CSS)和JS(javascript语言)在鸿蒙开发工具(DevEco Studio)上开发的鸿蒙页面。H5页面则是使用HTML5、CSS和JS按照HTML5规范开发的页面。
示例性的,在待显示页面为原生页面时,电子设备可以通过***的原生引擎对该待显示页面进行显示。具体地,在确定待显示页面未与第二显示屏适配时,电子设备中的原生引擎可以确定该待显示页面对应的第一布局文件,并可以根据第二显示屏、预设适配规则和第一布局文件,得到第二布局文件。随后,原生引擎可以根据第二布局文件生成绘制节点树,对绘制节点树进行栅格化和合成处理,并通过GPU渲染显示于电子设备的第二显示屏中。
示例性的,在待显示页面为H5页面时,电子设备可以通过webview内核对该待显示页面进行显示。具体地,在确定待显示页面未与第二显示屏适配时,电子设备中的webview内核可以对该待显示页面进行解析,得到该待显示页面对应的各节点。随后,webview内核可以根据各节点之间的父子关系构建文档对象模型(document object model,DOM)树,同时获取该待显示页面对应的CSS,以根据CSS确定DOM树中各节点的样式。然后,webview内核可以根据DOM树和各节点的样式,生成该待显示页面对应的第一布局文件,并可以根据第二显示屏、预设适配规则和第一布局文件,得到第二布局文件。随后,webview内核可以根据第二布局文件生成图层树,并可以根据图层树生成绘制树。最后,webview内核可以对绘制树进行栅格化和合成处理,并可以通过GPU渲染将该待显示页面显示于电子设备的第二显示屏。
因此,在确定该待显示页面未与第二显示屏适配时,电子设备可以确定该待显示页面的类型,即确定该待显示页面是原生页面,还是H5页面。当该待显示页面是原生页面时,电子设备可以通过***的原生引擎对该待显示页面进行显示。当该待显示页面是H5页面时,电子设备可以通过webview内核对该待显示页面进行显示。
其中,待显示页面的类型的确定方式可以由技术人员根据实际场景具体设置。例如,可以根据待显示页面对应的第一布局文件来确定。示例性的,当第一布局文件中包含图片、文本等界面元素的一整块区域只有一个边框时,电子设备可以确定该待显示页面为H5页面;否则,电子设备可以确定该待显示页面为原生页面。
例如,可以根据待显示页面的页面标签来确定,即开发人员在开发应用的各页面时,可以为原生页面和H5页面添加不同的页面标签,如为原生页面添加第一页面标签,为H5页面添加第二页面标签。因此,当待显示页面的页面标签为第一页面标签时,电子设备可以确定该待显示页面为原生页面;当待显示页面的页面标签为第二页面标签时,电子设备可以确定该待显示页面为H5页面。
可以理解的是,本申请实施例提供的页面显示方法可以为电子设备的***功能,并可以用于对***应用的待显示页面进行显示,也可以用于对安装于电子设备中的第三方应用的待显示页面进行显示。即对于***应用,开发人员可以开发适用于第一显示屏的应用版本,电子设备可以根据该***功能将该应用版本 适用于第二显示屏的电子设备,极大地降低了开发人员的开发工作量。对于第三方应用,开发人员开发适用于第一显示屏的应用版本后,电子设备可以根据该***功能将该应用版本适用于第二显示屏的电子设备,而不需要开发人员根据电子设备的第二显示屏对第三方应用的各个页面进行重新开发,即不需要开发人员修改第三方应用的页面逻辑和页面布局来适配第二显示屏的电子设备,极大地降低了第三方应用的适配工作量。
下面以折叠设备和H5页面为例对本申请实施例提供的页面显示方法进行示例说明。其中,开发人员可以根据折叠设备处于折叠态的显示屏进行应用开发,当折叠设备处于折叠态时,折叠设备可以直接对该应用的各待显示页面进行显示。当折叠设备处于展开态时,折叠设备可以获取未与展开态适配的待显示页面,对于这些待显示页面,折叠设备可以根据本申请实施例提供的页面显示方法来进行显示。
请参阅图7,图7示出了本申请实施例提供的页面显示方法的示意性流程图。如图7所示,该方法可以包括:
S701、折叠设备检测到应用启动。
S702、折叠设备确定折叠设备当前所处的状态为展开态时,获取该应用的待显示页面。
示例性的,折叠设备可以根据折叠设备当前的显示屏的宽度和高度来确定折叠设备当前所处的状态。在一种可能的实现方式中,可以根据折叠设备当前的显示屏的宽度和高度计算高宽比,当高宽比位于预设范围时,折叠设备可以确定当前所处的状态为展开态;否则,折叠设备可以确定当前所处的状态为折叠态。其中,预设范围可以由技术人员根据实际情况具体设置,例如可以根据折叠设备处于展开态时显示屏的宽度和高度,将预设范围设置为[0.9,1.3]。
应理解,上述通过宽度和高度确定折叠设备当前所处的状态仅作示例性解释,不应理解为对本申请实施例的限制,本申请实施例中还可以通过其他方式来确定折叠设备当前所处的状态。
可选的,若折叠设备当前所处的状态为折叠态,折叠设备可以基于该应用的原有显示方式对该应用的待显示页面进行显示。
S703、折叠设备根据展开态的显示屏、预设适配规则和第一布局文件,将待显示页面显示于展开态的显示屏。
应理解,此时的预设适配规则可以为前述“一、将基于小分辨率的第一显示屏开发的应用适用于大分辨率的第二显示屏时的预设适配规则”中所描述的适配规则,关于预设适配规则的具体内容可以参照前述描述,在此不再赘述。其中,如前述所述,第一布局文件可以为该待显示页面在折叠态的显示屏中显示时的原始布局文件,或者可以为根据展开态的显示屏对原始布局文件按宽度或者按高度等比例缩放后的布局文件。
如前述所述,折叠设备可以根据展开态的显示屏和预设适配规则对第一布局文件进行调整,得到第二布局文件,并根据第二布局文件将待显示页面渲染显示于展开态的显示屏。或者,折叠设备可以根据第一布局文件对该待显示页面进行渲染显示,并在渲染显示时,可以根据展开态的显示屏和预设适配规则来调整该待显示页面。此时折叠设备还可以将该待显示页面在展开态的显示屏中显示时的布局文件保存为第二布局文件,后续折叠设备需要在展开态的显示屏再显示该待显示页面时,可以直接根据第二布局文件将该待显示页面渲染显示在折叠设备展开态的显示屏。
本申请实施例中,对于折叠设备,开发人员可以针对折叠态的显示屏进行应用开发,当该应用适用于展开态时,折叠设备可以根据展开态的显示屏、预设适配规则和第一布局文件,将第二布局文件渲染显示在展开态的显示屏中。其中,预设适配规则为对第一布局文件中的字体和/或图标等进行调整的规则,使得该待显示页面在展开态的显示屏中显示时的字体大小和/或图标大小等与展开态的显示屏相适配,以解决待 显示页面在展开态的显示屏中显示时的字体和/或图标等过大的问题,提高页面显示效果,提升用户体验。
可选的,在获取该待显示页面之后,折叠设备可以先确定该待显示页面是否与展开态的显示屏适配。当确定该待显示屏未与展开态的显示屏适配时,折叠设备可以根据展开态的显示屏、预设适配规则和第一布局文件,得到第二布局文件。当该待显示页面与展开态的显示屏适配,折叠设备可以基于该应用的原有显示方式对该待显示页面进行显示。即折叠设备可以仅针对未适配的待显示页面进行处理,不影响已适配页面在展开态的显示屏中的显示,提高显示效率,提升用户体验。
在此,折叠设备可以根据前述“方式一、根据页面标签确定”和“方式二、根据页面内容确定”中的任一方式来确定该待显示页面是否与展开态的显示屏适配,具体的确定内容可以参照前述描述,在此不再赘述。
可选的,在确定该待显示页面未与展开态的显示屏适配时,折叠设备可以确定该待显示页面的类型,即确定该待显示页面是原生页面,还是H5页面,以根据该待显示页面的类型得到第一布局文件,从而可以根据第一布局文件、预设适配规则和展开态的显示屏得到第二布局文件。
如前述所述,当该待显示页面为H5页面时,折叠设备可以通过webview内核生成该待显示页面对应的第一布局文件,并可以通过webview内核根据第一布局文件得到第二布局文件。其中,webview内核可以包括文档解析器、节点树构建器、样式解析器、布局计算器、二次重排器、图层树构建器、渲染树构建器和渲染器。示例性的,文档解析器可以对该待显示页面进行解析,得到该待显示页面中的各节点。节点树构建器可以根据各节点之间的父子关系构建DOM树。同时,样式解析器可以根据该待显示页面对应的CSS确定DOM树中各节点的样式。布局计算器可以根据DOM树和各节点的样式,生成该待显示页面对应的第一布局文件。二次重排器可以根据展开态的显示屏、预设适配规则和第一布局文件,得到第二布局文件。图层树构建器可以根据第二布局文件生成图层树。渲染树构建器则可以根据图层树生成绘制树。最后,渲染器对绘制树进行栅格化和合成处理后,可以通过GPU渲染将该待显示页面显示于折叠设备展开态的显示屏。
如前述所述,当该待显示页面为原生页面时,折叠设备可以通过***的原生引擎对该待显示页面进行解析,得到该待显示页面对应的第一布局文件,并可以根据展开态的显示屏、预设适配规则和第一布局文件,得到第二布局文件。随后,原生引擎可以根据第二布局文件将该待显示页面渲染显示于展开态的显示屏。
可选的,当检测到折叠设备由展开态变换至折叠态时,折叠设备则可以根据该待显示页面对应的原始布局文件来对该待显示页面进行显示,即可以将该待显示页面恢复至折叠态时的显示状态。
应理解,上述实施例中各步骤的序号的大小并不意味着执行顺序的先后,各过程的执行顺序应以其功能和内在逻辑确定,而不应对本申请实施例的实施过程构成任何限定。
对应于上文实施例所述的页面显示方法,本申请实施例还提供了一种页面显示装置,该装置的各个模块可以对应实现页面显示方法的各个步骤。
本申请实施例还提供了一种电子设备,所述电子设备包括至少一个存储器、至少一个处理器以及存储在所述至少一个存储器中并可在所述至少一个处理器上运行的计算机程序,所述处理器执行所述计算机程序时,使所述电子设备实现上述任意各个方法实施例中的步骤。示例性的,所述电子设备的结构可以如图1所示。
本申请实施例还提供了一种计算机可读存储介质,所述计算机可读存储介质存储有计算机程序,所述计算机程序被计算机执行时,使所述计算机实现上述任意各个方法实施例中的步骤。
本申请实施例提供了一种计算机程序产品,当计算机程序产品在电子设备上运行时,使得电子设备实现上述任意各个方法实施例中的步骤。
所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时,可以存储在一个计算机可读存储介质中。基于这样的理解,本申请实现上述实施例方法中的全部或部分流程,可以通过计算机程序来指令相关的硬件来完成,所述的计算机程序可存储于一计算机可读存储介质中,该计算机程序在被处理器执行时,可实现上述各个方法实施例的步骤。其中,所述计算机程序包括计算机程序代码,所述计算机程序代码可以为源代码形式、对象代码形式、可执行文件或某些中间形式等。所述计算机可读存储介质至少可以包括:能够将计算机程序代码携带到装置/电子设备的任何实体或装置、记录介质、计算机存储器、只读存储器(read-only memory,ROM)、随机存取存储器(random access memory,RAM)、电载波信号、电信信号以及软件分发介质。例如U盘、移动硬盘、磁碟或者光盘等。在某些司法管辖区,根据立法和专利实践,计算机可读存储介质不可以是电载波信号和电信信号。
在上述实施例中,对各个实施例的描述都各有侧重,某个实施例中没有详述或记载的部分,可以参见其它实施例的相关描述。
本领域普通技术人员可以意识到,结合本文中所公开的实施例描述的各示例的单元及算法步骤,能够以电子硬件、或者计算机软件和电子硬件的结合来实现。这些功能究竟以硬件还是软件方式来执行,取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能,但是这种实现不应认为超出本申请的范围。
在本申请所提供的实施例中,应该理解到,所揭露的装置/电子设备和方法,可以通过其它的方式实现。例如,以上所描述的装置/电子设备实施例仅仅是示意性的,例如,所述模块或单元的划分,仅仅为一种逻辑功能划分,实际实现时可以有另外的划分方式,例如多个单元或组件可以结合或者可以集成到另一个***,或一些特征可以忽略,或不执行。另一点,所显示或讨论的相互之间的耦合或直接耦合或通讯连接可以是通过一些接口,装置或单元的间接耦合或通讯连接,可以是电性,机械或其它的形式。
所述作为分离部件说明的单元可以是或者也可以不是物理上分开的,作为单元显示的部件可以是或者也可以不是物理单元,即可以位于一个地方,或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
以上所述实施例仅用以说明本申请的技术方案,而非对其限制;尽管参照前述实施例对本申请进行了详细的说明,本领域的普通技术人员应当理解:其依然可以对前述各实施例所记载的技术方案进行修改,或者对其中部分技术特征进行等同替换;而这些修改或者替换,并不使相应技术方案的本质脱离本申请各实施例技术方案的精神和范围,均应包含在本申请的保护范围之内。
Claims (13)
- 一种页面显示方法,其特征在于,应用于电子设备,所述电子设备包括第二显示屏,所述方法包括:获取待显示页面对应的第一布局文件,所述待显示页面为第一显示屏对应的应用的页面,所述第一显示屏的第一分辨率与所述第二显示屏的第二分辨率不相同;根据预设适配规则、所述第二显示屏和所述第一布局文件,将所述待显示页面显示于所述第二显示屏,所述预设适配规则为对所述第一布局文件中的字体、图标和图片中的至少一个进行调整的规则。
- 根据权利要求1所述的方法,其特征在于,所述根据预设适配规则、所述第二显示屏和所述第一布局文件,将所述待显示页面显示于所述第二显示屏,包括:确定所述第一布局文件是否与所述第二显示屏适配;当所述第一布局文件未与所述第二显示屏适配时,根据所述预设适配规则、所述第二显示屏和所述第一布局文件,将所述待显示页面显示于所述第二显示屏。
- 根据权利要求2所述的方法,其特征在于,所述确定所述第一布局文件是否与所述第二显示屏适配,包括:获取所述待显示页面对应的页面标签,并根据所述页面标签确定所述第一布局文件是否与所述第二显示屏适配。
- 根据权利要求2所述的方法,其特征在于,所述确定所述第一布局文件是否与所述第二显示屏适配,包括:获取所述第一显示屏的第一分辨率和所述第二显示屏的第二分辨率,以及获取目标文本在所述第一布局文件中的字体大小和/或目标图标在所述第一布局文件中的图标大小,所述目标文本为所述待显示页面中的任一文本,所述目标图标为所述待显示页面中的任一图标;当所述第一分辨率小于所述第二分辨率时,若所述目标文本在所述第一布局文件中的字体大小大于第一预设阈值,和/或所述目标图标在所述第一布局文件中的图标大小大于第三预设阈值时,确定所述第一布局文件未与所述第二显示屏适配;当所述第一分辨率大于所述第二分辨率时,若所述目标文本在所述第一布局文件中的字体大小小于第二预设阈值,和/或所述目标图标在所述第一布局文件中的图标大小小于第四预设阈值时,确定所述第一布局文件未与所述第二显示屏适配。
- 根据权利要求1至4中任一项所述的方法,其特征在于,所述根据预设适配规则、所述第二显示屏和所述第一布局文件,将所述待显示页面显示于所述第二显示屏,包括:根据所述预设适配规则和所述第二显示屏对所述第一布局文件进行调整,得到第二布局文件;根据所述第二布局文件将所述待显示页面显示于所述第二显示屏。
- 根据权利要求5所述的方法,其特征在于,当所述第一布局文件为所述待显示页面在所述第一显示屏中显示时的原始布局文件时,所述根据所述预设适配规则和所述第二显示屏对所述第一布局文件进行调整,得到第二布局文件,包括:根据所述预设适配规则和所述第二显示屏调整所述第一布局文件中的图标排列,和/或,根据所述预设适配规则和所述第二显示屏调整所述第一布局文件中的图片大小或图片排列,得到所述第二布局文件。
- 根据权利要求6所述的方法,其特征在于,所述根据所述预设适配规则和所述第二显示屏调整所述第一布局文件中的图片大小或图片排列,包括:当所述第一布局文件中的图片宽度小于第一宽度阈值时,根据所述预设适配规则和所述第二显示屏调整所述第一布局文件中的图片排列;当所述第一布局文件中的图片宽度大于或等于第一宽度阈值时,根据所述预设适配规则和所述第二显示屏调整所述待显示页面中的图片大小。
- 根据权利要求5所述的方法,其特征在于,当所述第一布局文件为根据所述第二显示屏对原始布局文件等比例缩放后的布局文件时,所述根据所述预设适配规则和所述第二显示屏对所述第一布局文件进行调整,得到第二布局文件,包括:根据所述预设适配规则和所述第二显示屏调整所述第一布局文件中的字体大小,得到所述第二布局文件;和/或,根据所述预设适配规则和所述第二显示屏调整所述第一布局文件中的图标大小和图标排列,得到所述第二布局文件。
- 根据权利要求8所述的方法,其特征在于,当所述第一显示屏的第一分辨率小于所述第二显示屏的第二分辨率时,所述第二布局文件中的第二字体大小为所述第一布局文件中的第一字体大小的α倍,α=h/(h+w);当所述第一显示屏的第一分辨率大于所述第二显示屏的第二分辨率时,所述第二布局文件中的第二字体大小为所述第一布局文件中的第一字体大小的β倍,β=(h+w)/h;其中,h为所述第二显示屏的高度,w为所述第二显示屏的宽度。
- 根据权利要求5、8至9中任一项所述的方法,其特征在于,当所述第一布局文件为根据所述第二显示屏对原始布局文件等比例缩放后的布局文件时,所述根据所述预设适配规则和所述第二显示屏对所述第一布局文件进行调整,得到第二布局文件,包括:当所述第一布局文件中的图片宽度小于第二宽度阈值时,根据所述预设适配规则和所述第二显示屏调整所述第一布局文件中的图片大小和图片排列,得到所述第二布局文件。
- 根据权利要求1至10中任一项所述的方法,其特征在于,所述电子设备为具有折叠屏的电子设备,所述第一显示屏为所述折叠屏处于折叠态的显示屏,所述第二显示屏为所述折叠屏处于展开态的显示屏;或者,所述第一显示屏为所述折叠屏处于展开态的显示屏,所述第二显示屏为所述折叠屏处于折叠态的显示屏。
- 一种电子设备,包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序,其特征在于,所述处理器执行所述计算机程序时,使所述电子设备实现如权利要求1至11中任一项所述的页面显示方法。
- 一种计算机可读存储介质,所述计算机可读存储介质存储有计算机程序,其特征在于,所述计算机程序被计算机执行时,使所述计算机实现如权利要求1至11中任一项所述的页面显示方法。
Applications Claiming Priority (3)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN2021112375450 | 2021-10-22 | ||
CN202111237545.0A CN116009802A (zh) | 2021-10-22 | 2021-10-22 | 页面显示方法、电子设备及计算机可读存储介质 |
PCT/CN2022/114538 WO2023065812A1 (zh) | 2021-10-22 | 2022-08-24 | 页面显示方法、电子设备及计算机可读存储介质 |
Publications (1)
Publication Number | Publication Date |
---|---|
CN118103809A true CN118103809A (zh) | 2024-05-28 |
Family
ID=86019783
Family Applications (2)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202111237545.0A Pending CN116009802A (zh) | 2021-10-22 | 2021-10-22 | 页面显示方法、电子设备及计算机可读存储介质 |
CN202280069500.3A Pending CN118103809A (zh) | 2021-10-22 | 2022-08-24 | 页面显示方法、电子设备及计算机可读存储介质 |
Family Applications Before (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202111237545.0A Pending CN116009802A (zh) | 2021-10-22 | 2021-10-22 | 页面显示方法、电子设备及计算机可读存储介质 |
Country Status (3)
Country | Link |
---|---|
EP (1) | EP4379532A1 (zh) |
CN (2) | CN116009802A (zh) |
WO (1) | WO2023065812A1 (zh) |
Families Citing this family (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN117539561A (zh) * | 2022-08-02 | 2024-02-09 | 华为技术有限公司 | 页面显示方法和相关装置 |
CN117453170B (zh) * | 2023-12-25 | 2024-03-29 | 西安芯云半导体技术有限公司 | 一种显示控制方法、装置及存储介质 |
Citations (5)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN102622217A (zh) * | 2011-01-30 | 2012-08-01 | 中兴通讯股份有限公司 | 一种跨屏运行应用的方法及*** |
US20130007603A1 (en) * | 2011-06-29 | 2013-01-03 | Apple Inc. | Fixed layout electronic publications |
CN110598140A (zh) * | 2019-08-15 | 2019-12-20 | 西安万像电子科技有限公司 | 页面调整方法、装置及服务器 |
CN111190681A (zh) * | 2019-12-31 | 2020-05-22 | 华为技术有限公司 | 显示界面适配方法、显示界面适配设计方法和电子设备 |
CN112506386A (zh) * | 2019-09-16 | 2021-03-16 | 华为技术有限公司 | 一种折叠屏显示方法及电子设备 |
Family Cites Families (5)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN102457528A (zh) * | 2010-10-19 | 2012-05-16 | 北京邮电大学 | 面向手机终端的自适应发布Web内容的方法与*** |
CN108427546B (zh) * | 2018-05-03 | 2022-03-08 | 深圳Tcl新技术有限公司 | 显示装置的全屏幕适配方法、显示装置及存储介质 |
CN108733336B (zh) * | 2018-05-21 | 2021-10-01 | 北京字节跳动网络技术有限公司 | 页面显示方法和装置 |
CN110083415A (zh) * | 2019-03-25 | 2019-08-02 | 厦门网宿有限公司 | 设备屏幕适配方法、终端设备、及存储介质 |
CN110147230A (zh) * | 2019-04-18 | 2019-08-20 | 浙江数链科技有限公司 | 页面适配方法、装置、设备和存储介质 |
-
2021
- 2021-10-22 CN CN202111237545.0A patent/CN116009802A/zh active Pending
-
2022
- 2022-08-24 CN CN202280069500.3A patent/CN118103809A/zh active Pending
- 2022-08-24 WO PCT/CN2022/114538 patent/WO2023065812A1/zh unknown
- 2022-08-24 EP EP22882431.4A patent/EP4379532A1/en active Pending
Patent Citations (5)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN102622217A (zh) * | 2011-01-30 | 2012-08-01 | 中兴通讯股份有限公司 | 一种跨屏运行应用的方法及*** |
US20130007603A1 (en) * | 2011-06-29 | 2013-01-03 | Apple Inc. | Fixed layout electronic publications |
CN110598140A (zh) * | 2019-08-15 | 2019-12-20 | 西安万像电子科技有限公司 | 页面调整方法、装置及服务器 |
CN112506386A (zh) * | 2019-09-16 | 2021-03-16 | 华为技术有限公司 | 一种折叠屏显示方法及电子设备 |
CN111190681A (zh) * | 2019-12-31 | 2020-05-22 | 华为技术有限公司 | 显示界面适配方法、显示界面适配设计方法和电子设备 |
Also Published As
Publication number | Publication date |
---|---|
EP4379532A1 (en) | 2024-06-05 |
WO2023065812A1 (zh) | 2023-04-27 |
CN116009802A (zh) | 2023-04-25 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN110597512B (zh) | 显示用户界面的方法及电子设备 | |
CN115473957B (zh) | 一种图像处理方法和电子设备 | |
US20240232511A1 (en) | Adaptive Card Generation Method, Terminal Device, and Server | |
CN114115619B (zh) | 一种应用程序界面显示的方法及电子设备 | |
WO2023065812A1 (zh) | 页面显示方法、电子设备及计算机可读存储介质 | |
CN111508039A (zh) | 一种墨水屏的文字处理方法及通信终端 | |
WO2020233593A1 (zh) | 一种前景元素的显示方法和电子设备 | |
WO2024001810A1 (zh) | 设备交互方法、电子设备及计算机可读存储介质 | |
CN116450251A (zh) | 一种适配多设备的页面布局的方法及电子设备 | |
CN117480489A (zh) | 显示方法及电子设备 | |
WO2023005751A1 (zh) | 渲染方法及电子设备 | |
CN118043772A (zh) | 绘制方法及电子设备 | |
CN115460343A (zh) | 图像处理方法、设备及存储介质 | |
CN114793283A (zh) | 图像编码方法、图像解码方法、终端设备及可读存储介质 | |
CN116700655B (zh) | 一种界面显示方法及电子设备 | |
CN116185245B (zh) | 一种页面显示方法及电子设备 | |
CN117152022B (zh) | 图像处理方法及电子设备 | |
CN113986406B (zh) | 生成涂鸦图案的方法、装置、电子设备及存储介质 | |
CN116672707B (zh) | 生成游戏预测帧的方法和电子设备 | |
WO2023169276A1 (zh) | 投屏方法、终端设备及计算机可读存储介质 | |
CN116204093B (zh) | 一种页面显示方法及电子设备 | |
CN116560770A (zh) | 壁纸显示方法、电子设备及计算机可读存储介质 | |
CN117290004A (zh) | 组件预览的方法和电子设备 | |
CN118278427A (zh) | 翻译优化方法、翻译方法、电子设备及可读存储介质 | |
CN115599476A (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 |