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

Abstract

The present application belongs to the technical field of electronics. Disclosed are an interface display method and apparatus, and an electronic device and a readable storage medium. The method comprises: when an application interface is displayed on a first screen on the basis of a first layout, obtaining a first display block of the application interface, wherein the display scale of the first display block when displayed on the first screen on the basis of the first layout is greater than the display scale of the first display block when displayed on a second screen on the basis of the first layout; on the basis of a compression ratio, adjusting the display scale of the first display block, so as to obtain drawing information of the first display block, wherein the compression ratio is determined on the basis of display parameters of the first screen and the second screen; on the basis of the drawing information, generating a second layout, wherein the display scale of the first display block when displayed on the first screen on the basis of the second layout is less than the display scale of the first display block when displayed on the first screen on the basis of the first layout; and according to the second layout, displaying the application interface on the first screen.

Description

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

[0001] CROSS-REFERENCE TO RELATED APPLICATIONS

[0002] This application claims priority to Chinese Patent Application No. 202410074948.5 filed in China on January 18, 2024, the entire contents of which are incorporated herein by reference. Technical Field

[0003] The present application belongs to the field of electronic technology, and specifically relates to an interface display method, device, electronic device and readable storage medium. Background Art

[0004] With the rapid development of electronic technology, electronic devices have become widely used. With the rapid development of electronic devices and the increasing trend of information digitization, electronic devices with various screen sizes and resolutions are constantly emerging. However, the application interfaces of electronic devices are usually designed only for display adaptation at standard screen sizes and resolutions. This single display adaptation can lead to many display issues on large screens (such as tablets and foldable screens).

[0005] Currently, it is common practice to provide multiple sets of layout configurations and code logic for different screen sizes and resolutions for application interfaces to achieve display compatibility, thereby loading different layout configurations and executing corresponding logic on different screen sizes and resolutions. This display method is difficult to adapt to the various electronic devices with various screen sizes and resolutions that are constantly emerging. Summary of the Invention

[0006] The purpose of the embodiments of the present application is to provide an interface display method, device, electronic device and readable storage medium, which can achieve display compatibility of the application interface under different screen sizes and resolutions based on a set of layout configurations of the application interface.

[0007] In a first aspect, an embodiment of the present application provides an interface display method, the method comprising:

[0008] When an application interface is displayed on a first screen based on a first layout, obtaining a first display block of the application interface, wherein a display ratio of the first display block on the first screen based on the first layout is greater than a display ratio of the first display block on the second screen based on the first layout;

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

[0010] generating a second layout based on the drawing information, wherein a display ratio of the first display block on the first screen based on the second layout is smaller than a display ratio of the first display block on the first screen based on the first layout;

[0011] Display the application interface on the first screen according to the second layout.

[0012] In a second aspect, an embodiment of the present application provides an interface display device, the device comprising:

[0013] an acquisition module, configured to, when an application interface is displayed on a first screen based on a first layout, acquire a first display block of the application interface, wherein a display ratio of the first display block on the first screen based on the first layout is greater than a display ratio of the first display block on the second screen based on the first layout;

[0014] a ratio adjustment module, configured to adjust the display ratio of the first display block based on a compression ratio to obtain drawing information of the first display block, wherein the compression ratio is determined based on display parameters of the first screen and the second screen;

[0015] a generating module, configured to generate a second layout based on the drawing information, wherein a display ratio of the first display block on the first screen based on the second layout is smaller than a display ratio of the first display block on the first screen based on the first layout;

[0016] A display module is configured to display the application interface on the first screen according to the second layout.

[0017] In a third aspect, an embodiment of the present application provides an electronic device comprising a processor, a memory, and a program or instruction stored in the memory and executable on the processor, wherein the program or instruction, when executed by the processor, implements the steps of the interface display method as described in the first aspect.

[0018] In a fourth aspect, an embodiment of the present application provides a readable storage medium, on which a program or instruction is stored. When the program or instruction is executed by a processor, the steps of the interface display method described in the first aspect are implemented.

[0019] In a fifth aspect, an embodiment of the present application provides a chip, which includes a processor and a communication interface, the communication interface is coupled to the processor, and the processor is used to run programs or instructions to implement the steps of the interface display method described in the first aspect.

[0020] In a sixth aspect, an embodiment of the present application provides a computer program product, which is stored in a storage medium and is executed by at least one processor to implement the steps of the interface display method as described in the first aspect.

[0021] In an embodiment of the present application, when an application interface has an excessively large display ratio on a first screen based on a first layout, the display ratio of the first display block of the application interface that has an excessively large display ratio is obtained. Based on a compression ratio determined by the display parameters of the first and second screens, the display ratio of the first display block is adjusted to obtain drawing information for the first display block. Based on the drawing information, a second layout is generated, and the application interface is displayed on the first screen according to the second layout. In this way, by optimizing the display ratio of the first display block of the application interface based on the first layout, display compatibility of the application interface on screens with different display parameters is achieved. BRIEF DESCRIPTION OF THE DRAWINGS

[0022] FIG1 is a flow chart of an interface display method provided by some embodiments of the present application;

[0023] FIG2 is a schematic diagram showing an application interface displayed on a first screen based on a first layout;

[0024] FIG3 is a schematic diagram showing an application interface displayed on the first screen based on the second layout;

[0025] Figure 4 is a schematic diagram of the structure of View Tree;

[0026] Figure 5 is a schematic diagram of View measurement;

[0027] Figure 6 is a schematic diagram of the layout of View in View Group;

[0028] Figure 7 is a schematic diagram of View drawing;

[0029] FIG8 is a schematic diagram of measuring height compression;

[0030] FIG9 is a schematic diagram showing a highly compressed image;

[0031] FIG10 is a schematic diagram of the structure of the View Tree to which the first display block belongs;

[0032] FIG11 is a second structural diagram of the View Tree to which the first display block belongs;

[0033] FIG12 is a schematic diagram showing one of the blocks of the View Tree displayed on the first screen based on the first layout;

[0034] FIG13 is a schematic diagram of the process of adjusting the display ratio of View Group 3;

[0035] FIG14 is a schematic diagram showing the display of View Group 3 after measuring height compression;

[0036] FIG15 is a schematic diagram showing the display of the third display block after rendering is highly compressed;

[0037] FIG16 is a schematic diagram showing the display of View Group 3 after drawing width compression;

[0038] FIG17 is a second schematic diagram showing the display of blocks of the View Tree on the first screen based on the first layout;

[0039] FIG18 is a schematic diagram of the process of adjusting the display ratio of View Group 1;

[0040] FIG19 is a schematic diagram showing the display of View Group 1 after measuring height compression;

[0041] FIG20 is a schematic diagram showing the display of View Group 1 after drawing height compression and drawing width compression respectively;

[0042] FIG21 is a schematic diagram showing the display of View Group 1 after rendering displacement in the first direction;

[0043] FIG22 is a second schematic diagram of the application interface displayed on the first screen based on the first layout;

[0044] FIG23 is a second schematic diagram of the application interface displayed on the first screen based on the second layout;

[0045] FIG24 is a schematic structural diagram of an interface display device provided in some embodiments of the present application;

[0046] FIG25 is a schematic structural diagram of an electronic device provided by some embodiments of the present application;

[0047] FIG26 is a schematic diagram of the hardware structure of an electronic device provided in some embodiments of the present application. DETAILED DESCRIPTION

[0048] The following will be combined with the accompanying drawings in the embodiments of the present application to clearly describe the technical solutions in the embodiments of the present application. Obviously, the embodiments described are part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field are within the scope of protection of this application.

[0049] The terms "first," "second," and the like in the specification of this application are used to distinguish similar objects, and are not used to describe a specific order or precedence. It should be understood that the terms used in this manner are interchangeable where appropriate, so that the embodiments of this application can be implemented in an order other than that illustrated or described herein, and that the objects distinguished by "first," "second," and the like are generally of the same type, and do not limit the number of objects; for example, the first object can be one or more. Furthermore, the term "and / or" in this specification indicates at least one of the connected objects, and the character " / " generally indicates that the objects connected are in an "or" relationship.

[0050] The interface display method provided in the embodiment of the present application is described in detail below through specific embodiments and their application scenarios in conjunction with the accompanying drawings.

[0051] FIG1 is a flow chart of an interface display method provided in an embodiment of the present application, as shown in FIG1 , comprising the following steps:

[0052] Step 101, when the application interface is displayed on the first screen based on the first layout, obtain the first display block of the application interface, the display ratio of the first display block on the first screen based on the first layout is greater than the display ratio on the second screen based on the first layout.

[0053] The application interface refers to the display interface of the application, which can be divided into multiple display blocks according to the content or function of the application interface. All display blocks together constitute a complete application interface.

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

[0055] 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 another example, the resolutions of the first screen and the second screen are different. Optionally, the first screen is the screen used for display when the folding screen is unfolded, and the second screen is the screen used for display when the folding screen is folded. In this scenario, if the folding screen is unfolded, the width of the screen used for display will become wider, and the first layout is adapted to the screen used to display the application interface when the folding screen is folded. In this way, the same application interface may be displayed based on the first layout when the folding screen is unfolded. There may be display compatibility issues.

[0056] Correspondingly, when 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 block of the application interface can be obtained.

[0057] In some embodiments, the electronic device can pre-store the first display block of the application interface at different screen sizes and resolutions, obtain the screen size and resolution of the first screen, and query the first display block of the application interface at the screen size and resolution of the first screen.

[0058] For example, for an application interface, the electronic device stores the identifier of the first display block of the application interface when the folding screen is unfolded. When the folding screen is unfolded, the identifier of the first display block of the application interface can be queried through the identifier of the application interface, thereby obtaining the first display block of the application interface.

[0059] In some embodiments, the display ratio of the display block of the application interface can be determined by measuring the size of the display block of the application interface. For a display block with an excessively large display ratio, it can be determined as the first display block.

[0060] Step 102 : Adjusting the display ratio of the first display block based on a compression ratio to obtain drawing information of the first display block, wherein the compression ratio is determined based on display parameters of the first screen and the second screen.

[0061] The display parameter can be screen size or resolution. If the first screen and the second screen have different screen sizes, the compression ratio is equal to the screen size of the second screen / the screen size of the first screen. Optionally, the compression ratio is equal to the screen width of the foldable screen in the folded state divided by the screen width of the foldable screen in the unfolded state.

[0062] Adjusting the display ratio of the first display block may refer to adjusting the display ratio of the interface elements in the first display block to achieve the purpose of reducing the display ratio of the interface elements in the first display block.

[0063] Based on the compression ratio, the size and position of the interface elements in the first display block can be adjusted to adjust the display ratio of the first display block and obtain drawing information of the first display block. The drawing information can indicate the size and position of the interface elements in the first display block.

[0064] In the folding screen scenario, the display problem of the application interface on the folding screen is usually that the display ratio of the interface elements inside certain display blocks is too large. For this phenomenon, the size and position of the internal interface elements of these display blocks with excessive display ratios can be adjusted based on the compression ratio to reduce the display ratio of the first display block.

[0065] Step 103 : generating a second layout based on the drawing information, wherein a display ratio of the first display block on the first screen based on the second layout is smaller than a display ratio of the first display block on the first screen based on the first layout.

[0066] Step 104: Display the application interface on the first screen according to the second layout.

[0067] In step 103, a second layout for displaying the application interface on the first screen can be regenerated based on the drawing information of the first display block and the drawing information of the normal display block of the application interface. The display ratio of the normal display block on the first screen based on the first layout can be equivalent to the display ratio of the normal display block on the second screen based on the first layout, and the drawing information of the normal display block can be obtained from the layout configuration of the first layout.

[0068] That is to say, this embodiment adjusts the layout configuration of the first display block in the layout configuration of the application interface, and generates a new layout adapted to the first screen display on the basis of the original layout configuration, so as to achieve the purpose of display compatibility of the application interface on screens with different display parameters based on a set of layout configurations of the application interface.

[0069] In some embodiments, due to the reduced display scale of the first display area of ​​the application interface, if there are other areas of the application interface to be displayed on the second screen, more of the display area of ​​the application interface can be displayed on the first screen. In other words, based on the second layout, more areas of the application interface can be drawn on the first screen to display more areas of the application interface on the first screen.

[0070] As shown in Figures 2 and 3, Figure 2 is a schematic diagram of an application interface displayed on the first screen based on the first layout. If the application interface is displayed on the first screen based on the first layout, it can display normal display block 201, normal display block 202, and first display block 203. The display ratio of the interface elements in first display block 203 is relatively large. Figure 3 is a schematic diagram of an application interface displayed on the first screen based on the second layout. For first display block 203, the display ratio of its interface elements is reduced. Since the display ratio of the interface elements in first display block 203 is reduced, some display space can be vacated on the first screen. Therefore, more blocks can be drawn on the first screen for display, such as normal display block 204 and normal display block 205, which can be drawn on the first screen for display.

[0071] In this embodiment, when an application interface has an excessively large display ratio on a first screen based on a first layout, the display ratio of the first display block of the application interface, which has an excessively large display ratio, is obtained. Based on the compression ratio determined by the display parameters of the first and second screens, the display ratio of the first display block is adjusted to obtain drawing information for the first display block. Based on the drawing information, a second layout is generated, and the application interface is displayed on the first screen according to the second layout. In this way, by optimizing the display ratio of the first display block of the application interface, based on the first layout, display compatibility of the application interface is achieved on screens with different display parameters.

[0072] Furthermore, in the embodiments of the present application, there is no need to adapt the layout configuration to various screen sizes, which can reduce application development and maintenance costs. Dividing the application interface into blocks for adjustment is more flexible and precise, which can better cope with various scenarios of different applications and has strong universality. Adjusting only the first display block has a smaller granularity and is less intrusive to the original layout of the application, preserving the original layout of the application to the greatest extent. For the folding screen scenario, it is only necessary to build a set of layout optimization logic into the framework layer to achieve good display of the application interface on folding screens of different screen sizes.

[0073] The following describes in detail how to adjust the display ratio of the first display block based on the compression ratio, and first explains some technical terms.

[0074] View: For the Android system, controls are the most basic display elements on the application interface. For example, text and icons are all basic controls. Controls are expressed in View.

[0075] View Group: A group of views are organized together in a certain form to form a block. This block is organized by View Group. A View Group can contain multiple views.

[0076] View Tree: Control tree. All views on an application interface constitute a View Tree, as shown in Figure 4.

[0077] Measurement: used to determine the width and height of the View, thereby determining the display size of the View, as shown in Figure 5;

[0078] Layout: used to determine the relative position of the View in the View Group, thereby determining the display position of the View, as shown in Figure 6;

[0079] Drawing: The size and position of the View are determined based on measurement and layout, and the View is finally displayed on the screen, as shown in Figure 7;

[0080] Measurement compression: When measuring, the width or height of the View is compressed. Compression during measurement only changes the width or height of the current View, and the Views contained in it do not follow the change. As shown in Figure 8, when View Group 1 is measured and compressed, the Views contained in View Group 1 do not follow the change.

[0081] Drawing compression: When drawing, the width or height of the View is compressed. If the View contains other Views, the underlying Views will be compressed proportionally. As shown in Figure 9, when View Group 1 is drawn with height compression, the Views contained in View Group 1 will also be compressed proportionally.

[0082] Drawing compression anchor point: refers to using a certain point of the View as the anchor point when drawing and compressing the View. The position of this point remains unchanged during the compression process.

[0083] Drawing displacement: When drawing, the position of the View is adjusted. If the View contains other Views, the underlying Views will move in the same direction and at the same pixel.

[0084] Optionally, step 102 specifically includes:

[0085] Based on the compression ratio, measuring height compression is performed on a second display block, where the second display block is a display block of a root node of a block tree structure to which the first display block belongs;

[0086] Based on the block tree structure and the compression ratio, a drawing process is performed on the interface elements in the first display block to obtain drawing information of the first display block, where the drawing process includes drawing compression.

[0087] The block tree structure is the View Tree. The View Tree to which the first display block belongs can include two types. The first type is that the View Tree is deployed with only one layer, and the second type is that the View Tree is deployed with two or even multiple layers. The second display block is the display block of the root node of the block tree structure to which the first display block belongs.

[0088] Taking the View Tree shown in FIG. 10 as an example, it includes three layers, namely View Group 1 , View Group 2 and View Group 3 , and the display block of the root node, ie, the second display block, is View Group 1 .

[0089] Taking the View Tree shown in FIG. 11 as an example, it includes only one layer, namely View Group 1 . View Group 1 is the second display block and also the first display block.

[0090] Measured height compression refers to compressing the height of interface elements during measurement. For the first display block, the second display block can be measured and compressed first to achieve the purpose of compressing the display size of the first display block. However, after the measured height compression of the second display block, the size and position of the internal interface elements in the first display block do not change. Therefore, based on the block tree structure and compression ratio, the interface elements in the first display block can be drawn and processed to achieve the purpose of optimizing the overall display ratio of the first display block. Among them, the interface elements in the display block can be View.

[0091] Optionally, the performing 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 includes:

[0092] When the block tree structure has at least two levels, based on the compression ratio, performing drawing height compression on a third display block with a center point of a top of a border as an anchor point, the third display block being a display block in the block tree structure excluding the second display block;

[0093] Based on the compression ratio, the drawing width of the interface elements in the first display block is compressed to obtain the drawing information of the first display block.

[0094] For display blocks with a deeper layout hierarchy, as shown in Figure 10, the interface elements inside the first display block View Group3 correspond to View1 to View6 in order from left to right and from top to bottom. The display diagram of the View Tree blocks on the first screen based on the first layout is shown in Figure 12. The display blocks from inside to outside are View Group1 (marked as display block 1201), View Group2 (marked as display block 1202) and View Group3 (marked as display block 1203).

[0095] Taking the foldable screen scenario and the View Tree shown in FIG10 as an example, the process of adjusting the display ratio of the first display block View Group 3 is shown in FIG13 .

[0096] Step 1301: Get the screen width w of the folding screen in the unfolded state expand and the screen width w in the folded state fold ;

[0097] Step 1302, calculate the compression ratio s ratio =w fold / w expand ;

[0098] Step 1303: compress the measured height of View Group 1. After compression, the measured height of View Group 1 is h optimize =h current1 *s ratio , h current1 Compressing the measured height of View Group 1 will only change the height of View Group 1 itself, while the size and position of the Views and View Groups inside it will not change, as shown in Figure 14.

[0099] Step 1304: Compress the drawing height of the third display block, such as View Group 2 or View Group 3, with the center point of the top of the border as the anchor point. The compressed drawing height is h draw =h current2 *s ratio , h current2 To compress the measured height of the third display block before drawing, the third display block is compressed. The Views and View Groups within it are then compressed to the same proportion, as shown in Figure 15. Drawing height compression refers to compressing the height of interface elements during drawing.

[0100] Step 1305: After the drawing height is compressed, the aspect ratio of the Views in View Group 3 is out of balance. Therefore, the drawing width of the Views in View Group 3 needs to be compressed, as shown in FIG16 . This way, the drawing information of the first display block can be obtained.

[0101] Optionally, compressing the drawing width of the interface elements in the first display block based on the compression ratio includes:

[0102] When the width of the interface element is less than or equal to a threshold, determining a drawing compression anchor point of the interface element based on a layout position of the interface element;

[0103] Based on the compression ratio, the interface element is compressed in drawing width using the drawing compression anchor point.

[0104] Drawing width compression refers to compressing the width of the interface element when drawing. When performing drawing width compression on a view, the 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 block. Optionally, the layout position includes a first distance and a second distance, the first distance being the distance between the interface element and the left line of the border of the first display block, and the second distance being the distance between the interface element and the right line of the border of the first display block; the determination of the drawing compression anchor point of the interface element based on the layout position of the interface element includes at least one of the following:

[0105] When the difference between the first distance and the second distance is within an error range, the center point of the border of the interface element is used as a drawing compression anchor point;

[0106] If the difference between the first distance and the second distance is not within the error range and the first distance is greater than the second distance, the center point of the right line of the border of the interface element is used as the drawing compression anchor point;

[0107] When the difference between the first distance and the second distance is not within the error range and the first distance is smaller than the second distance, the center point of the left line in the border of the interface element is used as the drawing compression anchor point.

[0108] Let the distance between a View and the left line of the border of View Group 3 be d l The distance from the right edge of the border of View Group 3 is the second distance d r , if d l and d r If the difference is within the error range, the View is considered to be horizontally centered, with the center point of the View's border as the anchor point. Otherwise, if d l >d r , the View is considered to be displayed on the right, with the center point of the right line of the View's border as the anchor point. Otherwise, if d l <d r , the View is considered to be displayed on the left, and the center point of the left border line is used as the anchor point. As shown in Figure 15, the center point of the left border line of View1 is used as the anchor point, the center point of the right border line of View3 is used as the anchor point, and the center point of the border line of View2 is used as the anchor point.

[0109] After that, the views in View Group 3 whose width is below the threshold are compressed according to the determined compression anchor point. As shown in Figure 15, the width of View 4 exceeds the threshold and does not need to be compressed. The width of the compressed View is w draw =w current *s ratio , where w current The width of the View in the first display block.

[0110] Step 1306, generating an optimized application interface, as shown in FIG3, after optimizing the first display block with an excessively large display ratio, the content of the first display block with an excessively large display ratio can be displayed in a normal ratio, and more block content can be displayed on the screen.

[0111] Optionally, the performing 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 includes:

[0112] When the block tree structure has one level, based on the compression ratio, performing drawing height compression and drawing width compression on the interface elements in the first display block respectively;

[0113] Based on the compression ratio, the interface element in the first display block is rendered and displaced in a first direction to obtain rendering information of the first display block, where the first direction is a direction corresponding to a border height of the interface element.

[0114] For a display block with only one layer of layout, as shown in FIG11 , the interface elements within the first display block View Group1 correspond to View1 to View6 in order from left to right and from top to bottom. A schematic diagram of the display of the View Tree blocks on the first screen based on the first layout is shown in FIG17 .

[0115] Taking the foldable screen scenario and the View Tree shown in FIG11 as an example, the process of adjusting the display ratio of the first display block View Group 1 is shown in FIG18 .

[0116] Step 1801: Get the screen width w of the folding screen in the unfolded state expand and the screen width w in the folded state fold ;

[0117] Step 1802, calculate the compression ratio s ratio =w fold / w expand ;

[0118] Step 1803: compress the measured height of View Group 1. After compression, the measured height of View Group 1 is h optimize =h current1 *s ratio , h current1 Compressing the measured height of View Group 1 will only change the height of View Group 1 itself, while the size and position of the Views and View Groups inside it will not change, as shown in Figure 19.

[0119] After measuring the height and compressing View Group 1, since the View Tree has only one layer, it is impossible to perform drawing height compression through the intermediate layer such as View Group 2 to drive all the internal Views to be compressed in the first direction. Therefore, the Views in View Group 1 can only be drawn with height compression and width compression respectively, and all Views need to be drawn and displaced in the first direction to achieve the purpose of optimizing the overall display ratio of the first display block.

[0120] Step 1804: Compress the height and width of the views in View Group 1. When compressing the width of the views, the compression anchor point of the views can be determined based on the layout position of the interface elements. The first distance d is the distance between a view and the left line of the border of View Group 1. l The distance from the right edge of the border of View Group 1 is the second distance d r , if d l and d r If the difference is within the error range, the View is considered to be horizontally centered, with the center point of the View's border as the anchor point. Otherwise, if d l >d r , the View is considered to be displayed on the right, with the center point of the right line of the View's border as the anchor point. Otherwise, if d l <d r , the View is considered to be displayed on the left, and the center point of the left line of the View's border is used as the anchor point. As shown in Figure 20, the center point of the left line of the border is used as the anchor point for View1, the center point of the right line of the border is used as the anchor point for View3, and the center point of the border is used as the anchor point for View2. Afterwards, the views within View Group1 whose width is below the threshold are compressed according to the determined drawing compression anchor point. As shown in Figure 20, the width of View4 exceeds the threshold, so it is not necessary to perform drawing width compression. The drawing width of the compressed View is wdraw =w current *s ratio When compressing the view's drawing height, all views in View Group 1 are compressed with the center point as the anchor point. The compressed drawing height is: h draw =h current2 *s ratio At this point, the View within View Group 1 can be restored to its normal display ratio, as shown in Figure 20;

[0121] Step 1805: Draw and displace the View in the first direction of View Group 1. This can move the View upwards for display. As shown in Figure 21, the View displacement distance is calculated as follows: Let the distance between the center point of a View in the original layout and the top of View Group 1 be y. original , and assume that there is a virtual View Group2, then in a scene with multiple layers of View Tree, after View Group2 is drawn and highly compressed, this distance becomes y current =y original *s ratio , the displacement distance of View is y move =y current -y original =y original *(s ratio -1);

[0122] Step 1806, generate an application interface after display optimization. Figure 22 is a schematic diagram of the application interface displayed on the first screen based on the first layout, and Figure 23 is a schematic diagram of the application interface displayed on the first screen based on the second layout. Comparing Figures 22 and 23, after the application interface optimizes the first display block with an excessively large display ratio, the content of the first display block with an excessively large display ratio can be displayed at a normal ratio, and in addition to the normal display block 2201, the normal display block 2202 and the first display block 2203 on the screen, more block content can be displayed, such as the normal display block 2204 and the normal display block 2205.

[0123] In this embodiment, based on a set of layout configurations of the application, the application can perform overall optimization of the first display block with an excessively large display ratio when the folding screen is unfolded, so that the interface elements can show a better display ratio, and compared with the original layout, more block content can be displayed on the screen, allowing users to get a better application usage experience on these large screens.

[0124] It should be noted that the interface display method provided in the embodiments of the present application can be executed by an interface display device or a control module in the interface display device for executing the interface display method. In the embodiments of the present application, the interface display device provided in the embodiments of the present application is described by taking the interface display device executing the interface display method as an example.

[0125] Referring to FIG. 24 , FIG. 24 is a schematic diagram of the structure of an interface display device provided in an embodiment of the present application, wherein the device includes:

[0126] An acquisition module 2401 is configured to acquire, when an application interface is displayed on a first screen based on a first layout, a first display block of the application interface, wherein a display ratio of the first display block on the first screen based on the first layout is greater than a display ratio of the first display block on the second screen based on the first layout;

[0127] A ratio adjustment module 2402 is configured to adjust the display ratio of the first display block based on a compression ratio determined based on display parameters of the first screen and the second screen to obtain drawing information of the first display block;

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

[0129] The display module 2404 is configured to display the application interface on the first screen according to the second layout.

[0130] Optionally, the ratio adjustment module 2402 includes:

[0131] a measurement and compression submodule, configured to perform measurement height compression on a second display block based on a compression ratio, where the second display block is a display block of a root node of a block tree structure to which the first display block belongs;

[0132] The drawing processing submodule is configured to perform 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 includes drawing compression.

[0133] Optionally, the drawing processing submodule includes:

[0134] a first drawing compression unit, configured to, when the block tree structure has at least two levels, perform drawing height compression on a third display block using a center point of a top of a border as an anchor point based on the compression ratio, the third display block being a display block other than the second display block in the block tree structure;

[0135] The second drawing compression unit is configured to compress the drawing width of the interface elements in the first display block based on the compression ratio to obtain drawing information of the first display block.

[0136] Optionally, the second drawing compression unit is specifically configured to:

[0137] When the width of the interface element is less than or equal to a threshold, determining a drawing compression anchor point of the interface element based on a layout position of the interface element;

[0138] Based on the compression ratio, the interface element is compressed in drawing width using the drawing compression anchor point.

[0139] Optionally, the layout position includes a first distance and a second distance, the first distance being the distance between the interface element and the left line of the border of the first display block, and the second distance being the distance between the interface element and the right line of the border of the first display block; the second drawing compression unit is specifically configured to:

[0140] When the difference between the first distance and the second distance is within an error range, the center point of the border of the interface element is used as a drawing compression anchor point;

[0141] If the difference between the first distance and the second distance is not within the error range and the first distance is greater than the second distance, the center point of the right line of the border of the interface element is used as the drawing compression anchor point;

[0142] When the difference between the first distance and the second distance is not within the error range and the first distance is smaller than the second distance, the center point of the left line in the border of the interface element is used as the drawing compression anchor point.

[0143] Optionally, the drawing processing submodule includes:

[0144] a third drawing compression unit, configured to, when the block tree structure has one level, perform drawing height compression and drawing width compression on the interface elements in the first display block based on the compression ratio;

[0145] A drawing displacement unit is used to perform a drawing displacement on 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, where the first direction is a direction corresponding to the border height of the interface element.

[0146] Optionally, the first screen is a screen used for display when the folding screen is in the unfolded state, and the second screen is a screen used for display when the folding screen is in the folded state; 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.

[0147] In this embodiment, when an application interface has an excessively large display ratio on a first screen based on a first layout, the display ratio of the first display block of the application interface, which has an excessively large display ratio, is obtained. Based on the compression ratio determined by the display parameters of the first and second screens, the display ratio of the first display block is adjusted to obtain drawing information for the first display block. Based on the drawing information, a second layout is generated, and the application interface is displayed on the first screen according to the second layout. In this way, by optimizing the display ratio of the first display block of the application interface, based on the first layout, display compatibility of the application interface is achieved on screens with different display parameters.

[0148] The interface display device in the embodiments of the present application can be a device, or a component, integrated circuit, or chip in the interface display device. The interface display device can be a mobile electronic device or a non-mobile electronic device. For example, the mobile electronic device can be a mobile phone, a tablet computer, a laptop computer, a PDA, an in-vehicle electronic device, a wearable device, an ultra-mobile personal computer (UMPC), a netbook, or a personal digital assistant (PDA), etc. The non-mobile electronic device can be a server, a network attached storage (NAS), a personal computer (PC), a television (TV), an ATM, or an kiosks, etc., which are not specifically limited in the embodiments of the present application.

[0149] The interface display device in the embodiment of the present application may be a device having an operating system. The operating system may be an Android operating system, an iOS operating system, or other possible operating systems, which are not specifically limited in the embodiment of the present application.

[0150] The interface display device provided in the embodiment of the present application can implement each process implemented in the method embodiment of Figure 1 and achieve the same technical effect. To avoid repetition, it will not be repeated here.

[0151] Optionally, as shown in Figure 25, an embodiment of the present application also provides an electronic device 2500, including a processor 2501, a memory 2502, and a program or instruction stored in the memory 2502 and executable on the processor 2501. When the program or instruction is executed by the processor 2501, each process of the above-mentioned interface display method embodiment is implemented, and the same technical effect can be achieved. To avoid repetition, it will not be repeated here.

[0152] It should be noted that the electronic devices in the embodiments of the present application include the mobile electronic devices and non-mobile electronic devices mentioned above.

[0153] FIG26 is a schematic diagram of the hardware structure of an electronic device implementing an embodiment of the present application.

[0154] 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, and a processor 2610. The electronic device 2600 also has an under-screen fingerprint sensor area.

[0155] Those skilled in the art will appreciate that the electronic device 2600 may further include a power source (e.g., a battery) to power various components. The power source may be logically connected to the processor 2610 via a power management system, thereby enabling the power management system to manage charging, discharging, and power consumption. The electronic device structure shown in FIG26 does not limit the electronic device. The electronic device may include more or fewer components than shown, or may combine certain components, or have different component arrangements, which will not be described in detail here.

[0156] Processor 2610 is configured to, when an application interface is displayed on a first screen based on a first layout, obtain a first display area of ​​the application interface, wherein a display ratio of the first display area on the first screen based on the first layout is greater than a display ratio on a second screen based on the first layout; adjust the display ratio of the first display area based on a compression ratio to obtain drawing information for the first display area, wherein the compression ratio is determined based on display parameters of the first and second screens; and generate a second layout based on the drawing information, wherein a display ratio of the first display area on the first screen based on the second layout is less than a display ratio on the first screen based on the first layout;

[0157] The display unit 2606 is configured to display the application interface on the first screen according to the second layout.

[0158] In this embodiment, when an application interface has an excessively large display ratio on a first screen based on a first layout, the display ratio of the first display block of the application interface, which has an excessively large display ratio, is obtained. Based on the compression ratio determined by the display parameters of the first and second screens, the display ratio of the first display block is adjusted to obtain drawing information for the first display block. Based on the drawing information, a second layout is generated, and the application interface is displayed on the first screen according to the second layout. In this way, by optimizing the display ratio of the first display block of the application interface, based on the first layout, display compatibility of the application interface is achieved on screens with different display parameters.

[0159] Optionally, the processor 2610 is further configured to:

[0160] Based on the compression ratio, measuring height compression is performed on a second display block, where the second display block is a display block of a root node of a block tree structure to which the first display block belongs;

[0161] Based on the block tree structure and the compression ratio, a drawing process is performed on the interface elements in the first display block to obtain drawing information of the first display block, where the drawing process includes drawing compression.

[0162] Optionally, the processor 2610 is further configured to:

[0163] When the block tree structure has at least two levels, based on the compression ratio, performing drawing height compression on a third display block with a center point of a top of a border as an anchor point, the third display block being a display block in the block tree structure excluding the second display block;

[0164] Based on the compression ratio, the drawing width of the interface elements in the first display block is compressed to obtain the drawing information of the first display block.

[0165] Optionally, the processor 2610 is further configured to:

[0166] When the width of the interface element is less than or equal to a threshold, determining a drawing compression anchor point of the interface element based on a layout position of the interface element;

[0167] Based on the compression ratio, the interface element is compressed in drawing width using the drawing compression anchor point.

[0168] Optionally, the layout position includes a first distance and a second distance, the first distance being the distance between the interface element and the left line of the border of the first display block, and the second distance being the distance between the interface element and the right line of the border of the first display block; the processor 2610 is further configured to:

[0169] When the difference between the first distance and the second distance is within an error range, the center point of the border of the interface element is used as a drawing compression anchor point;

[0170] If the difference between the first distance and the second distance is not within the error range and the first distance is greater than the second distance, the center point of the right line of the border of the interface element is used as the drawing compression anchor point;

[0171] When the difference between the first distance and the second distance is not within the error range and the first distance is smaller than the second distance, the center point of the left line in the border of the interface element is used as the drawing compression anchor point.

[0172] Optionally, the processor 2610 is further configured to:

[0173] When the block tree structure has one level, based on the compression ratio, performing drawing height compression and drawing width compression on the interface elements in the first display block respectively;

[0174] Based on the compression ratio, the interface element in the first display block is rendered and displaced in a first direction to obtain rendering information of the first display block, where the first direction is a direction corresponding to a border height of the interface element.

[0175] Optionally, the first screen is a screen used for display when the folding screen is in the unfolded state, and the second screen is a screen used for display when the folding screen is in the folded state; 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.

[0176] It should be understood that in an embodiment of the present application, the input unit 2604 may include a graphics processing unit (GPU) 26041 and a microphone 26042, and the graphics processor 26041 processes the image data of a static picture or video obtained by an image capture device (such as a camera) in a video capture mode or an image capture 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, etc. The user input unit 2607 includes a touch panel 26071 and at least one of other input devices 26072. The touch panel 26071 is also called 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 (such as volume control keys, switch keys, etc.), a trackball, a mouse, and a joystick, which will not be repeated here.

[0177] Memory 2609 can be used to store software programs and various data. Memory 2609 may mainly include a first storage area for storing programs or instructions and a second storage area for storing data. The first storage area may store an operating system, applications or instructions required for at least one function (such as a sound playback function, an image playback function, etc.). In addition, memory 2609 may include volatile memory or non-volatile memory, or memory 2609 may include both volatile and non-volatile memory. The non-volatile memory may be a read-only memory (ROM), a programmable read-only memory (PROM), an erasable programmable read-only memory (EPROM), an electrically erasable programmable read-only memory (EEPROM), or a flash memory. Volatile memory can be random access memory (RAM), static random access memory (SRAM), dynamic random access memory (DRAM), synchronous dynamic random access memory (SDRAM), double data rate synchronous dynamic random access memory (DDRSDRAM), enhanced synchronous dynamic random access memory (ESDRAM), synchronous link dynamic random access memory (SLDRAM), and direct RAM bus random access memory (DRRAM). The memory 2609 in the embodiment of the present application includes but is not limited to these and any other suitable types of memory.

[0178] Processor 2610 may include one or more processing units. In some embodiments, processor 2610 integrates an application processor and a modem processor. The application processor primarily handles operations related to the operating system, user interface, and application programs, while the modem processor primarily processes wireless communication signals, such as a baseband processor. It is understood that the modem processor may not be integrated into processor 2610.

[0179] An embodiment of the present application also provides a readable storage medium, on which a program or instruction is stored. When the program or instruction is executed by a processor, the various processes of the above-mentioned interface display method embodiment are implemented and the same technical effect can be achieved. To avoid repetition, it will not be repeated here.

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

[0181] An embodiment of the present application further provides a chip, which includes a processor and a communication interface, wherein the communication interface is coupled to the processor, and the processor is used to run programs or instructions to implement the various processes of the above-mentioned interface display method embodiment, and can achieve the same technical effect. To avoid repetition, it will not be repeated here.

[0182] It should be understood that the chip mentioned in the embodiments of the present application can also be called a system-level chip, a system chip, a chip system or a system-on-chip chip, etc.

[0183] An embodiment of the present application provides a computer program product, which is stored in a storage medium. The program product is executed by at least one processor to implement the various processes of the above-mentioned interface display method embodiment and can achieve the same technical effect. To avoid repetition, it will not be repeated here.

[0184] It should be noted that, in this article, the terms "comprise", "include" or any other variants thereof are intended to cover non-exclusive inclusion, so that a process, method, article or device comprising a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, article or device. In the absence of further restrictions, an element defined by the statement "comprises a ..." does not exclude the presence of other identical elements in the process, method, article or device comprising the element. In addition, it should be noted that the scope of the methods and devices in the embodiments of the present application is not limited to performing functions in the order shown or discussed, and may also include performing functions in a substantially simultaneous manner or in the opposite order according to the functions involved. For example, the described method may be performed in an order different from that described, and various steps may also be added, omitted, or combined. In addition, the features described with reference to certain examples may be combined in other examples.

[0185] Through the description of the above implementation methods, those skilled in the art can clearly understand that the above-mentioned embodiment methods can be implemented by means of software plus the necessary general hardware platform, and of course can also be implemented by hardware, but in many cases the former is a better implementation method. Based on this understanding, the technical solution of the present application is essentially or the part that contributes to the prior art can be embodied in the form of a computer software product, which is stored in a storage medium (such as ROM / RAM, magnetic disk, optical disk), including a number of instructions for enabling an electronic device (which can be a mobile phone, computer, server, or network device, etc.) to execute the methods described in each embodiment of the present application.

[0186] The embodiments of the present application are described above in conjunction with the accompanying drawings, but the present application is not limited to the above-mentioned specific implementation methods. The above-mentioned specific implementation methods are merely illustrative and not restrictive. Under the guidance of this application, ordinary technicians in this field can also make many forms without departing from the purpose of this application and the scope of protection of the claims, all of which are within the protection of this application.

Claims

1. An interface display method, the method comprising: When the application interface is displayed on the first screen based on the first layout, obtaining a first display block of the application interface, wherein the display ratio of the first display block based on the first layout on the first screen is greater than the display ratio based on the first layout on the second screen; Based on a compression ratio, adjusting the display ratio of the first display block to obtain rendering information of the first display block, the compression ratio being determined based on display parameters of the first screen and the second screen; Based on the rendering information, generating a second layout, wherein the display ratio of the first display block based on the second layout on the first screen is less than the display ratio based on the first layout on the first screen; Displaying the application interface on the first screen according to the second layout.

2. The method according to claim 1, wherein The adjusting the display ratio of the first display block based on the compression ratio to obtain the rendering information of the first display block includes: Based on the compression ratio, performing measurement height compression on a second display block, the second display block being a display block of a root node of a block tree structure to which the first display block belongs; Based on the block tree structure and the compression ratio, performing rendering processing on interface elements in the first display block to obtain the rendering information of the first display block, the rendering processing including rendering compression.

3. The method according to claim 2, wherein The performing rendering processing on interface elements in the first display block based on the block tree structure and the compression ratio to obtain the rendering information of the first display block includes: When the level of the block tree structure is at least two levels, based on the compression ratio, performing rendering height compression on a third display block with the center point of the top border as an anchor point, the third display block being a display block in the block tree structure other than the second display block; Based on the compression ratio, performing rendering width compression on interface elements in the first display block to obtain the rendering information of the first display block.

4. The method according to claim 3, wherein, The performing rendering width compression on interface elements in the first display block based on the compression ratio includes: When the width of the interface element is less than or equal to a threshold, determining a rendering compression anchor point of the interface element based on the layout position of the interface element; Based on the compression ratio, performing rendering width compression on the interface element with the rendering compression anchor point.

5. The method according to claim 4, wherein, The layout position includes a first distance and a second distance, the first distance being the distance between the interface element and the left border line of the first display block, and the second distance being the distance between the interface element and the right border line of the first display block; the determining the rendering compression anchor point of the interface element based on the layout position of the interface element includes at least one of the following: When the difference between the first distance and the second distance is within an error range, using the center point of the border of the interface element as the rendering compression anchor point; When the difference between the first distance and the second distance is not within the error range and the first distance is greater than the second distance, the center point of the right side line in the border of the interface element is used as the drawing compression anchor point; When the difference between the first distance and the second distance is not within the error range and the first distance is less than the second distance, the center point of the left side line in the border of the interface element is used as the drawing compression anchor point.

6. The method according to claim 2, wherein The drawing process of the interface elements in the first display block based on the block tree structure and the compression ratio to obtain the drawing information of the first display block includes: When the level of the block tree structure is one layer, the drawing height compression and drawing width compression are respectively performed on the interface elements in the first display block based on the compression ratio; Based on the compression ratio, the drawing displacement of the interface elements in the first display block is performed in the first direction to obtain the drawing information of the first display block, and the first direction is the direction corresponding to the border height of the interface element.

7. The method according to claim 1, wherein, The first screen is the screen used for display when the folding screen is in the unfolded state, and the second screen is the screen used for display when the folding screen is in the folded state; 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.

8. An interface display device, the device includes: An acquisition module, configured to acquire a first display block of the application interface when the application interface is displayed on the first screen based on a first layout, and the display ratio of the first display block based on the first layout on the first screen is greater than the display ratio based on the first layout on the second screen; A ratio adjustment module, configured to adjust the display ratio of the first display block based on a compression ratio to obtain the drawing information of the first display block, and the compression ratio is determined based on the display parameters of the first screen and the second screen; A generation module, configured to generate a second layout based on the drawing information, and the display ratio of the first display block based on the second layout on the first screen is less than the display ratio based on the first layout on the first screen; A display module, configured to display the application interface on the first screen according to the second layout.

9. The device according to claim 8, wherein The ratio adjustment module includes: A measurement compression sub-module, configured to perform measurement height compression on a second display block based on a compression ratio, and the second display block is the display block of the root node of the block tree structure to which the first display block belongs; A drawing process sub-module, configured to perform a drawing process on the interface elements in the first display block based on the block tree structure and the compression ratio to obtain the drawing information of the first display block, and the drawing process includes drawing compression.

10. The device according to claim 9, wherein, The drawing process sub-module includes: The first drawing compression unit is configured to perform drawing height compression on a third display block with the center point at the top of the border as an anchor point based on the compression ratio when the level of the block tree structure is at least two layers, where the third display block is a display block in the block tree structure other than the second display block; The second drawing compression unit is configured to perform drawing width compression on the interface elements in the first display block based on the compression ratio to obtain the drawing information of the first display block.

11. The device according to claim 9, wherein, The drawing processing sub-module includes: The third drawing compression unit is configured to perform drawing height compression and drawing width compression on the interface elements in the first display block respectively based on the compression ratio when the level of the block tree structure is one layer; The drawing displacement unit is configured to perform drawing displacement on the interface elements in the first display block in a first direction based on the compression ratio to obtain the drawing information of the first display block, where the first direction is the direction corresponding to the border height of the interface elements.

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

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

Images