WO2023029171A1 - 页面布局的自适应调整方法及计算设备 - Google Patents

页面布局的自适应调整方法及计算设备 Download PDF

Info

Publication number
WO2023029171A1
WO2023029171A1 PCT/CN2021/125781 CN2021125781W WO2023029171A1 WO 2023029171 A1 WO2023029171 A1 WO 2023029171A1 CN 2021125781 W CN2021125781 W CN 2021125781W WO 2023029171 A1 WO2023029171 A1 WO 2023029171A1
Authority
WO
WIPO (PCT)
Prior art keywords
layout
page
block
adjustment data
data
Prior art date
Application number
PCT/CN2021/125781
Other languages
English (en)
French (fr)
Inventor
贾玉辉
Original Assignee
掌阅科技股份有限公司
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by 掌阅科技股份有限公司 filed Critical 掌阅科技股份有限公司
Publication of WO2023029171A1 publication Critical patent/WO2023029171A1/zh

Links

Images

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
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/38—Creation or generation of source code for implementing user interfaces

Definitions

  • the present disclosure relates to the technical field of mobile applications, in particular to a page layout adaptive adjustment method and a computing device.
  • Page layout refers to the arrangement and design of text, graphics or tables on the page. It is one of the most important tasks in designing the application program interface. Whether the application program is good or not depends largely on the rationality of the page layout. At the same time, there are different models of terminal devices on the market, and the display sizes of corresponding device screens vary. How to design page layouts to adapt to different device screen sizes is a problem that needs to be solved.
  • one solution is that the designer needs to design matching layout configuration data according to the different screen sizes of different devices, and output a set of corresponding design drafts, so as to optimize the display of the device.
  • the disadvantage is that as the screen size of the device is more and more different, and there are more and more heterosexual screens, the workload of the designer will increase several times, the content of the configuration of the technician will increase exponentially, and the workload of adjusting the UI effect will increase. It is also very large.
  • Another solution is to design only one set of design drafts.
  • this set of design drafts is applied to different device screens, the display effect achieved is that the number of characters displayed by different devices may be different, or the position of line breaks may be inconsistent.
  • the design draft of the book city page is applied to a mobile phone, limited by the screen size of the mobile phone, the number of texts in the book introductions displayed for each book is small; when the same design draft of the book city page is applied to In the case of a tablet computer, since the screen size of the tablet computer is relatively large, the number of texts in the introduction of each book displayed is relatively large. This difference causes inconsistency in the look and feel brought by the interface when using different devices, and it cannot guarantee that the page layout design ideas in the design draft can be fully presented, which affects the user experience.
  • the present disclosure is proposed to provide a page layout adaptive adjustment method and a computing device that overcome the above problems or at least partially solve the above problems.
  • a page layout adaptive adjustment method which is used to adjust the page layout for different device screen sizes, and the method includes:
  • a computing device including: a processor, a memory, a communication interface, and a communication bus, and the processor, the memory, and the communication interface complete mutual communication through the communication bus;
  • the memory is used to store at least one executable instruction, and the executable instruction enables the processor to adjust the page layout according to different device screen sizes, specifically performing the following operations:
  • a non-volatile computer-readable storage medium wherein at least one executable instruction is stored in the non-volatile computer-readable storage medium, and the executable instruction causes the processor to execute the above page The operation corresponding to the adaptive adjustment of the layout.
  • a computer program product which includes the calculation program stored on the above-mentioned non-volatile computer-readable storage medium.
  • the layout reference data is adapted and adjusted to obtain layout adjustment data that is more suitable for the current device screen size, which reduces human efficiency costs; moreover, since the above-mentioned adaptation adjustment is based on the proportional adjustment of the scaling factor, so The content displayed on different devices is consistent, which ensures the consistency of interface look and feel when using different devices, can completely restore the page layout design idea, and improves the display effect.
  • FIG. 1 shows a schematic flowchart of a method for adaptively adjusting a page layout according to an embodiment of the present disclosure
  • FIG. 2 shows a schematic flowchart of a method according to another embodiment of the present disclosure
  • Fig. 3 shows a schematic diagram of presenting an application page in a mobile phone in an embodiment of the present disclosure
  • Fig. 4 shows a schematic diagram of presenting an application page on a tablet computer in an embodiment of the present disclosure
  • Fig. 5 shows a schematic diagram of a book list page presented in a mobile phone in an embodiment of the present disclosure
  • FIG. 6 shows a schematic diagram of a book list page presented on a tablet computer in an embodiment of the present disclosure
  • Fig. 7 shows a schematic structural diagram of a computing device according to an embodiment of the present disclosure.
  • Fig. 1 shows a schematic flowchart of a method for adaptively adjusting a page layout according to an embodiment of the present disclosure. This method is used to adjust the page layout according to different device screen sizes, and the adjusted page is specifically an application program interface, which can be applied to terminal devices such as mobile phones and tablet computers. As shown in Figure 1, the method includes the following steps:
  • Step 101 acquiring layout reference data for page layout according to a preset size.
  • the method adopted in this embodiment does not require the designer to design matching design drafts according to the different screen sizes of different devices, and only needs the designer to design a set of general design drafts.
  • the general design draft is specifically a page layout design draft with a preset layout size and high-fidelity effect, for example, designing a design draft with a preset size of 1920*1080.
  • the layout reference data of each UI element on the page can be obtained from the design draft, and the layout reference data can be: text coordinates, font size, picture coordinates, picture size and other data related to the layout position and size of the UI elements.
  • Step 102 calculate the scaling factor according to the preset size and the current device screen size.
  • the device hardware information of the current terminal device can be obtained, such as the device model, and the screen size of the current device can be obtained by querying the device hardware information.
  • the zoom factor D can be calculated based on the width W1 of the preset size and the width W2 of the current device screen size, see the following formula:
  • Step 103 input the layout reference data and scaling factor into the calculation component, and obtain the layout adjustment data calculated and output by the calculation component.
  • This method implements calculation processing through pre-created calculation components.
  • the calculation component provides a set of mathematical methods to multiply all the input data by the scaling factor to obtain the best layout configuration data that adapts to the current device screen size as the layout adjustment data.
  • the calculation processing implemented by the calculation component is based on the scale factor for equal-scale calculation, so the output layout adjustment data achieves the technical effect of equal-scale adjustment relative to the layout reference data.
  • Step 104 perform page layout processing according to the layout adjustment data.
  • the subject of execution of this method is the server. Specifically, after the application client is started, the server obtains the screen size of the current device that starts the application, obtains the layout adjustment data according to the above method, and adjusts the layout according to the layout adjustment data. After the page layout is processed, it is fed back to the application client for rendering and rendering.
  • the execution subject of this method is the client. Specifically, after the application client is started, the client receives the unadjusted page fed back by the server, and obtains the layout adjustment data locally on the client according to the above method. , after performing layout processing on the page according to the layout adjustment data, and then performing drawing and rendering.
  • the solutions provided by the above-mentioned embodiments of the present disclosure do not require designers to design matching design drafts according to the different screen sizes of different devices, but only need designers to design a set of general design drafts.
  • the configuration data is used as layout reference data, and the layout reference data is adapted and adjusted to obtain layout adjustment data that is more suitable for the current device screen size, reducing labor cost; at the same time, because the above-mentioned adaptation adjustment is based on the scaling factor to perform proportional adjustments , so the content displayed on different devices is consistent, which ensures the consistency of interface look and feel when using different devices, can completely restore the page layout design idea, and improves the display effect.
  • Fig. 2 shows a schematic flowchart of a method according to another embodiment of the present disclosure. As shown in Figure 2, the method includes the following steps:
  • Step 201 acquiring layout reference data for page layout according to a preset size.
  • the design draft is specifically a page layout design draft with a preset layout size and high-fidelity effects. For example, a design draft with a preset size of 1920*1080 design draft.
  • the layout reference data of each UI element on the page can be obtained from the design draft, and the layout reference data can be: text coordinates, font size, picture coordinates, picture dimensions and other data related to the layout position and size of the UI elements.
  • Step 202 obtain the device model information of the current device, and determine the number of pages that can be displayed on one screen of the current device screen according to the device model information.
  • the device model information of the current device After the app starts, get the device model information of the current device. Specifically, the device hardware information of the current terminal device, such as the device model, may be obtained, and the number of pages that can be displayed on one screen of the current device screen is determined according to the device model information.
  • the current device is a tablet computer, then determine that the number of pages that can be displayed on one screen of the current device screen is 2, that is, Display two left and right pages on one screen; if the current device is a mobile phone, determine that the number of pages that can be displayed on one screen of the current device screen is one, that is, one page is displayed on one screen.
  • FIG. 3 shows a schematic diagram of an application page presented on a mobile phone in an embodiment of the present disclosure
  • FIG. 4 shows a schematic diagram of an application page presented on a tablet computer in an embodiment of the present disclosure.
  • One page displayed on one screen of the current device screen in FIG. 3 is one page
  • one page displayed on one screen of the current device screen in FIG. 4 is two pages, which are left and right respectively.
  • displaying a single page or multiple pages on one screen is not limited to distinguishing between mobile phones and tablet computers, and for some mobile phones with large enough screen sizes, it can also support displaying multiple pages on one screen. Further, the number of page shares may be determined according to the current device screen size.
  • Step 203 calculating the scaling factor according to the preset size, the current device screen size and the number of page copies.
  • the scaling factor D can be calculated based on the width W1 of the preset size, the width W2 of the current device screen size, and the number of page copies N, see the following formula:
  • Step 204 input the layout reference data and the scaling factor into the calculation component, and obtain the layout adjustment data calculated and output by the calculation component.
  • This method implements calculation processing through pre-created calculation components.
  • the calculation component provides a set of mathematical methods to multiply all the input data by the scaling factor to obtain the best layout configuration data that adapts to the current device screen size as the layout adjustment data.
  • the calculation processing implemented by the calculation component is based on the scale factor for equal-scale calculation, so the output layout adjustment data achieves the technical effect of equal-scale adjustment relative to the layout reference data.
  • calculation processing may be performed in units of UI elements.
  • the page includes at least one first UI element, and each first UI element has corresponding layout reference data; the layout reference data and the zoom factor of each first UI element are input into the calculation component, and the calculation component is calculated and obtained.
  • the layout reference data of each UI element is used as input data, and the input data is multiplied by a scaling factor to obtain layout adjustment data of each UI element.
  • the layout reference data and layout adjustment data include at least: the coordinate data and size data of the UI element, and by inputting the coordinate data and size data of the UI element into the calculation component, the coordinate data and size of the UI element after the proportional adjustment are calculated. data.
  • this page is specifically a book city page.
  • the design idea of the book city page is to display book information in the form of a list.
  • the UI elements include: book cover 31, book name 32, book introduction 33, book cover 31 is a picture, Book title 32 and book introduction 33 are characters.
  • the picture coordinates, picture size and zoom factor of the book cover 31 preset in the design draft can be input into the calculation component respectively, and the adjusted picture coordinates and picture size can be obtained as the layout adjustment data of the book cover 31 ; Input the text coordinates, font size and scaling factor of the preset book name 32 in the design draft into the calculation component, and obtain the adjusted text coordinates and font size, as the layout adjustment data of the book name 32; Input the text coordinates, font size and zoom factor of Book Introduction 33 into the calculation component, and obtain the adjusted text coordinates and font size, which are used as the layout adjustment data of Book Introduction 33, so as to obtain various UI elements that adapt to the screen size of the mobile phone The layout adjustment data for .
  • calculation processing may also be performed in units of blocks.
  • the page includes at least one second UI element located in each block, each second UI element has corresponding layout relative reference data, and each block has corresponding layout reference data; in units of blocks, the The relative layout reference data and scaling factor of each second UI element belonging to the same block are input into the calculation component, and the relative layout adjustment data of each second UI element belonging to the same block calculated and output by the calculation component is obtained; The layout reference data and scaling factors of the blocks are input into the calculation component, and the layout adjustment data of each block calculated and output by the calculation component are obtained.
  • the layout relative data (including: layout relative reference data and layout relative adjustment data) is the layout data of the UI elements located in the block relative to the block.
  • book cover 31, book title 32, book introduction 33 belong to the same block 30, and the relative layout data of the book cover 31, book title 32, and book introduction 33 are relative to the layout data of the block.
  • the picture coordinates of the book cover 31 are relative picture coordinates, which are relative to the block coordinates.
  • the relative coordinates and sizes of the book cover 31, book title 32, and book introduction 33 in the preset block 30 in the design draft can be respectively calculated (for a picture, the size is the picture size; For the text, the size is the font size) and the zoom factor are input into the calculation component to obtain the adjusted relative coordinates and size, which are used as the relative adjustment data of the layout of each UI element; the block coordinates of the block 30 preset in the design draft and the block size and scaling factor are input into the calculation component, and the adjusted block coordinates and block size are obtained as the layout adjustment data of the block.
  • the method further includes: after obtaining the relative layout adjustment data of each second UI element of any block in the at least two blocks calculated and output by the calculation component, for the at least two blocks For other blocks, the layout relative adjustment data of each second UI element of the block is reused.
  • Step 205 perform page layout processing according to the layout adjustment data.
  • Fig. 5 shows a schematic diagram of a book list page presented on a mobile phone in an embodiment of the present disclosure
  • Fig. 6 shows a schematic diagram of a book list page presented on a tablet computer in an embodiment of the present disclosure.
  • the list of books displayed on one screen of the current device screen in FIG. 5 is 1 column
  • the list of books displayed on one screen of the current device screen in FIG. 6 is 2 columns, which are left and right columns respectively.
  • the same books on the two book list pages include: Chinese Materia Medica (Undergraduate), The Beautiful Legend of Chinese Herbal Medicine, 100 Spinal Exercises and Sports Mechanics..., Massage and Massage (Thirteenth Five-Year Plan), The basic theory of traditional Chinese medicine, through comparison, it is found that the contents displayed in the blocks corresponding to the same book in different devices are consistent.
  • the basic theory of traditional Chinese medicine and knowledge of the performance, efficacy, and clinical application rules of commonly used traditional Chinese medicine is also the same, that is, even if the screen size of the device is different, but the content exposed in the same book block
  • the number of text content, pictures, etc. are consistent, which ensures the consistency of interface look and feel when using different devices.
  • the method provided by the embodiments of the present disclosure may also be applicable to the adaptive adjustment of the page layout when the mobile phone or tablet computer is in landscape orientation.
  • the page layout is performed according to the layout adjustment data determined by the above process, so that the page (one or more copies) is presented in the center of the horizontal screen.
  • the page layout design idea is completely restored.
  • the method provided by this embodiment further includes: for any first UI element, judging whether the first UI element is a non-vector element; if so, adjusting the layout data of the first UI element Perform rounding processing, and then use the rounded layout adjustment data to perform page layout processing. If not, the layout adjustment data output by the calculation component is directly used for page layout processing. Or, for any second UI element, it is judged whether the second UI element is a non-vector element; if so, the relative layout adjustment data of the second UI element is rounded, and the The layout adjustment data of the block is rounded, and then the page layout is processed by using the rounded layout adjustment data. If not, the layout adjustment data output by the calculation component is directly used for page layout processing.
  • vector elements are represented by geometric primitives based on mathematical equations such as points, lines, or polygons, which store the information of lines and blocks; the difference between vector elements and non-vector elements is that vector elements and resolution Regardless of size, there is no distortion when zooming in, out, or rotating; non-vector elements are distorted.
  • the layout adjustment data calculated and output by the calculation component may be a decimal. If the UI element is a non-vector element, the layout processing based on the decimal will cause distortion of the UI element, resulting in unclear presentation of the UI element.
  • the layout adjustment data of the UI element is rounded.
  • the rounding processing may be rounding or rounding the decimal part, so as to ensure that the layout adjustment data of the non-vector UI element is an integer.
  • the layout adjustment data of the block needs to be rounded.
  • the solutions provided by the above-mentioned embodiments of the present disclosure do not require designers to design matching design drafts according to the different screen sizes of different devices, but only need designers to design a set of general design drafts.
  • the configuration data is used as layout reference data, and the layout reference data is adapted and adjusted to obtain layout adjustment data that is more suitable for the current device screen size, reducing labor cost; at the same time, because the above-mentioned adaptation adjustment is based on the scaling factor to perform proportional adjustments , so the content displayed on different devices is consistent, which ensures the consistency of interface look and feel when using different devices, can completely restore the page layout design idea, and improves the display effect.
  • this embodiment also supports displaying N pages on one screen, that is, N copies of the design draft content are displayed by default.
  • N copies of the design draft content are displayed by default.
  • the preset width of the zoom factor is obtained, and on the basis of restoring the design idea of the page layout, as much content as possible can be displayed on one screen.
  • the calculation amount of the calculation components can be greatly reduced, and the calculation efficiency can be improved. For the situation where there are non-vector elements in the page, it can ensure the clear presentation of the non-vector elements.
  • Embodiments of the present disclosure also provide a non-volatile computer-readable storage medium, where at least one executable instruction is stored in the non-volatile computer-readable storage medium, and the computer-executable instruction can execute any of the above method embodiments.
  • the adaptive adjustment method of the page layout is used to adjust the page layout for different device screen sizes.
  • the executable instruction can be used to make the processor perform the following operations:
  • executable instructions further cause the processor to perform the following operations:
  • the page includes at least one first UI element, and each first UI element has corresponding layout reference data; the executable instructions further cause the processor to perform the following operations:
  • the layout reference data and scaling factors of each first UI element are input into the calculation component to obtain the layout adjustment data of each first UI element calculated and output by the calculation component.
  • the page includes at least one second UI element located in each block, each second UI element has corresponding layout relative reference data, and each block has corresponding layout reference data;
  • the executable instructions further cause the processor to:
  • Layout relative adjustment data input the layout relative reference data and scaling factor of each second UI element belonging to the same block into the calculation component, and obtain the calculated and output values of each second UI element belonging to the same block by the calculation component.
  • Layout relative adjustment data input the layout relative reference data and scaling factor of each second UI element belonging to the same block into the calculation component, and obtain the calculated and output values of each second UI element belonging to the same block by the calculation component.
  • Page layout processing is performed according to the layout adjustment data of each block and the relative layout adjustment data of each second UI element belonging to the same block.
  • the executable instructions further cause the processor to perform the following operations :
  • each second UI element of any block in the at least two blocks calculated and output by the computing component, for other blocks in the at least two blocks, reuse the block's The layout of each second UI element is adjusted relative to the data.
  • executable instructions further cause the processor to perform the following operations:
  • any first UI element determine whether the first UI element is a non-vector element
  • executable instructions further cause the processor to perform the following operations:
  • any second UI element determine whether the second UI element is a non-vector element
  • Fig. 7 shows a schematic structural diagram of a computing device according to an embodiment of the present disclosure, and the specific embodiment of the present disclosure does not limit the specific implementation of the computing device.
  • the computing device may include: a processor (processor) 502, a communication interface (Communications Interface) 504, a memory (memory) 506, and a communication bus 508.
  • processor processor
  • Communication interface Communication Interface
  • memory memory
  • the processor 502 , the communication interface 504 , and the memory 506 communicate with each other through the communication bus 508 .
  • the communication interface 504 is configured to communicate with network elements of other devices such as clients or other servers.
  • the processor 502 is configured to execute the program 510, and specifically, may execute relevant steps in the above embodiment of the method for adaptively adjusting the page layout.
  • the program 510 may include program codes including computer operation instructions.
  • the processor 502 may be a central processing unit CPU, or an ASIC (Application Specific Integrated Circuit), or one or more integrated circuits configured to implement the embodiments of the present disclosure.
  • the one or more processors included in the computing device may be of the same type, such as one or more CPUs, or may be different types of processors, such as one or more CPUs and one or more ASICs.
  • the memory 506 is used to store the program 510 .
  • the memory 506 may include a high-speed RAM memory, and may also include a non-volatile memory (non-volatile memory), such as at least one disk memory.
  • the program can be used to cause the processor to perform the following operations:
  • the program further enables the processor to perform the following operations:
  • the page includes at least one first UI element, and each first UI element has corresponding layout reference data; the program further causes the processor to perform the following operations:
  • the layout reference data and scaling factors of each first UI element are input into the calculation component to obtain the layout adjustment data of each first UI element calculated and output by the calculation component.
  • the page includes at least one second UI element located in each block, each second UI element has corresponding layout relative reference data, and each block has corresponding layout reference data;
  • the program further causes the processor to:
  • Layout relative adjustment data input the layout relative reference data and scaling factor of each second UI element belonging to the same block into the calculation component, and obtain the calculated and output values of each second UI element belonging to the same block by the calculation component.
  • Layout relative adjustment data input the layout relative reference data and scaling factor of each second UI element belonging to the same block into the calculation component, and obtain the calculated and output values of each second UI element belonging to the same block by the calculation component.
  • Page layout processing is performed according to the layout adjustment data of each block and the relative layout adjustment data of each second UI element belonging to the same block.
  • the program further causes the processor to perform the following operations:
  • each second UI element of any block in the at least two blocks calculated and output by the computing component, for other blocks in the at least two blocks, reuse the block's The layout of each second UI element is adjusted relative to the data.
  • the program further enables the processor to perform the following operations:
  • any first UI element determine whether the first UI element is a non-vector element
  • the program further enables the processor to perform the following operations:
  • any second UI element determine whether the second UI element is a non-vector element
  • modules in the device in the embodiment can be adaptively changed and arranged in one or more devices different from the embodiment.
  • Modules or units or components in the embodiments may be combined into one module or unit or component, and furthermore may be divided into a plurality of sub-modules or sub-units or sub-assemblies.
  • All features disclosed in this specification including accompanying claims, abstract and drawings) and any method or method so disclosed may be used in any combination, except that at least some of such features and/or processes or units are mutually exclusive. All processes or units of equipment are combined.
  • Each feature disclosed in this specification may be replaced by alternative features serving the same, equivalent or similar purpose, unless expressly stated otherwise.
  • the various component embodiments of the present disclosure may be implemented in hardware, or in software modules running on one or more processors, or in a combination thereof.
  • a microprocessor or a digital signal processor (DSP) may be used in practice to implement some or all functions of some or all components according to the embodiments of the present disclosure.
  • DSP digital signal processor
  • the present disclosure can also be implemented as an apparatus or apparatus program (eg, computer program and computer program product) for performing a part or all of the methods described herein.
  • Such a program realizing the present disclosure may be stored on a computer-readable medium, or may have the form of one or more signals.
  • Such a signal may be downloaded from an Internet site, or provided on a carrier signal, or provided in any other form.

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

一种页面布局的自适应调整方法及计算设备。该方法包括：获取依据预设尺寸进行页面布局的布局参考数据（101）；根据预设尺寸和当前设备屏幕尺寸，计算缩放因子（102）；将布局参考数据和缩放因子输入到计算组件中，得到由计算组件计算并输出的布局调整数据（103）；根据布局调整数据进行页面布局处理（104）。

Description

页面布局的自适应调整方法及计算设备
相关申请的交叉参考
本申请要求于2021年9月6日提交中国专利局、申请号为202111039837.3、名称为“页面布局的自适应调整方法及计算设备”的中国专利申请的优先权，其全部内容通过引用结合在本申请中。
技术领域
本公开涉及移动应用技术领域，具体涉及一种页面布局的自适应调整方法及计算设备。
背景技术
页面布局是指对页面的文字、图形或表格进行排布和设计，是设计应用程序界面最主要的任务之一，应用程序的好与不好，很大部分取决于页面布局的合理性。同时，市面上终端设备的型号不一，对应的设备屏幕的显示尺寸有大有小，如何进行页面布局设计以适配不同设备屏幕尺寸是一个需要解决的问题。
现有技术中，一种解决方法是由设计人员根据不同设备屏幕的尺寸的不同，分别需要设计与之匹配的布局配置数据，输出对应的一套设计稿，以达到设备显示的最优化。但带来的弊端就是随着设备屏幕尺寸的差异性越来越大，异性屏越来越多，设计师的工作量数倍增加，技术人员配置的内容成倍增加，调整UI效果的工作量也是很大。
另一种解决方法是，仅设计一套设计稿，该套设计稿应用于不同的设备屏幕时，达到的显示效果是不同的设备显示的文字数量可能会有差异，或者换行位置不一致。以书城页面为例，当将书城页面的设计稿应用于手机时，受限于手机屏幕尺寸，显示的各本书籍的书籍介绍的文字数量较少；当将同样的书城页面的设计稿应用于平板电脑时，由于平板电脑屏幕尺寸较大，显示的各本书籍的书籍介绍的文字数量较多。这种差异性造成了使用不同设备时界面带来的观感的不一致性，无法保证设计稿中页面布局设计思路得以完整呈现，影响了用户的体验。
公开内容
鉴于上述问题，提出了本公开以便提供一种克服上述问题或者至少部分地解决上述问题的页面布局的自适应调整方法及计算设备。
根据本公开的一个方面，提供了一种页面布局的自适应调整方法，用于针对不同设备屏幕尺寸调整页面布局，方法包括：
获取依据预设尺寸进行页面布局的布局参考数据；
根据预设尺寸和当前设备屏幕尺寸，计算缩放因子；
将布局参考数据和缩放因子输入到计算组件中，得到由计算组件计算并输出的布局调整数据；
根据布局调整数据进行页面布局处理。
根据本公开的另一方面，提供了一种计算设备，包括：处理器、存储器、通信接口和通信总线，处理器、存储器和通信接口通过通信总线完成相互间的通信；
存储器用于存放至少一可执行指令，可执行指令使处理器针对不同设备屏幕尺寸调整页面布局，具体执行以下操作：
获取依据预设尺寸进行页面布局的布局参考数据；
根据预设尺寸和当前设备屏幕尺寸，计算缩放因子；
将布局参考数据和缩放因子输入到计算组件中，得到由计算组件计算并输出的布局调整数据；
根据布局调整数据进行页面布局处理。
根据本公开的又一方面，提供了一种非易失性计算机可读存储介质，非易失性计算机可读存储介质中存储有至少一可执行指令，可执行指令使处理器执行如上述页面布局的自适应调整对应的操作。
根据本公开的再又一方面，还提供了一种计算机程序产品，该计算机程序产品包括存储在上述非易失性计算机可读存储介质上的计算程序。根据本公开提供的方案，无需设计人员根据不同设备屏幕的尺寸的不同分别设计与之匹配的设计稿，仅需设计人员设计一套通用设计稿即可，根据该通用设计稿提供的布局配置数据作为布局参考数据，对布局参考数据进行适配调整处理，得到更适配当前设备屏幕尺寸的布局调整数据，减少了人效成本；而且，由于上述适配调整基于缩放因子进行等比例调整，所以不同设备上显示的内 容保持一致，保证了使用不同设备时界面观感一致性，能够完整还原页面布局设计思路，改善了显示效果。
上述说明仅是本公开技术方案的概述，为了能够更清楚了解本公开的技术手段，而可依照说明书的内容予以实施，并且为了让本公开的上述和其它目的、特征和优点能够更明显易懂，以下特举本公开的具体实施方式。
附图概述
通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本公开的限制。而且在整个附图中，用相同的参考符号表示相同的部件。在附图中：
图1示出了根据本公开一个实施例的页面布局的自适应调整方法的流程示意图；
图2示出了根据本公开另一个实施例的方法的流程示意图；
图3示出了本公开实施例中手机中呈现应用页面的示意图；
图4示出了本公开实施例中平板电脑中呈现应用页面的示意图；
图5示出了本公开实施例中手机中呈现书籍列表页面的示意图；
图6示出了本公开实施例中平板电脑中呈现书籍列表页面的示意图；
图7示出了根据本公开一个实施例的计算设备的结构示意图。
本公开的较佳实施方式
下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。
图1示出了根据本公开一个实施例的页面布局的自适应调整方法的流程示意图。本方法用于针对不同设备屏幕尺寸调整页面布局，所调整的页面具体为应用程序界面，可应用于手机、平板电脑等终端设备。如图1所示，该方法包括以下步骤：
步骤101，获取依据预设尺寸进行页面布局的布局参考数据。
本实施例所采取的方法无需设计人员根据不同设备屏幕的尺寸的不同，分别设计与之匹配的设计稿，仅需设计人员设计一套通用设计稿即可。较为优选地，该通用设计稿具体为一份版面尺寸为预设尺寸、具有高保真效果的页面布局设计稿，例如设计一份预设尺寸为1920*1080的设计稿。从该设计稿中获取布局配置数据作为布局参考数据。具体地，从设计稿中可获取页面中各个UI元素的布局参考数据，布局参考数据可以为：文字坐标、字体大小、图片坐标、图片尺寸等有关UI元素布局位置和大小的数据。
步骤102，根据预设尺寸和当前设备屏幕尺寸，计算缩放因子。
在应用启动后，获取启动应用的当前终端设备的屏幕尺寸。具体地，可获取当前终端设备的设备硬件信息，如：设备型号，根据设备硬件信息查询得到当前设备屏幕尺寸。根据上述设计稿对应的预设尺寸和当前设备屏幕尺寸，计算缩放因子。可选地，缩放因子D可依据预设尺寸的宽度W1和当前设备屏幕尺寸的宽度W2来计算，参见如下公式：
D＝W2/W1
步骤103，将布局参考数据和缩放因子输入到计算组件中，得到由计算组件计算并输出的布局调整数据。
本方法通过预先创建的计算组件来实现计算处理。该计算组件内提供一套数学方法，利用缩放因子对所有的输入数据做乘法，得到适配当前设备屏幕尺寸的最佳布局配置数据，作为布局调整数据。本方法中，计算组件所实现的计算处理是基于缩放因子进行等比例计算，因此输出的布局调整数据相对于布局参考数据来说，达到等比例调整的技术效果。
步骤104，根据布局调整数据进行页面布局处理。
作为一种实施方式，本方法的执行主体为服务端，具体地，在应用客户端启动后，服务端获取启动应用的当前设备的屏幕尺寸，根据上述方法得到布局调整数据，根据布局调整数据对页面进行布局处理后，反馈给应用客户端进行绘制呈现。
作为另一种实施方式，本方法的执行主体为客户端，具体地，在应用客户端启动后，客户端接收服务端反馈的未经调整的页面，在客户端本地根据上述方法得到布局调整数据，根据布局调整数据对页面进行布局处理后，然后进行绘制呈现。
本公开上述实施例提供的方案，无需设计人员根据不同设备屏幕的尺寸 的不同分别设计与之匹配的设计稿，仅需设计人员设计一套通用设计稿即可，根据该通用设计稿提供的布局配置数据作为布局参考数据，对布局参考数据进行适配调整处理，得到更适配当前设备屏幕尺寸的布局调整数据，减少了人效成本；同时，由于上述适配调整基于缩放因子进行等比例调整，所以不同设备上显示的内容保持一致，保证了使用不同设备时界面观感一致性，能够完整还原页面布局设计思路，改善了显示效果。
图2示出了根据本公开另一个实施例的方法的流程示意图。如图2所示，该方法包括以下步骤：
步骤201，获取依据预设尺寸进行页面布局的布局参考数据。
本实施例仅需设计人员设计一套通用设计稿，该设计稿具体为一份版面尺寸为预设尺寸、具有高保真效果的页面布局设计稿，例如设计一份预设尺寸为1920*1080的设计稿。从该设计稿中获取布局配置数据作为布局参考数据。具体地，从设计稿中可获取页面中各个UI元素的布局参考数据，布局参考数据可以为：文字坐标、字体大小、图片坐标、图片尺寸等有关UI元素布局位置和尺寸的数据。
步骤202，获取当前设备的设备型号信息，根据设备型号信息，确定当前设备屏幕的一屏所能展示的页面份数。
在应用启动后，获取当前设备的设备型号信息。具体地，可获取当前终端设备的设备硬件信息，如：设备型号，根据设备型号信息确定当前设备屏幕的一屏所能展示的页面份数。
以手机和平板电脑为例，由于平板电脑的屏幕尺寸较大，手机屏幕尺寸较小，如果当前设备为平板电脑，则确定当前设备屏幕的一屏所能展示的页面份数为2份，即一屏展示左右两份页面；如果当前设备为手机，则确定当前设备屏幕的一屏所能展示的页面份数为1份，即一屏展示1份页面。
图3示出了本公开实施例中手机中呈现应用页面的示意图，图4示出了本公开实施例中平板电脑中呈现应用页面的示意图。图3中当前设备屏幕的一屏所展示的页面为1份，图4中当前设备屏幕的一屏所能展示的页面为2份，分别为左右两份。
应当理解的是，关于一屏展示单份页面或多份页面不仅限于根据手机和平板电脑进行区分，对于某些屏幕尺寸够大的手机，也可以支持一屏展示多份页面。进一步地，页面份数可依据当前设备屏幕尺寸而确定。
步骤203，根据预设尺寸、当前设备屏幕尺寸以及页面份数，计算缩放因子。
根据上述设计稿对应的预设尺寸、当前设备屏幕尺寸以及页面份数，计算缩放因子。可选地，缩放因子D可依据预设尺寸的宽度W1、当前设备屏幕尺寸的宽度W2以及页面份数N来计算，参见如下公式：
D＝W2/(N*W1)
步骤204，将布局参考数据和缩放因子输入到计算组件中，得到由计算组件计算并输出的布局调整数据。
本方法通过预先创建的计算组件来实现计算处理。该计算组件内提供一套数学方法，利用缩放因子对所有的输入数据做乘法，得到适配当前设备屏幕尺寸的最佳布局配置数据，作为布局调整数据。本方法中，计算组件所实现的计算处理是基于缩放因子进行等比例计算，因此输出的布局调整数据相对于布局参考数据来说，达到等比例调整的技术效果。
作为可选的一种实施方式，本实施例可以以UI元素为单位执行计算处理。具体地，页面包含至少一个第一UI元素，每个第一UI元素具有对应的布局参考数据；将各个第一UI元素的布局参考数据和缩放因子输入到计算组件中，得到由计算组件计算并输出的各个第一UI元素的布局调整数据。在该实施方式中，将每个UI元素的布局参考数据作为输入数据，利用缩放因子对输入数据做乘法，得到每个UI元素的布局调整数据。其中布局参考数据和布局调整数据至少包含：UI元素的坐标数据和尺寸数据，通过将UI元素的坐标数据和尺寸数据输入到计算组件中，计算得到等比例调整后的UI元素的坐标数据和尺寸数据。
如图3所示，该页面具体为书城页面，书城页面的设计思路是以列表形式展示书籍信息，其中的UI元素包括：书封31、书籍名称32、书籍介绍33，书封31为图片，书籍名称32和书籍介绍33为文字。利用上述实施方式，可以分别将设计稿中预设的书封31的图片坐标和图片尺寸以及缩放因子输入到计算组件中，得到调整后的图片坐标和图片尺寸，作为书封31的布局调整数据；将设计稿中预设的书籍名称32的文字坐标和字体大小以及缩放因子输入到计算组件中，得到调整后的文字坐标和字体大小，作为书籍名称32的布局调整数据；将设计稿中预设的书籍介绍33的文字坐标和字体大小以及缩放因子输入到计算组件中，得到调整后的文字坐标和字体大小，作为书籍介绍33的布局调整数据，从而得到适配手机屏幕尺寸的各个UI元素的 布局调整数据。
同理，针对图4，依照上述方式得到适配平板电脑屏幕尺寸的各个UI元素的布局调整数据。
作为可选的另一种实施方式，本实施例还可以以区块为单位执行计算处理。具体地，页面包含位于各个区块内的至少一个第二UI元素，每个第二UI元素具有对应的布局相对参考数据，每个区块具有对应的布局参考数据；以区块为单位，将属于同一区块的各个第二UI元素的布局相对参考数据和缩放因子输入到计算组件中，得到由计算组件计算并输出的属于同一区块的各个第二UI元素的布局相对调整数据；将各个区块的布局参考数据和缩放因子输入到计算组件中，得到由计算组件计算并输出的各个区块的布局调整数据。
其中，布局相对数据(包括：布局相对参考数据和布局相对调整数据)是位于区块内的UI元素相对于区块的布局数据，以图3为例，书封31、书籍名称32、书籍介绍33属于同一区块30，书封31、书籍名称32、书籍介绍33的布局相对数据是相对于区块的布局数据。例如，书封31的图片坐标为图片相对坐标，是相对于区块坐标而言。
利用以区块为单位的上述处理方式，可以分别将设计稿中预设的区块30内的书封31、书籍名称32、书籍介绍33的相对坐标和尺寸(对于图片，尺寸为图片尺寸；对于文字，尺寸为字体大小)以及缩放因子输入到计算组件中，得到调整后的相对坐标和尺寸，作为各个UI元素的布局相对调整数据；将设计稿中预设的区块30的区块坐标和区块尺寸以及缩放因子输入到计算组件中，得到调整后的区块坐标和区块尺寸，作为区块的布局调整数据。
若页面中包含多个区块，可以按照相同的处理方式进行计算处理。
进一步地，若页面中存在至少两个区块，该至少两个区块内的至少一个第二UI元素的布局相对参考数据相同，表明至少两个区块的设计样式一致。以图3为例，书城页面中每个区块对应一本书籍，呈现为列表形式的页面，各个区块内的设计样式一致。针对这种情况，本方法还包括：在得到由计算组件计算并输出的至少两个区块中任一区块的各个第二UI元素的布局相对调整数据之后，对于至少两个区块中的其它区块，复用该区块的各个第二UI元素的布局相对调整数据。也即，在得到区块30内各个UI元素的布局相对调整数据之后，无需再计算其它区块内的UI元素的布局相对调整数据，直接复用区块30内各个UI元素的布局相对调整数据即可。通过这种处理方 式，可以大大减少计算组件的计算量，提升计算效率。
步骤205，根据布局调整数据进行页面布局处理。
根据各个第一UI元素的布局调整数据进行页面布局处理。对于存在区块的页面，则根据各个区块的布局调整数据以及属于同一区块的各个第二UI元素的布局相对调整数据进行页面布局处理。
进一步地，针对当前设备屏幕一屏展示多份页面的情况，在进行页面布局处理时，需要对除了第一份页面以外的其它页面的UI元素进行平移处理。以图4为例，左边份页面为第一份页面，直接根据布局调整数据进行页面布局处理即可；右边份页面布局时需要进行平移处理，使其平移至屏幕右半部。
图5示出了本公开实施例中手机中呈现书籍列表页面的示意图，图6示出了本公开实施例中平板电脑中呈现书籍列表页面的示意图。图5中当前设备屏幕的一屏所展示的书籍列表为1列，图6中当前设备屏幕的一屏所能展示的书籍列表为2列，分别为左右两列。
如图5和图6所示，这两个书籍列表页面中相同的书籍有：中药学(本科)、中草药的美丽传说、脊柱运动与运动力学100个…、按摩推拿学(十三五)、中医基础理论，通过对比发现，在不同设备中相同书籍对应的区块内显示的内容保持一致，例如，中药学(本科)这本书籍的书籍介绍UI元素显示的文字均是“中药学是研究中药的基本理论和常用中药的性能、功效、临床应用规律等知识的一门…”，且换行位置也相同，也即，即使设备屏幕尺寸有大有小，但相同书籍区块内所露出的文字内容数量、图片等相一致，等保证了使用不同设备时界面观感一致性。
可选地，本公开实施例提供的方法还可适用于手机或平板电脑横屏时页面布局的自适应调整。为了能够完整还原页面布局设计思路，当监测到当前设备处于横屏状态时，根据上述流程确定的布局调整数据进行页面布局，使得页面(一份或多份)呈现在横屏的居中位置，两侧进行留白处理，以保证设备横竖屏界面观感的一致性，完整还原页面布局设计思路。
进一步地，在步骤205之前，本实施例提供的方法还包括：针对任一第一UI元素，判断该第一UI元素是否为非矢量元素；若是，则对该第一UI元素的布局调整数据进行取整处理，而后利用取整处理后的布局调整数据进行页面布局处理。若否，则直接使用计算组件输出的布局调整数据进行页面布局处理。或者，针对任一第二UI元素，判断该第二UI元素是否为非矢量 元素；若是，则对该第二UI元素的布局相对调整数据进行取整处理，并对该第二UI元素所属的区块的布局调整数据进行取整处理，而后利用取整处理后的布局调整数据进行页面布局处理。若否，则直接使用计算组件输出的布局调整数据进行页面布局处理。
在计算机图形学中，矢量元素是用点、直线或多边形等基于数学方程的几何图元表示，保存的是线条和图块的信息；矢量元素和非矢量元素的区别在于，矢量元素与分辨率和大小无关，无论放大、缩小或旋转都不会失真；而非矢量元素会出现失真。在上述方法中，计算组件计算并输出的布局调整数据有可能为小数，如果UI元素是非矢量元素，则依据小数进行布局处理会造成UI元素出现失真，导致UI元素呈现不清晰，为了解决该问题，本实施例在得到各个UI元素的布局调整数据之后，判断UI元素是否为非矢量元素，若是，则对该UI元素的布局调整数据进行取整处理。其中取整处理可以为对小数部分做四舍五入处理或者舍尾处理，保证非矢量UI元素的布局调整数据为整数。另外，若区块内的UI元素为非矢量元素，则还需对区块的布局调整数据进行取整处理。
本公开上述实施例提供的方案，无需设计人员根据不同设备屏幕的尺寸的不同分别设计与之匹配的设计稿，仅需设计人员设计一套通用设计稿即可，根据该通用设计稿提供的布局配置数据作为布局参考数据，对布局参考数据进行适配调整处理，得到更适配当前设备屏幕尺寸的布局调整数据，减少了人效成本；同时，由于上述适配调整基于缩放因子进行等比例调整，所以不同设备上显示的内容保持一致，保证了使用不同设备时界面观感一致性，能够完整还原页面布局设计思路，改善了显示效果。进一步地，若当前设备的屏幕尺寸足够大，本实施例还支持一屏展示N份页面，即默认展示N份设计稿内容，在计算缩放因子时，利用屏幕宽度的1/N比上设计稿的预设宽度得到缩放因子，在还原页面布局设计思路的基础上，尽可能一屏展示更多的内容。再进一步地，在以区块为单位的计算处理过程中，通过复用具有相同设计样式的区块内UI元素的布局调整数据，可以大大减少计算组件的计算量，提升了计算效率。对于页面中存在非矢量元素的情况，能够保证非矢量元素的清晰呈现。
本公开实施例还提供了一种非易失性计算机可读存储介质，非易失性计算机可读存储介质存储有至少一可执行指令，该计算机可执行指令可执行上述任意方法实施例中的页面布局的自适应调整方法，用于针对不同设备屏幕 尺寸调整页面布局。
可执行指令具体可以用于使得处理器执行以下操作：
获取依据预设尺寸进行页面布局的布局参考数据；
根据预设尺寸和当前设备屏幕尺寸，计算缩放因子；
将布局参考数据和缩放因子输入到计算组件中，得到由计算组件计算并输出的布局调整数据；
根据布局调整数据进行页面布局处理。
在一种可选的实施方式中，可执行指令进一步使处理器执行以下操作：
获取当前设备的设备型号信息；
根据设备型号信息，确定当前设备屏幕的一屏所能展示的页面份数；
根据预设尺寸、当前设备屏幕尺寸以及页面份数，计算缩放因子。
在一种可选的实施方式中，页面包含至少一个第一UI元素，每个第一UI元素具有对应的布局参考数据；可执行指令进一步使处理器执行以下操作：
将各个第一UI元素的布局参考数据和缩放因子输入到计算组件中，得到由计算组件计算并输出的各个第一UI元素的布局调整数据。
在一种可选的实施方式中，页面包含位于各个区块内的至少一个第二UI元素，每个第二UI元素具有对应的布局相对参考数据，每个区块具有对应的布局参考数据；可执行指令进一步使处理器执行以下操作：
以区块为单位，将属于同一区块的各个第二UI元素的布局相对参考数据和缩放因子输入到计算组件中，得到由计算组件计算并输出的属于同一区块的各个第二UI元素的布局相对调整数据；
将各个区块的布局参考数据和缩放因子输入到计算组件中，得到由计算组件计算并输出的各个区块的布局调整数据；
根据各个区块的布局调整数据以及属于同一区块的各个第二UI元素的布局相对调整数据进行页面布局处理。
在一种可选的实施方式中，页面中存在至少两个区块，该至少两个区块内的至少一个第二UI元素的布局相对参考数据相同；可执行指令进一步使处理器执行以下操作：
在得到由计算组件计算并输出的至少两个区块中任一区块的各个第二UI元素的布局相对调整数据之后，对于至少两个区块中的其它区块，复用该区块的各个第二UI元素的布局相对调整数据。
在一种可选的实施方式中，可执行指令进一步使处理器执行以下操作：
针对任一第一UI元素，判断该第一UI元素是否为非矢量元素；
若是，则对该第一UI元素的布局调整数据进行取整处理。
在一种可选的实施方式中，可执行指令进一步使处理器执行以下操作：
针对任一第二UI元素，判断该第二UI元素是否为非矢量元素；
若是，则对该第二UI元素的布局相对调整数据进行取整处理，并对该第二UI元素所属的区块的布局调整数据进行取整处理。
图7示出了根据本公开一个实施例的计算设备的结构示意图，本公开具体实施例并不对计算设备的具体实现做限定。
如图7所示，该计算设备可以包括：处理器(processor)502、通信接口(Communications Interface)504、存储器(memory)506、以及通信总线508。
其中：处理器502、通信接口504、以及存储器506通过通信总线508完成相互间的通信。
通信接口504，用于与其它设备比如客户端或其它服务器等的网元通信。
处理器502，用于执行程序510，具体可以执行上述页面布局的自适应调整方法实施例中的相关步骤。
具体地，程序510可以包括程序代码，该程序代码包括计算机操作指令。
处理器502可能是中央处理器CPU，或者是特定集成电路ASIC(Application Specific Integrated Circuit)，或者是被配置成实施本公开实施例的一个或多个集成电路。计算设备包括的一个或多个处理器，可以是同一类型的处理器，如一个或多个CPU；也可以是不同类型的处理器，如一个或多个CPU以及一个或多个ASIC。
存储器506，用于存放程序510。存储器506可能包含高速RAM存储器，也可能还包括非易失性存储器(non-volatile memory)，例如至少一个磁盘存储器。
程序具体可以用于使得处理器执行以下操作：
获取依据预设尺寸进行页面布局的布局参考数据；
根据预设尺寸和当前设备屏幕尺寸，计算缩放因子；
将布局参考数据和缩放因子输入到计算组件中，得到由计算组件计算并输出的布局调整数据；
根据布局调整数据进行页面布局处理。
在一种可选的实施方式中，程序进一步使处理器执行以下操作：
获取当前设备的设备型号信息；
根据设备型号信息，确定当前设备屏幕的一屏所能展示的页面份数；
根据预设尺寸、当前设备屏幕尺寸以及页面份数，计算缩放因子。
在一种可选的实施方式中，页面包含至少一个第一UI元素，每个第一UI元素具有对应的布局参考数据；程序进一步使处理器执行以下操作：
将各个第一UI元素的布局参考数据和缩放因子输入到计算组件中，得到由计算组件计算并输出的各个第一UI元素的布局调整数据。
在一种可选的实施方式中，页面包含位于各个区块内的至少一个第二UI元素，每个第二UI元素具有对应的布局相对参考数据，每个区块具有对应的布局参考数据；程序进一步使处理器执行以下操作：
以区块为单位，将属于同一区块的各个第二UI元素的布局相对参考数据和缩放因子输入到计算组件中，得到由计算组件计算并输出的属于同一区块的各个第二UI元素的布局相对调整数据；
将各个区块的布局参考数据和缩放因子输入到计算组件中，得到由计算组件计算并输出的各个区块的布局调整数据；
根据各个区块的布局调整数据以及属于同一区块的各个第二UI元素的布局相对调整数据进行页面布局处理。
在一种可选的实施方式中，页面中存在至少两个区块，该至少两个区块内的至少一个第二UI元素的布局相对参考数据相同；程序进一步使处理器执行以下操作：
在得到由计算组件计算并输出的至少两个区块中任一区块的各个第二UI元素的布局相对调整数据之后，对于至少两个区块中的其它区块，复用该区块的各个第二UI元素的布局相对调整数据。
在一种可选的实施方式中，程序进一步使处理器执行以下操作：
针对任一第一UI元素，判断该第一UI元素是否为非矢量元素；
若是，则对该第一UI元素的布局调整数据进行取整处理。
在一种可选的实施方式中，程序进一步使处理器执行以下操作：
针对任一第二UI元素，判断该第二UI元素是否为非矢量元素；
若是，则对该第二UI元素的布局相对调整数据进行取整处理，并对该第二UI元素所属的区块的布局调整数据进行取整处理。
在此提供的算法或显示不与任何特定计算机、虚拟系统或者其它设备固有相关。各种通用系统也可以与基于在此的示教一起使用。根据上面的描述，构造这类系统所要求的结构是显而易见的。此外，本公开实施例也不针对任何特定编程语言。应当明白，可以利用各种编程语言实现在此描述的本公开的内容，并且上面对特定语言所做的描述是为了披露本公开的最佳实施方式。
在此处所提供的说明书中，说明了大量具体细节。然而，能够理解，本公开的实施例可以在没有这些具体细节的情况下实践。在一些实例中，并未详细示出公知的方法、结构和技术，以便不模糊对本说明书的理解。
类似地，应当理解，为了精简本公开并帮助理解各个公开方面中的一个或多个，在上面对本公开的示例性实施例的描述中，本公开实施例的各个特征有时被一起分组到单个实施例、图、或者对其的描述中。然而，并不应将该公开的方法解释成反映如下意图：即所要求保护的本公开要求比在每个权利要求中所明确记载的特征更多的特征。更确切地说，如下面的权利要求书所反映的那样，公开方面在于少于前面公开的单个实施例的所有特征。因此，遵循具体实施方式的权利要求书由此明确地并入该具体实施方式，其中每个权利要求本身都作为本公开的单独实施例。
本领域那些技术人员可以理解，可以对实施例中的设备中的模块进行自适应性地改变并且把它们设置在与该实施例不同的一个或多个设备中。可以把实施例中的模块或单元或组件组合成一个模块或单元或组件，以及此外可以把它们分成多个子模块或子单元或子组件。除了这样的特征和/或过程或者单元中的至少一些是相互排斥之外，可以采用任何组合对本说明书(包括伴随的权利要求、摘要和附图)中公开的所有特征以及如此公开的任何方法或者设备的所有过程或单元进行组合。除非另外明确陈述，本说明书(包括伴随的权利要求、摘要和附图)中公开的每个特征可以由提供相同、等同或相似目的的替代特征来代替。
此外，本领域的技术人员能够理解，尽管在此的一些实施例包括其它实施例中所包括的某些特征而不是其它特征，但是不同实施例的特征的组合意味着处于本公开的范围之内并且形成不同的实施例。例如，在下面的权利要求书中，所要求保护的实施例的任意之一都可以以任意的组合方式来使用。
本公开的各个部件实施例可以以硬件实现，或者以在一个或者多个处理器上运行的软件模块实现，或者以它们的组合实现。本领域的技术人员应当理解，可以在实践中使用微处理器或者数字信号处理器(DSP)来实现根据本公开实施例的一些或者全部部件的一些或者全部功能。本公开还可以实现为用于执行这里所描述的方法的一部分或者全部的设备或者装置程序(例如，计算机程序和计算机程序产品)。这样的实现本公开的程序可以存储在计算机可读介质上，或者可以具有一个或者多个信号的形式。这样的信号可以从因特网网站上下载得到，或者在载体信号上提供，或者以任何其他形式提供。
应该注意的是上述实施例对本公开进行说明而不是对本公开进行限制，并且本领域技术人员在不脱离所附权利要求的范围的情况下可设计出替换实施例。在权利要求中，不应将位于括号之间的任何参考符号构造成对权利要求的限制。单词“包含”不排除存在未列在权利要求中的元件或步骤。位于元件之前的单词“一”或“一个”不排除存在多个这样的元件。本公开可以借助于包括有若干不同元件的硬件以及借助于适当编程的计算机来实现。在列举了若干装置的单元权利要求中，这些装置中的若干个可以是通过同一个硬件项来具体体现。单词第一、第二、以及第三等的使用不表示任何顺序。可将这些单词解释为名称。上述实施例中的步骤，除有特殊说明外，不应理解为对执行顺序的限定。

Claims (16)

  1. 一种页面布局的自适应调整方法，用于针对不同设备屏幕尺寸调整页面布局，所述方法包括：
    获取依据预设尺寸进行页面布局的布局参考数据；
    根据所述预设尺寸和当前设备屏幕尺寸，计算缩放因子；
    将布局参考数据和所述缩放因子输入到计算组件中，得到由所述计算组件计算并输出的布局调整数据；
    根据所述布局调整数据进行页面布局处理。
  2. 根据权利要求1所述的方法，在所述根据所述预设尺寸和当前设备屏幕尺寸，计算缩放因子之前，所述方法还包括：
    获取当前设备的设备型号信息；
    根据所述设备型号信息，确定当前设备屏幕的一屏所能展示的页面份数；
    所述根据所述预设尺寸和当前设备屏幕尺寸，计算缩放因子进一步包括：根据所述预设尺寸、当前设备屏幕尺寸以及所述页面份数，计算缩放因子。
  3. 根据权利要求1或2所述的方法，所述页面包含至少一个第一UI元素，每个第一UI元素具有对应的布局参考数据；
    所述将布局参考数据和所述缩放因子输入到计算组件中，得到由所述计算组件计算并输出的布局调整数据进一步包括：
    将各个第一UI元素的布局参考数据和所述缩放因子输入到计算组件中，得到由所述计算组件计算并输出的各个第一UI元素的布局调整数据。
  4. 根据权利要求1或2或3所述的方法，所述页面包含位于各个区块内的至少一个第二UI元素，每个第二UI元素具有对应的布局相对参考数据，每个区块具有对应的布局参考数据；
    所述将布局参考数据和所述缩放因子输入到计算组件中，得到由所述计算组件计算并输出的布局调整数据进一步包括：
    以区块为单位，将属于同一区块的各个第二UI元素的布局相对参考数据和所述缩放因子输入到计算组件中，得到由所述计算组件计算并输出的属于同一区块的各个第二UI元素的布局相对调整数据；
    将各个区块的布局参考数据和所述缩放因子输入到计算组件中，得到由所述计算组件计算并输出的各个区块的布局调整数据；
    所述根据所述布局调整数据进行页面布局处理进一步包括：
    根据各个区块的布局调整数据以及属于同一区块的各个第二UI元素的布局相对调整数据进行页面布局处理。
  5. 根据权利要求4所述的方法，所述页面中存在至少两个区块，该至少两个区块内的至少一个第二UI元素的布局相对参考数据相同；
    所述方法还包括：在得到由所述计算组件计算并输出的所述至少两个区块中任一区块的各个第二UI元素的布局相对调整数据之后，对于所述至少两个区块中的其它区块，复用该区块的各个第二UI元素的布局相对调整数据。
  6. 根据权利要求3所述的方法，在所述根据所述布局调整数据进行页面布局处理之前，所述方法还包括：
    针对任一第一UI元素，判断该第一UI元素是否为非矢量元素；
    若是，则对该第一UI元素的布局调整数据进行取整处理。
  7. 根据权利要求4所述的方法，在所述根据所述布局调整数据进行页面布局处理之前，所述方法还包括：
    针对任一第二UI元素，判断该第二UI元素是否为非矢量元素；
    若是，则对该第二UI元素的布局相对调整数据进行取整处理，并对该第二UI元素所属的区块的布局调整数据进行取整处理。
  8. 一种计算设备，包括：处理器、存储器、通信接口和通信总线，所述处理器、所述存储器和所述通信接口通过所述通信总线完成相互间的通信；
    所述存储器用于存放至少一可执行指令，所述可执行指令使所述处理器针对不同设备屏幕尺寸调整页面布局，具体执行以下操作：
    获取依据预设尺寸进行页面布局的布局参考数据；
    根据所述预设尺寸和当前设备屏幕尺寸，计算缩放因子；
    将布局参考数据和所述缩放因子输入到计算组件中，得到由所述计算组件计算并输出的布局调整数据；
    根据所述布局调整数据进行页面布局处理。
  9. 根据权利要求8所述的计算设备，所述可执行指令进一步使所述处理器执行以下操作：
    获取当前设备的设备型号信息；
    根据所述设备型号信息，确定当前设备屏幕的一屏所能展示的页面份数；
    根据所述预设尺寸、当前设备屏幕尺寸以及所述页面份数，计算缩放因子。
  10. 根据权利要求8或9所述的计算设备，所述页面包含至少一个第一UI元素，每个第一UI元素具有对应的布局参考数据；所述可执行指令进一步使所述处理器执行以下操作：
    将各个第一UI元素的布局参考数据和所述缩放因子输入到计算组件中，得到由所述计算组件计算并输出的各个第一UI元素的布局调整数据。
  11. 根据权利要求8或9或10所述的计算设备，所述页面包含位于各个区块内的至少一个第二UI元素，每个第二UI元素具有对应的布局相对参考数据，每个区块具有对应的布局参考数据；所述可执行指令进一步使所述处理器执行以下操作：
    以区块为单位，将属于同一区块的各个第二UI元素的布局相对参考数据和所述缩放因子输入到计算组件中，得到由所述计算组件计算并输出的属于同一区块的各个第二UI元素的布局相对调整数据；
    将各个区块的布局参考数据和所述缩放因子输入到计算组件中，得到由所述计算组件计算并输出的各个区块的布局调整数据；
    根据各个区块的布局调整数据以及属于同一区块的各个第二UI元素的 布局相对调整数据进行页面布局处理。
  12. 根据权利要求11所述的计算设备，所述页面中存在至少两个区块，该至少两个区块内的至少一个第二UI元素的布局相对参考数据相同；所述可执行指令进一步使所述处理器执行以下操作：
    在得到由所述计算组件计算并输出的所述至少两个区块中任一区块的各个第二UI元素的布局相对调整数据之后，对于所述至少两个区块中的其它区块，复用该区块的各个第二UI元素的布局相对调整数据。
  13. 根据权利要求10所述的计算设备，所述可执行指令进一步使所述处理器执行以下操作：
    针对任一第一UI元素，判断该第一UI元素是否为非矢量元素；
    若是，则对该第一UI元素的布局调整数据进行取整处理。
  14. 根据权利要求11所述的计算设备，所述可执行指令进一步使所述处理器执行以下操作：
    针对任一第二UI元素，判断该第二UI元素是否为非矢量元素；
    若是，则对该第二UI元素的布局相对调整数据进行取整处理，并对该第二UI元素所属的区块的布局调整数据进行取整处理。
  15. 一种非易失性计算机可读存储介质，所述非易失性计算机可读存储介质中存储有至少一可执行指令，所述可执行指令使处理器执行如权利要求1-7中任一项所述的页面布局的自适应调整方法对应的操作。
  16. 一种计算机程序产品，该计算机程序产品包括存储在非易失性计算机可读存储介质上的计算程序，该计算机程序包括程序指令，当该程序指令被处理器执行时，使该处理器执行如权利要求1-7中任一项所述的页面布局的自适应调整方法对应的操作。
PCT/CN2021/125781 2021-09-06 2021-10-22 页面布局的自适应调整方法及计算设备 WO2023029171A1 (zh)

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN202111039837.3A CN113849254A (zh) 2021-09-06 2021-09-06 页面布局的自适应调整方法及计算设备
CN202111039837.3 2021-09-06

Publications (1)

Publication Number Publication Date
WO2023029171A1 true WO2023029171A1 (zh) 2023-03-09

Family

ID=78973431

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2021/125781 WO2023029171A1 (zh) 2021-09-06 2021-10-22 页面布局的自适应调整方法及计算设备

Country Status (2)

Country Link
CN (1) CN113849254A (zh)
WO (1) WO2023029171A1 (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN117111813A (zh) * 2023-10-19 2023-11-24 深圳市慧为智能科技股份有限公司 一种显示适配方法、装置及电子设备、存储介质

Families Citing this family (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN116680023A (zh) * 2022-03-25 2023-09-01 华为技术有限公司 一种界面的自适应显示方法及终端设备
CN116974658A (zh) * 2022-04-21 2023-10-31 华为技术有限公司 界面布局方法和装置
CN114816178A (zh) * 2022-04-29 2022-07-29 咪咕数字传媒有限公司 一种电子书籍的选择方法及电子设备

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20070266335A1 (en) * 2006-05-12 2007-11-15 Microsoft Corporation Providing a standard user interface (UI) across disparate display interfaces
CN104317968A (zh) * 2014-11-18 2015-01-28 苏州科达科技股份有限公司 一种页面自适应调整方法及系统
CN105912318A (zh) * 2016-04-01 2016-08-31 北京京东尚科信息技术有限公司 一种终端屏幕自适应显示方法、终端、服务器及系统
CN107346237A (zh) * 2016-05-04 2017-11-14 北京京东尚科信息技术有限公司 一种基于iOS系统的多宫格图片处理方法及装置
CN110597510A (zh) * 2019-08-09 2019-12-20 华为技术有限公司 一种界面的动态布局方法及设备

Family Cites Families (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109003225A (zh) * 2017-05-31 2018-12-14 北京京东尚科信息技术有限公司 一种多宫格图片处理方法和装置以及一种电子设备

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20070266335A1 (en) * 2006-05-12 2007-11-15 Microsoft Corporation Providing a standard user interface (UI) across disparate display interfaces
CN104317968A (zh) * 2014-11-18 2015-01-28 苏州科达科技股份有限公司 一种页面自适应调整方法及系统
CN105912318A (zh) * 2016-04-01 2016-08-31 北京京东尚科信息技术有限公司 一种终端屏幕自适应显示方法、终端、服务器及系统
CN107346237A (zh) * 2016-05-04 2017-11-14 北京京东尚科信息技术有限公司 一种基于iOS系统的多宫格图片处理方法及装置
CN110597510A (zh) * 2019-08-09 2019-12-20 华为技术有限公司 一种界面的动态布局方法及设备

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN117111813A (zh) * 2023-10-19 2023-11-24 深圳市慧为智能科技股份有限公司 一种显示适配方法、装置及电子设备、存储介质
CN117111813B (zh) * 2023-10-19 2024-02-20 深圳市慧为智能科技股份有限公司 一种显示适配方法、装置及电子设备、存储介质

Also Published As

Publication number Publication date
CN113849254A (zh) 2021-12-28

Similar Documents

Publication Publication Date Title
WO2023029171A1 (zh) 页面布局的自适应调整方法及计算设备
US20140258849A1 (en) Automatic Alignment of a Multi-Dimensional Layout
CN111145326A (zh) 三维虚拟云模型的处理方法、存储介质、处理器及电子装置
WO2019154197A1 (zh) 电子书手写笔记的显示方法、计算设备及计算机存储介质
US20130215045A1 (en) Stroke display method of handwriting input and electronic device
CN112288665A (zh) 图像融合的方法、装置、存储介质及电子设备
CN109791431A (zh) 视点渲染
US20230171472A1 (en) Interaction method and apparatus, and electronic device
WO2022193616A1 (zh) 应用页面的展示方法、电子设备及存储介质
US11144717B2 (en) Automatic generation of document layouts
JP2024521202A (ja) ページ処理方法、装置、電子機器および可読記憶媒体
US11036914B2 (en) Automatic layout engine
CN108111747A (zh) 一种图像处理方法、终端设备及计算机可读介质
WO2022016996A1 (zh) 图像处理方法、装置、电子设备及计算机可读存储介质
US9805499B2 (en) 3D-consistent 2D manipulation of images
CN109598672B (zh) 一种地图道路渲染方法及装置
JP2011086050A (ja) 情報処理端末及びコンピュータプログラム
US9460549B2 (en) Method and device for generating perspective image
CN109213981B (zh) 各种电子设备的演示协作
CN111915714A (zh) 用于虚拟场景的渲染方法、客户端、服务器及计算设备
CN110673903B (zh) 一种阅读软件的书架页面的显示方法和装置
WO2023173728A1 (zh) 图形渲染方法、装置及存储介质
CN110825282A (zh) 一种图片展示方法、装置、电子设备及存储介质
WO2022228434A1 (zh) 图像处理方法、装置、电子设备及可读存储介质
CN114913277A (zh) 一种物体立体交互展示方法、装置、设备及介质

Legal Events

Date Code Title Description
121 Ep: the epo has been informed by wipo that ep was designated in this application

Ref document number: 21955700

Country of ref document: EP

Kind code of ref document: A1

NENP Non-entry into the national phase

Ref country code: DE