WO2024027696A1 - Page display method and related apparatus - Google Patents

Abstract

A page display method and a related apparatus, relating to the technical field of terminals. The method comprises: displaying a first page on a foldable screen in a folded state (501); when detecting that the foldable screen is unfolded, obtaining a third page on the basis of measurements and layouts in respect of elements in the first page (502); performing re-layout of a target element in the third page to obtain the position of the target element after the re-layout, the target element being a view or a view group (503); drawing on the basis of the position of the target element after the re-layout to obtain a second page (504), the absolute layout of the target element in the third page being different from the absolute layout of the target element in the second page; and displaying the second page on the foldable screen in an unfolded state (505). By performing re-layout of a target element in a page, a page displayed on a foldable screen in an unfolded state matches a screen of the foldable screen in the unfolded state, thereby improving the user experience.

Description

Page display method and related devices

This application claims priority to the Chinese patent application filed with the China Patent Office on August 2, 2022, with the application number 202210923735.6 and the application name "Page Display Method and Related Devices", the entire content of which is incorporated into this application by reference.

Technical field

The present application relates to the field of terminal technology, and more specifically, to a page display method and related devices.

Background technique

With the emergence of foldable screen mobile phones, the adaptation of application page display to the terminal screen has attracted more and more attention.

Currently, when a user changes the folding screen of a folding screen mobile phone from the folded state to the unfolded state, and when displaying the page of the application on the folding screen in the unfolded state, the user usually first changes the page of the application displayed on the folding screen in the folding state. Magnify according to the preset magnification ratio (for example, the magnification ratio is 2 times, or 3 times, etc.), and then display the enlarged page on the folding screen in the expanded state.

However, since the area of the enlarged page is usually larger than the area of the folding screen in the unfolded state, it is easy for the content to be incompletely displayed when the enlarged page is displayed on the folding screen in the unfolded state. The application page does not match the expanded screen, which affects the user experience.

Contents of the invention

This application provides a page display method and related devices, in order to realize the adaptation of the application page to the screen in the expanded state and improve the user experience.

In a first aspect, the present application provides a page display method, which is applied to an electronic device. The method includes: displaying a first page on a folding screen in a folded state; and when detecting that the folding screen is unfolded, displaying the first page based on the Measure and layout the elements to obtain the third page; re-layout the target element in the third page to obtain the re-layout position of the target element, which is a view or view group; based on the re-layout position of the target element Draw to obtain the second page. The absolute layout of the target element in the third page is different from the absolute layout in the second page; the folding screen in the expanded state displays the second page.

The measurement of the elements in the first page can be used to determine the size of the elements in the third page, and the layout of the elements in the first page can be used to determine the position of the elements in the third page.

Target elements can be predefined. For example, the target element can be determined by testing the pages of different applications before the device leaves the factory. Specifically, it can include: some elements on the page that may fall outside the scope of the folding screen after the folding screen is expanded from the folded state, or are incompletely displayed. elements, etc. This application does not limit this.

Based on the above method, when the electronic device detects that the folding screen changes from the folded state to the unfolded state, it first uses the size and position of the elements in the first page displayed on the folding screen in the folded state as a benchmark, and obtains it through measurement and layout. On the third page, the position of some or all elements in the third page (that is, the above-mentioned target element) is re-layout, and then the second page can be obtained by drawing according to the re-layout position of the target element. The page is displayed on the folding screen. In this way, the page that the user sees after unfolding the folding screen is the second page. Before drawing the second page, considering that the target element may fall outside the scope of the folding screen, it is re-layout. As a result, the second page presented to the user contains all the elements in the first page, which can avoid the situation where the elements in the first page are not fully displayed after the folding screen is unfolded. In other words, the page displayed on the folding screen can be consistent with the screen. Adapt accordingly, thus improving the user experience.

With reference to the first aspect, in some possible implementations of the first aspect, relayout of the target element in the third page includes: obtaining configuration information, the configuration information is used to indicate that the target element is before relayout The initial position before relayout and the target position after relayout of the target element are different; based on the configuration information, the target element in the third page is relayout.

The target element in the third page is rearranged through the preset configuration information, so that the electronic device can adjust the position of the target element in the third page according to the instructions of the configuration information, without having to temporarily perform a large amount of calculations. Determine the display position of each target element to improve the efficiency of relayout.

Combined with the first aspect, in some possible implementations of the first aspect, the configuration information indicates the initial positions before relayout and the target positions after relayout of multiple elements in the third page; the multiple elements A plurality of views is included, or the plurality of elements includes at least one view group and a plurality of views in at least one view group, and the plurality of elements includes the target element.

The plurality of elements may be elements in a part of the area on the third page, or may be elements in all areas on the third page. The multiple elements include target elements that need to be re-layout and target elements that do not need to be re-layout.

In some possible implementations, before relayout of the target element in the third page based on the configuration information, the method further includes: based on the initial position and sum of each of the multiple elements indicated by the configuration information. Target position, determine the target element that needs to be re-layout; match the target element on the third page.

By comparing the difference between the initial position and the target position of each element indicated by the configuration information, the target element can be quickly selected from multiple elements, thereby speeding up the efficiency of locating the target element on the third page.

In conjunction with the first aspect, in some possible implementations of the first aspect, the multiple elements include at least one view group and multiple views in the at least one view group, and among the multiple elements indicated based on the configuration information The initial position and target position of each element, determine the target element that needs to be re-layout, including: based on the hierarchical structure of each element in multiple elements, traversing the order of each element in multiple elements in order from parent elements to child elements. Initial position and target position to determine the target element that needs to be re-layout.

By traversing the hierarchical structure of each element to find the target element, the target element can be accurately determined and the target element can be avoided from being missed.

In conjunction with the first aspect, in some possible implementations of the first aspect, matching the target element in the third page includes: based on the position of the multiple elements in the third page and the target element indicated in the configuration information. The initial position matches the target element in the third page.

In connection with the first aspect, in some possible implementations of the first aspect, the configuration information is also used to indicate the identity of each element in the plurality of elements; the matching of the target element in the third page includes: according to the plurality of elements The identifier of the element and the identifier of the target element indicated in the configuration information match the target element in the third page.

Combined with the first aspect, in some possible implementations of the first aspect, the configuration information is also used to indicate the magnification ratio of the page, and the initial position and target position of each element among the multiple elements indicated by the configuration information are based on The magnification ratio is determined.

Among them, the enlargement ratio can satisfy the following conditions: 0<R≤N, where N is the ratio between the screen width of the folding screen when it is fully unfolded and the screen width of the folding screen in the folded state. In one possible design, when N=2, R can take a value of 1.2.

By configuring information to indicate the magnification ratio of the page, the elements in the page can be appropriately enlarged according to the magnification requirements, which can avoid the elements in the page displayed on the folding screen in the expanded state from being too large, making the enlarged elements different from the expanded ones. It adapts to the screen of the folding screen in the state to improve the user experience.

In an implementable manner, the configuration information is also used to indicate the screen width occupied by the third page when the folding screen of the electronic device is in the unfolded state.

The screen width Q occupied by the third page can meet the following conditions: Qx=Ry, where Q is the screen width occupied by the third page when the electronic device is in the expanded state, x is the screen width of the electronic device in the expanded state, y is the screen width of the electronic device in the folded state, and R is the enlargement ratio.

Combined with the first aspect, in some possible implementations of the first aspect, when the amplification ratio is greater than 1, the configuration information is also used to indicate the storage path of the resource, and the resource is with the folding screen in the unfolded state. Display resources with matching resolutions.

When the amplification ratio indicated by the configuration information is greater than 1, the configuration information indicates the storage path of the resource that matches the display resolution of the folding screen in the unfolded state, thereby improving the resolution of the page displayed by the folding screen in the unfolded state. The clarity of elements also improves the user experience.

Combined with the first aspect, in some possible implementations of the first aspect, the first page is a page of an application, and the obtaining configuration information includes: based on the Activity component corresponding to the page of the application, obtaining the Activity component Corresponding configuration information.

In a second aspect, this application provides a page display device, which includes a module for executing the first aspect and any possible implementation manner of the first aspect.

In a third aspect, this application provides a page display device, including a memory and a processor. The memory is used to store a computer program, and the processor is used to execute the computer program to execute the first aspect and any possible implementation of the first aspect. .

In a fourth aspect, the present application provides an electronic device. The electronic device includes a processor and a memory. The memory is used to store a computer program. The processor is used to call the computer program in the memory to execute the first aspect and the first aspect. method in any of the possible implementations.

In a fifth aspect, this application provides a chip, which includes a processor configured to call a computer program in a memory to execute the method in the first aspect and any possible implementation of the first aspect.

In a sixth aspect, the present application provides a computer-readable storage medium, including a computer program. When the computer program is run on a computer, the electronic device causes the electronic device to execute the method in the first aspect and any possible implementation of the first aspect. .

In a seventh aspect, the present application provides a computer program product, including a computer program, which when the computer program is run on a computer, causes the electronic device to execute the method in the first aspect and any possible implementation of the first aspect.

It should be understood that the second to seventh aspects of the present application correspond to the technical solution of the first aspect of the present application, and the beneficial effects achieved by each aspect and corresponding feasible implementations are similar, and will not be described again.

Description of the drawings

Figure 1 is a schematic diagram of the appearance of an electronic device provided by an embodiment of the present application;

Figure 2 is a schematic structural diagram of elements provided by the embodiment of the present application;

Figure 3a is a schematic diagram of the hardware structure of an electronic device provided by an embodiment of the present application;

Figure 3b is a structural block diagram of the software and hardware of the electronic device provided by the embodiment of the present application;

Figure 4 is a schematic interface diagram of an electronic device providing a page display according to an embodiment of the present application;

Figure 5 is a schematic flow chart of a page display method provided by an embodiment of the present application;

Figures 6a to 6d are another schematic interface diagram of the electronic device provided by the embodiment of the present application for page display;

Figures 7a to 7e are another schematic interface diagram of the electronic device provided by the embodiment of the present application for page display;

Figure 8 is a schematic diagram of the software architecture of the electronic device provided by the embodiment of the present application;

Figure 9 is a schematic block diagram of a page display device provided by an embodiment of the present application;

FIG. 10 is a schematic diagram of the hardware structure of a page display device provided by an embodiment of the present application.

Detailed ways

The technical solutions in this application will be described below with reference to the accompanying drawings.

The page display method provided by the embodiment of the present application can be applied to electronic devices with flexible screens. When users use electronic devices with flexible screens, they can unfold or fold the screen, that is, the screen can be opened and closed. The screens of electronic devices may include, but are not limited to, outer folding screens, inner folding screens, diagonal folding screens, etc. The screen of an electronic device can be folded at least once, and the corresponding screen can be called a bi-fold folding screen, a tri-fold folding screen, etc. In the following embodiments, the screen of the electronic device is folded once as an example for description. Since the screen of an electronic device can be folded, the screen can also be called a folding screen.

To facilitate understanding, first a brief explanation of several terms involved below.

1. Folded state and unfolded state: The folded state of the electronic device is called the folded state, and the unfolded state of the electronic device is called the unfolded state.

For an electronic device with an outward-folding screen, since the electronic device has one screen, the folded state can be understood as folding the screen in half from the folding line of the screen until the angle between the screens on both sides of the folding line is The state at 0° or approximately 0°. For example, for a bi-fold folding screen, the folding line may be the central axis of the folding screen.

For an electronic device with an inward-folding screen, since the electronic device has multiple independent screens, the folded state may be a state when the angle between the multiple screens is 0° or approximately 0°. For example, for an electronic device with an inward-folding screen that has two independent screens, when the angle between the two screens is 0° or approximately 0°, it means that the folding screen is in a folded state.

For the convenience of explanation below, the angle between the screens on both sides of the folding line of the outward-folding folding screen and the angle between multiple screens of the in-folding folding screen are collectively referred to as the angle between the screens.

Figure 1 exemplarily shows a schematic diagram of the appearance of an electronic device. It should be understood that the folding screen of the electronic device shown in Figure 1 is an outward-folding screen, and the folding screen is a double-folding screen.

(a) in FIG. 1 shows the appearance of the folding screen of the electronic device in the folded state, and (b) in FIG. 1 shows the appearance of the folding screen of the electronic device in the fully unfolded state. Users can unfold or fold the folding screen of electronic devices, such as The different states of the folding screen are converted between (a) in Figure 1 and (b) in Figure 1 .

When the folding screen is in the folded state, the angle between the screens is 0° or approximately 0°. When the folding screen is unfolded, the angle between the screens increases, and the angle between the screens can be in the range of 0° to 180°. Variety. It should be noted that the article only defines the folded state and the unfolded state for the folding screen in order to distinguish different pages displayed by the electronic device in different states, and does not limit the angle between the screens corresponding to the different states. Different equipment manufacturers can define different angle ranges corresponding to the folded state and the unfolded state. In other designs, the folding screen may be defined in more states, such as intermediate state, stand state, etc., which are not limited in this application.

It should be noted that the different pages displayed by the electronic device in different states mentioned here refer to the pages of the same application (application, APP). Although the pages displayed in different states are different, these states The pages shown below all contain the same page content, such as the same elements, and the relationships between elements are also the same. Wherein, the elements include views and view groups, and relationships between elements include relationships between views and views and views.

It should be understood that whether the electronic device is in a folded state or an unfolded state, various pages of various applications can be displayed through the folding screen. For example, as shown in Figure 1, the electronic device can display the main page of the desktop application through the folding screen. The pages shown in (a) and (b) in Figure 1 are different pages displayed by the electronic device in different states.

One possible design is that when the electronic device is unfolded from the folded state to a certain preset angle, the displayed page can be switched from a page suitable for the folded state to a page suitable for the unfolded state. The preset angle can be determined by the device. Different equipment manufacturers may define different values for the preset angle, which is not limited in this application.

2. Elements: The page content of the application can include multiple elements. The plurality of elements may include a plurality of views, or the plurality of elements may include at least one view group and a plurality of views in the at least one view group. A view is the smallest unit of an element.

For any page, all the content displayed on the page can be collectively called an element, or the content displayed on the page can be divided into multiple different parts, and each part is called an element.

In a page, elements can be arranged in a hierarchical structure from parent to child elements. Among them, the parent element can include child elements, the parent element can be a view group, and the child elements can be a view or a view group.

The structure of the elements will be exemplified below with reference to Figure 2.

Figure 2 is a schematic structural diagram of elements provided by the embodiment of the present application. As shown in FIG. 2 , the element includes a view group 200 , which may include a view group 210 and a view group 220 . The view group 210 may further include a view 211 and a view group 212, the view group 220 may further include a view 221 and a view 222, and the view group 212 may further include a view 2121 and a view 2122.

It should be understood that view group 200 may be a parent element of view group 210 and view group 220 , and view group 210 and view group 220 may be child elements of view group 200 . View group 210 may be the parent element of view 211 and view group 212 , and view 211 and view group 212 may be child elements of view group 210 . View group 220 may be the parent element of view 221 and view 222 , and view 221 and view 222 may be child elements of view group 220 . View group 212 may be the parent element of view 2121 and view 2122, and view 2121 and view 2122 may be child elements of view group 212.

3. Absolute layout (relative layout): Also known as coordinate layout, the absolute position of the element can be directly specified, and the position of the element can be controlled by setting the X coordinate and Y coordinate of the element. Among them, the X coordinate and Y coordinate of the element are set relative to the predefined coordinate axis.

Electronic devices suitable for the method provided by the embodiments of the present application are introduced below.

Figure 3a is a schematic diagram of the hardware structure of an electronic device provided by an embodiment of the present application.

The electronic device 300 may include a processor 310, an external memory interface 320, an internal memory 321, a universal serial bus (USB) interface 330, a charging management module 340, a power management module 341, an antenna 1, an antenna 2, and a mobile communication Module 350, wireless communication module 360, audio module 370, speaker 370A, receiver 370B, microphone 370C, headphone interface 370D, sensor module 380, button 390, motor 391, indicator 392, camera 393, display screen 394, and user identification module (subscriber identification module, SIM) card interface 395, etc. The sensor module 380 may include a pressure sensor 380A, a gyro sensor 380B, an air pressure sensor 380C, a magnetic sensor 380D, an acceleration sensor 380E, a distance sensor 380F, a proximity light sensor 380G, a fingerprint sensor 380H, a temperature sensor 380J, a touch sensor 380K, and ambient light. Sensor 380L, bone conduction sensor 380M, etc.

It can be understood that the structure illustrated in the embodiment of the present application does not constitute a specific limitation on the electronic device 300 . In other embodiments of the present application, the electronic device 300 may include more or less components than shown in the figures, or combine some components, or separate some components, or or different component arrangements. The components illustrated may be implemented in hardware, software, or a combination of software and hardware.

The processor 310 may include one or more processing units. For example, the processor 310 may include an application processor (application processor, AP), a modem processor, a graphics processing unit (GPU), and an image signal processor. (image signal processor, ISP), controller, video codec, digital signal processor (digital signal processor, DSP), baseband processor, and/or neural network processor (neural-network processing unit, NPU), etc. Among them, different processing units can be independent devices or integrated in one or more processors.

The controller can generate operation control signals based on the instruction operation code and timing signals to complete the control of fetching and executing instructions.

The processor 310 may also be provided with a memory for storing instructions and data. In some embodiments, the memory in processor 310 is cache memory. This memory may hold instructions or data that have been recently used or recycled by processor 310 . If processor 310 needs to use the instructions or data again, it can be called directly from the memory. Repeated access is avoided and the waiting time of the processor 310 is reduced, thus improving the efficiency of the system.

In some embodiments, processor 310 may include one or more interfaces. Interfaces may include integrated circuit (inter-integrated circuit, I2C) interface, integrated circuit built-in audio (inter-integrated circuit sound, I2S) interface, pulse code modulation (pulse code modulation, PCM) interface, universal asynchronous receiver and transmitter (universal asynchronous receiver/transmitter (UART) interface, mobile industry processor interface (MIPI), general-purpose input/output (GPIO) interface, subscriber identity module (SIM) interface, and /or universal serial bus (USB) interface, etc.

It can be understood that the interface connection relationship between the modules illustrated in the embodiment of the present application is only a schematic illustration and does not constitute a structural limitation of the electronic device 300 . In other embodiments of the present application, the electronic device 300 may also adopt different interface connection methods in the above embodiments, or a combination of multiple interface connection methods.

The charge management module 340 is used to receive charging input from the charger. Among them, the charger can be a wireless charger or a wired charger. In some wired charging embodiments, the charging management module 340 may receive charging input from the wired charger through the USB interface 330 . In some wireless charging embodiments, the charging management module 340 may receive wireless charging input through the wireless charging coil of the electronic device 300 . While the charging management module 340 charges the battery, it can also provide power to the electronic device through the power management module 341 .

The power management module 341 is used to connect the battery, the charging management module 340 and the processor 310 . The power management module 341 receives input from the battery and/or charging management module 340 and supplies power to the processor 310, internal memory 321, display screen 394, camera 393, wireless communication module 360, etc. The power management module 341 can also be used to monitor battery capacity, battery cycle times, battery health status (leakage, impedance) and other parameters. In some other embodiments, the power management module 341 may also be provided in the processor 310 . In other embodiments, the power management module 341 and the charging management module 340 can also be provided in the same device.

The wireless communication function of the electronic device 300 can be implemented through the antenna 1, the antenna 2, the mobile communication module 350, the wireless communication module 360, the modem processor and the baseband processor.

Antenna 1 and Antenna 2 are used to transmit and receive electromagnetic wave signals. Each antenna in electronic device 300 may be used to cover a single or multiple communication frequency bands. Different antennas can also be reused to improve antenna utilization. For example: Antenna 1 can be reused as a diversity antenna for a wireless LAN. In other embodiments, antennas may be used in conjunction with tuning switches.

The mobile communication module 350 can provide wireless communication solutions including 2G/3G/4G/5G applied to the electronic device 300 .

The wireless communication module 360 can provide applications on the electronic device 300 including wireless local area networks (WLAN) (such as wireless fidelity (Wi-Fi) network), Bluetooth (bluetooth, BT), and global navigation satellites. System (global navigation satellite system, GNSS), frequency modulation (frequency modulation, FM), near field communication technology (near field communication, NFC), infrared technology (infrared, IR) and other wireless communication solutions.

In some embodiments, the antenna 1 of the electronic device 300 is coupled to the mobile communication module 350, and the antenna 2 is coupled to the wireless communication module 360, so that the electronic device 300 can communicate with the network and other devices through wireless communication technology. The wireless communication technology may include global system for mobile communications (GSM), general packet radio service (GPRS), code division multiple access (CDMA), broadband Code division multiple access (wideband code division multiple access, WCDMA), time-division code division multiple access (TD-SCDMA), long term evolution (long term evolution, LTE), BT, GNSS, WLAN, NFC , FM, and/or IR technology, etc. The GNSS may include global positioning system (GPS), global navigation satellite system (GLONASS), Beidou navigation satellite system (BDS), quasi Zenith satellite system (QZSS) and/or satellite based augmentation systems (SBAS).

The electronic device 300 implements display functions through a GPU, a display screen 394, an application processor, and the like. The GPU is an image processing microprocessor and is connected to the display screen 394 and the application processor. GPUs are used to perform mathematical and geometric calculations for graphics rendering. Processor 310 may include one or more GPUs that execute program instructions to generate or alter display information.

The display screen 394 is used to display images, videos, etc. Display 394 includes a display panel. The display panel can use a liquid crystal display (LCD), an organic light-emitting diode (OLED), an active matrix organic light emitting diode or an active matrix organic light emitting diode (active-matrix organic light emitting diode). emitting diode (AMOLED), flexible light-emitting diode (FLED), MiniLed, MicroLed, Micro-oLed, quantum dot light emitting diode (QLED), etc. In some embodiments, the electronic device 300 may include 1 or N display screens 394, where N is a positive integer greater than 1. The display screen 394 in the embodiment of the present application is a flexible screen that can be folded or unfolded in response to user operations. For relevant introduction, please refer to the screen shown in Figure 1 .

The electronic device 300 can implement the shooting function through an ISP, a camera 393, a video codec, a GPU, a display screen 394, and an application processor.

The external memory interface 320 can be used to connect an external memory card, such as a Micro SD card, to expand the storage capacity of the electronic device 300. The external memory card communicates with the processor 310 through the external memory interface 320 to implement the data storage function. Such as saving music, videos, etc. files in external memory card.

Internal memory 321 may be used to store computer executable program code, which includes instructions. The internal memory 321 may include a program storage area and a data storage area. Among them, the stored program area can store an operating system, at least one application program required for a function (such as a sound playback function, an image playback function, etc.). The storage data area may store data created during use of the electronic device 300 (such as audio data, phone book, etc.). In addition, the internal memory 321 may include high-speed random access memory, and may also include non-volatile memory, such as at least one disk storage device, flash memory device, universal flash storage (UFS), etc. The processor 310 executes various functional applications and data processing of the electronic device 300 by executing instructions stored in the internal memory 321 and/or instructions stored in a memory provided in the processor.

The electronic device 300 can implement audio functions through the audio module 370, the speaker 370A, the receiver 370B, the microphone 370C, the headphone interface 370D, and the application processor. Such as music playback, recording, etc.

The buttons 390 include a power button, a volume button, etc. Key 390 may be a mechanical key. It can also be a touch button. The electronic device 300 may receive key input and generate key signal input related to user settings and function control of the electronic device 300 .

Motor 391 can produce vibration prompts. Motor 391 can be used for vibration prompts for incoming calls and can also be used for touch vibration feedback. For example, touch operations for different applications (such as taking pictures, audio playback, etc.) can correspond to different vibration feedback effects. Acting on touch operations in different areas of the display screen 394, the motor 391 can also correspond to different vibration feedback effects. Different application scenarios (such as time reminders, receiving information, alarm clocks, games, etc.) can also correspond to different vibration feedback effects. The touch vibration feedback effect can also be customized.

The indicator 392 may be an indicator light, which may be used to indicate charging status, power changes, or may be used to indicate messages, missed calls, notifications, etc.

The SIM card interface 395 is used to connect the SIM card. The SIM card can be connected to or separated from the electronic device 300 by inserting it into the SIM card interface 395 or pulling it out from the SIM card interface 395 . In some embodiments, the electronic device 300 uses an eSIM, that is, an embedded SIM card.

Figure 3b is a structural block diagram of software and hardware of an electronic device according to an embodiment of the present application.

As shown in Figure 3b, the layered architecture divides the software into several layers, and each layer has clear roles and division of labor. The layers communicate through software interfaces. In some embodiments, the Android system is divided into four layers, from top to bottom: application layer, application framework layer, Android runtime and system library, and kernel layer.

The application layer can include a series of application packages. As shown in Figure 3b, the application layer may include lock screen applications, desktop applications, etc. Desktop applications may further include, for example, cameras, galleries, calendars, calls, maps, navigation, WLAN, Bluetooth, music, videos, games, shopping, travel, instant messaging (such as SMS, WeChat, etc.), smart home, device control and other applications. program.

Among them, smart home applications can be used to control or manage home devices with networking capabilities. For example, home appliances may include lights, televisions, and air conditioners. As another example, home equipment can also include anti-theft door locks, speakers, sweeping robots, sockets, body fat scales, desk lamps, air purifiers, refrigerators, washing machines, water heaters, microwave ovens, rice cookers, curtains, fans, TVs, set-top boxes, Doors, windows, etc.

The application framework layer provides an application programming interface (API) and programming framework for applications in the application layer. The application framework layer includes some predefined functions.

As shown in Figure 3b, the application framework layer can include ActivityManagerService, view system, window management service (window manager service, WMS), SurfaceFlinger, etc. The embodiments of this application do not impose any limitation on this.

WMS can also be called a window manager, which can be used to manage window programs. It is responsible for starting, adding, and deleting windows. The level and size of the window are also managed by WMS. Windows do not have the drawing function, so each window requires a Surface for drawing. The allocation of Surface to each window is completed by WMS.

ActivityManagerService, referred to as AMS, is a very important service in Android. It manages the four major components of Android, namely, activity, service, broadcast and content provider. components. AMS can also schedule various application processes in a unified manner.

SurfaceFlinger can be used to receive multiple graphic display data and synthesize these graphic display data, that is, perform layer synthesis to obtain the interface to be displayed.

SurfaceFlinger is the core process of rendering in the entire Android system. All application rendering logic will eventually come to SurfaceFlinger for processing, such as image synthesis. SurfaceFlinger will hand over the synthesized image data to the central processing unit (CPU) or graphics processing unit (GPU) for rendering. It should be understood that the specific principles of SurfaceFlinger can be referred to the existing technology and will not be described again here.

The view system includes visual controls, such as controls that display text, controls that display pictures, etc. A view system can be used to build applications. The display interface can be composed of one or more views. For example, a display interface including a text message notification icon may include a view for displaying text and a view for displaying pictures.

The Android runtime can include core libraries and virtual machines. The Android runtime is responsible for the scheduling and management of the Android system.

The core library can contain two parts: one part is the functional functions that need to be called by the Java language, and the other part is the core library of the Android system.

The application layer and application framework layer run in virtual machines. The virtual machine executes the java files of the application layer and application framework layer into binary files. The virtual machine is used to perform object life cycle management, stack management, thread management, security and exception management, as well as garbage collection and other functions.

System libraries can include multiple functional modules. For example: status monitoring services, surface managers (surface managers), media libraries (media libraries), three-dimensional graphics processing libraries (for example, OpenGLES), two-dimensional (2 dimensions, 2D) graphics engines (for example, SGL), etc.

The status monitoring service is used to determine the specific orientation of the mobile phone, the physical status of the flexible screen, etc. based on the monitoring data reported by the kernel layer. The surface manager is used to manage the display subsystem and provides the fusion of 2D and 3 dimensions (3D) layers for multiple applications. The media library supports playback and recording of a variety of commonly used audio and video formats, as well as static image files, etc. The media library can support multiple audio and video encoding formats, such as MPEG4, H.264, MP3, AAC, AMR, JPG, PNG, etc. The 3D graphics processing library is used to implement 3D graphics drawing, image rendering, composition and layer processing. 2D Graphics Engine is a drawing engine for 2D drawing.

The kernel layer is the layer between hardware and software. The kernel layer at least includes power management services, sensor services (also called sensor drivers), display services (also called display drivers), camera drivers, audio drivers, etc. The embodiments of this application do not impose any limitations on this.

As shown in Figure 3a, the system library and kernel layer below the application framework layer can be called the underlying system. The underlying system includes the underlying display system used to provide display services. For example, the underlying display system includes the display driver in the kernel layer and the surface manager in the system library.

Underneath the underlying system is hardware, which can provide the basis for software operation. As shown in Figure 3a, the hardware of the electronic device may include, but is not limited to, a power button, a sensor, a display screen, a fingerprint, a camera, etc.

FIG. 4 is a schematic interface diagram of an electronic device providing a page display according to an embodiment of the present application.

As shown in (a) of Figure 4, a page 401 of an application is displayed on the folding screen in the folded state. The page 401 contains the following elements: number "1", number "2", number "3" , the number "4", the number "5", the number "6", the number "7" and the number "8", as well as elements that serve as the background of each number (hereinafter referred to as background elements, shown with "○" in the figure).

It should be understood that each number or the background element of each number can be regarded as a view, and a number and a number's background element can be regarded as a view group.

If users want to experience the effect of a tablet, they can unfold the folding screen of the electronic device. As shown in (b) of FIG. 4 , the dotted box in the figure shows the size of the folding screen of the electronic device when it is unfolded. At this time, when the electronic device detects that the folding screen is unfolded, it will The entire page 401 is enlarged by 2 times, that is, the page 401 is enlarged using 2 times the screen width in the folded state as the enlargement ratio, and the enlarged page 401' is obtained. In other words, the width W of the page 401 is widened by 2 times to 2W, and the length H is lengthened by 2 times to 2H. The size of each element in the page 401 is also simultaneously enlarged by 2 times, thereby obtaining the enlarged page 401'.

It can be seen that in the enlarged page 401', the number "5", the number "6", the number "7" and the number "8" and the background elements corresponding to these four numbers fall within the range of the unfolded folding screen. Within, the number “1”, the number “2”, the number “3”, the number “4” and the background elements corresponding to these four numbers fall outside the range of the unfolded folding screen.

It should be understood that the process of obtaining the enlarged page 401' is an internal implementation of the electronic device. In actual applications, this page will not be displayed on the folding screen.

It should also be understood that the amplification ratio used in (b) of FIG. 4 is only an exemplary illustration. In practical applications, the amplification ratio can be determined by the ratio of the width of the screen in the unfolded state and the width of the screen in the folded state. For example, if the width of the screen in the expanded state is twice the width of the screen in the folded state (for example, the folding screen is a folding screen with two folds), then the magnification ratio can be 2 times; if the width of the screen in the expanded state is If the folding screen is three times the width of the screen (for example, the folding screen is a three-fold folding screen), then the magnification ratio can be 3 times.

As shown in (c) of Figure 4, the electronic device determines that the number "5", the number "6", the number "7" and the number "8" and the background elements corresponding to these four numbers fall on the unfolded folding screen. Within the range, drawing can be performed based on the position and size of these elements to obtain the second page 402, and the second page 402 is displayed on the folding screen in the expanded state.

It can be seen that the font size of each number and the size of their respective background elements on the second page 402 are enlarged many times compared to the first page 401, and the content displayed on the second page 402 is larger than the content displayed on the first page 401. Reduce by half.

It can be seen from the above page display method that when the user changes the folding screen of the electronic device from the folded state to the unfolded state, the electronic device will enlarge the page of the application displayed on the folding screen in the folded state according to the enlargement ratio (such as , the magnification ratio is 2 times) for overall enlargement. Since the area of the enlarged page is usually much larger than the area of the folding screen in the unfolded state, this causes the enlarged page to be displayed on the folding screen in the unfolded state. There is a problem of incomplete content display, which means that the application page is prone to not matching the screen in the expanded state, which affects the user experience.

In view of this, this application provides a page display method. When the electronic device detects that the folding screen changes from the folded state to the unfolded state, it re-lays out the positions of some elements in the page displayed on the folding screen in the folded state, and then draws the page according to the re-layout position. The drawn page is displayed on the folded screen in the expanded state. Since these re-layout elements can be pre-defined, that is, the problem of the page falling outside the screen or being incompletely displayed due to the folding screen being expanded has been taken into account in advance. Therefore, re-layout of these elements can avoid some elements in the page from being displayed in full. The display is incomplete after the folding screen is unfolded. In other words, the displayed page can be adapted to the screen in the expanded state, thereby improving the user experience.

Before introducing the embodiments of this application, we first make the following explanations:

First, in the embodiments shown below, the first, second, and various numerical numbers are only for convenience of description and are not used to limit the scope of the embodiments of the present application. For example, distinguish different pages, etc.

Second, “at least one” refers to one or more, and “plurality” refers to two or more. "And/or" describes the association of associated objects, indicating that there can be three relationships, for example, A and/or B, which can mean: A exists alone, A and B exist simultaneously, and B exists alone, where A, B can be singular or plural. The character "/" generally indicates that the related objects are in an "or" relationship. “At least one of the following” or similar expressions thereof refers to any combination of these items, including any combination of a single item (items) or a plurality of items (items). For example, at least one of a, b and c can mean: a, or b, or c, or a and b, or a and c, or b and c, or a, b and c, where a, b, c can be single or multiple.

Third, in the embodiments of this application, words such as “exemplarily” or “for example” are used to represent examples, illustrations or explanations. Any embodiment or design described as "exemplary" or "for example" in the embodiments of the present application shall not be construed as being preferred or advantageous over other embodiments or designs. Rather, the use of words such as "exemplarily" or "for example" is intended to present related concepts in a concrete manner to facilitate understanding.

Figure 5 is a schematic flow chart of a page display method provided by an embodiment of the present application. The method shown in Figure 5 can be executed by a page display device, for example, it can be the electronic device in Figure 3a, or it can be a component in the electronic device, such as a chip, a chip system or other modules that can be used to implement part or all of its functions. , this application does not limit this. For ease of understanding, the method provided by the embodiments of the present application will be described below by taking an electronic device as an example.

Each step in method 500 is described in detail below.

Step 501: Display the first page on the folding screen in the folded state.

As mentioned above, the folded state is the state in which the folding screen of the electronic device is folded. The first page is the page displayed on the folding screen when the folding screen of the electronic device is in the folded state. This page can be any page of any application.

For example, FIG. 6a shows that when the folding screen of the electronic device is in a folded state, the first page 601 is displayed on the folding screen.

Step 502: When it is detected that the folding screen is unfolded, a third page is obtained based on the measurement and layout of elements in the first page.

Among them, measurement refers to determining the size of the element, and the size of the element includes the width and height of the element. Layout refers to determining the position of the element, that is, the coordinates (x, y) of the element.

When the user wants to experience the effect of a tablet, the foldable screen in the folded state can be unfolded. When the electronic device detects that the foldable screen is unfolded, the size of each element in the first page can be determined based on the first preset coordinate axis. (width and height) and coordinates (x, y). After determining the size and coordinates of each element in the first page, the electronic device can obtain the third page based on the second preset coordinate axis and the size and coordinates of each element in the first page.

The first preset coordinate axis is a coordinate axis preset by those skilled in the art when the electronic device is in a folded state. The second preset coordinate axis is the coordinate axis preset by those skilled in the art when the folding screen is unfolded to a preset angle. The origin of the coordinate axis can be set by those skilled in the art according to actual needs. For example, the position of any one of the four vertices of the folding screen can be used as the coordinate origin to establish the coordinate axis, or the position of the middle point of any of the four sides of the folding screen can be used as the coordinate origin to establish the coordinate axis.

When determining the coordinates (x, y) of an element, the coordinates of the center point of the element can be used as the coordinates of the element. When determining the width of an element, the length of the element projected on the x-axis can be used as the width of the element. When determining the height of an element, the length of the element projected on the y-axis can be used as the height of the element.

The origin of the first preset coordinate axis and the origin of the second preset coordinate axis are in different locations. For example, the origin of the first preset coordinate axis is the vertex of the lower left corner of the folding screen, and the origin of the second preset coordinate axis is the vertex of the lower left corner of the folding screen. It is the middle point of the right side of the folding screen. Then, after determining the size and coordinates of each element in the first page, the electronic device needs to first determine the position of each element in the first page based on the coordinate conversion relationship between the first preset coordinate axis and the second preset coordinate axis. The coordinates in the second preset coordinate axis are then used to obtain the third page based on the coordinates of each element in the first page in the second preset coordinate axis and the size of each element.

The following is an exemplary description of the implementation process of the electronic device obtaining the third page with reference to FIG. 6a and FIG. 6b.

It should be noted that in this example, the first preset coordinate axis is a coordinate axis established with the vertex of the lower left corner of the folding screen in the folded state shown in Figure 6a as the coordinate origin, and the second preset coordinate axis is based on Figure 6a When the folding screen shown in 6b is unfolded to 180°, the vertex of the lower left corner of the folding screen is the coordinate axis established by the coordinate origin. That is, the first preset coordinate axis used in Figure 6a and the second preset coordinate axis used in Figure 6b are the same coordinate axis.

As shown in Figure 6a, a first page 601 is displayed on the folding screen in the folded state. Assume that the elements in the first page 601 include eight view groups, namely a1, a2, a3, a4, a5, a6, a7 and a8. Each view group includes two views. Specifically, the two views included in a1 are a11 and a12, the two views included in a2 are a21 and a22, and the two views included in a3 are a31, a32, and a4. The two views included are a41 and a42 respectively, the two views included in a5 are a51 and a52 respectively, the two views included in a6 are a61 and a62 respectively, the two views included in a7 are a71 and a72 respectively, and a8 includes The two views are a81 and a82 respectively.

When the electronic device detects that the folding screen is unfolded, it can use the first preset coordinate axis shown in Figure 6a as a reference to determine eight view groups, that is, the width, height and coordinates of a1 to a8, and determine the 16 views, that is, the width, height and coordinates of a11, a12, a21, a22, a31, a32, a41, a42, a51, a52, a61, a62, a71, a72, a81 and a82.

As shown in Figure 6b, after the electronic device determines the width, height and coordinates of each element in the first page 601, it can use the second preset coordinate system shown in Figure 6b as a reference to determine a1 to a8, a11, a12, The positions of a21, a22, a31, a32, a41, a42, a51, a52, a61, a62, a71, a72, a81 and a82 respectively in the second preset coordinate axis, and then according to the positions of these elements in the second preset coordinate axis By determining the position in the axis and determining the respective width and height, the third page 602 can be obtained.

It should be understood that the first preset coordinate axis in Figure 6a and the second preset coordinate axis in Figure 6b are the same coordinate axis. Therefore, the position of each element in the second preset coordinate axis determined by the electronic device is the same as the position of each element in the first preset coordinate axis, without coordinate conversion.

It should be noted that the third page involved in this application is a page generated internally by the electronic device and will not be displayed through the folding screen. displayed on the screen.

Step 503: Relayout the target element in the third page to obtain the rearranged position of the target element. The target element is a view or a view group.

Among them, re-layout of the target element can be understood as re-determining the position of the target element.

The target element is the element in the third page that needs to be re-layout, that is, the element that needs to be repositioned.

The process of the electronic device rearranging the target elements in the third page can be implemented through the following steps 1) to 2).

Step 1): Obtain configuration information. The configuration information is used to indicate the initial position of the target element before relayout and the target position after relayout. The initial position of the target element before relayout and the target position after relayout are different.

Those skilled in the art can configure pages with page layout problems to obtain configuration information. For pages of applications with page layout problems, each page corresponds to one configuration information.

Optionally, the electronic device can obtain configuration information in the following ways:

Based on the Activity component corresponding to the application page, obtain the configuration information corresponding to the Activity component.

In an implementable manner, the electronic device can find the corresponding configuration information among multiple locally pre-stored configuration information based on the name of the Activity component corresponding to the page. Among them, the name of the Activity component will carry information such as the name of the corresponding application and the name of the page. For example, according to the name of an Activity component, it can be determined that the corresponding application is application A and the page is the login page.

When searching for configuration information based on the name of the Activity component, multiple configuration information may be found. For example, for the login page of application A, the content of the page in the logged-in state and the page in the non-logged-in state are displayed differently. Therefore, those skilled in the art will preliminarily analyze the login page in the logged-in state and the login page in the non-logged-in state. page to set configuration information respectively. If the configuration information is still searched based on the name of the Activity component corresponding to the login page at this time, two configuration information will be found.

Therefore, in another implementable manner, the electronic device can find the corresponding configuration information among multiple locally pre-stored configuration information based on the attribute information of the Activity component corresponding to the page. The attribute information may be a login status, for example.

For example, the electronic device can further determine that the attribute information of the Activity component corresponding to the login page of application A is the login status, and then it can further determine from the two found configuration information that matches the login status of the login page. Configuration information.

Since the configuration information is configured for the application page, each configuration information also carries the name and attribute information of the Activity component corresponding to the page.

When the electronic device searches for the corresponding configuration information among multiple locally preset configuration information according to the Activity component corresponding to the page of the application, if the corresponding configuration information is not found, it means that the page does not need to be re-layout, that is, the page does not need to be re-layout. The page does not have page layout issues. Then, the electronic device does not need to display the page according to the solution of this application, and can use the currently existing solution to display the page.

It should be understood that the search for the configuration information corresponding to the page based on the name and attribute information of the Activity component provided in this application is only an exemplary explanation. This application does not limit the specific implementation of the search for the configuration information corresponding to the page, and all are protected by this application. within the range.

In this application, the configuration information can have the following two possible designs.

In Design 1, the configuration information indicates the initial position before relayout and the target position after relayout of multiple elements in the third page.

Wherein, the multiple elements include multiple views, or the multiple elements include at least one view group and multiple views in the at least one view group, and the multiple elements include a target element.

The multiple elements in the third page indicated by the configuration information may be all elements in all areas of the third page, or may be all elements in some areas of the third page, but no matter which indication method is used, it needs to be carried out The target elements for relayout are included in the multiple elements.

It can be understood that for multiple elements indicated by the configuration information, the initial position of the indicated target element before relayout and the target position after relayout are different, and the initial position of the non-target element before relayout and the target after relayout are different. Same location. The non-target elements are elements other than the target element among the multiple elements indicated in the configuration information.

For example, as shown in FIG. 6b, after the electronic device obtains the third page 602, the electronic device obtains the configuration information corresponding to the third page 602. The configuration information can indicate the initial positions and values of multiple elements in the third page 602. target location. For example, can Indicates the initial position before relayout and the position after relayout corresponding to a1 to a8, a11, a12, a21, a22, a31, a32, a41, a42, a51, a52, a61, a62, a71, a72, a81 and a82. Target position. Among these elements, some elements are target elements and some elements are non-target elements.

In Design 2, the configuration information indicates the initial position of the target element in the third page before relayout and the target position after relayout.

The configuration information may only indicate the initial position and target position of the element in the third page that needs to be repositioned, that is, the initial position before relayout and the target position after relayout of the target element that needs to be relayout.

For example, as shown in Figure 6b, after the electronic device obtains the third page 602, the electronic device obtains the configuration information corresponding to the third page 602. The configuration information can indicate the location of the target element that needs to be adjusted in the third page 602. initial position and target position. For example, the initial position before relayout and the target after relayout corresponding to a2 to a3, a6 to a8, a21, a22, a31, a32, a41, a42, a61, a62, a71, a72, a81 and a82 can be indicated. Position, these elements are target elements.

Step 2): Relayout the target elements in the third page based on the configuration information.

After obtaining the configuration information corresponding to the third page, the electronic device can re-determine the position of the target element in the third page according to the original position and target position of the target element that needs to be re-layout indicated by the configuration information.

In this application, after step 1) and before step 2), the electronic device can also match the target element in the third page based on the obtained configuration information.

Corresponding to the two designs of configuration information mentioned above, the electronic device can use different ways to match the target element.

Corresponding to design one, the electronic device can match the target element by performing the following steps i) and ii).

Step i): Determine the target element that needs to be re-layout based on the initial position and target position of each element among the multiple elements indicated by the configuration information.

When the configuration information indicates the initial positions and target positions of multiple elements in the third page, the multiple initial positions and corresponding multiple target positions indicated not only include the initial positions and target positions of the target elements, but also include The initial and target positions of non-target elements. Therefore, the electronic device needs to determine the element whose initial position is different from the target position, that is, the target element, based on the multiple initial positions and the corresponding multiple target positions indicated by the configuration information.

When the electronic device determines the target element from multiple elements of the configuration information, it can determine the target element in the following ways:

Based on the hierarchical structure of each element in the multiple elements, in order from the parent element to the child element, the initial position and target position of each element in the multiple elements are traversed to determine the target element that needs to be re-layout.

It should be understood that when setting configuration information in advance, those skilled in the art will store the initial position and target position of each element in the plurality of elements in order from the parent element to the child element.

For example, when setting the configuration information of the third page as shown in Figure 6b, those skilled in the art can use a1 to a8 as parent elements, a11, a12, a21, a22, a31, a32, a41, a42, a51, a52, a61, a62, a71, a72, a81 and a82 are the order of sub-elements to store the initial position and target position of each element in the electronic device.

Then, when determining the target element in the configuration information, the electronic device can first determine whether the corresponding initial positions and target positions of a1, a2, a3, a4, a5, a6, a7 and a8 are the same, and determine the initial position from there A parent element that is different from the target position. Then further determine whether the initial position and target position of each sub-element, namely a11, a12, a21, a22, a31, a32, a41, a42, a51, a52, a61, a62, a71, a72, a81 and a82, are the same. Therefore, the target elements that need to be re-layout can be determined. For example, the target elements that need to be re-layout are determined to be a2, a3, a4, a6, a7, a8, a21, a22, a31, a32, a41, a42, a61, a62, a71, a72, a81 and a82.

In order to avoid ambiguity, it should be pointed out that the aforementioned configuration information does not indicate the specific elements. It only indicates multiple initial positions and corresponding multiple target positions. That is, the aforementioned configuration information indicates multiple For position information, each pair of position information includes an initial position and a corresponding target position. After the electronic device obtains the configuration information, it does not know which element in the third page each pair of position information in the position information corresponds to. Therefore, the electronic device can first perform step i) to compare whether the initial position and the target position in each pair of position information are the same to filter out position information whose initial position and target position are different. These position information are indicated by the configuration information. The position information of the target element is then determined by performing the following step ii) which target element in the third page corresponds to the position information whose initial position is different from the target position.

Step ii), match the target element in the third page.

Among them, matching the target element in the third page can be understood as locating the needs indicated by the configuration information in the third page. The target element for relayout.

One possible implementation of matching the target element in the third page is to match the target element in the third page based on the positions of the multiple elements in the third page and the initial position of the target element indicated in the configuration information.

As mentioned above, when the electronic device generates the third page, it will determine the position of each element in the first page under the second preset coordinate axis, that is, determine the position of each element in the third page. Therefore, the electronic device can respectively match the position of each element in the third page with the initial position of each target element indicated by the determined configuration information. If the position of an element in the third page matches an element indicated by the configuration information, If the initial position is the same, the element in the third page can be used as the target element.

Another possible implementation of matching the target element in the third page is to match the target element in the third page based on identifiers (IDs) of multiple elements and the ID of the target element indicated in the configuration information.

In this implementation, the configuration information may also be used to indicate the ID of each of the multiple elements. After the electronic device determines which position information has a difference between the initial position and the target position among the multiple position information indicated by the configuration information, it can accordingly obtain the element ID that is different from the initial position and the target position, that is, it determines The ID of the target element. Therefore, the electronic device can match the ID of the target element in the configuration information with the ID of each element in the third page, thereby locating the target element in the third page.

Another possible implementation method of matching the target element in the third page is to match the target element in the third page based on the tags of multiple elements and the tag of the target element indicated in the configuration information.

It should be understood that the matching of target elements in the third page based on location, identification, or tags provided in this application is only an exemplary illustration. This application does not limit the specific matching method of the target elements, and they are all within the scope of protection of this application. Inside.

In Design 2, since the configuration information indicates the initial position and target position of the target element in the third page, but does not indicate the initial position and target position of other elements, the electronic device no longer needs to filter out the initial position and target position from the configuration information. The location information has different location information, but the target element can be directly matched in the third page. That is, the electronic device does not perform the above step i) but directly performs the above step ii). It should be understood that the specific implementation of step ii) may refer to the previous description and will not be described again here.

After the electronic device obtains the configuration information and matches the target element from the third page, it can rearrange the target element according to the target position of the target element in the configuration information.

For ease of understanding, the implementation process of step 503 is exemplarily introduced below in conjunction with Figure 6b and Figure 6c.

As shown in Figure 6b, after obtaining the third page 602, the electronic device obtains the configuration information of the third page 602. It is assumed that the configuration information indicates the initial position and target position of the target element that needs to be re-layout in the third page 602, as well as the ID of each target element. For example, the initial positions of a2 to a4, a6 to a8, a21, a22, a31, a32, a41, a42, a61, a62, a71, a72, a81 and a82 before relayout and the target position after relayout are indicated. . Among them, the target positions of a2, a21 and a22 indicated by the configuration information are (x2, y2), the indicated target positions of a3, a31 and a32 are (x3, y3), and the indicated targets of a4, a41 and a42 The position is (x4, y4), the indicated target positions of a6, a61, and a62 are (x6, y6), the indicated target positions of a7, a71, and a72 are (x7, y7), and the indicated target positions of a8, a81 and the target position of a82 is (x8, y8).

As shown in Figure 6c, the electronic device can locate the target elements in the third page 602 (shown in bold in Figure 6c) based on the IDs of the target elements that need to be rearranged as indicated by the configuration information, and according to the instructions The target positions of each target element are re-determined. The positions of the target elements a2, a21 and a22 after re-layout are (x2, y2), the positions of a3, a31 and a32 after re-layout are (x3, y3), a4, a41 The rearranged positions of a6, a61 and a62 are (x6, y6), the rearranged positions of a7, a71 and a72 are (x7, y7), a8, The positions of a81 and a82 after rearrangement are (x8, y8).

The electronic device can adjust the position of each target element to its respective target position, that is, adjust the positions of a2, a21 and a22 to (x2, y2), and adjust the positions of a3, a31 and a32 to (x3, y3), adjust the positions of a4, a41 and a42 to (x4, y4), adjust the positions of a6, a61 and a62 to (x6, y6), adjust the positions of a7, a71 and a72 to (x7 , y7), and adjust the positions of a8, a81 and a82 to (x8, y8) to achieve the re-layout of these target elements.

In this application, the configuration information can also be used to indicate the magnification ratio of the page, and the initial position and target position of each element among the multiple elements indicated by the configuration information are determined based on the magnification ratio.

The configuration information can also indicate the magnification ratio of the third page. The magnification ratio can meet the following conditions: 0<R≤N, N is the folding ratio. The ratio of the screen width of the stacked screen when fully expanded to the screen width of the foldable screen in the folded state.

For example, when the folding screen of the electronic device is a bi-fold folding screen, and the screen width of the folding screen when fully unfolded is twice the screen width in the folded state, then the enlargement ratio satisfies 0<R≤2. When the folding screen of the electronic device is a three-fold folding screen, and the screen width of the folding screen when fully unfolded is three times the screen width in the folded state, the enlargement ratio satisfies 0<R≤3.

In an achievable way, taking into account the user's sensory experience, R can take a value of 1.2.

In an implementable manner, the configuration information may not indicate the enlargement ratio of the third page, but may indicate the screen width occupied by the third page when the folding screen of the electronic device is in the unfolded state.

Among them, the screen width Q occupied by the third page satisfies the following conditions: Qx=Ry, where Q is the screen width occupied by the third page when the electronic device is in the expanded state, and x is the screen width of the electronic device in the expanded state. , y is the screen width of the electronic device in the folded state, and R is the aforementioned enlargement ratio.

For example, assuming that the screen width of the electronic device in the unfolded state is twice the width of the screen in the folded state, x can take a value of 2 and y can take a value of 1. Assume that the electronic device indicated by the configuration information is in the expanded state, and the screen width occupied by the third page, that is, Q is 3/5. Then, based on the above conversion relationship, it can be determined that the amplification ratio R is 1.2. Therefore, the third page can be enlarged 1.2 times.

It should be understood that if the configuration information indicates the enlargement ratio of the page, then step 503 specifically involves rearranging the target element in the enlarged third page.

In this application, when the magnification ratio is greater than 1, the configuration information is also used to indicate the storage path of the resource. The resource is a resource that matches the display resolution of the folding screen in the unfolded state.

When the amplification ratio indicated by the configuration information is greater than 1, for the elements in the enlarged third page, if the resolution resources of the folded screen in the folded state are still used to display the page, the problem of blurred elements on the page may occur. Therefore, when the enlargement ratio indicated by the configuration information is greater than 1, resources matching the display resolution of the screen in the expanded state are re-indicated.

For example, when the folding screen is in the folded state, the configuration information indicates the path where the high-definition resolution resource is located, and the electronic device can use the high-definition resolution resource to display the page. When the folding screen is in the unfolded state, if the amplification ratio indicated by the configuration information is greater than 1. The configuration information will no longer indicate the path of the HD resolution resource, but the path of the UHD resolution resource. Then, electronic devices no longer use high-definition resolution resources to display images, but use ultra-high-definition resolution resources to display images to ensure the clarity of page display.

It should be understood that each application corresponds to different resolution resources, and different display resolution resources are stored in different folders of the electronic device.

Step 504: Draw based on the re-layout position of the target element to obtain the second page. The absolute layout of the target element in the third page is different from the absolute layout in the second page.

The absolute layout of the target element in the third page is different from the absolute layout in the second page. It can be understood that the absolute position of the target element in the third page is different from the absolute position in the second page.

For example, as shown in Figure 6c, after the electronic device adjusts the positions of a2 to a4, a6 to a8, a21, a22, a31, a32, a41, a42, a61, a62, a71, a72, a81 and a82, The page is drawn based on the adjusted positions of these target elements, thereby obtaining the second page 603 as shown in Figure 6d.

It can be seen that the positions of a2 to a4, a6 to a8, a21, a22, a31, a32, a41, a42, a61, a62, a71, a72, a81 and a82 in the third page 602 are the same as those in the second page 603 The absolute positions are different.

It should be understood that the process of page drawing can refer to the existing technology, and will not be described again here.

Step 505: Display the second page on the folding screen in the expanded state.

As mentioned before, the folded screen of an electronic device is called the unfolded state.

For example, as shown in Figure 6d, after the electronic device draws the second page 603 according to step 504, the second page 603 can be displayed on the screen when the folding screen is fully unfolded.

Based on the above solution, when the electronic device detects that the folding screen changes from the folded state to the unfolded state, the size and position of the elements in the first page displayed on the folding screen in the folded state are used as the basis, and the third page is obtained through measurement and layout. three pages, and then rearrange the positions of some or all elements (that is, the above-mentioned target elements) in the third page based on the configuration information, and then draw according to the rearranged positions of the target elements to obtain the second page, and The second page is displayed on the folding screen. Since these re-layout elements can be pre-defined, that is, the problem of the page falling outside the screen or being incompletely displayed due to the folding screen being expanded is taken into account in advance. Therefore, re-layout of these elements can avoid the situation where some elements in the page are not fully displayed after the folding screen is unfolded. In other words, the displayed page can adapt to the screen in the expanded state, improving the user experience.

In order to better understand the implementation process of the page display method provided by this application, an exemplary description will be provided below with reference to Figures 7a to 7e.

Figures 7a to 7e are another schematic diagram of an interface for displaying a page on an electronic device provided by an embodiment of the present application.

As shown in Figure 7a, a first page 701 is displayed on the folding screen in the folded state. Assume that the first page 701 contains eight view groups, namely b1, b2, b3, b4, b5, b6, b7 and b8. Each view group includes two views. Among them, the two views included in b1 are b11 and b12 respectively, the two views included in b2 are b21 and b22 respectively, the two views included in b3 are b31 and b32 respectively, and the two views included in b4 are b41 and b42 respectively. The two views included in b5 are b51 and b52 respectively, the two views included in b6 are b61 and b62 respectively, the two views included in b7 are b71 and b72 respectively, and the two views included in b8 are b81 and b82 respectively.

When the electronic device detects that the folding screen is unfolded, it can use the coordinate axes shown in Figure 7a as a reference to determine b1 to b8, b11, b12, b21, b22, b31, b32, b41, b42, b51, b52, The respective width, height and coordinates of b61, b62, b71, b72, b81 and a82.

As shown in Figure 7b, after the electronic device determines the width, height and coordinates of each element in the first page 701, it can use the coordinate axis in Figure 7b as a reference to determine that each of the above elements is in the coordinate axis shown in Figure 7b. , and then based on the positions of these elements on the coordinate axis shown in Figure 7b and the determined width and height of each element, the third page 702 can be obtained.

After obtaining the third page 702, the electronic device can obtain the configuration information corresponding to the third page 702 from a plurality of locally pre-stored configuration information. Assume that the configuration information indicates that the enlargement ratio of the third page 702 is 1.2 times, and also indicates the initial and target positions of the target elements that need to be re-layout in the enlarged third page, as well as the IDs of each target element. For example, the initial positions and relayout of b1 to b8, b11, b12, b21, b22, b31, b32, b41, b42, b51, b52, b61, b62, b71, b72, b81 and b82 before relayout are indicated. subsequent target location.

As shown in Figure 7c, the electronic device can first enlarge the third page 702 based on the enlargement ratio indicated by the configuration information, that is, enlarge the entire third page 702 by 1.2 times to obtain an enlarged third page 702'. It can be seen that the width and height of the enlarged third page 702' are both 1.2 times the width and height of the unenlarged third page 702, and the sizes of elements in the enlarged third page 702' are also unenlarged. 1.2 times the size of the elements in the third page, that is, b1' to b8', b11', b12', b21', b22', b31', b32', b41', b42', b51', b52', b61' , b62', b71', b72', b81' and b82' are respectively b1 to b8, b11, b12, b21, b22, b31, b32, b41, b42, b51, b52, b61, b62, b71, b72, b81 And 1.2 times that of b82.

As shown in Figure 7d, after the electronic device enlarges the third page 702, it can further adjust the target elements in the enlarged third page 702' according to the initial position and target position of each target element that needs to be re-layout indicated by the configuration information. Perform re-layout. Assume that the target positions of b1, b11 and b12 indicated by the configuration information are (x1', y1'), the target positions of b2, b21 and b22 are (x2', y2'), and the indicated targets of b3, b31 and b32 The position is (x3', y3'), the indicated target positions of b4, b41 and b42 are (x4', y4'), the indicated target positions of b5, b51 and b52 are (x5', y5'), The indicated target positions of b6, b61 and b62 are (x6', y6'), the indicated target positions of b7, b71 and b72 are (x7', y7'), and the indicated targets of b8, b81 and b82 The position is (x8', y8'). Then, the electronic device can correspondingly adjust the positions of b1', b11' and b12' to (x1', y1'), adjust the positions of b2', b21' and b22' to (x2', y2'), and adjust the positions of b3 Adjust the positions of ', b31' and b32' to (x3', y3'), adjust the positions of b4', b41' and b42' to (x4', y4'), and adjust the positions of b5', b51' and b52' to (x5', y5'), adjust the positions of b6', b61' and b62' to (x6', y6'), adjust the positions of b7', b71' and b72' to (x7', y7'), And adjust the positions of b8', b81' and b82' to (x8', y8').

As shown in Figure 7e, the electronic device further draws according to the adjusted positions of each of the above target elements, thereby obtaining the second page 703, and displays the second page 703 on the folding screen in the expanded state.

Based on the above solution, when the electronic device detects that the folding screen changes from the folded state to the unfolded state, the size and position of the elements in the first page displayed on the folding screen in the folded state are used as the basis, and the third page is obtained through measurement and layout. three pages, and then rearrange the positions of some or all elements (that is, the above-mentioned target elements) in the third page based on the configuration information, and then draw according to the rearranged positions of the target elements to obtain the second page, and The second page is displayed on the folding screen. Since these re-layout elements can be pre-defined, that is, the problem of the page falling outside the screen or being incompletely displayed due to the folding screen being expanded is taken into account in advance. Therefore, re-layout of these elements can avoid some elements on the page from being displayed in full. The display is incomplete after the folding screen is unfolded. In other words, the displayed page can be adapted to the screen in the expanded state, thereby improving the user experience.

FIG. 8 is a schematic diagram of the software architecture of the electronic device provided by the embodiment of the present application.

As shown in Figure 8, the software architecture includes the application layer, application framework layer, hardware abstraction layer and kernel layer. The software architecture shown in Figure 8 shows modules related to the embodiment of the present application, but does not show all modules in each layer.

The application layer consists of a series of application packages. Applications can be run at the application layer by launching application packages. Activity component is one of the four major components in Android components. In an Android application, an Activity component can usually be understood as the active page of an application. It can display some controls and can also listen to and process user events to respond. . Every time an application is run, the corresponding Activity component will be started.

The application framework layer includes AMS, WMS and SurfaceFlinger. For relevant descriptions of AMS, WMS and SurfaceFlinger, please refer to the previous description in conjunction with Figure 3b and will not be repeated here.

In this application, AMS can identify the Activity component corresponding to the application page, and read the configuration information corresponding to the page from the locally pre-stored configuration file based on the identified Activity component.

The hardware abstraction layer is the interface layer between the operating system kernel and the hardware circuit. Its purpose is to abstract the hardware. It hides the hardware interface details of a specific platform and provides a virtual hardware platform for the operating system, making it hardware-independent and portable on multiple platforms. From the perspective of software and hardware testing, both software and hardware testing work can be completed based on the hardware abstraction layer, making it possible to conduct hardware testing work in parallel. The hardware abstraction layer is a programming layer that allows a computer operating system to interact with hardware devices at a logical level rather than a hardware level.

Hardware abstraction layers can include GraphicsAlloc and Hwcomposer. Among them, GraphicsAlloc can also be referred to as Gralloc, which is used to allocate video memory and refresh the display. Hwcomposer can be used to flush image buffer contents to the display buffer.

The kernel layer can use the Linux kernel, and the kernel layer can include a display driver (display driver) and a graphics processor driver (graphics processing unit driver, GPU driver).

It should be noted that the relevant principles of the hardware abstraction layer and kernel layer may refer to the existing technology and will not be described again here.

In this application, assuming that the user wants to open application 1 on the folding screen in the folded state, the user can trigger the icon of application 1 displayed on the folding screen through the display screen of the underlying system, that is, the folding screen in the folded state. . When the folding screen receives the trigger event, it will report the trigger event to the application layer.

When the application layer receives the trigger event, it runs application package 1 so that the first page of application 1 (for example, the login page) is displayed on the display screen in the underlying system, that is, the folding screen in the folded state. superior. At the same time, when the first page of application 1 is run, the Activity component corresponding to the first page of application 1 is also started accordingly.

It should be noted that for the introduction of the underlying system, please refer to the relevant description of FIG. 3b and will not be repeated here.

When the user unfolds the folding screen, the AMS in the application framework layer can identify the Activity component of the first page, and read the corresponding Activity component of the first page from the locally pre-stored configuration file. configuration information. After AMS reads the configuration information corresponding to the first page, it can cache the configuration information locally. In the first measurement process and layout process, the width, height and position of each element in the first page can be determined, and then based on the determined size and position of each element in the first page, we get The third page.

Further, the WMS reads the configuration information from the AMS, and rearranges the target elements in the third page based on the configuration information.

If the configuration information indicates the initial position of the target element in the third page before relayout and the target position after relayout, it does not indicate the enlargement ratio of the third page. Then the layout process is re-executed for the target element in the third page based on the configuration information.

After re-executing the layout process on the target element in the third page, WMS can allocate a Surface to the window, and execute the drawing process based on the Surface and the determined position of the target element after re-layout, thereby obtaining the second page.

If the configuration information not only indicates the enlargement ratio of the third page, but also indicates the initial position of the target element in the enlarged third page before re-layout and the target position after re-layout. Then the third page is enlarged according to the enlargement ratio indicated by the configuration information. For the enlarged third page, the measurement process and layout process are re-executed, that is, the width and height of each element in the enlarged third page are re-determined. and re-adjusting the position of the target element in the enlarged third page based on the target position of the target element in the enlarged third page indicated by the configuration information.

After re-executing the measurement process and layout process, WMS can allocate a Surface to the window, and execute the drawing process based on the Surface and the determined size of each element in the enlarged third page and the position of the target element after re-layout, thus obtaining No. Two pages.

WMS hands the drawn second page to SurfaceFlinger, and SurfaceFlinger performs image synthesis, and then the second page can be displayed on the fold in the expanded state.

In short, the page display method provided by this application is mainly implemented by AMS and WMS in the application framework layer. For specific implementation details, please refer to the relevant introduction of Figure 5 to Figure 7e, which will not be described again here.

Figure 9 is a schematic block diagram of a page display device provided by an embodiment of the present application. As shown in FIG. 9 , the communication device 900 may include: a display module 910 and a processing module 920 . Each module in the device 900 can be used to implement the corresponding process of the electronic device in the above method.

Specifically, the display module 910 can be used to display the first page on the folding screen in the folded state; the processing module 920 can be used to obtain, based on the measurement and layout of the elements in the first page, when detecting that the folding screen is unfolded. The third page; Relayout the target element in the third page to obtain the rearranged position of the target element. The target element is a view or view group; Draw based on the rearranged position of the target element to obtain the second page. The absolute layout of the target element in the third page is different from the absolute layout in the second page; the display module 910 can also be used to display the second page on the folding screen in the expanded state.

Optionally, the processing module 920 can be specifically configured to obtain configuration information, which is used to indicate the initial position of the target element before relayout and the target position after relayout, and the initial position and target position of the target element before relayout. The target position after layout is different; based on the configuration information, the target element in the third page is re-layout.

Optionally, the configuration information indicates the initial positions before relayout and the target positions after relayout of multiple elements in the third page; the multiple elements include multiple views, or the multiple elements include at least one The view group and multiple views in at least one view group, and the multiple elements include the target element; the processing module 920 can also be used to determine the need based on the initial position and target position of each element in the multiple elements indicated by the configuration information. The target element of the relayout; matches the target element in the third page.

Optionally, the multiple elements include at least one view group and multiple views in the at least one view group. The processing module 920 is specifically configured to, based on the hierarchical structure of each element in the multiple elements, in accordance with the order from the parent element to the child element. Sequentially, traverse the initial position and target position of each element in multiple elements to determine the target element that needs to be relayout.

Optionally, the processing module 920 is specifically configured to match the target element in the third page according to the positions of the multiple elements in the third page and the initial position of the target element indicated in the configuration information.

Optionally, the configuration information is also used to indicate the identification of each element in the plurality of elements. The processing module 920 is specifically configured to match the three pages according to the identification of the plurality of elements and the identification of the target element indicated in the configuration information. target element.

Optionally, the configuration information is also used to indicate the magnification ratio of the page, and the initial position and target position of each of the multiple elements indicated by the configuration information are determined based on the magnification ratio.

Optionally, when the magnification ratio is greater than 1, the configuration information is also used to indicate the storage path of the resource, which is a resource that matches the display resolution of the folding screen in the unfolded state.

Optionally, the processing module 920 is specifically configured to obtain configuration information corresponding to the Activity component based on the Activity component corresponding to the page of the application.

It should be understood that the division of units in the embodiment of the present application is schematic and is only a logical function division. In actual implementation, there may be other division methods. In addition, each functional unit in various embodiments of the present application may be integrated into one processor, may exist independently, or may have two or more units integrated into one unit. The above integrated units can be implemented in the form of hardware or software functional units.

Figure 10 is a schematic diagram of the hardware structure of a page display device provided by an embodiment of the present application.

As shown in Figure 10, the device includes: a memory 1001, a processor 1002 and an interface circuit 1003. The apparatus may also include a display screen 1004, wherein the memory 1001, the processor 1002, the interface circuitry 1003, and the display screen 1004 may be in communication. Exemplarily, the memory 1001, the processor 1002, the interface circuit 1003 and the display screen 1004 can communicate through a communication bus. The memory 1001 is used to store computer execution instructions, the processor 1002 controls the execution, and the interface circuit 1003 performs communication. Thus, the page display method provided by the embodiment of this application is implemented.

Optionally, the interface circuit 1003 may also include an input circuit and/or an output circuit.

Optionally, the above-mentioned processor 1002 may include one or more CPUs, and may also be other general-purpose processors, digital signal processors (digital signal processors, DSPs), application specific integrated circuits (application specific integrated circuits, ASICs), etc. Pass The processor may be a microprocessor or the processor may be any conventional processor. The steps of the method disclosed in this application can be directly implemented by a hardware processor, or executed by a combination of hardware and software modules in the processor.

In a possible implementation manner, the computer execution instructions in the embodiments of the present application may also be called application codes, which are not specifically limited in the embodiments of the present application.

An embodiment of the present application provides an electronic device. The structure can be seen in Figure 2. The memory of the electronic device can be used to store at least one program instruction, and the processor is used to execute at least one program instruction to implement the technical solution of the above method embodiment. The implementation principles and technical effects are similar to the above-mentioned method-related embodiments, and will not be described again here.

Embodiments of the present application provide a chip, which includes a processor. The processor is configured to call a computer program in a memory to execute the technical solutions in the above embodiments. The implementation principles and technical effects are similar to the above-mentioned related embodiments and will not be described again here.

Embodiments of the present application provide a computer program product. When the computer program product is run on an electronic device, it causes the electronic device to execute the technical solutions in the above embodiments. The implementation principles and technical effects are similar to the above-mentioned related embodiments and will not be described again here.

Embodiments of the present application provide a computer-readable storage medium on which program instructions are stored. When the program instructions are executed by an electronic device, the electronic device causes the electronic device to execute the technical solutions of the above embodiments. The implementation principles and technical effects are similar to the above-mentioned related embodiments and will not be described again here.

The above specific embodiments further describe the purpose, technical solutions and beneficial effects of the present invention in detail. It should be understood that the above are only specific embodiments of the present invention and are not intended to limit the scope of protection of the present invention. Any modifications, equivalent substitutions, improvements, etc. made on the basis of the technical solutions of the present invention shall be included in the protection scope of the present invention.

Claims (14)

1. A page display method, characterized in that it is applied to an electronic device including a folding screen, and the method includes:

   The folding screen in the folded state displays the first page;

   When detecting that the folding screen is unfolded, obtain a third page based on the measurement and layout of elements in the first page;

   Relayout the target element in the third page to obtain the rearranged position of the target element, where the target element is a view or a view group;

   Draw based on the re-layout position of the target element to obtain a second page, where the absolute layout of the target element in the third page is different from the absolute layout in the second page;

   The folding screen in the unfolded state displays the second page.
2. The method of claim 1, wherein the re-layout of the target elements in the third page includes:

   Obtain configuration information, the configuration information is used to indicate the initial position of the target element before the re-layout and the target position after the re-layout, the initial position of the target element before the re-layout and the target after the re-layout The location is different;

   Based on the configuration information, the target element in the third page is rearranged.
3. The method of claim 2, wherein the configuration information indicates the initial positions of the plurality of elements in the third page before the re-layout and the target positions after the re-layout; The plurality of elements includes a plurality of views, or the plurality of elements includes at least one view group and a plurality of views in the at least one view group, and the plurality of elements includes the target element;

   Before relayout the target element in the third page based on the configuration information, the method further includes:

   Determine the target element that needs to be re-layout based on the initial position and target position of each element in the plurality of elements indicated by the configuration information;

   Match said target element in the third page.
4. The method of claim 3, wherein the plurality of elements includes at least one view group and a plurality of views in the at least one view group, and

   Determining the target element that needs to be re-layout based on the initial position and target position of each element in the plurality of elements indicated by the configuration information includes:

   Based on the hierarchical structure of each element in the plurality of elements, in order from the parent element to the child element, the initial position and the target position of each element in the plurality of elements are traversed to determine the target element that needs to be re-layout .
5. The method according to claim 3 or 4, characterized in that matching the target element in the third page includes:

   The target element is matched in the third page according to the positions of the plurality of elements in the third page and the initial position of the target element indicated in the configuration information.
6. The method according to claim 3 or 4, characterized in that the configuration information is also used to indicate the identity of each element in the plurality of elements;

   The matching of the target element in the third page includes:

   The target element is matched in the third page according to the identification of the plurality of elements and the identification of the target element indicated in the configuration information.
7. The method according to any one of claims 3 to 6, wherein the configuration information is also used to indicate the magnification ratio of the page, and the configuration information indicates the initial position of each element in the plurality of elements. and the target position is determined based on the magnification ratio.
8. The method of claim 7, wherein when the amplification ratio is greater than 1, the configuration information is also used to indicate a storage path of a resource, and the resource is in the unfolded state with the folding screen. Display resources with matching resolutions.
9. The method according to any one of claims 2 to 8, characterized in that the first page is a page of an application program, and the obtaining configuration information includes:

   Based on the Activity component corresponding to the page of the application program, the configuration information corresponding to the Activity component is obtained.
10. A page display device, characterized by comprising a module for executing the method according to any one of claims 1 to 9.
11. A page display device, characterized by comprising a memory and a processor, wherein the memory is used to store a computer program;

    The processor is used to call and execute the computer program, so that the device performs the method according to any one of claims 1 to 9.
12. A computer-readable storage medium, characterized in that it is used to store a computer program, which when the computer program is run on a computer, causes the electronic device to perform the method according to any one of claims 1 to 9.
13. A computer program product, characterized in that the computer program product includes computer program code. When the computer program code is run on a computer, the electronic device implements the method as described in any one of claims 1 to 9. method.
14. A program product, characterized in that the program product includes a computer program, the computer program is stored in a readable storage medium, and at least one processor of the communication device can read the computer program from the readable storage medium , the at least one processor executes the computer program so that the communication device implements the method according to any one of claims 1-9.