WO2022036917A1 - 界面调整方法、装置、计算机程序及计算机可读介质 - Google Patents

界面调整方法、装置、计算机程序及计算机可读介质 Download PDF

Info

Publication number
WO2022036917A1
WO2022036917A1 PCT/CN2020/132061 CN2020132061W WO2022036917A1 WO 2022036917 A1 WO2022036917 A1 WO 2022036917A1 CN 2020132061 W CN2020132061 W CN 2020132061W WO 2022036917 A1 WO2022036917 A1 WO 2022036917A1
Authority
WO
WIPO (PCT)
Prior art keywords
interface
screen
target
information
width
Prior art date
Application number
PCT/CN2020/132061
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 WO2022036917A1 publication Critical patent/WO2022036917A1/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
    • 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
    • Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
    • Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
    • Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
    • Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management

Definitions

  • the present invention relates to the field of computer technology, and in particular, to an interface adjustment method, device, computer program, and computer-readable medium.
  • the terminal device whose front camera will occupy the screen and the occupied position information are recorded in the blacklist, and the client running on the terminal device determines whether the terminal device is in the blacklist. If the terminal device belongs to the blacklist, according to the gravity sensing direction of the terminal device, determine which side the area occupied by the front camera is on, and adjust the side to perform unilateral indentation. The indented distance is the position recorded in the blacklist. information.
  • the adjustment of unilateral indentation needs to be adjusted and adapted separately for the terminal device.
  • the adjustment process is cumbersome, and the center of gravity of the displayed interface is shifted in the screen, resulting in an unbalanced image, which affects the aesthetics of the image.
  • the present invention is proposed to provide an interface adjustment method, apparatus, computer program and computer readable medium that overcome the above problems or at least partially solve or alleviate the above problems.
  • an interface adjustment method includes: when a target interface display request for a target device screen is detected, according to the screen aspect ratio value of the target device screen, calculating the drawing width and drawing height; adjust the size of the interface background layer of the target interface to the drawing width and the drawing height, and the interface background layer is a layer filled with the interface background of the target interface; based on the drawing width and The drawing height calculates the position parameter of the interface decoration layer on the target interface, obtains positioning information, and docks the interface decoration layer on the target interface according to the positioning information, and the interface decoration layer includes the A layer of a decorative image of a target interface; according to the drawing width and the drawing height, an interface interaction layer is arranged on the target interface, and the interface interaction layer is a layer provided with an operable area of the target interface; According to the text layout in the target interface, the interface information in the target interface is filled into the interface interaction layer to complete the adjustment of the target interface.
  • an interface adjustment apparatus includes: a first calculation module, configured to, when a target interface display request for a target device screen is detected, according to the screen width of the target device screen The height ratio is used to calculate the drawing width and the drawing height; the adjustment module is used to adjust the size of the interface background layer of the target interface to the drawing width and the drawing height, and the interface background layer is filled with the target interface.
  • the layer of the interface background; the second calculation module is used to calculate the position parameter of the interface decoration layer in the target interface based on the drawing width and the drawing height, obtain positioning information, and calculate the interface decoration layer according to The positioning information is docked on the target interface, and the interface decoration layer is a layer including a decorative image of the target interface; a layout module is used for, according to the drawing width and the drawing height, on the target interface a layout interface interaction layer, the interface interaction layer is a layer provided with an operable area of the target interface; a filling module is used to fill the interface information in the target interface according to the text layout in the target interface To the interface interaction layer, the adjustment of the target interface is completed.
  • a computer program comprising computer-readable code, which, when the computer-readable code is executed on a server, causes the server to execute the above-mentioned interface adjustment method.
  • the drawing width and drawing height are calculated, and then based on the drawing width and drawing height, the size of the interface background layer filled with the interface background of the target interface is adjusted to the drawing width and drawing height.
  • the positioning information of the interface decoration layer of the decoration image of the target interface on the target interface is docked according to the positioning information, and the interface interaction layer of the operable area of the target interface is arranged in the target interface layout, and then according to the text layout in the target interface, the The interface information in the target interface is filled into the interface interaction layer, the adjustment of the target interface is completed, and the device screen size of the terminal device that displays the interface according to the request, realizes the self-adaptive adjustment of the interface, without judging whether the terminal device is in the blacklist, And through the layout planning of its own interface, there is no need to perform unilateral indentation or increase the fill map, which simplifies the interface adjustment process, avoids the problem that the displayed interface is offset on the screen and the image is unbalanced, and ensures the displayed interface.
  • FIG. 1 schematically shows a schematic flowchart of an interface adjustment method according to an embodiment of the present invention
  • FIG. 2A schematically shows a schematic flowchart of an interface adjustment method according to an embodiment of the present invention
  • FIG. 2B schematically shows a schematic diagram of an interface adjustment method according to an embodiment of the present invention
  • FIG. 2C schematically shows a schematic diagram of an interface adjustment method according to an embodiment of the present invention
  • FIG. 2D schematically shows a schematic diagram of an interface adjustment method according to an embodiment of the present invention
  • FIG. 2E schematically shows a schematic flowchart of an interface adjustment method according to an embodiment of the present invention
  • Fig. 3A schematically shows a schematic structural diagram of an interface adjustment device according to an embodiment of the present invention
  • FIG. 3B schematically shows a schematic structural diagram of an interface adjustment apparatus according to an embodiment of the present invention
  • FIG. 3C schematically shows a schematic structural diagram of an interface adjustment apparatus according to an embodiment of the present invention.
  • FIG. 3D schematically shows a schematic structural diagram of an interface adjustment apparatus according to an embodiment of the present invention.
  • Figure 4 schematically shows a block diagram of a server for performing the method according to the invention.
  • Figure 5 schematically shows a memory unit for holding or carrying program code implementing the method according to the invention.
  • An embodiment of the present invention provides an interface adjustment method, as shown in FIG. 1 , the method includes:
  • the interface background layer of the target interface is adjusted to the drawing width and the drawing height, and the interface background layer is a layer filled with the interface background of the target interface.
  • the interface decoration layer is a layer including the decoration image of the target interface.
  • the method provided by the embodiment of the present application calculates the drawing width and the drawing height according to the screen aspect ratio of the target device screen, and then adjusts the size of the interface background layer filled with the interface background of the target interface to the drawing height based on the drawing width and the drawing height.
  • width and drawing height and determine the positioning information of the interface decoration layer including the decoration image of the target interface on the target interface, dock according to the positioning information, and set the interface interaction layer of the operable area of the target interface on the target interface layout, and then follow the The text layout in the target interface, fill the interface information in the target interface into the interface interaction layer, complete the adjustment of the target interface, and realize the adaptive adjustment of the interface according to the device screen size of the terminal device that displays the interface according to the request without judgment.
  • the terminal device is in the blacklist, and through the layout planning of its own interface, there is no need to perform unilateral indentation or increase the fill image, which simplifies the interface adjustment process and avoids the displayed interface from shifting the center of gravity on the screen and the picture is unbalanced It ensures that the displayed interface is beautiful, and provides interface display with the same effect for users using different terminal devices.
  • An embodiment of the present application provides an interface adjustment method, as shown in FIG. 2A , the method includes:
  • the screen sizes of terminal devices on the market are different, and terminal devices with full screen have become popular, and each brand manufacturer has different positions for the front cameras of terminal devices, such as pop-up front cameras, bangs-style front Camera, eyebrow-type front camera, punch-hole front camera, etc.
  • most games, videos and other software will use the horizontal screen model to display the interface, and due to the different screen areas and positions occupied by the front camera, it will block the docking on both sides of the screen.
  • the area used for interacting with the user or the area used for information display brings certain difficulties to the layout design of the interface.
  • the screen size ratio of different terminal devices is different.
  • the screen size ratio of mobile terminal devices is usually between 16:9 and 30:13, while the screen size ratio of tablet terminal devices is usually 4:3. Between 2:1, different screen size ratios increase the difficulty of interface adaptation.
  • the "special area” When adapting the interface, the "special area” is usually customized according to different terminal devices.
  • the “special area” is also the area occupied by the front camera.
  • customizing the "special area” the following are generally used: three ways.
  • the first way is to include the terminal device with the "special area” and the location information of the "special area” into a blacklist.
  • the gravity sensing direction of the current device determines which side of the current device the "special area” is on, and then indents the side unilaterally.
  • the indented distance is the recorded location information.
  • the second way is that when the client determines that the current device is a device in the blacklist, it adds two decorative images on both sides of the screen of the current device, and the width of the decorative images is the width of the recorded location information.
  • the third method is that when the client determines that the current device is a device in the blacklist, it will force the user to remind the user whether to use the indentation mode that comes with the system of the current device. If the indentation model is selected, the above method 1 or method 2 is used to automatically adapt the interface.
  • the unilateral indentation will cause the center of gravity of the picture displayed on the interface to shift in the screen of the device, and the picture will be unbalanced.
  • the decorative images added on both sides cannot match the interface styles of different interfaces, and there will be a "patch" effect, which affects the aesthetics of the interface.
  • the blacklist method cannot adapt to the terminal device with a large screen area and a full screen.
  • the present application proposes an interface adjustment method, which adjusts the interface adaptively according to the device screen size of the target device screen of the target interface display request, without judging whether the terminal device is in the blacklist, and through the layout of its own interface Planning, and there is no need to indent on one side or add padding, and provide users with different terminal devices with the same effect of interface display.
  • the longer the screen of the terminal device the larger the area of the control area reserved for the user on both sides of the interface during interface adjustment, which provides the user with a more comfortable operating feel.
  • the basic resolution is the mainstream screen ratio, which is the ratio of the standard screen width to the standard screen height, and can be adapted to many different types of terminal devices.
  • the basic resolution is 16:9 as an example. It should be noted that, in the process of practical application, the basic resolution can also be changed as the market changes, and this application does not specifically limit the value of the basic resolution.
  • the base resolution is also a criterion, which is compared with the base resolution by obtaining the aspect ratio of the target device screen for which the current target interface display request is directed. If the aspect ratio of the target device screen is greater than or equal to the base resolution, it needs to be adapted to the height of the target device screen, that is, the short side, and the layout that controls the screen height of the target device is consistent with the effect of the base resolution. Adaptive layout on the width side of the screen. If the aspect ratio of the target device screen is smaller than the base resolution, it needs to be adapted to the width of the target device screen, that is, the long side, and the layout that controls the width of the target device screen is consistent with the effect of the base resolution. The height side for adaptive layout.
  • the above comparison and the process of preparing to start the adaptive layout are as follows: when a target interface display request for the target device screen is detected, read the actual screen width and actual screen height of the target device screen, calculate The ratio of the actual screen width to the actual screen height is used as the screen aspect ratio. Then, compare the screen aspect ratio value to the base resolution. If the screen aspect ratio is greater than or equal to the base resolution, the short side will be adapted, the layout of controlling the screen height of the device is consistent with the effect of the base resolution, and the width side of the device screen will be adaptively laid out.
  • the standard screen height is set as the drawing height, and the product of the screen aspect ratio and the drawing height is calculated as the drawing width.
  • the aspect ratio of the screen is smaller than the base resolution, the long side is adapted, the layout of controlling the screen width of the device is consistent with the effect of the base resolution, and the height side of the device screen is adaptively laid out. Therefore, the standard The screen width is set to the drawing width, and the product of the reciprocal of the screen aspect ratio and the drawing width is calculated as the drawing height.
  • the standard screen height in the base resolution is m
  • the standard screen width is n
  • the screen aspect ratio is W/H
  • the drawing width is w
  • the stretching or tiling process will not affect the aesthetics of the target interface and the user's visual effect. Therefore, these contents are extracted Come out to form a separate layer, and process the layer according to the determined drawing width and drawing height.
  • the interface background in the interface is usually very simple, including not many elements and decorations, and may only be some simple lines. Therefore, a layer filled with the interface background of the target interface is set as the interface background layer, and the target interface is set as the interface background layer.
  • the interface background layer of the interface is resized to draw width and draw height.
  • a preset adjustment mode is determined, and the preset adjustment mode is at least any one of stretching adjustment or tile filling adjustment. Then, based on the preset adjustment method, adjust the size of the interface background layer, and control the size of the interface background layer to be consistent with the drawing width and drawing height, so that the interface background layer can fill the entire window of the target device screen.
  • the interface decoration layer is a layer including the decoration image of the target interface, and the resources included therein are non-stretchable resources.
  • the interface decoration layer needs to be positioned, and the positioning method is based on the decoration image included in the interface decoration layer and the The position relationship of the target interface is divided into three methods: centering, docking around, and screen percentage positioning.
  • the centering means that the position of the decoration image included in the interface decoration layer is always in the middle of the target interface;
  • the surrounding docking means that the decoration image included in the interface decoration layer is always docked on an edge or a vertex of the target device screen;
  • the screen percentage is positioned as the
  • the position information of the decoration image included in the interface decoration layer is defined as a percentage position based on the screen of the target device, that is, the percentage of width/height, so as to perform self-adaptation of the interface decoration layer.
  • the three positioning methods can be used interchangeably, for example: horizontal centering, vertical percentage positioning.
  • the position parameters of the interface decoration layer on the target interface based on the drawing width and the drawing height to obtain positioning information, and then dock the interface decoration layer on the target interface according to the positioning information.
  • the position parameters of the interface decoration layer on the target interface need to be obtained.
  • the position parameter is read. If the position parameter indicates the first absolute position of the interface decoration layer from the edge of the target device screen, that is, the position parameter specifies which edge of the target device screen the interface decoration layer needs to be docked on.
  • the position information and the first longitudinal absolute position information are used as positioning information.
  • the specific determination of the first horizontal absolute position information and the first vertical absolute position information includes the following: it is assumed that the first horizontal absolute position information is represented by x, the first vertical absolute position information is represented by y, and the first absolute position is represented by A , the drawing width is represented by w, and the drawing height is represented by h.
  • y the first vertical absolute position information
  • the position parameter indicates the first relative position between the interface decoration layer and the edge of the target device screen
  • the first product of the drawing width and the first relative position and the second product of the drawing width and the first relative position are calculated.
  • the first product is taken as the first horizontal relative position information
  • the second product is taken as the first vertical relative position information
  • the first horizontal relative position information and the first vertical relative position information are taken as the positioning information.
  • the interface interaction layer is a layer in which an operable area of the target interface is set, including a clickable operation area, which is usually a rectangle.
  • the high-frequency operation areas often used by users are distributed on both sides of the target device screen.
  • the percentage of the size is shrunk inward so that it is always distributed in the optimal interaction position.
  • Fig. 2B the high-frequency operation regions of the device screen with screen widths of 16 cm, 30 cm, and 4 cm are shown by the shaded parts in the three rectangles in Fig. 2B. It is obvious that with the target device screen As the width increases, the area of the high-frequency operation area shrinks inward.
  • a first positioning coefficient and a second positioning coefficient are set.
  • the first positioning coefficient is used to preserve the safety distance on both sides and locate the best interactive position.
  • the value of the first positioning coefficient is set to 0.2.
  • the second positioning coefficient is used to preserve the safety distance between the upper and lower sides of the target device screen, to prevent accidental touches of buttons on the target device screen, and to prevent incomplete information display or accidental touches in the interactive area of some terminal devices equipped with curved screens.
  • the value of the second positioning coefficient is set to 10 through a large number of experiments. In this way, when the interface interaction layer is laid out on the target interface, the position information of the four sides of the interface interaction layer needs to be calculated separately, and then the interface interaction layer is positioned and laid out in the current device.
  • the location information of the four sides of the interface interaction layer is set as the left edge location information, the top edge location information, the right edge location information, and the bottom edge location information.
  • the left edge positioning information is represented by L
  • the top edge positioning information is represented by T
  • the right edge positioning information is represented by R
  • the bottom edge positioning information is represented by B
  • the drawing width is represented by w
  • the drawing height is represented by h
  • the basic resolution is
  • the standard screen height is represented by m
  • the standard screen width is represented by n
  • the first positioning coefficient is represented by ⁇
  • the second positioning coefficient is represented by ⁇
  • the preset coefficient is taken as 0.2.
  • some information is usually displayed on the interface interaction layer to guide the user to trigger a certain area, and the information is displayed in different ways, such as list display, list display, and tab text display, etc. , therefore, in fact, after the interface interaction layer is regionally modularized, the interface interaction layer can be divided into list area, information display area and tab display area, and then you need to fill in the list area, information display area and tab display area respectively according to different filling methods.
  • the tab display area is filled with relevant interface information.
  • a second absolute position and a second relative position are indicated, which is the same as the first absolute position and the first relative position in the above step 203, the second absolute position and the second relative position are also Indicates which edge of each area is docked at the specific position of which edge of the target device screen or what percentage of the position it is docked at.
  • the list area is usually set at the leftmost side of the entire target interface. Therefore, according to the indication of the second absolute position, the top edge of the list area, the left edge of the list area and the lower edge of the list area are determined on the screen of the target device.
  • the list area outputs the right edge of the list area based on the product of the drawing width and the second relative position, and determine the list area according to the top edge of the list area, the left edge of the list area, the bottom edge of the list area and the right edge of the list area. That is to say, when adapting the list area, the four sides of the list area are obtained by secondary positioning based on the interface interaction layer.
  • the left, upper and lower edges of the list area are all the edges of the interface interaction layer. Position for percentage of UI interaction layer.
  • the information display area is usually set on the right side of the list area. Therefore, according to the indication of the second absolute position, the top edge of the information display area and the lower edge of the information display area are determined on the screen of the target device. , output the right edge of the information display area and the left edge of the information display area based on the product of the drawing width and the second relative position, and follow the top edge of the information display area, the lower edge of the information display area, the right edge of the information display area and the left edge of the information display area, Determine the information display area. That is to say, when adapting the information display area, the left and right sides of the information display area are positioned based on the percentage of the interface interaction layer, and the upper and lower sides of the information display area are docked at the edge of the interface interaction layer.
  • the tab display area is usually set on the right side of the list area, that is, the rightmost side of the entire target interface. Therefore, according to the indication of the second absolute position, on the target device screen Determine the top edge of the tab display area, the right edge of the tab display area, and the bottom edge of the tab display area, output the left edge of the tab display area based on the product of the drawing width and the second relative position, and follow the top edge of the tab display area, page The right edge of the tab display area, the lower edge of the tab display area, and the left edge of the tab display area determine the tab display area. That is to say, when adapting the tab display area, edge docking is performed based on the right and top edges of the interface interaction layer, and the left side of the tab display area is positioned based on the percentage of the interface interaction layer.
  • the process of performing edge parking and percentage positioning in this step is the same as the process of performing edge parking and percentage positioning based on the first absolute position and the first relative position in the above step 203, and will not be repeated here.
  • the list area, the information display area, and the tab display area shown in FIG. 2C can be obtained.
  • the effect of using the above process to adapt to the ultra-wide screen device shows that the list area is widened, the two sides of the device screen will leave the interaction avoidance area, and the interval between the list area, the information display area and the tab display area will become larger. .
  • the effect of using the above process to adapt to ultra-wide-screen devices is that the height of the list area is increased, more list content is displayed, the overall height of the information display area is increased, and the tabs are displayed.
  • the layout of the zones is positioned by percentage.
  • the interface information needs to be filled in each region.
  • a list configuration requirement is usually set. Therefore, when filling the list area with information, you need to obtain at least one list item included in the interface information, and fill at least one list item into the list area according to the list configuration requirements.
  • the content specified in the list configuration requirements may be divided into two cases.
  • the list configuration requirements specify the preset list item size, that is, the width of a single list item.
  • the ratio of the preset list item size outputs the number of items in each column, and the list width is the width after adaptive adjustment.
  • calculate the sixth product of the number of items in each column and the size of the preset list items calculate the first product difference between the list width and the sixth product, and output the list item interval according to the ratio of the first product difference and the number of items in each column .
  • at least one list item is populated according to the number of items in each column and the list item interval.
  • the list width is represented by List (list)
  • the preset list item size is represented by Item (item)
  • the number of items in each column is represented by Num (quantity)
  • the list item interval is represented by P
  • the list item interval P [List ⁇ (Num ⁇ Item)]/Num is calculated, and [List ⁇ (Num ⁇ Item)]/Num is rounded down, and the obtained value is used as the value of P.
  • the list is filled according to the above process, that is, Num list items are placed in each row of the list, and the interval between each list item is P.
  • the list configuration requirements specify the preset number of items in each column and the preset list item interval.
  • first calculate the difference between the preset number of items in each column and the default value and calculate the difference between the item and the preset list.
  • Seventh product of term intervals are calculated.
  • the second product difference between the list width and the seventh product is calculated, and the list item size is output according to the ratio of the second product difference and the preset number of items in each column.
  • at least one list item is filled according to the preset number of items per column, the preset list item interval and the list item size.
  • the list is filled according to the above process, that is, Num number of list items are placed in each row of the list, the size of each list item is Item, and the interval between each list item is P.
  • the text description included in the interface information is filled into the information display area, and the tab elements included in the interface information are filled into the tab display area.
  • the text layout in the interface fills the interface information in the target interface into the interface interaction layer to complete the adjustment of the target interface.
  • a base resolution is set according to currently common terminal devices.
  • the screen aspect ratio value of the target device screen is obtained, and the screen aspect ratio value is compared with the base resolution to determine whether the screen aspect ratio value is greater than or equal to the base resolution.
  • the target interface is dynamically laid out vertically using the width adaptation model, the standard screen height of the base resolution is set as the drawing height, and the product of the screen aspect ratio and the drawing height is calculated as Drawing width, and then according to the drawing width and drawing height, stretch or tile the interface background layer vertically, dock the interface decoration layer up and down, center or percentage, and position the interface interaction layer vertically by percentage. If it is determined that the screen aspect ratio is not greater than or equal to the base resolution, the target interface is dynamically laid out horizontally in the height adaptation mode, the standard screen width of the base resolution is set as the drawing width, and the reciprocal of the screen aspect ratio is calculated.
  • the product of the drawing width is used as the drawing height, and then according to the drawing width and drawing height, the interface background layer is stretched left and right or tiled and filled, the interface decoration layer is docked on both sides, center or percentage, and the interface interaction layer is positioned horizontally adaptively by percentage.
  • FIG. 2E the hierarchical relationship between the interface background layer, the interface decoration layer and the interface interaction layer is shown in FIG. 2E, wherein the corresponding hierarchical relationship is: interface background layer ⁇ interface decoration layer ⁇ interface interaction layer, and the interface interaction layer is filled with There are various text information in the interface.
  • the method provided by the embodiment of the present application calculates the drawing width and the drawing height according to the screen aspect ratio of the target device screen, and then adjusts the size of the interface background layer filled with the interface background of the target interface to the drawing height based on the drawing width and the drawing height.
  • width and drawing height and determine the positioning information of the interface decoration layer including the decoration image of the target interface on the target interface, dock according to the positioning information, and set the interface interaction layer of the operable area of the target interface on the target interface layout, and then follow the The text layout in the target interface, fill the interface information in the target interface into the interface interaction layer, complete the adjustment of the target interface, and realize the adaptive adjustment of the interface according to the device screen size of the terminal device that displays the interface according to the request without judgment.
  • the terminal device is in the blacklist, and through the layout planning of its own interface, there is no need to perform unilateral indentation or increase the fill image, which simplifies the interface adjustment process and avoids the displayed interface from shifting the center of gravity on the screen and the picture is unbalanced It ensures that the displayed interface is beautiful, and provides interface display with the same effect for users using different terminal devices.
  • an embodiment of the present application provides an interface adjustment device.
  • the device includes: the first calculation module 301 , the adjustment module 302 , and the second calculation module 302 .
  • the first calculation module 301 is configured to calculate the drawing width and the drawing height according to the screen aspect ratio value of the target device screen when a target interface display request for the target device screen is detected;
  • the adjustment module 302 is configured to adjust the size of the interface background layer of the target interface to the drawing width and the drawing height, and the interface background layer is a layer filled with the interface background of the target interface;
  • the second calculation module 303 is configured to calculate the position parameters of the interface decoration layer on the target interface based on the drawing width and the drawing height, obtain positioning information, and dock the interface decoration layer according to the positioning information
  • the interface decoration layer is a layer including a decoration image of the target interface
  • the layout module 304 is configured to, according to the drawing width and the drawing height, lay out an interface interaction layer on the target interface, where the interface interaction layer is a layer provided with an operable area of the target interface;
  • the filling module 305 is configured to fill the interface information in the target interface into the interface interaction layer according to the text layout in the target interface, so as to complete the adjustment of the target interface.
  • the first computing module 301 includes: a reading unit 3011 , a first computing unit 3012 and a second computing unit 3013 .
  • the reading unit 3011 is configured to read the actual screen width and actual screen height of the screen of the target device, calculate the ratio of the actual screen width and the actual screen height as the screen aspect ratio, and use the screen The aspect ratio is compared with the base resolution, where the base resolution is the ratio of the standard screen width to the standard screen height;
  • the first calculation unit 3012 is configured to set the standard screen height as the drawing height if the screen aspect ratio is greater than or equal to the base resolution, and calculate the screen aspect ratio and the drawing height The product of , as the drawing width;
  • the second calculation unit 3013 is configured to set the standard screen width as the drawing width if the screen aspect ratio value is smaller than the base resolution, and calculate the inverse of the screen aspect ratio value and the drawing width The product of the widths is the draw height.
  • the adjustment module 302 is configured to determine a preset adjustment method, and the preset adjustment method is at least any one of stretching adjustment or tile filling adjustment; based on the preset adjustment method, The size of the interface background layer is adjusted, and the size of the interface background layer is controlled to be consistent with the drawing width and the drawing height.
  • the second calculation module 303 includes: an acquisition unit 3031 , a first calculation unit 3032 and a second calculation unit 3033 .
  • the obtaining unit 3031 is configured to obtain the position parameter of the interface decoration layer in the target interface
  • the first calculation unit 3032 is configured to, if the position parameter indicates the first absolute position of the interface decoration layer from the edge of the target device screen, according to the location of the interface decoration layer on the target interface The position, the drawing width, the drawing height and the first absolute position are calculated, the first horizontal absolute position information and the first vertical absolute position information are determined, and the first horizontal absolute position information and the first absolute position information are calculated. vertical absolute position information as the positioning information;
  • the second calculation unit 3033 is configured to calculate the first relative position between the drawing width and the first relative position if the position parameter indicates a first relative position between the interface decoration layer and the edge of the screen of the target device.
  • a product, the second product of the drawing width and the first relative position, the first product is taken as the first horizontal relative position information
  • the second product is taken as the first vertical relative position information
  • the The first horizontal relative position information and the first vertical relative position information are used as the positioning information.
  • the first computing unit 3032 is configured to calculate the first absolute The position is set as the first horizontal absolute position information; when the position of the interface decoration layer on the target interface indicates that it is docked at the right edge of the screen of the target device, calculate the relationship between the drawing width and the first The difference between the absolute positions is used as the first horizontal absolute position information; when the position of the interface decoration layer on the target interface indicates that it is docked at the top edge of the screen of the target device, the first absolute position Set as the first vertical absolute position information; when the position of the interface decoration layer on the target interface indicates that it is docked at the bottom edge of the screen of the target device, calculate the relationship between the drawing height and the first absolute position The difference in position is used as the first longitudinal absolute position information.
  • the layout module 304 is configured to calculate the third product of the drawing width and the first positioning coefficient, and the fourth product of the standard screen width and the preset coefficient, and calculate the third product and the The difference value of the fourth product is used as the left edge positioning information; the second positioning coefficient is set as the top edge positioning information; the fifth product of the drawing width and the coefficient difference is calculated, and the fifth product and the first The sum of the four products is used as the right edge positioning information, the coefficient difference is the difference between the default value and the preset coefficient; the difference between the drawing height and the second positioning coefficient is calculated as the bottom edge positioning information ; Layout the interface interaction layer according to the left edge positioning information, the top edge positioning information, the right edge positioning information and the bottom edge positioning information.
  • the filling module 305 includes: a determining unit 3051 , a dividing unit 3052 , a first filling unit 3053 and a second filling unit 3054 .
  • the determining unit 3051 configured to determine a second absolute position and a second relative position based on the text layout
  • the dividing unit 3052 is configured to divide the interface interaction layer into a list area, an information display area and a tab display area according to the second absolute position and the second relative position;
  • the first filling unit 3053 is configured to acquire at least one list item included in the interface information, and fill the at least one list item into the list area according to a list configuration requirement;
  • the second filling unit 3054 is configured to fill the text description included in the interface information into the information display area, and fill the tab elements included in the interface information into the tab display area.
  • the dividing unit 3052 is configured to determine the top edge of the list area, the left edge of the list area and the bottom edge of the list area on the screen of the target device according to the indication of the second absolute position, and based on the drawing
  • the product of the width and the second relative position is output to the right edge of the list area
  • the list is determined according to the top edge of the list area, the left edge of the list area, the bottom edge of the list area, and the right edge of the list area
  • the top edge of the tab display For the indication of the second absolute position, the top edge of the tab display
  • the first filling unit 3053 is configured to, if the list configuration requirement specifies a preset list item size, output each item size according to the ratio of the list width of the list area to the preset list item size the number of column items; calculate the sixth product of the number of items in each column and the size of the preset list item, and calculate the first product difference between the list width and the sixth product; according to the first product difference
  • the list item interval is output as a ratio to the number of items in each column; the at least one list item is filled according to the number of items in each column and the list item interval.
  • the first filling unit 3053 is further configured to calculate the preset number of items per column and the default number of items in each column if the list configuration requirement specifies the preset number of items per column and the preset list item interval
  • the item difference value of the value is calculated, and the seventh product of the item difference value and the preset list item interval is calculated; the second product difference value of the list width and the seventh product is calculated, and according to the second product
  • the ratio of the difference to the preset number of items per column outputs the list item size; according to the preset number of items per column, the preset list item interval and the list item size, the at least one list item is filling.
  • the device provided by the embodiment of the present application calculates the drawing width and the drawing height according to the screen aspect ratio of the target device screen, and then adjusts the size of the interface background layer filled with the interface background of the target interface to the drawing height based on the drawing width and the drawing height.
  • width and drawing height and determine the positioning information of the interface decoration layer including the decoration image of the target interface on the target interface, dock according to the positioning information, and set the interface interaction layer of the operable area of the target interface on the target interface layout, and then follow the The text layout in the target interface, fill the interface information in the target interface into the interface interaction layer, complete the adjustment of the target interface, and realize the adaptive adjustment of the interface according to the device screen size of the terminal device that displays the interface according to the request without judgment.
  • the terminal device is in the blacklist, and through the layout planning of its own interface, there is no need to perform unilateral indentation or increase the fill image, which simplifies the interface adjustment process and avoids the displayed interface from shifting the center of gravity on the screen and the picture is unbalanced It ensures that the displayed interface is beautiful, and provides interface display with the same effect for users using different terminal devices.
  • Various component embodiments of the present invention 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 in the interface adjustment device according to the embodiment of the present invention.
  • DSP digital signal processor
  • the present invention can also be implemented as apparatus or apparatus programs (eg, computer programs and computer program products) for performing part or all of the methods described herein.
  • Such a program implementing the present invention may be stored on a computer-readable medium, or may be in the form of one or more signals. Such signals may be downloaded from Internet sites, or provided on carrier signals, or in any other form.
  • Figure 4 shows a server, such as an application server, that can implement interface adaptations according to the present invention.
  • the server traditionally includes a processor 410 and a computer program product or computer readable medium in the form of memory 420 .
  • the memory 420 may be electronic memory such as flash memory, EEPROM (Electrically Erasable Programmable Read Only Memory), EPROM, hard disk, or ROM.
  • the memory 420 has storage space 430 to store program code 431 for performing any of the method steps in the above-described methods.
  • the storage space 430 storing program codes may store various program codes 431 for implementing various steps in the above methods, respectively.
  • These program codes can be read from or written to one or more computer program products.
  • These computer program products include program code carriers such as hard disks, compact disks (CDs), memory cards or floppy disks. Such computer program products are typically portable or fixed storage units as described with reference to FIG. 5 .
  • the storage unit may have storage segments, storage spaces, etc. arranged similarly to the storage 420 in the server of FIG. 4 .
  • the program code may be compressed in a suitable form.
  • the storage unit stores computer readable code 431' for performing the method steps of the present invention, ie code readable by a processor such as 410, for example, which, when run by a server, causes the server to perform the above the various steps in the described method.
  • references herein to "one embodiment,” “an embodiment,” or “one or more embodiments” means that a particular feature, structure, or characteristic described in connection with an embodiment is included in at least one embodiment of the present invention. Also, please note that instances of the phrase “in one embodiment” herein are not necessarily all referring to the same embodiment.

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Software Systems (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）；按照目标界面中的文字布局，将目标界面中的界面信息填充至界面交互层（105）。根据屏幕宽高比值，计算绘制宽度和绘制高度，自适应调整，无需建立黑名单，无需单边缩进或增加填充图，令画面美观。

Description

界面调整方法、装置、计算机程序及计算机可读介质
本申请要求与2020年8月21日提交中国专利局、申请号为202010851700.7、申请名称为“界面调整方法、装置、计算机设备及计算机可读存储介质”的中国专利申请的优先权，其全部内容通过引用结合在申请中。
技术领域
本发明涉及计算机技术领域，尤其涉及一种界面调整方法、装置、计算机程序及计算机可读介质。
背景技术
随着计算机技术的不断发展，各种类型的终端设备越来越多，全面屏的终端设备已经普及，各个终端设备的厂商也在全力发展全面屏。目前，市面上的终端设备屏幕尺寸不一，且不同厂商的终端设备的前置摄像头的位置也各有不同，前置摄像头会占用屏幕中的一部分区域，在具体的显示过程中，很可能会遮挡屏幕两侧停靠的交互功能区或信息展示区，因此，需要对屏幕展示的界面进行调整，保证界面与屏幕的适配。
相关技术中，将前置摄像头会占用屏幕的终端设备以及占用的位置信息记入到黑名单中，由运行在终端设备上的客户端判断该终端设备是否在黑名单中。如果终端设备属于黑名单，则根据终端设备的重力感应方向，判断前置摄像头占用的区域在哪一侧，调整该侧进行单边缩进，缩进的距离为记入在黑名单中的位置信息。
在实现本申请的过程中，申请人发现相关技术至少存在以下问题：
单边缩进的调整需要针对终端设备单独进行调整和适配，调整过程繁琐，而且会导致显示的界面在屏幕中重心偏移，画面不平衡，影响画面的美观度。
发明内容
鉴于上述问题，提出了本发明以便提供一种克服上述问题或者至少部分地解决或者减缓上述问题的界面调整方法、装置、计算机程序及计算机可读介质。
根据本发明的一个方面，提供了一种界面调整方法，该方法包括：当 检测到针对目标设备屏幕的目标界面展示请求时，根据所述目标设备屏幕的屏幕宽高比值，计算绘制宽度和绘制高度；将所述目标界面的界面背景层的尺寸调整为所述绘制宽度和所述绘制高度，所述界面背景层是填充有所述目标界面的界面背景的图层；基于所述绘制宽度和所述绘制高度对界面装饰层在所述目标界面的位置参数进行计算，得到定位信息，将所述界面装饰层按照所述定位信息停靠在所述目标界面，所述界面装饰层是包括所述目标界面的装饰图的图层；根据所述绘制宽度和所述绘制高度，在所述目标界面布局界面交互层，所述界面交互层是设置有所述目标界面的可操作区域的图层；按照所述目标界面中的文字布局，将所述目标界面中的界面信息填充至所述界面交互层，完成对所述目标界面的调整。
根据本发明的另一个方面，提供了一种界面调整装置，该装置包括：第一计算模块，用于当检测到针对目标设备屏幕的目标界面展示请求时，根据所述目标设备屏幕的屏幕宽高比值，计算绘制宽度和绘制高度；调整模块，用于将所述目标界面的界面背景层的尺寸调整为所述绘制宽度和所述绘制高度，所述界面背景层是填充有所述目标界面的界面背景的图层；第二计算模块，用于基于所述绘制宽度和所述绘制高度对界面装饰层在所述目标界面的位置参数进行计算，得到定位信息，将所述界面装饰层按照所述定位信息停靠在所述目标界面，所述界面装饰层是包括所述目标界面的装饰图的图层；布局模块，用于根据所述绘制宽度和所述绘制高度，在所述目标界面布局界面交互层，所述界面交互层是设置有所述目标界面的可操作区域的图层；填充模块，用于按照所述目标界面中的文字布局，将所述目标界面中的界面信息填充至所述界面交互层，完成对所述目标界面的调整。
根据本发明的又一个方面，提供了一种计算机程序，其包括计算机可读代码，当所述计算机可读代码在服务器上运行时，导致所述服务器执行上述界面调整方法。
根据本发明的再一个方面，提供了一种计算机可读介质，其中存储了上述计算机程序。
本发明的有益效果为：
根据目标设备屏幕的屏幕宽高比值，计算绘制宽度和绘制高度，进而基于绘制宽度和绘制高度，将填充有目标界面的界面背景的界面背景层的尺寸 调整为绘制宽度和绘制高度，并确定包括目标界面的装饰图的界面装饰层在目标界面的定位信息，按照定位信息进行停靠，并在目标界面布局设置有目标界面的可操作区域的界面交互层，进而按照目标界面中的文字布局，将目标界面中的界面信息填充至界面交互层，完成对目标界面的调整，根据请求进行界面展示的终端设备的设备屏幕尺寸，实现自适应完成界面的调整，无需判断终端设备是否在黑名单中，且通过自身界面的布局规划，也无需进行单边缩进或增加填充图，简化了界面的调整过程，避免出现显示的界面在屏幕中重心偏移且画面不平衡的问题，保证显示的界面的画面美观，为使用不同终端设备的用户提供相同效果的界面展示。
上述说明仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段，而可依照说明书的内容予以实施，并且为了让本发明的上述和其它目的、特征和优点能够更明显易懂，以下特举本发明的具体实施方式。
附图说明
通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本发明的限制。而且在整个附图中，用相同的参考符号表示相同的部件。在附图中：
图1示意性示出了根据本发明一个实施例的界面调整方法流程示意图；
图2A示意性示出了根据本发明一个实施例的界面调整方法流程示意图；
图2B示意性示出了根据本发明一个实施例的界面调整方法的示意图；
图2C示意性示出了根据本发明一个实施例的界面调整方法的示意图；
图2D示意性示出了根据本发明一个实施例的界面调整方法的示意图；
图2E示意性示出了根据本发明一个实施例的界面调整方法流程示意图；
图3A示意性示出了根据本发明一个实施例的界面调整装置的结构 示意图；
图3B示意性示出了根据本发明一个实施例的界面调整装置的结构示意图；
图3C示意性示出了根据本发明一个实施例的界面调整装置的结构示意图；
图3D示意性示出了根据本发明一个实施例的界面调整装置的结构示意图；
图4示意性地示出了用于执行根据本发明的方法的服务器的框图；以及
图5示意性地示出了用于保持或者携带实现根据本发明的方法的程序代码的存储单元。
具体实施例
下面结合附图和具体的实施方式对本发明作进一步的描述。
本发明实施例提供了一种界面调整方法，如图1所示，该方法包括：
101、当检测到针对目标设备屏幕的目标界面展示请求时，根据目标设备屏幕的屏幕宽高比值，计算绘制宽度和绘制高度。
102、将目标界面的界面背景层的尺寸调整为绘制宽度和绘制高度，界面背景层是填充有目标界面的界面背景的图层。
103、基于绘制宽度和绘制高度对界面装饰层在目标界面的位置参数进行计算，得到定位信息，将界面装饰层按照定位信息停靠在目标界面，界面装饰层是包括目标界面的装饰图的图层。
104、根据绘制宽度和绘制高度，在目标界面布局界面交互层，界面交互层是设置有目标界面的可操作区域的图层。
105、按照目标界面中的文字布局，将目标界面中的界面信息填充至界面交互层，完成对目标界面的调整。
本申请实施例提供的方法，根据目标设备屏幕的屏幕宽高比值，计算绘制宽度和绘制高度，进而基于绘制宽度和绘制高度，将填充有目标界面的界面背景的界面背景层的尺寸调整为绘制宽度和绘制高度，并确定包括目标界面的装饰图的界面装饰层在目标界面的定位信息，按照定位信息进行停靠，并在目标界面布局设置有目标界面的可操作区域的界面交互层，进而按照目 标界面中的文字布局，将目标界面中的界面信息填充至界面交互层，完成对目标界面的调整，根据请求进行界面展示的终端设备的设备屏幕尺寸，实现自适应完成界面的调整，无需判断终端设备是否在黑名单中，且通过自身界面的布局规划，也无需进行单边缩进或增加填充图，简化了界面的调整过程，避免出现显示的界面在屏幕中重心偏移且画面不平衡的问题，保证显示的界面的画面美观，为使用不同终端设备的用户提供相同效果的界面展示。
本申请实施例提供了一种界面调整方法，如图2A所示，该方法包括：
201、当检测到针对目标设备屏幕的目标界面展示请求时，根据目标设备屏幕的屏幕宽高比值，计算绘制宽度和绘制高度。
目前市面上的终端设备的屏幕尺寸不一，全面屏的终端设备已经普及，且各品牌厂商对于终端设备的前置摄像头的位置也各有不同，例如，弹出式前置摄像头、刘海式前置摄像头、眉心式前置摄像头、打孔式前置摄像头等等。在进行游戏、视频、网页等界面的布局设计过程中，大多数游戏、视频等软件都会采用横屏模型展示界面，而由于前置摄像头占用的屏幕区域不同、位置不同，会遮挡屏幕两侧停靠的用于与用户交互的区域或用于进行信息展示的区域，这对界面的布局设计带来了一定困难。另外，不同终端设备的屏幕尺寸比例是不同，比如手机类的终端设备的屏幕尺寸比例通常是16:9至30:13之间，而平板电脑类的终端设备的屏幕尺寸比例通常是4:3至2:1之间，不同屏幕尺寸比例更增加了界面的适配难度。
当下在对界面进行适配时，通常根据不同终端设备进行“特殊区域”定制化，该“特殊区域”也就是前置摄像头占用的区域，在对“特殊区域”定制化处理时，一般采用下述三种方式。第一种方式是，将带有“特殊区域”的终端设备及“特殊区域”的位置信息计入一个黑名单中，由提供界面的客户端在确定当前设备是黑名单中的设备时，根据当前设备的重力感应方向，判断“特殊区域”在当前设备的哪一侧，然后将该侧进行单边缩进，缩进的距离即为记录的位置信息。第二种方式是，客户端在确定当前设备是黑名单中的设备时，在当前设备的屏幕两侧增加两条装饰图，装饰图宽度即为记录的位置信息宽度。第三种方式是，客户端在确定当前设备是黑名单中的设备时，对用户进行强制提醒，提醒用户是否使用当前设备的系统自带的缩进模式，如果当前设备的系统中没有自带的缩进模型，则采用上述方式一或者方 式二自动进行界面的适配。申请人认识到，采用上述三种方式中任一方式进行界面的适配时，从界面表现上看，单边缩进会导致界面所展示的画面在设备的屏幕中重心偏移，画面不平衡，且两侧增加的装饰图无法与不同界面的界面风格相匹配，会有一种“补丁”的效果，影响界面美观度。从交互体验上看，单边缩进会导致用户对界面操作的手势偏移，左右手的停靠区域不一致，且在用户旋转屏幕后，左右手的操作区会改变，非常影响用户的习惯性操作。从成本维护上看，通过黑名单的方式并不能够适应屏幕区域较大的全面屏的终端设备。
因此，本申请提出一种界面调整方法，根据目标界面展示请求进针对的目标设备屏幕的设备屏幕尺寸，自适应完成界面的调整，无需判断终端设备是否在黑名单中，且通过自身界面的布局规划，也无需进行单边缩进或增加填充图，为使用不同终端设备的用户提供相同效果的界面展示。另外，在交互方面，终端设备的屏幕越长，在进行界面调整时，界面两侧为用户保留的操控区域的面积越大，为用户提供了更舒适的操作手感。
在实现本申请实施例之前，为了在终端设备展示界面时能够以某一个标准自动进行适配，需要先定制一个基础分辨率，也就是一个基础的界面长宽比。该基础分辨率是主流的屏幕比例，是标准屏幕宽度与标准屏幕高度的比值，能够适配很多不同机型的终端设备，在本申请实施例中，以基础分辨率为16:9为例进行说明，而在实际应用的过程中，随着市场的变化，该基础分辨率也可进行变化，本申请对基础分辨率的取值不进行具体限定。
基础分辨率也即一个评判标准，通过获取当前目标界面展示请求针对的目标设备屏幕的长宽比，与基础分辨率进行比较。如果目标设备屏幕的长宽比大于等于基础分辨率，则需要以目标设备屏幕的高，也即短的边进行适配，控制目标设备屏幕高度的布局与基础分辨率的效果一致，而目标设备屏幕的宽度一侧进行自适应布局。如果目标设备屏幕的长宽比小于基础分辨率，则需要以目标设备屏幕的宽，也即长的边进行适配，控制目标设备屏幕宽度的布局与基础分辨率的效果一致，而目标设备屏幕的高度一侧进行自适应布局。
在实际应用的过程中，上述比对以及准备开始进行自适应布局的过程如 下：当检测到针对目标设备屏幕的目标界面展示请求时，读取目标设备屏幕的实际屏幕宽度和实际屏幕高度，计算实际屏幕宽度和实际屏幕高度的比值作为屏幕宽高比值。随后，将屏幕宽高比值与基础分辨率进行比对。若屏幕宽高比值大于等于基础分辨率，则也即短的边进行适配，控制设备屏幕高度的布局与基础分辨率的效果一致，而设备屏幕的宽度一侧进行自适应布局，因此，将标准屏幕高度设置为绘制高度，计算屏幕宽高比值与绘制高度的乘积作为绘制宽度。若屏幕宽高比值小于基础分辨率，则也即长的边进行适配，控制设备屏幕宽度的布局与基础分辨率的效果一致，而设备屏幕的高度一侧进行自适应布局，因此，将标准屏幕宽度设置为绘制宽度，计算屏幕宽高比值的倒数与绘制宽度的乘积作为绘制高度。
例如，设基础分辨率中的标准屏幕高度为m，标准屏幕宽度为n，屏幕宽高比值为W/H，绘制宽度为w，绘制高度为h，如果W/H大于等于m/n，则h＝n，w＝(W/H)×h；如果W/H小于m/n，则w＝m，h＝(H/W)×w。
202、将目标界面的界面背景层的尺寸调整为绘制宽度和绘制高度。
在本申请实施例中，考虑到目标界面中有些内容是可以直接拉伸或者平铺的，拉伸或者平铺处理不会影响目标界面的美观以及用户的视觉效果的，因此，将这些内容提取出来单独形成一个图层，按照已经确定的绘制宽度以及绘制高度对该图层进行处理即可。其中，通常界面中的界面背景是很简单的，包括的元素以及装饰不并多，可能只是一些简单的线条，因此，设置一个填充有目标界面的界面背景的图层作为界面背景层，将目标界面的界面背景层的尺寸调整为绘制宽度和绘制高度。
具体地，在进行界面背景层的尺寸调整时，首先，确定预设调整方式，预设调整方式至少为拉伸调整或平铺填充调整中的任一种。随后，基于预设调整方式，对界面背景层的尺寸进行调整，控制界面背景层的尺寸与绘制宽度和绘制高度一致即可，使界面背景层可以填充整个目标设备屏幕的窗口。
203、基于绘制宽度和绘制高度对界面装饰层在目标界面的位置参数进行计算，得到定位信息，将界面装饰层按照定位信息停靠在目标界面。
在本申请实施例中，界面装饰层是包括目标界面的装饰图的图层，其中包括的资源为不可拉伸资源，需要对界面装饰层进行定位，定位方式根据界 面装饰层包括的装饰图与目标界面的位置关系，分为居中、四周停靠、屏幕百分比定位三种方式。其中，居中为界面装饰层包括的装饰图位置始终在目标界面的中间；四周停靠为界面装饰层包括的装饰图始终停靠在目标设备屏幕的某个边或某个顶点上；屏幕百分比定位为将界面装饰层包括的装饰图的位置信息定义为基于目标设备屏幕的百分比位置，即宽/高的百分比，从而进行界面装饰层的自适应。需要说明的是，三种定位方式可以互相交叉使用，例如：横向居中，纵向百分比定位。
因此，参见上面的描述，需要基于绘制宽度和绘制高度对界面装饰层在目标界面的位置参数进行计算，得到定位信息，进而将界面装饰层按照定位信息停靠在目标界面。其中，在计算定位信息时，首先，需要获取界面装饰层在目标界面的位置参数。随后，对位置参数进行读取，若位置参数指示了界面装饰层距离目标设备屏幕的边缘的第一绝对位置，也即位置参数规定了界面装饰层需要停靠在目标设备屏幕的哪个边缘的具体哪个位置，所以，需要根据界面装饰层在目标界面的所处位置、绘制宽度、绘制高度和第一绝对位置进行计算，确定第一横向绝对位置信息和第一纵向绝对位置信息，将第一横向绝对位置信息和第一纵向绝对位置信息作为定位信息。具体确定第一横向绝对位置信息和第一纵向绝对位置信息的情况包括以下几种：假设第一横向绝对位置信息用x表示，第一纵向绝对位置信息用y表示，第一绝对位置用A表示，绘制宽度用w表示，绘制高度用h表示，当界面装饰层在目标界面的所处位置指示停靠在目标设备屏幕的左边缘时，将第一绝对位置设置为第一横向绝对位置信息，也即x＝A。或，当界面装饰层在目标界面的所处位置指示停靠在目标设备屏幕的右边缘时，计算绘制宽度与第一绝对位置的差值作为第一横向绝对位置信息，也即x＝w-A。或，当界面装饰层在目标界面的所处位置指示停靠在目标设备屏幕的顶部边缘时，将第一绝对位置设置为第一纵向绝对位置信息，也即y＝A。或，当界面装饰层在目标界面的所处位置指示停靠在目标设备屏幕的底部边缘时，计算绘制高度与第一绝对位置的差值作为第一纵向绝对位置信息，也即y＝h-A。需要说明的是，上述计算得到的x以及y可以根据界面装饰层在目标界面的所处位置自由组合，从而实现界面装饰层的右边缘置顶、左边缘置底等等。
而另一方面，若位置参数指示了界面装饰层与目标设备屏幕的边缘的第一相对位置，则计算绘制宽度与第一相对位置的第一乘积、绘制宽度与第一相对位置的第二乘积，将第一乘积作为第一横向相对位置信息，将第二乘积作为第一纵向相对位置信息，将第一横向相对位置信息和第一纵向相对位置信息作为定位信息。设第一横向相对位置信息用e表示，第一纵向相对位置信息用f表示，绘制宽度用w表示，绘制高度用h表示，并设第一相对位置为B％，这样，e便等于w×B％，f等于h×B％。
204、根据绘制宽度和绘制高度，在目标界面布局界面交互层。
在本申请实施例中，界面交互层是设置有目标界面的可操作区域的图层，包括可点击操作区域，通常为矩形。其中，用户经常使用的高频操作区域分布在目标设备屏幕的两侧，在以百分比定位的规则中，随着目标设备屏幕的宽度增加，高频操作区域的面积也会根据当前标设备屏幕的尺寸的百分比向内收缩，使其一直分布在最佳交互位置。例如，参见图2B，屏幕宽度为16厘米、30厘米、4厘米的设备屏幕的高频操作区域为图2B中三个矩形中的阴影部分所示，很明显可以看出，随着目标设备屏幕的宽度增加，高频操作区域的面积会向内收缩。
因此，为了对最佳交互位置予以限制，在本申请实施例中，设置了第一定位系数和第二定位系数。其中，第一定位系数用于保留两侧安全距离及定位最佳交互位置，通过大量的实验后，将第一定位系数的取值设置为0.2。第二定位系数用于保留目标设备屏幕的上下两边的安全距离，防止误触目标设备屏幕上的按键，也能够防止一些配备有曲面屏的终端设备发生信息展示不全或交互区误触的情况，通过大量的实验将第二定位系数的取值设置为10。这样，在目标界面布局界面交互层时，需要分别计算界面交互层的四条边的位置信息，进而在当前的设备中对界面交互层进行定位布局。
在本申请实施例中，将界面交互层的四条边的位置信息设为左边缘定位信息、顶部边缘定位信息、右边缘定位信息以及底部边缘定位信息。其中，左边缘定位信息用L表示，顶部边缘定位信息用T表示，右边缘定位信息用R表示，底部边缘定位信息用B表示，绘制宽度用w表示，绘制高度用h表示，基础分辨率中的标准屏幕高度用m表示，标准屏幕宽度用n表示，第 一定位系数用α表示，第二定位系数用β表示，将预设系数取值为0.2，具体计算四条边的位置信息的过程如下：计算绘制宽度与第一定位系数的第三乘积、标准屏幕宽度与预设系数的第四乘积，将第三乘积和第四乘积的差值作为左边缘定位信息，也即L＝w×α-(m×0.2)。将第二定位系数设置为顶部边缘定位信息，也即T＝β。计算绘制宽度与系数差值的第五乘积，将第五乘积和第四乘积的和值作为右边缘定位信息，系数差值为默认取值与预设系数的差值，默认取值在本申请中设置为1，这样，R＝w×(1-α)+(m×0.2)。计算绘制高度与第二定位系数的差值作为底部边缘定位信息，也即B＝h-β。之后，便可以按照左边缘定位信息、顶部边缘定位信息、右边缘定位信息和底部边缘定位信息，布局界面交互层。
205、基于文字布局，确定第二绝对位置和第二相对位置，按照第二绝对位置和第二相对位置，将界面交互层划分为列表区、信息展示区以及页签展示区。
在本申请实施例中，界面交互层上通常会展示一些信息，来引导用户对某个区域进行触发，且展示信息也会采取不同的方式，比如列表展示、罗列展示以及页签文字展示等等，因此，实际上将界面交互层进行区域模块化后，可将界面交互层划分为列表区、信息展示区以及页签展示区，后续需要按照不同的填充方式分别向列表区、信息展示区以及页签展示区填充相关的界面信息。
其中，在目标界面的文字布局中，指示有第二绝对位置和第二相对位置，与上述步骤203中的第一绝对位置和第一相对位置同理，第二绝对位置和第二相对位置也指示了各个区的某个边缘停靠在目标设备屏幕的哪个边缘的具体哪个位置或者停靠在百分之多少的位置。在对列表区进行划分时，列表区通常设置在整个目标界面的最左侧，因此，根据第二绝对位置的指示，在目标设备屏幕确定列表区顶边缘、列表区左边缘以及列表区下边缘，基于绘制宽度与第二相对位置的乘积输出列表区右边缘，并按照列表区顶边缘、列表区左边缘、列表区下边缘和列表区右边缘，确定列表区。也就是说，在对列表区进行适配时，列表区的四边是基于界面交互层做二次定位得出的，列表区的左、上、下边缘均为界面交互层的边缘停靠，右侧为界面交互层的百 分比定位。
进一步地，在对信息展示区进行划分时，信息展示区通常设置在列表区的右侧，因此，根据第二绝对位置的指示，在目标设备屏幕确定信息展示区顶边缘以及信息展示区下边缘，基于绘制宽度与第二相对位置的乘积输出信息展示区右边缘和信息展示区左边缘，并按照信息展示区顶边缘、信息展示区下边缘、信息展示区右边缘和信息展示区左边缘，确定信息展示区。也就是说，在对信息展示区进行适配时，信息展示区的左右两边基于界面交互层做百分比定位，信息展示区的上下两边为界面交互层的边缘停靠。
进一步地，在对页签展示区进行划分时，页签展示区通常设置在列表区的右侧，也即整个目标界面的最右侧，因此，根据第二绝对位置的指示，在目标设备屏幕确定页签展示区顶边缘、页签展示区右边缘以及页签展示区下边缘，基于绘制宽度与第二相对位置的乘积输出页签展示区左边缘，并按照页签展示区顶边缘、页签展示区右边缘、页签展示区下边缘和页签展示区左边缘，确定页签展示区。也就是说，在对页签展示区进行适配时，基于界面交互层的右边和上边做边缘停靠，页签展示区的左边基于界面交互层做百分比定位。
需要说明的是，本步骤中进行边缘停靠以及百分比定位的过程与上述步骤203中基于第一绝对位置和第一相对位置进行边缘停靠以及百分比定位的过程一致，此处不再进行赘述。通过上述过程进行区域的划分后，便可以得到图2C所示的列表区、信息展示区以及页签展示区。其中，采用上述过程对超宽屏的设备进行适配后的效果表现为列表区拉宽，设备屏幕的两侧会让出交互规避区域，列表区、信息展示区以及页签展示区的间隔变大。而对于平板电脑类的终端设备而言，采用上述过程对超宽屏的设备进行适配后的效果表现为列表区高度拉高，展示更多列表内容，信息展示区整体高度拉高，页签展示区的布局按照百分比定位。
206、获取界面信息包括的至少一个列表项目，根据列表配置要求，将至少一个列表项目填充至列表区。
在本申请实施例中，完成了区域的划分后，需要对各个区域进行界面信息的填充。对于列表区来说，通常对列表区进行信息填充采用的方式具有一 定的约束，也即通常设置有列表配置要求，列表配置要求会规定列表中每项内容的尺寸，或者列表的一行/一列放置多少个项目等等，因此，在向列表区进行信息的填充时，需要获取界面信息包括的至少一个列表项目，根据列表配置要求，将至少一个列表项目填充至列表区。
其中，列表配置要求中规定的内容可能分为两种情况，一种情况是列表配置要求规定了预设列表项目尺寸，也即单个列表项的宽度，这样，首先需要根据列表区的列表宽度与预设列表项目尺寸的比值输出每列项目数，该列表宽度也即进行适应性调整后的宽度。随后，计算每列项目数与预设列表项目尺寸的第六乘积，计算列表宽度与第六乘积的第一乘积差值，并根据第一乘积差值与每列项目数的比值输出列表项间隔。最后，按照每列项目数和列表项间隔，将至少一个列表项目进行填充。例如，假设列表宽度用List(列表)表示，预设列表项目尺寸用Item(项目)表示，每列项目数用Num(数量)表示，列表项间隔用P表示，则通过上述过程计算得到的每列项目数Num＝List/Item，对List/Item进行向下取整，得到的值作为Num的取值。随后，计算列表项间隔P＝[List–(Num×Item)]/Num，对[List–(Num×Item)]/Num进行向下取整，得到的值作为P的取值。这样，根据上述过程进行列表填充，也即列表每行放置Num个列表项目，每个列表项目之间的间隔为P。
另一种情况是列表配置要求规定了预设每列项目数和预设列表项间隔，这样，首先计算预设每列项目数与默认取值的项目差值，计算项目差值与预设列表项间隔的第七乘积。随后，计算列表宽度与第七乘积的第二乘积差值，根据第二乘积差值与预设每列项目数的比值输出列表项目尺寸。最后，按照预设每列项目数、预设列表项间隔以及列表项目尺寸，将至少一个列表项目进行填充。以列表宽度用List表示，列表项目尺寸用Item表示，预设每列项目数用Num表示，预设列表项间隔用P表示为例进行说明，则通过上述过程计算得到的列表项目尺寸用Item＝{List–[(Num-1)×P]}/Num。这样，根据上述过程进行列表填充，也即列表每行放置放置Num个列表项目，每个列表项目尺寸为Item，每个列表项目之间的间隔为P。
207、将界面信息包括的文字描述填充至信息展示区，将界面信息包括 的页签元素填充至页签展示区。
在本申请实施例中，完成了列表区的填充后，将界面信息包括的文字描述填充至信息展示区，将界面信息包括的页签元素填充至页签展示区，这样，就实现了按照目标界面中的文字布局，将目标界面中的界面信息填充至界面交互层，完成对目标界面的调整。
综上所述，上述步骤201至步骤207中的界面调整过程如下：
参见图2D，根据目前常见的终端设备，设置一个基础分辨率。当检测到针对目标设备屏幕的目标界面展示请求时，获取该目标设备屏幕的屏幕宽高比值，将屏幕宽高比值与基础分辨率进行比对，判断屏幕宽高比值是否大于等于基础分辨率。如果确定屏幕宽高比值大于等于基础分辨率，则采用宽度适配模型纵向对目标界面进行动态布局，将基础分辨率的标准屏幕高度设置为绘制高度，计算屏幕宽高比值与绘制高度的乘积作为绘制宽度，进而按照绘制宽度以及绘制高度，将界面背景层纵向拉伸或平铺填充，将界面装饰层上下、居中或百分比停靠，将界面交互层通过百分比纵向自适应定位。而如果确定屏幕宽高比值并没有大于等于基础分辨率，则采用高度适配模式横向对目标界面进行动态布局，将基础分辨率的标准屏幕宽度设置为绘制宽度，计算屏幕宽高比值的倒数与绘制宽度的乘积作为绘制高度，进而按照绘制宽度以及绘制高度，将界面背景层左右拉伸或平铺填充，将界面装饰层两侧、居中或百分比停靠，将界面交互层通过百分比横向自适应定位。需要说明的是，界面背景层、界面装饰层以及界面交互层的层级关系如图2E所示，其中，对应的层级关系为：界面背景层<界面装饰层<界面交互层，界面交互层中填充有界面中的各种文字信息。
本申请实施例提供的方法，根据目标设备屏幕的屏幕宽高比值，计算绘制宽度和绘制高度，进而基于绘制宽度和绘制高度，将填充有目标界面的界面背景的界面背景层的尺寸调整为绘制宽度和绘制高度，并确定包括目标界面的装饰图的界面装饰层在目标界面的定位信息，按照定位信息进行停靠，并在目标界面布局设置有目标界面的可操作区域的界面交互层，进而按照目标界面中的文字布局，将目标界面中的界面信息填充至界面交互层，完成对目标界面的调整，根据请求进行界面展示的终端设备的设备屏幕尺寸，实现 自适应完成界面的调整，无需判断终端设备是否在黑名单中，且通过自身界面的布局规划，也无需进行单边缩进或增加填充图，简化了界面的调整过程，避免出现显示的界面在屏幕中重心偏移且画面不平衡的问题，保证显示的界面的画面美观，为使用不同终端设备的用户提供相同效果的界面展示。
进一步地，作为图1所述方法的具体实现，本申请实施例提供了一种界面调整装置，如图3A所示，所述装置包括：该第一计算模块301，调整模块302，第二计算模块303，布局模块304和填充模块305。
该第一计算模块301，用于当检测到针对目标设备屏幕的目标界面展示请求时，根据所述目标设备屏幕的屏幕宽高比值，计算绘制宽度和绘制高度；
该调整模块302，用于将所述目标界面的界面背景层的尺寸调整为所述绘制宽度和所述绘制高度，所述界面背景层是填充有所述目标界面的界面背景的图层；
该第二计算模块303，用于基于所述绘制宽度和所述绘制高度对界面装饰层在所述目标界面的位置参数进行计算，得到定位信息，将所述界面装饰层按照所述定位信息停靠在所述目标界面，所述界面装饰层是包括所述目标界面的装饰图的图层；
该布局模块304，用于根据所述绘制宽度和所述绘制高度，在所述目标界面布局界面交互层，所述界面交互层是设置有所述目标界面的可操作区域的图层；
该填充模块305，用于按照所述目标界面中的文字布局，将所述目标界面中的界面信息填充至所述界面交互层，完成对所述目标界面的调整。
在具体的应用场景中，如图3B所示，该第一计算模块301，包括：读取单元3011，第一计算单元3012和第二计算单元3013。
该读取单元3011，用于读取所述目标设备屏幕的实际屏幕宽度和实际屏幕高度，计算所述实际屏幕宽度和所述实际屏幕高度的比值作为所述屏幕宽高比值，将所述屏幕宽高比值与基础分辨率进行比对，所述基础分辨率为标准屏幕宽度与标准屏幕高度的比值；
该第一计算单元3012，用于若所述屏幕宽高比值大于等于所述基础分辨 率，则将所述标准屏幕高度设置为所述绘制高度，计算所述屏幕宽高比值与所述绘制高度的乘积作为所述绘制宽度；
该第二计算单元3013，用于若所述屏幕宽高比值小于所述基础分辨率，则将所述标准屏幕宽度设置为所述绘制宽度，计算所述屏幕宽高比值的倒数与所述绘制宽度的乘积作为所述绘制高度。
在具体的应用场景中，该调整模块302，用于确定预设调整方式，所述预设调整方式至少为拉伸调整或平铺填充调整中的任一种；基于所述预设调整方式，对所述界面背景层的尺寸进行调整，控制所述界面背景层的尺寸与所述绘制宽度和所述绘制高度一致。
在具体的应用场景中，如图3C所示，该第二计算模块303，包括：获取单元3031，第一计算单元3032和第二计算单元3033。
该获取单元3031，用于获取所述界面装饰层在所述目标界面的所述位置参数；
该第一计算单元3032，用于若所述位置参数指示了所述界面装饰层距离所述目标设备屏幕的边缘的第一绝对位置，则根据所述界面装饰层在所述目标界面的所处位置、所述绘制宽度、所述绘制高度和所述第一绝对位置进行计算，确定第一横向绝对位置信息和第一纵向绝对位置信息，将所述第一横向绝对位置信息和所述第一纵向绝对位置信息作为所述定位信息；
该第二计算单元3033，用于若所述位置参数指示了所述界面装饰层与所述目标设备屏幕的边缘的第一相对位置，则计算所述绘制宽度与所述第一相对位置的第一乘积、所述绘制宽度与所述第一相对位置的第二乘积，将所述第一乘积作为第一横向相对位置信息，将所述第二乘积作为第一纵向相对位置信息，将所述第一横向相对位置信息和所述第一纵向相对位置信息作为所述定位信息。
在具体的应用场景中，该第一计算单元3032，用于当所述界面装饰层在所述目标界面的所处位置指示停靠在所述目标设备屏幕的左边缘时，将所述第一绝对位置设置为所述第一横向绝对位置信息；当所述界面装饰层在所述目标界面的所处位置指示停靠在所述目标设备屏幕的右边缘时，计算所述绘制宽度与所述第一绝对位置的差值作为所述第一横向绝对位置信息；当所述 界面装饰层在所述目标界面的所处位置指示停靠在所述目标设备屏幕的顶部边缘时，将所述第一绝对位置设置为所述第一纵向绝对位置信息；当所述界面装饰层在所述目标界面的所处位置指示停靠在所述目标设备屏幕的底部边缘时，计算所述绘制高度与所述第一绝对位置的差值作为所述第一纵向绝对位置信息。
在具体的应用场景中，该布局模块304，用于计算所述绘制宽度与第一定位系数的第三乘积、标准屏幕宽度与预设系数的第四乘积，将所述第三乘积和所述第四乘积的差值作为左边缘定位信息；将所述第二定位系数设置为顶部边缘定位信息；计算所述绘制宽度与系数差值的第五乘积，将所述第五乘积和所述第四乘积的和值作为右边缘定位信息，所述系数差值为默认取值与所述预设系数的差值；计算所述绘制高度与所述第二定位系数的差值作为底部边缘定位信息；按照所述左边缘定位信息、所述顶部边缘定位信息、所述右边缘定位信息和所述底部边缘定位信息，布局所述界面交互层。
在具体的应用场景中，如图3D所示，该填充模块305，包括：确定单元3051，划分单元3052，第一填充单元3053和第二填充单元3054。
该确定单元3051，用于基于所述文字布局，确定第二绝对位置和第二相对位置；
该划分单元3052，用于按照所述第二绝对位置和所述第二相对位置，将所述界面交互层划分为列表区、信息展示区以及页签展示区；
该第一填充单元3053，用于获取所述界面信息包括的至少一个列表项目，根据列表配置要求，将所述至少一个列表项目填充至所述列表区；
该第二填充单元3054，用于将所述界面信息包括的文字描述填充至所述信息展示区，将所述界面信息包括的页签元素填充至所述页签展示区。
在具体的应用场景中，该划分单元3052，用于根据所述第二绝对位置的指示，在所述目标设备屏幕确定列表区顶边缘、列表区左边缘以及列表区下边缘，基于所述绘制宽度与所述第二相对位置的乘积输出列表区右边缘，并按照所述列表区顶边缘、所述列表区左边缘、所述列表区下边缘和所述列表区右边缘，确定所述列表区；根据所述第二绝对位置的指示，在所述目标设备屏幕确定信息展示区顶边缘以及信息展示区下边缘，基于所述绘制宽度与 所述第二相对位置的乘积输出信息展示区右边缘和信息展示区左边缘，并按照所述信息展示区顶边缘、所述信息展示区下边缘、所述信息展示区右边缘和所述信息展示区左边缘，确定所述信息展示区；根据所述第二绝对位置的指示，在所述目标设备屏幕确定页签展示区顶边缘、页签展示区右边缘以及页签展示区下边缘，基于所述绘制宽度与所述第二相对位置的乘积输出页签展示区左边缘，并按照所述页签展示区顶边缘、所述页签展示区右边缘、所述页签展示区下边缘和所述页签展示区左边缘，确定所述页签展示区。
在具体的应用场景中，该第一填充单元3053，用于若所述列表配置要求规定了预设列表项目尺寸，根据所述列表区的列表宽度与所述预设列表项目尺寸的比值输出每列项目数；计算所述每列项目数与所述预设列表项目尺寸的第六乘积，计算所述列表宽度与所述第六乘积的第一乘积差值；根据所述第一乘积差值与所述每列项目数的比值输出列表项间隔；按照所述每列项目数和所述列表项间隔，将所述至少一个列表项目进行填充。
在具体的应用场景中，该第一填充单元3053，还用于若所述列表配置要求规定了预设每列项目数和预设列表项间隔，则计算所述预设每列项目数与默认取值的项目差值，计算所述项目差值与所述预设列表项间隔的第七乘积；计算所述列表宽度与所述第七乘积的第二乘积差值，根据所述第二乘积差值与所述预设每列项目数的比值输出列表项目尺寸；按照所述预设每列项目数、所述预设列表项间隔以及所述列表项目尺寸，将所述至少一个列表项目进行填充。
本申请实施例提供的装置，根据目标设备屏幕的屏幕宽高比值，计算绘制宽度和绘制高度，进而基于绘制宽度和绘制高度，将填充有目标界面的界面背景的界面背景层的尺寸调整为绘制宽度和绘制高度，并确定包括目标界面的装饰图的界面装饰层在目标界面的定位信息，按照定位信息进行停靠，并在目标界面布局设置有目标界面的可操作区域的界面交互层，进而按照目标界面中的文字布局，将目标界面中的界面信息填充至界面交互层，完成对目标界面的调整，根据请求进行界面展示的终端设备的设备屏幕尺寸，实现自适应完成界面的调整，无需判断终端设备是否在黑名单中，且通过自身界面的布局规划，也无需进行单边缩进或增加填充图，简化了界面的调整过程， 避免出现显示的界面在屏幕中重心偏移且画面不平衡的问题，保证显示的界面的画面美观，为使用不同终端设备的用户提供相同效果的界面展示。
本发明的各个部件实施例可以以硬件实现，或者以在一个或者多个处理器上运行的软件模块实现，或者以它们的组合实现。本领域的技术人员应当理解，可以在实践中使用微处理器或者数字信号处理器(DSP)来实现根据本发明实施例的界面调整设备中的一些或者全部部件的一些或者全部功能。本发明还可以实现为用于执行这里所描述的方法的一部分或者全部的设备或者装置程序(例如，计算机程序和计算机程序产品)。这样的实现本发明的程序可以存储在计算机可读介质上，或者可以具有一个或者多个信号的形式。这样的信号可以从因特网网站上下载得到，或者在载体信号上提供，或者以任何其他形式提供。
例如，图4示出了可以实现根据本发明的界面调整的服务器，例如应用服务器。该服务器传统上包括处理器410和以存储器420形式的计算机程序产品或者计算机可读介质。存储器420可以是诸如闪存、EEPROM(电可擦除可编程只读存储器)、EPROM、硬盘或者ROM之类的电子存储器。存储器420具有存储用于执行上述方法中的任何方法步骤的程序代码431的存储空间430。例如，存储程序代码的存储空间430可以存储分别用于实现上面的方法中的各种步骤的各个程序代码431。这些程序代码可以从一个或者多个计算机程序产品中读出或者写入到这一个或者多个计算机程序产品中。这些计算机程序产品包括诸如硬盘，紧致盘(CD)、存储卡或者软盘之类的程序代码载体。这样的计算机程序产品通常为如参考图5所述的便携式或者固定存储单元。该存储单元可以具有与图4的服务器中的存储器420类似布置的存储段、存储空间等。程序代码可以以适当形式进行压缩。通常，存储单元存储有用于执行本发明的方法步骤的计算机可读代码431’，即可以由例如诸如410之类的处理器读取的代码，这些代码当由服务器运行时，导致该服务器执行上面所描述的方法中的各个步骤。
本文中所称的“一个实施例”、“实施例”或者“一个或者多个实施例”意味着，结合实施例描述的特定特征、结构或者特性包括在本发明的至少一个实施例中。此外，请注意，这里“在一个实施例中”的词语例子不一定全指同一个实施例。
在此处所提供的说明书中，说明了大量具体细节。然而，能够理解，本发明的实施例可以在没有这些具体细节的情况下被实践。在一些实例中，并未详细示出公知的方法、结构和技术，以便不模糊对本说明书的理解。
应该注意的是上述实施例对本发明进行说明而不是对本发明进行限制，并且本领域技术人员在不脱离所附权利要求的范围的情况下可设计出替换实施例。在权利要求中，不应将位于括号之间的任何参考符号构造成对权利要求的限制。单词“包含”不排除存在未列在权利要求中的元件或步骤。位于元件之前的单词“一”或“一个”不排除存在多个这样的元件。本发明可以借助于包括有若干不同元件的硬件以及借助于适当编程的计算机来实现。在列举了若干装置的单元权利要求中，这些装置中的若干个可以是通过同一个硬件项来具体体现。单词第一、第二、以及第三等的使用不表示任何顺序。可将这些单词解释为名称。此外，还应当注意，本说明书中使用的语言主要是为了可读性和教导的目的而选择的，而不是为了解释或者限定本发明的主题而选择的。因此，在不偏离所附权利要求书的范围和精神的情况下，对于本技术领域的普通技术人员来说许多修改和变更都是显而易见的。对于本发明的范围，对本发明所做的公开是说明性的，而非限制性的，本发明的范围由所附权利要求书限定。

Claims (13)

  1. 一种界面调整方法，包括：
    当检测到针对目标设备屏幕的目标界面展示请求时，根据所述目标设备屏幕的屏幕宽高比值，计算绘制宽度和绘制高度；
    将所述目标界面的界面背景层的尺寸调整为所述绘制宽度和所述绘制高度，所述界面背景层是填充有所述目标界面的界面背景的图层；
    基于所述绘制宽度和所述绘制高度对界面装饰层在所述目标界面的位置参数进行计算，得到定位信息，将所述界面装饰层按照所述定位信息停靠在所述目标界面，所述界面装饰层是包括所述目标界面的装饰图的图层；
    根据所述绘制宽度和所述绘制高度，在所述目标界面布局界面交互层，所述界面交互层是设置有所述目标界面的可操作区域的图层；
    按照所述目标界面中的文字布局，将所述目标界面中的界面信息填充至所述界面交互层，完成对所述目标界面的调整。
  2. 根据权利要求1所述的方法，其特征在于，所述根据所述目标设备屏幕的屏幕宽高比值，计算绘制宽度和绘制高度，包括：
    读取所述目标设备屏幕的实际屏幕宽度和实际屏幕高度，计算所述实际屏幕宽度和所述实际屏幕高度的比值作为所述屏幕宽高比值，将所述屏幕宽高比值与基础分辨率进行比对，所述基础分辨率为标准屏幕宽度与标准屏幕高度的比值；
    若所述屏幕宽高比值大于等于所述基础分辨率，则将所述标准屏幕高度设置为所述绘制高度，计算所述屏幕宽高比值与所述绘制高度的乘积作为所述绘制宽度；
    若所述屏幕宽高比值小于所述基础分辨率，则将所述标准屏幕宽度设置为所述绘制宽度，计算所述屏幕宽高比值的倒数与所述绘制宽度的乘积作为所述绘制高度。
  3. 根据权利要求1所述的方法，其特征在于，所述将所述目标界面的界面背景层的尺寸调整为所述绘制宽度和所述绘制高度，包括：
    确定预设调整方式，所述预设调整方式至少为拉伸调整或平铺填充调整中的任一种；
    基于所述预设调整方式，对所述界面背景层的尺寸进行调整，控制所述界面背景层的尺寸与所述绘制宽度和所述绘制高度一致。
  4. 根据权利要求1所述的方法，其特征在于，所述基于所述绘制宽度和所述绘制高度对界面装饰层在所述目标界面的位置参数进行计算，得到定位信息，包括：
    获取所述界面装饰层在所述目标界面的所述位置参数；
    若所述位置参数指示了所述界面装饰层距离所述目标设备屏幕的边缘的第一绝对位置，则根据所述界面装饰层在所述目标界面的所处位置、所述绘制宽度、所述绘制高度和所述第一绝对位置进行计算，确定第一横向绝对位置信息和第一纵向绝对位置信息，将所述第一横向绝对位置信息和所述第一纵向绝对位置信息作为所述定位信息；
    若所述位置参数指示了所述界面装饰层与所述目标设备屏幕的边缘的第一相对位置，则计算所述绘制宽度与所述第一相对位置的第一乘积、所述绘制宽度与所述第一相对位置的第二乘积，将所述第一乘积作为第一横向相对位置信息，将所述第二乘积作为第一纵向相对位置信息，将所述第一横向相对位置信息和所述第一纵向相对位置信息作为所述定位信息。
  5. 根据权利要求4所述的方法，其特征在于，所述根据所述界面装饰层在所述目标界面的所处位置、所述绘制宽度、所述绘制高度和所述第一绝对位置进行计算，确定第一横向绝对位置信息和第一纵向绝对位置信息，包括：
    当所述界面装饰层在所述目标界面的所处位置指示停靠在所述目标设备屏幕的左边缘时，将所述第一绝对位置设置为所述第一横向绝对位置信息；
    当所述界面装饰层在所述目标界面的所处位置指示停靠在所述目标设备屏幕的右边缘时，计算所述绘制宽度与所述第一绝对位置的差值作为所述第一横向绝对位置信息；
    当所述界面装饰层在所述目标界面的所处位置指示停靠在所述目标设备屏幕的顶部边缘时，将所述第一绝对位置设置为所述第一纵向绝对位置信息；
    当所述界面装饰层在所述目标界面的所处位置指示停靠在所述目标设备屏幕的底部边缘时，计算所述绘制高度与所述第一绝对位置的差值作为所述第一纵向绝对位置信息。
  6. 根据权利要求1所述的方法，其特征在于，所述根据所述绘制宽度和所述绘制高度，在所述目标界面布局界面交互层，包括：
    计算所述绘制宽度与第一定位系数的第三乘积、标准屏幕宽度与预设系数的第四乘积，将所述第三乘积和所述第四乘积的差值作为左边缘定位信息；
    将所述第二定位系数设置为顶部边缘定位信息；
    计算所述绘制宽度与系数差值的第五乘积，将所述第五乘积和所述第四乘积的和值作为右边缘定位信息，所述系数差值为默认取值与所述预设系数的差值；
    计算所述绘制高度与所述第二定位系数的差值作为底部边缘定位信息；
    按照所述左边缘定位信息、所述顶部边缘定位信息、所述右边缘定位信息和所述底部边缘定位信息，布局所述界面交互层。
  7. 根据权利要求1所述的方法，其特征在于，所述按照所述目标界面中的文字布局，将所述目标界面中的界面信息填充至所述界面交互层，包括：
    基于所述文字布局，确定第二绝对位置和第二相对位置；
    按照所述第二绝对位置和所述第二相对位置，将所述界面交互层划分为列表区、信息展示区以及页签展示区；
    获取所述界面信息包括的至少一个列表项目，根据列表配置要求，将所述至少一个列表项目填充至所述列表区；
    将所述界面信息包括的文字描述填充至所述信息展示区，将所述界面信息包括的页签元素填充至所述页签展示区。
  8. 根据权利要求7所述的方法，其特征在于，所述按照所述第二绝对位置和所述第二相对位置，将所述界面交互层划分为列表区、信息展示区以及页签展示区，包括：
    根据所述第二绝对位置的指示，在所述目标设备屏幕确定列表区顶边缘、列表区左边缘以及列表区下边缘，基于所述绘制宽度与所述第二相对位 置的乘积输出列表区右边缘，并按照所述列表区顶边缘、所述列表区左边缘、所述列表区下边缘和所述列表区右边缘，确定所述列表区；
    根据所述第二绝对位置的指示，在所述目标设备屏幕确定信息展示区顶边缘以及信息展示区下边缘，基于所述绘制宽度与所述第二相对位置的乘积输出信息展示区右边缘和信息展示区左边缘，并按照所述信息展示区顶边缘、所述信息展示区下边缘、所述信息展示区右边缘和所述信息展示区左边缘，确定所述信息展示区；
    根据所述第二绝对位置的指示，在所述目标设备屏幕确定页签展示区顶边缘、页签展示区右边缘以及页签展示区下边缘，基于所述绘制宽度与所述第二相对位置的乘积输出页签展示区左边缘，并按照所述页签展示区顶边缘、所述页签展示区右边缘、所述页签展示区下边缘和所述页签展示区左边缘，确定所述页签展示区。
  9. 根据权利要求7所述的方法，其特征在于，所述根据列表配置要求，将所述至少一个列表项目填充至所述列表区，包括：
    若所述列表配置要求规定了预设列表项目尺寸，根据所述列表区的列表宽度与所述预设列表项目尺寸的比值输出每列项目数；
    计算所述每列项目数与所述预设列表项目尺寸的第六乘积，计算所述列表宽度与所述第六乘积的第一乘积差值；
    根据所述第一乘积差值与所述每列项目数的比值输出列表项间隔；
    按照所述每列项目数和所述列表项间隔，将所述至少一个列表项目进行填充。
  10. 根据权利要求9所述的方法，还包括：
    若所述列表配置要求规定了预设每列项目数和预设列表项间隔，则计算所述预设每列项目数与默认取值的项目差值，计算所述项目差值与所述预设列表项间隔的第七乘积；
    计算所述列表宽度与所述第七乘积的第二乘积差值，根据所述第二乘积差值与所述预设每列项目数的比值输出列表项目尺寸；
    按照所述预设每列项目数、所述预设列表项间隔以及所述列表项目尺寸，将所述至少一个列表项目进行填充。
  11. 一种界面调整装置，包括：
    第一计算模块，用于当检测到针对目标设备屏幕的目标界面展示请求时，根据所述目标设备屏幕的屏幕宽高比值，计算绘制宽度和绘制高度；
    调整模块，用于将所述目标界面的界面背景层的尺寸调整为所述绘制宽度和所述绘制高度，所述界面背景层是填充有所述目标界面的界面背景的图层；
    第二计算模块，用于基于所述绘制宽度和所述绘制高度对界面装饰层在所述目标界面的位置参数进行计算，得到定位信息，将所述界面装饰层按照所述定位信息停靠在所述目标界面，所述界面装饰层是包括所述目标界面的装饰图的图层；
    布局模块，用于根据所述绘制宽度和所述绘制高度，在所述目标界面布局界面交互层，所述界面交互层是设置有所述目标界面的可操作区域的图层；
    填充模块，用于按照所述目标界面中的文字布局，将所述目标界面中的界面信息填充至所述界面交互层，完成对所述目标界面的调整。
  12. 一种计算机程序，包括计算机可读代码，其特征在于，当所述计算机可读代码在服务器上运行时，导致所述服务器执行根据权利要求1-10中的任一个所述的界面调整方法。
  13. 一种计算机可读介质，其特征在于，其中存储了如权利要求12所述的计算机程序。
PCT/CN2020/132061 2020-08-21 2020-11-27 界面调整方法、装置、计算机程序及计算机可读介质 WO2022036917A1 (zh)

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN202010851700.7A CN112099887B (zh) 2020-08-21 2020-08-21 界面调整方法、装置、计算机设备及计算机可读存储介质
CN202010851700.7 2020-08-21

Publications (1)

Publication Number Publication Date
WO2022036917A1 true WO2022036917A1 (zh) 2022-02-24

Family

ID=73754602

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2020/132061 WO2022036917A1 (zh) 2020-08-21 2020-11-27 界面调整方法、装置、计算机程序及计算机可读介质

Country Status (2)

Country Link
CN (2) CN114090149B (zh)
WO (1) WO2022036917A1 (zh)

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN115079907A (zh) * 2021-03-10 2022-09-20 花瓣云科技有限公司 一种应用程序的显示方法及电子设备
CN116204184A (zh) * 2023-04-28 2023-06-02 深圳华龙讯达信息技术股份有限公司 一种提高页面风格适配的ui编辑方法、系统及存储介质
US11706927B2 (en) 2021-03-02 2023-07-18 Micron Technology, Inc. Memory devices and methods of forming memory devices

Families Citing this family (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112667343B (zh) * 2021-01-07 2024-03-01 苏州沁游网络科技有限公司 一种界面调整方法、装置、设备及存储介质
CN114090165A (zh) * 2021-11-24 2022-02-25 北京字节跳动网络技术有限公司 页面组件展示位置调整方法、装置、计算机设备及介质
CN114721620B (zh) * 2022-05-12 2022-09-20 北京搜狐新动力信息技术有限公司 一种数据处理方法及装置
CN117590982A (zh) * 2022-08-09 2024-02-23 荣耀终端有限公司 应用界面的显示方法、电子设备及存储介质

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN106844521A (zh) * 2016-12-29 2017-06-13 中国科学院电子学研究所苏州研究院 基于bs架构的跨终端三维数字地球交互方法
CN108279962A (zh) * 2017-12-26 2018-07-13 大唐软件技术股份有限公司 一种创建可视化数据显示界面的方法及装置
US20180300034A1 (en) * 2017-04-12 2018-10-18 Suzanne Kimberly Taylor Systems to improve how graphical user interfaces can present rendered worlds in response to varying zoom levels and screen sizes
CN110688506A (zh) * 2019-09-30 2020-01-14 北京金山安全软件有限公司 一种模板生成方法、装置、电子设备及存储介质

Family Cites Families (12)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US9292171B2 (en) * 2010-11-17 2016-03-22 International Business Machines Corporation Border menu for context dependent actions within a graphical user interface
CN102270109B (zh) * 2011-08-23 2014-04-02 上海网达软件股份有限公司 不同分辨率的用户界面的自转换方法及自转换系统
CN103885755A (zh) * 2012-12-19 2014-06-25 腾讯科技（深圳）有限公司 自绘控件的屏幕适配实现方法及实现装置
CN103440104A (zh) * 2013-08-22 2013-12-11 广东欧珀移动通信有限公司 显示内容缩放方法和系统
CN103970421B (zh) * 2014-05-23 2017-02-15 努比亚技术有限公司 一种移动终端的屏幕显示图案的调整方法
CN107168712B (zh) * 2017-05-19 2021-02-23 Oppo广东移动通信有限公司 界面绘制方法、移动终端及计算机可读存储介质
CN110262858A (zh) * 2018-03-12 2019-09-20 上海擎感智能科技有限公司 Ui控件自适应屏幕的方法、系统、存储介质及电子终端
CN108427546B (zh) * 2018-05-03 2022-03-08 深圳Tcl新技术有限公司 显示装置的全屏幕适配方法、显示装置及存储介质
CN109783181B (zh) * 2019-01-31 2019-12-20 掌阅科技股份有限公司 屏幕适配显示方法、电子设备及计算机存储介质
CN110314376A (zh) * 2019-06-04 2019-10-11 福建天晴数码有限公司 背景图片及背景光效的适配方法及计算机可读存储介质
CN111190672A (zh) * 2019-12-20 2020-05-22 深圳市优必选科技股份有限公司 电子设备的ui界面适配方法、电子设备和存储介质
CN111552530B (zh) * 2020-04-22 2024-04-12 北京完美赤金科技有限公司 用户界面的终端屏幕适配方法、装置及设备

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN106844521A (zh) * 2016-12-29 2017-06-13 中国科学院电子学研究所苏州研究院 基于bs架构的跨终端三维数字地球交互方法
US20180300034A1 (en) * 2017-04-12 2018-10-18 Suzanne Kimberly Taylor Systems to improve how graphical user interfaces can present rendered worlds in response to varying zoom levels and screen sizes
CN108279962A (zh) * 2017-12-26 2018-07-13 大唐软件技术股份有限公司 一种创建可视化数据显示界面的方法及装置
CN110688506A (zh) * 2019-09-30 2020-01-14 北京金山安全软件有限公司 一种模板生成方法、装置、电子设备及存储介质

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US11706927B2 (en) 2021-03-02 2023-07-18 Micron Technology, Inc. Memory devices and methods of forming memory devices
CN115079907A (zh) * 2021-03-10 2022-09-20 花瓣云科技有限公司 一种应用程序的显示方法及电子设备
CN116204184A (zh) * 2023-04-28 2023-06-02 深圳华龙讯达信息技术股份有限公司 一种提高页面风格适配的ui编辑方法、系统及存储介质

Also Published As

Publication number Publication date
CN114090149B (zh) 2023-08-18
CN114090149A (zh) 2022-02-25
CN112099887A (zh) 2020-12-18
CN112099887B (zh) 2021-12-17

Similar Documents

Publication Publication Date Title
WO2022036917A1 (zh) 界面调整方法、装置、计算机程序及计算机可读介质
US10310730B2 (en) Display device for controlling displaying of a window and method of controlling the same
US9766777B2 (en) Methods and apparatuses for window display, and methods and apparatuses for touch-operating an application
CN104503655B (zh) 应用程序界面显示控制方法及装置
CN102662566B (zh) 屏幕内容放大显示方法及终端
US10255227B2 (en) Computerized system and method for authoring, editing, and delivering an interactive social media video
US9183006B2 (en) Systems and methods for layout of graphic objects for electronic display, print or other output
US9530187B2 (en) Controlling element layout on a display
US7532753B2 (en) Method and system for specifying color of a fill area
CN107147940B (zh) 内容轮播的方法、装置、电子设备和存储介质
JP2015521763A (ja) 移動端末のデスクトップシステム、インタフェースインタラクション方法、装置、プログラム、及び記録媒体
CN105955599B (zh) 一种在电子设备上模拟文档阅读方式的实现方法
CN106775614A (zh) 智能pos界面布局方法及系统
WO2017114255A1 (zh) 一种针对投影图像的触控方法及装置
TW201301120A (zh) 電子書閱讀器及其翻頁控制方法
CN107741870B (zh) 终端、显示屏、以及控制显示屏显示的方法
CN105843485B (zh) 页面显示的方法及装置
CN109302629B (zh) 一种用于为图片切换画框的方法及显示终端
CN107678720B (zh) 终端、显示屏、以及控制显示屏显示的方法
WO2017097142A1 (zh) 界面操作的处理方法、装置和智能终端
JP2010218522A (ja) ブラウザのプラグインを用いるウェブページ表示方法
CN106873963B (zh) 用于形成计算机视频桌面的背景的方法及装置
WO2014019425A1 (zh) 一种在终端上横向布局列表部件的方法及装置
CN101001336A (zh) 一种电视机动态菜单的实现方法
US8988423B2 (en) Electronic album generating apparatus, stereoscopic image pasting apparatus, and methods and programs for controlling operation of same

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: 20950120

Country of ref document: EP

Kind code of ref document: A1

NENP Non-entry into the national phase

Ref country code: DE

122 Ep: pct application non-entry in european phase

Ref document number: 20950120

Country of ref document: EP

Kind code of ref document: A1