WO2023179501A1 - 界面显示方法及电子设备 - Google Patents

界面显示方法及电子设备 Download PDF

Info

Publication number
WO2023179501A1
WO2023179501A1 PCT/CN2023/082310 CN2023082310W WO2023179501A1 WO 2023179501 A1 WO2023179501 A1 WO 2023179501A1 CN 2023082310 W CN2023082310 W CN 2023082310W WO 2023179501 A1 WO2023179501 A1 WO 2023179501A1
Authority
WO
WIPO (PCT)
Prior art keywords
user interface
display window
width
node
electronic device
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Ceased
Application number
PCT/CN2023/082310
Other languages
English (en)
French (fr)
Inventor
李春东
刘丰恺
缪雨桐
胡雪
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Huawei Technologies Co Ltd
Original Assignee
Huawei Technologies Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Huawei Technologies Co Ltd filed Critical Huawei Technologies Co Ltd
Priority to EP23773749.9A priority Critical patent/EP4471585A4/en
Publication of WO2023179501A1 publication Critical patent/WO2023179501A1/zh
Anticipated expiration legal-status Critical
Ceased legal-status Critical Current

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING OR CALCULATING; COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces
    • G—PHYSICS
    • G06—COMPUTING OR CALCULATING; COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G—PHYSICS
    • G06—COMPUTING OR CALCULATING; COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
    • G06F3/0488—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures
    • G—PHYSICS
    • G06—COMPUTING OR CALCULATING; COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/38—Creation or generation of source code for implementing user interfaces
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04M—TELEPHONIC COMMUNICATION
    • H04M1/00—Substation equipment, e.g. for use by subscribers
    • H04M1/02—Constructional features of telephone sets
    • H04M1/0202—Portable telephone sets, e.g. cordless phones, mobile phones or bar type handsets
    • H04M1/026—Details of the structure or mounting of specific components
    • H04M1/0266—Details of the structure or mounting of specific components for a display module assembly
    • H04M1/0268—Details of the structure or mounting of specific components for a display module assembly including a flexible display panel

Definitions

  • Embodiments of the present application relate to the field of terminal equipment, and in particular, to an interface display method and electronic equipment.
  • Embodiments of the present application provide an interface display method and an electronic device.
  • the electronic device can display the user interface of the application without reducing the interface content to be displayed by the application, thereby improving the user experience.
  • embodiments of the present application provide an interface display method.
  • the method includes: the electronic device obtains the first user interface based on the first display window and the view tree of the target application. Wherein, the width of the first user interface is the same as the width of the first display window, and the height of the first user interface is the same as the height of the first display window.
  • the view tree of the target application includes at least one view node, and the first user interface includes a control corresponding to each node in the at least one view node.
  • the electronic device stretches the first user interface and the width of each control in the first user interface to obtain a second user interface. The height of each control in the second user interface is equal to the height of each control in the first user interface.
  • the electronic device restores the width of at least one control in the second user interface to the same width as in the first user interface.
  • the electronic device displays the second user interface in the second display window; the width of the second user interface is equal to the width of the second display window, and the height of the second user interface is equal to the height of the second display window; the height of the second display window is equal to the first The height of the display window and the width of the second display window are greater than the width of the first display window.
  • the first display window may be the display window 901 in the embodiment of this application.
  • the second display window may be the display window 902 in the embodiment of this application.
  • the electronic device restores the width of the at least one control to the same width as in the first user interface, which can be understood as restoring the width of the at least one control to the width before stretching.
  • the distance between the control in the second user interface and the upper edge of the second user interface is the same as the distance from the upper edge of the first user interface when it is in the first user interface.
  • Controls in the second user interface and the second user interface The distance from the lower edge of the surface is equal to the distance from the lower edge of the first user interface when it is in the first user interface.
  • each display window and space may be a pixel value in the longitudinal direction.
  • the width of the display window and space is optionally a pixel value in the horizontal direction.
  • the view tree is the ViewTree described in the embodiment of this application.
  • view nodes include View and/or ViewGroup.
  • the method before the electronic device obtains the first user interface based on the first display window and the view tree of the target application, the method further includes: the electronic device obtains the view tree generated by the target application, and the view tree is transmitted to the target application based on the electronic device.
  • the window information of the target application is generated, and the window information is used to indicate the width and height of the first display window.
  • the electronic device provides the application with information about the first display window, and the application can generate a view tree based on the height and width of the first display window, thereby reducing requirements on the application and eliminating the need for the application to modify the view tree.
  • the method may also include the layout system in the electronic device transmitting window information to the application and receiving the view tree generated by the application.
  • the window information only indicates the width and height of the first display window, but does not indicate the position of the first display window.
  • the electronic device obtains the first user interface based on the first display window and the view tree of the target application, including: the electronic device obtains each of the at least one view node Layout information of the view node, the layout information is used to indicate the size and position of each view node in the first display window; the electronic device generates the first user interface based on the layout information of each view node.
  • the electronic device can perform layout based on the first display window to obtain the first user interface.
  • the first user interface obtained after layout conforms to the size of the first display window, and the positions of each control are also in the first display window.
  • the first user interface laid out based on the first display window is close to the display interface of a candy bar mobile phone.
  • the layout information indicates the position of the view node in its parent node, which can also be understood as the position in the first display window.
  • the position of a view node includes its distance from the left, right, top, and bottom sides of the parent node.
  • each view node can be viewed as a rectangle.
  • the electronic device generates the first user interface based on the layout information of each view node, including: the electronic device creates each view node based on the layout information of each view node.
  • the height of the canvas corresponding to the root view node is the width of the first user interface.
  • the controls displayed on the user interface can be understood as controls corresponding to the view nodes.
  • the control content displayed on the user interface is only a part of the control content, which may include undisplayed parts, that is, parts of the canvas that are not filled with images. The user may not be able to see the part of the canvas other than the control content from the display interface, but the undisplayed part is also part of the control and can also be understood as part of the control corresponding to the view node.
  • the electronic device stretches the first user interface and the width of each control in the first user interface to obtain the second user interface, including: the electronic device stretches at least one The width of the canvas of at least one view node is used to obtain the second user interface; wherein the control content in the canvas of at least one view node is stretched as the canvas is stretched.
  • the canvas is stretched to achieve stretching of the control.
  • only the canvas corresponding to each view node is changed, and the actual position of the control is not changed, where the actual position is the position of the control in the first display window. It can be understood that in the embodiment of the present application, only the content presented by each control in the display window is changed, without changing its actual position in the display window during the layout stage, thereby reducing system processing complexity.
  • the view tree includes a root view node and a plurality of subview nodes
  • the electronic device restores the width of at least one control in the second user interface to the same width as in the first user interface.
  • the width in the interface is the same, including: the electronic device restores the width of the canvas corresponding to at least one subview node in the second user interface to the width before stretching; and at least one subview node belongs to multiple subview nodes.
  • At least one subview node is a text type and/or a small picture type; wherein the small picture type is used to indicate that the width of the canvas corresponding to the subview node is smaller than a predetermined Set the threshold, and the control content corresponding to the subview node is a picture; the text type is used to indicate that the control content of the canvas of the subview node is text.
  • the controls can be divided into controls that need to be restored and controls that remain stretched, and the controls that need to be restored can be restored.
  • each view node in the view tree of the target application corresponds to declaration information
  • the declaration information includes but is not limited to type information, layout information, etc.
  • Type information is used to indicate the type of each view node.
  • the view tree includes a root node and a first view node
  • the first view node is a view node of the large picture type
  • the large picture type is used to indicate a subview node
  • the width of the corresponding canvas is greater than or equal to the preset threshold, and the control content corresponding to the subview node is a picture; the electronic device restores the width of at least one control in the second user interface to the same width as in the first user interface, Including: restoring the control content of the first view node to the state before stretching; wherein the width of the canvas of the first view node is the stretched width, and the restored control content of the first view node is in the first view Display the node in the center of the canvas; fill the part of the canvas of the first view node except the control content with the target image.
  • the large picture by processing the large picture accordingly, the large picture can be prevented from being stretched and deformed, and at the same time, it can be ensured that the position of the large picture displayed in the second display window is equal to the position in the first display window. of.
  • the target image is consistent with part of the content of the control, or the target image is an image obtained by Gaussian blur processing of part of the content of the control. In this way, by filling the canvas of a large picture, the aesthetics of the picture can be effectively improved.
  • the left edge of the first display window is aligned with the left edge of the second display window; the method further includes: receiving a response to the second view node in the second user interface Touch operation of the corresponding control; wherein, the touch operation is at the first position in the second display window; the distance between the first position and the left edge of the second display window is the first distance value, and the first position and the second display window The distance between the upper edges of the window is the second distance value; the first position is determined to be mapped to the second position in the first display window; the distance between the second position and the left edge of the first display window is the third distance value , the distance between the second position and the upper edge of the first display window distance is the fourth distance value; wherein the ratio of the first distance value to the third distance value is equal to the ratio of the width of the second display interface to the width of the first display interface; the second distance value is equal to the fourth distance value; based on the second The position determines that the touch operation corresponds to the
  • the electronic device can obtain the controls actually operated by the user based on the mapping relationship between the controls in the second user interface and the first user interface, and perform corresponding operations.
  • the first display window can also be at any position such as the center or the right side of the second display window, which is not limited in this application.
  • the aspect ratio of the first display window is less than or equal to 0.5; the aspect ratio of the second display window is greater than 0.5 and less than or equal to 1.
  • the application can generate a view tree based on an aspect ratio close to the first display window of a candy bar mobile phone, without the need for the application to adapt to the size of the actual display window of the electronic device.
  • the second display window is displayed in full screen on the screen of the electronic device.
  • the target application is any third-party application in the electronic device.
  • the method in the embodiment of the present application can be applied to any third-party application through system-level processing without modification of the application.
  • the electronic device is an inner folding screen mobile phone, an outer folding screen mobile phone, a vehicle-mounted device, a wearable device, and/or a television.
  • the content of the user interface displayed on the large screen is the same as that displayed on the single screen.
  • the content in the user interface is similar to improve the consistency of the application's user interface display when switching screens.
  • the electronic device obtains the first user interface based on the first display window and the view tree of the target application, including: the electronic device obtains the first user interface based on the second display window and the view tree.
  • the third view node, and based on the first display window and other view nodes in the view tree except the third view node, the first user interface is obtained.
  • the electronic device can perform layout based on the second display window so that its width in the layout stage adapts to the width of the second display window.
  • the width of the special type of view nodes can be increased, thereby making the control The displayable area is stretched.
  • Special types of view nodes can be multiline text types or WebView types. For example, for a multi-line text type view node, the electronic device layouts the view node based on the width of the second display window, so that the multi-line text obtains a wider display area.
  • the electronic device is based on the second display window and the third view node in the view tree, and is based on the first display window and the third view node in the view tree except for the third view node.
  • other view nodes to obtain the first user interface including: the electronic device obtains the layout information of the third view node and the layout information of other view nodes; wherein the layout information of the third view node is used to indicate that the third view node is in the third view node.
  • the position and size in the second display window, the layout information of other view nodes is used to indicate the position and size of other view nodes in the first display window; the electronic device generates the first user interface based on the layout information of at least one view node.
  • some special types of view nodes can obtain a wider display area than other nodes. And for this special type of node, you can Stretch without alignment.
  • embodiments of the present application provide an electronic device, which is characterized in that it includes: one or more memories, a foldable display screen, and one or more processors, the one or more memories and the one or more A plurality of processors are coupled, the one or more memories are used to store computer program code, the program code includes computer instructions, when the one or more processors execute the computer instructions, cause the electronic device to execute
  • the electronic device obtains the first user interface based on the first display window and the view tree of the target application; wherein the width of the first user interface is the same as the width of the first display window, and the height of the first user interface is the same as the first display window.
  • the windows have the same height; the view tree includes at least one view node, and the first user interface includes at least one control corresponding to the view node; the electronic device stretches the first user interface and the width of each control in the first user interface to obtain a third Two user interfaces; the height of each control in the second user interface is equal to the height of each control in the first user interface; the electronic device restores the width of at least one control in the second user interface to the same width as in the first user interface.
  • the width is the same; the electronic device displays the second user interface in the second display window; the width of the second user interface is equal to the width of the second display window, and the height of the second user interface is equal to the height of the second display window; the height of the second display window is equal to the height of the first display window, and the width of the second display window is greater than the width of the first display window.
  • the electronic device when the one or more processors execute the computer instructions, the electronic device is caused to perform the following steps: the electronic device obtains a view tree generated by the target application, and the view tree is transmitted to the target application based on the electronic device.
  • the window information of the target application is generated, and the window information is used to indicate the width and height of the first display window.
  • the electronic device when the one or more processors execute the computer instructions, the electronic device is caused to perform the following steps: the electronic device obtains at least one view node The layout information of each view node is used to indicate the size and position of each view node in the first display window; the electronic device generates the first user interface based on the layout information of each view node.
  • the electronic device when the one or more processors execute the computer instructions, the electronic device is caused to perform the following steps: the electronic device is based on the Layout information, create a canvas for each view node, and draw the control content corresponding to each view node on the canvas corresponding to each view node to obtain the first user interface; among them, the root view node of the view node corresponds to the canvas
  • the height is the height of the first user interface
  • the width of the canvas corresponding to the root view node is the width of the first user interface.
  • the electronic device when the one or more processors execute the computer instructions, the electronic device is caused to perform the following steps: the electronic device stretches at least one view node The width of the canvas to obtain the second user interface; wherein the control content in the canvas of at least one view node is stretched as the canvas is stretched.
  • the electronic device when the one or more processors execute the computer instructions, the electronic device is caused to perform the following steps: the electronic device converts the second user interface into The width of the canvas corresponding to at least one subview node is restored to the width before stretching; at least one subview node belongs to multiple subview nodes.
  • At least one subview node is a text type and/or a small picture type; wherein the small picture type is used to indicate that the width of the canvas corresponding to the subview node is smaller than a predetermined Set the threshold, and the control content corresponding to the subview node is a picture; the text type is used to indicate that the control content of the canvas of the subview node is text.
  • the view tree includes a root node and a first view node.
  • the first view node is a view node of the large picture type, and the large picture type is used to indicate a subview node.
  • the width of the corresponding canvas is greater than or equal to the preset threshold, and the control content corresponding to the subview node is a picture; when the one or more processors execute the computer instructions, the electronic device is caused to perform the following steps: convert the first The control content of a view node is restored to the state before stretching; where the width of the canvas of the first view node is the stretched width, and the restored control content of the first view node is in the canvas of the first view node Centered display; fill the part of the canvas of the first view node except the control content with the target image.
  • the target image is consistent with part of the content of the control, or the target image is an image obtained by Gaussian blur processing of part of the content of the control.
  • the left edge of the first display window is aligned with the left edge of the second display window; when the one or more processors execute the computer instructions, The electronic device is caused to perform the following steps: receiving a touch operation on the control corresponding to the second view node in the second user interface; wherein the touch operation is at a first position in the second display window; the first position and the second display The distance between the left edges of the window is the first distance value, and the distance between the first position and the upper edge of the second display window is the second distance value; determine the second position where the first position is mapped in the first display window ; The distance between the second position and the left edge of the first display window is the third distance value, and the distance between the second position and the upper edge of the first display window is the fourth distance value; where the first distance value is The ratio of the third distance value is equal to the ratio of the width of the second display interface to the width of the first display interface; the second distance value is equal to the fourth distance value; based on the
  • the aspect ratio of the first display window is less than or equal to 0.5; the aspect ratio of the second display window is greater than 0.5 and less than or equal to 1.
  • the second display window is displayed in full screen on the screen of the electronic device.
  • the target application is any third-party application in the electronic device.
  • the electronic device is an inner folding screen mobile phone, an outer folding screen mobile phone, a vehicle-mounted device, a wearable device, and/or a television.
  • the second aspect and any implementation manner of the second aspect respectively correspond to the first aspect and any implementation manner of the first aspect.
  • the technical effects corresponding to the second aspect and any implementation manner of the second aspect may be referred to the technical effects corresponding to the above-mentioned first aspect and any implementation manner of the first aspect, which will not be described again here.
  • embodiments of the present application provide a computer-readable medium for storing a computer program, where the computer program includes instructions for executing the method in the first aspect or any possible implementation of the first aspect.
  • embodiments of the present application provide a computer program, which includes instructions for executing the method in the first aspect or any possible implementation of the first aspect.
  • embodiments of the present application provide a chip, which includes a processing circuit and transceiver pins.
  • the transceiver pin and the processing circuit communicate with each other through an internal connection path, and the processing circuit executes the method in the first aspect or any possible implementation of the first aspect to control the receiving pin to receive the signal, so as to Control the sending pin to send signals.
  • Figure 1 is a schematic diagram of the hardware structure of an exemplary electronic device
  • Figure 2 is a schematic diagram of an exemplary folding screen mobile phone
  • Figure 3 is a schematic diagram of the software structure of an exemplary electronic device
  • Figure 4 is a schematic diagram of the user interface of a folding screen mobile phone
  • Figure 5 is a schematic diagram illustrating the effect of applying the interface display method in the embodiment of the present application.
  • Figure 6 is a schematic flowchart of an exemplary interface display method
  • Figures 7a to 7b are schematic structural diagrams of an exemplary ViewTree
  • Figure 7c is a schematic diagram of an exemplary layout system processing flow
  • Figure 7d is a schematic diagram of the layout stage
  • Figure 7e is a schematic diagram of the rendering stage
  • Figure 7f is a schematic diagram of an exemplary user interface
  • Figure 8 is a schematic flowchart of an exemplary interface display method
  • Figure 9a is a schematic diagram of an exemplary first display window and a second display window
  • Figure 9b is a schematic diagram of the user interface after layout based on the first display window
  • Figure 10a is an exemplary canvas stretching diagram
  • Figure 10b is a schematic diagram of an exemplary stretched user interface
  • Figure 10c is a schematic diagram of the restored user interface
  • FIGS 11a to 11b are schematic diagrams of the node restoration process
  • Figures 12a to 12c are exemplary picture filling diagrams
  • FIGS 13a to 13b are schematic diagrams of the processing flow of multi-line text type nodes
  • Figure 14 is a schematic diagram of an exemplary event dispatch flow
  • Figure 15 is a schematic diagram of other application scenarios exemplarily shown.
  • Figure 16 is a schematic structural diagram of an exemplary device.
  • a and/or B can mean: A exists alone, A and B exist simultaneously, and they exist alone. B these three situations.
  • first and second in the description and claims of the embodiments of this application are used to distinguish different objects, rather than to describe a specific order of objects.
  • first target object, the second target object, etc. are used to distinguish different target objects, rather than to describe a specific order of the target objects.
  • multiple processing units refer to two or more processing units; multiple systems refer to two or more systems.
  • FIG. 1 shows a schematic structural diagram of an electronic device 100 .
  • the electronic device 100 shown in FIG. 1 is only an example of an electronic device, and the electronic device 100 may have more or fewer components than shown in the figure, and two or more components may be combined. , or can have different component configurations.
  • the various components shown in Figure 1 may be implemented in hardware, software, or a combination of hardware and software including one or more signal processing and/or application specific integrated circuits.
  • the electronic device 100 may include: a processor 110, an external memory interface 120, an internal memory 121, a universal serial bus (USB) interface 130, a charging management module 140, a power management module 141, a battery 142, an antenna 1, an antenna 2.
  • Mobile communication module 150 wireless communication module 160, audio module 170, speaker 170A, receiver 170B, microphone 170C, headphone interface 170D, sensor module 180, button 190, motor 191, indicator 192, camera 193, display screen 194, And subscriber identification module (subscriber identification module, SIM) card interface 195, etc.
  • SIM subscriber identification module
  • the sensor module 180 may include a pressure sensor 180A, a gyro sensor 180B, an air pressure sensor 180C, a magnetic sensor 180D, an acceleration sensor 180E, a distance sensor 180F, a proximity light sensor 180G, a fingerprint sensor 180H, a temperature sensor 180J, a touch sensor 180K, and ambient light. Sensor 180L, bone conduction sensor 180M, etc.
  • the processor 110 may include one or more processing units.
  • the processor 110 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, memory, video codec, digital signal processor (digital signal processor, DSP), baseband processor, and/or neural-network processing unit (NPU) wait.
  • application processor application processor, AP
  • modem processor graphics processing unit
  • GPU graphics processing unit
  • image signal processor image signal processor
  • ISP image signal processor
  • controller memory
  • video codec digital signal processor
  • DSP digital signal processor
  • baseband processor baseband processor
  • NPU neural-network processing unit
  • different processing units can be independent devices or integrated in one or more processors.
  • the processor 110 may also be provided with a memory for storing instructions and data.
  • the memory in processor 110 is cache memory. This memory may hold instructions or data that have been recently used or recycled by processor 110 . If the processor 110 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 110 is reduced, thus improving the efficiency of the system.
  • the wireless communication function of the electronic device 100 can be implemented through the antenna 1, the antenna 2, the mobile communication module 150, the wireless communication module 160, 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 100 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 150 can provide solutions for wireless communication including 2G/3G/4G/5G applied on the electronic device 100 .
  • the mobile communication module 150 may include at least one filter, switch, power amplifier, low noise Amplifier (low noise amplifier, LNA), etc.
  • the wireless communication module 160 can provide applications on the electronic device 100 including wireless local area networks (WLAN) (such as wireless fidelity (Wi-Fi) network), Bluetooth (bluetooth, BT), and global navigation satellites.
  • WLAN wireless local area networks
  • WiFi wireless fidelity
  • BT Bluetooth
  • 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.
  • the wireless communication module 160 may be one or more devices integrating at least one communication processing module.
  • the antenna 1 of the electronic device 100 is coupled to the mobile communication module 150, and the antenna 2 is coupled to the wireless communication module 160, so that the electronic device 100 can communicate with the network and other devices through wireless communication technology.
  • the electronic device 100 implements display functions through a GPU, a display screen 194, an application processor, and the like.
  • the GPU is an image processing microprocessor and is connected to the display screen 194 and the application processor. GPUs are used to perform mathematical and geometric calculations for graphics rendering.
  • Processor 110 may include one or more GPUs that execute program instructions to generate or alter display information.
  • the display screen 194 is used to display images, videos, etc.
  • Display 194 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).
  • LED organic light-emitting diode
  • AMOLED organic light-emitting diode
  • FLED flexible light-emitting diode
  • Miniled MicroLed, Micro-oLed, quantum dot light emitting diode (QLED), etc.
  • the electronic device 100 may include 1 or N display screens 194, where N is a positive integer greater than 1.
  • Figure 2 is a schematic diagram of a folding screen mobile phone. Please refer to Figure 2 .
  • the folding screen mobile phone includes an external display screen (referred to as external screen) 201 and an internal display screen (referred to as internal screen) 202.
  • the height of the outer screen 201 and the inner screen 202 are equal, and the screen width of the inner screen 202 is twice the screen width of the outer screen 201.
  • the display screen in Figure 2 is only a schematic example.
  • the screen ratio between the inner screen and the outer screen may also be other ratios.
  • the external screen 201 may be a screen smaller than the casing of the mobile phone, such as a square screen, or a rectangle smaller than the external screen 201 shown in FIG. 2 , and be set in the middle or any area of the mobile phone screen casing, and
  • the inner screen can be the same as in Figure 2.
  • folding screen mobile phones may also include other forms of folding screen mobile phones, such as external folding screen mobile phones, etc.
  • This application does not limit it.
  • the description will not be repeated below.
  • the interface display solution in the embodiments of the present application can also be applied to tablets, vehicle-mounted devices, TVs and other devices whose screen aspect ratios are significantly different from those of straight-format mobile phones, specifically realizing the internal screen display of foldable mobile phones. Similarly, this application will not give examples one by one.
  • the electronic device 100 can implement the shooting function through an ISP, a camera 193, a video codec, a GPU, a display screen 194, an application processor, and the like.
  • the external memory interface 120 can be used to connect an external memory card, such as a Micro SD card, to expand the storage capacity of the electronic device 100.
  • the external memory card communicates with the processor 110 through the external memory interface 120 to implement the data storage function. Such as saving music, videos, etc. files in external memory card.
  • Internal memory 121 may be used to store computer executable program code, which includes instructions make.
  • the processor 110 executes instructions stored in the internal memory 121 to execute various functional applications and data processing of the electronic device 100 .
  • the internal memory 121 may include a program storage area and a data storage area.
  • 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 100 (such as audio data, phone book, etc.).
  • the electronic device 100 can implement audio functions through the audio module 170, the speaker 170A, the receiver 170B, the microphone 170C, the headphone interface 170D, and the application processor. Such as music playback, recording, etc.
  • the audio module 170 is used to convert digital audio information into analog audio signal output, and is also used to convert analog audio input into digital audio signals. Audio module 170 may also be used to encode and decode audio signals. In some embodiments, the audio module 170 may be provided in the processor 110 , or some functional modules of the audio module 170 may be provided in the processor 110 .
  • the software system of the electronic device 100 may adopt a layered architecture, an event-driven architecture, a microkernel architecture, a microservice architecture, or a cloud architecture.
  • the embodiment of this application takes the Android system with a layered architecture as an example to illustrate the software structure of the electronic device 100 .
  • FIG. 3 is a software structure block diagram of the electronic device 100 according to the embodiment of the present application.
  • the layered architecture of the electronic device 100 divides the software into several layers, and each layer has clear roles and division of labor.
  • the layers communicate through software interfaces.
  • the Android system is divided into four layers, from top to bottom: application layer, application framework layer, Android runtime and system libraries, and kernel layer.
  • the application layer can include a series of application packages.
  • the application package can include camera, gallery, calendar, calling, map, navigation, WLAN, Bluetooth, music, video, short message, payment and other applications.
  • the application framework layer provides an application programming interface (API) and programming framework for applications in the application layer.
  • API application programming interface
  • the application framework layer includes some predefined functions.
  • the application framework layer can include window manager, content provider, view system, phone manager, resource manager, notification manager, layout system, etc.
  • a window manager is used to manage window programs.
  • the window manager can obtain the display size, determine whether there is a status bar, lock the screen, capture the screen, etc.
  • Content providers are used to store and retrieve data and make this data accessible to applications.
  • Said data can include videos, images, audio, calls made and received, browsing history and bookmarks, phone books, etc.
  • 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.
  • a display interface including a text message notification icon may include a view for displaying text and a view for displaying pictures.
  • the phone manager is used to provide communication functions of the electronic device 100 .
  • call status management including connected, hung up, etc.
  • the resource manager provides various resources to applications, such as localized strings, icons, pictures, layout files, video files, etc.
  • the notification manager allows applications to display notification information in the status bar, which can be used to convey notification-type messages and can automatically disappear after a short stay without user interaction. For example, the notification manager is used to notify download completion, Message reminders, etc.
  • the notification manager can also be notifications that appear in the status bar at the top of the system in the form of charts or scroll bar text, such as notifications for applications running in the background, or notifications that appear on the screen in the form of conversation windows. For example, text information is prompted in the status bar, a beep sounds, the electronic device vibrates, the indicator light flashes, etc.
  • the layout system can reasonably arrange and lay out each element based on the interface elements input by the application program (which can also be called window elements, page elements, etc., which are not limited in this application), and draw the interface.
  • the application program which can also be called window elements, page elements, etc., which are not limited in this application
  • Android Runtime includes core libraries and virtual machines. Android runtime is responsible for the scheduling and management of the Android system.
  • the core library contains two parts: one is the functional functions that need to be called by the Java language, and the other is the core library of Android.
  • 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, and garbage collection and other functions.
  • System libraries can include multiple functional modules. For example: surface manager (surface manager), media libraries (Media Libraries), 3D graphics processing libraries (for example: OpenGL ES), 2D graphics engines (for example: SGL), etc.
  • the surface manager is used to manage the display subsystem and provides the fusion of 2D and 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.
  • 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 contains at least display driver, camera driver, audio driver, and sensor driver.
  • the components included in the system framework layer, system library and runtime layer shown in Figure 3 do not constitute specific limitations on the electronic device 100.
  • the electronic device 100 may include more or fewer components than shown in the figures, or some components may be combined, some components may be separated, or some components may be arranged differently.
  • Figure 4 is a schematic diagram of the user interface of a foldable screen mobile phone. Please refer to Figure 4. As an example, take the resolution of the external screen 401 of the folding screen mobile phone as 2700*1100 pixels and the resolution of the internal screen 402 of the folding screen mobile phone as 2700*2200 pixels. That is to say, the internal screen The width of the display interface of 402 is twice the width of the display interface of the external screen 401.
  • the external screen 401 of the folding screen mobile phone displays the user interface 403 of the payment application (which may also be called an application interface, an application display interface, etc., and is not limited in this application).
  • the user interface 403 is displayed in full screen on the external screen 401, that is, the corresponding resolution of the user interface 403 is 2700*1100 pixels, which is the same size as the external screen 401.
  • the sizes involved in the embodiments of the present application such as the size of the screen, are the sizes of the screen that can be used to display interface content, rather than the actual appearance size of the screen, and will not be described again below.
  • the user can open the folding screen, so that the folding screen changes from the folded state (ie, the state shown in (1) of Figure 4) to the unfolded state (eg, as shown in (2) or (3) of Figure 4).
  • the unfolded folding screen mobile phone displays the user interface of the payment application on the inner screen.
  • the application interface created by third-party applications is usually suitable for the horizontal and vertical ratio of the screen of a candy bar phone (also called the aspect ratio, that is, the ratio of the width and height of the screen).
  • candy bar phones or foldable phones
  • the aspect ratio of the screen is about 1:2, for example, the resolution is 2700*1100 pixels
  • the aspect ratio of the internal screen of a foldable phone is usually 1:1 or close to 1:1. Therefore, the user interface of the third-party application in the mobile phone based on the aspect ratio layout of the candy bar mobile phone cannot be applied to the folding screen inner screen with an aspect ratio of 1:1 (or close to 1:1, which will not be repeated below).
  • (2) of Figure 4 illustrates an exemplary display method of the user interface of an internal screen.
  • the internal screen 402 is displayed in a multi-interface manner (which can also be called Parallel view) displays the user interface of the application.
  • the mobile phone can display the user interface 404a of the payment application in the left half of the inner screen 402 (ie, the left half area of the dotted line).
  • the user interface 404b of the payment application is displayed in the right half of the screen (ie, the right half area of the dotted line).
  • the display contents of the user interface 404a and the user interface 404b are different.
  • the user interface 404b may be displayed by the mobile phone in response to the received user click on the "Discover" control (which may also be called a button, component, element, option, etc., which is not limited in this application) in the user interface 404a.
  • the aspect ratio of the left half screen and the right half screen of the inner screen 402 is close to that of a candy bar mobile phone. For example, if the size of the inner screen 402 is 2700*2200, then the aspect ratio of the left/right half screen is both 2700*1100. It can be understood that in the example shown in (2) of FIG.
  • the inner screen 402 is a display window with the same (or similar) aspect ratio as that of a candy bar phone (ie, the display window of the left half of the screen and the display window of the right half of the screen).
  • Display window of the screen displays two user interfaces of a third-party application.
  • the size of the display window corresponding to each user interface is equal to the size of the display window of a candy bar mobile phone. Therefore, in this example, the third-party application is still laid out according to the display window with an aspect ratio of approximately 1:2, without the need for the third-party application to change the interface layout, and the content of each of the multiple pages displayed on the phone is
  • the content displayed on a candy bar phone (or the casing of a folding screen phone) is the same.
  • (3) of FIG. 4 exemplarily illustrates another display method of the user interface of the inner screen.
  • the inner screen 402 displays the user interface of the application in a manner that stretches the interface, or can be understood as changing the content displayed in the user interface.
  • the internal screen 402 of the mobile phone displays the user interface 406 of the application.
  • the user interface is appropriately enlarged so that the user interface adapts to the size of the inner screen 402.
  • the user interface 406 displayed on the inner screen 402 is relatively smaller than the content of the user interface 404a displayed on the outer screen 401 or the left half of the inner screen 402. Less, reducing the amount of information displayed on the screen.
  • the user interface 403 in the external screen 401 shown in (1) of FIG. 4 includes a picture 405. Since each element in the user interface 406 is enlarged and displayed, the elements are moved downward and stretched, causing the picture to appear to the user. When displayed in the interface 406, it is also moved down and stretched, as shown in picture 407 in (3) of Figure 4.
  • a third-party application is required to rearrange the user interface based on the size of the screen's display window.
  • the current display methods are all by changing the interface content displayed on the display screen.
  • (2) of Figure 4 is a multi-interface display method
  • (2) of Figure 4 is a multi-interface display method.
  • the user interface is displayed by rearranging the elements in the interface. The above-mentioned method of changing the interface content displayed on the screen may not meet the user's expectations for the user interface display.
  • Embodiments of the present application provide an interface display method, which can make the content of the user interface displayed on a large screen (such as the inner screen 202 of the folding screen shown in Figure 2) that is significantly different from the screen ratio of a candy bar mobile phone be consistent with that of the screen.
  • the content of the user interface displayed on the screen of the candy bar phone is the same. That is, the interface display method in the embodiment of the present application does not display the user interface by enlarging the elements of the user interface on the screen or increasing the elements of the user interface (such as parallel view mode), thereby effectively improving the user experience.
  • FIG. 5 is a schematic diagram illustrating the effect of applying the interface display method in the embodiment of the present application. Please refer to FIG.
  • the mobile phone changes to the unfolded state in response to the received user operation of opening the folding screen.
  • the mobile phone displays the user interface 408 of the payment application on the internal screen 402 .
  • the interface elements included in the user interface 408 are the same as those included in the user interface 403. It can also be understood that the information displayed in the user interface is the same, so that it will not be reduced when the screen size changes. Amount of information displayed.
  • the user interface of the payment application displayed on the inner screen 402 may also include more content (specific examples will be described in detail in the following embodiments), and its look and feel is closer to that of a candy bar phone.
  • the content of the user interface displayed in the unfolded and folded states of the folding screen mobile phone is the same, and the interface layout is also similar and corresponding, so that the folded and unfolded states of the folding screen mobile phone are During the process of switching between each other, the continuity of the user interface displayed on the internal and external screens can be enhanced. For example, the user views the picture 405 in the user interface 403 displayed on the external screen 401.
  • an internal folding screen mobile phone is used as an example for introduction.
  • the embodiments of the present application can also be applied method introduced in.
  • FIG. 6 is a schematic flowchart of an exemplary interface display method. Please refer to Figure 6, which may include but is not limited to the following steps:
  • the layout system sends window information to the payment application.
  • the payment application is still used as an example for explanation.
  • the user can click the icon of the payment application, and the mobile phone runs the payment application in response to the received user operation.
  • the layout system sends window information to the payment application, which is used to indicate the size of the window in which the user interface is displayed on the phone screen.
  • the user interface of the payment application is displayed in full screen as an example.
  • the window information sent by the layout system to the payment application is used to indicate the user interface size (i.e., the size of the screen) when the mobile phone is displayed in full screen, such as window information. Used to indicate that the size of the user interface displayed on the screen is 2700*1100 pixels.
  • the user interface described in the embodiments of this application is described as the interface being displayed on the screen.
  • the user interface can also be understood as being displayed in the application window (or can be called For display windows, application display windows, etc., this application does not limit) display.
  • the window information can also be understood as indicating the size of the display window.
  • each display screen displays the user interface in full screen, that is, the size of the display window of the application is the same as the size of the screen.
  • the display window and screen size are different will be described in the following embodiments and will not be described again here.
  • the payment application generates a ViewTree (view tree) based on the window information.
  • the payment application sends ViewTree to the layout system.
  • the payment application receives the window information sent by the layout system and can determine the size of the window displayed by the user interface.
  • the payment application can generate ViewTree based on interface elements and window information.
  • interface elements can be managed
  • the solution is the elements included in the interface to be displayed in the display window.
  • the interface elements may be cached locally by the application, or may be obtained by the application from the server, which is not limited in this application.
  • FIG 7a is a schematic structural diagram of an exemplary ViewTree. Please refer to Figure 7a.
  • Each interface (or page) of the application corresponds to a ViewTree that describes its layout structure.
  • View (View) and ViewGroup (View Group) are the components of ViewTree.
  • View and ViewGroup are the basic components of Android UI (User Interface, user interface).
  • ViewGroup can contain View and/or ViewGroup, and ViewGroup itself is an extension of View.
  • ViewGroup and View are nested layer by layer in a tree structure to form ViewTree.
  • the View and/or ViewGroup in the ViewTree can also be called nodes in the ViewTree. In other embodiments, they can also be called components, elements or controls. That is to say, the implementation of this application
  • the "node” mentioned in the example can refer to View or ViewGroup, which will not be repeated below.
  • Figure 7a Take the ViewTree shown in Figure 7a corresponding to the user interface 403 in Figure 5 or Figure 4 as an example for explanation. It should be noted that Figure 7a optionally includes some components of the ViewTree corresponding to the user interface 403. The user interface 403 The corresponding ViewTree may include more or fewer components than shown in Figure 7a, which is not limited by this application.
  • ViewGroup1 is the root node of the ViewTree.
  • the root node ViewGroup1 may include at least one ViewGroup and/or at least one View. Examples include ViewGroup2, View1 and View2.
  • Each ViewGroup may further include at least one ViewGroup and/or at least one View.
  • ViewGroup2 includes View3 and View4.
  • ViewGroup1 is the parent node of ViewGroup2, View1 and View2, and accordingly, ViewGroup2, View1 and View2 are the child nodes of ViewGoup1.
  • ViewGroup2 is the parent node of View3 and View4, and View3 and View4 are the child nodes of ViewGroup2.
  • each node in the ViewTree corresponds to its own declaration information (which may also be called attribute information or description information, etc., which is not limited in this application).
  • the declaration information includes but is not limited to: used to indicate the control corresponding to the node ( or components, elements, etc., which will not be described in detail below) in the display window (where the display window is the window indicated by the window information in S601), and type information used to indicate the type of the node.
  • the type of a node can also be understood as the type of the control corresponding to the node, which will not be described again below.
  • a node (such as a View) can be understood as a corresponding relationship with a control, or it can be understood that a node is a control, which is not limited in this application.
  • the layout information can be understood as the position and size of the View in the display window (for example, the position and size of the View in its parent node View), and the type information can include root layout type, text type, etc. .
  • the type information of ViewGroup1 is "DecorView", which indicates that its type is the root node type.
  • the type information of View4 is "TextView", which is used to indicate that its type is text.
  • each node in ViewTree corresponds to a control in the user interface (can also be called a component, element, etc., which will not be repeated below).
  • View3 corresponds to View4 corresponds to the "Scan" icon control 701 among the "Scan” controls in the user interface 403, and the "Scan” text control 702 among the "Scan” controls in the user interface 404.
  • the specific content, type, and layout of View3 and View4 in the window can be set.
  • the declaration information corresponding to View4 includes but is not limited to: the type information of View4, the content information of View4, and the layout information of View4 in the window. More specifically, the type information of View4 is text type, the content information of View4 is text "Scan”, and the layout information of View4 in the window is left-aligned, which is used to refer to Indicates that View4 is close to the left edge in its parent node (it can also include offset and other information).
  • the payment application creates the ViewTree, it outputs the ViewTree (including each node in the ViewTree and its declaration information) to the layout system.
  • the layout system generates the user interface based on ViewTree.
  • the layout system executes the layout refresh process based on the ViewTree.
  • the layout refresh process may include: a measure process, a layout process, and a draw process.
  • the measurement process is optionally: the layout system traverses each node in the ViewTree (including View and/or ViewGroup) from top to bottom, and determines the actual size of each node in the user interface based on the declaration information corresponding to each node. , that is, the maximum width and height required by the node.
  • the layout process is optionally: the layout system traverses each node in the ViewTree from top to bottom, and determines the position and size of each child node in its parent node based on the declaration information corresponding to each node.
  • each node can be viewed as a rectangle.
  • the nodes in ViewTree have a parent-child relationship, and all nodes except the root node correspond to parent nodes.
  • the layout system can calculate the distance between the left, top, right, and bottom sides of a rectangular View or ViewGroup and the left, top, right, and bottom sides of its parent node View or ViewGroup, thereby Get the position and size of each rectangular View or ViewGroup in its parent node View or ViewGroup.
  • the position and size corresponding to the root node are the position and size corresponding to the display window of the application.
  • the layout system first traverses the root node ViewGroup1.
  • the corresponding display window and screen The resolution is the same (for example, the resolution is 1280*720 pixels).
  • the position and size corresponding to the root node ViewGroup1 are consistent with the display window of the screen, that is, the resolution is also 1280*720 pixels.
  • the layout system continues to traverse the child nodes under ViewGroup1, including ViewGroup2, View1 and View2.
  • the traversal order of ViewTree is from top to bottom, from left to right. In other embodiments, other traversal orders may also be used, and this application does not limit it.
  • the layout system can determine the distance between the left side of ViewGroup2 and the left side of its parent node (i.e.
  • ViewGroup1 based on the width and height of VewGroup2 (that is, obtained during the measurement process) and the declaration information. (i.e. left margin), the distance between the top side length of ViewGroup2 and the top side length of ViewGroup1 (i.e. top margin), the distance between the right side length of ViewGroup2 and the right side length of ViewGroup1 (i.e. right margin), the distance between the bottom side length of ViewGroup2 and the bottom side length of ViewGroup1 distance (i.e. bottom margin), thereby obtaining the position and size (i.e. layout) of ViewGroup2 in its parent node (i.e. ViewGroup1). Then, the layout system continues to traverse the child nodes under ViewGroup2, including View3 and View4.
  • the layout system continues to traverse the child nodes under ViewGroup2, including View3 and View4.
  • the layout system can determine the distance between the left side of View3 and the left side of its parent node (i.e. ViewGroup2), the length of View3 based on the width and height of View3 (i.e., the results obtained during the measurement process) and the declaration information of View3.
  • the drawing process optionally creates a canvas (Canvas) for the layout system, and based on the results obtained in the calculation process, draws the contents of each node in the ViewTree at the corresponding position on the canvas to obtain the user interface. noodle.
  • the drawing process is the same as the measurement process and layout process, and each node in the ViewTree is traversed from top to bottom.
  • the layout system can draw the content corresponding to each node in sequence according to the traversal order (it can also be understood as the UI corresponding to each node). It should be further explained that in the process of drawing each node on the canvas, each node in the ViewTree corresponds to its own canvas.
  • the size of the canvas corresponding to the node is the same as the size of the node, that is, the width of the canvas is the same as the width of the node.
  • the height of is the same as the height of the node.
  • the width and height of the node are obtained during the measurement process described above.
  • the layout system can draw the content corresponding to each node on the canvas corresponding to each node. It should be noted that the size of the canvas corresponding to the root node ViewGroup1 is the same as the size of the application's display window (the concept can be referred to above, and will not be repeated here). For example: Please refer to Figure 7e.
  • the layout system creates a canvas 703 of the root node ViewGroup1, and draws the content corresponding to the root node ViewGroup1 on the canvas 703.
  • the layout system can fill the canvas 703 with red as the background color of the user interface. Then, according to the structure of ViewTree, the layout system continues to traverse ViewGroup2.
  • the layout system can draw on the corresponding position of canvas 703 of ViewGroup1 based on the position and size of ViewGroup2 in its parent node ViewGroup1 (that is, the result obtained in the layout process).
  • User interface for ViewGroup2. Specifically: please refer to Figure 7e.
  • the layout system draws the canvas of ViewGroup2 at the corresponding position, and the content corresponding to ViewGroup2 is drawn in the canvas of ViewGroup2.
  • the layout system also traverses View1 and View2 in sequence, and draws the user interfaces of View1 and View2 at the corresponding positions of ViewGroup1 according to the position and size of View1 in ViewGroup1 and the position and size of View2 in ViewGroup1 obtained during the layout process. (not shown in the figure). Still referring to Figure 7e, for example, the layout system traverses to View3.
  • the layout system can determine the position of View3 (which can be understood as the canvas or user interface of View3) between its parent node ViewGroup2 based on the results obtained in the layout process. size.
  • the layout system draws the UI of View3 at the corresponding position (which can also be called the image of View3, the view of View3, the graphics of View3, etc. This application does not limit it and will not be repeated below), which is what is mentioned above.
  • the layout system continues to traverse and draw each node of the ViewTree in the above manner to obtain the user interface shown in (1) of Figure 7f (which can also be understood as the user interface corresponding to the ViewTree). Please refer to (2) of Figure 7f.
  • the layout system After the layout system generates the user interface 704, the layout system outputs the user interface 704 to relevant modules for rendering and other processing, and displays the user interface 704 in full screen on the screen.
  • the layout system can call the member function -PerformTraversals of the ViewRoot class to perform the measurement, layout and drawing process, which is not limited by this application.
  • the layout refresh process is triggered once in 16ms (corresponding frame rate is 60 frames/s).
  • the refresh interval is also different depending on the frame rate. It is set according to actual needs and is not limited in this application, so the description will not be repeated below. That is to say, in the embodiment of the present application, the layout system re-executes the measurement, layout and drawing process shown in Figure 7c every 16ms to refresh the user interface displayed on the screen.
  • the layout system may not execute the process in Figure 7c to save power consumption.
  • FIG. 8 is a schematic flowchart of an exemplary interface display method. Please refer to Figure 8, details include:
  • the layout system sends window information to the payment application.
  • the difference between the window information sent by the layout system to the payment application and S601 is that S601
  • the information about the display window sent in is the information corresponding to the window to be displayed in the user interface.
  • the user interface 704 is displayed in full screen on the display screen, and the size of its corresponding display window is the same as the resolution of the mobile phone screen.
  • the resolution size carried by the display window information sent by the layout system in S601 is the same as the resolution of the mobile phone screen, so that the application can perform layout based on the size indicated by the window information.
  • the height of the display window indicated by the window information sent by the layout system to the payment application is the same as the height of the actual display window, and the width of the display window indicated in the window information is smaller than the width of the actual display window.
  • the display window indicated by the window information is identified as the first display window and the actual display window is identified as the second display window in the following.
  • the size of the first display window indicated by the window information is intended to be close to the display size of a candy bar phone, so that the application can still be laid out based on a display window close to that of a candy bar phone.
  • the window width indicated in the window information sent by the layout system to the payment application is half (that is, 50%) of the width of the window that is actually to be displayed, and the window height indicated in the window information is the same as the window that is actually to be displayed. are the same height as an example.
  • the width of the first display window indicated by the window information may also be the width ratio of the second display window (ie, the actual display window), or may be greater than 50% or less than 50%, for example, it may be the second display window.
  • the width is one-third or two-thirds.
  • the main purpose is to make the window indicated by the window information sent by the layout system to the application close to a candy bar phone. It should be noted that the aspect ratios of candy bar mobile phones are also different.
  • the display window indicated by the window information in the embodiment of the present application is consistent with the actual display window in height, and the ratio of width to height is close to that of a candy bar.
  • Mobile phone or a mobile phone with a folding screen with a large screen inside).
  • the resolution of the internal screen 902 of the folding screen mobile phone is 2700*2200 pixels.
  • the user interface is displayed in full screen on the internal screen 902 as an example. That is to say , the resolution of the actual display window of the user interface of the payment application is 2700*2200 pixels.
  • the resolution of the display window indicated by the window information sent by the layout system to the payment application is 2700*1100 pixels, that is, the width of the first display window 901 described by the window information sent by the layout system is the actual display window (i.e., the second display window window) is half the width, while the length (i.e. height) is the same.
  • the window information sent by the layout system to the payment application only includes the height and width of the first display window, which does not indicate the position of the first display window in the actual display window.
  • the dotted line shown in Figure 9a is only The relationship between the width of the first display window and the width of the second display window is schematically shown.
  • the embodiment of the present application takes a payment application as an example for explanation.
  • the embodiment of the present application can be used for interface display of other applications, such as shopping applications, social networking applications, travel applications, etc. There are no restrictions on application.
  • S802 The payment application generates a ViewTree based on the window information.
  • the payment application sends ViewTree to the layout system.
  • the payment application receives window information input by the layout system.
  • the payment application can generate a ViewTree based on the window information and output the ViewTree to the layout system.
  • a ViewTree based on the window information
  • the layout system For specific details, please refer to the relevant descriptions of S602 and S603, which will not be described again here.
  • the size indicated by the window information obtained by the application is the size of the first display window, which is half the width (the same height) of the actual display window (i.e., the second display window). Therefore, ,branch The ViewTree generated by the application is also generated based on the first display window.
  • the layout system generates the first user interface based on ViewTree.
  • the layout system executes the layout refresh process based on the ViewTree, that is, the measurement, layout, and drawing processes.
  • the measurement process and layout process are the same as in S604.
  • the layout system can layout the ViewTree based on the window information. That is to say, after the layout system executes the measurement and layout process, it obtains the layout (including the position and size) of each node in the ViewTree in the first display window.
  • the results of the measurement and layout process still take the schematic diagram shown in Figure 9a as an example.
  • the layout system sequentially performs measurements on each node of the ViewTree (still taking the ViewTree in Figure 7a as an example) based on the size of the first window 901. and layout process, taking ViewGroup1, ViewGroup2 and View3 as examples.
  • the layout system obtains that the layout of ViewGroup1 (ie, the root node) is the same as the layout of the first display window, that is, the size and position are the same as the first display window.
  • the layout system continues to traverse ViewTree to obtain the position and size of ViewGroup2 in ViewGroup1.
  • the layout system can calculate the position and size of ViewGroup2 in ViewGroup1.
  • the layout system can calculate the position and size of View3 in its parent node ViewGroup2.
  • the layout result obtained by the layout system is based on the first display window. That is to say, the position and size of each View measured by the layout system are in the first display window, and the first The width of the display window is half of the width of the second display window (that is, the actually displayed window).
  • the ViewTree created based on the window information of the first display window only obtains the height and width of the first display window, but this information does not indicate the position of the first display window on the screen. Location.
  • the layout system may perform measurement and layout based on the actual position of the first display window on the screen.
  • the measurement and layout results obtained by the layout system are the actual position and size of the node (or element, etc.) corresponding to the node on the display screen.
  • the layout system takes the actual display position of the first display window to the left side of the second display window as an example.
  • the position of the first display window can also be on the left side of the second display window.
  • Other positions of the window for example, may be in the center or on the right side, which are not limited in this application.
  • Figure 9b is a schematic diagram of the user interface after layout based on the first display window. It should be noted that this schematic diagram is only for those skilled in the art to better understand this solution, and the layout system does not actually draw the user interface. Please refer to Figure 9b.
  • the layout system layouts the user interface based on the first display window, and the layout effect is close to the display effect in a candy bar mobile phone. That is to say, in the embodiment of the present application, the layout system performs the measurement and layout process based on the window information, which can make the layout of each element (ie, component) in the user interface close to the layout of the interface in a candy bar mobile phone. Please continue to refer to Figure 9b.
  • the user interface corresponding to the first display window is displayed on the inner screen 902, it will occupy one-half of the screen size of the inner screen 902, that is, the height of the first display window is equal to the full screen size.
  • the height of the displayed window is the same, and the width (i.e. 1100) is half the width of the full screen display window (i.e. the second display window) (i.e. 2200).
  • the layout system sets the width of the canvas corresponding to each node (including ViewGroup and View) in the ViewTree to twice the width of the first display window.
  • the height of is set to be the same as the height of the first display window.
  • by moving the canvas Stretching horizontally means setting the canvas of the root node and each sub-node to twice the width of the first display window, that is, the same width as the second display window (that is, the actual displayed window), so that The width of the drawn user interface is the same as the width of the second display window.
  • the layout system executes the measurement and layout process based on the ViewTree and its declaration information input by the payment application, and can obtain the layout of each node in the first display window (actually, each The position and size of the node in its parent node).
  • the layout system executes the measurement and layout process based on the ViewTree and its declaration information input by the payment application, and can obtain the layout of each node in the first display window (actually, each The position and size of the node in its parent node).
  • Figure 9a and will not be described again here.
  • Figure 10a Please refer to (1) of Figure 10a.
  • the layout system executes the measurement and layout process, it can be obtained that in the first display window 1001, the width of ViewGroup1 is w11, the width of ViewGroup2 is w12, and the width of View3 is w13.
  • w11 is equal to the width of the first display window (for example, 1100 pixels).
  • the layout system stretches the canvas width of each node to twice the width in the layout result.
  • the layout system traverses the ViewTree in sequence, and the layout system creates the canvas 1002 of ViewGroup1.
  • the width w21 of the canvas 1002 of the root node ViewGroup1 is twice the width w11 of ViewGroup1 in the layout result.
  • the layout system can draw the content corresponding to ViewGroup1 on the canvas of ViewGroup1.
  • the layout system continues to traverse the ViewTree, and the layout system creates canvas 1003 of ViewGroup2.
  • the width w22 of canvas 1003 is twice the width w12 of ViewGroup2 in the layout result.
  • the layout system can draw the content corresponding to ViewGroup2 on the canvas 1003 of ViewGroup2.
  • the layout system creates the canvas 1004 of View3 in the above manner, where the width w23 of the canvas 1004 is twice the width of w13.
  • the layout system can draw the content corresponding to View3 (such as the "Scan" icon) on the canvas of View3.
  • the first display window is on the left side of the second display window as an example.
  • the layout system obtains each The location information of the node is obtained in the scene on the left side of the second display window for the first display window.
  • the stretching process shown in Figure 10a can be understood as stretching the canvas of each node to the right.
  • the layout system stretches the canvas based on the position of the first display window in the second display window. For example, if the first display window is in the center of the second display window, the canvas stretching process , which can be understood as stretching the canvas to both sides. For another example, if the first display window is on the right side of the second display window, then during the canvas stretching process, it can be understood that the canvas is stretched to the left.
  • the first user interface 1005 can be obtained.
  • the size of the first user interface 1005 (which can also be understood as the canvas size corresponding to the root node ViewGroup1) is the same as the size of the second display window (that is, the actual display window), for example, the resolution is 2700*2200.
  • the user interface 1005 includes but is not limited to: the UI corresponding to the root node ViewGroup1, the UI corresponding to View3 (i.e., the "Scan" icon control 1006), the UI corresponding to View4 (i.e., the "Scan” text control 1007), and others.
  • the UI corresponding to the View may include, for example: a picture control 1008 (which may also be called a picture component or a picture element, etc., which is not limited in this application), a text control 1009, a background control 1010, an input box control 1011, etc. It can be seen from Figure 10b that the content included in the user interface drawn on the canvas 1005 is substantially the same as the content included in the first display window. Moreover, the image corresponding to each control is the result of stretching.
  • the layout system can stretch the canvas through the Canvas.scale method.
  • the layout system can enlarge the canvas of each View by 2 times in the horizontal axis direction, while the vertical axis direction remains unchanged (that is, the top margin, bottom margin, and height mentioned above remain unchanged) to obtain pull-down Stretched user interface.
  • S805 Classify elements in the first user interface and restore elements of the restoration type.
  • the layout system can classify each View and restore the canvas corresponding to the View that needs to be restored (referred to as the restoration type) to obtain a second user interface, such as the second user interface 1012 shown in Figure 10c.
  • the layout system can use the Canvas.scale method to reduce the canvas of the restore type View by 2 times in the horizontal axis direction, while the vertical axis direction remains unchanged (that is, the top margin, bottom margin, and height remain unchanged), so as to Obtain the restored user interface (for example, the second user interface 1012).
  • the layout system can classify each node based on Table 1, and perform processing such as restoring or maintaining a stretched state according to the strategy corresponding to each node classification.
  • nodes can also be understood as controls, and accordingly, node types can also be understood as control types, which will not be repeated below.
  • control types include but are not limited to: root layout type, text type, large picture type, small picture type, ViewGroup type, input box type and other types. It should be noted that the embodiment of this application only takes the form of a table as an example for explanation. In other embodiments, the layout system can also maintain the correspondence between types and strategies in other forms.
  • the root layout type (which may also be called the root layout control type) is the type corresponding to the root node.
  • the type information in the declaration information of the root node is "DecorView".
  • the layout system can determine the root node in the ViewTree.
  • the type information of ViewGroup1 in Figure 7a is "DecorView”.
  • the strategy corresponding to the root node type is to maintain the stretched state.
  • the canvas 1005 (which can also be called the first user interface 1005) corresponding to the root node in Figure 10b, during the restoration process, the layout system recognizes that the type of ViewGroup1 is "DecorView", and by retrieving Table 1, determines that the corresponding strategy is Maintain the current stretch. Then the graphics of ViewGroup1 in the second user interface 1012 shown in Figure 10c still maintains a stretched state, that is, the canvas width of ViewGroup1 is the stretched width, such as w21 in Figure 10a.
  • the text type (which can also be called a text control type) is identified as "TextView" in the type information corresponding to the node.
  • the corresponding strategy for this type of control is restoration.
  • the layout system restores the canvas width of this type of control to the width before stretching, while the top margin, bottom margin (the concept can be referred to above, and will not be repeated here) and height remain unchanged.
  • the "Scan" text control 1007 in Figure 10b as an example, please refer to (1) of Figure 11a.
  • the width of the "Scan" text control 1007 corresponding to View4 is w24, this width is the width after stretching.
  • the description of canvas stretching can be referred to above and will not be described again here.
  • the layout system detects that the type of View4 is text type, and the corresponding strategy is restoration.
  • the layout system restores the horizontal width of View4's canvas to the width before stretching, which is the result obtained by the measurement and layout process.
  • the width is w14 (the method of obtaining it can be referred to the above, and will not be described again here).
  • w24 is twice the value of w14.
  • the graphic of the "Scan" text control 1007 is restored as the canvas of View4 is restored, and its image changes from a stretched state to a restored state.
  • the top margin, bottom margin and height of the canvas of View4 that is, the canvas to which the "scan" text control 1007 belongs, remain unchanged.
  • the large picture type (which can also be called the large picture control type) is optionally a picture type node with a width greater than or equal to the threshold, and the corresponding strategy of this type is to maintain the stretched state.
  • the threshold value is 50% of the display window as an example for explanation.
  • the layout system can use the results obtained after the layout process to determine whether the image is a large image. For example, taking the picture 1008 in Figure 10b as an example, the layout system determines that the width of the picture 1008 in the first display window 1001 is greater than 50% of the width of the first display window based on the results obtained from the measurement and layout process. The system can determine that picture 1008 is a large picture.
  • the layout system can also make a judgment based on the stretched result.
  • the width of the stretched picture 1008 exceeds 50% of the width of the second display window (that is, the canvas 1005).
  • the layout system It can be determined that picture 1008 is a large picture.
  • the thresholds in this application are only examples of suitability. Specific thresholds can be set according to actual needs and are not limited in this application. For example, after the layout system determines that the type corresponding to the node is a large picture type, the canvas of the node can be kept in a stretched state.
  • the small picture type (which may also be called the small picture control type) is optionally a picture whose width is less than or equal to the threshold.
  • the node type of the "Scan" icon control 1006 in Figure 10b is a picture type. Based on its width, the layout system detects that the width of the picture is less than the threshold, and can determine that the "scan" icon control 903 is a small picture type. The specific judgment method is similar to the big picture and will not be repeated here.
  • the type information corresponding to the node is identified as "ViewGroup”, and its corresponding strategy is to maintain the stretched state.
  • the layout system detects that the node type is "ViewGroup”, it can determine that its restoration strategy is to maintain the stretched state by retrieving Table 1.
  • Table 1 The specific description is similar to the root node type and will not be described again here.
  • the input box type that is, the type information corresponding to the node is identified as "EditText", and its corresponding policy Keep it slightly stretched.
  • the input box control 1011 in Figure 10b still maintains its stretched state in the second user interface 1012 shown in Figure 10c.
  • the corresponding strategy is optionally to maintain the stretched state, or optionally to restore.
  • the layout system can be based on its alignment in the parent node before stretching. method to align the nodes. Alignment includes the left alignment mentioned above, center alignment, right alignment, etc. It should be noted that the layout system can obtain the alignment of each node in the parent node during the layout process.
  • the right alignment method can refer to (4) in Figure 11b.
  • the layout system restores the View
  • its position is shifted to the right side of the area 1101. That is, the right length of View4 is aligned with the right length of area 1101, the upper side length is aligned with the upper side length of area 1101, and the lower side length is aligned with the lower side length of area 1101.
  • the alignment of nodes of each restoration type may be default, for example, the default is left alignment.
  • the alignment of each node refers to the alignment in the layout process.
  • the layout system traverses each node in turn and restores or maintains stretching.
  • the layout system can obtain the alignment of each node in ViewGroup2. For example, if the alignment of View3 in ViewGroup2 is centered, the layout system can center align View3 in the stretch area after restoring View3.
  • any alignment such as left alignment, center alignment, and right alignment can be used, and this application does not limit it.
  • the layout system can align the canvas corresponding to the View through the Canvas.translate method.
  • the corresponding strategy is to maintain the stretched state.
  • a solid-color large picture type control you can keep it in the current stretched state, such as the background control 1010 in Figure 10c, which is a solid-color picture (of course it can also be a gradient color), and it is kept stretched. In this case, the image blur is small and within the acceptable range, so the current stretching state can be maintained.
  • the layout system can restore the picture and fill other parts of the canvas except the picture content.
  • the filling methods in the embodiment of the present application may include: Gaussian blur filling method, background color filling method, etc.
  • the layout system performs image recognition on the large picture control 1201. It can be recognized that the left edge area 1202 of the large picture control 1201 is filled with a solid color (it can also be a gradient color), and the right edge area 1203 is also filled with a solid color. .
  • the filling colors of the left and right edges may be the same or different, and are not limited in this application.
  • the layout system restores the large picture control 1201 to the size before stretching. It should be noted that this step can be understood as restoring and centering the image content in the View, and its canvas maintains the stretched width.
  • the layout system can divide the left side of the restored large picture control 1201 into the left side of the canvas 1204 corresponding to the View to which the control belongs.
  • the area 1205 between them is filled, and the filled content is the same as the content of the left edge area 1202 of the large picture control 1201 (it can be a pattern, color or gradient color, etc., which is not limited in this application).
  • the layout system fills the area 1206 between the right length of the restored large picture control 1201 and the right length of the canvas 1204 corresponding to the node to which the control belongs, and the filled content is consistent with the right edge area 1203 of the large picture control 1201
  • the content can be pattern, color or gradient color, etc., which is not limited in this application) is the same.
  • the layout system performs image recognition on the large picture control 1207, and can recognize that the background color of the large picture control 1207 is a solid color (it can also be a gradient color, etc.).
  • the layout system can restore and center the image content of the large picture control 1207, and the layout system can fill the area of the canvas 1208 corresponding to the node to which the large picture control 1207 belongs, except for the restored large picture control 1207, with the filled content. That is the background color of the large picture control 1207.
  • the layout system recognizes the large picture control 1209. It can be recognized that the middle area 1210 of the large picture control 1209 is a similar pattern or fill color, and the two sides of the large picture control 1209 are people. Image (it can also be other images, which is not limited in this application). In the process of stretching the large picture control 1209, the layout system can stretch the middle area 1210 of the large picture control 1209, while the character image area 1211 remains unchanged.
  • the layout system can restore and center the image content in the image control, and fill the parts of the canvas except the image content with Gaussian blur.
  • the Gaussian blur graphic can be based on the edge area of the picture content, or it can be based on the entire picture content, or it can be a graphic based on any area in the picture, which is not limited in this application.
  • special processing strategies may be set for some special types of controls, and their processing methods are different from the above-mentioned various types of strategies.
  • Special types include but are not limited to: WebView type controls and multi-line text controls.
  • the special processing strategy is optionally: during the layout process, the layout system sets the width of the display window corresponding to the special type of control to the width of the second display window, and during the drawing process, there is no need to set the width of the display window corresponding to the special type of control. The control is stretched.
  • the layout system can obtain the width and height corresponding to each View during the measurement process.
  • the layout system can obtain the width and height of View1302, View1303 and View1304 in the first measurement process. Display the width and height of window 1301.
  • the layout system can obtain that the height of View1303 is a1 and the width is b1 (not shown in the figure).
  • the layout system can also obtain that the content in View1303 is text during the measurement process, and further detect that the text is multi-line text. As shown in (1) of Figure 13a, View1303 includes three lines of text content. This text content is only a schematic example and is not limited in this application.
  • the layout system can re-measure View1303, and set the display window corresponding to View1303 as the second display window 1304 during the re-measurement process.
  • the obtained results are: the height of View1303 is a2 and the width is b2 (not shown in the figure).
  • a2 is smaller than a1, for example, a2 can be half of a1, which is not limited in this application, and the width b2 is larger than b1. Therefore, the number of lines of multi-line text in View 1303 can be reduced.
  • the height of View 1303 is reduced and the width is increased, its three lines of text can be reduced to be displayed in one line.
  • the layout system can lay out each node in the ViewTree one by one based on the measurement results.
  • the layout system when the layout system layouts View1303, it layouts based on the results of re-measurement.
  • the layout process is the same as above and will not be described again here.
  • the layout system stretches and restores each node (such as View1302 and View1304).
  • the layout system draws the UI corresponding to View1303 in the second user interface 1305. That is, it is drawn based on the results calculated by the layout process.
  • the layout system draws based on the position and size of View1303 obtained in the layout process, and does not stretch or restore View1303 during the drawing process.
  • the nodes after View1303 in ViewTree are laid out based on the layout result of View1303 according to the traversal order.
  • the layout system layouts according to the original measurement results that is, the width of View1303 is still a1 and the height is b1
  • the positions and sizes of View1302, View1303 and View1304 are as shown in Figure 13a ( 1) shown.
  • the layout system after measuring View1303, the layout system reduces the height of View1303 to a2, where a2 is smaller than a1, that is, the height is reduced by x1.
  • the layout system performs layout based on the measurement results of View1303, whose height is a2 and width is b2, and obtains the position and size of View1303 in its parent node.
  • the position and size of View1303 may be within its parent node, or may be outside or partially coincident with the parent node, which is not limited in this application.
  • the layout system layouts View1304 it layouts based on the layout result of View1303, and its position is upward in the vertical axis direction compared with the position in (1) of Figure 13a. Shift, the offset is optionally the reduction x1 of the height of View1303. In this way, in this scenario, as the height of the WebView is reduced, other nodes can be moved upward.
  • the user interface generated by the layout system can contain more content than that displayed on a candy bar phone with the same height.
  • the layout system performs layout based on the first display window during the layout process, and during the drawing process, the second user interface is obtained by stretching and restoring each node. That is to say, in the embodiment of the present application, only the display position of the control is changed, but the actual position of the control is not changed. Therefore, each node corresponds to The position of the corresponding control displayed in the second user interface is different from the position of the node actually obtained by the layout system (that is, the position obtained in the layout process).
  • the layout system obtains the user information based on the mapping relationship between the coordinate points in the second user interface and the coordinate points in the first display window. actual operational location.
  • a coordinate system is established with the upper left corner of the inner screen 1401 as the coordinate origin, the horizontal direction as the x-axis, and the vertical direction as the y-axis.
  • This coordinate system is only a schematic example and is not limited in this application.
  • the drawing system stretches the width of each node to 2 times while keeping the height unchanged.
  • the mapping relationship between the coordinate point in (1) of Figure 14 and the coordinate point in (2) of Figure 14 is: the value of the x-axis coordinate point in the coordinate system of (1) of Figure 14 is The value of the x-axis coordinate point in (2) of Figure 14 is one-half (in the embodiment of the present application, it is one-half, and only one-half is used as an example for explanation), and the y-axis coordinate point is the same. Therefore, based on the mapping relationship, the mobile phone determines that the corresponding coordinates of the coordinate point clicked by the user in the first display window are (x1, y1), where x1 is one-half of x2, and y1 is equal to y2. Based on this coordinate point, the mobile phone can determine that the user clicked on the "Deposit" control and display the deposit interface.
  • the layout system is explained by taking the first display window on the left side of the second display window as an example during the layout process.
  • the mapping relationship between the coordinates in the second display window and the coordinates in the first display window is: the abscissa coordinate in the second display window is one-half of the abscissa coordinate in the first display window.
  • the first display window is on the right side of the second display window (it can also be in other positions, only the right side is used as an example, and this application will not give examples one by one), then the second display window
  • the abscissa of the display window is one-half the abscissa of the first display window, plus the offset.
  • the offset is the distance on the x-axis between the upper left corner of the first display window and the coordinate origin.
  • the width of the first display window is twice that of the second display window.
  • the stretching factor is also twice as large as an example for explanation. Therefore, the width of the first display window is twice that of the second display window.
  • the coordinate point in the window has a half relationship with the coordinate point of the second display window (ie, the second user interface) in the horizontal axis direction.
  • the stretching factor of the canvas is another value, such as three times, then the width of the second display window is three times the width of the first display window.
  • the second display window ( That is, the coordinate point of the second user interface) is three times the coordinate point of the first display window in the horizontal axis direction.
  • the size of the vehicle screen 1501 is 1280*1080 pixels, and the user interface of a full-screen display application in the vehicle screen is still used as an example.
  • the size of the first display window 1502 indicated by the window information sent by the layout system to the application is 1280*720 pixels. Of course, it can also be 1280*700 pixels, or 1280*800 pixels.
  • This application only uses the first
  • the width of the display window is two-thirds of the width of the second display window.
  • the application can perform layout and generate ViewTree based on the received window information.
  • the layout system can perform measurement, layout and other processes on ViewTree.
  • the layout system can stretch the width of the canvas of the root node and its subordinate nodes to one-half or three times the current width (the height remains unchanged). For example, the canvas width of the root node can be stretched to 1080 pixels. Then, the layout system can restore and align each View.
  • the layout system can determine, based on the proportional relationship between the first display window and the second display window, that the point in the second display window clicked by the user is mapped to a point in the first display window, For example, if the coordinate point clicked by the user on screen 1501 is (x3, y3), the layout system can obtain that the corresponding point in the first display window is (x4, y3), where x4 is two-thirds of x3 .
  • the layout system can obtain that the corresponding point in the first display window is (x4, y3), where x4 is two-thirds of x3 .
  • the method provided by the embodiment of the present application can also be applied in a cross-device interface screen casting scenario (for example, a scenario in which a first device projects a screen to a second device).
  • a cross-device interface screen casting scenario for example, a scenario in which a first device projects a screen to a second device.
  • the screen sizes of the first device and the second device are different. For example, after the interface of application A is projected from a mobile phone to a laptop, the size of the screen used to display the interface of application A changes (becomes longer and wider), and the aspect ratio of the screen changes (becomes larger).
  • the mobile phone in the embodiment of the present application can also set smart display options.
  • the smart display options may include a switch option for turning on or off the interface display process in the embodiment of the present application.
  • the user can click the switch option to start or turn off the interface display process in the embodiment of the present application.
  • the phone can display the user interface on the inner screen in any way shown in Figure 4.
  • the smart display options may also include but are not limited to a list of allowed smart display applications. The user can set the applicable smart display application list in the smart display application list. The interface displays the application of the process.
  • the third-party application can set the configuration file of the interface to indicate the interface to which the interface display scheme in the embodiment of the present application needs to be applied, and/or the interface to which the interface display scheme in the embodiment of the present application does not need to be applied.
  • smart display options can be set in the settings application, desktop, negative screen, drop-down menu, control center, and sidebar, which are not limited in this application.
  • the interface display solution in the embodiment of the present application is only explained using the folding screen as an example.
  • the interface display solution in the present application can also be applied to Other devices, such as tablets, vehicle-mounted devices, wearable devices, smart home devices, etc.
  • the interface solution in the embodiment of the present application can also be applied to the horizontal and vertical screen switching scenario of a mobile phone.
  • the mobile phone when the mobile phone is in portrait mode, the mobile phone can display the user interface of the application based on the solution shown in Figure 6.
  • the mobile phone is switched to the horizontal screen state, the mobile phone can display the user interface of the application based on the solution shown in Figure 8.
  • the interface solutions in the embodiments of this application can also be applied to scenarios such as floating windows and split screens, which are not limited by this application.
  • the electronic device includes corresponding hardware and/or software modules that perform each function.
  • the present application can be implemented in the form of hardware or a combination of hardware and computer software. Whether a function is performed by hardware or computer software driving the hardware depends on the specific application and design constraints of the technical solution.
  • FIG. 16 shows a schematic block diagram of a device 1600 according to an embodiment of the present application.
  • the device 1600 may include: a processor 1601 and a transceiver/transceiver pin 1602, and optionally, a memory 1603.
  • bus 1604 includes a power bus, a control bus, and a status signal bus in addition to a data bus.
  • bus 1604 various buses are referred to as bus 1604 in the figure.
  • the memory 1603 may be used for instructions in the foregoing method embodiments.
  • the processor 1601 can be used to execute instructions in the memory 1603, and control the receiving pin to receive signals, and control the transmitting pin to send signals.
  • the device 1600 may be the electronic device or chip in the above method embodiment.
  • This embodiment also provides a computer storage medium that stores computer instructions.
  • the electronic device When the computer instructions are run on an electronic device, the electronic device causes the electronic device to execute the above related method steps to implement the method in the above embodiment.
  • This embodiment also provides a computer program product.
  • the computer program product When the computer program product is run on a computer, it causes the computer to perform the above related steps to implement the method in the above embodiment.
  • inventions of the present application also provide a device.
  • This device may be a chip, a component or a module.
  • the device may include a connected processor and a memory.
  • the memory is used to store computer execution instructions.
  • the processor can execute computer execution instructions stored in the memory, so that the chip executes the methods in each of the above method embodiments.
  • the electronic equipment, computer storage media, computer program products or chips provided in this embodiment are all used to execute the corresponding methods provided above. Therefore, the beneficial effects they can achieve can be referred to the corresponding methods provided above. The beneficial effects of the method will not be repeated here.
  • a and/or B can mean: A exists alone, A and B exist simultaneously, and they exist alone. B these three situations.
  • multiple processing units refer to two or more processing units; multiple systems refer to two or more systems.

Landscapes

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

Abstract

本申请实施例提供了一种界面显示方法及电子设备，在该方法中，电子设备基于宽度比实际显示窗口的宽度小的第一显示窗口，生成对应于目标应用的视图树的第一用户界面。电子设备基于第二显示窗口的宽度，对第一用户界面及其中的控件进行拉伸，以得到第二用户界面。电子设备对第二用户界面中的至少一个控件进行还原，以使得第二用户界面适应第二显示窗口的宽度的同时，避免用户界面中的部分控件变形。电子设备在第二显示窗口中显示第二用户界面，从而通过在系统级对应用的用户界面做自适应，可适用于任意应用。本申请中所显示的用户界面，其所包含的控件数量即为应用所要求显示的控件数量，无需减少所显示的控件数量，即可适应宽高比较大的屏幕。

Description

界面显示方法及电子设备
本申请要求于2022年03月23日提交中国国家知识产权局、申请号为202210286344.8、申请名称为“界面显示方法及电子设备”的中国专利申请的优先权，其全部内容通过引用结合在本申请中。
技术领域
本申请实施例涉及终端设备领域，尤其涉及一种界面显示方法及电子设备。
背景技术
随着折叠屏技术的发展，越来越多的用户选择使用折叠屏手机。但是，目前的第三方应用在布局窗口时，通常是基于直板手机的屏幕比例进行布局。因此，在直板手机与折叠手机的屏幕比例相差较大时，第三方应用的窗口布局方式将无法适应折叠屏手机的屏幕，影响用户使用体验。
发明内容
本申请实施例提供一种界面显示方法及电子设备，在该方法中，电子设备可在不减少应用所要显示的界面内容的情况下，显示应用的用户界面，提升用户使用体验。
第一方面，本申请实施例提供一种界面显示方法。该方法包括：电子设备基于第一显示窗口与目标应用的视图树，得到第一用户界面。其中，第一用户界面的宽度与第一显示窗口的宽度相同，第一用户界面的高度与第一显示窗口的高度相同。目标应用的视图树中包括至少一个视图节点，第一用户界面中包括至少一个视图节点中的每个节点所对应的控件。电子设备拉伸第一用户界面及第一用户界面中的各控件的宽度，得到第二用户界面。第二用户界面中的各控件的高度等于第一用户界面中的各控件的高度。电子设备将第二用户界面中的至少一个控件的宽度还原至与在第一用户界面中的宽度相同。电子设备在第二显示窗口显示第二用户界面；第二用户界面的宽度等于第二显示窗口的宽度，第二用户界面的高度等于第二显示窗口的高度；第二显示窗口的高度等于第一显示窗口的高度，第二显示窗口的宽度大于第一显示窗口的宽度。这样，本申请实施例中通过在系统级对应用的用户界面做自适应，可适用于任意应用，应用自身无需做修改。并且，本申请实施例中通过拉伸界面得到的用户界面，不会减少应用所要显示的用户界面中的内容。
示例性的，第一显示窗口可以是本申请实施例中的显示窗口901。
示例性的，第二显示窗口可以是本申请实施例中的显示窗口902。
示例性的，电子设备将至少一个控件的宽度还原至与在第一用户界面中的宽度相同，可以理解为是将至少一个控件的宽度还原至拉伸前的宽度。
示例性的，第二用户界面中的控件与第二用户界面的上边缘的距离，与其在第一用户界面时，与第一用户界面的上边缘的距离相等。第二用户界面中的控件与第二用户界 面的下边缘的距离，与其在第一用户界面时，与第一用户界面的下边缘的距离相等。
示例性的，各显示窗口及空间的高度可选地为纵向方向上的像素值。显示窗口及空间的宽度可选地为横向方向上的像素值。
示例性的，视图树即为本申请实施例中所述的ViewTree。
示例性的，视图节点包括View和/或ViewGroup。
根据第一方面，电子设备基于第一显示窗口与目标应用的视图树，得到第一用户界面之前，方法还包括：电子设备获取目标应用生成的视图树，视图树为目标应用基于电子设备传输给目标应用的窗口信息生成的，窗口信息用于指示第一显示窗口的宽度与高度。这样，电子设备提供给应用的是第一显示窗口的信息，应用可基于第一显示窗口的高度与宽度生成的视图树，从而对应用的要求降低，无需应用对视图树做修改。
示例性的，方法还可以包括电子设备中的布局系统向应用传输窗口信息，并接收到应用生成的视图树。
示例性的，窗口信息仅指示第一显示窗口的宽度与高度，不指示第一显示窗口的位置。
根据第一方面，或者以上第一方面的任意一种实现方式，电子设备基于第一显示窗口与目标应用的视图树，得到第一用户界面，包括：电子设备获取至少一个视图节点中的每个视图节点的布局信息，布局信息用于指示每个视图节点在第一显示窗口中的大小与位置；电子设备基于每个视图节点的布局信息，生成第一用户界面。这样，在布局阶段，电子设备可基于第一显示窗口进行布局，以得到第一用户界面。布局后得到的第一用户界面是符合第一显示窗口的尺寸的，各控件的位置也是在第一显示窗口中的。基于第一显示窗口布局后的第一用户界面接近于直板手机的显示界面。
示例性的，布局信息指示视图节点在其父节点中的位置，也可以理解为是在第一显示窗口中的位置。示例性的，视图节点的位置包括其与父节点的左、右、上、下四条边的距离。
示例性的，每个视图节点可以看作为矩形。
根据第一方面，或者以上第一方面的任意一种实现方式，电子设备基于每个视图节点的布局信息，生成第一用户界面，包括：电子设备基于每个视图节点的布局信息，创建每个视图节点的画布，并在每个视图节点对应的画布上，绘制每个视图节点对应的控件内容以得到第一用户界面；其中，视图节点的根视图节点对应的画布的高度为第一用户界面的高度，根视图节点对应的画布的宽度为第一用户界面的宽度。这样，本申请实施例中通过对节点的画布进行拉伸，以实现对用户界面中的控件的拉伸操作。
示例性的，用户界面所显示的控件，可以理解为是视图节点所对应的控件。需要说明的是，用户界面上所显示的控件内容，仅为控件的一部分内容，其可能包括未显示的部分，即画布中未填充图像的部分。用户从显示界面中可能看不到画布中除控件内容以外的部分，但是该未显示的部分，同样属于控件的一部分，也可以理解为是视图节点对应的控件的一部分。
根据第一方面，或者以上第一方面的任意一种实现方式，电子设备拉伸第一用户界面及第一用户界面中的各控件的宽度，得到第二用户界面，包括：电子设备拉伸至少一 个视图节点的画布的宽度以得到第二用户界面；其中，至少一个视图节点的画布中的控件内容随着画布拉伸而拉伸。这样，本申请实施例中通过对画布进行拉伸，从而实现对控件的拉伸。本申请实施例中仅改变各视图节点对应的画布，而不改变控件的实际位置，其中，实际位置即为控件在第一显示窗口中的位置。可以理解为，本申请实施例中仅改变各控件在显示窗口中所呈现的内容，而不改变其在布局阶段在显示窗口中的实际位置，从而降低系统处理复杂度。
根据第一方面，或者以上第一方面的任意一种实现方式，视图树包括根视图节点以及多个子视图节点，电子设备将第二用户界面中的至少一个控件的宽度还原至与在第一用户界面中的宽度相同，包括：电子设备将第二用户界面中的至少一个子视图节点对应的画布的宽度还原至拉伸前的宽度；至少一个子视图节点属于多个子视图节点。这样，将控件的画布拉伸之后，将部分控件的画布还原，可避免拉伸所导致的控件内容变形。对于一些拉伸后不会影响其显示内容的控件，可仍然保持其拉伸后的宽度，从而有效提高用户界面的美观性。
根据第一方面，或者以上第一方面的任意一种实现方式，至少一个子视图节点为文本类型和/或小图片类型；其中，小图片类型用于指示子视图节点对应的画布的宽度小于预设阈值，且子视图节点对应的控件内容为图片；文本类型用于指示子视图节点的画布的控件内容为文本。这样，通过对视图节点所对应的控件进行分类，可将控件划分为需要还原的控件以及保持拉伸的控件，并对需要进行还原的控件进行还原处理。
示例性的，目标应用的视图树中的每个视图节点对应有声明信息，声明信息中包括但不限于类型信息、布局信息等。类型信息用于指示各视图节点的类型。
根据第一方面，或者以上第一方面的任意一种实现方式，视图树中包括根节点和第一视图节点，第一视图节点为大图片类型的视图节点，大图片类型用于指示子视图节点对应的画布的宽度大于或等于预设阈值，且子视图节点对应的控件内容为图片；电子设备将第二用户界面中的至少一个控件的宽度还原至与在第一用户界面中的宽度相同，包括：将第一视图节点的控件内容还原至拉伸前的状态；其中，第一视图节点的画布的宽度为拉伸后的宽度，且还原后的第一视图节点的控件内容在第一视图节点的画布中居中显示；将第一视图节点的画布中除控件内容外的部分填充目标图像。这样，本申请实施例中通过对大图片进行相应处理，可避免大图片被拉伸后变形，同时能够保证大图片在第二显示窗口中显示的位置与第一显示窗口中的位置是等比的。
根据第一方面，或者以上第一方面的任意一种实现方式，目标图像与控件内容中的部分内容一致，或者，目标图像为控件内容中的部分内容进行高斯模糊处理后的图像。这样，通过对大图片的画布进行填充，可有效提升画面的美观性。
根据第一方面，或者以上第一方面的任意一种实现方式，第一显示窗口的左边缘与第二显示窗口的左边缘对齐；方法还包括：接收对第二用户界面中的第二视图节点对应的控件的触摸操作；其中，触摸操作在第二显示窗口中的第一位置；第一位置与第二显示窗口的左边缘之间的距离为第一距离值，第一位置与第二显示窗口的上边缘之间的距离为第二距离值；确定第一位置映射在第一显示窗口中的第二位置；第二位置与第一显示窗口的左边缘之间的距离为第三距离值，第二位置与第一显示窗口的上边缘之间的距 离为第四距离值；其中，第一距离值与第三距离值的比例等于第二显示界面的宽度与第一显示界面的宽度的比例；第二距离值等于第四距离值；基于第二位置，确定触摸操作对应于第一显示窗口的第一用户界面中的第二视图节点。这样，本申请实施例中仅改变控件在界面中显示的位置，而未改变控件的实际位置，即电子设备在布局流程中所获取到的位置。相应的，在对触摸事件进行派发时，电子设备可基于控件在第二用户界面中与第一用户界面中的映射关系，获取到用户实际操作的控件，并执行相应的操作。
示例性的，第一显示窗口也可以在第二显示窗口中居中或靠右等任意位置，本申请不做限定。
根据第一方面，或者以上第一方面的任意一种实现方式，第一显示窗口的宽高比小于或等于0.5；第二显示窗口的宽高比大于0.5且小于或等于1。这样，应用可以基于宽高比接近直板手机的第一显示窗口，生成视图树，而无需应用适应电子设备实际的显示窗口的尺寸。
根据第一方面，或者以上第一方面的任意一种实现方式，第二显示窗口在电子设备的屏幕中全屏显示。
根据第一方面，或者以上第一方面的任意一种实现方式，目标应用为电子设备中的任意第三方应用。这样，本申请实施例中的方法通过系统级的处理，无需应用做出修改，可以应用于任意第三方应用。
根据第一方面，或者以上第一方面的任意一种实现方式，电子设备为内折叠屏手机、外折叠屏手机、车载设备、可穿戴设备、和/或电视。这样，在折叠屏手机的应用场景中，通过使用本申请实施例中的方法，可以使得折叠屏手机从单屏幕切换到大屏幕时，大屏幕所显示的用户界面中的内容与单屏幕所显示的用户界面中的内容相似，提高屏幕切换时应用的用户界面显示的连贯性。
根据第一方面，或者以上第一方面的任意一种实现方式，电子设备基于第一显示窗口与目标应用的视图树，得到第一用户界面，包括：电子设备基于第二显示窗口与视图树中的第三视图节点，以及基于第一显示窗口与视图树中除第三视图节点外的其它视图节点，得到第一用户界面。这样，对应一些特殊类型的视图节点，电子设备可基于第二显示窗口进行布局，以使其在布局阶段的宽度适应第二显示窗口的宽度，可以增加特殊类型视图节点的宽度，从而使控件所能显示的区域拉伸。特殊类型的视图节点可以是多行文本类型或者是WebView类型。例如，对于多行文本类型的视图节点，电子设备基于第二显示窗口的宽度对其进行布局，使得多行文本获取到更宽的显示区域。
根据第一方面，或者以上第一方面的任意一种实现方式，电子设备基于第二显示窗口与视图树中的第三视图节点，以及基于第一显示窗口与视图树中除第三视图节点外的其它视图节点，得到第一用户界面，包括：电子设备获取第三视图节点的布局信息，与其它视图节点的布局信息；其中，第三视图节点的布局信息用于指示第三视图节点在第二显示窗口中的位置与大小，其它视图节点的布局信息用于指示其它视图节点在第一显示窗口中的位置与大小；电子设备基于至少一个视图节点的布局信息，生成第一用户界面。这样，电子设备在生成第一用户界面时，对于一些特殊类型的视图节点，可以使其获得比其它节点更宽的显示区域。并且对于该类特殊类型节点，在后续拉伸过程中可以 不对齐进行拉伸处理。
第二方面，本申请实施例提供一种电子设备，其特征在于，包括：一个或多个存储器、可折叠显示屏和一个或多个处理器，所述一个或多个存储器与所述一个或多个处理器耦合，所述一个或多个存储器用于存储计算机程序代码，所述程序代码包括计算机指令，当所述一个或多个处理器执行所述计算机指令时，使得所述电子设备执行如下步骤：电子设备基于第一显示窗口与目标应用的视图树，得到第一用户界面；其中，第一用户界面的宽度与第一显示窗口的宽度相同，第一用户界面的高度与第一显示窗口的高度相同；视图树中包括至少一个视图节点，第一用户界面中包括至少一个视图节点对应的控件；电子设备拉伸第一用户界面及第一用户界面中的各控件的宽度，得到第二用户界面；第二用户界面中的各控件的高度等于第一用户界面中的各控件的高度；电子设备将第二用户界面中的至少一个控件的宽度还原至与在第一用户界面中的宽度相同；电子设备在第二显示窗口显示第二用户界面；第二用户界面的宽度等于第二显示窗口的宽度，第二用户界面的高度等于第二显示窗口的高度；第二显示窗口的高度等于第一显示窗口的高度，第二显示窗口的宽度大于第一显示窗口的宽度。
根据第二方面，当所述一个或多个处理器执行所述计算机指令时，使得所述电子设备执行如下步骤：电子设备获取目标应用生成的视图树，视图树为目标应用基于电子设备传输给目标应用的窗口信息生成的，窗口信息用于指示第一显示窗口的宽度与高度。
根据第二方面，或者以上第一方面的任意一种实现方式，当所述一个或多个处理器执行所述计算机指令时，使得所述电子设备执行如下步骤：电子设备获取至少一个视图节点中的每个视图节点的布局信息，布局信息用于指示每个视图节点在第一显示窗口中的大小与位置；电子设备基于每个视图节点的布局信息，生成第一用户界面。
根据第二方面，或者以上第一方面的任意一种实现方式，当所述一个或多个处理器执行所述计算机指令时，使得所述电子设备执行如下步骤：电子设备基于每个视图节点的布局信息，创建每个视图节点的画布，并在每个视图节点对应的画布上，绘制每个视图节点对应的控件内容以得到第一用户界面；其中，视图节点的根视图节点对应的画布的高度为第一用户界面的高度，根视图节点对应的画布的宽度为第一用户界面的宽度。
根据第二方面，或者以上第一方面的任意一种实现方式，当所述一个或多个处理器执行所述计算机指令时，使得所述电子设备执行如下步骤：电子设备拉伸至少一个视图节点的画布的宽度以得到第二用户界面；其中，至少一个视图节点的画布中的控件内容随着画布拉伸而拉伸。
根据第二方面，或者以上第一方面的任意一种实现方式，当所述一个或多个处理器执行所述计算机指令时，使得所述电子设备执行如下步骤：电子设备将第二用户界面中的至少一个子视图节点对应的画布的宽度还原至拉伸前的宽度；至少一个子视图节点属于多个子视图节点。
根据第二方面，或者以上第一方面的任意一种实现方式，至少一个子视图节点为文本类型和/或小图片类型；其中，小图片类型用于指示子视图节点对应的画布的宽度小于预设阈值，且子视图节点对应的控件内容为图片；文本类型用于指示子视图节点的画布的控件内容为文本。
根据第二方面，或者以上第一方面的任意一种实现方式，视图树中包括根节点和第一视图节点，第一视图节点为大图片类型的视图节点，大图片类型用于指示子视图节点对应的画布的宽度大于或等于预设阈值，且子视图节点对应的控件内容为图片；当所述一个或多个处理器执行所述计算机指令时，使得所述电子设备执行如下步骤：将第一视图节点的控件内容还原至拉伸前的状态；其中，第一视图节点的画布的宽度为拉伸后的宽度，且还原后的第一视图节点的控件内容在第一视图节点的画布中居中显示；将第一视图节点的画布中除控件内容外的部分填充目标图像。
根据第二方面，或者以上第一方面的任意一种实现方式，目标图像与控件内容中的部分内容一致，或者，目标图像为控件内容中的部分内容进行高斯模糊处理后的图像。
根据第二方面，或者以上第一方面的任意一种实现方式，第一显示窗口的左边缘与第二显示窗口的左边缘对齐；当所述一个或多个处理器执行所述计算机指令时，使得所述电子设备执行如下步骤：接收对第二用户界面中的第二视图节点对应的控件的触摸操作；其中，触摸操作在第二显示窗口中的第一位置；第一位置与第二显示窗口的左边缘之间的距离为第一距离值，第一位置与第二显示窗口的上边缘之间的距离为第二距离值；确定第一位置映射在第一显示窗口中的第二位置；第二位置与第一显示窗口的左边缘之间的距离为第三距离值，第二位置与第一显示窗口的上边缘之间的距离为第四距离值；其中，第一距离值与第三距离值的比例等于第二显示界面的宽度与第一显示界面的宽度的比例；第二距离值等于第四距离值；基于第二位置，确定触摸操作对应于第一显示窗口的第一用户界面中的第二视图节点。
根据第二方面，或者以上第一方面的任意一种实现方式，第一显示窗口的宽高比小于或等于0.5；第二显示窗口的宽高比大于0.5且小于或等于1。
根据第二方面，或者以上第一方面的任意一种实现方式，第二显示窗口在电子设备的屏幕中全屏显示。
根据第二方面，或者以上第一方面的任意一种实现方式，目标应用为电子设备中的任意第三方应用。
根据第二方面，或者以上第一方面的任意一种实现方式，电子设备为内折叠屏手机、外折叠屏手机、车载设备、可穿戴设备、和/或电视。
第二方面以及第二方面的任意一种实现方式分别与第一方面以及第一方面的任意一种实现方式相对应。第二方面以及第二方面的任意一种实现方式所对应的技术效果可参见上述第一方面以及第一方面的任意一种实现方式所对应的技术效果，此处不再赘述。
第三方面，本申请实施例提供了一种计算机可读介质，用于存储计算机程序，该计算机程序包括用于执行第一方面或第一方面的任意可能的实现方式中的方法的指令。
第四方面，本申请实施例提供了一种计算机程序，该计算机程序包括用于执行第一方面或第一方面的任意可能的实现方式中的方法的指令。
第五方面，本申请实施例提供一种芯片，该芯片包括处理电路、收发管脚。其中，该收发管脚、和该处理电路通过内部连接通路互相通信，该处理电路执行第一方面或第一方面的任一种可能的实现方式中的方法，以控制接收管脚接收信号，以控制发送管脚发送信号。
附图说明
图1为示例性示出的电子设备的硬件结构示意图；
图2为示例性示出的折叠屏手机的示意图；
图3为示例性示出的电子设备的软件结构示意图；
图4为示例性示出的折叠屏手机的用户界面示意图；
图5为示例性示出的应用本申请实施例中的界面显示方法的效果示意图；
图6为示例性示出的界面显示方法流程示意图；
图7a～图7b为示例性示出的ViewTree的结构示意图；
图7c为示例性示出的布局系统处理流程示意图；
图7d为示例性示出的布局阶段示意图；
图7e为示例性示出的绘制阶段示意图；
图7f为示例性示出的用户界面示意图；
图8为示例性示出的界面显示方法流程示意图；
图9a为示例性示出的第一显示窗口与第二显示窗口的示意图；
图9b为示例性示出的基于第一显示窗口进行布局后的用户界面示意图；
图10a为示例性示出的画布拉伸示意图；
图10b为示例性示出的拉伸后的用户界面示意图；
图10c为示例性示出的还原后的用户界面示意图；
图11a～图11b为示例性示出的节点还原过程示意图；
图12a～图12c为示例性示出的图片填充示意图；
图13a～图13b为示例性示出的多行文本类型节点的处理流程示意图；
图14为示例性示出的事件派发流程示意图；
图15为示例性示出的其它应用场景的示意图；
图16为示例性示出的装置的结构示意图。
具体实施方式
下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。
本文中术语“和/或”，仅仅是一种描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。
本申请实施例的说明书和权利要求书中的术语“第一”和“第二”等是用于区别不同的对象，而不是用于描述对象的特定顺序。例如，第一目标对象和第二目标对象等是用于区别不同的目标对象，而不是用于描述目标对象的特定顺序。
在本申请实施例中，“示例性的”或者“例如”等词用于表示作例子、例证或说明。 本申请实施例中被描述为“示例性的”或者“例如”的任何实施例或设计方案不应被解释为比其它实施例或设计方案更优选或更具优势。确切而言，使用“示例性的”或者“例如”等词旨在以具体方式呈现相关概念。
在本申请实施例的描述中，除非另有说明，“多个”的含义是指两个或两个以上。例如，多个处理单元是指两个或两个以上的处理单元；多个系统是指两个或两个以上的系统。
图1示出了电子设备100的结构示意图。应该理解的是，图1所示电子设备100仅是电子设备的一个范例，并且电子设备100可以具有比图中所示的更多的或者更少的部件，可以组合两个或多个的部件，或者可以具有不同的部件配置。图1中所示出的各种部件可以在包括一个或多个信号处理和/或专用集成电路在内的硬件、软件、或硬件和软件的组合中实现。
电子设备100可以包括：处理器110，外部存储器接口120，内部存储器121，通用串行总线(universal serial bus，USB)接口130，充电管理模块140，电源管理模块141，电池142，天线1，天线2，移动通信模块150，无线通信模块160，音频模块170，扬声器170A，受话器170B，麦克风170C，耳机接口170D，传感器模块180，按键190，马达191，指示器192，摄像头193，显示屏194，以及用户标识模块(subscriber identification module，SIM)卡接口195等。其中传感器模块180可以包括压力传感器180A，陀螺仪传感器180B，气压传感器180C，磁传感器180D，加速度传感器180E，距离传感器180F，接近光传感器180G，指纹传感器180H，温度传感器180J，触摸传感器180K，环境光传感器180L，骨传导传感器180M等。
处理器110可以包括一个或多个处理单元，例如：处理器110可以包括应用处理器(application processor，AP)，调制解调处理器，图形处理器(graphics processing unit，GPU)，图像信号处理器(image signal processor，ISP)，控制器，存储器，视频编解码器，数字信号处理器(digital signal processor，DSP)，基带处理器，和/或神经网络处理器(neural-network processing unit，NPU)等。其中，不同的处理单元可以是独立的器件，也可以集成在一个或多个处理器中。
处理器110中还可以设置存储器，用于存储指令和数据。在一些实施例中，处理器110中的存储器为高速缓冲存储器。该存储器可以保存处理器110刚用过或循环使用的指令或数据。如果处理器110需要再次使用该指令或数据，可从所述存储器中直接调用。避免了重复存取，减少了处理器110的等待时间，因而提高了系统的效率。
电子设备100的无线通信功能可以通过天线1，天线2，移动通信模块150，无线通信模块160，调制解调处理器以及基带处理器等实现。
天线1和天线2用于发射和接收电磁波信号。电子设备100中的每个天线可用于覆盖单个或多个通信频带。不同的天线还可以复用，以提高天线的利用率。例如：可以将天线1复用为无线局域网的分集天线。在另外一些实施例中，天线可以和调谐开关结合使用。
移动通信模块150可以提供应用在电子设备100上的包括2G/3G/4G/5G等无线通信的解决方案。移动通信模块150可以包括至少一个滤波器，开关，功率放大器，低噪声 放大器(low noise amplifier，LNA)等。
无线通信模块160可以提供应用在电子设备100上的包括无线局域网(wireless local area networks，WLAN)(如无线保真(wireless fidelity，Wi-Fi)网络)，蓝牙(bluetooth，BT)，全球导航卫星系统(global navigation satellite system，GNSS)，调频(frequency modulation，FM)，近距离无线通信技术(near field communication，NFC)，红外技术(infrared，IR)等无线通信的解决方案。无线通信模块160可以是集成至少一个通信处理模块的一个或多个器件。
在一些实施例中，电子设备100的天线1和移动通信模块150耦合，天线2和无线通信模块160耦合，使得电子设备100可以通过无线通信技术与网络以及其他设备通信。
电子设备100通过GPU，显示屏194，以及应用处理器等实现显示功能。GPU为图像处理的微处理器，连接显示屏194和应用处理器。GPU用于执行数学和几何计算，用于图形渲染。处理器110可包括一个或多个GPU，其执行程序指令以生成或改变显示信息。
显示屏194用于显示图像，视频等。显示屏194包括显示面板。显示面板可以采用液晶显示屏(liquid crystal display，LCD)，有机发光二极管(organic light-emitting diode，OLED)，有源矩阵有机发光二极体或主动矩阵有机发光二极体(active-matrix organic light emitting diode的，AMOLED)，柔性发光二极管(flex light-emitting diode，FLED)，Miniled，MicroLed，Micro-oLed，量子点发光二极管(quantum dot light emitting diodes，QLED)等。在一些实施例中，电子设备100可以包括1个或N个显示屏194，N为大于1的正整数。示例性的，如图2所示为折叠屏手机的示意图，请参照图2，折叠屏手机包括外显示屏(简称外屏)201和内显示屏(简称内屏)202。外屏201与内屏202的高度相等，内屏202的屏幕宽度为外屏201的屏幕宽度的2倍。当然，图2中的显示屏仅为示意性举例。在其他实施例中，内屏与外屏的屏幕之间的比例也可以为其他比例。例如，外屏201可以是比手机的外壳小的屏幕，例如是正方形屏幕，或者是比图2中所示的外屏201更小的矩形，并设置于手机屏幕外壳的中间或任意区域，而内屏则可以与图2中的相同。具体屏幕的尺寸以及比例设置可根据实际需求设置，本申请不做限定。需要说明的是，折叠屏手机除包括本申请实施例中所示的内折叠屏手机外，折叠屏手机还可以包括其它形态的折叠屏手机，例如外折叠屏手机等，本申请不做限定，下文中不再重复说明。进一步需要说明的是，本申请实施例中仅以折叠屏手机的界面显示为例进行说明。在其他实施例中，本申请实施例中的界面显示方案同样可以应用于平板、车载设备、电视等屏幕的长宽比与直板手机相差较大的设备上，具体实现与折叠手机的内屏显示相同，本申请不再逐一举例说明。
电子设备100可以通过ISP，摄像头193，视频编解码器，GPU，显示屏194以及应用处理器等实现拍摄功能。
外部存储器接口120可以用于连接外部存储卡，例如Micro SD卡，实现扩展电子设备100的存储能力。外部存储卡通过外部存储器接口120与处理器110通信，实现数据存储功能。例如将音乐，视频等文件保存在外部存储卡中。
内部存储器121可以用于存储计算机可执行程序代码，所述可执行程序代码包括指 令。处理器110通过运行存储在内部存储器121的指令，从而执行电子设备100的各种功能应用以及数据处理。内部存储器121可以包括存储程序区和存储数据区。其中，存储程序区可存储操作系统，至少一个功能所需的应用程序(比如声音播放功能，图像播放功能等)等。存储数据区可存储电子设备100使用过程中所创建的数据(比如音频数据，电话本等)等。
电子设备100可以通过音频模块170，扬声器170A，受话器170B，麦克风170C，耳机接口170D，以及应用处理器等实现音频功能。例如音乐播放，录音等。
音频模块170用于将数字音频信息转换成模拟音频信号输出，也用于将模拟音频输入转换为数字音频信号。音频模块170还可以用于对音频信号编码和解码。在一些实施例中，音频模块170可以设置于处理器110中，或将音频模块170的部分功能模块设置于处理器110中。
电子设备100的软件系统可以采用分层架构，事件驱动架构，微核架构，微服务架构，或云架构。本申请实施例以分层架构的Android系统为例，示例性说明电子设备100的软件结构。
图3是本申请实施例的电子设备100的软件结构框图。
电子设备100的分层架构将软件分成若干个层，每一层都有清晰的角色和分工。层与层之间通过软件接口通信。在一些实施例中，将Android系统分为四层，从上至下分别为应用程序层，应用程序框架层，安卓运行时(Android runtime)和系统库，以及内核层。
应用程序层可以包括一系列应用程序包。
如图3所示，应用程序包可以包括相机，图库，日历，通话，地图，导航，WLAN，蓝牙，音乐，视频，短信息，支付等应用程序。
应用程序框架层为应用程序层的应用程序提供应用编程接口(application programming interface，API)和编程框架。应用程序框架层包括一些预先定义的函数。
如图3所示，应用程序框架层可以包括窗口管理器，内容提供器，视图系统，电话管理器，资源管理器，通知管理器，布局系统等。
窗口管理器用于管理窗口程序。窗口管理器可以获取显示屏大小，判断是否有状态栏，锁定屏幕，截取屏幕等。
内容提供器用来存放和获取数据，并使这些数据可以被应用程序访问。所述数据可以包括视频，图像，音频，拨打和接听的电话，浏览历史和书签，电话簿等。
视图系统包括可视控件，例如显示文字的控件，显示图片的控件等。视图系统可用于构建应用程序。显示界面可以由一个或多个视图组成的。例如，包括短信通知图标的显示界面，可以包括显示文字的视图以及显示图片的视图。
电话管理器用于提供电子设备100的通信功能。例如通话状态的管理(包括接通，挂断等)。
资源管理器为应用程序提供各种资源，比如本地化字符串，图标，图片，布局文件，视频文件等等。
通知管理器使应用程序可以在状态栏中显示通知信息，可以用于传达告知类型的消息，可以短暂停留后自动消失，无需用户交互。比如通知管理器被用于告知下载完成， 消息提醒等。通知管理器还可以是以图表或者滚动条文本形式出现在系统顶部状态栏的通知，例如后台运行的应用程序的通知，还可以是以对话窗口形式出现在屏幕上的通知。例如在状态栏提示文本信息，发出提示音，电子设备振动，指示灯闪烁等。
布局系统可基于应用程序的输入的界面元素(也可以称为窗口元素、页面元素等，本申请不做限定)，对各元素进行合理的安排与布局，并绘制界面。
Android Runtime包括核心库和虚拟机。Android runtime负责安卓系统的调度和管理。
核心库包含两部分：一部分是java语言需要调用的功能函数，另一部分是安卓的核心库。
应用程序层和应用程序框架层运行在虚拟机中。虚拟机将应用程序层和应用程序框架层的java文件执行为二进制文件。虚拟机用于执行对象生命周期的管理，堆栈管理，线程管理，安全和异常的管理，以及垃圾回收等功能。
系统库可以包括多个功能模块。例如：表面管理器(surface manager)，媒体库(Media Libraries)，三维图形处理库(例如：OpenGL ES)，2D图形引擎(例如：SGL)等。
表面管理器用于对显示子系统进行管理，并且为多个应用程序提供了2D和3D图层的融合。
媒体库支持多种常用的音频，视频格式回放和录制，以及静态图像文件等。媒体库可以支持多种音视频编码格式。
三维图形处理库用于实现三维图形绘图，图像渲染，合成，和图层处理等。
2D图形引擎是2D绘图的绘图引擎。
内核层是硬件和软件之间的层。内核层至少包含显示驱动，摄像头驱动，音频驱动，传感器驱动。
可以理解的是，图3示出的系统框架层、系统库与运行时层包含的部件，并不构成对电子设备100的具体限定。在本申请另一些实施例中，电子设备100可以包括比图示更多或更少的部件，或者组合某些部件，或者拆分某些部件，或者不同的部件布置。
图4为示例性示出的折叠屏手机的用户界面示意图。请参照图4，示例性的，以折叠屏手机的外屏401的分辨率为2700*1100像素，折叠屏手机的内屏402的分辨率为2700*2200像素为例，也就是说，内屏402的显示界面的宽度是外屏401的显示界面的宽度的二倍。
如图4的(1)所示，折叠屏手机的外屏401中显示支付应用的用户界面403(也可以称为应用界面、应用显示界面等，本申请不做限定)。其中，用户界面403在外屏401中全屏显示，即，用户界面403对应的分辨率为2700*1100像素，其与外屏401的尺寸相同。需要说明的是，本申请实施例中涉及到的尺寸，例如屏幕的尺寸为屏幕中可用于显示界面内容的尺寸，而非屏幕的实际外观尺寸，下文中不再重复说明。
用户可打开折叠屏，以使得折叠屏从折叠态(即图4的(1)所示的状态)变为展开态(例如图4的(2)或(3)所示)。展开态的折叠屏手机，其在内屏中显示支付应用的用户界面。目前，第三方应用所创建的应用界面通常适用于直板手机的屏幕的横纵比例(也可以称为宽高比例，即屏幕的宽度与高度的比值)，一般情况下，直板手机(或者是折叠屏手机的外屏)的屏幕的宽高比例约为1:2，例如分辨率为2700*1100像素，而 折叠屏手机的内屏的宽高比通常情况下为1:1或接近1:1。因此，手机中的第三方应用基于直板手机的宽高比布局的用户界面无法适用于宽高比为1:1(或接近1:1，下文中不再重复说明)的折叠屏内屏。
图4的(2)中为示例性示出的一种内屏的用户界面的显示方式，在图4的(2)所示的示例中，内屏402以多界面的方式(也可以称为平行视界的方式)显示应用的用户界面。请参照图4的(2)，内屏402在显示应用界面时，手机可在内屏402的左半屏(即虚线左半部区域)中显示支付应用的用户界面404a，在内屏402的右半屏(即虚线右半部区域)中显示支付应用的用户界面404b。其中，用户界面404a与用户界面404b的显示内容是不相同的。例如，用户界面404b显示的可以是手机响应于接收到的用户点击用户界面404a中的“发现”控件(也可以称为按钮、组件、元素、选项等，本申请不做限定)后所显示的用户界面。其中，内屏402的左半屏与右半屏的宽高比接近直板手机，例如内屏402的尺寸为2700*2200，则左/右半屏的宽高比均为2700*1100。可以理解为，在图4的(2)所示的示例中，内屏402是以两个与直板手机相同(或相似)的宽高比的显示窗口(即左半屏的显示窗口和右半屏的显示窗口)显示第三方应用的两个用户界面，每个用户界面所对应的显示窗口的尺寸等同于直板手机的显示窗口的尺寸。因此，在该示例中，第三方应用仍然是按照宽高比约为1:2的显示窗口进行布局的，无需第三方应用更改界面布局，并且手机显示的多个页面中的每个页面的内容与直板手机(或折叠屏手机的外壳)显示的内容是相同的。
图4的(3)示例性示出的另一种内屏的用户界面的显示方式。图4的(2)所示的示例中，内屏402以拉伸界面，或可理解为改变用户界面中所显示的内容的方式，显示应用的用户界面。请参照图4的(3)，示例性的，在展开态下，手机的内屏402显示应用的用户界面406。在该示例中，手机在内屏402中显示应用的用户界面时，将用户界面进行适当放大，以使得用户界面适应内屏402的尺寸。但是，如图4的(3)所示，在该显示方式中，内屏402中显示的用户界面406较之外屏401或内屏402的左半屏中显示的用户界面404a中内容相对较少，减小了屏幕展示的信息量。例如图4的(1)所示的外屏401中的用户界面403中包括图片405，而由于用户界面406中的各元素放大显示，使得元素均下移且拉伸显示，导致该图片在用户界面406中显示时，同样被下移且拉伸显示，如图4的(3)中所示的图片407。在该示例中，需要第三方应用基于屏幕的显示窗口的尺寸对用户界面重新进行布局。此外，如图4中所示，目前的显示方法中，都是通过改变显示屏中所显示的界面内容的方式，例如图4的(2)中是通过多界面显示的方式，图4的(3)中则是通过重新排布界面中的元素的方式，以显示用户界面。上述通过改变屏幕中显示的界面内容的方式，可能不符合用户对用户界面显示的预期。
本申请实施例中提供一种界面显示方法，可使得与直板手机的屏幕的比例相差较大的大屏幕(例如图2所示折叠屏的内屏202)中，所显示的用户界面的内容与直板手机的屏幕显示的用户界面的内容相同。即，本申请实施例中的界面显示方法不会通过放大屏幕中用户界面的元素或者是增多用户界面(例如平行视界方式)的元素的方式显示用户界面，从而有效提升用户使用体验。图5为示例性示出的应用本申请实施例中的界面显示方法的效果示意图，请参照图5，仍以内折叠屏手机为例，手机的外屏401中显示支付 应用的用户界面403(相关描述可参照图4的(1)，此处不再赘述)，手机响应于接收到的用户打开折叠屏的操作，变为展开态。手机在内屏402中显示支付应用的用户界面408。如图5所示，用户界面408包括的界面元素与用户界面403包括的界面元素是相同的，也可以理解为用户界面中所展示的信息是相同的，从而可以在屏幕尺寸发生变化时不减少信息展示量。在一些实施例中，内屏402中显示的支付应用的用户界面还可以包括更多的内容(具体示例将在下面的实施例中详细说明)，其观感更接近于直板手机。并且，在用户使用折叠屏手机时，折叠屏手机展开态与折叠态所显示的用户界面的内容是相同的，且界面布局也是近似的，相应的，从而使得折叠屏手机的折叠态与展开态互相切换的过程中，可以增强内外屏显示用户界面的连续性。例如，用户在外屏401显示的用户界面403中查看图片405，在图4显示的已有技术中，折叠态变为展开态后，图片405在界面中的位置发生变化，导致折叠态与展开态切换后的用户界面显示的连贯性较差，而本申请实施例中的方案，如图5所示，折叠态切换为展开态之后(当然也可以是展开态切换到折叠态)，其图片405的水平位置未发生变化，可有效增强用户浏览用户界面的连贯性，从而提升用户使用体验。
需要说明的是，本申请实施例中，以内折叠屏手机为例进行介绍。对于外折叠屏手机，在手机由折叠状态变化展开(半展开)状态后，屏幕的尺寸发生变化(变宽)，且屏幕的宽高比发生变化(变大)，同样可以适用本申请实施例中介绍的方法。
在对本申请实施例中的界面显示方法说明之前，首先以直板手机为例，简单介绍一下界面显示的原理及各模块交互流程。图6为示例性示出的界面显示方法流程示意图。请参照图6，具体可以包括但不限于如下步骤：
S601，布局系统向支付应用发送窗口信息。
示例性的，仍以支付应用为例进行说明。用户可点击支付应用的图标，手机响应于接收到的用户操作，运行支付应用。
布局系统向支付应用发送窗口信息，窗口信息用于指示用户界面在手机屏幕上显示的窗口的大小。本示例中以屏幕全屏显示支付应用的用户界面为例进行说明，相应的，布局系统向支付应用发送的窗口信息用于指示手机全屏显示时的用户界面尺寸(即屏幕的尺寸)，例如窗口信息用于指示用户界面在屏幕中显示的尺寸为2700*1100像素。
需要说明的是，本申请实施例中所述的用户界面，所涉及到的描述方式均为界面在屏幕中显示，在其他实施例中，用户界面也可以理解为是在应用窗口(或可称为显示窗口、应用显示窗口等，本申请不做限定)显示。相应的，窗口信息也可以理解为是用于指示显示窗口的大小。
进一步需要说明的是，本实施例以及图8中所示的实施例中均是以各显示屏全屏显示用户界面，即，应用的显示窗口的大小与屏幕的大小相同为例进行说明的。对于显示窗口与屏幕尺寸不相同的实施例，将在下面的实施例中进行说明，此处暂不赘述。
S602，支付应用根据窗口信息，生成ViewTree(视图树)。
S603，支付应用向布局系统发送ViewTree。
示例性的，支付应用接收布局系统发送的窗口信息，可确定用户界面所显示的窗口的大小。支付应用可基于界面元素与窗口信息，生成ViewTree。其中，界面元素可以理 解为是将要在显示窗口中显示的界面所包括的元素。可选地，界面元素可以是应用缓存在本地的，也可以是应用从服务器获取的，本申请不做限定。
图7a为示例性示出的ViewTree的结构示意图。请参照图7a，应用的每个界面(或页面)均对应一颗描述其布局结构的ViewTree。View(视图)与ViewGroup(视图组)是ViewTree的组成单元，也可以理解为View与ViewGroup是Android UI(User Interface，用户界面)的基本组件。其中，ViewGroup可以包含View和/或ViewGroup，并且ViewGroup其本身就是View的扩展。ViewGroup和View以树形结构一层一层的嵌套组合，就形成了ViewTree。在本申请实施例中的描述中，ViewTree中的View和/或ViewGroup，也可以称为ViewTree中的节点，在其他实施例中也可以称为组件、元素或控件，也就是说，本申请实施例中所述的“节点”可以是指View，也可以是指ViewGroup，下文中不再重复说明。
以图7a中所显示的ViewTree对应于图5或图4中的用户界面403为例进行说明，需要说明的是，图7a中可选地为用户界面403对应的ViewTree的部分组件，用户界面403对应的ViewTree可包括比图7a中所示的更多或更少的组件，本申请不做限定。
仍参照图7a，示例性的，ViewGroup1为该ViewTree的根节点。根节点ViewGroup1下可包括至少一个ViewGroup和/或至少一个View。例如包括ViewGroup2、View1以及View2。每个ViewGroup下可进一步包括至少一个ViewGroup和/或至少一个View。例如，ViewGroup2下包括View3与View4。其中，ViewGoup1为ViewGroup2、View1以及View2的父节点，相应的，ViewGroup2、View1以及View2为ViewGoup1的子节点。ViewGroup2为View3与View4的父节点，View3与View4为ViewGroup2的子节点。示例性的，ViewTree中的每个节点对应各自的声明信息(也可以称为属性信息或描述信息等，本申请不做限定)，声明信息包括但不限于：用于指示节点所对应的控件(或组件、元素等，下文中不再赘述)在显示窗口(其中，显示窗口即为S601中的窗口信息所指示的窗口)中的布局信息，和，用于指示节点的类型的类型信息。示例性的，节点的类型也可以理解为是节点所对应的控件的类型，下文中不再重复说明。在本申请实施例中，节点(例如View)可以理解为是与控件对应的关系，也可以理解为节点即为控件，本申请不做限定。示例性的，布局信息可以理解为该View在显示窗口中的位置和大小(示例性的，为该View在其父节点View中的位置和大小)，类型信息可以包括根布局类型、文本类型等。例如，ViewGroup1的类型信息为“DecorView”，用于指示其类型为根节点类型。再例如，View4的类型信息为“TextView”，用于指示其类型为文本类型。
可选地，ViewTree中的每个节点对应用户界面中的一个控件(也可以称为组件、元素等，下文中不再重复说明)，举例说明，以图7b为例，示例性的，View3对应于用户界面403中的“扫一扫”控件中的“扫一扫”图标控件701，View4对应于用户界面404中的“扫一扫”控件中的“扫一扫”文本控件702。支付应用生成的ViewTree中，通过对View3与View4设置声明信息，可设置View3与View4的具体内容、类型以及在窗口中的布局等信息。例如，View4对应的声明信息包括但不限于：View4的类型信息、View4的内容信息、以及View4在窗口中的布局信息等。更具体的，View4的类型信息为文本类型，View4的内容信息为文本“扫一扫”，View4在窗口中的布局信息为左对齐，即用于指 示View4在其父节点中是靠近左边缘的(也可以包括偏移量等信息)。
示例性的，支付应用创建ViewTree后，将ViewTree(包括ViewTree中的各节点及其声明信息)输出至布局系统。
S604，布局系统基于ViewTree，生成用户界面。
示例性的，布局系统接收到ViewTree后，基于ViewTree执行布局刷新流程。如图7c所示，布局刷新流程可包括：测量(measure)流程、布局(layout)流程以及绘制(draw)流程。
示例性的，测量流程可选地为：布局系统从上至下遍历ViewTree中的各节点(包括View和/或ViewGroup)，基于各节点对应的声明信息，确定各节点在用户界面中的实际尺寸，即节点所需的最大宽度(width)和高度(height)。
示例性的，布局流程可选地为：布局系统从上至下遍历ViewTree中的各节点，基于各节点对应的声明信息，确定各子节点在其父节点中的位置和大小。示例性的，每个节点可以看作是一个矩形，如上文所述，ViewTree中的节点为父子关系，除根节点外的所有节点均对应有父节点。布局系统可计算矩形View或ViewGroup的左(left)、上(top)、右(right)、下(bottom)四条边与其父节点View或ViewGroup的左、上、右、下四条边的距离，从而获取到每个矩形View或ViewGroup在其父节点View或ViewGroup中的位置与大小。其中，根节点对应的位置与大小即为应用的显示窗口对应的位置与大小。举例说明，仍以图7a中的ViewTree为例，布局系统最先遍历根节点ViewGroup1，请参照图7d，在该示例中以屏幕全屏显示应用的用户界面为例，则其对应的显示窗口与屏幕的分辨率相同(例如分辨率为1280*720像素)，相应的，根节点ViewGroup1所对应的位置与大小即与屏幕的显示窗口一致，即分辨率同样为1280*720像素。若应用的用户界面以分屏或者悬浮窗口的形式在屏幕中显示，则对应的显示窗口即为分屏或者悬浮窗口的分辨率的大小，下文中不再重复说明。接着，布局系统继续遍历ViewGroup1下的子节点，包括ViewGroup2、View1和View2。在本申请实施例中，ViewTree的遍历顺序为从上之下，从左至右，在其它实施例中也可以其它遍历顺序，本申请不做限定。以ViewGroup2为例，仍参照图7d，布局系统可基于VewGroup2的宽度与高度(即在测量流程中获取到的)以及声明信息，确定ViewGroup2的左边长与其父节点(即ViewGroup1)的左边长的距离(即左边距)、ViewGroup2的上边长与ViewGroup1的上边长的距离(即上边距)、ViewGroup2的右边长与ViewGroup1的右边长的距离(即右边距)、ViewGroup2的下边长与ViewGroup1的下边长的距离(即下边距)，从而获取到ViewGroup2在其父节点(即ViewGroup1)中的位置与大小(即布局)。接着，布局系统继续遍历ViewGroup2下的子节点，包括View3和View4。以View3为例，布局系统可基于View3的宽度与高度(即测量流程中获取到的结果)以及View3的声明信息，确定View3的左边长与其父节点(即ViewGroup2)的左边长的距离、View3的上边长与ViewGroup2的上边长的距离、View3的右边长与ViewGroup2的右边长的距离、View3的下边长与ViewGroup2的下边长的距离，以得到View3在其父节点ViewGroup2中的位置与大小。
示例性的，绘制流程可选地为布局系统创建一块画布(Canvas)，并基于计算流程中获取到的结果，在画布的对应位置上绘制ViewTree中的各节点的内容，以得到用户界 面。需要说明的是，绘制流程与测量流程、布局流程相同，均是从上至下遍历ViewTree中的每个节点。布局系统可依据遍历顺序，依次绘制各节点对应的内容(也可以理解为各节点对应的UI)。进一步需要说明的是，在画布上绘制各节点的过程中，ViewTree中的每个节点对应各自的画布，节点对应的画布的大小与节点的大小相同，即画布的宽度与节点的宽度相同，画布的高度与节点的高度相同，节点的宽度与高度是在上文所述的测量流程中获取到的。布局系统可在每个节点对应的画布上，绘制每个节点对应的内容。需要说明的是，根节点ViewGroup1对应的画布的尺寸与应用的显示窗口(概念可参照上文，此处不再赘述)的尺寸是相同的。举例说明：请参照图7e，布局系统创建根节点ViewGroup1的画布703，并在画布703上绘制根节点ViewGroup1对应的内容。例如，若根节点ViewGroup1对应的内容为“红色”，则布局系统可将画布703填充红色，以作为用户界面的底色。接着，根据ViewTree的结构，布局系统继续遍历ViewGroup2，布局系统可基于ViewGroup2在其父节点ViewGroup1中的位置和大小(即布局流程中获取到的结果)，在ViewGroup1的画布703的相应位置上，绘制ViewGroup2的用户界面。具体为：请参照图7e，布局系统在相应的位置绘制ViewGroup2的画布，且ViewGroup2的画布中绘制有ViewGroup2对应的内容。布局系统还依次遍历View1和View2，并按照布局流程中获取到的View1在ViewGroup1中的位置和大小，以及View2在ViewGroup1中的位置和大小，在ViewGroup1的相应位置上，绘制View1和View2的用户界面(图中未示出)。仍参照图7e，示例性的，布局系统遍历至View3，布局系统可基于布局流程中获取到的结果，确定View3(可以理解为是View3的画布或者是用户界面)在其父节点ViewGroup2的位置与大小。布局系统在相应的位置上，绘制View3的UI(也可以称为是View3的图像、View3的视图、View3的图形等，本申请不做限定，下文中不再重复说明)，即为上文所述的“扫一扫”图标控件701。
示例性的，布局系统继续按照上述方式，对ViewTree的各节点进行遍历及绘制，以得到图7f的(1)中所示的用户界面(也可以理解为是ViewTree对应的用户界面)。请参照图7f的(2)，布局系统生成用户界面704后，布局系统将用户界面704输出至相关模块进行渲染等处理，并在屏幕中全屏显示用户界面704。
可选地，在Android系统中，布局系统可调用ViewRoot类的成员函数-PerformTraversals来执行测量、布局和绘制流程，本申请不做限定。
可选地，本申请的各实施例中均以16ms(对应的帧率为60帧/s)触发一次布局刷新流程为例，在其他实施例中，根据帧率不同，刷新间隔也不同，可根据实际需求设置，本申请不做限定，下文中不再重复说明。也就是说，在本申请的实施例中，布局系统每隔16ms，重新执行图7c中所示的测量、布局以及绘制流程，以刷新屏幕中显示的用户界面。可选地，若在刷新周期，布局系统检测到用户界面未发生变化，布局系统可以不执行图7c的流程，以节省耗电量。
下面结合附图，对本申请实施例中的界面显示方法进行详细说明。图8为示例性示出的界面显示方法流程示意图。请参照图8，具体包括：
S801，布局系统向支付应用发送窗口信息。
在本申请实施例中，布局系统向支付应用发送的窗口信息，与S601的不同的是，S601 中发送的显示窗口的信息，即为用户界面将要显示的窗口对应的信息。例如图7f中，用户界面704在显示屏中全屏显示，则其所对应的显示窗口的大小与手机屏幕的分辨率是相同的。相应的，S601中布局系统发送的显示窗口信息所携带的分辨率大小，即与手机屏幕的分辨率相同，以使得应用可基于窗口信息所指示的大小进行布局。而本申请实施例中，布局系统向支付应用发送的窗口信息所指示的显示窗口高度与实际显示窗口的高度相同，而窗口信息中所指示的显示窗口的宽度小于实际显示窗口的宽度。示例性的，为区分实际的显示窗口大小，下文中将该窗口信息指示的显示窗口标识为第一显示窗口，实际显示窗口标识为第二显示窗口。在本申请实施例中，窗口信息所指示的第一显示窗口的大小以接近直板手机的显示尺寸为目的，使得应用仍然可以基于接近直板手机的显示窗口进行布局。
在本实例中，布局系统向支付应用发送的窗口信息中所指示的窗口宽度为实际将要显示的窗口的宽度的一半(即50％)，窗口信息中所指示的窗口高度与实际将要显示的窗口的高度相同为例进行说明。在其他实施例中，窗口信息所指示的第一显示窗口的宽度也可以是第二显示窗口(即实际显示窗口)的宽度比例也可以大于50％或小于50％，例如可以是第二显示窗口的宽度的三分之一，也可以是三分之二，主要目的是使布局系统发送给应用的窗口信息所指示的窗口接近直板手机。需要说明的是，直板手机的宽高比也都不相同，因此，本申请实施例中的窗口信息所指示的显示窗口是在高度与实际显示窗口一致的情况下，宽度与高度的比值接近直板手机(或者是内部为大屏幕的折叠屏的手机外屏)。
举例说明，请参照图9a，示例性的，折叠屏手机的内屏902的分辨率为2700*2200像素，本实例中仍以在内屏902中全屏显示用户界面为例进行说明，也就是说，支付应用的用户界面的实际显示窗口的分辨率为2700*2200像素。布局系统向支付应用发送的窗口信息所指示的显示窗口的分辨率为2700*1100像素，即，布局系统发送的窗口信息所描述的第一显示窗口901的宽度为实际显示窗口(即第二显示窗口)的宽度的二分之一，而长度(即高度)是相同的。
需要说明的是，布局系统发送给支付应用的窗口信息只包括第一显示窗口的高度和宽度，其并未指示第一显示窗口在实际显示窗口中的位置，图9a中所示的虚线仅为示意性示出第一显示窗口的宽度与第二显示窗口的宽度之间的关系。
进一步需要说明的是，本申请实施例中以支付应用为例进行说明，在其他实施例中，本申请实施例中可用于其它应用的界面显示，例如购物应用、社交应用、出行应用等，本申请不做限定。
S802，支付应用根据窗口信息，生成ViewTree。
S803，支付应用向布局系统发送ViewTree。
示例性的，支付应用接收到布局系统输入的窗口信息。支付应用可根据窗口信息生成ViewTree，并将ViewTree输出至布局系统。具体细节可参照S602与S603的相关描述，此处不再赘述。
需要说明的是，如上文所述，应用获取到的窗口信息所指示的尺寸是第一显示窗口的尺寸，即为实际显示窗口(即第二显示窗口)的宽度的一半(高度相同)，因此，支 付应用所生成的ViewTree也是基于第一显示窗口生成的。
S804，布局系统基于ViewTree，生成第一用户界面。
示例性的，布局系统接收到ViewTree后，基于ViewTree执行布局刷新流程，即测量、布局以及绘制流程。
在该示例中，测量流程与布局流程与S604中的相同，在该示例中，布局系统可基于窗口信息对ViewTree进行布局。也就是说，布局系统在执行测量与布局流程之后，获取到的是ViewTree中的各节点在第一显示窗口中的布局(包括位置与大小)。举例说明，测量与布局流程的结果仍以图9a中所示的示意图为例，布局系统基于第一窗口901的尺寸，依次对ViewTree(仍以图7a中的ViewTree为例)的各个节点执行测量与布局流程，以ViewGroup1、ViewGroup2以及View3为例。布局系统获取到ViewGroup1(即根节点)的布局与第一显示窗口的布局相同，即大小与位置均与第一显示窗口相同。布局系统继续遍历ViewTree，以获取ViewGroup2在ViewGroup1中的位置与大小。如图9a所示，布局系统可计算出ViewGroup2在ViewGroup1中的位置与大小，接着，布局系统可计算出View3在其父节点ViewGroup2中的位置与大小。具体获取方式可参照图6中的相关描述，此处不再赘述。如图9a所示，布局系统获取到的布局结果是基于第一显示窗口得到的，也就是说，布局系统所测算出的各View的位置与大小是在第一显示窗口中的，而第一显示窗口的宽度为第二显示窗口(即实际显示的窗口)的宽度的二分之一。
需要说明的是，如上文所述，应用基于第一显示窗口的窗口信息创建的ViewTree，其仅获取到第一显示窗口的高度与宽度，但该信息并不能指示第一显示窗口在屏幕中的位置。示例性的，布局系统在进行测量和布局流程中，其可基于第一显示窗口在屏幕中的实际位置进行测量与布局。可以理解为，布局系统所获取到的测量与布局结果，即为该节点对应的节点(或元素等)在显示屏上的实际位置与大小。在本申请实施例中，以布局系统将第一显示窗口的实际显示位置靠第二显示窗口的左侧为例进行说明，在其他实施例中，第一显示窗口的位置也可以在第二显示窗口的其他位置，例如可以是居中，也可以是靠右侧，本申请不做限定。
如图9b为基于第一显示窗口进行布局后的用户界面示意图，需要说明的是，该示意图仅为使本领域技术人员更好的理解本方案，布局系统实际上未绘制出该用户界面。请参照图9b，示例性的，布局系统基于第一显示窗口进行用户界面布局，其布局后的效果是与直板手机中的显示效果接近的。也就是说，本申请实施例中，布局系统基于窗口信息执行测量与布局流程，可使得用户界面中的各元素(即组件)的布局接近直板手机中的界面的布局。请继续参照图9b，示例性的，第一显示窗口对应的用户界面如果在内屏902中显示，其将占据内屏902的二分之一的屏幕大小，即第一显示窗口的高度与全屏显示的窗口的高度相同，而宽度(即1100)则为全屏显示窗口(即第二显示窗口)的宽度(即2200)的二分之一。
在本申请实施例中，布局系统在绘制流程中，布局系统将ViewTree中的各节点(包括ViewGroup和View)对应的画布的宽度设置为第一显示窗口的宽度的两倍，各节点对应的画布的高度设置为与第一显示窗口的高度相同。可以理解为，在本申请实施例中，布局系统如果按照布局流程获取到的结果进行绘制，即根节点的画布的尺寸与第一窗口 的尺寸相同(方法可参照图6中的描述)，得到的示意图如图9b所示，即用户界面的宽度等于内屏902宽度的二分之一，而本申请实施例中，通过将画布进行横向拉伸(纵向保持不变)，即将根节点及各子节点的画布设置为第一显示窗口的宽度的二倍，即，与第二显示窗口(即实际显示的窗口)的宽度相同，从而使得绘制后的用户界面的宽度是与第二显示窗口的宽度相同的。
为使得本领域人员更好的理解本申请实施例中的画布拉伸方案，下面结合附图进行详细说明。请参照图10a的(1)，示例性的，布局系统基于支付应用输入的ViewTree及其声明信息，执行测量与布局流程，可获取到各节点在第一显示窗口中的布局(实际上是各节点在其父节点中的位置与大小)，具体描述可参照图9a，此处不再赘述。请参照图10a的(1)，布局系统执行测量与布局流程后，可获取到在第一显示窗口1001中，ViewGroup1的宽度为w11、ViewGoup2的宽度为w12、View3的宽度为w13。其中，w11等于第一显示窗口的宽度(例如为1100像素)。示例性的，布局系统在绘制流程中，将各节点的画布宽度拉伸为布局结果中的宽度的两倍。
如图10a的(2)所示，布局系统依次遍历ViewTree，布局系统创建ViewGroup1的画布1002。其中，根节点ViewGroup1的画布1002的宽度w21为布局结果中ViewGroup1宽度w11的二倍。布局系统可在ViewGroup1的画布上绘制ViewGroup1对应的内容。
布局系统继续遍历ViewTree，布局系统创建ViewGroup2的画布1003，画布1003的宽度w22为布局结果中ViewGroup2宽度w12的二倍。布局系统可在ViewGroup2的画布1003上绘制ViewGroup2对应的内容。
接着，布局系统按照上述方式，创建View3的画布1004，其中，画布1004的宽度w23为w13的二倍。布局系统可在View3的画布上绘制View3对应的内容(例如为“扫一扫”图标)。
需要说明的是，图10a中仅以ViewTree中的部分节点为例进行说明，其它节点可以做相同或相似的处理，此处不再逐一举例说明。
进一步需要说明的是，上述过程中各节点的画布只做横向拉伸，各节点的上边长和其父节点的上边长之间的上边距以及下边长与其父节点的下变长之间的下边距是不变的。并且，各节点的高度也不变。
进一步需要说明的是，如上文所述，本申请实施例中是以第一显示窗口在第二显示窗口的左侧为例进行说明的，相应的，在布局流程中，布局系统获取到的各节点的位置信息是针对第一显示窗口在第二显示窗口的左侧的场景中获取到的。相应的，在该示例中，图10a所示的拉伸过程可以理解为是将各节点的画布向右侧拉伸。在其他实施例中，布局系统对画布的拉伸是基于第一显示窗口在第二显示窗口中的位置的，例如，若第一显示窗口在第二显示窗口的居中位置，则画布拉伸流程中，可以理解为是将画布向两侧拉伸。再例如，若第一显示窗口在第二显示窗口的右侧，则画布拉伸流程中，可以理解为是将画布向左侧拉伸。
请参照图10b，布局系统遍历ViewTree结束后，可得到第一用户界面1005。示例性的，第一用户界面1005的尺寸(也可以理解为是根节点ViewGroup1对应的画布尺寸)与第二显示窗口(即实际的显示窗口)的尺寸相同，例如分辨率均为2700*2200。第一用 户界面1005中包括但不限于：根节点ViewGroup1对应的UI、View3对应的UI(即“扫一扫”图标控件1006)、View4对应的UI(即“扫一扫”文本控件1007)、以及其它View所对应的UI，例如可以包括：图片控件1008(也可以称为图片组件或图片元素等，本申请不做限定)、文本控件1009、背景控件1010以及输入框控件1011等。由图10b可看出，画布1005上绘制出的用户界面中所包括的内容，是与第一显示窗口中包含的内容大致相同的。并且，每个控件对应的图像均是被拉伸后的结果。
可选地，在本申请实施例中，布局系统可通过Canvas.scale方法拉伸画布。例如，在本申请的各示例中，以各显示窗口、画布以及屏幕的左上角作为坐标原点，水平方向为横轴，竖直方向为纵轴为例。布局系统通过Canvas.scale方法，可将各View的画布在横轴方向上放大2倍，纵轴方向上不变(即上文所述的上边距、下边距以及高度不变)，以获取拉伸后的用户界面。
S805，将第一用户界面中的元素进行归类，对还原类型的元素进行还原。
S806，获取第二用户界面。
示例性的，由于画布被横向拉伸，可能会造成部分控件变形。布局系统可对每个View进行分类，并对需要进行还原的类型(简称还原类型)的View所对应的画布进行还原，以得到第二用户界面，如图10c所示的第二用户界面1012。
可选地，布局系统可通过Canvas.scale方法，可将还原类型的View的画布在横轴方向上缩小2倍，纵轴方向上不变(即上边距、下边距以及高度不变)，以获取还原后的用户界面(例如第二用户界面1012)。
示例性的，在本申请实施例中，布局系统可基于表1对各节点进行分类，并按照各节点分类所对应的策略进行还原或保持拉伸状态等处理。需要说明的是，如上文所述，在本申请实施例中，节点也可以理解为是控件，相应的，节点类型也可以理解为是控件类型，下文中不再重复说明。
表1
示例性的，如表1所示，控件类型包括但不限于：根布局类型、文本类型、大图片类型、小图片类型、ViewGroup类型、输入框类型以及其它类型。需要说明的是，本申请实施例中仅以表格的方式为例进行说明，在其他实施例中，布局系统也可以以其它形式维护类型与策略之间的对应关系。
示例性的，根布局类型(也可以称为根布局控件类型)，即为根节点所对应的类型。 根节点的声明信息中的类型信息为“DecorView”。布局系统基于该类型信息，可确定ViewTree中的根节点，例如图7a中的ViewGroup1的类型信息为“DecorView”。根节点类型对应的策略为保持拉伸状态。例如图10b中的根节点对应的画布1005(也可以称为第一用户界面1005)，在还原流程中，布局系统识别到ViewGroup1的类型为“DecorView”，通过检索表1，确定对应的策略为保持当前的拉伸状态。则ViewGroup1在图10c所示的第二用户界面1012中的图形仍然保持拉伸状态，即，ViewGroup1的画布宽度为拉伸后的宽度，例如图10a中的w21。
示例性的，文本类型(也可以称为文本控件类型)，节点对应的类型信息中标识为“TextView”。该类型控件对应的策略为还原。也就是说，布局系统将该类控件的画布宽度还原为拉伸前的宽度，而上边距、下边距(概念可参照上文，此处不再赘述)以及高度保持不变。举例说明，以图10b中的“扫一扫”文本控件1007为例，请参照图11a的(1)，在第一用户界面1005中，View4对应的“扫一扫”文本控件1007的宽度为w24，该宽度为拉伸后的宽度，画布拉伸的描述可参照上文，此处不再赘述。请参照图11a的(2)，示例性的，在还原流程中，布局系统检测到View4的类型为文本类型，对应的策略为还原。布局系统将View4的画布的横向宽度还原为拉伸前的宽度，即测量与布局流程获取到的结果，例如宽度为w14(获取的方式可参照上文，此处不再赘述)。其中，w24为w14的二倍。如图11a的(2)所示，“扫一扫”文本控件1007的图形随着View4的画布还原，其图像从拉伸状态变为还原状态。需要说明的是，View4的画布，即“扫一扫”文本控件1007所属的画布的上边距、下边距以及高度保持不变。
示例性的，大图片类型(也可以称为大图片控件类型)，可选地为宽度大于或大于等于阈值的图片类型的节点，该类型对应的策略为保持拉伸状态。本申请实施例中以阈值为显示窗口的50％为例进行说明。布局系统可以根据布局流程之后得出的结果进行判断，以确定图片是否为大图片。举例说明，以图10b中的图片1008为例，布局系统基于测量与布局流程获取到的结果，确定图片1008在第一显示窗口1001中的宽度，大于第一显示窗口的宽度的50％，布局系统可确定图片1008为大图片。可选地，布局系统也可以基于拉伸后的结果进行判断，例如在图10b中，拉伸后的图片1008的宽度超过第二显示窗口(也就是画布1005)的宽度的50％，布局系统可确定图片1008为大图片。本申请中的阈值仅为适宜性举例，具体阈值可根据实际需求设置，本申请不做限定。示例性的，布局系统确定节点对应的类型为大图片类型后，可将该节点的画布保持拉伸状态。
示例性的，小图片类型(也可以称为小图片控件类型)，可选地为宽度小于或小于等于阈值的图片。例如图10b中的“扫一扫”图标控件1006，其节点的类型为图片类型。布局系统基于其宽度，检测到该图片的宽度小于阈值，可确定“扫一扫”图标控件903为小图片类型。具体判定方式与大图片类似，此处不再重复说明。
示例性的，ViewGroup类型(也可以称为ViewGroup控件类型)，节点对应的类型信息中标识为“ViewGroup”，其对应的策略为保持拉伸状态。示例性的，布局系统检测到节点的类型为“ViewGroup”后，通过检索表1，可确定其还原策略为保持拉伸状态。具体描述与根节点类型类似，此处不再赘述。
示例性的，输入框类型，即节点对应的类型信息中标识为“EditText”，其对应的策 略为保持拉伸状态。例如图10b中的输入框控件1011，其在图10c所示的第二用户界面1012中仍保持拉伸后的状态。
示例性的，对于其它类型控件，即不满足上述任意类型的控件的归类条件的控件，其对应的策略可选地为保持拉伸状态，或者可选地为还原。
需要说明的是，在本申请实施例中，在还原过程中，各节点还原后的对齐方式默认为左对齐。举例说明，请参照图11b的(1)，其示例性示出View4，即“扫一扫”文本控件1007拉伸后的状态。请参照图11b的(2)，区域1101为拉伸区域，拉伸区域的位置与大小与View4拉伸后的位置与大小相同，需要说明的是图11b的(2)中，View4的画布挡住区域1101的一部分区域，也就是说，View4包含在区域1101中。可以理解为，拉伸区域即为View4拉伸后所占的区域。在本申请实施例中，布局系统将View4的画布还原后，默认为View4的对齐方式为左对齐。即，如图11b的(2)所示，View4的画布，即“扫一扫”文本控件1007还原到拉伸前的尺寸之后，其位置向区域1101的左侧偏移，即，View4的左边长与区域1101的左边长对齐、上边长与区域1101的上边长对齐、下边长与区域1101的下边长对齐。
在一种可能的实现方式中，对于策略为还原的类型的节点(本申请实施例中简称为还原类型)，在还原过程中，布局系统可基于其在未拉伸前在父节点中的对齐方式，对节点进行对齐。对齐方式包括上文所述的左对齐方式，还包括居中对齐方式以及右对齐方式等。需要说明的是，布局系统可在布局流程中获取到各节点在父节点中的对齐方式。
居中对齐方式可参照图11b的(3)，示例性的，布局系统将View4还原后，其位置向区域1101的中间偏移。即，View4的中心点与区域1101的中心点重合、上边长与区域1101的上边长对齐、下边长与区域1101的下边长对齐。
右对齐方式可参照图11b的(4)，示例性的，布局系统将View还原后，其位置向区域1101的右侧偏移。即，View4的右边长与区域1101的右边长对齐、上边长与区域1101的上边长对齐、下边长与区域1101的下边长对齐。
各还原类型的节点的对齐方式可以是默认的，例如默认为左对齐。在本申请实施例中，如上文所述，各节点的对齐方式参照布局流程中的对齐方式。例如，在还原过程中，布局系统是依次对各节点进行遍历，并进行还原或保持拉伸的。布局系统在对节点进行处理时，例如以ViewGroup2为例，布局系统可获取ViewGroup2中的各节点的对齐方式。例如，View3在ViewGroup2中的对齐方式为居中，则布局系统在对View3进行还原后，可将View3在拉伸区域中居中对齐。
需要说明的是，对于一些声明中未定义对齐方式的控件，可以采用左对齐、居中以及右对齐等任意对齐方式，本申请不做限定。
可选地，布局系统可通过Canvas.translate方法将View对应的画布进行对齐。
在一种可能的实现方式中，对于大图片类型的控件，如上文所述，其对应的策略为保持拉伸状态。一个示例中，对于纯色的大图片类型控件，可以使其保持在当前的拉伸状态，例如图10c中的背景控件1010，其为纯色图片(当然也可以是渐变色)，其在保持拉伸状态的情况下，图片模糊程度较小，属于可接受范围内，因此可保持当前的拉伸状态。另一个示例中，对于非纯色的大图片类型控件，例如图10b与图10c中的图片控 件1008，布局系统可将图片进行还原，并对画布中除图片内容外的其它部分进行填充。本申请实施例中的填充方式可以包括：高斯模糊填充方式、背景色填充方式等。
举例说明，请参照图12a，布局系统对大图片控件1201进行图片识别，可识别到大图片控件1201的左边缘区域1202为纯色填充(也可以是渐变色)，右边缘区域1203同样为纯色填充。左右边缘的填充色可以相同，也可以不同，本申请不做限定。示例性的，布局系统将大图片控件1201还原至拉伸前的尺寸。需要说明的是，该步骤可以理解为是将View中的图片内容进行还原并居中，其画布保持拉伸后的宽度。如图12a所示，大图片控件1201(具体是指图片内容)还原并居中后，布局系统可将还原后的大图片控件1201的左边长与该控件所属的View对应的画布1204的左边长之间的区域1205进行填充，填充的内容与大图片控件1201的左边缘区域1202的内容(可以是图案、颜色或渐变色等，本申请不做限定)相同。相应的，布局系统将还原后的大图片控件1201的右边长与该控件所属的节点对应的画布1204的右边长之间的区域1206进行填充，填充的内容与大图片控件1201的右边缘区域1203的内容(可以是图案、颜色或渐变色等，本申请不做限定)相同。
再举例说明，请参照图12b，布局系统对大图片控件1207进行图片识别，可识别到大图片控件1207的背景色为纯色(也可以是渐变色等)。布局系统可将大图片控件1207的图片内容还原并居中，以及，布局系统将大图片控件1207所属的节点对应的画布1208中，除还原后的大图片控件1207以外的区域进行填充，填充的内容即为大图片控件1207的背景色。
再举例说明，请参照图12c，布局系统对大图片控件1209进行识别，可识别到大图片控件1209中的中间区域1210为相似的图案或填充色等，而大图片控件1209的两侧为人物图像(也可以是其它图像，本申请不做限定)。布局系统在拉伸大图片控件1209的过程中，可以将大图片控件1209的中间区域1210进行拉伸，而人物图像区域1211保持不变。
可选地，对于不满足上述任意处理条件的图片，例如图片的中间区域不相似、边缘区域非纯色(或渐变色等)填充、背景色为复杂背景色(即非纯色或渐变色等填充)，则布局系统可将图片控件中的图片内容还原并居中，并对画布中除图片内容以外的部分进行高斯模糊填充。高斯模糊的图形可以是基于图片内容的边缘区域，也可以是基于整个图片内容，还可以是基于图片中的任意区域的图形，本申请不做限定。
在本申请实施例中，对于一些以列表方式呈现的控件(例如上述实施例中介绍的小图片类型)，由于控件中的元素未展示完毕，因此当屏幕尺寸变化时，可以根据实际屏幕尺寸展示更多/更少元素。例如，当折叠屏手机展开后，图10c所示实施例中“更多”选项1012可以展开显示，增加了界面展示的信息量。
在本申请实施例中，对于一些特殊类型的控件，可设置有特殊的处理策略，其处理方式与上文中的各类型的策略不相同。特殊类型包括但不限于：WebView类型控件以及多行文本控件。示例性的，特殊的处理策略可选地为：布局系统在布局流程中，将特殊类型的控件对应的显示窗口宽度设置为第二显示窗口的宽度，并且，在绘制过程中，无需对特殊类型的控件进行拉伸处理。
举例说明，以多行文本类型控件为例。请参照图13a的(1)，示例性的，如上文所述，布局系统在测量流程中，可获取到各View对应的宽度与高度，例如布局系统可获取到View1302、View1303以及View1304在第一显示窗口1301中的宽度与高度。例如，布局系统可获取到View1303的高度为a1，宽度为b1(图中未示出)。
布局系统还可在测量过程中，获取到View1303中的内容为文本，并且进一步检测到文本为多行文本。如图13a的(1)所示，View1303中包括三行文本内容，该文本内容仅为示意性举例，本申请不做限定。
布局系统可对View1303进行重新测量，重新测量的过程中将View1303对应的显示窗口设置为第二显示窗口1304。如图13a的(2)所示，布局系统对View1303重新测量后，获取到的结果为：View1303的高度为a2，宽度为b2(图中未示出)。其中，a2小于a1，例如，a2可以是a1的二分之一，本申请不做限定，并且，宽度b2大于b1。从而使得View1303中的多行文本的行数可以减少，例如本实施例中View1303的高度缩小且宽度增大后，其三行文本可减少到在一行内显示。示例性的，在布局流程中，布局系统可基于测量后的结果，逐一对ViewTree中的各节点进行布局。其中，布局系统在对View1303进行布局时，是基于重新测量得到的结果进行布局的，布局流程与上文相同，此处不再赘述。在绘制流程中，如图13b所示，布局系统对各节点(例如View1302和View1304)进行拉伸以及还原等处理，而对于View1303，布局系统在第二用户界面1305中绘制的View1303对应的UI，即为基于布局流程计算出的结果进行绘制的。也就是说，布局系统基于布局流程中获取到的View1303的位置与大小进行绘制，并未在绘制流程中对View1303进行拉伸以及还原等处理。需要说明的是，在布局流程中，ViewTree中依据遍历顺序，在View1303之后的节点，均是基于View1303的布局结果进行布局的。举例说明，请参照图13a的(1)，如果布局系统按照原有测量结果进行布局，即View1303的宽度仍然为a1，高度为b1，则View1302、View1303以及View1304的位置与大小如图13a的(1)所示。而在本申请实施例中，布局系统对View1303进行测量后，将View1303的高度减小至a2，其中，a2小于a1，即，高度缩小x1。如图13的(2)所示，在布局流程中，布局系统基于View1303的测量结果进行布局，其高度为a2，宽度为b2，并获取到View1303在其父节点中的位置与大小。需要说明的是，View1303的位置与大小可以在其父节点之中，也可以在父节点之外或部分重合，本申请不做限定。仍参照图13a的(2)，示例性的，布局系统在对View1304进行布局时，基于View1303的布局结果进行布局，其位置较之13a的(1)中的位置，在纵轴方向上向上偏移，偏移量可选地为View1303的高度的缩小量x1。这样，在该场景中，由于WebView的高度缩小，可使得其它部分节点上移，相应的，布局系统所生成的用户界面所包含的内容可以比高度相同的直板手机中显示的内容更多。
可选地，对于View1303，布局系统对其进行测量时，也可以不改变其高度，例如高度仍然为a1，而宽度变为b2。其它细节与上文相同，此处不再赘述。
示例性的，如上文所述，布局系统在布局过程中是基于第一显示窗口进行布局的，而在绘制过程中，是将各节点进行拉伸与还原处理后得到的第二用户界面。也就是说，本申请实施例中仅改变控件的显示位置，而未改变控件的实际位置。因此，各节点所对 应的控件在第二用户界面中显示的位置，与布局系统实际获取到的节点的位置(即在布局流程中获取到的位置)是不相同的。相应的，在事件派发(事件包括触摸事件、点击事件等)的过程中，布局系统基于第二用户界面中的坐标点与第一显示窗口中的坐标点之间的映射关系，以获取到用户实际操作的位置。举例说明，请参照图14的(1)，如上文所述，布局系统进行布局后，其对应的效果如图14的(1)所示，具体描述可参照图9b的相关描述，此处不再赘述。需要说明的是，图14的(1)仅为示意性示出第一显示窗口1402中的界面布局情况，布局系统并未绘制该示意图。请参照图14的(2)，示例性的，用户点击内屏1401中的“存款”图标控件。手机响应于接收到的用户操作，可确定用户点击的坐标点为(x2，y2)。其中，本申请实施例中是以内屏1401的左上角为坐标原点，水平方向为x轴，竖直方向为y轴建立坐标系，该坐标系仅为示意性举例，本申请不做限定。在本申请实施例中，在绘制过程中，绘图系统是将各节点的宽度拉伸为2倍，高度保持不变。相应的，图14的(1)中的坐标点与图14的(2)中的坐标点之间的映射关系为：图14的(1)中的坐标系中的x轴坐标点的数值为图14的(2)中的x轴坐标点的数值的二分之一(在本申请实施例中是二分之一，仅以二分之一为例进行说明)，y轴坐标点相同。因此，手机基于映射关系，确定用户点击的坐标点在第一显示窗口中对应的坐标为(x1，y1)，其中，x1为x2的二分之一，y1与y2相等。手机可基于该坐标点，确定用户点击的是“存款”控件，并显示存款界面。
需要说明的是，如上文所述，本申请实施例中是以布局系统在布局流程中，以第一显示窗口在第二显示窗口的左侧为例进行说明。相应的，第二显示窗口中的坐标与第一显示窗口中的坐标的映射关系为：第二显示窗口中的横坐标为第一显示窗口中的横坐标的二分之一。在其他实施例中，若在布局流程中，第一显示窗口在第二显示窗口的右侧(也可以是其它位置，仅以右侧为例说明，本申请不再逐一举例)，则第二显示窗口的横坐标为第一显示窗口中的横坐标的二分之一，再加上偏移量。偏移量即为第一显示窗口的左上角与坐标原点在x轴上的距离。
需要说明的是，本申请实施例中均是第一显示窗口的宽度第二显示窗口的二倍，相应的，在绘制流程中拉伸倍数同样二倍为例进行说明的，因此，第一显示窗口中的坐标点与第二显示窗口(即第二用户界面)的坐标点在横轴方向上是二分之一的关系。在其他实施例中，若绘制流程中，画布的拉伸倍数为其它数值，例如三倍，则第二显示窗口的宽度为第一显示窗口的宽度的三倍，相应的，第二显示窗口(即第二用户界面)的坐标点在横轴方向上是第一显示窗口中的坐标点的三倍。举例说明，请参照图15，以车载屏幕显示场景为例进行说明，车载屏幕1501的尺寸为1280*1080像素，仍以车载屏幕中全屏显示应用的用户界面为例进行说明。示例性的，布局系统向应用发送的窗口信息所指示的第一显示窗口1502的尺寸为1280*720像素，当然也可以是1280*700像素，或者是1280*800像素，本申请仅以第一显示窗口的宽度为第二显示窗口的宽度的三分之二为例进行说明。相应的，应用可基于接收到的窗口信息进行布局并生成ViewTree。布局系统可对ViewTree进行测量、布局等流程。在绘制流程中，布局系统可将根节点及其下属节点的画布的宽度均拉伸至当前的二分之三倍(高度均不变)，例如，根节点的画布宽度拉伸至1080像素。接着，布局系统可将各View进行还原及对齐等步骤。在使用过程 中，若用户点击屏幕1501上的点，则布局系统可基于第一显示窗口与第二显示窗口的比例关系，确定用户点击的第二显示窗口中的点映射到第一显示窗口中的点，例如，用户在屏幕1501上点击的坐标点为(x3,y3)，则布局系统可获取到对应的第一显示窗口中的点为(x4,y3)，其中，x4为x3的三分之二。未描述部分可参照上文实施例中的相关内容，此处不再赘述。
在一种可能的实现方式中，本申请实施例提供的方法还可以应用于跨设备界面投屏场景(例如第一设备向第二设备投屏的场景)中。其中，第一设备与第二设备的屏幕尺寸不同。例如，在应用A的界面由手机投屏至笔记本电脑之后，用于显示应用A的界面的屏幕尺寸发生变化(变长变宽)，且屏幕的宽高比发生变化(变大)。
在一种可能的实现方式中，本申请实施例中的手机还可以设置智慧显示选项。可选地，智慧显示选项中可包括开关选项，用于开启或关闭本申请实施例中的界面显示流程。例如，用户可点击开关选项，以启动或关闭本申请实施例中的界面显示流程。若用户关闭智慧显示选项，则手机可按照图4中所示的任意方式，在内屏中显示用户界面。可选地，智慧显示选项中除包括开关选项(用于开启或关闭)外，还可以包括但不限于允许智慧显示应用列表，用户可在智慧显示应用列表中设置可应用本申请实施例中的界面显示流程的应用。可选地，第三方应用可通过设置界面的配置文件，以指示需要应用本申请实施例中的界面显示方案的界面，和/或，不需要应用本申请实施例中的界面显示方案的界面。可选地，智慧显示选项可以设置于设置应用、桌面、负一屏、下拉菜单、控制中心以及侧边栏中，本申请不做限定。
在另一种可能的实现方式中，如上文所述，本申请实施例中的界面显示方案仅以折叠屏为例进行说明，在其他实施例中，本申请中的界面显示方案还可以应用于其他设备、例如平板、车载设备、可穿戴设备、智能家居设备等。可选地，本申请实施例中的界面方案还可以应用与手机的横竖屏转换场景。举例说明，手机处于竖屏状态时，手机可基于图6中所示的方案显示应用的用户界面。当手机切换为横屏状态时，手机可基于图8中所示的方案显示应用的用户界面，具体细节可参照图8中的描述，此处不再赘述。当然，在另一些实施例中，本申请实施例中的界面方案还可以应用于悬浮窗以及分屏等场景中，本申请不做限定。
可以理解的是，电子设备为了实现上述功能，其包含了执行各个功能相应的硬件和/或软件模块。结合本文中所公开的实施例描述的各示例的算法步骤，本申请能够以硬件或硬件和计算机软件的结合形式来实现。某个功能究竟以硬件还是计算机软件驱动硬件的方式来执行，取决于技术方案的特定应用和设计约束条件。
示例性的，图16示出了本申请实施例的一种装置1600的示意性框图装置1600可包括：处理器1601和收发器/收发管脚1602，可选地，还包括存储器1603。
装置1600的各个组件通过总线1604耦合在一起，其中总线1604除包括数据总线之外，还包括电源总线、控制总线和状态信号总线。但是为了清楚说明起见，在图中将各种总线都称为总线1604。
可选地，存储器1603可以用于前述方法实施例中的指令。该处理器1601可用于执行存储器1603中的指令，并控制接收管脚接收信号，以及控制发送管脚发送信号。
装置1600可以是上述方法实施例中的电子设备或芯片。
其中，上述方法实施例涉及的各步骤的所有相关内容均可以援引到对应功能模块的功能描述，在此不再赘述。
本实施例还提供一种计算机存储介质，该计算机存储介质中存储有计算机指令，当该计算机指令在电子设备上运行时，使得电子设备执行上述相关方法步骤实现上述实施例中的方法。
本实施例还提供了一种计算机程序产品，当该计算机程序产品在计算机上运行时，使得计算机执行上述相关步骤，以实现上述实施例中的方法。
另外，本申请的实施例还提供一种装置，这个装置具体可以是芯片，组件或模块，该装置可包括相连的处理器和存储器；其中，存储器用于存储计算机执行指令，当装置运行时，处理器可执行存储器存储的计算机执行指令，以使芯片执行上述各方法实施例中的方法。
其中，本实施例提供的电子设备、计算机存储介质、计算机程序产品或芯片均用于执行上文所提供的对应的方法，因此，其所能达到的有益效果可参考上文所提供的对应的方法中的有益效果，此处不再赘述。
通过以上实施方式的描述，所属领域的技术人员可以了解到，为描述的方便和简洁，仅以上述各功能模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能模块完成，即将装置的内部结构划分成不同的功能模块，以完成以上描述的全部或者部分功能。
本文中术语“和/或”，仅仅是一种描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。
在本申请实施例中，“示例性的”或者“例如”等词用于表示作例子、例证或说明。本申请实施例中被描述为“示例性的”或者“例如”的任何实施例或设计方案不应被解释为比其它实施例或设计方案更优选或更具优势。确切而言，使用“示例性的”或者“例如”等词旨在以具体方式呈现相关概念。
在本申请实施例的描述中，除非另有说明，“多个”的含义是指两个或两个以上。例如，多个处理单元是指两个或两个以上的处理单元；多个系统是指两个或两个以上的系统。
上面结合附图对本申请的实施例进行了描述，但是本申请并不局限于上述的具体实施方式，上述的具体实施方式仅仅是示意性的，而不是限制性的，本领域的普通技术人员在本申请的启示下，在不脱离本申请宗旨和权利要求所保护的范围情况下，还可做出很多形式，均属于本申请的保护之内。

Claims (18)

  1. 一种界面显示方法，其特征在于，包括：
    电子设备基于第一显示窗口与目标应用的视图树，得到第一用户界面；其中，所述第一用户界面的宽度与所述第一显示窗口的宽度相同，所述第一用户界面的高度与所述第一显示窗口的高度相同；所述视图树中包括至少一个视图节点，所述第一用户界面中包括所述至少一个视图节点对应的控件；
    所述电子设备拉伸所述第一用户界面及所述第一用户界面中的各控件的宽度，得到第二用户界面；所述第二用户界面中的各控件的高度等于所述第一用户界面中的各控件的高度；
    所述电子设备将所述第二用户界面中的至少一个控件的宽度还原至与在第一用户界面中的宽度相同；
    所述电子设备在第二显示窗口显示所述第二用户界面；所述第二用户界面的宽度等于所述第二显示窗口的宽度，所述第二用户界面的高度等于所述第二显示窗口的高度；所述第二显示窗口的高度等于所述第一显示窗口的高度，所述第二显示窗口的宽度大于所述第一显示窗口的宽度。
  2. 根据权利要求1所述的方法，其特征在于，所述电子设备基于第一显示窗口与目标应用的视图树，得到第一用户界面之前，方法还包括：
    所述电子设备获取所述目标应用生成的所述视图树，所述视图树为所述目标应用基于所述电子设备传输给所述目标应用的窗口信息生成的，所述窗口信息用于指示所述第一显示窗口的宽度与高度。
  3. 根据权利要求1或2所述的方法，其特征在于，所述电子设备基于第一显示窗口与目标应用的视图树，得到第一用户界面，包括：
    所述电子设备获取所述至少一个视图节点中的每个视图节点的布局信息，所述布局信息用于指示所述每个视图节点在所述第一显示窗口中的大小与位置；
    所述电子设备基于所述每个视图节点的布局信息，生成所述第一用户界面。
  4. 根据权利要求3所述的方法，其特征在于，所述电子设备基于所述每个视图节点的布局信息，生成所述第一用户界面，包括：
    所述电子设备基于所述每个视图节点的布局信息，创建每个视图节点的画布，并在每个视图节点对应的画布上，绘制每个视图节点对应的控件内容以得到所述第一用户界面；其中，所述视图节点的根视图节点对应的画布的高度为所述第一用户界面的高度，所述根视图节点对应的画布的宽度为所述第一用户界面的宽度。
  5. 根据权利要求4所述的方法，其特征在于，所述电子设备拉伸所述第一用户界面及所述第一用户界面中的各控件的宽度，得到第二用户界面，包括：
    所述电子设备拉伸所述至少一个视图节点的画布的宽度以得到所述第二用户界面；其中，所述至少一个视图节点的画布中的控件内容随着画布拉伸而拉伸。
  6. 根据权利要求5所述的方法，其特征在于，所述视图树包括根视图节点以及多个子视图节点，所述电子设备将所述第二用户界面中的至少一个控件的宽度还原至与在第一用户界面中的宽度相同，包括：
    所述电子设备将所述第二用户界面中的至少一个子视图节点对应的画布的宽度还原至拉伸前的宽度；所述至少一个子视图节点属于所述多个子视图节点。
  7. 根据权利要求6所述的方法，其特征在于，所述至少一个子视图节点为文本类型和/或小图片类型；其中，所述小图片类型用于指示子视图节点对应的画布的宽度小于预设阈值，且子视图节点对应的控件内容为图片；所述文本类型用于指示子视图节点的画布的控件内容为文本。
  8. 根据权利要求5所述的方法，其特征在于，所述视图树中包括根节点和第一视图节点，所述第一视图节点为大图片类型的视图节点，所述大图片类型用于指示所述子视图节点对应的画布的宽度大于或等于预设阈值，且子视图节点对应的控件内容为图片；所述电子设备将所述第二用户界面中的至少一个控件的宽度还原至与在第一用户界面中的宽度相同，包括：
    将所述第一视图节点的控件内容还原至拉伸前的状态；其中，所述第一视图节点的画布的宽度为拉伸后的宽度，且还原后的所述第一视图节点的控件内容在所述第一视图节点的画布中居中显示；
    将所述第一视图节点的画布中除所述控件内容外的部分填充目标图像。
  9. 根据权利要求8所述的方法，其特征在于，所述目标图像与所述控件内容中的部分内容一致，或者，所述目标图像为所述控件内容中的部分内容进行高斯模糊处理后的图像。
  10. 根据权利要求1所述的方法，其特征在于，第一显示窗口的左边缘与所述第二显示窗口的左边缘对齐；所述方法还包括：
    接收对所述第二用户界面中的第二视图节点对应的控件的触摸操作；其中，所述触摸操作在所述第二显示窗口中的第一位置；所述第一位置与所述第二显示窗口的左边缘之间的距离为第一距离值，所述第一位置与所述第二显示窗口的上边缘之间的距离为第二距离值；
    确定所述第一位置映射在所述第一显示窗口中的第二位置；所述第二位置与所述第一显示窗口的左边缘之间的距离为第三距离值，所述第二位置与所述第一显示窗口的上边缘之间的距离为第四距离值；其中，所述第一距离值与所述第三距离值的比例等于所述第二显示界面的宽度与所述第一显示界面的宽度的比例；所述第二距离值等于所述第 四距离值；
    基于所述第二位置，确定所述触摸操作对应于所述第一显示窗口的第一用户界面中的所述第二视图节点。
  11. 根据权利要求1所述的方法，其特征在于，第一显示窗口的宽高比小于或等于0.5；第二显示窗口的宽高比大于0.5且小于或等于1。
  12. 根据权利要求1所述的方法，其特征在于，所述第二显示窗口在所述电子设备的屏幕中全屏显示。
  13. 根据权利要求1所述的方法，其特征在于，所述目标应用为所述电子设备中的任意第三方应用。
  14. 根据权利要求1所述的方法，其特征在于，所述电子设备为内折叠屏手机、外折叠屏手机、车载设备、可穿戴设备、和/或电视。
  15. 一种电子设备，其特征在于，包括：一个或多个存储器、可折叠显示屏和一个或多个处理器，所述一个或多个存储器与所述一个或多个处理器耦合，所述一个或多个存储器用于存储计算机程序代码，所述程序代码包括计算机指令，当所述一个或多个处理器执行所述计算机指令时，使得所述电子设备执行如权利要求1-14任一项所述的方法。
  16. 一种计算机存储介质，其特征在于，包括计算机指令，当所述计算机指令在电子设备上运行时，使得所述电子设备执行如权利要求1-14任一项所述的方法。
  17. 一种计算机程序产品，其特征在于，当所述计算机程序产品在计算机上运行时，使得所述计算机执行如权利要求1-14任一项所述的方法。
  18. 一种芯片，其特征在于，包括一个或多个接口电路和一个或多个处理器；所述接口电路用于从电子设备的存储器接收信号，并向所述处理器发送所述信号，所述信号包括存储器中存储的计算机指令；当所述处理器执行所述计算机指令时，使得所述电子设备执行权利要求1-14任一项所述的方法。
PCT/CN2023/082310 2022-03-23 2023-03-17 界面显示方法及电子设备 Ceased WO2023179501A1 (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
EP23773749.9A EP4471585A4 (en) 2022-03-23 2023-03-17 Interface display method and electronic device

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN202210286344.8 2022-03-23
CN202210286344.8A CN116841658A (zh) 2022-03-23 2022-03-23 界面显示方法及电子设备

Publications (1)

Publication Number Publication Date
WO2023179501A1 true WO2023179501A1 (zh) 2023-09-28

Family

ID=88099918

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2023/082310 Ceased WO2023179501A1 (zh) 2022-03-23 2023-03-17 界面显示方法及电子设备

Country Status (3)

Country Link
EP (1) EP4471585A4 (zh)
CN (1) CN116841658A (zh)
WO (1) WO2023179501A1 (zh)

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN117033844A (zh) * 2023-10-07 2023-11-10 之江实验室 一种画布元素布局方法、装置、存储介质及电子设备
CN117850775A (zh) * 2023-12-28 2024-04-09 福建联迪商用设备有限公司 一种金融终端响应式适配方法、系统及电子设备
WO2025086841A1 (zh) * 2023-10-25 2025-05-01 海信视像科技股份有限公司 一种显示设备及用于显示设备的动画显示方法

Families Citing this family (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN116132572B (zh) * 2022-04-20 2023-12-12 华为技术有限公司 界面显示方法及电子设备
CN118444805B (zh) * 2023-12-28 2025-04-25 荣耀终端股份有限公司 显示悬浮窗的方法及相关装置
CN119248387B (zh) * 2024-01-04 2025-12-30 荣耀终端股份有限公司 界面显示方法、电子设备和存储介质
CN117891552A (zh) * 2024-01-18 2024-04-16 维沃移动通信有限公司 界面显示方法、装置、电子设备及可读存储介质
CN118227004B (zh) * 2024-05-24 2024-11-01 深圳市新国都支付技术有限公司 一种基于OpenHarmony轻量系统弹窗的方法及相关装置
CN121070204A (zh) * 2024-05-28 2025-12-05 荣耀终端股份有限公司 图像处理方法和装置

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN108064369A (zh) * 2016-12-26 2018-05-22 深圳市柔宇科技有限公司 柔性显示屏的交互方法及装置
CN111966252A (zh) * 2020-05-14 2020-11-20 华为技术有限公司 应用窗口显示方法和电子设备
US11137894B1 (en) * 2020-05-27 2021-10-05 Microsoft Technology Licensing, Llc Optimizing content layout on a foldable device
CN114077429A (zh) * 2020-08-18 2022-02-22 华为技术有限公司 一种显示界面的布局方法及电子设备

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN108064369A (zh) * 2016-12-26 2018-05-22 深圳市柔宇科技有限公司 柔性显示屏的交互方法及装置
CN111966252A (zh) * 2020-05-14 2020-11-20 华为技术有限公司 应用窗口显示方法和电子设备
US11137894B1 (en) * 2020-05-27 2021-10-05 Microsoft Technology Licensing, Llc Optimizing content layout on a foldable device
CN114077429A (zh) * 2020-08-18 2022-02-22 华为技术有限公司 一种显示界面的布局方法及电子设备

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
See also references of EP4471585A4

Cited By (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN117033844A (zh) * 2023-10-07 2023-11-10 之江实验室 一种画布元素布局方法、装置、存储介质及电子设备
CN117033844B (zh) * 2023-10-07 2024-01-16 之江实验室 一种画布元素布局方法、装置、存储介质及电子设备
WO2025086841A1 (zh) * 2023-10-25 2025-05-01 海信视像科技股份有限公司 一种显示设备及用于显示设备的动画显示方法
CN117850775A (zh) * 2023-12-28 2024-04-09 福建联迪商用设备有限公司 一种金融终端响应式适配方法、系统及电子设备
CN117850775B (zh) * 2023-12-28 2025-12-05 福建联迪商用设备有限公司 一种金融终端响应式适配方法、系统及电子设备

Also Published As

Publication number Publication date
EP4471585A4 (en) 2025-05-21
EP4471585A1 (en) 2024-12-04
CN116841658A (zh) 2023-10-03

Similar Documents

Publication Publication Date Title
WO2023179501A1 (zh) 界面显示方法及电子设备
WO2021047251A1 (zh) 显示方法及电子设备
US20250013359A1 (en) Adaptive interface display method and terminal device
WO2018161957A1 (zh) 图层绘制控制方法、装置及移动终端
EP4411533A1 (en) Interface generation method and electronic device
US12608072B2 (en) Power consumption control method and electronic device
CN116166255B (zh) 界面生成方法及电子设备
WO2022242487A1 (zh) 显示方法及相关装置
CN116166256A (zh) 界面生成方法及电子设备
WO2023005751A1 (zh) 渲染方法及电子设备
WO2023001163A1 (zh) 一种可提升动效性能的屏幕刷新方法及设备
WO2023040666A1 (zh) 键盘显示方法、折叠屏设备和计算机可读存储介质
CN116700655B (zh) 一种界面显示方法及电子设备
US12493480B2 (en) Interface display method and electronic device
US20250383895A1 (en) Wallpaper Display Method and Electronic Device
WO2025130059A9 (zh) 一种界面显示方法、电子设备及存储介质
CN116719587A (zh) 屏幕显示方法、电子设备及计算机可读存储介质
CN116700850A (zh) 显示方法及电子设备
CN116166257A (zh) 界面生成方法及电子设备
US20250322812A1 (en) Projection display method, electronic device, and system
CN121996134A (zh) 显示方法、电子设备、介质及程序产品
CN121359099A (zh) 图层合成方法、终端设备及存储介质
CN120704780A (zh) 显示方法及相关设备
WO2023207694A1 (zh) 一种显示方法、装置及存储介质
CN117991961A (zh) 数据处理方法、设备及存储介质

Legal Events

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

Ref document number: 23773749

Country of ref document: EP

Kind code of ref document: A1

WWE Wipo information: entry into national phase

Ref document number: 2023773749

Country of ref document: EP

ENP Entry into the national phase

Ref document number: 2023773749

Country of ref document: EP

Effective date: 20240829

NENP Non-entry into the national phase

Ref country code: DE