CN117891552A

CN117891552A - Interface display method and device, electronic equipment and readable storage medium

Info

Publication number: CN117891552A
Application number: CN202410074948.5A
Authority: CN
Inventors: 陈建新
Original assignee: Vivo Mobile Communication Co Ltd
Current assignee: Vivo Mobile Communication Co Ltd
Priority date: 2024-01-18
Filing date: 2024-01-18
Publication date: 2024-04-16

Abstract

The application discloses an interface display method, an interface display device, electronic equipment and a readable storage medium, belonging to the technical field of electronics, wherein the method comprises the following steps: acquiring a first display block of an application interface under the condition that the application interface is displayed on a first screen based on a first layout, wherein the display proportion of the first display block on the first screen based on the first layout is larger than the display proportion of the first display block on a second screen based on the first layout; adjusting the display proportion of the first display block based on a compression proportion to obtain drawing information of the first display block, wherein the compression proportion is determined based on display parameters of the first screen and the second screen; generating a second layout based on the drawing information, wherein the display proportion of the first display block on the first screen based on the second layout is smaller than the display proportion of the first display block on the first screen based on the first layout; and displaying the application interface on the first screen according to the second layout.

Description

Interface display method and device, electronic equipment and readable storage medium

Technical Field

The application belongs to the technical field of electronics, and particularly relates to an interface display method, an interface display device, electronic equipment and a readable storage medium.

Background

With the rapid development of electronic technology, electronic devices are widely used, and with the rapid development of electronic devices and the continuous enhancement of information digitalization trend, electronic devices with various screen sizes and resolutions are continuously emerging. However, application interfaces in electronic devices typically only design display adaptations at standard screen sizes and resolutions, and such single display adaptations may cause many display problems for applications on large screens (e.g., flat panels, folded screens, etc.).

Currently, display compatibility is generally performed by providing multiple sets of layout configurations and code logic for application interfaces with different screen sizes and resolutions, so that different layout configurations are loaded on the different screen sizes and resolutions and corresponding logic is executed, and the display mode is difficult to adapt to the electronic devices with the various screen sizes and resolutions which are currently and continuously emerging.

Disclosure of Invention

The embodiment of the application aims to provide an interface display method, an interface display device, electronic equipment and a readable storage medium, which can realize display compatibility of an application interface under different screen sizes and resolutions based on a set of layout configuration of the application interface.

In a first aspect, an embodiment of the present application provides an interface display method, where the method includes:

Acquiring a first display block of an application interface under the condition that the application interface is displayed on a first screen based on a first layout, wherein the display proportion of the first display block on the first screen based on the first layout is larger than the display proportion of the first display block on a second screen based on the first layout;

Adjusting the display proportion of the first display block based on a compression proportion to obtain drawing information of the first display block, wherein the compression proportion is determined based on display parameters of the first screen and the second screen;

Generating a second layout based on the drawing information, wherein the display proportion of the first display block on the first screen based on the second layout is smaller than the display proportion of the first display block on the first screen based on the first layout;

And displaying the application interface on the first screen according to the second layout.

In a second aspect, an embodiment of the present application provides an interface display apparatus, including:

The system comprises an acquisition module, a display module and a display module, wherein the acquisition module is used for acquiring a first display block of an application interface under the condition that the application interface is displayed on a first screen based on a first layout, and the display proportion of the first display block on the first screen based on the first layout is larger than the display proportion of the first display block on a second screen based on the first layout;

The proportion adjustment module is used for adjusting the display proportion of the first display block based on the compression proportion to obtain drawing information of the first display block, and the compression proportion is determined based on display parameters of the first screen and the second screen;

The generation module is used for generating a second layout based on the drawing information, and the display proportion of the first display block on the first screen based on the second layout is smaller than that on the first screen based on the first layout;

and the display module is used for displaying the application interface on the first screen according to the second layout.

In a third aspect, an embodiment of the present application provides an electronic device, including a processor, a memory, and a program or instructions stored on the memory and executable on the processor, where the program or instructions, when executed by the processor, implement the steps of the interface display method according to the first aspect.

In a fourth aspect, embodiments of the present application provide a readable storage medium having stored thereon a program or instructions which, when executed by a processor, implement the steps of the interface display method according to the first aspect.

In a fifth aspect, an embodiment of the present application provides a chip, where the chip includes a processor and a communication interface, where the communication interface is coupled to the processor, and the processor is configured to execute a program or instructions to implement the steps of the interface display method according to the first aspect.

In a sixth aspect, embodiments of the present application provide a computer program product stored in a storage medium, the program product being executable by at least one processor to implement the steps of the interface display method according to the first aspect.

In the embodiment of the application, under the condition that the display proportion of the application interface on the first screen is overlarge based on the first layout, the display proportion of the first display block is adjusted based on the compression proportion determined by the display parameters of the first screen and the second screen by acquiring the first display block with overlarge display proportion in the application interface, drawing information of the first display block is obtained, a second layout is generated based on the drawing information, and the application interface is displayed on the first screen according to the second layout. Therefore, on the basis of the first layout, display compatibility of the application interface under screens with different display parameters is achieved by optimizing the display proportion of the first display block of the local application interface.

Drawings

FIG. 1 is a flow chart of an interface display method provided by some embodiments of the application;

FIG. 2 is one of the schematics of the application interface displayed on the first screen based on the first layout;

FIG. 3 is one of the schematics of the application interface displayed on the first screen based on the second layout;

FIG. 4 is a schematic View of the View Tree structure;

FIG. 5 is a measurement schematic of View;

FIG. 6 is a schematic diagram of a View layout in a View Group;

FIG. 7 is a pictorial diagram of View;

FIG. 8 is a schematic diagram of a measurement height compression;

FIG. 9 is a schematic drawing of a high compression;

FIG. 10 is a schematic diagram of a View Tree of a first display block;

FIG. 11 is a second View of the first display block;

FIG. 12 is one of the display diagrams of the block of the View Tree on the first screen based on the first layout;

FIG. 13 is a flow chart for adjusting the display scale of View Group 3;

FIG. 14 is a schematic representation of the measurement of View Group3 after high compression;

FIG. 15 is a schematic diagram illustrating the third display block after being highly compressed;

FIG. 16 is a diagram showing a View Group3 after rendering width compression;

FIG. 17 is a second diagram of a block of View Tree displayed on the first screen based on the first layout;

FIG. 18 is a flow chart for adjusting the display scale of View Group 1;

FIG. 19 is a schematic diagram showing the measurement of View Group1 after high compression;

FIG. 20 is a schematic diagram showing the View Group1 after drawing a height compression and a width compression, respectively;

FIG. 21 is a schematic diagram showing the View Group1 after a rendering displacement in a first direction;

FIG. 22 is a second schematic diagram of an application interface displayed on a first screen based on a first layout;

FIG. 23 is a second schematic diagram of an application interface displayed on the first screen based on a second layout;

FIG. 24 is a schematic diagram of an interface display device according to some embodiments of the present application;

FIG. 25 is a schematic diagram of an electronic device provided by some embodiments of the application;

Fig. 26 is a schematic hardware structure of an electronic device according to some embodiments of the present application.

Detailed Description

The technical solutions of the embodiments of the present application will be clearly described below with reference to the drawings in the embodiments of the present application, and it is apparent that the described embodiments are some embodiments of the present application, but not all embodiments. All other embodiments, which are obtained by a person skilled in the art based on the embodiments of the present application, fall within the scope of protection of the present application.

The terms "first," "second," and the like in the description of the present application, are used for distinguishing between similar objects and not necessarily for describing a particular sequential or chronological order. It is to be understood that the data so used may be interchanged, as appropriate, such that embodiments of the present application may be implemented in sequences other than those illustrated or described herein, and that the objects identified by "first," "second," etc. are generally of a type, and are not limited to the number of objects, such as the first object may be one or more. In addition, "and/or" in the specification means at least one of the connected objects, and the character "/", generally means a relationship in which the associated objects are one kind of "or".

The interface display method provided by the embodiment of the application is described in detail below through specific embodiments and application scenes thereof with reference to the accompanying drawings.

Fig. 1 is a flowchart of an interface display method according to an embodiment of the present application, as shown in fig. 1, including the following steps:

Step 101, under the condition that an application interface is displayed on a first screen based on a first layout, acquiring a first display block of the application interface, wherein the display proportion of the first display block on the first screen based on the first layout is larger than that of the first display block on a second screen based on the first layout.

The application interface refers to a display interface of an application, and can be divided into a plurality of display blocks according to the content or the function of the application interface, and all the display blocks together form a complete application interface.

The first layout may be a layout determined by a layout configuration of a pre-stored application interface, and the second screen may be a screen normally displayed by the application interface based on the first layout, that is, the first layout is configured by adapting display parameters of the second screen.

The display parameters of the first screen and the second screen are different, for example, the sizes of the first screen and the second screen are different, and for example, the resolutions of the first screen and the second screen are different. Optionally, the first screen is a screen used for displaying the folded screen in an unfolded state, and the second screen is a screen used for displaying the folded screen in a folded state. In this scenario, if the folding screen is unfolded, the width of the screen for display will be widened, and the first layout is adapted to the screen for display of the application interface when the folding screen is folded, so that the same application interface may have a problem of display compatibility when the folding screen is unfolded based on the first layout.

Accordingly, in the case where the application interface is displayed on the first screen based on the first layout, for example, when the folding screen is unfolded, the first display area of the application interface may be acquired.

In some embodiments, the electronic device may pre-store the first display area of the application interface under different screen sizes and resolutions, and may obtain the screen size and resolution of the first screen, and query the first display area of the application interface under the screen size and resolution of the first screen.

For example, for an application interface, the electronic device stores the identifier of the first display area of the application interface when the folding screen is unfolded, and when the folding screen is unfolded, the identifier of the first display area of the application interface can be queried and obtained through the identifier of the application interface, so that the first display area of the application interface can be obtained.

In some embodiments, the display scale of the display area of the application interface may be determined by measuring the size of the display area of the application interface, which may be determined as the first display area for display areas with an excessive display scale.

And 102, adjusting the display proportion of the first display block based on the compression proportion to obtain the drawing information of the first display block, wherein the compression proportion is determined based on the display parameters of the first screen and the second screen.

The display parameter may be a screen size or a resolution. When the screen sizes of the first screen and the second screen are different, the compression ratio is equal to the screen size of the second screen/the screen size of the first screen. Alternatively, the compression ratio is equal to the screen width of the folding screen in the folded state divided by the screen width of the folding screen in the unfolded state.

The adjusting the display proportion of the first display block may refer to adjusting the display proportion of the interface element in the first display block, so as to achieve the purpose of reducing the display proportion of the interface element in the first display block.

The size and the position of the interface element in the first display block can be adjusted based on the compression ratio, so as to adjust the display ratio of the first display block and obtain the drawing information of the first display block. The drawing information may indicate a size and a position of the interface element in the first display area.

In a folding screen scene, the display problem of the application interface on the folding screen is that the display proportion of interface elements in some display blocks is overlarge, and for this phenomenon, the size and the position of the internal interface elements of the display blocks with overlarge display proportion can be adjusted based on the compression proportion so as to reduce the display proportion of the first display block.

And 103, generating a second layout based on the drawing information, wherein the display proportion of the first display block on the first screen based on the second layout is smaller than the display proportion of the first display block on the first screen based on the first layout.

And 104, displaying the application interface on the first screen according to the second layout.

In step 103, a second layout of the application interface displayed on the first screen may be regenerated based on the drawing information of the first display area and the drawing information of the normal display area of the application interface. The display proportion of the normal display block on the first screen based on the first layout can be equal to the display proportion of the normal display block on the second screen based on the first layout, and drawing information of the normal display block can be obtained from layout configuration of the first layout.

That is, in this embodiment, by adjusting the layout configuration of the application interface to the layout configuration of the first display block, a new layout adapted to the first screen display is generated based on the original layout configuration, so as to achieve the purpose that the application interface is compatible with the display of the application interface on the screen with different display parameters based on a set of layout configuration of the application interface.

In some embodiments, since the display proportion of the first display area of the application interface is reduced, the application interface may display more display area content of the application interface on the first screen when there are other areas to be displayed on the second screen. That is, more tiles in the application interface may be drawn on the first screen based on the second layout to display more tiles in the application interface on the first screen.

As shown in fig. 2 and 3, fig. 2 is a schematic diagram of an application interface displayed on a first screen based on a first layout, if the application interface is displayed on the first screen based on the first layout, it may display a normal display block 201, a normal display block 202 and a first display block 203, and the display proportion of interface elements in the first display block 203 is relatively large. Fig. 3 is a schematic diagram of an application interface displayed on a first screen based on a second layout, and for the first display area 203, the display scale of the interface element is reduced, and because the display scale of the interface element of the first display area 203 is reduced, the first screen may be free of some display space, so that more areas may be drawn on the first screen for display, such as the normal display area 204 and the normal display area 205 may be drawn on the first screen for display.

In this embodiment, when the display proportion of the application interface on the first screen is too large based on the first layout, the first display block with too large display proportion in the application interface is obtained, the display proportion of the first display block is adjusted based on the compression proportion determined by the display parameters of the first screen and the second screen, drawing information of the first display block is obtained, a second layout is generated based on the drawing information, and the application interface is displayed on the first screen according to the second layout. Therefore, on the basis of the first layout, display compatibility of the application interface under screens with different display parameters is achieved by optimizing the display proportion of the first display block of the local application interface.

Further, in the embodiment of the application, layout configuration adaptation is not required for various screen sizes, so that the cost of application development and maintenance can be reduced; the application interface is divided into blocks for adjustment, so that the method is more flexible and fine, can better cope with various scenes of different applications, and has strong universality; and only the first display block is adjusted, so that granularity is smaller, the intrusion degree of the application original layout is lower, and the application original layout appearance is kept to the greatest extent. For the scene of the folding screen, good display of the application interface can be realized on the folding screens with different screen sizes only by arranging a set of layout optimization logic in the frame layer.

The following describes how to adjust the display scale of the first display block based on the compression scale, and some terms are explained first.

View: for an Android system, the control is the most basic display element on an application interface, such as text, icons and the like, are all basic controls, and the expression mode of the control is View;

view Group: a set of views are organized together in a form to form a block, the block being organized by a View Group, which may include a plurality of views;

View Tree: the control Tree, all views on an application interface form a View Tree, as shown in fig. 4;

Measurement: for determining the width and height of the View, thereby determining the display size of the View, as shown in fig. 5;

Layout: for determining the relative position of View in the View Group, thereby determining the display position of View, as shown in fig. 6;

Drawing: determining the size and the position of the View according to the measurement and the layout, and finally displaying the View on a screen, as shown in FIG. 7;

measurement of compression: when measuring, compressing the width or height of the View, wherein the compression only changes the width or height of the current View during measuring, and the contained View does not follow the change; as shown in FIG. 8, when the measurement of View Group1 is highly compressed, the View contained in View Group1 will not follow the change;

Drawing and compressing: compressing the width or height of the View during drawing, and if the View contains other views, compressing the views of the lower layer along with the same proportion; as shown in fig. 9, when the View Group1 is highly compressed, the views contained in the View Group1 are compressed in the same proportion along with each other;

Drawing a compression anchor point: when drawing and compressing the View, taking a certain point of the View as an anchor point, wherein the position of the point is kept unchanged in the compression process;

drawing displacement: when drawing, the position of the View is adjusted, and if the View contains other views, the View of the lower layer moves along the same direction with the pixels.

Optionally, the step 102 specifically includes:

Measuring the height compression of a second display block based on the compression ratio, wherein the second display block is a display block of a block tree structure root node to which the first display block belongs;

And carrying out drawing processing on the interface elements in the first display block based on the block tree structure and the compression ratio to obtain drawing information of the first display block, wherein the drawing processing comprises drawing compression.

The block Tree structure is View Tree, the View Tree to which the first display block belongs may include two types, the first type is that only one layer is deployed by the View Tree, the second type is that two or more layers are deployed by the View Tree, and the second display block is a display block of a root node of the block Tree structure to which the first display block belongs.

Taking the View Tree shown in fig. 10 as an example, it includes three layers, namely View Group1, view Group2 and View Group3, respectively, and the display block of the root node, namely the second display block, is View Group1.

Taking the View Tree shown in fig. 11 as an example, it only includes one layer, which is View Group1, and View Group1 is the second display block and is also the first display block.

Measurement height compression refers to the compression of the height of the interface element at the time of measurement. For the first display block, the second display block can be measured and highly compressed at first, so as to achieve the purpose of compressing the display size of the first display block, but after the second display block is measured and highly compressed, the size and the position of the interface element inside the first display block are not changed, so that the interface element in the first display block can be drawn based on the block tree structure and the compression ratio, and the purpose of optimizing the overall display ratio of the first display block is achieved. The interface element in the display block may be View.

Optionally, the drawing processing is performed on the interface element in the first display block based on the block tree structure and the compression ratio to obtain drawing information of the first display block, including:

Under the condition that the hierarchy of the block tree structure is at least two layers, drawing a third display block by taking a central point at the top of a frame as an anchor point based on the compression ratio to perform high compression, wherein the third display block is a display block except the second display block in the block tree structure;

and based on the compression ratio, performing drawing width compression on the interface element in the first display block to obtain drawing information of the first display block.

For the display blocks with deeper layout level, as shown in fig. 10, the interface elements inside the first display block View Group3 sequentially correspond to the blocks from View1 to View6 from top to bottom in order from left to right, and the display schematic diagram of the blocks from View Tree on the first screen based on the first layout is shown in fig. 12, where the display blocks from inside to outside are View Group1 (identified as display block 1201), view Group2 (identified as display block 1202), and View Group3 (identified as display block 1203).

Taking a scene of a folding screen and taking View Tree as an example shown in fig. 10, a flow for adjusting the display scale of the first display block View Group3 is shown in fig. 13.

Step 1301, acquiring a screen width w _expand of the folding screen in an unfolded state and a screen width w _fold of the folding screen in a folded state;

Step 1302, calculating a compression ratio s _ratio＝w_fold/w_expand;

Step 1303, performing measurement height compression on View Group1, where the measurement height h _optimize＝h_current1*s_ratio,h_current1 of the compressed View Group1 is the measurement height of the View Group1 before compression, and performing measurement height compression on View Group1, where only the height of the View Group1 is changed, and the sizes and positions of the View and View groups in the View Group are not changed, as shown in fig. 14;

In step 1304, the third display area, such as View Group2 or View Group3, is highly compressed by using the center point of the top of the frame as the anchor point, the compressed drawing height is h _draw＝h_current2*s_ratio,h_current2 as the measurement height of the third display area before compression, and after the third display area is highly compressed, the View and View Group in the third display area follow the drawing height compression in the same proportion, as shown in fig. 15; wherein, the drawing height compression refers to the compression of the height of the interface element during drawing;

Step 1305, after the drawing is highly compressed, the aspect ratio of the View in the View Group3 is misaligned, so that the drawing width of the View in the View Group3 needs to be compressed, as shown in fig. 16, so that the drawing information of the first display block can be obtained;

Optionally, the compressing the drawing width of the interface element in the first display area based on the compression ratio includes:

Determining a drawing compression anchor point of the interface element based on the layout position of the interface element under the condition that the width of the interface element is smaller than or equal to a threshold value;

and based on the compression ratio, performing drawing width compression on the interface element by using the drawing compression anchor point.

Drawing width compression refers to compressing the width of an interface element at the time of drawing. When the drawing width of the View is compressed, a drawing compression anchor point of the View can be determined based on the layout position of the interface element, wherein the layout position indicates the relative position of the interface element in the first display area. Optionally, the layout position includes a first distance and a second distance, where the first distance is a distance between the interface element and a left line in a frame of the first display block, and the second distance is a distance between the interface element and a right line in the frame of the first display block; the determining, based on the layout position of the interface element, a rendering compression anchor point of the interface element includes at least one of:

Under the condition that the difference value of the first distance and the second distance is in an error range, taking the central point of the border of the interface element as a drawing compression anchor point;

when the difference value between the first distance and the second distance is not in the error range and the first distance is larger than the second distance, taking the center point of the right line in the frame of the interface element as a drawing compression anchor point;

And taking the center point of the left line in the frame of the interface element as a drawing compression anchor point under the condition that the difference value between the first distance and the second distance is not in an error range and the first distance is smaller than the second distance.

Let d _l be the first distance from the left line in the frame of View Group3 and d _r be the second distance from the right line in the frame of View Group3, if the difference between d _l and d _r is within the error range, the View level is considered to be centrally displayed, the center point of the frame of View is considered to be the anchor point, otherwise, if d _l>d_r, the View is considered to be right displayed, the center point of the right line in the frame of View is considered to be the anchor point, otherwise, if d _l<d_r, the View is considered to be left displayed, and the center point of the left line in the frame is considered to be the anchor point. As shown in fig. 15, the center point of the left line in the frame is used as an anchor point for View1, the center point of the right line in the frame is used as an anchor point for View3, and the center point of the frame is used as an anchor point for View 2.

Then, the View with the internal width below the threshold value of View Group3 is subjected to drawing width compression according to the determined drawing compression anchor point, as shown in fig. 15, the width of View4 exceeds the threshold value, and the drawing width of View after compression is w _draw＝w_current*s_ratio, where w _current is the width of View in the first display block.

In step 1306, an application interface after optimizing display is generated, as shown in fig. 3, after the application interface optimizes the first display area with an excessively large display proportion, the content of the first display area with an excessively large display proportion may be displayed according to a normal proportion, and more area content may be displayed on the screen.

Under the condition that the hierarchy of the block tree structure is one layer, respectively carrying out drawing height compression and drawing width compression on interface elements in the first display block based on the compression ratio;

And drawing displacement is carried out on the interface element in the first display block in a first direction based on the compression ratio, so that drawing information of the first display block is obtained, and the first direction is a direction corresponding to the frame height of the interface element.

For the display blocks having only one layer of layout, as shown in fig. 11, the interface elements inside the first display block View Group1 sequentially correspond to the blocks from View1 to View6 from left to right and from top to bottom, and the display schematic diagram of the blocks from View Tree on the first screen based on the first layout is shown in fig. 17.

Taking the scene of the folding screen and the View Tree shown in fig. 11 as an example, the flow of adjusting the display scale of the first display block View Group1 is shown in fig. 18.

Step 1801, obtaining a screen width w _expand of the folding screen in an unfolded state and a screen width w _fold of the folding screen in a folded state;

Step 1802, calculating a compression ratio s _ratio＝w_fold/w_expand;

Step 1803, performing measurement height compression on the View Group1, where the measurement height h _optimize＝h_current1*s_ratio,h_current1 of the View Group1 after compression is the measurement height of the View Group1 before compression, and performing measurement height compression on the View Group1, where only the height of the View Group1 is changed, and the sizes and positions of the View and the View Group in the View are not changed, as shown in fig. 19;

after the measurement of the View Group1 is highly compressed, since the View Tree has only one layer, the View Tree cannot be highly compressed by the intermediate layer such as the View Group2 to drive all views in the interior to be compressed in the first direction, so that only the views in the View Group1 can be respectively highly compressed and the drawing width compressed, and drawing displacement is required to be performed on all views in the first direction, so that the purpose of optimizing the overall display proportion of the first display block is achieved.

In step 1804, drawing height compression and drawing width compression are performed on the View inside the View Group1, when drawing width compression is performed on the View, a drawing compression anchor point of the View may be determined based on the layout position of the interface element, a first distance d _l, which is a distance between a certain View and a left line in the frame of the View Group1, is set, a second distance d _r, which is a distance between the View and a right line in the frame of the View Group1, if the difference between d _l and d _r is within the error range, the View is considered to be displayed horizontally centrally, the center point of the frame of the View is considered to be used as an anchor point, otherwise, if d _l>d_r is considered to be displayed right, the center point of the right line in the frame of the View is considered to be used as an anchor point, otherwise, if d _l<d_r is considered to be displayed left, and the center point of the left line in the frame of the View is considered to be used as an anchor point. As shown in fig. 20, the center point of the left line in the frame is used as an anchor point for View1, the center point of the right line in the frame is used as an anchor point for View3, and the center point of the frame is used as an anchor point for View 2. Then, the View with the internal width below the threshold value of View Group1 is subjected to drawing width compression according to the determined drawing compression anchor point, as shown in fig. 20, the width of View4 exceeds the threshold value, drawing width compression is not required, and the drawing width of the View after compression is w _draw＝w_current*s_ratio. When the drawing height of the View is compressed, the drawing height of all views in the View Group1 is compressed by taking the central point as an anchor point, and the drawing height after compression is as follows: h _draw＝h_current2*s_ratio, at this time, the View in the View Group1 can be restored to the normal display scale, as shown in fig. 20;

In step 1805, drawing displacement in the first direction is performed on the View in the View Group1, and the View may be displayed by moving upwards, as shown in fig. 21, where the View displacement distance is calculated in the following manner: setting the distance between the center point of a View and the top end of the View Group1 under the original layout as y _original, and setting a virtual View Group2, wherein after the View Group2 is highly compressed in a scene that the View Tree has multiple layers, the distance becomes y _current＝y_original*s_ratio, and the displacement distance of the View is y _move＝y_current-y_original＝y_original*(s_ratio -1);

In step 1806, an application interface after display optimization is generated, fig. 22 is a schematic diagram of the application interface displayed on the first screen based on the first layout, fig. 23 is a schematic diagram of the application interface displayed on the first screen based on the second layout, comparing fig. 22 and fig. 23, after optimizing the first display area with an excessively large display proportion, the content of the first display area with an excessively large display proportion may be displayed according to a normal proportion, and besides the normal display area 2201, the normal display area 2202 and the first display area 2203, further area contents may be displayed on the screen, such as the normal display area 2204 and the normal display area 2205.

According to the method and the device for displaying the first display block, based on a set of layout configuration of the application, the application can be integrally optimized on the first display block with the overlarge display proportion in the unfolded state of the folding screen, so that the interface element can display a good display proportion, and compared with the original layout, more block contents can be displayed on the screen, and a user can obtain better application use experience on the large screens.

It should be noted that, in the interface display method provided by the embodiment of the present application, the execution body may be an interface display device, or a control module in the interface display device for executing the interface display method. In the embodiment of the application, an interface display device executing an interface display method is taken as an example, and the interface display device provided by the embodiment of the application is described.

Referring to fig. 24, fig. 24 is a schematic structural diagram of an interface display device according to an embodiment of the present application, where the device includes:

An obtaining module 2401, configured to obtain, when an application interface is displayed on a first screen based on a first layout, a first display area of the application interface, where a display proportion of the first display area on the first screen based on the first layout is greater than a display proportion of the first display area on a second screen based on the first layout;

The proportion adjustment module 2402 is configured to adjust a display proportion of the first display block based on a compression proportion, to obtain drawing information of the first display block, where the compression proportion is determined based on display parameters of the first screen and the second screen;

A generating module 2403, configured to generate a second layout based on the drawing information, where a display ratio of the first display block on the first screen based on the second layout is smaller than a display ratio on the first screen based on the first layout;

and the display module 2404 is configured to display the application interface on the first screen according to the second layout.

Optionally, the scaling module 2402 includes:

the measurement compression sub-module is used for carrying out measurement height compression on a second display block based on the compression ratio, wherein the second display block is a display block of a block tree structure root node to which the first display block belongs;

And the drawing processing sub-module is used for carrying out drawing processing on the interface elements in the first display block based on the block tree structure and the compression ratio to obtain drawing information of the first display block, and the drawing processing comprises drawing compression.

Optionally, the drawing processing submodule includes:

The first drawing compression unit is used for carrying out drawing high compression on a third display block by taking a central point at the top of a frame as an anchor point based on the compression ratio under the condition that the hierarchy of the block tree structure is at least two layers, wherein the third display block is a display block except the second display block in the block tree structure;

And the second drawing compression unit is used for compressing the drawing width of the interface element in the first display block based on the compression ratio to obtain drawing information of the first display block.

Optionally, the second rendering compression unit is specifically configured to:

Optionally, the layout position includes a first distance and a second distance, where the first distance is a distance between the interface element and a left line in a frame of the first display block, and the second distance is a distance between the interface element and a right line in the frame of the first display block; the second drawing compression unit is specifically configured to:

Optionally, the drawing processing submodule includes:

The third drawing compression unit is used for respectively carrying out drawing height compression and drawing width compression on the interface elements in the first display block based on the compression ratio under the condition that the hierarchy of the block tree structure is one layer;

And the drawing displacement unit is used for drawing displacement of the interface element in the first display block in a first direction based on the compression ratio to obtain drawing information of the first display block, wherein the first direction is a direction corresponding to the frame height of the interface element.

Optionally, the first screen is a screen used for displaying a folded screen in an unfolded state, and the second screen is a screen used for displaying a folded screen in a folded state; the compression ratio is equal to a screen width of the folding screen in a folded state divided by a screen width of the folding screen in an unfolded state.

The interface display device in the embodiment of the application can be a device, and can also be a component, an integrated circuit or a chip in the interface display device. The interface display device may be a mobile electronic device or a non-mobile electronic device. By way of example, the mobile electronic device may be a mobile phone, a tablet computer, a notebook computer, a palm computer, a vehicle-mounted electronic device, a wearable device, an ultra-mobile personal computer (UMPC), a netbook or a Personal Digital Assistant (PDA), etc., and the non-mobile electronic device may be a server, a network attached storage (Network Attached Storage, NAS), a personal computer (personal computer, PC), a Television (TV), a teller machine, a self-service machine, etc., and the embodiments of the present application are not limited in particular.

The interface display device in the embodiment of the application can be a device with an operating system. The operating system may be an Android operating system, an ios operating system, or other possible operating systems, and the embodiment of the present application is not limited specifically.

The interface display device provided by the embodiment of the application can realize each process realized by the method embodiment of fig. 1, achieve the same technical effect, and are not repeated here.

Optionally, as shown in fig. 25, the embodiment of the present application further provides an electronic device 2500, which includes a processor 2501, a memory 2502, and a program or an instruction stored in the memory 2502 and capable of being executed on the processor 2501, where the program or the instruction implements each process of the above embodiment of the interface display method when executed by the processor 2501, and the process can achieve the same technical effects, and is not repeated herein.

The electronic device in the embodiment of the application includes the mobile electronic device and the non-mobile electronic device.

Fig. 26 is a schematic hardware structure of an electronic device implementing an embodiment of the present application.

The electronic device 2600 includes, but is not limited to: a radio frequency unit 2601, a network module 2602, an audio output unit 2603, an input unit 2604, a sensor 2605, a display unit 2606, a user input unit 2607, an interface unit 2608, a memory 2609, a processor 2610, and the like. The electronic device 2600 is also provided with an off-screen fingerprint sensing area.

Those skilled in the art will appreciate that the electronic device 2600 may also include a power source (e.g., a battery) for powering the various components, which may be logically connected to the processor 2610 by a power management system so as to perform functions such as managing charging, discharging, and power consumption by the power management system. The electronic device structure shown in fig. 26 does not constitute a limitation of the electronic device, and the electronic device may include more or less components than those shown in the drawings, or may combine some components, or may be arranged in different components, which will not be described in detail herein.

The processor 2610 is configured to obtain, when an application interface is displayed on a first screen based on a first layout, a first display block of the application interface, where a display proportion of the first display block on the first screen based on the first layout is greater than a display proportion of the first display block on a second screen based on the first layout; adjusting the display proportion of the first display block based on a compression proportion to obtain drawing information of the first display block, wherein the compression proportion is determined based on display parameters of the first screen and the second screen; generating a second layout based on the drawing information, wherein the display proportion of the first display block on the first screen based on the second layout is smaller than the display proportion of the first display block on the first screen based on the first layout;

And a display unit 2606, configured to display the application interface on the first screen according to the second layout.

Optionally, the processor 2610 is further configured to:

Optionally, the layout position includes a first distance and a second distance, where the first distance is a distance between the interface element and a left line in a frame of the first display block, and the second distance is a distance between the interface element and a right line in the frame of the first display block; the processor 2610 is also configured to:

Optionally, the processor 2610 is further configured to:

It should be appreciated that in an embodiment of the present application, the input unit 2604 may include a graphics processor (Graphics Processing Unit, GPU) 26041 and a microphone 26042, and the graphics processor 26041 processes image data of still pictures or video obtained by an image capturing device (such as a camera) in a video capturing mode or an image capturing mode. The display unit 2606 may include a display panel 26061, and the display panel 26061 may be configured in the form of a liquid crystal display, an organic light emitting diode, or the like. The user input unit 2607 includes at least one of a touch panel 26071 and other input devices 26072. The touch panel 26071 is also referred to as a touch screen. The touch panel 26071 may include two parts, a touch detection device and a touch controller. Other input devices 26072 may include, but are not limited to, a physical keyboard, function keys (e.g., volume control keys, switch keys, etc.), a trackball, a mouse, a joystick, and so forth, which are not described in detail herein.

The memory 2609 may be used to store software programs and various data. The memory 2609 may mainly include a first memory area storing programs or instructions and a second memory area storing data, wherein the first memory area may store an operating system, application programs or instructions (such as a sound playing function, an image playing function, etc.) required for at least one function, and the like. Further, the memory 2609 may include volatile memory or nonvolatile memory, or the memory 2609 may include both volatile and nonvolatile memory. The nonvolatile Memory may be a Read-Only Memory (ROM), a Programmable ROM (PROM), an Erasable PROM (EPROM), an Electrically Erasable EPROM (EEPROM), or a flash Memory. The volatile memory may be random access memory (Random Access Memory, RAM), static random access memory (STATIC RAM, SRAM), dynamic random access memory (DYNAMIC RAM, DRAM), synchronous Dynamic Random Access Memory (SDRAM), double data rate synchronous dynamic random access memory (double DATA RATE SDRAM, DDRSDRAM), enhanced synchronous dynamic random access memory (ENHANCED SDRAM, ESDRAM), synchronous link dynamic random access memory (SYNCH LINK DRAM, SLDRAM), and direct random access memory (DRRAM). Memory 2609 in embodiments of the application includes, but is not limited to, these and any other suitable types of memory.

The processor 2610 may include one or more processing units; in some embodiments, the processor 2610 integrates an application processor that primarily processes operations involving an operating system, user interface, application programs, and the like, and a modem processor that primarily processes wireless communication signals, such as a baseband processor. It is to be appreciated that the modem processor described above may not be integrated into the processor 2610.

The embodiment of the application also provides a readable storage medium, on which a program or an instruction is stored, which when executed by a processor, implements each process of the above-mentioned interface display method embodiment, and can achieve the same technical effects, and in order to avoid repetition, the description is omitted here.

Wherein the processor is a processor in the electronic device described in the above embodiment. The readable storage medium includes computer readable storage medium such as read-only memory, random access memory, magnetic disk or optical disk.

The embodiment of the application further provides a chip, which comprises a processor and a communication interface, wherein the communication interface is coupled with the processor, and the processor is used for running programs or instructions to realize the processes of the interface display method embodiment, and the same technical effects can be achieved, so that repetition is avoided, and the description is omitted here.

It should be understood that the chips referred to in the embodiments of the present application may also be referred to as system-on-chip chips, chip systems, or system-on-chip chips, etc.

Embodiments of the present application provide a computer program product stored in a storage medium, where the program product is executed by at least one processor to implement the respective processes of the above-described interface display method embodiment, and achieve the same technical effects, and for avoiding repetition, a detailed description is omitted herein.

It should be noted that, in this document, the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or apparatus. Without further limitation, an element defined by the phrase "comprising one … …" does not exclude the presence of other like elements in a process, method, article, or apparatus that comprises the element. Furthermore, it should be noted that the scope of the methods and apparatus in the embodiments of the present application is not limited to performing the functions in the order shown or discussed, but may also include performing the functions in a substantially simultaneous manner or in an opposite order depending on the functions involved, e.g., the described methods may be performed in an order different from that described, and various steps may be added, omitted, or combined. Additionally, features described with reference to certain examples may be combined in other examples.

From the above description of the embodiments, it will be clear to those skilled in the art that the above-described embodiment method may be implemented by means of software plus a necessary general hardware platform, but of course may also be implemented by means of hardware, but in many cases the former is a preferred embodiment. Based on such understanding, the technical solution of the present application may be embodied essentially or in a part contributing to the prior art in the form of a computer software product stored in a storage medium (e.g. ROM/RAM, magnetic disk, optical disk) comprising instructions for causing an electronic device (which may be a mobile phone, a computer, a server, or a network device, etc.) to perform the method according to the embodiments of the present application.

The embodiments of the present application have been described above with reference to the accompanying drawings, but the present application is not limited to the above-described embodiments, which are merely illustrative and not restrictive, and many forms may be made by those having ordinary skill in the art without departing from the spirit of the present application and the scope of the claims, which are to be protected by the present application.

Claims

1. An interface display method, characterized in that the method comprises:

2. The method according to claim 1, wherein the adjusting the display scale of the first display block based on the compression scale to obtain the drawing information of the first display block includes:

3. The method according to claim 2, wherein the rendering the interface element in the first display tile based on the tile tree structure and the compression ratio to obtain the rendering information of the first display tile includes:

4. The method of claim 3, wherein the rendering width compression of the interface element in the first display tile based on the compression ratio comprises:

5. The method of claim 4, wherein the layout position comprises a first distance and a second distance, the first distance being a distance between the interface element and a left line in a frame of the first display block, the second distance being a distance between the interface element and a right line in a frame of the first display block; the determining, based on the layout position of the interface element, a rendering compression anchor point of the interface element includes at least one of:

6. The method according to claim 2, wherein the rendering the interface element in the first display tile based on the tile tree structure and the compression ratio to obtain the rendering information of the first display tile includes:

7. The method of claim 1, wherein the first screen is a screen for display with a folded screen in an unfolded state and the second screen is a screen for display with the folded screen in a folded state; the compression ratio is equal to a screen width of the folding screen in a folded state divided by a screen width of the folding screen in an unfolded state.

8. An interface display device, the device comprising:

9. The apparatus of claim 8, wherein the scaling module comprises:

10. The apparatus of claim 9, wherein the rendering processing submodule includes:

11. The apparatus of claim 9, wherein the rendering processing submodule includes:

12. An electronic device comprising a processor, a memory and a program or instruction stored on the memory and executable on the processor, the program or instruction when executed by the processor implementing the steps of the interface display method of any one of claims 1 to 7.

13. A readable storage medium, wherein a program or instructions is stored on the readable storage medium, which when executed by a processor, implements the steps of the interface display method according to any one of claims 1-7.