WO2021027661A1 - 一种界面的动态布局方法及设备 - Google Patents

一种界面的动态布局方法及设备 Download PDF

Info

Publication number
WO2021027661A1
WO2021027661A1 PCT/CN2020/107185 CN2020107185W WO2021027661A1 WO 2021027661 A1 WO2021027661 A1 WO 2021027661A1 CN 2020107185 W CN2020107185 W CN 2020107185W WO 2021027661 A1 WO2021027661 A1 WO 2021027661A1
Authority
WO
WIPO (PCT)
Prior art keywords
interface
width
grid
electronic device
grids
Prior art date
Application number
PCT/CN2020/107185
Other languages
English (en)
French (fr)
Inventor
陈晓晓
王守诚
高璋
刘安琪
吴昊
杨启超
Original Assignee
华为技术有限公司
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by 华为技术有限公司 filed Critical 华为技术有限公司
Priority to CN202080052630.7A priority Critical patent/CN114365080A/zh
Priority to EP20852483.5A priority patent/EP3995948A4/en
Publication of WO2021027661A1 publication Critical patent/WO2021027661A1/zh
Priority to US17/667,778 priority patent/US11709688B2/en
Priority to US18/328,940 priority patent/US20240126574A1/en

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/34—Graphical or visual programming
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/0485—Scrolling or panning
    • G06F3/04855—Interaction with scrollbars
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/14—Digital output to display device ; Cooperation and interconnection of the display device with other functional units
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR 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
    • G—PHYSICS
    • G09—EDUCATION; CRYPTOGRAPHY; DISPLAY; ADVERTISING; SEALS
    • G09G—ARRANGEMENTS OR CIRCUITS FOR CONTROL OF INDICATING DEVICES USING STATIC MEANS TO PRESENT VARIABLE INFORMATION
    • G09G3/00—Control arrangements or circuits, of interest only in connection with visual indicators other than cathode-ray tubes
    • G09G3/20—Control arrangements or circuits, of interest only in connection with visual indicators other than cathode-ray tubes for presentation of an assembly of a number of characters, e.g. a page, by composing the assembly by combination of individual elements arranged in a matrix no fixed position being assigned to or needed to be assigned to the individual characters or partial characters
    • G09G3/2092—Details of a display terminals using a flat panel, the details relating to the control arrangement of the display terminal and to the interfaces thereto
    • G09G3/2096—Details of the interface to the display terminal specific for a flat panel
    • G—PHYSICS
    • G09—EDUCATION; CRYPTOGRAPHY; DISPLAY; ADVERTISING; SEALS
    • G09G—ARRANGEMENTS OR CIRCUITS FOR CONTROL OF INDICATING DEVICES USING STATIC MEANS TO PRESENT VARIABLE INFORMATION
    • G09G2340/00—Aspects of display data processing
    • G09G2340/04—Changes in size, position or resolution of an image
    • G—PHYSICS
    • G09—EDUCATION; CRYPTOGRAPHY; DISPLAY; ADVERTISING; SEALS
    • G09G—ARRANGEMENTS OR CIRCUITS FOR CONTROL OF INDICATING DEVICES USING STATIC MEANS TO PRESENT VARIABLE INFORMATION
    • G09G2340/00—Aspects of display data processing
    • G09G2340/14—Solving problems related to the presentation of information to be displayed
    • G—PHYSICS
    • G09—EDUCATION; CRYPTOGRAPHY; DISPLAY; ADVERTISING; SEALS
    • G09G—ARRANGEMENTS OR CIRCUITS FOR CONTROL OF INDICATING DEVICES USING STATIC MEANS TO PRESENT VARIABLE INFORMATION
    • G09G2354/00—Aspects of interface with display user

Definitions

  • the embodiments of the present application relate to the field of electronic technology, and in particular to a method and device for dynamic layout of an interface.
  • the display form of an electronic device involves factors such as the size, ratio, or resolution of the display screen.
  • different electronic devices such as mobile phones, tablet computers, TVs, and watches have different screen sizes and different display forms.
  • a mobile phone can have multiple screen ratios such as 16:9, 17:9, 18:9, 19:9, and 25:9, and thus can have multiple display forms.
  • the folding screen can also enable multiple different display forms on the same electronic device.
  • the interface development and design of an application faces the complex situation of different electronic devices or multiple display forms corresponding to the same electronic device.
  • application developers need to develop a set of interface layouts for each display form.
  • the development cost of the application is relatively large, and the packaging file of the application is also relatively large.
  • the embodiments of the present application provide a dynamic layout method and device for an interface, which can enable an electronic device to automatically dynamically lay out elements on an application program interface according to preset layout rules and current display forms, so that an application with a set of interface layouts
  • the program can adapt to different display forms for dynamic layout of elements and interfaces.
  • the technical solution of the present application provides a dynamic layout method of an interface, which is applied to an electronic device.
  • the electronic device includes a screen, the screen is used for interface display, and the width of the screen is divided into multiple grids.
  • the method includes: electronic device display The first interface. After detecting the interface refresh signal, the electronic device obtains the first grid number corresponding to the width of the second interface to be displayed after the refresh, where the first grid number is the number of grids included in the width of the second interface.
  • the electronic device determines the second grid number according to the layout rule corresponding to the first element on the second interface; the second grid number is the number of grids included in the width of the first element, and the layout rule includes the second grid number and the first element. Correspondence between the number of a grid.
  • the electronic device displays the second interface.
  • the electronic device can determine the width of the elements on the second interface according to the width of the second interface to be displayed by the application in different display forms, thereby dynamically laying out the elements on the second interface, that is, the second interface. Therefore, for an application with a set of interface layouts, different electronic devices or different display forms of the same electronic device can be adapted to dynamically layout the interface, and the user experience is higher.
  • the width of the screen also includes at least one space and two empty sides.
  • the space is the distance between two adjacent grids.
  • the empty side is the border on the left/right side of the screen and the nearest grid. the distance between.
  • the grid system divided in the embodiment of the present application may include a grid, the interval between the grids, and the empty edges on both sides of the grid.
  • the layout rule also includes the size of the interval and the size of the empty side.
  • the electronic device displays the second interface, including: the electronic device according to the width of the second interface, the size of the interval, the size of the empty side, and The first grid number determines the width of the grid.
  • the electronic device determines the width of the first element according to the number of the second grid, the width of the grid and the size of the interval.
  • the electronic device displays the second interface.
  • the electronic device can calculate the width dimension of the first element according to the number of second grids, such as the dp value of the width of the first element or the number of pixels, etc., so as to display on the screen.
  • the electronic device detects the interface refresh signal, including: the electronic device detects the operation of opening the application. Or, the electronic device detects that the width of the interface has changed.
  • the electronic device needs to refresh the interface. Or, when the electronic device detects that the width of the interface that needs to be displayed changes, the electronic device needs to refresh the interface.
  • the electronic device detects that the width of the interface changes, including: the electronic device detects that the display state is switched, and the display state includes a horizontal screen display state or a vertical screen display state.
  • the screen is a folding screen, and the electronic device detects that the folding state of the folding screen has changed.
  • the electronic device detects that the display mode is switched, and the display mode includes a full-screen display mode, a split-screen display mode, a picture-in-picture display mode, or a floating window display mode.
  • the first parameter is used to characterize the width of the second interface, and different intervals where the first parameter is located correspond to different first grid numbers.
  • the first parameter may be a dp value
  • the electronic device determines the number of grids according to the dp value, so that the display effects of the elements and the interface after dynamic layout according to the number of grids in different display modes can be more consistent.
  • the size, scale, display state or display mode of the screen is different, and the width of the second interface is also different.
  • width of the second interface such as the size, scale, display state, or display mode of the screen.
  • the electronic device determines the number of second grids according to the layout rules corresponding to the first element on the second interface, including: the application controls the first element to call the application programming interface API, and according to the first element The layout rule corresponding to one element determines the second grid number.
  • the application program calls an application programming interface API, and determines the second grid number according to the layout rule corresponding to the first element.
  • the application can control the first element to determine the number of grids occupied by the width of the first element, and the application itself can also directly determine the number of grids occupied by the width of the first element.
  • the first element is a grid bubble
  • the fifth preset value is greater than the third preset value
  • the sixth preset value is greater than the fourth preset value.
  • the layout rule includes the corresponding relationship between the second grid number and the first grid number, and the electronic device can determine the second grid number according to the layout rule, and obtain the size of the interval and the size of the empty side.
  • the second grid number is the fourth preset value, including: if the first grid number is the third preset value, And the ratio of the width to the height of the second interface is greater than the first preset ratio, and the second grid number is the fourth preset value. If the first grid number is the fifth preset value, and the ratio of the width to the height of the second interface is less than or equal to the first preset ratio, the second grid number is the sixth preset value, and the sixth preset value Greater than the fourth preset value.
  • the layout rule includes the number of second grids, the corresponding relationship between the number of first grids, and the ratio of the width to the height of the second interface.
  • the first element is a composite control
  • the composite control includes a first child element and a second child element
  • the layout rule corresponding to the composite control also includes the relative position of the first child element and the second child element. Correspondence with the width of the second interface.
  • the electronic device can also determine the relative positions of the first sub-element and the second sub-element according to the layout rules of the composite control, thereby dynamically laying out the first sub-element and the second sub-element.
  • the layout rules specifically include the relative position of the first and second sub-elements, the height and width of the first and second sub-elements, and the width and height of the second interface. Correspondence between.
  • the layout rule specifies the relative position of the first sub-element and the second sub-element, and is also related to the width and height of the second interface.
  • the composite control includes sub-element A and sub-element B.
  • W represents the width of the second interface
  • Width(A) represents the width of child element A
  • Width(B) represents the width of child element B.
  • H represents the height of the second interface
  • Height(A) represents the height of child element A
  • Height(B) represents the height of child element B
  • verticalMargin represents the size of the empty edge of the screen in the first direction.
  • the layout rule provides a specific dynamic layout method for composite controls.
  • the electronic device can adjust the arrangement and relative positions of the first sub-element and the second sub-element according to the layout rule.
  • the layout rules are written in a description file, or the layout rules are encapsulated in a function.
  • the electronic device can use the layout rule by running the description file or calling a function.
  • the layout rules are preset at the application framework layer of the electronic device.
  • each application can use the layout rules configured in the application framework layer to perform adaptive dynamic layout.
  • the layout rules are integrated in the application.
  • the application can be adaptively and dynamically laid out in accordance with the integrated layout rules under any electronic device or any display form.
  • an embodiment of the present application provides a response device, which is included in a first electronic device, a second electronic device, or a third electronic device.
  • the device has the function of realizing the behavior of the first electronic device, the second electronic device, or the third electronic device in any method in the foregoing aspects and possible designs.
  • This function can be realized by hardware, or by hardware executing corresponding software.
  • the hardware or software includes at least one module or unit corresponding to the above-mentioned functions. For example, application module or unit, control module or unit, grid management interface module or unit, grid resource calculation or unit, grid system configuration module or unit, etc.
  • an embodiment of the present application provides an electronic device, which includes: a screen whose width is divided into multiple grids; one or more processors; and a memory in which codes are stored.
  • the electronic device is caused to execute the dynamic layout method of the interface in any possible design of the above aspects.
  • an embodiment of the present application provides a computer storage medium, including computer instructions, which when the computer instructions run on a mobile terminal, cause the mobile terminal to execute any one of the above-mentioned aspects of the possible design of the interface dynamic layout method.
  • the embodiments of the present application provide a computer program product, which when the computer program product runs on a computer, causes the computer to execute any one of the above-mentioned aspects of the possible design interface dynamic layout method.
  • FIG. 1 is a schematic diagram of the hardware structure of an electronic device provided by an embodiment of the application.
  • 2A is a schematic diagram of the division of a grid system provided by an embodiment of this application.
  • 2B is a schematic diagram of the correspondence between the number of grids and the screen size provided by an embodiment of this application;
  • FIG. 3 is a schematic diagram of modules of a software system provided by an embodiment of the application.
  • FIG. 4 is a flowchart of a method for dynamic layout of an interface provided by an embodiment of the application.
  • FIG. 5 is a schematic diagram of the effect of a group of interface dynamic layout provided by an embodiment of the application.
  • FIG. 6 is a schematic diagram of the effect of another set of interface dynamic layout provided by an embodiment of the application.
  • FIG. 7 is a schematic diagram of the effect of another set of interface dynamic layout provided by an embodiment of the application.
  • FIG. 8 is a schematic diagram of the effect of another set of interface dynamic layout provided by an embodiment of the application.
  • FIG. 9 is a schematic diagram of the effect of another set of interface dynamic layout provided by an embodiment of the application.
  • FIG. 10 is a schematic diagram of the effect of another set of interface dynamic layout provided by an embodiment of the application.
  • FIG. 11 is a schematic diagram of the effect of another set of interface dynamic layout provided by an embodiment of this application.
  • FIG. 12 is a schematic diagram of the effect of another set of interface dynamic layout provided by an embodiment of this application.
  • FIG. 13 is a flowchart of another method for dynamic interface layout provided by an embodiment of the application.
  • FIG. 14 is a schematic diagram of the effect of another set of interface dynamic layout provided by an embodiment of the application.
  • 15 is a schematic diagram of the effect of another set of interface dynamic layout provided by an embodiment of the application.
  • 16 is a schematic diagram of the effect of another set of interface dynamic layout provided by an embodiment of the application.
  • FIG. 17 is a schematic diagram of modules of another software system provided by an embodiment of the application.
  • FIG. 18 is a flowchart of another interface dynamic layout method provided by an embodiment of the application.
  • an application program facing the complex situation of multiple display modes of electronic devices, an application program usually needs to develop a set of interface layouts for each display mode.
  • the Android system may use an XML file to represent the user interface (UI) structure of the application.
  • the XML file of the same application can include the XML file corresponding to the mobile phone, the XML file corresponding to the tablet computer, the XML file corresponding to the watch and the XML file corresponding to the TV, etc., to realize the difference on the mobile phone, tablet computer, watch and TV.
  • Interface layout effect Therefore, the development cost of the application program is relatively large, and the packaging file of the application program is also relatively large.
  • the embodiment of the present application provides a dynamic layout method of an interface, which can be applied to electronic devices.
  • the electronic device needs to refresh the interface, it can automatically dynamically layout the elements on the application program interface according to the preset layout rules and the current display form.
  • the interface is composed of elements
  • the dynamic layout of the elements on the interface can also dynamically layout the interface. Therefore, the method provided in the embodiments of the present application can achieve a set of application programs with a set of interface layouts for different display forms, and can achieve dynamic display effects of multiple interface layouts.
  • the application is only configured with a set of interface layouts, so the development cost and packaging files of the application are relatively small.
  • the electronic device may be a mobile phone, a tablet computer, a TV, a desktop computer, a wearable device (such as a watch), a vehicle-mounted device, an augmented reality (AR)/virtual reality (VR) device, a notebook computer, Ultra-mobile personal computer (UMPC), netbook or personal digital assistant (personal digital assistant, PDA) and other devices with display function.
  • a wearable device such as a watch
  • VR virtual reality
  • UMPC Ultra-mobile personal computer
  • PDA personal digital assistant
  • FIG. 1 shows a schematic structural diagram of the electronic device 100.
  • 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, and an antenna 2.
  • Mobile communication module 150 wireless communication module 160, audio module 170, speaker 170A, receiver 170B, microphone 170C, earphone jack 170D, sensor module 180, buttons 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 pressure sensor 180A, gyroscope sensor 180B, air pressure sensor 180C, magnetic sensor 180D, acceleration sensor 180E, distance sensor 180F, proximity light sensor 180G, fingerprint sensor 180H, temperature sensor 180J, touch sensor 180K, 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 (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.
  • AP application processor
  • modem processor modem processor
  • 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
  • NPU neural-network processing unit
  • the different processing units may be independent devices or integrated in one or more processors.
  • the controller may be the nerve center and command center of the electronic device 100.
  • the controller can generate operation control signals according to the instruction operation code and timing signals to complete the control of fetching and executing instructions.
  • a memory may also be provided in the processor 110 to store instructions and data.
  • the memory in the processor 110 is a cache memory.
  • the memory can store instructions or data that have just been used or recycled by the processor 110. If the processor 110 needs to use the instruction or data again, it can be directly called from the memory. Repeated accesses are avoided, the waiting time of the processor 110 is reduced, and the efficiency of the system is improved.
  • the processor 110 may include one or more interfaces.
  • the interface may include an integrated circuit (inter-integrated circuit, I2C) interface, an integrated circuit built-in audio (inter-integrated circuit sound, I2S) interface, a pulse code modulation (pulse code modulation, PCM) interface, and a universal asynchronous transmitter (universal asynchronous transmitter) interface.
  • I2C integrated circuit
  • I2S integrated circuit built-in audio
  • PCM pulse code modulation
  • PCM pulse code modulation
  • UART universal asynchronous transmitter
  • MIPI mobile industry processor interface
  • GPIO general-purpose input/output
  • SIM subscriber identity module
  • USB Universal Serial Bus
  • the I2C interface is a two-way synchronous serial bus, including a serial data line (SDA) and a serial clock line (SCL).
  • the processor 110 may include multiple sets of I2C buses.
  • the processor 110 may be coupled to the touch sensor 180K, charger, flash, camera 193, etc. through different I2C bus interfaces.
  • the processor 110 may couple the touch sensor 180K through an I2C interface, so that the processor 110 and the touch sensor 180K communicate through an I2C bus interface to implement the touch function of the electronic device 100.
  • the I2S interface can be used for audio communication.
  • the processor 110 may include multiple sets of I2S buses.
  • the processor 110 may be coupled with the audio module 170 through an I2S bus to realize communication between the processor 110 and the audio module 170.
  • the audio module 170 may transmit audio signals to the wireless communication module 160 through an I2S interface, so as to realize the function of answering calls through a Bluetooth headset.
  • the PCM interface can also be used for audio communication to sample, quantize and encode analog signals.
  • the audio module 170 and the wireless communication module 160 may be coupled through a PCM bus interface.
  • the audio module 170 may also transmit audio signals to the wireless communication module 160 through the PCM interface, so as to realize the function of answering calls through the Bluetooth headset. Both I2S interface and PCM interface can be used for audio communication.
  • the UART interface is a universal serial data bus used for asynchronous communication.
  • the bus can be a two-way communication bus. It converts the data to be transmitted between serial communication and parallel communication.
  • the UART interface is generally used to connect the processor 110 and the wireless communication module 160.
  • the processor 110 communicates with the Bluetooth module in the wireless communication module 160 through the UART interface to implement the Bluetooth function.
  • the audio module 170 may transmit audio signals to the wireless communication module 160 through a UART interface, so as to realize the function of playing music through a Bluetooth headset.
  • the MIPI interface can be used to connect the processor 110 with the display screen 194, the camera 193 and other peripheral devices.
  • the MIPI interface includes camera serial interface (camera serial interface, CSI), display serial interface (display serial interface, DSI), etc.
  • the processor 110 and the camera 193 communicate through a CSI interface to implement the shooting function of the electronic device 100.
  • the processor 110 and the display screen 194 communicate through a DSI interface to realize the display function of the electronic device 100.
  • the GPIO interface can be configured through software.
  • the GPIO interface can be configured as a control signal or as a data signal.
  • the GPIO interface can be used to connect the processor 110 with the camera 193, the display screen 194, the wireless communication module 160, the audio module 170, the sensor module 180, and so on.
  • GPIO interface can also be configured as I2C interface, I2S interface, UART interface, MIPI interface, etc.
  • the USB interface 130 is an interface that complies with the USB standard specification, and specifically may be a Mini USB interface, a Micro USB interface, a USB Type C interface, and so on.
  • the USB interface 130 can be used to connect a charger to charge the electronic device 100, and can also be used to transfer data between the electronic device 100 and peripheral devices. It can also be used to connect headphones and play audio through the headphones. This interface can also be used to connect other electronic devices, such as AR devices.
  • the interface connection relationship between the modules illustrated in the embodiment of the present application is merely a schematic description, and does not constitute a structural limitation of the electronic device 100.
  • the electronic device 100 may also adopt different interface connection modes in the foregoing embodiments, or a combination of multiple interface connection modes.
  • the charging management module 140 is used to receive charging input from the charger.
  • the charger can be a wireless charger or a wired charger.
  • the charging management module 140 may receive the charging input of the wired charger through the USB interface 130.
  • the charging management module 140 may receive the wireless charging input through the wireless charging coil of the electronic device 100. While the charging management module 140 charges the battery 142, it can also supply power to the electronic device through the power management module 141.
  • the power management module 141 is used to connect the battery 142, the charging management module 140 and the processor 110.
  • the power management module 141 receives input from the battery 142 and/or the charge management module 140, and supplies power to the processor 110, the internal memory 121, the external memory, the display screen 194, the camera 193, and the wireless communication module 160.
  • the power management module 141 can also be used to monitor parameters such as battery capacity, battery cycle times, and battery health status (leakage, impedance).
  • the power management module 141 may also be provided in the processor 110.
  • the power management module 141 and the charging management module 140 may also be provided in the same device.
  • the wireless communication function of the electronic device 100 can be implemented by the antenna 1, the antenna 2, the mobile communication module 150, the wireless communication module 160, the modem processor, and the baseband processor.
  • the antenna 1 and the antenna 2 are used to transmit and receive electromagnetic wave signals.
  • Each antenna in the electronic device 100 can be used to cover a single or multiple communication frequency bands. Different antennas can also be reused to improve antenna utilization.
  • antenna 1 can be multiplexed as a diversity antenna of a wireless local area network.
  • the antenna can be used in combination with a tuning switch.
  • the mobile communication module 150 can provide a wireless communication solution including 2G/3G/4G/5G and the like applied to the electronic device 100.
  • the mobile communication module 150 may include at least one filter, switch, power amplifier, low noise amplifier (LNA), etc.
  • the mobile communication module 150 can receive electromagnetic waves by the antenna 1, and perform processing such as filtering and amplifying the received electromagnetic waves, and then transmitting them to the modem processor for demodulation.
  • the mobile communication module 150 can also amplify the signal modulated by the modem processor, and convert it into electromagnetic waves for radiation via the antenna 1.
  • at least part of the functional modules of the mobile communication module 150 may be provided in the processor 110.
  • at least part of the functional modules of the mobile communication module 150 and at least part of the modules of the processor 110 may be provided in the same device.
  • the modem processor may include a modulator and a demodulator.
  • the modulator is used to modulate the low frequency baseband signal to be sent into a medium and high frequency signal.
  • the demodulator is used to demodulate the received electromagnetic wave signal into a low-frequency baseband signal. Then the demodulator transmits the demodulated low-frequency baseband signal to the baseband processor for processing.
  • the low-frequency baseband signal is processed by the baseband processor and then passed to the application processor.
  • the application processor outputs a sound signal through an audio device (not limited to the speaker 170A, the receiver 170B, etc.), or displays an image or video through the display screen 194.
  • the modem processor may be an independent device.
  • the modem processor may be independent of the processor 110 and be provided in the same device as the mobile communication module 150 or other functional modules.
  • 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) networks), bluetooth (BT), and global navigation satellites.
  • WLAN wireless local area networks
  • BT wireless fidelity
  • GNSS global navigation satellite system
  • FM frequency modulation
  • NFC near field communication technology
  • infrared technology infrared, IR
  • the wireless communication module 160 may be one or more devices integrating at least one communication processing module.
  • the wireless communication module 160 receives electromagnetic waves via the antenna 2, frequency modulates and filters the electromagnetic wave signals, and sends the processed signals to the processor 110.
  • the wireless communication module 160 can also receive the signal to be sent from the processor 110, perform frequency modulation, amplify it, and convert it into electromagnetic wave radiation via the antenna 2.
  • the antenna 1 of the electronic device 100 is coupled with the mobile communication module 150, and the antenna 2 is coupled with the wireless communication module 160, so that the electronic device 100 can communicate with the network and other devices through wireless communication technology.
  • Wireless communication technologies can include global system for mobile communications (GSM), general packet radio service (GPRS), code division multiple access (CDMA), and broadband code division. Multiple access (wideband code division multiple access, WCDMA), time-division code division multiple access (TD-SCDMA), long term evolution (LTE), BT, GNSS, WLAN, NFC, FM , And/or IR technology, etc.
  • GNSS can include global positioning system (GPS), global navigation satellite system (GLONASS), Beidou navigation satellite system (BDS), quasi-zenith satellite system (quasi-zenith) satellite system, QZSS) and/or satellite-based augmentation systems (SBAS).
  • GPS global positioning system
  • GLONASS global navigation satellite system
  • BDS Beidou navigation satellite system
  • QZSS quasi-zenith satellite system
  • SBAS satellite-based augmentation systems
  • the electronic device 100 implements a display function through a GPU, a display screen 194, and an application processor.
  • the GPU is a microprocessor for image processing, connected to the display 194 and the application processor.
  • the GPU is used to perform mathematical and geometric calculations for graphics rendering.
  • the processor 110 may include one or more GPUs, which execute program instructions to generate or change display information.
  • the display screen 194 is used to display images, videos, etc.
  • the display screen 194 includes a display panel.
  • the display panel can adopt liquid crystal display (LCD), organic light-emitting diode (OLED), active-matrix organic light-emitting diode or active-matrix organic light-emitting diode (active-matrix organic light-emitting diode).
  • LCD liquid crystal display
  • OLED organic light-emitting diode
  • active-matrix organic light-emitting diode active-matrix organic light-emitting diode
  • AMOLED flexible light-emitting diode (FLED), Miniled, MicroLed, Micro-oLed, quantum dot light-emitting diode (QLED), etc.
  • the electronic device 100 may include one or N display screens 194, and N is a positive integer greater than one.
  • the display screen 194 may be used to display the elements and interfaces of the application program after the dynamic layout according to the display form of the electronic device 100.
  • the display form of the electronic device 100 refers to the state when the electronic device 100 displays a user interface.
  • the size of the display screen 194, the ratio of the display screen 194, the resolution of the display screen 194, the display state or the display mode and other factors are different, and the display form of the electronic device 100 is also different.
  • the size of the display screen 194, the ratio of the display screen 194, the resolution of the display screen 194, the display state or the display mode are different, and the display form of the electronic device 100 is also different.
  • the width of the display screen 194 is different depending on the display form, and the width of the interface on the display screen 194 is also different.
  • the display mode may include a full-screen display mode, a split-screen display mode, a picture-in-picture display mode, or a floating window display mode.
  • the display state may include a horizontal screen display state or a vertical screen display state.
  • the electronic device 100 in the horizontal screen display state, can correspond to any display form; in the vertical screen display state, the electronic device 100 can correspond to another display form.
  • This element refers to a series of controls contained in the interface that meet the user's browsing or interaction needs.
  • the element may include controls such as bubbles, pop-up windows, buttons, cards, tabs, bottom navigation bar (or bottom tab), or a combination of controls.
  • the width of the display screen 194 may be divided into multiple columns.
  • the distance between the grid and the grid can be referred to as a gutter.
  • the distance between the left/right border of the display screen 194 and the nearest grid may be referred to as a margin.
  • the division of grids, spaces and empty edges forms a grid system. Among them, the size of each grid is the same, the size of each interval is the same, and the size of each empty side is also the same.
  • the width of the display screen 194 of the electronic device 100 may be divided into two empty edges, several grids and several spaces.
  • the number of grids divided by the width of the display screen 194 may be determined according to the width of the display screen 194.
  • the width of the display screen 194 is different, and the number of divided grids may also be different.
  • the width of the display screen 194 is different, so the number of grids divided by the width of the display screen 194 is also different.
  • the width of the display screen 194 is characterized by the physical size or the number of pixels.
  • the number of grids included in the width of the display screen 194 may be determined according to the physical size of the width of the display screen 194 or the number of pixels. The larger the physical size of the width of the display screen 194 or the number of pixels, the greater the number of grids included in the width of the display screen 194; the smaller the physical size of the width of the display screen 194 or the number of pixels, the smaller the display screen 194 The smaller the number of grids included in the width.
  • the electronic device in the posture shown in FIG. 2A is taken as an example for description.
  • the width of the display screen 194 is the length of the display screen 194 in the horizontal direction
  • the height of the display screen 194 is the length of the display screen 194 in the vertical direction.
  • the width of the display screen 194 is characterized by the dp value.
  • the dp value the number of pixels corresponding to the width of the display screen 194/pixel density (pixels per inch, PPI).
  • the pixel density of different display screens 194 is usually different. Therefore, even if the physical size or the number of pixels of the display screen 194 is the same, the display effect of the display screen 194 is different.
  • the dp values of the widths of different display screens 194 are the same, it can indicate that the display effects of different display screens 194 in the width direction are the same. Therefore, the number of grids is determined according to the dp value of the width of the display screen 194, so that the display effects of the elements and the interface after the dynamic layout according to the number of grids in different display modes can be more consistent.
  • the physical size of the width of the display screen 194 corresponding to the same display form, the number of pixels, the resolution, the horizontal/vertical screen display state and the display mode, etc. are the same, so the width of the display screen 194 corresponding to the same display form is the same.
  • the dp value is the same, and the number of grids included in the width of the interface to be displayed corresponding to the same display form is also the same. Different display forms can correspond to different grid numbers.
  • the number of grids on the electronic device 100 may be preset on the electronic device 100 at the factory, or may be calculated according to the resolution and pixel density of the display screen 194 after the electronic device 100 is started.
  • the following embodiments of the present application mainly take the determination of the number of grids according to the dp value of the width of the display screen 194 as an example for description.
  • different intervals of the dp value may correspond to different grid numbers.
  • Table 1 When the width of the display 194 is within the range of (0,320dp), the number of grids on the display 194 is 2; when the width of the display 194 is within the range of [320dp, 600dp), the grid of the display 194 The number of cells is 4.
  • the size of the width of the display screen 194 is within the range of [600dp, 840dp)
  • the number of grids included in the width of the interface to be displayed is 8.
  • the size of the width of the display screen 194 is greater than or equal to 840 dp, the number of grids of the display screen 194 is 12.
  • the physical size of the width of the display 194 of the watch may be 1-2 inches, in the range of (0,320 dp), including 2 grids.
  • the physical size of the width of the mobile phone display 194 can be 5-7 inches.
  • the width of the display 194 is within the range of [320dp, 600dp), including 4 grids; in the horizontal display state,
  • the size of the width of the display screen 194 is in the range of [600dp, 840dp), including 8 grids.
  • the physical size of the width of the display screen 194 of the folding screen device may be 7-8 inches.
  • the width of the folding screen is within the range of [600dp, 840dp), including 8 grids.
  • the physical size of the display 194 width of the tablet computer can be 8-11 inches.
  • the width of the display 194 is within the range of [600dp, 840dp), including 8 grids; in the horizontal display state below, the size of the width of the display screen 194 is within the range of [840dp, + ⁇ ), including 12 grids.
  • the physical size of the width of the display 194 of the TV can be 55 inches, in the range of [840dp, + ⁇ ), including 12 grids.
  • the grid system of the electronic device 100 may include multiple types, such as a basic grid system, a grid grid system, a pop-up grid system, or a card grid system.
  • the grid grid system can be used to assist the dynamic layout of grid grid layout.
  • the grid layout may be the layout of desktop icons or the layout of picture thumbnails.
  • the horizontal spacing between elements in the grid layout can be equal to the spacing.
  • the pop-up grid system can be used to assist the dynamic layout of pop-up windows.
  • the card grid system can be used to assist the dynamic layout of cards.
  • the basic grid system can be used as a general grid system to assist the dynamic layout of various elements of the interface.
  • Different types of grid systems correspond to different sizes of intervals or empty edges. Exemplarily, see Table 2 for the sizes of intervals or empty edges corresponding to different types of grid systems.
  • gutter and margin given in the embodiments of the present application are only examples, and may be other values, which are not limited by the embodiments of the present application. Moreover, even for the same type of grid system, the sizes of the gutter and margin corresponding to different display forms or different electronic devices 100 may be different.
  • the electronic device 100 can calculate the width of the grid according to the number of grids, and the size of the spacing and empty edges (or according to the grid system type). Therefore, the electronic device 100 can divide the display screen 194 of the electronic device 100 into a grid according to the number of grids, the width of the grid, the size of the interval, and the size of the space.
  • the electronic device 100 can implement a shooting function through an ISP, a camera 193, a video codec, a GPU, a display screen 194, and an application processor.
  • the ISP is used to process the data fed back from the camera 193. For example, when taking a picture, the shutter is opened, the light is transmitted to the photosensitive element of the camera through the lens, the light signal is converted into an electrical signal, and the photosensitive element of the camera transmits the electrical signal to the ISP for processing, which is converted into an image visible to the naked eye.
  • ISP can also optimize the image noise, brightness, and skin color. ISP can also optimize the exposure, color temperature and other parameters of the shooting scene.
  • the ISP may be provided in the camera 193.
  • the camera 193 is used to capture still images or videos.
  • the object generates an optical image through the lens and projects it to the photosensitive element.
  • the photosensitive element may be a charge coupled device (CCD) or a complementary metal-oxide-semiconductor (CMOS) phototransistor.
  • CMOS complementary metal-oxide-semiconductor
  • the photosensitive element converts the optical signal into an electrical signal, and then transmits the electrical signal to the ISP to convert it into a digital image signal.
  • ISP outputs digital image signals to DSP for processing.
  • DSP converts digital image signals into standard RGB, YUV and other formats.
  • the electronic device 100 may include 1 or N cameras 193, and N is a positive integer greater than 1.
  • Digital signal processors are used to process digital signals. In addition to digital image signals, they can also process other digital signals. For example, when the electronic device 100 selects the frequency point, the digital signal processor is used to perform Fourier transform on the energy of the frequency point.
  • Video codecs are used to compress or decompress digital video.
  • the electronic device 100 may support one or more video codecs. In this way, the electronic device 100 can play or record videos in a variety of encoding formats, such as: moving picture experts group (MPEG) 1, MPEG2, MPEG3, MPEG4, and so on.
  • MPEG moving picture experts group
  • NPU is a neural-network (NN) computing processor.
  • NN neural-network
  • the NPU can realize applications such as intelligent cognition of the electronic device 100, such as image recognition, face recognition, voice recognition, text understanding, and so on.
  • the external memory interface 120 may 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 realize the data storage function. For example, save music, video and other files in an external memory card.
  • the internal memory 121 may be used to store computer executable program code, and the executable program code includes instructions.
  • the processor 110 executes various functional applications and data processing of the electronic device 100 by running instructions stored in the internal memory 121.
  • the internal memory 121 may include a storage program area and a storage data area.
  • the storage program area can store an operating system, at least one application program (such as a sound playback function, an image playback function, etc.) required by at least one function.
  • the data storage area can store data (such as audio data, phone book, etc.) created during the use of the electronic device 100.
  • the internal memory 121 may include a high-speed random access memory, and may also include a non-volatile memory, such as at least one magnetic disk storage device, a flash memory device, a universal flash storage (UFS), etc.
  • UFS universal flash storage
  • the internal memory 121 may store layout rules.
  • the layout rule may be preset in the operating system of the electronic device 100, or may be integrated in a stored application program.
  • the processor 110 can dynamically lay out the elements on the application program interface according to the preset layout rules and the current display form of the display screen 194 when the application is refreshed, so as to adapt to different display forms to realize the dynamic layout of the interface .
  • the layout rules can be used to describe the correspondence between the width information of the elements on the interface and the width information of the interface to be displayed. Since the width of the display screen 194 is divided into grids, the width of the interface displayed on the display screen 194 or the interface to be displayed can also be represented by the number of grids occupied. For example, the layout rule is used to describe the correspondence between the width information of the elements on the interface and the number of grids included in the width of the interface to be displayed.
  • the processor 110 may determine the width information of the element on the interface to be displayed according to the number of grids included in the width of the interface to be displayed in the current display form and the corresponding relationship when the application is refreshing the interface, so as to dynamically lay out the element , Adaptive to different display forms to achieve dynamic layout of the interface.
  • the width information of the element on the interface may be represented by the number of grids included in the width of the element.
  • the layout rule is specifically used to describe the correspondence between the number of grids included in the width of the interface and the number of grids included in the width of the interface to be displayed.
  • the display form is related to the screen size, display state, display mode or resolution and other factors
  • the width of the interface to be displayed is related to the screen size, display state or display mode and other factors; therefore, the display form of the electronic device is different.
  • the width of the screen 194 is usually also different
  • the width of the interface to be displayed on the display screen 194 is usually also different
  • the number of grids included in the width of the interface to be displayed is also different.
  • the number of grids included in the width of the elements on the interface is also different, and the width information of the elements on the interface is also different.
  • the processor 110 may determine the width information of the elements on the interface according to the number of grids included in the width of the interface to be displayed after the refresh and the preset layout rules, so as to dynamically adjust the width of the elements. And, combined with the display position of the elements on the interface (for example, centered display, left display, or right display), the display effect of the elements and the interface is dynamically adjusted.
  • the processor 110 may determine that the interface refresh is required.
  • the electronic device detects an operation to open an application.
  • the operation may be an operation instructing a user to open a new application program, or an operation instructing the user to switch an application program from the background to the foreground, etc.
  • the electronic device detects that the width of the interface changes.
  • the screen is a folding screen, and the electronic device detects that the folding state of the folding screen has changed.
  • the electronic device detects that the display state is switched.
  • the electronic device detects that the display mode is switched.
  • the interface refresh scene can include, for example, a scene where an application is newly opened (that is, the scene where the application is initialized), the scene where the application is switched from the background to the foreground, the scene where the horizontal/vertical screen display state is switched, and the folding screen Scenes with state changes, full-screen/split-screen display mode switching scenes, picture-in-picture display mode and other display modes switching scenes, or floating window display mode and other display modes switching scenes, etc.
  • the interface refresh scene refers to a scene that requires dynamic layout of elements and interfaces.
  • the horizontal/vertical screen display state or display mode of the electronic device usually also changes.
  • the scene where the display state or display mode is switched is also the interface refresh scene. Therefore, the scene where the display form of the electronic device changes is usually an interface refresh scene.
  • the electronic device in the posture shown in FIG. 2A is mainly used as an example for description.
  • the width of the interface is the length of the interface in the horizontal direction
  • the height of the interface is the length of the interface in the vertical direction.
  • the width of the element is the length of the element in the horizontal direction
  • the height of the element is the length of the element in the vertical direction.
  • the layout rule may include the size of the interval and the size of the empty side, and the adjustment rule.
  • the size of the interval and the size of the space may correspond to the display form of the electronic device 100.
  • the size of the space and the size of the blank edge in the layout rule may also be different for different display forms.
  • the adjustment rule can be used to describe the correspondence between the width information of the elements on the interface and the width of the interface to be displayed.
  • the application can specify corresponding layout rules for different elements.
  • the electronic device 100 can determine the width information such as the number of grids included in the width of the element according to the adjustment rule.
  • the electronic device 100 can also determine the dp value or the number of corresponding pixels corresponding to the number of grids included in the width of the element to be displayed according to the size of the interval and the size of the space in the layout rule, thereby dynamically adjusting the width of the element to be displayed .
  • a layout rule can be:
  • margin 16dp; // indicates that the size of the empty side is 16dp;
  • the element width occupies 4 grids; // indicates the content of the adjustment rule;
  • the element width occupies 4 grids; // indicates the content of the adjustment rule;
  • the element width occupies 5 grids; // indicates the content of the adjustment rule.
  • the electronic device 100 may store definition information of various types of grid systems.
  • the electronic device 100 is provided with configuration tables of various types of grid systems.
  • the configuration table may be:
  • the parameter column in the embodiment of the present application represents the number of grids, and does not represent the width of the grids.
  • the size of the intervals and empty edges in the layout rule can be expressed by the type of grid system.
  • the above layout rules can be:
  • the element width occupies 4 grids
  • the element width occupies 4 grids
  • the element width occupies 5 grids.
  • the layout rules may include adjustment rules, but not the gap size and the empty edge size.
  • the application can specify corresponding layout rules.
  • the electronic device 100 can dynamically adjust the width of the element according to the layout rule.
  • the application can also specify the size of the gap and the size of the blank side.
  • different elements can use different gap sizes or blank edge sizes.
  • different types of elements can use different interval sizes or blank edge sizes; elements of the same type can use the same interval size and blank edge sizes (that is, the same type of grid system is used).
  • different interfaces can adopt different gap sizes or empty side sizes, and the same interface can adopt the same gap size and empty side sizes.
  • each interface of the same application program can adopt the same interval size and blank size.
  • the layout rules may exist in various forms on the electronic device 100.
  • the layout rules can be written in a description file, and the electronic device 100 can parse the layout rules in the description file after startup.
  • layout rules can also be encapsulated in functions.
  • Each set of layout rules can predefine a corresponding static variable to facilitate function calls. For example, you can macro-define the static variables corresponding to the layout rules:
  • TYPE_TOAST 0;//The macro defines a set of layout rules applied to pop-up windows;
  • TYPE_BUBBLE 1; //The macro defines a set of layout rules applied to bubbles;
  • the packaging function used to encapsulate the layout rules may be:
  • Column represents the number of grids included in the width of the interface to be displayed.
  • Result represents the number of grids included in the element width.
  • Return Column2Dp(result) means converting the number of grids included in the obtained pop-up window width into a dp value, so as to be drawn and displayed on the display screen 194.
  • the width information of the element can also be represented by other parameters, for example, it can also be represented by the dp value of the width of the element.
  • the layout rule is used to describe the correspondence between the dp value of the width of the element on the interface and the number of grids included in the width of the interface to be displayed.
  • the layout rules in the above-mentioned encapsulation function are described as examples including adjustment rules but not including margin and gutter sizes. It is understandable that the layout rules in the encapsulation function may also include the size of margin and gutter, which will not be repeated here.
  • the encapsulation function also includes the getMargin ⁇ function to obtain the size of the margin; it also includes the getGutter ⁇ function to obtain the size of the gutter.
  • the electronic device 100 can implement dynamic layout of elements in a variety of ways.
  • the electronic device 100 may also implement audio functions through the audio module 170, the speaker 170A, the receiver 170B, the microphone 170C, the earphone interface 170D, and the application processor. For example, music playback, recording, etc.
  • the audio module 170 is used to convert digital audio information into an analog audio signal for output, and is also used to convert an analog audio input into a digital audio signal.
  • the audio module 170 can also be used to encode and decode audio signals.
  • the audio module 170 may be provided in the processor 110, or part of the functional modules of the audio module 170 may be provided in the processor 110.
  • the speaker 170A also called a “speaker” is used to convert audio electrical signals into sound signals.
  • the electronic device 100 can listen to music through the speaker 170A, or listen to a hands-free call.
  • the receiver 170B also called “earpiece” is used to convert audio electrical signals into sound signals.
  • the electronic device 100 answers a call or voice message, it can receive the voice by bringing the receiver 170B close to the human ear.
  • the microphone 170C also called “microphone”, “microphone”, is used to convert sound signals into electrical signals.
  • the user can approach the microphone 170C through the mouth to make a sound, and input the sound signal to the microphone 170C.
  • the electronic device 100 may be provided with at least one microphone 170C. In other embodiments, the electronic device 100 may be provided with two microphones 170C, which can implement noise reduction functions in addition to collecting sound signals. In some other embodiments, the electronic device 100 can also be provided with three, four or more microphones 170C to collect sound signals, reduce noise, identify sound sources, and realize directional recording functions.
  • the earphone interface 170D is used to connect wired earphones.
  • the earphone interface 170D may be a USB interface 130, or a 3.5mm open mobile terminal platform (OMTP) standard interface, or a cellular telecommunications industry association (cellular telecommunications industry association of the USA, CTIA) standard interface.
  • OMTP open mobile terminal platform
  • CTIA cellular telecommunications industry association
  • the pressure sensor 180A is used to sense the pressure signal and can convert the pressure signal into an electrical signal.
  • the pressure sensor 180A may be provided on the display screen 194.
  • the capacitive pressure sensor may include at least two parallel plates with conductive material. When a force is applied to the pressure sensor 180A, the capacitance between the electrodes changes.
  • the electronic device 100 determines the intensity of the pressure according to the change in capacitance.
  • the electronic device 100 detects the intensity of the touch operation according to the pressure sensor 180A.
  • the electronic device 100 may also calculate the touched position according to the detection signal of the pressure sensor 180A.
  • touch operations that act on the same touch position but have different touch operation strengths may correspond to different operation instructions. For example: when a touch operation whose intensity is less than the first pressure threshold is applied to the short message application icon, an instruction to view the short message is executed. When a touch operation with a touch operation intensity greater than or equal to the first pressure threshold acts on the short message application icon, an instruction to create a new short message is executed.
  • the gyro sensor 180B may be used to determine the movement posture of the electronic device 100.
  • the angular velocity of the electronic device 100 around three axes ie, x, y, and z axes
  • the gyro sensor 180B can be used for image stabilization.
  • the gyro sensor 180B detects the shake angle of the electronic device 100, calculates the distance that the lens module needs to compensate according to the angle, and allows the lens to counteract the shake of the electronic device 100 through reverse movement to achieve anti-shake.
  • the gyro sensor 180B can also be used for navigation and somatosensory game scenes.
  • the gyroscope sensor 180B may be used to detect the rotation of the electronic device 100, so as to detect whether a scene that requires interface refresh such as a horizontal/vertical screen display state switch of the electronic device 100 occurs. In this way, the electronic device 100 dynamically lays out the elements and the interface in the interface refresh scenario.
  • the air pressure sensor 180C is used to measure air pressure.
  • the electronic device 100 calculates the altitude based on the air pressure value measured by the air pressure sensor 180C to assist positioning and navigation.
  • the magnetic sensor 180D includes a Hall sensor.
  • the electronic device 100 can use the magnetic sensor 180D to detect the opening and closing of the flip holster.
  • the electronic device 100 can detect the opening and closing of the flip according to the magnetic sensor 180D.
  • features such as automatic unlocking of the flip cover are set.
  • the acceleration sensor 180E can detect the magnitude of the acceleration of the electronic device 100 in various directions (generally three axes). When the electronic device 100 is stationary, the magnitude and direction of gravity can be detected. It can also be used to identify the posture of electronic devices, and used in applications such as horizontal and vertical screen switching, pedometers, etc.
  • the electronic device 100 can measure the distance by infrared or laser. In some embodiments, when shooting a scene, the electronic device 100 can use the distance sensor 180F to measure the distance to achieve fast focusing.
  • the proximity light sensor 180G may include, for example, a light emitting diode (LED) and a light detector such as a photodiode.
  • the light emitting diode may be an infrared light emitting diode.
  • the electronic device 100 emits infrared light to the outside through the light emitting diode.
  • the electronic device 100 uses a photodiode to detect infrared reflected light from nearby objects. When sufficient reflected light is detected, it can be determined that there is an object near the electronic device 100. When insufficient reflected light is detected, the electronic device 100 can determine that there is no object near the electronic device 100.
  • the electronic device 100 can use the proximity light sensor 180G to detect that the user holds the electronic device 100 close to the ear to talk, so as to automatically turn off the screen to save power.
  • the proximity light sensor 180G can also be used in leather case mode, and the pocket mode will automatically unlock and lock the screen.
  • the ambient light sensor 180L is used to sense the brightness of the ambient light.
  • the electronic device 100 can adaptively adjust the brightness of the display screen 194 according to the perceived brightness of the ambient light.
  • the ambient light sensor 180L can also be used to automatically adjust the white balance when taking pictures.
  • the ambient light sensor 180L can also cooperate with the proximity light sensor 180G to detect whether the electronic device 100 is in the pocket to prevent accidental touch.
  • the fingerprint sensor 180H is used to collect fingerprints.
  • the electronic device 100 can use the collected fingerprint characteristics to realize fingerprint unlocking, access application locks, fingerprint photographs, fingerprint answering calls, etc.
  • the temperature sensor 180J is used to detect temperature.
  • the electronic device 100 uses the temperature detected by the temperature sensor 180J to execute a temperature processing strategy. For example, when the temperature reported by the temperature sensor 180J exceeds a threshold value, the electronic device 100 executes to reduce the performance of the processor located near the temperature sensor 180J, so as to reduce power consumption and implement thermal protection.
  • the electronic device 100 when the temperature is lower than another threshold, the electronic device 100 heats the battery 142 to avoid abnormal shutdown of the electronic device 100 due to low temperature.
  • the electronic device 100 boosts the output voltage of the battery 142 to avoid abnormal shutdown caused by low temperature.
  • Touch sensor 180K also called “touch panel”.
  • the touch sensor 180K may be disposed on the display screen 194, and the touch screen is composed of the touch sensor 180K and the display screen 194, which is also called a “touch screen”.
  • the touch sensor 180K is used to detect touch operations acting on or near it.
  • the touch sensor can pass the detected touch operation to the application processor to determine the type of touch event.
  • the visual output related to the touch operation can be provided through the display screen 194.
  • the touch sensor 180K may also be disposed on the surface of the electronic device 100, which is different from the position of the display screen 194.
  • the touch sensor 180K may detect the user's operation of clicking an application icon, so that the electronic device 100 determines that the current application is the scene of opening the application, and thus the current is the interface refreshing scene. In this way, the electronic device 100 dynamically lays out the elements and the interface in the interface refresh scenario.
  • the bone conduction sensor 180M can acquire vibration signals.
  • the bone conduction sensor 180M can obtain the vibration signal of the vibrating bone mass of the human voice.
  • the bone conduction sensor 180M can also contact the human pulse and receive the blood pressure pulse signal.
  • the bone conduction sensor 180M may also be provided in the earphone, combined with the bone conduction earphone.
  • the audio module 170 can parse out the voice signal based on the vibration signal of the vibrating bone block of the voice obtained by the bone conduction sensor 180M to realize the voice function.
  • the application processor can analyze the heart rate information based on the blood pressure beating signal obtained by the bone conduction sensor 180M, and realize the heart rate detection function.
  • the button 190 includes a power button, a volume button, and so on.
  • the button 190 may be a mechanical button. It can also be a touch button.
  • the electronic device 100 may receive key input, and generate key signal input related to user settings and function control of the electronic device 100.
  • the motor 191 can generate vibration prompts.
  • the motor 191 can be used for incoming call vibration notification, and can also be used for touch vibration feedback.
  • touch operations applied to different applications can correspond to different vibration feedback effects.
  • Acting on touch operations in different areas of the display screen 194, the motor 191 can also correspond to different vibration feedback effects.
  • Different application scenarios for example: time reminding, receiving information, alarm clock, games, etc.
  • the touch vibration feedback effect can also support customization.
  • the indicator 192 may be an indicator light, which may be used to indicate the charging status, power change, or to indicate messages, missed calls, notifications, and so on.
  • the SIM card interface 195 is used to connect to the SIM card.
  • the SIM card can be inserted into the SIM card interface 195 or pulled out from the SIM card interface 195 to achieve contact and separation with the electronic device 100.
  • the electronic device 100 may support 1 or N SIM card interfaces, and N is a positive integer greater than 1.
  • the SIM card interface 195 can support Nano SIM cards, Micro SIM cards, SIM cards, etc.
  • the same SIM card interface 195 can insert multiple cards at the same time. The types of multiple cards can be the same or different.
  • the SIM card interface 195 can also be compatible with different types of SIM cards.
  • the SIM card interface 195 may also be compatible with external memory cards.
  • the electronic device 100 interacts with the network through the SIM card to implement functions such as call and data communication.
  • the electronic device 100 adopts an eSIM, that is, an embedded SIM card.
  • the eSIM card can be embedded in the electronic device 100 and cannot be separated from the electronic device 100.
  • the structure illustrated in the embodiment of the present application does not constitute a specific limitation on the electronic device 100.
  • the electronic device 100 may include more or fewer components than shown, or combine certain components, or split certain components, or arrange different components.
  • the illustrated components can be implemented in hardware, software, or a combination of software and hardware.
  • the display screen 194 may be divided into a grid system.
  • the internal memory 121 may store layout rules.
  • the layout rule can be used to describe the correspondence between the width information of the elements on the interface to be displayed and the number of grids included in the width of the interface to be displayed in the current display form.
  • the detection component in the electronic device 100 (for example, the gyroscope sensor 180B or the touch sensor 180K, etc.) can assist the electronic device 100 in detecting whether an interface refresh is currently required.
  • the processor 110 may determine the width information of the elements on the to-be-displayed interface according to the number of grids included in the width of the to-be-displayed interface in the current display form and the corresponding relationship when the application is refreshing the interface, and then dynamically layout the elements.
  • the application can be adapted to different display forms and achieve different interface layout effects.
  • the software system of the electronic device can adopt a layered architecture, event-driven architecture, micro-core architecture, micro-service architecture, or cloud architecture.
  • the embodiment of the present application takes the layered architecture shown in FIG. 3 as an example to illustrate the software structure of the electronic device 100.
  • the layered architecture divides the software into several layers, and each layer has a clear role and division of labor. Communication between layers through software interface.
  • the software system of the electronic device is divided into four layers of modules, from top to bottom, there are application programs, control modules, grid management interface modules, grid resource calculation modules, and grid system configuration modules.
  • the application can include a series of application packages.
  • the application package can include applications such as clock, settings, Bluetooth, music, camera, gallery, calendar, call, map, navigation, WLAN, video, SMS or WeChat.
  • the control module can be used to provide elements such as grid controls, general templates and composite controls.
  • the control module can obtain information such as the width of the element and the size of the empty side through the grid system management interface. Then, the control module can re-layout the size of the elements, or the relative positions of multiple elements in the composite control.
  • the grid management interface module can be used to obtain screen parameter information corresponding to the current display form, such as screen resolution, display mode, or screen width size, etc., and set the screen parameter information to the grid resource calculation module.
  • the grid management interface module can obtain the current sub-screen parameter information according to the screen parameter information corresponding to the current display form, and set it to the grid resource calculation module.
  • the screen may be the display screen 194 shown in FIG. 1 or a touch screen composed of the display screen 194 and the touch sensor 180K shown in FIG. 1.
  • the grid management interface module can also provide API interface and layout rule calls for the control module, and return the width of the element to the control module, such as the dp value corresponding to the width of the element or the number of pixels corresponding to the width of the element.
  • the grid resource calculation module can be used to accept the scheduling of the grid management system interface, obtain the relevant configuration information in the grid system configuration module according to the screen parameter information and layout rules corresponding to the current display form, and calculate the grid width and The width of the element.
  • the grid system configuration module is used to provide related configuration information of the grid system, such as the number of the first grid, the number of the second grid, the size of the interval and the size of the empty side.
  • the first number of grids is the number of grids included in the width of the interface to be displayed.
  • the second grid number is the number of grids included in the width of the element on the interface to be displayed.
  • the software module shown in FIG. 3 and the hardware module shown in FIG. 1 can cooperate with each other to realize the dynamic layout method of the interface of the electronic device provided in the embodiment of the present application.
  • the software system of the electronic device may have different module division modes, and may also include different software modules.
  • the operations performed by the electronic device are specifically operations performed by different software modules of the electronic device; the operations performed by the software modules of the electronic device are operations performed by the electronic device itself.
  • the method may include:
  • the application program displays the first interface.
  • the application can be a system application or a third-party application.
  • system applications may include desktop applications, settings applications, SMS applications, or clock applications;
  • third-party applications may include WeChat applications, browser applications, Weibo applications, or navigation applications.
  • the application program detects the interface refresh signal and notifies the control module.
  • the control module calls the grid management interface module to obtain the width of the element.
  • the width of the element may be the number of pixels corresponding to the width of the element, or size information such as the dp value corresponding to the width of the element.
  • the grid management interface module obtains the screen parameter information corresponding to the current display form, and notifies the grid resource calculation module of the screen parameter information corresponding to the current display form.
  • the screen parameter information may include information such as screen resolution, display mode, or size of the screen width.
  • the grid resource calculation module obtains the first grid number corresponding to the width of the second interface to be displayed in the current display form from the grid system configuration module.
  • the display form is related to factors such as screen size, display state, display mode or resolution, and the width of the interface to be displayed is also usually related to factors such as screen size, display state or display mode, the display form is different.
  • the width of is usually also different, and the number of first grids is also different.
  • the first grid number is configured in the grid system configuration module, and the grid resource calculation module can obtain the first grid number corresponding to the width of the second interface to be displayed in the current display form from the grid system configuration module in real time .
  • the grid resource calculation module obtains the second grid quantity corresponding to the first grid quantity from the grid system configuration module according to the layout rule corresponding to the element on the second interface to be displayed.
  • the second grid quantity is configured in the grid system configuration module, and the grid resource calculation module obtains the second grid quantity corresponding to the first grid quantity from the grid system configuration module according to the layout rule corresponding to the element.
  • the grid resource calculation module obtains the size of the empty edge and the size of the interval corresponding to the element from the grid system configuration module according to the layout rule corresponding to the element on the second interface to be displayed.
  • the layout rule corresponding to the element specifies the size of the empty side and the size of the interval, and the size of the empty side and the size of the interval are configured in the grid system configuration module.
  • the grid resource calculation module calculates the width of the grid according to the screen parameter information corresponding to the current display form, the number of the first grid, the size of the empty side and the size of the interval.
  • the grid resource calculation module can calculate the width of the grid in the grid system according to the screen parameter information corresponding to the current display form, the number of the first grid in the grid system, the size of the empty side and the size of the interval.
  • the width of the grid may specifically be the dp value corresponding to the width of the grid, or the number of pixels corresponding to the width of the grid.
  • the grid resource calculation module calculates the width of the element according to the width of the grid and the number of the second grid, and returns the width of the element to the grid management interface module.
  • the width of the element matches the number of the second grid.
  • the width of the element specifically includes the sum of the widths of the grids of the second number of grids, and the sum of the sizes of the intervals corresponding to the grids of the second number of grids.
  • the grid management interface module returns the width of the element to the control module.
  • the control module sets the width of the element according to the obtained width of the element.
  • the width of the element set by the control module is consistent with the width of the element obtained by the control module.
  • the application program displays a second interface, and the width of the element on the second interface is the width of the element set by the control module.
  • the application can dynamically set the width of the element to dynamically layout the element and the interface where the element is located.
  • control module may provide some grid controls.
  • Each type of grid control can have corresponding layout rules.
  • the grid control may include a grid pop-up window, a grid bubble, a grid button, or a grid card.
  • Applications can specify the use of these grid controls during interface design.
  • the application determines that an interface refresh occurs (that is, in the interface refresh scenario)
  • the grid control in the control module can be based on the current display form and the layout rules corresponding to the grid control.
  • the height of the grid control can be determined according to the content of the grid control to be displayed (that is, the size of the content information to be displayed), so that the grid control is sufficient to accommodate the content to be displayed specified by the application.
  • the operating system can notify the application, and the application can notify the grid control.
  • the grid control can determine the width information of the grid control according to the width of the interface to be displayed corresponding to the current display form and the layout rules corresponding to the grid control, so as to dynamically set the width of the grid control to realize the dynamics of the grid control and interface layout.
  • the width information of the grid control may include information such as the number of grids included in the width of the grid control, the dp value corresponding to the width of the grid control, and the number of pixels corresponding to the width of the grid control.
  • the grid control can determine the number of grids included in the width of the grid control according to the number of grids included in the width of the interface to be displayed corresponding to the current display form and the layout rules corresponding to the grid control.
  • the grid control can also determine the width of the grid according to the size of the spacing and empty edges in the layout rule, thereby determining the dp value or the number of pixels corresponding to the width of the grid control.
  • the dp value or the number of pixels corresponding to the width of the grid control can be used to represent the width of the actual grid control, so that the application can display the grid control on the screen.
  • the position of the grid control on the interface is specified by the application.
  • the application can dynamically control the display effect of the grid control.
  • the application can specify the position of the grid control on the interface as left display, right display, center display, the distance between the left border of the grid control and the left border of the screen, or the distance between the upper border of the grid control and the upper border of the screen, etc. .
  • the grid control is a grid popup.
  • the layout rule corresponding to the grid pop-up window may be:
  • the width of the interface to be displayed includes 4 grids, the width of the grid pop-up window occupies 4 grids;
  • the width of the grid pop-up window occupies 4 grids
  • the width of the grid pop-up window occupies 5 grids
  • the width of the interface to be displayed includes 12 grids, the width of the grid pop-up window occupies 5 grids.
  • the application is an application store
  • the electronic device is a mobile phone
  • the mobile phone is in a vertical screen display state.
  • the application store is opened.
  • the operating system notifies the application store to start running.
  • the app store needs to prompt the user to find a new version.
  • the app store specifies the use of grid pop-up windows to prompt users to discover new versions.
  • the interface refresh scene here refers to a scene where the interface of the application store is never displayed during initialization to the scene where the interface of the application store is displayed.
  • the grid pop-up window can use the method described in step 403 to step 411 to obtain the width of the grid pop-up window.
  • the application program displays the grid pop-up window according to the width information of the grid pop-up window and the position of the pop-up window.
  • the content to be displayed in the grid pop-up window is specified by the application store.
  • the grid pop-up window can call the grid management interface module, and the grid management interface module obtains the screen parameter information corresponding to the current display form, and The screen parameter information corresponding to the current display form is notified to the grid resource calculation module.
  • the grid resource calculation module can obtain the first grid number corresponding to the width of the interface to be displayed in the current display form from the grid system configuration module, and the first grid number is 4.
  • the grid resource calculation module obtains the second grid quantity corresponding to the first grid quantity from the grid system configuration module according to the layout rule corresponding to the grid pop-up window on the second interface to be displayed, and the second grid The number is 4.
  • the layout rule corresponding to the grid pop-up window on the second interface to be displayed by the grid resource calculation module is obtained from the grid system configuration module and the size of the empty side and the size of the interval corresponding to the grid pop-up window.
  • the size of the blank side is 16dp
  • the size of the gap is 16dp.
  • the grid resource calculation module calculates the width of the grid according to the screen parameter information corresponding to the current display form, the number of the first grid, the size of the empty side, and the size of the interval.
  • the grid resource calculation module calculates the width of the grid pop-up window according to the width of the grid and the second grid number, and returns the width of the grid pop-up window to the grid management interface module.
  • the grid management interface module returns the width of the grid pop-up window to the control module.
  • the control module sets the width of the grid pop-up window according to the obtained width of the grid pop-up window.
  • the displayed content in the grid pop-up window is used to prompt the user to find the relevant information of the new version.
  • the height of the grid pop-up window is determined according to the amount of content displayed in the grid pop-up window, so that the grid pop-up window is sufficient to accommodate the display content specified by the application store. If the display position of the grid pop-up window specified by the application store is centered, the display effect of the grid pop-up window can be seen in Figure 5 (b). As shown in (b) in Figure 5, the width of the grid pop-up window occupies 4 grids.
  • the width of the grid pop-up window includes the width of four adjacent grids and the size of the three spaces between the four grids.
  • the interface shown in (a) in FIG. 5 may be the first interface
  • the interface shown in (b) in FIG. 5 may be the second interface displayed after refreshing the first interface.
  • the grid control may include a resizable attribute.
  • the application can specify the resizable property of the grid control to be true (true) or false (false). If the application specifies that the resizable property of the grid control is true when the interface is refreshed, the grid control obtains the width of the grid control according to the layout rules, and resets the width of the grid control. For example, in the above application store scenario, when the interface is refreshed, if the resizable attribute of the grid pop-up window is true, the grid pop-up window determines the width of the grid pop-up window according to the corresponding layout rules.
  • the grid management interface module can Obtain the screen parameter information corresponding to the current display form and update it to the grid resource calculation module, so that the grid resource calculation module performs related calculations according to the current display form.
  • the grid management interface module can obtain display configuration information such as the number of pixels, the dp value, or the number of grids corresponding to the width of the interface to be displayed after the display form changes.
  • the operating system notifies the application store of a change in display form.
  • the application store notifies the grid pop-up window to refresh the interface.
  • the grid pop-up window adopts the method shown in step 403-step 411 to call the grid management interface module, grid resource calculation module, and grid system configuration module, thereby according to the first grid number and layout rules corresponding to the current display form, Determine the width information of the grid pop-up window.
  • the height and width of the interface to be displayed on the mobile phone are consistent with the height and width of the screen
  • the width of the interface to be displayed includes 8 grids
  • the ratio of the width to the height of the interface to be displayed is greater than 4:3 Therefore, according to the layout rules of the grid pop-up window, as shown in (c) in Figure 5, the width of the grid pop-up window occupies 4 grids.
  • the interface shown in (b) in FIG. 5 may be the first interface
  • the interface shown in (c) in FIG. 5 may be the second interface.
  • the width of the interface to be displayed is equal to the width of the screen
  • the height of the interface to be displayed is equal to the height of the screen. Therefore, in the full-screen display mode, the corresponding relationship between the number of grids included in the width of the elements on the interface described by the layout rules and the number of grids included in the width of the interface to be displayed can also be said to be included in the width of the elements on the interface Correspondence between the number of grids and the number of grids included in the width of the screen.
  • the electronic device is a tablet computer, and the display form of the tablet computer is different from the display form of the mobile phone.
  • the tablet detects that the user clicks on the icon of the app store, it starts to run and opens the app store. If the tablet computer is currently in portrait mode, the width of the tablet’s screen and interface occupies 8 grids in the current display mode, and the ratio of the width to the height of the screen and interface is less than or equal to 4:3, then according to the grid
  • the layout rule of the grid pop-up window is shown in Figure 6(a).
  • the grid pop-up window Since the second grid number is odd and the position of the grid pop-up window is centered, the left and right sides of the grid pop-up window are occupied respectively Half of the grid, the grid pop-up window overlaps with 6 grids, but the grid pop-up window includes 5 grids, that is, the grid pop-up window occupies 5 complete grid widths.
  • the width of the grid pop-up window includes the sum of the widths of 5 grids and the sum of the dimensions of 5 spaces between the 6 overlapping grids.
  • the application program can specify the display position of the grid pop-up window, and can also notify the grid resource calculation module of the display position of the grid pop-up window.
  • the grid resource calculation module can calculate the width of the grid pop-up window according to the display position, the number of second grids, the width of the grid, and the size of the interval.
  • the grid pop-up window starts from the first grid on the left side of the screen and occupies 5 grids to the right.
  • the width of the grid pop-up window is the width of 5 grids and the sum of the sizes of the 4 intervals between the 5 grids.
  • the grid pop-up window starts from the first grid on the right side of the screen and occupies 5 grids to the left .
  • the width of the grid pop-up window is the width of 5 grids and the sum of the sizes of the 4 intervals between the 5 grids.
  • the grid pop-up window is displayed in the middle position of the screen.
  • the left and right sides of the grid pop-up window occupies half of the grid respectively.
  • the grid pop-up window overlaps with 6 grids, and the 6 grids include 5 spaces; but the grid pop-up window includes the grid
  • the number is 5, that is, the grid pop-up window occupies 5 full grid widths.
  • the width of the grid pop-up window is the sum of the width of 5 grids and the size of 5 intervals.
  • the display form changes.
  • the screen width of the tablet computer and the width of the interface to be displayed occupy 12 grids. Therefore, according to the layout rules of the grid pop-up window, as shown in Figure 6 (b), the grid pop-up window The width takes up 5 grids.
  • the above description is based on the case where the grid pop-up window is used to prompt the discovery of a new version of the scene.
  • the grid pop-up window can also be used in other scenarios.
  • the grid pop-up window can also be used to remind the user of low battery scenarios, or remind the user whether to connect to the network.
  • the grid control is a grid bubble.
  • the layout rule corresponding to the grid bubble can be:
  • the width of the grid bubble can occupy up to 4 grids
  • the width of the grid bubble can occupy up to 4 grids
  • the width of the grid bubble can occupy up to 6 grids
  • the width of the interface to be displayed includes 12 grids, the width of the grid bubble can occupy up to 6 grids;
  • the width of the grid bubble occupies a minimum of 2 grids.
  • the application is WeChat
  • the electronic device is a tablet
  • the tablet is in a vertical screen display state.
  • the tablet displays the WeChat chat interface.
  • the WeChat chat interface includes message bubbles, and WeChat specifies that the message bubbles use grid bubbles.
  • the width of the tablet screen and interface includes 8 grids.
  • the second grid number of grid bubbles is 6. It should be noted that the second grid number of grid bubbles is the maximum number of grids that can be included in the width of the grid bubbles.
  • the width of the grid bubble occupies a minimum of 2 grids. The actual width of the grid bubble can be adjusted between the minimum width and the maximum width according to the content of the message. If the display position of the grid bubble specified by WeChat is to the right, the display effect of the grid bubble can be seen in Figure 7 (a).
  • the operating system notifies the WeChat display form to change, and the WeChat notification grid bubbles to refresh the interface.
  • the grid bubble adopts the method shown in step 403-step 411 to call the grid management interface module, the grid resource calculation module and the grid system configuration module, so that the number of grids corresponding to the current display form and the number of grid bubbles are called.
  • the layout rules determine the width information of the grid bubbles. In the horizontal display state, the width of the tablet screen and the interface to be displayed includes 12 grids. According to the layout rules of the grid bubbles, the width of the grid bubbles occupies a maximum of 6 grids. The display effect of the grid bubbles can be seen in Figure 7 (b).
  • the tablet computer detects the user's instruction to enter the split-screen display mode, the operating system notifies the WeChat display form to change, and the WeChat notifies the grid bubble to refresh the interface.
  • the tablet includes two sub-screens, which are used to display two different interfaces. For example, one sub-screen is used to display the interface of WeChat, and the other sub-screen displays the interface of other applications or other interfaces of WeChat.
  • the grid bubble obtains the first grid number corresponding to the width of the sub-screen 1 and the to-be-displayed interface of the sub-screen 1 where WeChat is located through the grid management interface module, the grid resource calculation module and the grid system configuration module, that is, the number of sub-screen 1 The number of grids included in the width of the interface to be displayed.
  • the dp value of the width of the screen and interface of the tablet computer is 720dp.
  • the number of pixels in the width of the two sub-screens is 360dp.
  • the width of the sub-screen 1 includes 4 grids.
  • the first grid number of the width is 4. If the number of the first grid in the current display mode is 4, combined with the layout rules of grid bubbles, the width of grid bubbles on the interface to be displayed in sub-screen 1 occupies a maximum of 4 grids.
  • the display effect of grid bubbles please refer to Figure 8.
  • the first grid number refers to the number of grids included in the width of the interface to be displayed in the sub-screen.
  • the first grid number is the number of grids included in the width of the interface to be displayed in the small window; for elements in a large window, the first The number of grids is the number of grids included in the width of the interface to be displayed in the large window.
  • the first number of grids refers to the number of grids included in the width of the interface to be displayed in the entire screen.
  • the display mode of the screen is the full-screen display mode.
  • the grid control is a grid button
  • the grid button includes a grid single button or a grid double button.
  • the layout rule corresponding to the grid single button is:
  • the width of the grid single button occupies 2 grids
  • the width of the grid single button occupies 3 grids
  • the width of the interface to be displayed includes 12 grids, the width of the grid single button occupies 4 grids.
  • the layout rules corresponding to the double grid buttons are:
  • the width of the grid double button occupies 4 grids
  • the width of the grid double button occupies 6 grids
  • the width of the interface to be displayed includes 12 grids, the width of the grid double button occupies 8 grids.
  • the application is an application store
  • the electronic device is a mobile phone
  • the mobile phone is in a vertical screen display state.
  • the operating system notifies the application store to start running.
  • the app store needs to prompt the user to find a new version.
  • the app store specifies the use of grid pop-ups and grid double buttons to prompt users to discover new versions.
  • For the dynamic layout of the grid pop-up window reference may be made to the description in the above embodiment. Here we mainly explain the dynamic layout of the grid double buttons.
  • the application store is initialized and the grid double button is notified to refresh the interface.
  • the grid double button obtains the first grid number corresponding to the current display form through the grid management interface module, grid resource calculation module and grid system configuration module.
  • the grid double button adopts the method shown in step 403-step 411 to call the grid management interface module, grid resource calculation module and grid system configuration module, so that according to the first grid number and the layout rule of the grid double button, Determine the width information of the grid double button.
  • the width of the mobile phone screen and interface includes 4 grids.
  • the width of the grid double button occupies 4 grids.
  • the display of the grid double button The effect can be seen in Figure 9 (a). If the user rotates the phone so that the phone is switched from the vertical display state to the horizontal display state, in the horizontal display state, the width of the phone screen and the interface to be displayed includes 8 grids, according to the layout rule of the grid double button , As shown in (b) in Figure 9, the width of the grid double button occupies 6 grids.
  • the grid control is a grid card.
  • the layout rule corresponding to the grid card is:
  • the width of the interface to be displayed includes 4 grids, the width of the grid card occupies 4 grids;
  • the width of the interface to be displayed includes 8 grids, the width of the grid card occupies 6 grids;
  • the width of the interface to be displayed includes 12 grids, the width of the grid card occupies 8 grids.
  • the electronic device is a mobile phone
  • the application is a status bar
  • the mobile phone is currently in a vertical screen display state.
  • the mobile phone detects that the user pulls down the status bar, it opens and displays the status bar.
  • the status bar specifies the use of grid cards for display.
  • the status bar notifies the grid card to refresh the interface.
  • the grid card adopts the method shown in step 403-step 411 to call the grid management interface module, the grid resource calculation module and the grid system configuration module, thereby according to the current display form corresponding to the first grid number and grid card
  • the layout rules determine the width information of the grid card.
  • the width of the to-be-displayed interface of the mobile phone includes 4 grids, according to the layout rule of the grid card, the width of the grid card used in the status bar occupies 4 grids. If the position of the grid card designated by the status bar is top and left and right centered, the display effect of the status bar can be seen in (a) in FIG. 10.
  • the operating system notifies the status bar display form to change.
  • the status bar notifies the grid card to refresh the interface.
  • the width of the mobile phone to be displayed interface occupies 8 grids. According to the layout rules of grid cards, as shown in Figure 10 (b), the width of the grid cards used in the status bar occupies 6 grids Grid.
  • the grid pop-up windows, grid bubbles, grid buttons, and grid cards are illustrated above.
  • the grid control can also include various other controls.
  • the top tab of today's headline as shown in (a) in FIG. 11 can also be a grid control.
  • the bottom tab of WeChat as shown in (b) of FIG. 11 may also be a grid control.
  • other grid controls are not described in detail.
  • an application with the same interface layout can automatically calculate the width information of the grid control according to the layout rules and the width of the interface to be displayed for different display forms, so as to be able to adapt to various display forms Perform dynamic layout of elements and interfaces.
  • the electronic device may provide some general templates.
  • the entity of the general template can be an empty control container or an empty layout container.
  • Applications can use these general templates during development, and fill content in the general templates without worrying about the size of the general templates.
  • Applications can implement various elements through general templates, especially elements with complex internal layouts, or some elements that cannot be used in grid controls.
  • the layout of the start-up wizard interface is not suitable for designing with grid controls.
  • the start-up wizard interface can be used as an element, and this element can be laid out using a common template.
  • the clock interface includes the dial and text information under the dial, and the layout is complicated.
  • the clock interface can be used as an element, and the element can be laid out using a common template.
  • the general template corresponds to corresponding layout rules.
  • the width information of the general template can be dynamically determined according to the layout rules set by the system.
  • the general template can dynamically determine the width information of the general template according to the corresponding layout rules, so that the dynamic layout adopts the elements of the general template.
  • the operating system can notify the application, and the application can notify the general template.
  • the general template can adopt the method shown in step 403-step 411 to call the grid management interface module, the grid resource calculation module and the grid system configuration module, so as to correspond to the width of the interface to be displayed corresponding to the current display form and the corresponding general template
  • the layout rules determine the width information of the universal template, so as to dynamically set the width of the universal template to realize the dynamic layout of elements and interfaces.
  • the height of the general template can be determined according to the amount of content to be displayed specified by the application, so that the general template is sufficient to accommodate the content to be displayed specified by the application.
  • the layout rule corresponding to a general template may be:
  • the width of the interface to be displayed includes 4 grids, the width of the general template occupies 4 grids;
  • the width of the interface to be displayed includes 8 grids, the width of the general template occupies 6 grids;
  • the width of the interface to be displayed includes 12 grids
  • the width of the general template occupies 8 grids.
  • the electronic device is a tablet computer
  • the application is a boot guide application
  • the tablet computer is currently in a vertical screen display state.
  • the tablet computer detects the user's startup operation, it runs the startup wizard application.
  • the boot wizard application specifies a universal template for interface display.
  • the operating system notifies the boot wizard to initialize the application.
  • the boot wizard application informs the general template to refresh the interface.
  • the general template adopts the method shown in step 403-step 411 to call the grid management interface module, the grid resource calculation module and the grid system configuration module, thereby according to the first grid number corresponding to the current display form and the layout rule of the general template , To determine the width information of the general template.
  • the width of the screen and interface of the tablet computer includes 8 grids, according to the layout rules of the universal template, the width of the universal template used in the boot wizard interface occupies 6 grids. If the position of the general template specified by the boot wizard application is centered, the display effect of the boot wizard interface can be seen in Figure 12 (a).
  • the operating system notifies the status bar display form to change.
  • the boot wizard application informs the general template to refresh the interface.
  • the width of the tablet screen and the interface to be displayed occupies 12 grids.
  • the width of the general template used in the boot wizard interface Occupies 8 grids.
  • applications with the same set of interface layouts can automatically calculate the width information of the elements using the common template for different display forms, according to the layout rules and the width of the interface to be displayed, so that they can adapt to various Display morphology for dynamic layout of elements and interfaces.
  • the electronic device may provide some API interfaces, and the application program may specify layout rules corresponding to different elements on the interface.
  • the operating system can notify the application.
  • the application can call the corresponding layout rules of different elements through these API interfaces, obtain the width information of the elements determined according to the layout rules, and then dynamically layout the elements and interfaces.
  • the height of the element can be determined according to the amount of content to be displayed specified by the application, so that the element is sufficient to accommodate the content to be displayed specified by the application.
  • the application when the application determines that the current interface refresh scene is present, it can directly call the API interface to determine the width of the element according to the current display form and preset layout rules.
  • step 402 in FIG. 4 can be replaced with:
  • the application program detects an interface refresh signal.
  • Step 403 in Figure 4 above can be replaced with:
  • the application program calls the grid management interface module to obtain the width of the element.
  • Step 410 in Figure 4 above can be replaced with:
  • the grid management interface module returns the width of the element to the application.
  • the method may further include step 1304:
  • the application program notifies the control module of the width of the element.
  • the application program can specify the layout rules of the grid pop-up windows described above.
  • the application can specify the layout rules of the grid pop-up windows described above.
  • the application can specify the layout rules for the grid buttons described above.
  • the application can specify the layout rules for the grid cards described above.
  • the application can specify the layout rules using the above-mentioned general templates.
  • the pseudo code for the application to call the corresponding layout rule through the API interface can be:
  • the operating system adjusts the function of the application to notify that the display configuration information (such as the dp value of the screen and the width of the interface to be displayed or the number of grids, etc.) has changed, that is, the display form has changed ;
  • Int newsize (type, layout rule layout rule)//The application calls the layout rule corresponding to the element in the API interface to obtain the width of the element;
  • the application is a shopping APP
  • the electronic device is a mobile phone
  • the mobile phone is in a vertical screen display state
  • the width of the mobile phone screen and interface includes 4 grids.
  • the mobile phone displays the address management interface of the shopping APP as shown in Figure 14 (a) and Figure 14 (b).
  • the address management interface includes grid cards and grid single buttons. As shown in (a) in Figure 14, the width of the card occupies 4 grids. As shown in (c) in Figure 14, the width of the grid single button occupies 2 grids. Comparing Figure 14 (a) and Figure 14 (b), it can be seen that grid cards and grid single buttons can adopt different types of grid systems.
  • the desktop is displayed, and the shopping APP switches to the background. Then, the user rotates the phone, and the phone switches from the vertical screen display state to the horizontal screen display state.
  • the width of the interface to be displayed includes 8 grids.
  • the shopping APP can call the grid management interface module.
  • the grid management interface module obtains the screen parameter information corresponding to the current display form, and notifies the grid resource calculation module of the screen parameter information corresponding to the current display form .
  • the grid resource calculation module can obtain the first grid number corresponding to the width of the interface to be displayed in the current display form from the grid system configuration module, and the first grid number is 8.
  • the grid resource calculation module obtains the second grid quantity corresponding to the first grid quantity from the grid system configuration module according to the layout rule corresponding to the grid card on the second interface to be displayed, and the second grid quantity For 6.
  • the layout rule corresponding to the grid card on the second interface to be displayed by the grid resource calculation module obtains the size of the empty side and the size of the interval corresponding to the grid card from the grid system configuration module.
  • the size of the blank side is 8dp
  • the size of the gap is 8dp.
  • the grid resource calculation module calculates the width of the grid according to the screen parameter information corresponding to the current display form, the number of the first grid, the size of the empty side, and the size of the interval.
  • the grid resource calculation module calculates the width of the grid card according to the width of the grid and the second grid number, and returns the width of the grid card to the grid management interface module.
  • the grid management interface module returns the width of the grid card to the application.
  • the application notifies the control module of the width of the grid card.
  • the control module sets the width of the grid card according to the width of the acquired grid card.
  • the schematic diagram of the grid card on the address management interface of the shopping APP can be seen in (c) in FIG. 14.
  • the shopping APP can obtain information such as the second grid number of the grid single button, the size of the interval, the size of the empty side, and the width of the grid single button.
  • the second grid number of a grid single button is 3, the size of the interval is 24dp, and the size of the blank side is 24dp.
  • the schematic diagram of the grid single button on the address management interface of the shopping APP can be seen in (d) in FIG. 14.
  • the application can obtain the size of the margin and gutter through the API interface, instead of obtaining the width information of the element, so as to adjust the position of the element on the interface according to the margin and gutter.
  • the electronic device can obtain the margin size according to the definition of the grid system, so as to adjust the position of the element to be displayed on the interface from the screen boundary according to the margin size.
  • the electronic device may provide some composite controls.
  • the composite control may include multiple elements (also called sub-elements), that is, the composite control is a control composed of multiple elements.
  • Each element of the plurality of elements may also include at least one child element. That is, each element in the composite control may also be a combination of multiple elements.
  • the composite control as a whole can also be considered as an element on the interface.
  • Composite controls have corresponding layout rules.
  • the layout rules corresponding to the composite control can be used to describe the relationship between the relative positions of multiple elements in the composite control and the width of the interface to be displayed in the current display form, that is, the relative relationship between multiple elements in the composite control Location change rules.
  • the layout rules corresponding to the composite control may also include the size change rules of the elements inside the composite control. Applications can use these composite controls for interface design. When the interface is refreshed, the electronic device can dynamically lay out the relative positions and sizes of elements in the composite control according to the layout rules corresponding to the composite control.
  • the layout rule corresponding to the composite control includes the relative position of the first element and the second element, the height and width of the first element and the second element, and the interface to be displayed in the current display form.
  • the composite control 1 includes element A and element B.
  • Element A and element B are set with width and height.
  • the element A and the element B can be arranged in a horizontal arrangement and a vertical arrangement. The two arrangement forms can be switched.
  • the composite control 1 can also be called a shift layout.
  • the layout rule for setting the arrangement of element A and element B corresponding to composite control 1 may be:
  • scroll bars can be embedded in the composite control container. A and element B can be scrolled.
  • Height(A) represents the height of element A in the vertical direction
  • Height(B) represents the height of element B in the vertical direction
  • verticalMargin represents the empty edge in the vertical direction, which is the content display area of the screen in the vertical direction and The minimum distance between screen borders.
  • the unit of W, Width(A), Width(B), Margin, H, Height(A), Height(B), and verticalMargin can be dp.
  • a clock application can use composite control 1
  • element A can be a dial
  • element B can be related text information under the dial.
  • a weather application may use composite control 1
  • element A may be a picture of weather conditions
  • element B may be a text description of weather conditions.
  • a mobile phone housekeeper can use composite control 1
  • element A can be an optimized detection dial
  • element B can be a control list.
  • the application is a mobile phone manager
  • the electronic device is a mobile phone
  • the mobile phone is in a vertical screen display state.
  • the optimized detection dial namely element A
  • the control list namely element B
  • the optimized detection dial and control list switch to a horizontal arrangement.
  • the width and height of element A can be replaced with the minimum width and minimum height of element A; the width of element B And height can be replaced with the minimum width and minimum height of element B, respectively.
  • the layout rules corresponding to the composite control 1 may also include rules for dynamically setting the actual width information of the element A and the element B.
  • the actual widths of element A and element B are respectively greater than their minimum widths.
  • the electronic device can dynamically determine the arrangement of the element A and the element B, and the actual size of the element A and the element B according to the layout rules of the composite control 1.
  • composite control 2 includes multiple elements such as A, B, C, D, etc.
  • the layout rule corresponding to composite control 2 may be:
  • the dp value of the width of the interface to be displayed is less than the preset value 1, multiple elements such as A, B, C, and D in the composite control 2 are displayed in one column;
  • the dp value of the width of the interface to be displayed is greater than or equal to the preset value 1, multiple elements such as A, B, C, and D in the composite control 2 are displayed in 2 columns.
  • the application is a contact application.
  • the dp value of the width of the interface to be displayed is less than the preset value 1, as shown in (a) in Figure 16, the contact list is displayed in one column.
  • the dp value of the width of the interface to be displayed is greater than or equal to the preset value 1, as shown in (b) of Figure 16, the contact list is displayed in 2 columns.
  • composite control can also be applied in other scenarios such as column division, and the embodiment of the present application will not give detailed examples.
  • applications with the same set of interface layouts can automatically calculate the width information of the composite control according to the layout rules and the width of the interface to be displayed for different display forms, so as to adapt to various display forms Perform dynamic layout of elements and interfaces.
  • an application with the same set of interface layouts can automatically calculate the interface on the interface according to the layout rules and the width of the interface to be displayed for different display forms.
  • Grid controls, elements using common templates, and the width of composite controls can adapt to various display forms for dynamic layout of elements and interfaces.
  • layout rules, types of elements that can be dynamically laid out, or application scenarios given in the embodiments of the present application are just examples. It is understandable that, based on the dynamic layout method of the interface provided in the embodiment of this application, there may be other layout rules, and it may also be applicable to other element types and application scenarios not mentioned in the above embodiments. I limited it.
  • the electronic device includes software modules that perform different functions.
  • Those skilled in the art can combine the embodiments to use different software modules for each specific application to implement the described functions, but such implementation should not be considered beyond the scope of the present application.
  • each function module may be divided corresponding to each function, or two or more functions may be integrated into one processing module.
  • the above integrated modules can be implemented in the form of hardware. It should be noted that the division of modules in this embodiment is illustrative, and is only a logical function division, and there may be other division methods in actual implementation.
  • the electronic device may include: a dynamic layout rule module, a dynamic layout animation module, a control package, an API acquisition module, and an application program.
  • the dynamic layout rule module can be used to define the corresponding grid system for electronic devices, including parameters such as the number of grids and the size of margin and gutter.
  • This module can also be used to define layout rules, such as defining corresponding layout rules for grid controls, general templates, and composite controls.
  • the module can determine the width information of the element (for example, the number of grids included in the width of the element) according to the width and layout rules of the interface to be displayed in the current display form.
  • the module can also determine the parameter information such as margin, gutter, and grid width that should be used in the current display form, so as to determine the dp value corresponding to the width of the element or other width information such as the number of pixels, and the display position of the element (e.g., element The distance from the screen boundary), etc.
  • the module can also determine whether the relative position of the elements in the composite control changes.
  • the dynamic layout animation module can be used for animation processing, providing common animation switching such as zooming or moving. For example, when the interface is refreshed, the layout of the elements and the interface changes, and the dynamic layout dynamic module can perform dynamic display for the change.
  • the screen It is not a direct jump, but a smooth transition process.
  • the element A shown in (a) in FIG. 15 is gradually rotated 90° to the left, and assumes the state shown in (b) in FIG. 15.
  • the element B shown in (a) in FIG. 15 moves smoothly to the right, and assumes a state as shown in (b) in FIG. 15.
  • Control encapsulation and API acquisition modules can be used to encapsulate layout rules and provide a set of function API application program calls, such as providing the function getMargin() for obtaining margin, and the function getGutter() for obtaining gutter to obtain the grid
  • the module can also directly provide some control groups, such as HwLinearLayout, HwRelativeLayout, HwFrameLayout, etc., to encapsulate functions such as getMargin(), getgutter(), getColumnWidth() and getLayoutSize().
  • control groups such as HwLinearLayout, HwRelativeLayout, HwFrameLayout, etc.
  • Applications can include multiple applications such as clock, camera, gallery, calendar, call, map, navigation, WLAN, Bluetooth, music, video, SMS or WeChat.
  • layout rules can be set in the operating system or integrated in the application program.
  • the dynamic layout rule module, the dynamic layout animation module, the control package and the API acquisition module may be located in the application framework layer of the operating system.
  • the dynamic layout rule module can provide definition and rule support for the layout rules encapsulated in the control package and API acquisition module.
  • the application can call the control package and API to obtain the layout rules provided by the module, and dynamically obtain the width information of the elements on the interface.
  • the dynamic layout animation module can display the interface dynamic effect according to the width information of the dynamically acquired element.
  • the electronic device can automatically dynamically lay out the elements on the application program interface according to preset layout rules and the current display form.
  • the layout rule indicates the correspondence between the number of grids included in the width of the element (ie the second grid number) and the number of grids included in the width of the interface to be displayed in the current display form (ie the first grid number)
  • the dynamic layout method of the interface provided by the embodiment of this application can be seen in FIG. 18:
  • the electronic device displays a first interface.
  • the first interface may be the interface before refresh.
  • the first interface may be the interface shown in (a) in FIG. 5.
  • the electronic device detects an interface refresh signal.
  • the corresponding interface refresh scene when the electronic device detects the interface refresh signal may be the scene of opening the application shown in (a) to (b) of FIG. 5.
  • the interface refreshing scene may be the horizontal/vertical screen display state switching scene shown in (b) to (c) in FIG. 5.
  • the interface refreshing scene may be the split-screen display mode switching scene shown in FIG. 8.
  • the electronic device obtains the first grid number corresponding to the width of the second interface to be displayed after refresh.
  • the number of first grids may be four.
  • the electronic device determines the number of second grids according to the layout rule corresponding to the first element on the second interface.
  • the second interface is a refreshed interface to be displayed
  • the layout rule includes the corresponding relationship between the number of second grids and the number of first grids.
  • the first element is a grid pop-up window
  • the second grid number of the grid pop-up window is four.
  • the electronic device displays the second interface.
  • the second interface includes the first element, and the width of the first element matches the number of the second grid.
  • the second interface may be the interface shown in (b) in FIG. 5, and the first element may be a grid pop-up window.
  • the first interface may be the interface shown in (a) in FIG. 7
  • the second interface may be the interface shown in (b) in FIG. 7
  • the first element may be a grid bubble.
  • the layout rule also includes the size of the interval and the size of the empty side.
  • the above step 1805 may specifically include:
  • the electronic device determines the width of the grid according to the width of the second interface, the size of the interval, the size of the empty side, and the number of the first grid.
  • the width of the second interface may specifically be the dp value corresponding to the width of the second interface, or the number of pixels corresponding to the width of the second interface.
  • the electronic device determines the width of the first element according to the number of second grids, the width of the grid, and the size of the interval.
  • the width of the first element may specifically be the dp value corresponding to the width of the first element, or the number of pixels corresponding to the width of the first element.
  • the width of the first element may include the sum of the widths of the adjacent second grids and the sum of the sizes of the intervals corresponding to the adjacent second grids.
  • the electronic device displays the second interface.
  • the second interface includes the first element
  • the electronic device may display the first element on the second interface according to the width of the first element determined in step 1805b.
  • the width of the grid pop-up window includes the width of 4 grids and the sum of the sizes of 3 spaces between the 4 grids.
  • the grid pop-up window overlaps with 6 grids, and the width of the grid pop-up window includes the width of 5 complete grids and the sum of the sizes of 5 spaces.
  • the 5 intervals are the intervals between 6 grids corresponding to the width of the 5 complete grids.
  • the electronic device can automatically dynamically lay out the elements and interfaces on the application program interface according to the current display form. Therefore, for different display forms, an application with a set of interface layouts can realize dynamic display effects of multiple interface layouts.
  • the same electronic device can dynamically lay out elements on the application program interface according to preset layout rules and the current display form.
  • an application with a set of interface layouts can achieve dynamic display effects of multiple interface layouts.
  • Different electronic devices can dynamically lay out elements on the application program interface according to preset layout rules and the display form of the electronic device. In this way, it can be achieved that for different display forms of different electronic devices, an application with a set of interface layouts can achieve dynamic display effects of multiple interface layouts.
  • the width information of the element can be dynamically determined according to the layout rule corresponding to the width of the element, and the height of the element can be determined according to the content of the element to be displayed specified by the application program.
  • the height information of the element can also be dynamically determined according to the layout rule corresponding to the vertical direction.
  • the above-mentioned column divided by the width of the screen may be called a horizoncolumn.
  • the above-mentioned gutter divided for the width of the screen can be called a horizont.
  • the foregoing margin divided for the width of the screen may be called horizonmargin.
  • the type of grid system used for the height of the same element may be the same or different from the type of grid system used for the width of the element.
  • the column divided by the height of the screen can be called a verticalcolumn.
  • the gutter divided by the height of the screen can be called a verticalgutter.
  • the margin divided by the height of the screen can be called a verticalmargin.
  • the screen of the electronic device may include two vertical margins, several vertical columns and several vertical gutters in the vertical direction.
  • verticalmargin is the distance between the screen border and the nearest verticalcolumn.
  • Vertialgutter refers to the distance between verticalcolumn and verticalcolumn.
  • the screen is divided into grids on the width
  • the electronic device is preset with layout rules corresponding to the width of the element
  • the electronic device dynamically determines the width information of the element according to the layout rule corresponding to the width of the element as an example. of. Similar to the layout rules corresponding to the width of the element, the screen can also be divided into grids at the height.
  • the electronic device may also preset layout rules corresponding to the height of the element (for example, layout rules corresponding to elements such as grid controls, general templates, and composite controls), and dynamically determine the height information of the element according to the layout rules corresponding to the height of the element.
  • the layout rule corresponding to the height of the element can be set together with the layout rule corresponding to the width of the element, or can be set separately from the layout rule corresponding to the width of the element.
  • the layout rules corresponding to the height of the element can also be set in the description file or encapsulated in the function.
  • the height information of the element on the interface to be displayed in the application can be dynamically determined according to the layout rules corresponding to the height of the element, and the width information of the element can be determined according to the content of the element to be displayed specified by the application. to make sure.
  • the layout rules provided by the electronic device can be set in the operating system and shared by all applications.
  • Each application can only set a set of interface layouts.
  • Each application can specify the element to use grid controls, general templates or composite controls, etc., so as to determine the size of the elements according to the layout rules corresponding to the grid controls, general templates or composite controls provided by the operating system for different display forms.
  • Dynamic layout of elements and interfaces Compared with multiple sets of interface layouts in the prior art, the development cost of the application program is lower, and the packaging file of the application program is also smaller.
  • the layout rules provided by the electronic device may be integrated in the application program.
  • the application can only set a set of interface layouts.
  • the application can specify the element to use grid control, general template or composite control, etc., so as to determine the size of the element according to the layout rules corresponding to the grid control, general template or composite control provided by the application for different display forms, and realize the element And the dynamic layout of the interface.
  • the information volume of the layout rules is small, and the data space occupied is also small. Therefore, compared with multiple sets of interface layouts in the prior art, the development cost of the application program is lower, and the packaging file of the application program is also smaller.
  • the embodiment of the present application also provides an electronic device, including a screen, the width of the screen is divided into multiple grids; one or more processors; a memory; and one or more computer programs.
  • One or more computer programs are stored in the memory, and the one or more computer programs include instructions.
  • the electronic device is caused to execute each step in the foregoing embodiment, so as to realize the dynamic layout method of the foregoing interface.
  • the embodiments of the present application also provide a computer storage medium, the computer storage medium stores computer instructions, when the computer instructions run on the electronic device, the electronic device executes the above-mentioned related method steps to realize the dynamics of the interface in the above-mentioned embodiment Layout method.
  • the embodiments of the present application also provide a computer program product, which when the computer program product runs on a computer, causes the computer to execute the above-mentioned related steps to realize the dynamic layout method of the interface in the above-mentioned embodiment.
  • the embodiment of the present application also provides a device, which may specifically be a chip system.
  • the chip system is applied to electronic equipment.
  • the chip system includes one or more interface circuits and one or more processors; the interface circuit and the processor are interconnected by wires; the interface circuit is used to receive signals from the memory of the electronic device and send signals to the processor.
  • the signals include The computer instructions stored in the memory; when the processor executes the computer instructions, the electronic device executes the above-mentioned related steps to realize the dynamic layout method of the interface in the above-mentioned embodiment.
  • the embodiments of the present application also provide a device, which may specifically be a component or a module.
  • the device may include a connected processor and a memory; wherein the memory is used to store computer execution instructions.
  • the processor When the device is running, the processor The computer-executable instructions stored in the executable memory can be executed to make the chip execute the dynamic layout method of the interface in the foregoing method embodiments.
  • the electronic devices, chips, computer storage media, computer program products, or chips provided in the embodiments of the present application are all used to execute the corresponding methods provided above. Therefore, the beneficial effects that can be achieved can refer to the above provided The beneficial effects in the corresponding method are not repeated here.
  • the disclosed device and method may be implemented in other ways.
  • the device embodiments described above are merely illustrative.
  • the division of the modules or units is only a logical function division.
  • there may be other division methods for example, multiple units or components may be It can be combined or integrated into another device, or some features can be omitted or not implemented.
  • the displayed or discussed mutual coupling or direct coupling or communication connection may be indirect coupling or communication connection through some interfaces, devices or units, and may be in electrical, mechanical or other forms.
  • the units described as separate parts may or may not be physically separate.
  • the parts displayed as units may be one physical unit or multiple physical units, that is, they may be located in one place, or they may be distributed to multiple different places. . Some or all of the units may be selected according to actual needs to achieve the objectives of the solutions of the embodiments.
  • each unit in each embodiment of the present application may be integrated into one processing unit, or each unit may exist alone physically, or two or more units may be integrated into one unit.
  • the above-mentioned integrated unit can be implemented in the form of hardware or software functional unit.
  • the integrated unit is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a readable storage medium.
  • the technical solutions of the embodiments of the present application are essentially or the part that contributes to the prior art, or all or part of the technical solutions can be embodied in the form of software products, which are stored in a storage medium.
  • a device which may be a single-chip microcomputer, a chip, etc.
  • a processor processor
  • the aforementioned storage media include: U disk, mobile hard disk, read only memory (read only memory, ROM), random access memory (random access memory, RAM), magnetic disk or optical disk and other media that can store program codes.

Abstract

一种界面的动态布局方法及设备，涉及电子技术领域，能够根据预设的布局规则和当前显示形态，自动对界面上的元素进行动态布局，使得具有一套界面布局的应用程序，能够自适应不同的显示形态进行元素和界面的动态布局。具体方案为：电子设备屏幕的宽度划分为多个栅格，电子设备显示第一界面，在检测到界面刷新信号后，获取刷新后待显示的第二界面的宽度对应的第一栅格数量，第一栅格数量为第二界面的宽度包括的栅格数量；根据第二界面上的第一元素对应的布局规则，确定第二栅格数量；第二栅格数量为第一元素的宽度包括的栅格数量；电子设备显示第二界面。用于界面的动态布局。

Description

一种界面的动态布局方法及设备
本申请要求于2019年8月9日提交国家知识产权局、申请号为201910736677.4、申请名称为“一种界面的动态布局方法及设备”的中国专利申请的优先权，其全部内容通过引用结合在本申请中。
技术领域
本申请实施例涉及电子技术领域，尤其涉及一种界面的动态布局方法及设备。
背景技术
随着电子技术的发展，电子设备的显示形态越来越多样化。电子设备的显示形态涉及显示屏幕的尺寸、比例或分辨率等因素。例如，手机、平板电脑、电视和手表等不同电子设备的屏幕尺寸不同，显示形态也不同。再例如，手机可以有16:9，17:9，18:9，19:9以及25:9等多种屏幕比例，从而可以有多种显示形态。折叠屏也可以使得同一个电子设备上具有多种不同的显示形态。
一个应用程序的界面开发和设计，面临不同电子设备或同一电子设备对应的多种显示形态的复杂情况。为适应不同的显示形态，应用程序的开发者需要为每一种显示形态分别开发一套界面布局。应用程序的开发成本较大，应用程序的打包文件也较大。
发明内容
本申请实施例提供一种界面的动态布局方法及设备，能够使得电子设备根据预设的布局规则和当前显示形态，自动对应用程序界面上的元素进行动态布局，使得具有一套界面布局的应用程序，能够自适应不同的显示形态进行元素和界面的动态布局。
为达到上述目的，本申请实施例采用如下技术方案：
一方面，本申请技术方案提供了一种界面的动态布局方法，应用于电子设备，电子设备包括屏幕，屏幕用于界面显示，屏幕的宽度划分为多个栅格，该方法包括：电子设备显示第一界面。电子设备检测到界面刷新信号后，获取刷新后待显示的第二界面的宽度对应的第一栅格数量，第一栅格数量为第二界面的宽度包括的栅格数量。电子设备根据第二界面上的第一元素对应的布局规则，确定第二栅格数量；第二栅格数量为第一元素的宽度包括的栅格数量，布局规则包括第二栅格数量与第一栅格数量之间的对应关系。电子设备显示第二界面。
这样，电子设备可以根据不同显示形态下，应用程序待显示的第二界面的宽度，确定第二界面上元素的宽度，从而动态布局第二界面上的元素即第二界面。因而，对于具有一套界面布局的应用程序，可以自适应不同电子设备或同一电子设备的不同显示形态进行界面动态布局，用户使用体验较高。
在一种可能的设计中，屏幕的宽度还包括至少一个间隔和两个空边，间隔为相邻两个栅格之间的距离，空边为屏幕左/右侧的边界与最近的栅格之间的距离。
也就是说，本申请实施例中划分的栅格系统可以包括栅格，栅格之间的间隔，以及栅格两边的空边。
在另一种可能的设计中，布局规则还包括间隔的尺寸和空边的尺寸，电子设备显示第二界面，包括：电子设备根据第二界面的宽度，间隔的尺寸，空边的尺寸，以及第一栅格数量，确定栅格的宽度。电子设备根据第二栅格数量，栅格的宽度和间隔的尺寸，确定第一元素的宽度。电子设备显示第二界面。
也就是说，电子设备可以根据第二栅格数量计算第一元素的宽度尺寸，例如第一元素的宽度的dp值或像素点的数量等，以便在屏幕上进行显示。
在另一种可能的设计中，电子设备检测到界面刷新信号，包括：电子设备检测到打开应用程序的操作。或者，电子设备检测到界面的宽度发生变化。
可以理解的是，在用户打开新的应用程序，或者将程序从后台切换到前台后，电子设备需要进行界面刷新。或者，当电子设备检测到需要显示的界面的宽度发生变化时，电子设备需要进行界面刷新。
在另一种可能的设计中，电子设备检测到界面的宽度发生变化，包括：电子设备检测到显示状态发生切换，显示状态包括横屏显示状态或竖屏显示状态。或者，屏幕为折叠屏，电子设备检测到折叠屏的折叠状态发生变化。或者，电子设备检测到显示模式发生切换，显示模式包括全屏显示模式、分屏显示模式、画中画显示模式或悬浮窗显示模式。
可以理解的是，在横/竖屏切换，显示模式切换，或折叠屏折叠状态发生变化时，界面的显示的宽度也会相应变化，电子设备需要进行界面刷新。
在另一种可能的设计中，第一参数用于表征第二界面的宽度，第一参数所在的不同区间对应不同的第一栅格数量。
例如，该第一参数可以是dp值，电子设备根据dp值来确定栅格数量，可以使得不同显示形态下，根据栅格数量动态布局后的元素和界面的显示效果更为一致。
在另一种可能的设计中，屏幕的尺寸、比例、显示状态或显示模式不同，第二界面的宽度也不同。
可以理解的是，影响第二界面的宽度的因素可以有多种，例如屏幕的尺寸、比例、显示状态或显示模式等。
在另一种可能的设计中，电子设备根据第二界面上的第一元素对应的布局规则，确定第二栅格数量，包括：应用程序控制第一元素调用应用程序编程接口API，并根据第一元素对应的布局规则，确定第二栅格数量。或者，应用程序调用应用程序编程接口API，并根据第一元素对应的布局规则，确定第二栅格数量。
也就是说，应用程序可以控制第一元素来确定第一元素的宽度占用的栅格数量，应用程序自身也可以直接来确定第一元素的宽度占用的栅格数量。
在另一种可能的设计中，第一元素为栅格气泡，栅格气泡对应的布局规则包括：空边的尺寸＝第一预设值；间隔的尺寸＝第二预设值；若第一栅格数量为第三预设值，则第二栅格数量为第四预设值；若第一栅格数量为第五预设值，则第二栅格数量为第六预设值，第五预设值大于第三预设值，第六预设值大于第四预设值。
这样，布局规则包括第二栅格数量和第一栅格数量的对应关系，电子设备可以根据该布局规则确定第二栅格数量，并获取间隔的尺寸和空边的尺寸。
在另一种可能的设计中，若第一栅格数量为第三预设值，则第二栅格数量为第四 预设值，包括：若第一栅格数量为第三预设值，且第二界面的宽度和高度的比值大于第一预设比例，则第二栅格数量为第四预设值。若第一栅格数量为第五预设值，且第二界面的宽度和高度的比值小于或者等于第一预设比例，则第二栅格数量为第六预设值，第六预设值大于第四预设值。
在该方案中，布局规则包括第二栅格数量，与第一栅格数量，以及第二界面的宽度和高度的比值之间对应关系。
在另一种可能的设计中，第一元素为复合控件，复合控件包括第一子元素和第二子元素；复合控件对应的布局规则还包括第一子元素和第二子元素的相对位置，与第二界面的宽度之间的对应关系。
这样，电子设备还可以根据复合控件的布局规则，确定第一子元素和第二子元素的相对位置，从而动态布局第一子元素和第二子元素。
在另一种可能的设计中，布局规则具体包括，第一子元素和第二子元素的相对位置，与第一子元素和第二子元素的高度和宽度，以及第二界面的宽度和高度之间的对应关系。
在该方案中，布局规则规定了第一子元素和第二子元素的相对位置，还与第二界面的宽度和高度相关联。
在另一种可能的设计中，复合控件包括子元素A和子元素B布局规则包括：在子元素A和子元素B沿第一方向排列时，若W>＝Width(A)+Width(B)+Margin，则子元素A和子元素B切换为沿第二方向排列；其中，W表示第二界面的宽度，Width(A)表示子元素A的宽度，Width(B)表示子元素B的宽度。在子元素A和子元素B沿第二方向排列时，若W＜Width(A)+Width(B)+Margin，则子元素A和子元素B切换为沿第一方向排列。并且，在子元素A和子元素B沿第一方向时，若H<Height(A)+Height(B)+vertialMargin,则复合控件中嵌入滚动条，滚动条用于滚动显示子元素A和子元素B；其中，H表示第二界面的高度，Height(A)表示子元素A的高度，Height(B)表示子元素B的高度，vertialMargin表示屏幕在第一方向上的空边的尺寸。
该布局规则提供了一种具体的复合控件的动态布局方式。电子设备可以根据该布局规则，调整第一子元素和第二子元素的排列方式及相对位置。
在另一种可能的设计中，从权：布局规则写在描述文件中，或者，布局规则封装在函数中。
这样，电子设备可以通过运行描述文件，或者调用函数来使用该布局规则。
在另一种可能的设计中，布局规则预设在电子设备的应用程序框架层。
这样，各应用程序均可以使用该应用程序框架层中配置的布局规则，进行自适应动态布局。
在另一种可能的设计中，布局规则集成在应用程序中。
这样，应用程序在任一电子设备或任一显示形态下，均可以根据集成的布局规则进行自适应动态布局。
另一方面，本申请实施例提供了一种响应装置，该装置包含在第一电子设备、第二电子设备或第三电子设备中。该装置具有实现上述方面及可能的设计中任一方法中第一电子设备、第二电子设备或第三电子设备行为的功能。该功能可以通过硬件实现， 也可以通过硬件执行相应的软件实现。硬件或软件包括至少一个与上述功能相对应的模块或单元。例如，应用程序模块或单元、控件模块或单元、栅格管理接口模块或单元、栅格资源计算或单元以及栅格系统配置模块或单元等。
另一方面，本申请实施例提供了一种电子设备，包括：屏幕，该屏幕的宽度划分为多个栅格；一个或多个处理器；以及存储器，存储器中存储有代码。当代码被一个或多个处理器执行时，使得电子设备执行上述方面任一项可能的设计中的界面的动态布局方法。
另一方面，本申请实施例提供了一种计算机存储介质，包括计算机指令，当计算机指令在移动终端上运行时，使得移动终端执行上述方面任一项可能的设计中的界面的动态布局方法。
又一方面，本申请实施例提供了一种计算机程序产品，当计算机程序产品在计算机上运行时，使得计算机执行上述方面任一项可能的设计中的界面的动态布局方法。
附图说明
图1为本申请实施例提供的一种电子设备的硬件结构示意图；
图2A为本申请实施例提供的一种栅格系统的划分示意图；
图2B为本申请实施例提供的一种栅格数量与屏幕尺寸的对应关系示意图；
图3为本申请实施例提供的一种软件系统的模块示意图；
图4为本申请实施例提供的一种界面动态布局的方法流程图；
图5为本申请实施例提供的一组界面动态布局的效果示意图；
图6为本申请实施例提供的另一组界面动态布局的效果示意图；
图7为本申请实施例提供的另一组界面动态布局的效果示意图；
图8为本申请实施例提供的另一组界面动态布局的效果示意图；
图9为本申请实施例提供的另一组界面动态布局的效果示意图；
图10为本申请实施例提供的另一组界面动态布局的效果示意图；
图11为本申请实施例提供的另一组界面动态布局的效果示意图；
图12为本申请实施例提供的另一组界面动态布局的效果示意图；
图13为本申请实施例提供的另一种界面动态布局的方法流程图；
图14为本申请实施例提供的另一组界面动态布局的效果示意图；
图15为本申请实施例提供的另一组界面动态布局的效果示意图；
图16为本申请实施例提供的另一组界面动态布局的效果示意图；
图17为本申请实施例提供的另一种软件系统的模块示意图；
图18为本申请实施例提供的另一种界面动态布局的方法流程图。
具体实施方式
下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行描述。其中，在本申请实施例的描述中，除非另有说明，“/”表示或的意思，例如，A/B可以表示A或B；本文中的“和/或”仅仅是一种描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。另外，在本申请实施例的描述中，“多个”是指两个或多于两个。
现有技术中，面对电子设备具有的多种显示形态的复杂情况，应用程序通常需要 为每一种显示形态分别开发一套界面布局。以安卓系统为例，安卓系统可以采用XML文件来表示应用程序的用户界面(user interface，UI)构成。同一应用程序的XML文件，可以包括手机对应的XML文件，平板电脑对应的XML文件，手表对应的XML文件以及电视对应的XML文件等，以分别实现在手机，平板电脑，手表和电视上的不同界面布局效果。因而，应用程序的开发成本较大，应用程序的打包文件也较大。
本申请实施例提供了一种界面的动态布局方法，可以应用于电子设备。电子设备在需要进行界面刷新时，可以根据预设的布局规则和当前的显示形态，自动对应用程序界面上的元素进行动态布局。其中，由于界面是由元素构成的，对界面上的元素进行动态布局，也就可以对界面进行动态布局。因此，本申请实施例提供的方法可以达到，针对不同显示形态，具有一套界面布局的应用程序，可以实现多种界面布局的动态显示效果。应用程序只配置有一套界面布局，因而应用程序的开发成本和打包文件都较小。
例如，该电子设备可以是手机、平板电脑、电视、台式计算机、可穿戴设备(例如手表)、车载设备、增强现实(augmented reality，AR)/虚拟现实(virtual reality，VR)设备、笔记本电脑、超级移动个人计算机(ultra-mobile personal computer，UMPC)、上网本或个人数字助理(personal digital assistant，PDA)等具有显示功能的设备。本申请实施例对电子设备的具体类型不作任何限制。
示例性的，图1示出了电子设备100的一种结构示意图。电子设备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)等。其中，不同的处理单元可以是独立的器件，也可以集成在一个或多个处理器中。
其中，控制器可以是电子设备100的神经中枢和指挥中心。控制器可以根据指令操作码和时序信号，产生操作控制信号，完成取指令和执行指令的控制。
处理器110中还可以设置存储器，用于存储指令和数据。在一些实施例中，处理器110中的存储器为高速缓冲存储器。该存储器可以保存处理器110刚用过或循环使用的指令或数据。如果处理器110需要再次使用该指令或数据，可从存储器中直接调用。避免了重复存取，减少了处理器110的等待时间，因而提高了系统的效率。
在一些实施例中，处理器110可以包括一个或多个接口。接口可以包括集成电路(inter-integrated circuit，I2C)接口，集成电路内置音频(inter-integrated circuit sound，I2S)接口，脉冲编码调制(pulse code modulation，PCM)接口，通用异步收发传输器(universal asynchronous receiver/transmitter，UART)接口，移动产业处理器接口(mobile industry processor interface，MIPI)，通用输入输出(general-purpose input/output，GPIO)接口，用户标识模块(subscriber identity module，SIM)接口，和/或通用串行总线(universal serial bus，USB)接口等。
I2C接口是一种双向同步串行总线，包括一根串行数据线(serial data line，SDA)和一根串行时钟线(derail clock line，SCL)。在一些实施例中，处理器110可以包含多组I2C总线。处理器110可以通过不同的I2C总线接口分别耦合触摸传感器180K，充电器，闪光灯，摄像头193等。例如：处理器110可以通过I2C接口耦合触摸传感器180K，使处理器110与触摸传感器180K通过I2C总线接口通信，实现电子设备100的触摸功能。
I2S接口可以用于音频通信。在一些实施例中，处理器110可以包含多组I2S总线。处理器110可以通过I2S总线与音频模块170耦合，实现处理器110与音频模块170之间的通信。在一些实施例中，音频模块170可以通过I2S接口向无线通信模块160传递音频信号，实现通过蓝牙耳机接听电话的功能。
PCM接口也可以用于音频通信，将模拟信号抽样，量化和编码。在一些实施例中，音频模块170与无线通信模块160可以通过PCM总线接口耦合。在一些实施例中，音频模块170也可以通过PCM接口向无线通信模块160传递音频信号，实现通过蓝牙耳机接听电话的功能。I2S接口和PCM接口都可以用于音频通信。
UART接口是一种通用串行数据总线，用于异步通信。该总线可以为双向通信总线。它将要传输的数据在串行通信与并行通信之间转换。在一些实施例中，UART接口通常被用于连接处理器110与无线通信模块160。例如：处理器110通过UART接口与无线通信模块160中的蓝牙模块通信，实现蓝牙功能。在一些实施例中，音频模块170可以通过UART接口向无线通信模块160传递音频信号，实现通过蓝牙耳机播放音乐的功能。
MIPI接口可以被用于连接处理器110与显示屏194，摄像头193等外围器件。MIPI接口包括摄像头串行接口(camera serial interface，CSI)，显示屏串行接口(display serial interface，DSI)等。在一些实施例中，处理器110和摄像头193通过CSI接口通信，实现电子设备100的拍摄功能。处理器110和显示屏194通过DSI接口通信，实现电子设备100的显示功能。
GPIO接口可以通过软件配置。GPIO接口可以被配置为控制信号，也可被配置为数据信号。在一些实施例中，GPIO接口可以用于连接处理器110与摄像头193，显示屏194，无线通信模块160，音频模块170，传感器模块180等。GPIO接口还可以被配置为I2C接口，I2S接口，UART接口，MIPI接口等。
USB接口130是符合USB标准规范的接口，具体可以是Mini USB接口，Micro USB接口，USB Type C接口等。USB接口130可以用于连接充电器为电子设备100充电，也可以用于电子设备100与外围设备之间传输数据。也可以用于连接耳机，通过耳机 播放音频。该接口还可以用于连接其他电子设备，例如AR设备等。
可以理解的是，本申请实施例示意的各模块间的接口连接关系，只是示意性说明，并不构成对电子设备100的结构限定。在本申请另一些实施例中，电子设备100也可以采用上述实施例中不同的接口连接方式，或多种接口连接方式的组合。
充电管理模块140用于从充电器接收充电输入。其中，充电器可以是无线充电器，也可以是有线充电器。在一些有线充电的实施例中，充电管理模块140可以通过USB接口130接收有线充电器的充电输入。在一些无线充电的实施例中，充电管理模块140可以通过电子设备100的无线充电线圈接收无线充电输入。充电管理模块140为电池142充电的同时，还可以通过电源管理模块141为电子设备供电。
电源管理模块141用于连接电池142，充电管理模块140与处理器110。电源管理模块141接收电池142和/或充电管理模块140的输入，为处理器110，内部存储器121，外部存储器，显示屏194，摄像头193，和无线通信模块160等供电。电源管理模块141还可以用于监测电池容量，电池循环次数，电池健康状态(漏电，阻抗)等参数。在其他一些实施例中，电源管理模块141也可以设置于处理器110中。在另一些实施例中，电源管理模块141和充电管理模块140也可以设置于同一个器件中。
电子设备100的无线通信功能可以通过天线1，天线2，移动通信模块150，无线通信模块160，调制解调处理器以及基带处理器等实现。
天线1和天线2用于发射和接收电磁波信号。电子设备100中的每个天线可用于覆盖单个或多个通信频带。不同的天线还可以复用，以提高天线的利用率。例如：可以将天线1复用为无线局域网的分集天线。在另外一些实施例中，天线可以和调谐开关结合使用。
移动通信模块150可以提供应用在电子设备100上的包括2G/3G/4G/5G等无线通信的解决方案。移动通信模块150可以包括至少一个滤波器，开关，功率放大器，低噪声放大器(low noise amplifier，LNA)等。移动通信模块150可以由天线1接收电磁波，并对接收的电磁波进行滤波，放大等处理，传送至调制解调处理器进行解调。移动通信模块150还可以对经调制解调处理器调制后的信号放大，经天线1转为电磁波辐射出去。在一些实施例中，移动通信模块150的至少部分功能模块可以被设置于处理器110中。在一些实施例中，移动通信模块150的至少部分功能模块可以与处理器110的至少部分模块被设置在同一个器件中。
调制解调处理器可以包括调制器和解调器。其中，调制器用于将待发送的低频基带信号调制成中高频信号。解调器用于将接收的电磁波信号解调为低频基带信号。随后解调器将解调得到的低频基带信号传送至基带处理器处理。低频基带信号经基带处理器处理后，被传递给应用处理器。应用处理器通过音频设备(不限于扬声器170A，受话器170B等)输出声音信号，或通过显示屏194显示图像或视频。在一些实施例中，调制解调处理器可以是独立的器件。在另一些实施例中，调制解调处理器可以独立于处理器110，与移动通信模块150或其他功能模块设置在同一个器件中。
无线通信模块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可以是集成至少一个通信处理模块的一个或多个器件。无线通信模块160经由天线2接收电磁波，将电磁波信号调频以及滤波处理，将处理后的信号发送到处理器110。无线通信模块160还可以从处理器110接收待发送的信号，对其进行调频，放大，经天线2转为电磁波辐射出去。
在一些实施例中，电子设备100的天线1和移动通信模块150耦合，天线2和无线通信模块160耦合，使得电子设备100可以通过无线通信技术与网络以及其他设备通信。无线通信技术可以包括全球移动通讯系统(global system for mobile communications，GSM)，通用分组无线服务(general packet radio service，GPRS)，码分多址接入(code division multiple access，CDMA)，宽带码分多址(wideband code division multiple access，WCDMA)，时分码分多址(time-division code division multiple access，TD-SCDMA)，长期演进(long term evolution，LTE)，BT，GNSS，WLAN，NFC，FM，和/或IR技术等。GNSS可以包括全球卫星定位系统(global positioning system，GPS)，全球导航卫星系统(global navigation satellite system，GLONASS)，北斗卫星导航系统(beidou navigation satellite system，BDS)，准天顶卫星系统(quasi-zenith satellite system，QZSS)和/或星基增强系统(satellite based augmentation systems，SBAS)。
电子设备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的正整数。
在本申请的实施例中，显示屏194可以用于根据电子设备100的显示形态，显示动态布局后的应用程序的元素和界面。
其中，电子设备100的显示形态是指电子设备100显示用户界面时的状态。显示屏194的尺寸，显示屏194的比例，显示屏194的分辨率，显示状态或显示模式等因素不同，电子设备100的显示形态也不同。显示屏194的尺寸，显示屏194的比例，显示屏194的分辨率，显示状态或显示模式不同，电子设备100的显示形态也不同。通常，显示形态不同，显示屏194的宽度也不同，显示屏194上界面的宽度也不同。
其中，显示模式可以包括全屏显示模式，分屏显示模式，画中画显示模式或悬浮窗显示模式等。显示状态可以包括横屏显示状态或竖屏显示状态。例如，在横屏显示状态下，电子设备100可以对应任一种显示形态；在竖屏显示状态下，电子设备100可以对应另一种显示形态。
该元素是指界面所包含的满足用户浏览或交互需求的一系列的控件。例如，该元 素可以包括气泡，弹窗，按钮，卡片，页签，底部导航栏(或称底部tab)等控件，或者控件的组合。
显示屏194的宽度可以划分为多个栅格(column)。栅格与栅格之间的距离可以称为间隔(gutter)。显示屏194的左/右边界与最近的栅格之间的距离可以称为空边(margin)。栅格、间隔和空边的划分形成了栅格系统。其中，每个栅格的大小相同，每个间隔的大小相同，且每个空边的大小也相同。示例性的，参见图2A，电子设备100的显示屏194的宽度可以划分为两个空边，若干个栅格以及若干个间隔。
其中，显示屏194的宽度划分的栅格数量，可以根据显示屏194的宽度来确定。显示屏194的宽度不同，划分的栅格数量也可能不同。例如，在横/竖屏不同显示状态下，显示屏194的宽度不同，因而显示屏194的宽度划分的栅格数量也不同。
显示屏194的宽度包括的栅格数量的具体确定方式可以有多种。在一些实施例中，显示屏194的宽度通过物理尺寸或像素点的数量来表征。显示屏194的宽度包括的栅格数量可以根据显示屏194的宽度的物理尺寸或像素点数量来确定。显示屏194的宽度的物理尺寸或像素点的数量越大，则显示屏194的宽度包括的栅格数量越多；显示屏194的宽度的物理尺寸或像素点的数量越小，则显示屏194的宽度包括的栅格数量越少。
需要说明的是，本申请以下实施例中以图2A所示姿态的电子设备为例进行说明。这样，显示屏194的宽度即为显示屏194在水平方向的长度，显示屏194的高度即为显示屏194在竖直方向的长度。
在另一些实施例中，显示屏194的宽度通过dp值来表征。其中，dp值＝显示屏194的宽度对应的像素点的数量/像素密度(pixels per inch，PPI)。栅格数量根据显示屏194的宽度的dp值来确定。其中，示例性的，若电子设备100显示屏194的分辨率为1280P*720P，在竖屏显示状态下，显示屏194的宽度对应的像素点的数量为720，像素密度为2，则dp值＝720/2＝360dp。
其中，PPI越高，画面的细节就越丰富。而不同显示屏194的像素密度通常不同，因此即便显示屏194的物理尺寸或像素点数量相同，显示屏194的显示效果也不同。但是，若不同显示屏194的宽度的dp值相同，则可以表明不同显示屏194在宽度方向的显示效果相同。因此，根据显示屏194的宽度的dp值来确定栅格数量，可以使得不同显示形态下，根据栅格数量动态布局后的元素和界面的显示效果更为一致。
可以理解的是，同一显示形态对应的显示屏194宽度的物理尺寸，像素点的数量，分辨率，横/竖屏显示状态和显示模式等因素相同，因而同一显示形态对应的显示屏194宽度的dp值相同，同一显示形态对应的待显示界面的宽度包括的栅格数量也相同。不同显示形态可以对应不同的栅格数量。
需要说明的是，电子设备100上的栅格数量，可以是出厂时预设在电子设备100上的，也可以是电子设备100启动后根据显示屏194的分辨率以及像素密度计算获得的。
本申请以下实施例主要以根据显示屏194宽度的dp值，来确定栅格数量为例进行说明。
示例性的，dp值的不同区间可以对应不同的栅格数量。参见表1，显示屏194宽 度的尺寸在(0,320dp)范围内时，显示屏194的栅格数量为2；显示屏194宽度的尺寸在[320dp,600dp)范围内时，显示屏194的栅格数量为4。显示屏194宽度的尺寸在[600dp,840dp)范围内时，待显示界面的宽度包括的栅格数量为8。显示屏194宽度的尺寸大于或者等于840dp时，显示屏194的栅格数量为12。
表1
Figure PCTCN2020107185-appb-000001
示例性的，参见图2B，手表的显示屏194宽度的物理尺寸可以为1-2寸，在(0,320dp)范围内，包括2个栅格。手机显示屏194宽度的物理尺寸可以为5-7寸，在竖屏显示状态下，显示屏194宽度的尺寸在[320dp,600dp)范围内，包括4个栅格；在横屏显示状态下，显示屏194宽度的尺寸在[600dp,840dp)范围内，包括8个栅格。折叠屏设备的显示屏194宽度的物理尺寸可以为7-8寸，在折叠屏展开的状态下，折叠屏宽度的尺寸在[600dp,840dp)范围内，包括8个栅格。平板电脑的显示屏194宽度的物理尺寸可以为8-11寸，在竖屏显示状态下，显示屏194宽度的尺寸在[600dp,840dp)范围内，包括8个栅格；在横屏显示状态下，显示屏194宽度的尺寸在[840dp,+∞)范围内，包括12个栅格。电视的显示屏194宽度的物理尺寸可以为55寸，在[840dp,+∞)范围内，包括12个栅格。
电子设备100的栅格系统可以包括多种类型，例如基础类栅格系统，宫格类栅格系统，弹窗类栅格系统或卡片类栅格系统等。其中，宫格类栅格系统可以用于辅助关于宫格类布局的动态布局。例如，该宫格类布局可以为桌面图标的布局或图片缩略图的布局等。宫格类布局中各元素之间的横向间距可以等于间隔。弹窗类栅格系统可以用于辅助关于弹窗的动态布局。卡片类栅格系统可以用于辅助关于卡片的动态布局。基础类栅格系统可以作为通用的栅格系统，用于辅助关于界面各类元素的动态布局。
不同类型的栅格系统对应的间隔大小或空边大小不同。示例性的，不同类型的栅格系统对应的间隔或空边的大小可以参见表2。
表2
Figure PCTCN2020107185-appb-000002
需要说明的是，本申请实施例给出的gutter和margin的大小仅是举例说明，也可 以为其他的数值，本申请实施例不予限定。并且，即便是同种类型的栅格系统，不同显示形态或不同电子设备100对应的gutter和margin的大小也可能不同。
电子设备100可以根据栅格数量，以及间隔和空边的大小(或根据栅格系统类型)，计算栅格的宽度。从而，电子设备100可以根据栅格数量，栅格的宽度，间隔大小和空边大小，对电子设备100的显示屏194进行栅格划分。
电子设备100可以通过ISP，摄像头193，视频编解码器，GPU，显示屏194以及应用处理器等实现拍摄功能。
ISP用于处理摄像头193反馈的数据。例如，拍照时，打开快门，光线通过镜头被传递到摄像头感光元件上，光信号转换为电信号，摄像头感光元件将电信号传递给ISP处理，转化为肉眼可见的图像。ISP还可以对图像的噪点，亮度，肤色进行算法优化。ISP还可以对拍摄场景的曝光，色温等参数优化。在一些实施例中，ISP可以设置在摄像头193中。
摄像头193用于捕获静态图像或视频。物体通过镜头生成光学图像投射到感光元件。感光元件可以是电荷耦合器件(charge coupled device，CCD)或互补金属氧化物半导体(complementary metal-oxide-semiconductor，CMOS)光电晶体管。感光元件把光信号转换成电信号，之后将电信号传递给ISP转换成数字图像信号。ISP将数字图像信号输出到DSP加工处理。DSP将数字图像信号转换成标准的RGB，YUV等格式的图像信号。在一些实施例中，电子设备100可以包括1个或N个摄像头193，N为大于1的正整数。
数字信号处理器用于处理数字信号，除了可以处理数字图像信号，还可以处理其他数字信号。例如，当电子设备100在频点选择时，数字信号处理器用于对频点能量进行傅里叶变换等。
视频编解码器用于对数字视频压缩或解压缩。电子设备100可以支持一种或多种视频编解码器。这样，电子设备100可以播放或录制多种编码格式的视频，例如：动态图像专家组(moving picture experts group，MPEG)1，MPEG2，MPEG3，MPEG4等。
NPU为神经网络(neural-network，NN)计算处理器，通过借鉴生物神经网络结构，例如借鉴人脑神经元之间传递模式，对输入信息快速处理，还可以不断的自学习。通过NPU可以实现电子设备100的智能认知等应用，例如：图像识别，人脸识别，语音识别，文本理解等。
外部存储器接口120可以用于连接外部存储卡，例如Micro SD卡，实现扩展电子设备100的存储能力。外部存储卡通过外部存储器接口120与处理器110通信，实现数据存储功能。例如将音乐，视频等文件保存在外部存储卡中。
内部存储器121可以用于存储计算机可执行程序代码，可执行程序代码包括指令。处理器110通过运行存储在内部存储器121的指令，从而执行电子设备100的各种功能应用以及数据处理。内部存储器121可以包括存储程序区和存储数据区。其中，存储程序区可存储操作系统，至少一个功能所需的应用程序(比如声音播放功能，图像播放功能等)等。存储数据区可存储电子设备100使用过程中所创建的数据(比如音频数据，电话本等)等。此外，内部存储器121可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件，闪存器件，通用闪存存储器(universal  flash storage，UFS)等。
在本申请的实施例中，内部存储器121可以存储有布局规则。该布局规则可以预设在电子设备100的操作系统中，也可以集成在所存储的应用程序中。处理器110可以在应用程序进行界面刷新时，根据预设的布局规则和显示屏194当前的显示形态，对应用程序界面上的元素进行动态布局，从而自适应不同的显示形态实现界面的动态布局。
其中，布局规则可以用于描述，界面上元素的宽度信息与待显示界面的宽度信息之间的对应关系。由于显示屏194的宽度进行了栅格划分，因而显示屏194上显示的界面或待显示的界面的宽度，也可以通过占用的栅格数量的多少来表示。例如，布局规则用于描述，界面上的元素的宽度信息与待显示界面的宽度包括的栅格数量之间的对应关系。处理器110可以在应用程序进行界面刷新时，根据当前显示形态下待显示界面的宽度包括的栅格数量以及该对应关系，确定待显示界面上的元素的宽度信息，从而对该元素进行动态布局，自适应不同显示形态实现界面的动态布局。
示例性的，界面上元素的宽度信息可以通过元素的宽度包括的栅格数量来表示。布局规则具体用于描述，界面上的宽度包括的栅格数量与待显示界面的宽度包括的栅格数量之间的对应关系。
由于显示形态与屏幕的尺寸、显示状态、显示模式或分辨率等因素相关，而待显示界面的宽度与屏幕的尺寸、显示状态或显示模式等因素相关；因而，电子设备的显示形态不同，显示屏194的宽度通常也不同，显示屏194上待显示界面的宽度通常也不同，待显示界面的宽度包括的栅格数量也不同。进而，根据本申请实施例提供的布局规则，界面上的元素的宽度包括的栅格数量也不同，界面上的元素的宽度信息也不同。
处理器110在确定需要界面刷新时，可以根据刷新后待显示的界面的宽度包括的栅格数量以及预设的布局规则，确定界面上的元素的宽度信息，从而动态调整元素的宽度。并且，结合界面上元素的显示位置(例如居中显示，居左显示或居右显示)，动态调整元素和界面的显示效果。
具体的，处理器110检测到界面刷新的信号后，可以确定需要进行界面刷新。例如，电子设备检测到打开应用程序的操作。示例性的，该操作可以为用户指示新打开一个应用程序的操作，或者用户指示将应用程序从后台切换到前台的操作等。再例如，电子设备检测到界面的宽度发生变化。示例性的，屏幕为折叠屏，电子设备检测到折叠屏的折叠状态发生变化。再示例性的，电子设备检测到显示状态发生切换。再示例性的，电子设备检测到显示模式发生切换。
也就是说，界面刷新场景可以包括例如，新打开一个应用程序的场景(即应用程序初始化的场景)，应用从后台切到前台的场景，横/竖屏显示状态切换的场景，折叠屏的折叠状态变化的场景，全屏/分屏显示模式切换场景，画中画显示模式与其他显示模式之间进行切换的场景，或悬浮窗显示模式与其他显示模式之间进行切换的场景等。界面刷新场景是指需要进行元素和界面动态布局的场景。
可以理解的是，当电子设备的显示形态发生变化时，电子设备的横/竖屏显示状态或显示模式等通常也发生了变化。而显示状态或显示模式发生切换的场景，也是界面 刷新场景。因而，电子设备的显示形态发生变化的场景，通常也是界面刷新场景。
还需要说明的是，本申请以下实施例中主要以图2A所示姿态的电子设备为例进行说明。这样，界面的宽度即为界面在水平方向的长度，界面的高度即为界面在竖直方向的长度。并且，元素的宽度即为元素在水平方向的长度，元素的高度即为元素在竖直方向的长度。
在一些实施例中，布局规则可以包括间隔大小和空边大小，以及调整规则。
其中，间隔大小和空边大小可以与电子设备100的显示形态相对应。显示形态不同，布局规则中的间隔大小和空边大小也可能不同。
调整规则可以用于描述，界面上元素的宽度信息与待显示界面的宽度之间的对应关系。应用程序可以针对不同元素，分别指定相应的布局规则。在界面刷新时，电子设备100可以根据调整规则，确定元素的宽度包括的栅格数量等宽度信息。电子设备100还可以根据布局规则中的间隔大小和空边大小，确定待显示元素的宽度包括的栅格数量所对应的dp值或对应的像素点的数量，从而动态调整待显示元素的宽度大小。
示例性的，一种布局规则可以为：
margin＝16dp；//表示空边的大小为16dp；
gutter＝16dp；//表示间隔的大小为16dp；
若待显示界面的宽度包括的栅格数量为4，则元素宽度占用4个栅格；//表示调整规则的内容；
若待显示界面的宽度包括的栅格数量为8，则元素宽度占用4个栅格；//表示调整规则的内容；
若待显示界面的宽度包括的栅格数量为12，则元素宽度占用5个栅格；//表示调整规则的内容。
在一些技术方案中，电子设备100上可以存储有各个类型的栅格系统的定义信息。例如，电子设备100上设置有各类型的栅格系统的配置表。示例性的，该配置表可以为：
config；
(
竖屏显示状态下，column＝4；
横屏显示状态下，column＝8；
基础类栅格系统：
margin＝24dp；
gutter＝24dp；
宫格类栅格系统；
margin＝24dp；
gutter＝12dp；
弹窗类栅格系统；
margin＝16dp；
gutter＝16dp；
卡片类栅格系统：
margin＝8dp；
gutter＝8dp；
…
)
其中，本申请实施例中的参数column表示栅格数量，并不表示栅格的宽度。例如，column＝4表示栅格数量为4。
基于该配置表，布局规则中间隔和空边的大小，可以通过栅格系统的类型来表示。例如，上述布局规则可以为：
弹窗类栅格系统；//弹窗类栅格系统对应的margin＝16dp，gutter＝16dp；
若待显示界面的宽度包括的栅格数量为4，则元素宽度占用4个栅格；
若待显示界面的宽度包括的栅格数量为8，则元素宽度占用4个栅格；
若待显示界面的宽度包括的栅格数量为12，则元素宽度占用5个栅格。
在另一些实施例中，布局规则可以包括调整规则，而不包括间隔大小和空边大小。针对不同元素，应用程序可以指定相应的布局规则。电子设备100可以根据该布局规则，动态调整元素的宽度。应用程序还可以指定间隔大小和空边大小。例如，不同元素可以采用不同的间隔大小或空边大小。或者，不同类型的元素可以采用不同的间隔大小或空边大小；同一类型的元素可以采用相同的间隔大小和空边大小(即采用相同类型的栅格系统)。或者，不同界面可以采用不同的间隔大小或空边大小，同一界面可以采用相同的间隔大小和空边大小。或者，同一应用程序的各界面可以采用相同的间隔大小和空边大小。
布局规则在电子设备100上的存在形式可以有多种。例如，布局规则可以写在描述文件中，电子设备100启动后可以解析该描述文件中的布局规则。
再例如，布局规则也可以封装在函数中。每组布局规则可以预先定义一个对应的静态变量，以方便函数调用。例如，可以对布局规则对应的静态变量进行宏定义：
TYPE_TOAST＝0；//宏定义一组应用于弹窗的布局规则；
TYPE_BUBBLE＝1；//宏定义一组应用于气泡的布局规则；
TYPE_xxxx＝2；
…
示例性的，用于封装布局规则的封装函数可以为：
getLayoutSize(int type){//表示获取元素的宽度大小
If(type＝＝TYPE_TOAST){//表示调用TYPE_TOAST对应的布局规则；
If(Column＝＝4)result＝4；//表示若待显示界面包括4个栅格，则元素宽度占4个栅格；
Else If(Column＝＝8)result＝4；//表示若待显示界面包括8个栅格，则元素宽度占4个栅格；
Else If(Column＝＝12)result＝5；//表示若待显示界面包括12个栅格，则元素宽度占5个栅格；
}
If(type＝＝TYPE_BUBBLE){//表示调用TYPE_BUBBLE对应的布局规则；
…
}
If(type＝＝TYPE_xxxx){//表示调用TYPE_xxxx对应的布局规则；
…
}
Return Column2Dp(result)
}
在该封装函数中，Column表示待显示界面的宽度包括的栅格数量。Result表示元素宽度包括的栅格数量。Return Column2Dp(result)表示将获得的弹窗宽度包括的栅格数量转化为dp值，以便在显示屏194上进行绘制和显示。
元素的宽度信息还可以通过其他参数来表示，例如还可以通过元素的宽度的dp值来表示。在该封装函数的举例中，布局规则用于描述界面上的元素的宽度的dp值，与待显示界面的宽度包括的栅格数量之间的对应关系。
需要说明的是，上述封装函数中的布局规则是以包含调整规则，未包含margin和gutter的大小为例进行说明的。可以理解的是，封装函数中的布局规则，也可以包括margin和gutter的大小，此处不予赘述。例如，封装函数还包括getMargin{}函数，用于获取margin的大小；还包括getGutter{}函数，用于获取gutter的大小。
基于上述布局规则，电子设备100可以通过多种方式实现元素的动态布局。
此外，电子设备100还可以通过音频模块170，扬声器170A，受话器170B，麦克风170C，耳机接口170D，以及应用处理器等实现音频功能。例如音乐播放，录音等。
音频模块170用于将数字音频信息转换成模拟音频信号输出，也用于将模拟音频输入转换为数字音频信号。音频模块170还可以用于对音频信号编码和解码。在一些实施例中，音频模块170可以设置于处理器110中，或将音频模块170的部分功能模块设置于处理器110中。
扬声器170A，也称“喇叭”，用于将音频电信号转换为声音信号。电子设备100可以通过扬声器170A收听音乐，或收听免提通话。
受话器170B，也称“听筒”，用于将音频电信号转换成声音信号。当电子设备100接听电话或语音信息时，可以通过将受话器170B靠近人耳接听语音。
麦克风170C，也称“话筒”，“传声器”，用于将声音信号转换为电信号。当拨打电话或发送语音信息时，用户可以通过人嘴靠近麦克风170C发声，将声音信号输入到麦克风170C。电子设备100可以设置至少一个麦克风170C。在另一些实施例中，电子设备100可以设置两个麦克风170C，除了采集声音信号，还可以实现降噪功能。在另一些实施例中，电子设备100还可以设置三个，四个或更多麦克风170C，实现采集声音信号，降噪，还可以识别声音来源，实现定向录音功能等。
耳机接口170D用于连接有线耳机。耳机接口170D可以是USB接口130，也可以是3.5mm的开放移动电子设备平台(open mobile terminal platform，OMTP)标准接口，美国蜂窝电信工业协会(cellular telecommunications industry association of the USA，CTIA)标准接口。
压力传感器180A用于感受压力信号，可以将压力信号转换成电信号。在一些实施例中，压力传感器180A可以设置于显示屏194。压力传感器180A的种类很多，如电阻式压力传感器，电感式压力传感器，电容式压力传感器等。电容式压力传感器可以是包括至少两个具有导电材料的平行板。当有力作用于压力传感器180A，电极之间 的电容改变。电子设备100根据电容的变化确定压力的强度。当有触摸操作作用于显示屏194，电子设备100根据压力传感器180A检测触摸操作强度。电子设备100也可以根据压力传感器180A的检测信号计算触摸的位置。在一些实施例中，作用于相同触摸位置，但不同触摸操作强度的触摸操作，可以对应不同的操作指令。例如：当有触摸操作强度小于第一压力阈值的触摸操作作用于短消息应用图标时，执行查看短消息的指令。当有触摸操作强度大于或等于第一压力阈值的触摸操作作用于短消息应用图标时，执行新建短消息的指令。
陀螺仪传感器180B可以用于确定电子设备100的运动姿态。在一些实施例中，可以通过陀螺仪传感器180B确定电子设备100围绕三个轴(即，x，y和z轴)的角速度。陀螺仪传感器180B可以用于拍摄防抖。示例性的，当按下快门，陀螺仪传感器180B检测电子设备100抖动的角度，根据角度计算出镜头模组需要补偿的距离，让镜头通过反向运动抵消电子设备100的抖动，实现防抖。陀螺仪传感器180B还可以用于导航，体感游戏场景。
在一些实施例中，陀螺仪传感器180B可以用于检测电子设备100的转动，从而检测是否发生电子设备100的横/竖屏显示状态切换等需要界面刷新的场景。以便，电子设备100在界面刷新场景下对元素和界面进行动态布局。
气压传感器180C用于测量气压。在一些实施例中，电子设备100通过气压传感器180C测得的气压值计算海拔高度，辅助定位和导航。
磁传感器180D包括霍尔传感器。电子设备100可以利用磁传感器180D检测翻盖皮套的开合。在一些实施例中，当电子设备100是翻盖机时，电子设备100可以根据磁传感器180D检测翻盖的开合。进而根据检测到的皮套的开合状态或翻盖的开合状态，设置翻盖自动解锁等特性。
加速度传感器180E可检测电子设备100在各个方向上(一般为三轴)加速度的大小。当电子设备100静止时可检测出重力的大小及方向。还可以用于识别电子设备姿态，应用于横竖屏切换，计步器等应用。
距离传感器180F，用于测量距离。电子设备100可以通过红外或激光测量距离。在一些实施例中，拍摄场景，电子设备100可以利用距离传感器180F测距以实现快速对焦。
接近光传感器180G可以包括例如发光二极管(LED)和光检测器，例如光电二极管。发光二极管可以是红外发光二极管。电子设备100通过发光二极管向外发射红外光。电子设备100使用光电二极管检测来自附近物体的红外反射光。当检测到充分的反射光时，可以确定电子设备100附近有物体。当检测到不充分的反射光时，电子设备100可以确定电子设备100附近没有物体。电子设备100可以利用接近光传感器180G检测用户手持电子设备100贴近耳朵通话，以便自动熄灭屏幕达到省电的目的。接近光传感器180G也可用于皮套模式，口袋模式自动解锁与锁屏。
环境光传感器180L用于感知环境光亮度。电子设备100可以根据感知的环境光亮度自适应调节显示屏194亮度。环境光传感器180L也可用于拍照时自动调节白平衡。环境光传感器180L还可以与接近光传感器180G配合，检测电子设备100是否在口袋里，以防误触。
指纹传感器180H用于采集指纹。电子设备100可以利用采集的指纹特性实现指纹解锁，访问应用锁，指纹拍照，指纹接听来电等。
温度传感器180J用于检测温度。在一些实施例中，电子设备100利用温度传感器180J检测的温度，执行温度处理策略。例如，当温度传感器180J上报的温度超过阈值，电子设备100执行降低位于温度传感器180J附近的处理器的性能，以便降低功耗实施热保护。在另一些实施例中，当温度低于另一阈值时，电子设备100对电池142加热，以避免低温导致电子设备100异常关机。在其他一些实施例中，当温度低于又一阈值时，电子设备100对电池142的输出电压执行升压，以避免低温导致的异常关机。
触摸传感器180K，也称“触控面板”。触摸传感器180K可以设置于显示屏194，由触摸传感器180K与显示屏194组成触摸屏，也称“触控屏”。触摸传感器180K用于检测作用于其上或附近的触摸操作。触摸传感器可以将检测到的触摸操作传递给应用处理器，以确定触摸事件类型。可以通过显示屏194提供与触摸操作相关的视觉输出。在另一些实施例中，触摸传感器180K也可以设置于电子设备100的表面，与显示屏194所处的位置不同。
在一些实施例中，触摸传感器180K可以检测到用户点击应用图标的操作，以便电子设备100确定当前为打开应用程序的场景，从而确定当前为界面刷新场景。以便，电子设备100在界面刷新场景下对元素和界面进行动态布局。
骨传导传感器180M可以获取振动信号。在一些实施例中，骨传导传感器180M可以获取人体声部振动骨块的振动信号。骨传导传感器180M也可以接触人体脉搏，接收血压跳动信号。在一些实施例中，骨传导传感器180M也可以设置于耳机中，结合成骨传导耳机。音频模块170可以基于骨传导传感器180M获取的声部振动骨块的振动信号，解析出语音信号，实现语音功能。应用处理器可以基于骨传导传感器180M获取的血压跳动信号解析心率信息，实现心率检测功能。
按键190包括开机键，音量键等。按键190可以是机械按键。也可以是触摸式按键。电子设备100可以接收按键输入，产生与电子设备100的用户设置以及功能控制有关的键信号输入。
马达191可以产生振动提示。马达191可以用于来电振动提示，也可以用于触摸振动反馈。例如，作用于不同应用(例如拍照，音频播放等)的触摸操作，可以对应不同的振动反馈效果。作用于显示屏194不同区域的触摸操作，马达191也可对应不同的振动反馈效果。不同的应用场景(例如：时间提醒，接收信息，闹钟，游戏等)也可以对应不同的振动反馈效果。触摸振动反馈效果还可以支持自定义。
指示器192可以是指示灯，可以用于指示充电状态，电量变化，也可以用于指示消息，未接来电，通知等。
SIM卡接口195用于连接SIM卡。SIM卡可以通过插入SIM卡接口195，或从SIM卡接口195拔出，实现和电子设备100的接触和分离。电子设备100可以支持1个或N个SIM卡接口，N为大于1的正整数。SIM卡接口195可以支持Nano SIM卡，Micro SIM卡，SIM卡等。同一个SIM卡接口195可以同时插入多张卡。多张卡的类型可以相同，也可以不同。SIM卡接口195也可以兼容不同类型的SIM卡。SIM卡接口195也可以兼容外部存储卡。电子设备100通过SIM卡和网络交互，实现通话以及数据通 信等功能。在一些实施例中，电子设备100采用eSIM，即：嵌入式SIM卡。eSIM卡可以嵌在电子设备100中，不能和电子设备100分离。
可以理解的是，本申请实施例示意的结构并不构成对电子设备100的具体限定。在本申请另一些实施例中，电子设备100可以包括比图示更多或更少的部件，或者组合某些部件，或者拆分某些部件，或者不同的部件布置。图示的部件可以以硬件，软件或软件和硬件的组合实现。
在本申请的实施例中，显示屏194可以进行栅格系统划分。内部存储器121可以存储有布局规则。该布局规则可以用于描述，待显示界面上的元素的宽度信息与当前显示形态下待显示界面的宽度包括的栅格数量之间的对应关系。电子设备100中的检测部件(例如陀螺仪传感器180B或触摸传感器180K等)可以辅助电子设备100检测当前是否需要界面刷新。处理器110可以在应用程序进行界面刷新时，根据当前显示形态下待显示界面的宽度包括的栅格数量以及该对应关系，确定待显示界面上的元素的宽度信息，进而对元素进行动态布局。从而，可以使得应用程序能够自适应不同的显示形态，实现不同的界面布局效果。
电子设备的软件系统可以采用分层架构，事件驱动架构，微核架构，微服务架构，或云架构。本申请实施例以图3所示的分层架构为例，示例性说明电子设备100的软件结构。
分层架构将软件分成若干个层，每一层都有清晰的角色和分工。层与层之间通过软件接口通信。在一些实施例中，将电子设备的软件系统分为四层模块，从上至下分别为应用程序，控件模块，栅格管理接口模块，栅格资源计算模块，以及栅格系统配置模块。
其中，应用程序可以包括一系列的应用程序包。如图3所示，应用程序包可以包括时钟，设置，蓝牙，音乐，相机，图库，日历，通话，地图，导航，WLAN，视频，短信息或微信等应用。
控件模块，可以用于提供栅格控件，通用模板和复合控件等元素。在需要界面刷新时，控件模块可以通过栅格系统管理接口获取元素的宽度，空边的尺寸等信息。而后，控件模块可以重新布局元素的大小，或复合控件内多个元素之间的相对位置等。
栅格管理接口模块，可以用于获取当前显示形态对应的屏幕参数信息，例如屏幕分辨率，显示模式，或屏幕宽度的尺寸等，并将屏幕参数信息设置到栅格资源计算模块中。当电子设备处于分屏等非全屏显示模式时，栅格管理接口模块可以根据当前显示形态对应的屏幕参数信息，获取当前子屏幕的参数信息，并设置到栅格资源计算模块中。
其中，该屏幕可以是图1所示的显示屏194，也可以是图1所示的显示屏194与触摸传感器180K组成的触控屏。
栅格管理接口模块还可以为控件模块提供API接口和布局规则的调用，向控件模块返回元素的宽度，例如元素的宽度对应的dp值或元素的宽度对应的像素点的数量。
栅格资源计算模块，可以用于接受栅格管理系统接口的调度，根据当前显示形态对应的屏幕参数信息和布局规则，获取栅格系统配置模块中的相关配置信息，并计算栅格的宽度和元素的宽度。
栅格系统配置模块，用于提供栅格系统的相关配置信息，例如第一栅格数量，第二栅格数量，间隔的尺寸和空边的尺寸等。其中，第一栅格数量为待显示界面的宽度包括的栅格数量。第二栅格数量为待显示界面上元素的宽度包括的栅格数量。
图3所示的软件模块与图1所示的硬件模块可以相互配合，以实现本申请实施例提供的电子设备的界面的动态布局方法。
可以理解的是，电子设备的软件系统可以有不同的模块划分方式，也可以包括不同的软件模块。电子设备执行的操作具体是电子设备的不同软件模块执行的操作；电子设备的软件模块执行的操作，也就是电子设备本身执行的操作。
以下主要从图3所示的软件模块的角度，对本申请实施例提供的电子设备的界面的动态布局方法进行阐述。参见图4，该方法可以包括：
401、应用程序显示第一界面。
其中，该应用程序可以是系统应用，也可以是第三方应用。例如，系统应用可以包括桌面应用、设置应用、短信应用或时钟应用等；第三方应用可以包括微信应用，浏览器应用，微博应用或导航应用等。
402、应用程序检测到界面刷新信号，并通知控件模块。
关于界面刷新的说明，可以参见以上实施例中的相关描述。
403、控件模块调用栅格管理接口模块，以获取元素的宽度。
例如，元素的宽度可以是元素的宽度对应的像素点的数量，或者元素的宽度对应的dp值等大小信息。
404、栅格管理接口模块获取当前显示形态对应的屏幕参数信息，并将当前显示形态对应的屏幕参数信息，通知给栅格资源计算模块。
其中，屏幕参数信息可以包括屏幕分辨率，显示模式，或屏幕宽度的尺寸等信息。
405、栅格资源计算模块从栅格系统配置模块中，获取与当前显示形态下待显示的第二界面的宽度对应的第一栅格数量。
由于显示形态与屏幕的尺寸、显示状态、显示模式或分辨率等因素相关，而待显示界面的宽度也通常与屏幕的尺寸、显示状态或显示模式等因素相关，因而显示形态不同，待显示界面的宽度通常也不同，第一栅格数量也不同。第一栅格数量配置在栅格系统配置模块中，栅格资源计算模块可以从栅格系统配置模块中，实时获取与当前显示形态下待显示的第二界面的宽度对应的第一栅格数量。
406、栅格资源计算模块根据待显示的第二界面上的元素对应的布局规则，从栅格系统配置模块中获取与第一栅格数量对应的第二栅格数量。
第二栅格数量配置在栅格系统配置模块中，栅格资源计算模块根据元素对应的布局规则，从栅格系统配置模块中获取与第一栅格数量对应的第二栅格数量。
407、栅格资源计算模块根据待显示的第二界面上的元素对应的布局规则，从栅格系统配置模块中获取元素对应的空边的尺寸和间隔的尺寸。
其中，元素对应的布局规则中规定了空边的尺寸和间隔的尺寸的大小，空边的尺寸和间隔的尺寸配置在栅格系统配置模块中。
408、栅格资源计算模块根据当前显示形态对应的屏幕参数信息，第一栅格数量，空边的尺寸和间隔的尺寸，计算栅格的宽度。
栅格资源计算模块可以根据当前显示形态对应的屏幕参数信息，栅格系统中第一栅格数量，空边的尺寸和间隔的尺寸，计算栅格系统中栅格的宽度。栅格的宽度具体可以是栅格的宽度对应的dp值，或栅格的宽度对应的像素点的数量。
409、栅格资源计算模块根据栅格的宽度和第二栅格数量，计算元素的宽度，并将元素的宽度返回给栅格管理接口模块。
其中，元素的宽度与第二栅格数量相匹配。元素的宽度具体包括第二栅格数量的栅格的宽度之和，以及第二栅格数量的栅格对应的间隔的尺寸之和。
410、栅格管理接口模块将元素的宽度，返回给控件模块。
411、控件模块根据获取的元素的宽度，设置元素的宽度。
其中，控件模块设置的元素的宽度大小，与控件模块根据获取的元素的宽度相一致。
412、应用程序显示第二界面，第二界面上元素的宽度为控件模块设置的元素的宽度。
这样，应用程序可以动态设置元素的宽度，从而动态布局元素和元素所在的界面。
以下通过举例的方式，对图4所示的界面的动态布局方法进行具体阐述。
在一些实施例中，控件模块可以提供一些栅格控件。每种类型的栅格控件可以对应有相应的布局规则。例如，该栅格控件可以包括栅格弹窗、栅格气泡、栅格按钮或栅格卡片等。
应用程序在界面设计时可以指定使用这些栅格控件。在应用程序确定发生界面刷新时(即在界面刷新场景下)，若刷新后的待界面包括栅格控件，则控件模块中的栅格控件可以根据当前显示形态和栅格控件对应的布局规则，动态布局栅格控件的宽度。而栅格控件的高度，则可以根据栅格控件待显示内容的多少(即待显示内容信息量的大小)来确定，以使得栅格控件足以容纳应用程序指定的待显示内容。
具体的，在界面刷新场景下，操作系统可以通知应用程序，应用程序可以通知栅格控件。栅格控件可以根据当前显示形态对应的待显示界面的宽度，以及栅格控件对应的布局规则，确定栅格控件的宽度信息，从而动态设置栅格控件的宽度，实现栅格控件和界面的动态布局。
其中，栅格控件的宽度信息可以包括栅格控件的宽度包括的栅格数量，栅格控件的宽度对应的dp值，以及栅格控件的宽度对应的像素点的数量等信息。栅格控件根据当前显示形态对应的待显示界面的宽度包括的栅格数量，以及栅格控件对应的布局规则，可以确定栅格控件的宽度包括的栅格数量。栅格控件还可以根据布局规则中间隔和空边的大小，确定栅格的宽度，从而确定栅格控件的宽度对应的dp值或像素点的数量等信息。栅格控件的宽度对应的dp值或像素点的数量可以用于表示实际的栅格控件的宽度，以便应用程序在屏幕上对该栅格控件进行显示。
并且，栅格控件在界面上的位置由应用程序指定。结合应用程序指定的栅格控件在界面上的显示位置，以及动态确定的栅格控件的宽度信息，应用程序可以动态控制栅格控件的显示效果。例如，应用程序可以指定栅格控件在界面上的位置为居左显示，居右显示，居中显示，栅格控件左边界与屏幕左边界的距离，或栅格控件上边界与屏幕上边界的距离等。
例如，栅格控件为栅格弹窗。示例性的，栅格弹窗对应的布局规则可以为：
margin＝16dp；
gutter＝16dp；
若待显示界面的宽度包括的栅格数量为4，则栅格弹窗的宽度占用4个栅格；
若待显示界面的宽度包括的栅格数量为8，且待显示界面的宽度与高度的比＞4:3，则栅格弹窗的宽度占用4个栅格；
若待显示界面的宽度包括的栅格数量为8，且待显示界面的宽度与高度的比≤4:3，则栅格弹窗的宽度占用5个栅格；
若待显示界面的宽度包括的栅格数量为12，则栅格弹窗的宽度占用5个栅格。
示例性的，应用程序为应用商店，电子设备为手机，手机处于竖屏显示状态。手机检测到用户点击如图5中的(a)所示的应用商店的图标后，打开应用商店。操作系统通知应用商店开始运行。应用商店需要提示用户发现新版本。应用商店指定使用栅格弹窗来提示用户发现新版本。
应用商店开始运行后进行初始化，并通知栅格弹窗进行界面刷新(即当前为界面刷新场景)。其中，这里的界面刷新场景是指，初始化时从不显示应用商店的界面，到显示应用商店的界面的场景。
而后，栅格弹窗可以采用步骤403-步骤411描述的方法，获取栅格弹窗的宽度。应用程序根据栅格弹窗的宽度信息以及弹窗的位置，显示该栅格弹窗。该栅格弹窗中的待显示内容由应用商店指定。
示例性的，在竖屏显示状态下，采用步骤403-步骤411描述的方法，栅格弹窗可以调用栅格管理接口模块，栅格管理接口模块获取当前显示形态对应的屏幕参数信息，并将当前显示形态对应的屏幕参数信息通知给栅格资源计算模块。而后，栅格资源计算模块可以从栅格系统配置模块中，获取与当前显示形态下待显示界面的宽度对应的第一栅格数量，该第一栅格数量为4。栅格资源计算模块根据待显示的第二界面上的栅格弹窗对应的布局规则，从栅格系统配置模块中获取与第一栅格数量对应的第二栅格数量，该第二栅格数量为4。栅格资源计算模块待显示的第二界面上的栅格弹窗对应的布局规则，从栅格系统配置模块中获取栅格弹窗对应的空边的尺寸和间隔的尺寸。该空边的尺寸为16dp，该间隔的尺寸为16dp。栅格资源计算模块根据当前显示形态对应的屏幕参数信息，第一栅格数量、空边的尺寸和间隔的尺寸，计算栅格的宽度。栅格资源计算模块根据栅格的宽度和第二栅格数量，计算栅格弹窗的宽度，并将栅格弹窗的宽度返回给栅格管理接口模块。栅格管理接口模块将栅格弹窗的宽度，返回给控件模块。控件模块根据获取的栅格弹窗的宽度，设置栅格弹窗的宽度。
另外，栅格弹窗中的显示内容，用于提示用户发现新版本的相关信息。栅格弹窗的高度根据栅格弹窗中显示内容的多少来确定，以使得栅格弹窗足以容纳应用商店指定的显示内容。若应用商店指定栅格弹窗的显示位置为居中，则栅格弹窗的显示效果可以参见图5中的(b)。如图5中的(b)所示，栅格弹窗的宽度占用4个栅格。栅格弹窗的宽度包括相邻的4个栅格的宽度，以及该4个栅格之间的3个间隔的尺寸。
其中，上述图5中的(a)所示的界面可以为第一界面，图5中的(b)所示的界面可以为对第一界面刷新后显示的第二界面。
在一些实施例中，栅格控件可以包括可缩放resizable属性。应用程序可以指定栅格控件的resizable属性为真(true)或者为假(false)。若应用程序指定在界面刷新时栅格控件的resizable属性为true，则栅格控件根据布局规则获取栅格控件的宽度，并重新设定栅格控件的宽度。例如，在上述应用商店场景中，在界面刷新时，若栅格弹窗的resizable属性为true，则栅格弹窗根据相应的布局规则确定栅格弹窗的宽度。
在上述应用商店的场景中，在手机显示图5中的(b)所示的界面之后，若用户旋转手机，使得手机由竖屏显示状态切换为横屏显示状态，则栅格管理接口模块可以获取当前显示形态对应的屏幕参数信息，并更新给栅格资源计算模块，以便栅格资源计算模块根据当前显示形态进行相关计算。例如，栅格管理接口模块可以获取显示形态发生变化后的待显示界面的宽度对应的像素点的数量、dp值或栅格数量等显示配置信息。操作系统通知应用商店显示形态发生变化。应用商店通知栅格弹窗进行界面刷新。栅格弹窗采用步骤403-步骤411所示的方法，调用栅格管理接口模块、栅格资源计算模块和栅格系统配置模块，从而根据当前显示形态对应的第一栅格数量和布局规则，确定栅格弹窗的宽度信息。例如，在横屏显示状态下，手机上待显示界面的高度和宽度与屏幕的高度和宽度一致，待显示界面的宽度包括8个栅格，且待显示界面宽度与高度的比值大于4:3，因而根据栅格弹窗的布局规则，如图5中的(c)所示，栅格弹窗的宽度占用4个栅格。上述图5中的(b)所示的界面可以为第一界面，图5中的(c)所示的界面可以为第二界面。
需要说明的是，在全屏显示模式下，待显示界面的宽度等于屏幕的宽度，待显示界面的高度等于屏幕的高度。因而，在全屏显示模式下，布局规则描述的界面上元素的宽度包括的栅格数量与待显示界面的宽度包括的栅格数量之间的对应关系，也可以说是界面上元素的宽度包括的栅格数量与屏幕的宽度包括的栅格数量之间的对应关系。
再示例性的，该电子设备为平板电脑，平板电脑的显示形态与手机的显示形态不同。平板电脑检测到用户点击应用商店的图标后，开始运行并打开应用商店。若平板电脑当前为竖屏显示状态，在当前显示形态下，平板电脑的屏幕和界面的宽度占用8个栅格，且屏幕和界面的宽度与高度的比值小于或者等于4:3，则根据栅格弹窗的布局规则，如图6中的(a)所示，由于第二栅格数量为奇数，且栅格弹窗的位置为居中，因而栅格弹窗的左、右两边分别占用了一半栅格，栅格弹窗与6个栅格有重叠，但栅格弹窗包括的栅格数量为5，即栅格弹窗占用了5个完整的栅格宽度。栅格弹窗的宽度包括5个栅格的宽度之和，以及有重叠的6个栅格之间的5个间隔的尺寸之和。
需要说明的是，应用程序可以指定栅格弹窗的显示位置，还可以将栅格弹窗的显示位置通知给栅格资源计算模块。栅格资源计算模块可以根据该显示位置，以及第二栅格数量、栅格的宽度和间隔的尺寸，计算栅格弹窗的宽度。
例如，若第二栅格数量为5，应用程序指定的栅格弹窗的显示位置为居左，则栅格弹窗从屏幕左边的第一个栅格开始，向右占用5个栅格。栅格弹窗的宽度为5个栅格的宽度，与这5个栅格之间的4个间隔的尺寸之和。
再例如，若第二栅格数量为5，应用程序指定的栅格弹窗的显示位置为居右，则栅格弹窗从屏幕右边的第一个栅格开始，向左占用5个栅格。栅格弹窗的宽度为5个栅格的宽度，与这5个栅格之间的4个间隔的尺寸之和。
再例如，若第二栅格数量为5，应用程序指定的栅格弹窗的显示位置为居中，则栅格弹窗显示在屏幕的中间位置。栅格弹窗的左、右两边分别占用了半个栅格，栅格弹窗与6个栅格有重叠，这6个栅格之间包括5个间隔；但栅格弹窗包括的栅格数量为5，即栅格弹窗占用了5个完整的栅格宽度。栅格弹窗的宽度为5个栅格的宽度，与5个间隔的尺寸之和。
若用户旋转平板电脑，使得平板电脑由竖屏显示状态切换为横屏显示状态，则显示形态发生变化。在横屏显示状态下，平板电脑的屏幕宽度和待显示界面的宽度占用12个栅格，因而根据栅格弹窗的布局规则，如图6中的(b)所示，栅格弹窗的宽度占用5个栅格。
以上是以栅格弹窗用于提示发现新版本的场景为例进行说明的，栅格弹窗也可以用于其他场景。例如，栅格弹窗还可以用于提示用户电量低的场景，或者提示用户是否连接网络的场景等。
再例如，栅格控件为栅格气泡。示例性的，栅格气泡对应的布局规则可以为：
margin＝24dp；
gutter＝24dp；
若待显示界面的宽度包括的栅格数量为4，则栅格气泡的宽度最大可占用4个栅格；
若待显示界面的宽度包括的栅格数量为6，则栅格气泡的宽度最大可占用4个栅格；
若待显示界面的宽度包括的栅格数量为8，则栅格气泡的宽度最大可占用6个栅格；
若待显示界面的宽度包括的栅格数量为12，则栅格气泡的宽度最大可占用6个栅格；
栅格气泡的宽度最小占用2个栅格。
示例性的，应用程序为微信，电子设备为平板电脑，平板电脑处于竖屏显示状态。平板电脑显示微信聊天界面。微信聊天界面包括消息气泡，微信指定该消息气泡采用栅格气泡。在竖屏显示状态下，平板电脑屏幕和界面的宽度包括8个栅格，根据栅格气泡的布局规则，栅格气泡的第二栅格数量为6。需要注意的是，栅格气泡的第二栅格数量为栅格气泡的宽度最大可包括的栅格数量。为了美观，栅格气泡的宽度最小占用2个栅格。栅格气泡的实际宽度，可以在最小宽度和最大宽度之间，根据消息内容的多少而自适地调整。若微信指定栅格气泡的显示位置为居右，则栅格气泡的显示效果可以参见图7中的(a)。
若用户旋转平板电脑，使得平板电脑由竖屏显示状态切换为横屏显示状态，则操作系统通知微信显示形态发生变化，微信通知栅格气泡进行界面刷新。栅格气泡采用步骤403-步骤411所示的方法，调用栅格管理接口模块、栅格资源计算模块和栅格系统配置模块，从而根据当前显示形态对应的第一栅格数量和栅格气泡的布局规则，确定栅格气泡的宽度信息。在横屏显示状态下，平板电脑的屏幕和待显示界面的宽度包括12个栅格，根据栅格气泡的布局规则，栅格气泡的宽度最大占用6个栅格。栅格气泡的显示效果可以参见图7中的(b)。
而后，若平板电脑检测到用户指示进入分屏显示模式的操作，则操作系统通知微信显示形态发生变化，微信通知栅格气泡进行界面刷新。在分屏显示模式下，平板电脑包括两个子屏幕，分别用于显示两个不同的界面。例如一个子屏幕用于显示微信的界面，另一个子屏幕显示其他应用程序的界面或者微信的其他界面。栅格气泡通过栅格管理接口模块、栅格资源计算模块和栅格系统配置模块，获取微信所在子屏幕1和子屏幕1的待显示界面的宽度对应的第一栅格数量，即子屏幕1的待显示界面的宽度包括的栅格数量。
举例来说，在横屏显示状态下，平板电脑的屏幕和界面的宽度的dp值为720dp。在分屏显示模式下，两个子屏幕的宽度的像素点的数量均为360dp，则根据图2B所示的划分方式，子屏幕1的宽度包括4个栅格，子屏幕1中待显示界面的宽度的第一栅格数量为4。若当前显示形态下第一栅格数量为4，则结合栅格气泡的布局规则，子屏幕1中待显示界面上栅格气泡的宽度最大占用4个栅格，栅格气泡的显示效果可以参见图8。
需要说明的是，在本申请的实施例中，在分屏显示模式下，第一栅格数量是指子屏幕中的待显示界面的宽度包括的栅格数量。在画中画显示模式或悬浮窗显示模式下，对于小窗口中的元素，第一栅格数量为小窗口中的待显示界面的宽度包括的栅格数量；对于大窗口中的元素，第一栅格数量为大窗口中的待显示界面的宽度包括的栅格数量。在全屏显示模式下，第一栅格数量指整个屏幕中的待显示界面的宽度包括的栅格数量。在本申请的实施例中，若未特别说明，则屏幕的显示模式均为全屏显示模式。
再例如，栅格控件为栅格按钮，栅格按钮包括栅格单按钮或栅格双按钮。
示例性的，栅格单按钮对应的布局规则为：
margin＝24dp；
gutter＝24dp；
若待显示界面的宽度包括的栅格数量为4，则栅格单按钮的宽度占用2个栅格；
若待显示界面的宽度包括的栅格数量为8，则栅格单按钮的宽度占用3个栅格；
若待显示界面的宽度包括的栅格数量为12，则栅格单按钮的宽度占用4个栅格。
再示例性的，栅格双按钮对应的布局规则为：
margin＝24dp；
gutter＝24dp；
若待显示界面的宽度包括的栅格数量为4，则栅格双按钮的宽度占用4个栅格；
若待显示界面的宽度包括的栅格数量为8，则栅格双按钮的宽度占用6个栅格；
若待显示界面的宽度包括的栅格数量为12，则栅格双按钮的宽度占用8个栅格。
以上述应用商店的场景为例进行说明。应用程序为应用商店，电子设备为手机，手机处于竖屏显示状态。手机检测到用户点击应用商店的图标后，打开应用商店。操作系统通知应用商店开始运行。应用商店需要提示用户发现新版本。应用商店指定使用栅格弹窗和栅格双按钮来提示用户发现新版本。关于栅格弹窗的动态布局可以参考以上实施例中的描述。这里主要对栅格双按钮的动态布局进行说明。
应用商店进行初始化，并通知栅格双按钮进行界面刷新。栅格双按钮通过栅格管理接口模块、栅格资源计算模块和栅格系统配置模块，获取当前显示形态对应的第一 栅格数量。栅格双按钮采用步骤403-步骤411所示的方法，调用栅格管理接口模块、栅格资源计算模块和栅格系统配置模块，从而根据第一栅格数量和栅格双按钮的布局规则，确定栅格双按钮的宽度信息。
示例性的，在竖屏显示状态下，手机屏幕和界面的宽度包括4个栅格，根据栅格双按钮的布局规则，栅格双按钮的宽度占用4个栅格，栅格双按钮的显示效果可以参见图9中的(a)。若用户旋转手机，使得手机由竖屏显示状态切换为横屏显示状态，则在横屏显示状态下，手机屏幕和待显示界面的宽度包括8个栅格，则根据栅格双按钮的布局规则，如图9中的(b)所示，栅格双按钮的宽度占用6个栅格。
再例如，栅格控件为栅格卡片。示例性的，栅格卡片对应的布局规则为：
margin＝8dp；
gutter＝8dp；
若待显示界面的宽度包括的栅格数量为4，则栅格卡片的宽度占用4个栅格；
若待显示界面的宽度包括的栅格数量为8，则栅格卡片的宽度占用6个栅格；
若待显示界面的宽度包括的栅格数量为12，则栅格卡片的宽度占用8个栅格。
示例性的，电子设备为手机，应用程序为状态栏，手机当前处于竖屏显示状态。手机检测到用户下拉状态栏的操作后，打开并显示状态栏。状态栏指定采用栅格卡片进行显示。操作系统通知状态栏显示界面。状态栏通知栅格卡片进行界面刷新。栅格卡片采用步骤403-步骤411所示的方法，调用栅格管理接口模块、栅格资源计算模块和栅格系统配置模块，从而根据当前显示形态对应的第一栅格数量和栅格卡片的布局规则，确定栅格卡片的宽度信息。若手机的待显示界面的宽度包括4个栅格，则根据栅格卡片的布局规则，状态栏采用的栅格卡片的宽度占用4个栅格。若状态栏指定的栅格卡片的位置为居上且左右居中，则状态栏的显示效果可以参见图10中的(a)。
若用户旋转手机，使得手机由竖屏显示状态切换为横屏显示状态，则操作系统通知状态栏显示形态发生变化。状态栏通知栅格卡片进行界面刷新。在横屏显示状态下，手机待显示界面的宽度占用8个栅格，根据栅格卡片的布局规则，如图10中的(b)所示，状态栏采用的栅格卡片的宽度占用6个栅格。
以上分别对栅格弹窗、栅格气泡、栅格按钮和栅格卡片进行了举例说明。栅格控件还可以包括其他多种控件。例如，如图11中的(a)所示的今日头条的顶部页签，也可以为栅格控件。再例如，如图11中的(b)所示的微信的底部tab，也可以为栅格控件。本申请实施例对其他栅格控件不再详细说明。
可见，在界面刷新时，具有同一套界面布局的应用程序，可以针对不同显示形态，根据布局规则和待显示界面的宽度尺寸，自动计算栅格控件的宽度信息，从而能够自适应各种显示形态进行元素和界面的动态布局。
在其他一些实施例中，电子设备可以提供一些通用模板。通用模板的实体可以是一个空的控件容器或空的布局(layout)容器。应用程序在开发时可以使用这些通用模板，并在通用模板内填充内容，而不需要关心通用模板的尺寸。应用程序可以通过通用模板实现各种元素，尤其是内部布局复杂的元素，或者不能采用栅格控件的一些元素。
例如，开机向导界面的布局不适合采用栅格控件进行设计，开机向导界面可以作 为一个元素，该元素可以采用通用模板进行布局。再例如，时钟界面包括表盘和表盘下方的文字信息等内容，布局复杂。该时钟界面可以作为一个元素，该元素可以采用通用模板进行布局。
通用模板对应有相应的布局规则。通用模板的宽度信息可以根据系统设置的布局规则动态确定。在界面刷新时，若界面包括通用模板，则通用模板可以根据对应的布局规则，动态确定通用模板的宽度信息，从而动态布局采用通用模板的元素。
具体的，在界面刷新场景下，操作系统可以通知应用程序，应用程序可以通知通用模板。通用模板可以采用步骤403-步骤411所示的方法，调用栅格管理接口模块、栅格资源计算模块和栅格系统配置模块，从而根据当前显示形态对应的待显示界面的宽度，以及通用模板对应的布局规则，确定通用模板的宽度信息，从而动态设置通用模板的宽度，实现元素和界面的动态布局。
此外，通用模板的高度可以根据应用程序指定的待显示内容的多少来确定，以使得通用模板足以容纳应用程序指定的待显示内容。
示例性的，一种通用模板对应的布局规则可以为：
margin＝24dp；
gutter＝24dp；
若待显示界面的宽度包括的栅格数量为4，则通用模板的宽度占用4个栅格；
若待显示界面的宽度包括的栅格数量为8，则通用模板的宽度占用6个栅格；
若待显示界面的宽度包括的栅格数量为12，则通用模板的宽度占用8个栅格。
示例性的，电子设备为平板电脑，应用程序为开机向导应用，平板电脑当前处于竖屏显示状态。平板电脑检测到用户的开机操作后，运行开机向导应用。开机向导应用指定采用通用模板进行界面显示。操作系统通知开机向导应用初始化。开机向导应用通知通用模板进行界面刷新。通用模板采用步骤403-步骤411所示的方法，调用栅格管理接口模块、栅格资源计算模块和栅格系统配置模块，从而根据当前显示形态对应的第一栅格数量和通用模板的布局规则，确定通用模板的宽度信息。若平板电脑的屏幕和界面的宽度包括8个栅格，则根据通用模板的布局规则，开机向导界面采用的通用模板的宽度占用6个栅格。若开机向导应用指定的通用模板的位置为居中，则开机向导界面的显示效果可以参见图12中的(a)。
若用户旋转平板电脑，使得平板电脑由竖屏显示状态切换为横屏显示状态，则操作系统通知状态栏显示形态发生变化。开机向导应用通知通用模板进行界面刷新。在横屏显示状态下，平板电脑的屏幕和待显示界面的宽度占用12个栅格，根据通用模板的布局规则，如图12中的(b)所示，开机向导界面采用的通用模板的宽度占用8个栅格。
这样，在界面刷新时，具有同一套界面布局的应用程序，可以针对不同显示形态，根据布局规则和待显示界面的宽度尺寸，自动计算采用通用模板的元素的宽度信息，从而能够自适应各种显示形态进行元素和界面的动态布局。
在本申请的另一些实施例中，电子设备可以提供一些API接口，应用程序可以指定界面上不同元素分别对应的布局规则。在电子设备的显示形态发生变化等界面刷新场景下，操作系统可以通知应用程序。应用程序可以通过这些API接口，调用不同元 素分别对应的布局规则，获取根据布局规则确定的元素的宽度信息，从而对元素和界面进行动态布局。元素的高度可以根据应用程序指定的待显示内容的多少来确定，以使得元素足以容纳应用程序指定的待显示内容。
作为图4所示方法的一种替换方案，参见图13，应用程序确定当前为界面刷新场景时，可以直接调用API接口，从而根据当前显示形态和预设的布局规则，确定元素的宽度。
即，上述图4中的步骤402可以替换为：
1301、应用程序检测到界面刷新信号。
上述图4中的步骤403可以替换为：
1302、应用程序调用栅格管理接口模块，以获取元素的宽度。
上述图4中的步骤410可以替换为：
1303、栅格管理接口模块将元素的宽度，返回给应用程序。
在步骤1303之后，步骤411之前，该方法还可以包括步骤1304：
1304、应用程序将元素的宽度通知给控件模块。
例如，在界面刷新时，对于待显示界面上的弹窗，应用程序可以指定采用上述栅格弹窗的布局规则。对于待显示界面上的气泡，应用程序可以指定采用上述栅格弹窗的布局规则。对于待显示界面上的按钮，应用程序可以指定采用上述栅格按钮的布局规则。对于待显示界面上的卡片，应用程序可以指定采用上述栅格卡片的布局规则。对于具有复杂布局的其他元素，应用程序可以指定采用上述通用模板的布局规则。
示例性的，应用程序通过API接口调用相应的布局规则的伪代码可以为：
public void onConfigurationChanged(Configuration newConfig){//操作系统调应用程序的函数，以通知显示配置信息(例如屏幕和待显示界面宽度的dp值或栅格数量等)发生了变化，即显示形态发生了变化；
super.onConfigurationChanged(newConfig)；
Int newsize＝(type，布局规则布局规则)//应用程序调用API接口中元素对应的布局规则，获取元素的宽度；
AA.setsize(newsize)//应用程序将界面上的元素AA设置为newsize表示的宽度。
示例性的，该应用程序为购物APP，电子设备为手机，手机为竖屏显示状态，手机屏幕和界面的宽度包括4个栅格。手机显示如图14中的(a)和图14中的(b)所示的购物APP的地址管理界面。该地址管理界面包括栅格卡片和栅格单按钮。如图14中的(a)所示，卡片的宽度占用4个栅格。如图14中的(c)所示，栅格单按钮的宽度占用2个栅格。对比图14中的(a)和图14中的(b)可知，栅格卡片和栅格单按钮可以采用不同类型的栅格系统。
手机检测到用户点击home键(或称主键)的操作后显示桌面，购物APP切换到后台。而后，用户旋转手机，手机由竖屏显示状态切换为横屏显示状态，待显示界面的宽度包括8个栅格。手机检测到用户再次打开购物APP的操作后，购物APP从后台切到前台。电子设备的显示形态发生了变化。操作系统通知购物APP进行界面刷新。
采用图13所示的方法，购物APP可以调用栅格管理接口模块，栅格管理接口模块获取当前显示形态对应的屏幕参数信息，并将当前显示形态对应的屏幕参数信息通 知给栅格资源计算模块。而后，栅格资源计算模块可以从栅格系统配置模块中，获取与当前显示形态下待显示界面的宽度对应的第一栅格数量，该第一栅格数量为8。栅格资源计算模块根据待显示的第二界面上的栅格卡片对应的布局规则，从栅格系统配置模块中获取与第一栅格数量对应的第二栅格数量，该第二栅格数量为6。栅格资源计算模块待显示的第二界面上的栅格卡片对应的布局规则，从栅格系统配置模块中获取栅格卡片对应的空边的尺寸和间隔的尺寸。该空边的尺寸为8dp，该间隔的尺寸为8dp。栅格资源计算模块根据当前显示形态对应的屏幕参数信息，第一栅格数量、空边的尺寸和间隔的尺寸，计算栅格的宽度。栅格资源计算模块根据栅格的宽度和第二栅格数量，计算栅格卡片的宽度，并将栅格卡片的宽度返回给栅格管理接口模块。栅格管理接口模块将栅格卡片的宽度，返回给应用程序。应用程序将栅格卡片的宽度通知给控件模块。控件模块根据获取的栅格卡片的宽度，设置栅格卡片的宽度。示例性的，购物APP的地址管理界面上，栅格卡片的示意图可以参见图14中的(c)。
同样地，采用图13所示的方法，购物APP可以获取栅格单按钮的第二栅格数量，间隔的尺寸，空边的尺寸以及栅格单按钮的宽度等信息。例如，栅格单按钮的第二栅格数量为3，间隔的尺寸为24dp，空边的尺寸为24dp。示例性的，购物APP的地址管理界面上，栅格单按钮的示意图可以参见图14中的(d)。
在其他一些实施例中，应用程序可以通过API接口获取margin和gutter的大小，而不用获取元素的宽度信息，从而根据margin和gutter对界面上元素的位置进行调整。例如，电子设备根据栅格系统的定义，可以获取margin大小，从而根据margin大小调整界面上待显示元素距离屏幕边界的位置等。
这样，在界面刷新时，具有同一套界面布局的应用程序，可以针对不同显示形态下待显示界面的宽度尺寸，通过API接口调用各元素分别对应的布局规则，自动计算各元素的宽度信息，从而能够自适应各种显示形态进行元素和界面的动态布局。与现有技术多套界面布局相比，应用程序的开发成本较小，应用程序的打包文件也较小。
在其他一些实施例中，电子设备可以提供一些复合控件。该复合控件可以包括多个元素(也称子元素)，即该复合控件为多个元素组合后的控件。该多个元素中的每个元素还可以包括至少一个子元素。即，复合控件中的每个元素也可能是多个元素的组合。该复合控件整体也可以认为是界面上的一种元素。
复合控件具有相应的布局规则。复合控件对应的布局规则可以用于描述，复合控件内部多个元素之间的相对位置，与当前显示形态下待显示界面的宽度之间的对应关系，即复合控件内部多个元素之间的相对位置的变化规则。复合控件对应的布局规则还可以包括复合控件内部各元素的大小变化规则。应用程序可以使用这些复合控件进行界面设计。在界面刷新时，电子设备可以根据复合控件对应的布局规则，动态布局复合控件中元素的相对位置和大小。
例如，复合控件对应的布局规则包括所述第一元素和所述第二元素的相对位置，与所述第一元素和所述第二元素的高度和宽度，以及当前显示形态下待显示界面的宽度和高度之间的对应关系。示例性的，复合控件1包括元素A和元素B。元素A和元素B设置有宽度和高度。元素A和元素B可以呈水平排列和竖直排列两种排列形态，这两种排列形态之间可以切换，复合控件1也可以称为挪移布局。
示例性的，复合控件1对应的用于设置元素A和元素B排列方式的布局规则可以为：
在元素A和元素B呈竖直排列的情况下，若待显示界面的宽度W能够容纳元素A和元素B的水平排列，即满足W>＝Width(A)+Width(B)+Margin，则切换为水平排列；其中，Width(A)表示元素A的宽度，Width(B)表示元素B的宽度；
在元素A和元素B呈水平排列的情况下，若待显示界面的宽度W减小，不足以容纳元素A和元素B水平排列，则切换为竖直排列；
在元素A和元素B呈竖直排列的情况下，若满足待显示界面在竖直方向的高度H<Height(A)+Height(B)+vertialMargin,则复合控件容器中可以嵌入滚动条，元素A和元素B可以滚动显示。
其中，Height(A)表示元素A在竖直方向的高度，Height(B)表示元素B在竖直方向的高度，vertialMargin表示竖直方向的空边，为竖直方向上屏幕的内容显示区域与屏幕边界之间的最小距离。
其中，W，Width(A)，Width(B)，Margin，H，Height(A)，Height(B)，以及vertialMargin的单位可以为dp。
例如，时钟应用可以采用复合控件1，元素A可以为表盘，元素B可以为表盘下边的相关文字信息。再例如，天气应用可以采用复合控件1，元素A可以为天气状况的图片，元素B可以为天气状况的文字描述。再例如，手机管家可以采用复合控件1，元素A可以为优化检测表盘，元素B可以为控件列表。
示例性的，应用程序为手机管家，电子设备为手机，手机为竖屏显示状态。如图15中的(a)所示，优化检测表盘(即元素A)和控件列表(即元素B)竖直排列。若手机切换为横屏显示状态，待显示界面的宽度能够容纳元素A和元素B水平排列，即满足W>＝Width(A)+Width(B)+Margin，则如图15中的(b)所示，优化检测表盘和控件列表切换为水平排列。
在一些实施例中，上述用于设置复合控件1的元素A和元素B排列方式的布局规则中，元素A的宽度和高度，分别可以替换为元素A的最小宽度和最小高度；元素B的宽度和高度，分别可以替换为元素B的最小宽度和最小高度。复合控件1对应的布局规则还可以包括，用于动态设置元素A和元素B实际的宽度信息的规则。元素A和元素B的实际宽度分别大于各自的最小宽度。电子设备可以根据复合控件1的布局规则，动态确定元素A和元素B的排列方式，以及元素A和元素B的实际大小。
再例如，复合控件2包括A、B、C、D等多个元素，复合控件2对应的布局规则可以为：
若待显示界面的宽度的dp值小于预设值1，则复合控件2中的A、B、C、D等多个元素按照1列进行显示；
若待显示界面的宽度的dp值大于或者等于预设值1，则复合控件2中的A、B、C、D等多个元素按照2列进行显示。
示例性的，应用程序为联系人应用。在手表上，待显示界面的宽度的dp值小于预设值1，如图16中的(a)所示，联系人列表按照1列进行显示。在平板的横屏显示状态下，待显示界面的宽度的dp值大于或者等于预设值1，如图16中的(b)所示， 联系人列表按照2列进行显示。
可以理解的是，复合控件还可以应用在分栏等其他场景中，本申请实施例不再详细举例。
这样，在界面刷新时，具有同一套界面布局的应用程序，可以针对不同显示形态，根据布局规则和待显示界面的宽度的尺寸，自动计算复合控件的宽度信息，从而能够自适应各种显示形态进行元素和界面的动态布局。
基于本申请实施例提供的界面的动态布局方法，在界面刷新时，具有同一套界面布局的应用程序，可以针对不同显示形态，根据布局规则和待显示界面的宽度的尺寸，自动计算界面上的栅格控件、采用通用模板的元素和复合控件的宽度，从而能够自适应各种显示形态进行元素和界面的动态布局。与现有技术多套界面布局相比，应用程序的开发成本较小，应用程序的打包文件也较小。
需要说明的是，本申请实施例给出的布局规则，可动态布局的元素类型，或应用场景等仅是举例说明。可以理解的是，基于本申请实施例提供的界面的动态布局方法，还可以有其他的布局规则，还可以适用于其他以上实施例中未提到的元素类型和应用场景，本申请实施例不予限定。
可以理解的是，为了实现上述功能，电子设备包含了执行各个功能不同的软件模块。本领域技术人员可以结合实施例，对每个特定的应用来使用不同的软件模块来实现所描述的功能，但是这种实现不应认为超出本申请的范围。例如，可以对应各个功能划分各个功能模块，也可以将两个或两个以上的功能集成在一个处理模块中。上述集成的模块可以采用硬件的形式实现。需要说明的是，本实施例中对模块的划分是示意性的，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式。
示例性的，在另一种划分方式中，参见图17，该电子设备可以包括：动态布局规则模块、动态布局动效模块、控件封装和API获取模块和应用程序。
其中，动态布局规则模块，可以用于针对电子设备定义相应的栅格系统，包括栅格数量和margin和gutter的大小等参数。该模块还可以用于定义布局规则，例如定义栅格控件、通用模板和复合控件等对应的布局规则。在界面刷新场景下，该模块可以根据当前显示形态下的待显示界面的宽度和布局规则，确定元素的宽度信息(例如元素的宽度包括的栅格数量)。该模块还可以确定当前显示形态应使用的margin、gutter和栅格的宽度等参数信息，以便确定元素的宽度对应的dp值或像素点的数量等其他宽度信息，以及元素的显示位置(例如元素与屏幕边界之间的距离)等。此外，在界面刷新场景下，该模块还可以确定复合控件中元素的相对位置是否发生变化。
动态布局动效模块，可以用于进行动效处理，提供缩放或移动等常见的动效切换。例如，在界面刷新时，元素和界面的布局发生了变化，动态布局动态模块可以针对该变化进行动效显示。
示例性的，对于复合控件1中的元素A和元素B，当由图15中的(a)所示的竖直排列状态切换为图15中的(b)所示的水平排列状态时，画面并不是直接进行跳变的，而是一个平滑过渡的过程。例如，图15中的(a)所示的元素A逐渐向左旋转90°，呈现如图15中的(b)所示的状态。图15中的(a)所示的元素B平滑地移动到右侧，呈现如图15中的(b)所示的状态。
控件封装和API获取模块，可以用于封装布局规则，提供一组函数API供应用程序调用，比如提供用于获取margin的函数getMargin()，用于获取gutter的函数getGutter()，用于获取栅格的宽度的函数getColumnWidth()，以及用于获取元素宽度的函数getLayoutSize()等。
此外，为了简化应用程序的调用，该模块还可以直接提供一些控件组，比如HwLinearLayout，HwRelativeLayout，HwFrameLayout等，用于封装getMargin()，getgutter()，getColumnWidth()和getLayoutSize()等函数。这样，应用程序可以直接调用这些控件组，而不需要分别调用调用getMargin()，getGutter()等API后，再进行进一步的逻辑处理。
应用程序可以包括时钟，相机，图库，日历，通话，地图，导航，WLAN，蓝牙，音乐，视频，短信息或微信等多种应用。
上述布局规则可以设置在操作系统中，也可以集成在应用程序中。在布局规则设置在操作系统的情况下，动态布局规则模块、动态布局动效模块、控件封装和API获取模块可以位于操作系统的应用程序框架层。
在本申请的实施例中，动态布局规则模块可以为控件封装和API获取模块中封装的布局规则提供定义和规则支持。应用在程序进行界面刷新时，可以调用控件封装和API获取模块提供的布局规则，动态获取界面上元素的宽度信息。动态布局动效模块可以根据动态获取的元素的宽度信息，进行界面动效显示。
以上主要从软件模块的角度，对本申请实施例提供的界面的动态布局方法进行了说明。从电子设备的角度来说，在本申请的实施例提供的界面的动态布局方法中，电子设备可以根据预设的布局规则和当前的显示形态，自动对应用程序界面上的元素进行动态布局。
例如，当布局规则表示元素的宽度包括的栅格数量(即第二栅格数量)，与当前显示形态下待显示界面的宽度包括的栅格数量(即第一栅格数量)之间的对应关系时，本申请实施例提供的界面的动态布局方法，可以参见图18：
1801、电子设备显示第一界面。
其中，第一界面可以为刷新前的界面。示例性的，第一界面可以为图5中的(a)所示的界面。
1802、电子设备检测到界面刷新信号。
示例性的，电子设备检测到界面刷新信号时所对应的界面刷新场景，可以为图5中的(a)-图5中的(b)所示的打开应用程序的场景。再示例性的，该界面刷新场景可以为图5中的(b)-图5中的(c)所示的横/竖屏显示状态切换场景。再示例性的，该界面刷新场景可以为图8所示的分屏显示模式切换场景等。
1803、电子设备获取刷新后待显示的第二界面的宽度对应的第一栅格数量。
示例性的，在图5中的(a)-图5中的(b)所示的情况下，第一栅格数量可以为4。
1804、电子设备根据第二界面上的第一元素对应的布局规则，确定第二栅格数量。
其中，第二界面为待显示的刷新后的界面，布局规则包括第二栅格数量与第一栅格数量之间的对应关系。示例性的，在图5中的(b)所示的情况下，第一元素为栅格 弹窗，栅格弹窗的第二栅格数量为4。
1805、电子设备显示第二界面。
其中，第二界面上包括第一元素，第一元素的宽度与第二栅格数量相匹配。
示例性的，当第一界面为图5中的(a)所示的界面，第二界面可以为图5中的(b)所示的界面，第一元素可以为栅格弹窗。
再示例性的，该第一界面可以为图7中的(a)所示的界面，第二界面可以为图7中的(b)所示的界面，第一元素可以为栅格气泡。
其中，布局规则还包括间隔的尺寸和空边的尺寸，上述步骤1805具体可以包括：
1805a、电子设备根据第二界面的宽度，间隔的尺寸，空边的尺寸，以及第一栅格数量，确定栅格的宽度。
其中，第二界面的宽度具体可以为第二界面的宽度对应的dp值，或者第二界面的宽度对应的像素点的数量。
1805b、电子设备根据第二栅格数量、栅格的宽度和间隔的尺寸，确定第一元素的宽度。
例如，第一元素的宽度具体可以为第一元素的宽度对应的dp值，或者第一元素的宽度对应的像素点的数量。其中，第一元素的宽度可以包括相邻的第二栅格数量的栅格的宽度之和，以及相邻的第二栅格数量的栅格对应的间隔的尺寸之和。
1805c、电子设备显示第二界面。
其中，第二界面上包括第一元素，电子设备可以根据步骤1805b中确定的第一元素的宽度显示第二界面上的第一元素。
示例性的，参见图5中的(b)，栅格弹窗的宽度包括4个栅格的宽度，以及该4个栅格之间的3个间隔的尺寸之和。
再示例性的，参见图6中的(a)，栅格弹窗与6个栅格有重叠，栅格弹窗的宽度包括5个完整的栅格的宽度以及5个间隔的尺寸之和。其中，该5个间隔为该5个完整的栅格的宽度对应的6个栅格之间的间隔。
在步骤1801-步骤1805描述的方案中，电子设备可以根据当前显示形态，自动对应用程序界面上的元素和界面进行动态布局。因而，针对不同显示形态，具有一套界面布局的应用程序，可以实现多种界面布局的动态显示效果。
其中，同一电子设备可以根据预设的布局规则和当前的显示形态，对应用程序界面上的元素进行动态布局。从而可以达到，针对同一电子设备的不同显示形态，具有一套界面布局的应用程序，可以实现多种界面布局的动态显示效果。不同电子设备可以根据预设的布局规则和电子设备的显示形态，对应用程序界面上的元素进行动态布局。从而可以达到，针对不同电子设备的不同显示形态，具有一套界面布局的应用程序，可以实现多种界面布局的动态显示效果。
在以上实施例中，元素的宽度信息可以根据元素的宽度对应的布局规则动态确定，元素的高度可以根据应用程序指定的元素待显示内容的多少来确定。在其他一些实施例中，与元素的宽度信息类似，元素的高度信息也可以根据竖直方向对应的布局规则动态确定。
上述针对屏幕的宽度划分的column可以称为horizoncolumn。上述针对屏幕的宽 度划分的gutter可以称为horizongutter。上述针对屏幕的宽度划分的margin可以称为horizonmargin。
同一元素的高度采用的栅格系统的类型，与该元素的宽度采用的栅格系统的类型，可以相同也可以不同。针对屏幕的高度划分的column可以称为vertialcolumn。针对屏幕的高度划分的gutter可以称为vertialgutter。针对屏幕的高度划分的margin可以称为vertialmargin。
电子设备的屏幕在竖直方向上可以包括两个vertialmargin，若干个vertialcolumn以及若干个vertialgutter。其中，vertialmargin是屏幕边界与最近的vertialcolumn之间的距离。vertialgutter是指vertialcolumn和vertialcolumn之间的距离。
以上实施例中主要是以屏幕在宽度上划分栅格，电子设备预设有元素的宽度对应的布局规则，且电子设备根据元素的宽度对应的布局规则，动态确定元素的宽度信息为例进行说明的。与元素的宽度对应的布局规则类似，屏幕在高度也可以划分栅格。电子设备也可以预设有元素的高度对应的布局规则(例如栅格控件、通用模板和复合控件等元素对应的布局规则)，并根据元素的高度对应的布局规则动态确定元素的高度信息。
元素的高度对应的布局规则可以与元素的宽度对应的布局规则设置在一起，也可以与元素的宽度对应的布局规则分开设置。元素的高度对应的布局规则，同样可以设置在描述文件中或封装在函数中。
在其他一些实施例中，在界面刷新时，应用程序待显示界面上元素的高度信息可以根据元素的高度对应的布局规则动态确定，元素的宽度信息可以根据应用程序指定的元素待显示内容的多少来确定。
在一些实施例中，电子设备提供的布局规则可以设置在操作系统中，为各应用程序所公用。各应用程序可以仅设置一套界面布局。各应用程序均可以指定元素采用栅格控件、通用模板或复合控件等，从而针对不同的显示形态，根据操作系统提供的栅格控件、通用模板或复合控件对应的布局规则确定元素的大小，实现元素和界面的动态布局。与现有技术多套界面布局相比，应用程序的开发成本较小，应用程序的打包文件也较小。
在另一些实施例中，电子设备提供的布局规则可以集成在应用程序中。应用程序可以仅设置一套界面布局。应用程序可以指定元素采用栅格控件、通用模板或复合控件等，从而针对不同的显示形态，根据应用程序自身提供的栅格控件、通用模板或复合控件对应的布局规则确定元素的大小，实现元素和界面的动态布局。其中，布局规则的信息量较小，占用的数据空间也较小。因而，与现有技术多套界面布局相比，应用程序的开发成本较小，应用程序的打包文件也较小。
本申请实施例还提供了一种电子设备，包括屏幕，该屏幕的宽度划分为多个栅格；一个或多个处理器；存储器；以及一个或多个计算机程序。一个或多个计算机程序被存储在存储器中，一个或多个计算机程序包括指令。当指令被一个或多个处理器执行时，使得电子设备执行上述实施例中的各个步骤，以实现上述界面的动态布局方法。
本申请实施例还提供一种计算机存储介质，该计算机存储介质中存储有计算机指令，当该计算机指令在电子设备上运行时，使得电子设备执行上述相关方法步骤实现 上述实施例中的界面的动态布局方法。
本申请实施例还提供一种计算机程序产品，当该计算机程序产品在计算机上运行时，使得计算机执行上述相关步骤，以实现上述实施例中的界面的动态布局方法。
另外，本申请的实施例还提供一种装置，该装置具体可以是芯片系统。该芯片系统应用于电子设备。该芯片系统包括一个或多个接口电路和一个或多个处理器；该接口电路和处理器通过线路互联；该接口电路用于从电子设备的存储器接收信号，并向处理器发送信号，信号包括存储器中存储的计算机指令；当处理器执行计算机指令时，电子设备执行上述相关步骤，以实现上述实施例中的界面的动态布局方法。
另外，本申请的实施例还提供一种装置，该装置具体可以是组件或模块，该装置可包括相连的处理器和存储器；其中，存储器用于存储计算机执行指令，当装置运行时，处理器可执行存储器存储的计算机执行指令，以使芯片执行上述各方法实施例中的界面的动态布局方法。
其中，本申请实施例提供的电子设备、芯片，计算机存储介质、计算机程序产品或芯片均用于执行上文所提供的对应的方法，因此，其所能达到的有益效果可参考上文所提供的对应的方法中的有益效果，此处不再赘述。
通过以上实施方式的描述，所属领域的技术人员可以了解到，为描述的方便和简洁，仅以上述各功能模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能模块完成，即将装置的内部结构划分成不同的功能模块，以完成以上描述的全部或者部分功能。
在本申请所提供的几个实施例中，应该理解到，所揭露的装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，所述模块或单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个装置，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。
所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是一个物理单元或多个物理单元，即可以位于一个地方，或者也可以分布到多个不同地方。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
另外，在本申请各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。
所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个可读取存储介质中。基于这样的理解，本申请实施例的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该软件产品存储在一个存储介质中，包括若干指令用以使得一个设备(可以是单片机，芯片等)或处理器(processor)执行本申请各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(read only memory，ROM)、随机存取存储器(random access memory，RAM)、磁碟或者光盘 等各种可以存储程序代码的介质。
以上内容，仅为本申请的具体实施方式，但本申请的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本申请揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本申请的保护范围之内。因此，本申请的保护范围应以所述权利要求的保护范围为准。

Claims (29)

  1. 一种界面的动态布局方法，应用于电子设备，所述电子设备包括屏幕，所述屏幕用于界面显示，其特征在于，所述屏幕的宽度划分为多个栅格，所述方法包括：
    所述电子设备显示第一界面；
    所述电子设备检测到界面刷新信号；
    所述电子设备获取刷新后待显示的第二界面的宽度对应的第一栅格数量，所述第一栅格数量为所述第二界面的宽度包括的栅格数量；
    所述电子设备根据所述第二界面上的第一元素对应的布局规则，确定第二栅格数量；所述第二栅格数量为所述第一元素的宽度包括的栅格数量，所述布局规则包括所述第二栅格数量与所述第一栅格数量之间的对应关系；
    所述电子设备显示所述第二界面。
  2. 根据权利要求1所述的方法，其特征在于，所述屏幕的宽度还包括至少一个间隔和两个空边，所述间隔为相邻两个所述栅格之间的距离，所述空边为所述屏幕左/右侧的边界与最近的所述栅格之间的距离。
  3. 根据权利要求2所述的方法，其特征在于，所述布局规则还包括所述间隔的尺寸和所述空边的尺寸，所述电子设备显示所述第二界面，包括：
    所述电子设备根据所述第二界面的宽度，所述间隔的尺寸，所述空边的尺寸，以及所述第一栅格数量，确定所述栅格的宽度；
    所述电子设备根据所述第二栅格数量、所述栅格的宽度和所述间隔的尺寸，确定所述第一元素的宽度；
    所述电子设备显示所述第二界面。
  4. 根据权利要求1-3任一项所述的方法，其特征在于，所述电子设备检测到界面刷新信号，包括：
    所述电子设备检测到打开应用程序的操作；
    或者，所述电子设备检测到界面的宽度发生变化。
  5. 根据权利要求4所述的方法，其特征在于，所述电子设备检测到界面的宽度发生变化，包括：
    所述电子设备检测到显示状态发生切换，所述显示状态包括横屏显示状态或竖屏显示状态；
    或者，所述屏幕为折叠屏，所述电子设备检测到所述折叠屏的折叠状态发生变化；
    或者，所述电子设备检测到显示模式发生切换，所述显示模式包括全屏显示模式、分屏显示模式、画中画显示模式或悬浮窗显示模式。
  6. 根据权利要求1-5任一项所述的方法，其特征在于，第一参数用于表征所述第二界面的宽度，所述第一参数所在的不同区间对应不同的所述第一栅格数量。
  7. 根据权利要求1-6任一项所述的方法，其特征在于，所述屏幕的尺寸、比例、显示状态或显示模式不同，所述第二界面的宽度也不同；
    其中，所述显示状态包括横屏显示状态或竖屏显示状态；所述显示模式包括全屏显示模式、分屏显示模式、画中画显示模式或悬浮窗显示模式。
  8. 根据权利要求1-7任一项所述的方法，其特征在于，所述电子设备根据所述第 二界面上的第一元素对应的布局规则，确定第二栅格数量，包括：
    应用程序控制所述第一元素调用应用程序编程接口API，并根据所述第一元素对应的布局规则，确定所述第二栅格数量；
    或者，所述应用程序调用应用程序编程接口API，并根据所述第一元素对应的布局规则，确定所述第二栅格数量。
  9. 根据权利要求1-8任一项所述的方法，其特征在于，所述第一元素对应的布局规则包括：
    空边的尺寸＝第一预设值；
    间隔的尺寸＝第二预设值；
    若所述第一栅格数量为第三预设值，则所述第二栅格数量为第四预设值；
    若所述第一栅格数量为第五预设值，则所述第二栅格数量为第六预设值，所述第五预设值大于所述第三预设值，所述第六预设值大于所述第四预设值。
  10. 根据权利要求9所述的方法，其特征在于，若所述第一栅格数量为第三预设值，则所述第二栅格数量为第四预设值，包括：
    若所述第一栅格数量为第三预设值，且所述第二界面的宽度和高度的比值大于第一预设比例，则所述第二栅格数量为第四预设值；
    若所述第一栅格数量为第五预设值，且所述第二界面的宽度和高度的比值小于或者等于所述第一预设比例，则所述第二栅格数量为第六预设值，所述第六预设值大于所述第四预设值。
  11. 根据权利要求1-10任一项所述的方法，其特征在于，所述第一元素为复合控件，所述复合控件包括第一子元素和第二子元素；所述复合控件对应的布局规则还包括所述第一子元素和所述第二子元素的相对位置，与所述第二界面的宽度之间的对应关系。
  12. 根据权利要求11所述的方法，其特征在于，所述布局规则具体包括，所述第一子元素和所述第二子元素的相对位置，与所述第一子元素和所述第二子元素的高度和宽度，以及所述第二界面的宽度和高度之间的对应关系。
  13. 根据权利要求12所述的方法，其特征在于，所述复合控件包括子元素A和子元素B所述布局规则包括：
    在所述子元素A和所述子元素B沿第一方向排列时，若W>＝Width(A)+Width(B)+Margin，则所述子元素A和所述子元素B切换为沿第二方向排列；其中，W表示所述第二界面的宽度，Width(A)表示所述子元素A的宽度，Width(B)表示所述子元素B的宽度；
    在所述子元素A和所述子元素B沿所述第二方向排列时，若W＜Width(A)+Width(B)+Margin，则所述子元素A和所述子元素B切换为沿所述第一方向排列；
    并且，在所述子元素A和所述子元素B沿所述第一方向时，若H<Height(A)+Height(B)+vertialMargin,则复合控件中嵌入滚动条，所述滚动条用于滚动显示所述所述子元素A和所述所述子元素B；其中，H表示所述第二界面的高度，Height(A)表示所述子元素A的高度，Height(B)表示所述子元素B的高度，vertialMargin表示所述屏幕在所述第一方向上的空边的尺寸。
  14. 一种电子设备，其特征在于，包括：一个或多个处理器；
    屏幕，用于显示界面，所述屏幕的宽度划分为多个栅格；
    以及存储器，所述存储器中存储有代码；
    当所述代码被所述一个或多个处理器执行时，使得所述电子设备执行以下步骤：
    显示第一界面；
    检测到界面刷新信号；
    获取刷新后待显示的第二界面的宽度对应的第一栅格数量，所述第一栅格数量为所述第二界面的宽度包括的栅格数量；
    根据所述第二界面上的第一元素对应的布局规则，确定第二栅格数量；所述第二栅格数量为所述第一元素的宽度包括的栅格数量，所述布局规则包括所述第二栅格数量与所述第一栅格数量之间的对应关系；
    所述电子设备显示所述第二界面。
  15. 根据权利要求14所述的电子设备，其特征在于，所述屏幕的宽度还包括至少一个间隔和两个空边，所述间隔为相邻两个所述栅格之间的距离，所述空边为所述屏幕左/右侧的边界与最近的所述栅格之间的距离。
  16. 根据权利要求15所述的电子设备，其特征在于，所述布局规则还包括所述间隔的尺寸和所述空边的尺寸，所述显示所述第二界面，具体包括：
    根据所述第二界面的宽度，所述间隔的尺寸，所述空边的尺寸，以及所述第一栅格数量，确定所述栅格的宽度；
    根据所述第二栅格数量，所述栅格的宽度和所述间隔的尺寸，确定所述第一元素的宽度；
    显示所述第二界面。
  17. 根据权利要求14-16任一项所述的电子设备，其特征在于，所述检测到界面刷新信号，具体包括：
    检测到打开应用程序的操作；
    或者，检测到界面的宽度发生变化。
  18. 根据权利要求17所述的电子设备，其特征在于，所述检测到界面的宽度发生变化，具体包括：
    检测到显示状态发生切换，所述显示状态包括横屏显示状态或竖屏显示状态；
    或者，所述屏幕为折叠屏，检测到所述折叠屏的折叠状态发生变化；
    或者，检测到显示模式发生切换，所述显示模式包括全屏显示模式、分屏显示模式、画中画显示模式或悬浮窗显示模式。
  19. 根据权利要求14-18任一项所述的电子设备，其特征在于，第一参数用于表征所述第二界面的宽度，所述第一参数所在的不同区间对应不同的所述第一栅格数量。
  20. 根据权利要求14-19任一项所述的电子设备，其特征在于，所述屏幕的尺寸、比例、显示状态或显示模式不同，所述第二界面的宽度也不同；
    其中，所述显示状态包括横屏显示状态或竖屏显示状态；所述显示模式包括全屏显示模式、分屏显示模式、画中画显示模式或悬浮窗显示模式。
  21. 根据权利要求14-20任一项所述的电子设备，其特征在于，所述根据所述第 二界面上的第一元素对应的布局规则，确定第二栅格数量，具体包括：
    通过应用程序控制所述第一元素调用应用程序编程接口API，并根据所述第一元素对应的布局规则，确定所述第二栅格数量；
    或者，通过所述应用程序调用应用程序编程接口API，并根据所述第一元素对应的布局规则，确定所述第二栅格数量。
  22. 根据权利要求14-21任一项所述的电子设备，其特征在于，所述第一元素对应的布局规则包括：
    空边的尺寸＝第一预设值；
    间隔的尺寸＝第二预设值；
    若所述第一栅格数量为第三预设值，则所述第二栅格数量为第四预设值；
    若所述第一栅格数量为第五预设值，则所述第二栅格数量为第六预设值，所述第五预设值大于所述第三预设值，所述第六预设值大于所述第四预设值。
  23. 根据权利要求22所述的电子设备，其特征在于，若所述第一栅格数量为第三预设值，则所述第二栅格数量为第四预设值，具体包括：
    若所述第一栅格数量为第三预设值，且所述第二界面的宽度和高度的比值大于第一预设比例，则所述第二栅格数量为第四预设值；
    若所述第一栅格数量为第五预设值，且所述第二界面的宽度和高度的比值小于或者等于所述第一预设比例，则所述第二栅格数量为第六预设值，所述第六预设值大于所述第四预设值。
  24. 根据权利要求14-23任一项所述的电子设备，其特征在于，所述第一元素为复合控件，所述复合控件包括第一子元素和第二子元素；所述复合控件对应的布局规则还包括所述第一子元素和所述第二子元素的相对位置，与所述第二界面的宽度之间的对应关系。
  25. 根据权利要求24所述的电子设备，其特征在于，所述布局规则具体包括，所述第一子元素和所述第二子元素的相对位置，与所述第一子元素和所述第二子元素的高度和宽度，以及所述第二界面的宽度和高度之间的对应关系。
  26. 根据权利要求25所述的电子设备，其特征在于，所述复合控件包括子元素A和子元素B所述布局规则包括：
    在所述子元素A和所述子元素B沿第一方向排列时，若W>＝Width(A)+Width(B)+Margin，则所述子元素A和所述子元素B切换为沿第二方向排列；其中，W表示所述第二界面的宽度，Width(A)表示所述子元素A的宽度，Width(B)表示所述子元素B的宽度；
    在所述子元素A和所述子元素B沿所述第二方向排列时，若W＜Width(A)+Width(B)+Margin，则所述子元素A和所述子元素B切换为沿所述第一方向排列；
    并且，在所述子元素A和所述子元素B沿所述第一方向时，若H<Height(A)+Height(B)+vertialMargin,则复合控件中嵌入滚动条，所述滚动条用于滚动显示所述所述子元素A和所述所述子元素B；其中，H表示所述第二界面的高度，Height(A)表示所述子元素A的高度，Height(B)表示所述子元素B的高度，vertialMargin表示所述屏幕在所述第一方向上的空边的尺寸。
  27. 一种计算机存储介质，其特征在于，包括计算机指令，当所述计算机指令在电子设备上运行时，使得所述电子设备执行如权利要求1-13中任一项所述的界面的动态布局方法。
  28. 一种计算机程序产品，其特征在于，当所述计算机程序产品在计算机上运行时，使得所述计算机执行如权利要求1-13中任一项所述的界面的动态布局方法。
  29. 一种芯片系统，其特征在于，所述芯片系统应用于电子设备；所述芯片系统包括一个或多个接口电路和一个或多个处理器；所述接口电路和所述处理器通过线路互联；所述接口电路用于从所述电子设备的存储器接收信号，并向所述处理器发送所述信号，所述信号包括所述存储器中存储的计算机指令；当所述处理器执行所述计算机指令时，所述电子设备执行如权利要求1-13中任一项所述的界面的动态布局方法。
PCT/CN2020/107185 2019-08-09 2020-08-05 一种界面的动态布局方法及设备 WO2021027661A1 (zh)

Priority Applications (4)

Application Number Priority Date Filing Date Title
CN202080052630.7A CN114365080A (zh) 2019-08-09 2020-08-05 一种界面的动态布局方法及设备
EP20852483.5A EP3995948A4 (en) 2019-08-09 2020-08-05 METHOD AND DEVICE FOR DYNAMIC INTERFACE LAYOUT
US17/667,778 US11709688B2 (en) 2019-08-09 2022-02-09 Dynamic interface layout method and device
US18/328,940 US20240126574A1 (en) 2019-08-09 2023-06-05 Dynamic Interface Layout Method and Device

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN201910736677.4A CN110597510B (zh) 2019-08-09 2019-08-09 一种界面的动态布局方法及设备
CN201910736677.4 2019-08-09

Related Child Applications (1)

Application Number Title Priority Date Filing Date
US17/667,778 Continuation US11709688B2 (en) 2019-08-09 2022-02-09 Dynamic interface layout method and device

Publications (1)

Publication Number Publication Date
WO2021027661A1 true WO2021027661A1 (zh) 2021-02-18

Family

ID=68854131

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2020/107185 WO2021027661A1 (zh) 2019-08-09 2020-08-05 一种界面的动态布局方法及设备

Country Status (4)

Country Link
US (2) US11709688B2 (zh)
EP (1) EP3995948A4 (zh)
CN (2) CN110597510B (zh)
WO (1) WO2021027661A1 (zh)

Families Citing this family (14)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN110597510B (zh) * 2019-08-09 2021-08-20 华为技术有限公司 一种界面的动态布局方法及设备
CN111338522B (zh) * 2020-02-19 2021-06-18 望海康信(北京)科技股份公司 显示界面的布局方法、装置、电子设备及存储介质
CN112416491B (zh) * 2020-11-12 2022-11-22 联想(北京)有限公司 一种显示状态的调整方法、装置、设备及存储介质
CN115079907A (zh) * 2021-03-10 2022-09-20 花瓣云科技有限公司 一种应用程序的显示方法及电子设备
CN113849254A (zh) * 2021-09-06 2021-12-28 掌阅科技股份有限公司 页面布局的自适应调整方法及计算设备
CN113835575A (zh) * 2021-09-23 2021-12-24 瀚云科技有限公司 一种信息展示的方法、装置、电子设备和存储介质
CN116450251A (zh) * 2022-01-05 2023-07-18 华为技术有限公司 一种适配多设备的页面布局的方法及电子设备
CN116841663A (zh) * 2022-03-25 2023-10-03 华为技术有限公司 一种界面的自适应显示方法及终端设备
CN116974659A (zh) * 2022-04-21 2023-10-31 华为技术有限公司 界面布局方法和装置
CN115080140A (zh) * 2022-04-26 2022-09-20 网易（杭州）网络有限公司 显示控制方法、装置和电子设备
CN117008752A (zh) * 2022-04-28 2023-11-07 华为技术有限公司 一种显示方法、装置及存储介质
CN117492881A (zh) * 2022-07-26 2024-02-02 华为技术有限公司 可折叠电子设备、用于折叠屏的显示方法
CN117539561A (zh) * 2022-08-02 2024-02-09 华为技术有限公司 页面显示方法和相关装置
CN116719597B (zh) * 2023-08-10 2024-01-26 北京冠群信息技术股份有限公司 基于格栅布局的自适应视图渲染方法及创建方法

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20130305144A1 (en) * 2012-05-09 2013-11-14 Ni Group Limited Method of Publishing Digital Content
CN103970894A (zh) * 2014-05-27 2014-08-06 合一网络技术(北京)有限公司 自适应调整的界面流式布局显示的方法和系统
CN110597510A (zh) * 2019-08-09 2019-12-20 华为技术有限公司 一种界面的动态布局方法及设备
CN111190681A (zh) * 2019-12-31 2020-05-22 华为技术有限公司 显示界面适配方法、显示界面适配设计方法和电子设备

Family Cites Families (33)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US7296243B2 (en) * 2002-03-19 2007-11-13 Aol Llc Animating display motion
US20060215577A1 (en) 2005-03-22 2006-09-28 Guichard James N System and methods for identifying network path performance
KR100772924B1 (ko) 2006-09-28 2007-11-02 한국전자통신연구원 나노 운영체제 기반 유비쿼터스 센서 네트워크의 전력절감을 위한 방법
US8127223B2 (en) * 2008-01-23 2012-02-28 Mellmo Inc. User interface method and apparatus for data from data cubes and pivot tables
JP2012083160A (ja) 2010-10-08 2012-04-26 Aisin Aw Co Ltd 経路関連情報提供装置、経路関連情報提供方法、経路関連情報提供プログラムおよび経路案内システム
US8694900B2 (en) * 2010-12-13 2014-04-08 Microsoft Corporation Static definition of unknown visual layout positions
CN102611735B (zh) 2011-12-21 2015-12-09 北京奇虎科技有限公司 一种应用服务的负载均衡方法及系统
US11308227B2 (en) * 2012-01-09 2022-04-19 Visa International Service Association Secure dynamic page content and layouts apparatuses, methods and systems
US20130239031A1 (en) * 2012-03-06 2013-09-12 Apple Inc. Application for viewing images
CN103415835B (zh) * 2012-10-08 2016-08-03 华为终端有限公司 一种触屏装置用户界面的处理方法及触屏装置
US20140181646A1 (en) * 2012-12-20 2014-06-26 Microsoft Corporation Dynamic layout system for remote content
CN103699383A (zh) * 2013-12-23 2014-04-02 乐视网信息技术（北京）股份有限公司 一种页面展示控制方法及装置
CN104007991B (zh) * 2014-06-06 2019-06-14 百度在线网络技术（北京）有限公司 应用程序界面布局调整方法和装置
US10037122B2 (en) * 2014-09-26 2018-07-31 Oracle International Corporation Canvas layout algorithm
CN105991435B (zh) 2015-02-05 2019-08-27 华为技术有限公司 用于获取端口路径的方法及装置
US10558742B2 (en) * 2015-03-09 2020-02-11 Vinyl Development LLC Responsive user interface system
US10241975B2 (en) * 2015-04-02 2019-03-26 Apple Inc. Dynamically determining arrangement of a layout
US10326655B1 (en) 2015-06-01 2019-06-18 Amazon Technologies, Inc. Infrastructure replication
US9965175B2 (en) * 2015-08-25 2018-05-08 Myscript System and method of digital note taking
JP2017097686A (ja) * 2015-11-26 2017-06-01 キヤノン株式会社 情報処理装置、その制御方法及びプログラム
EP3373523B1 (en) 2015-11-30 2019-09-04 Huawei Technologies Co., Ltd. Method, device and system for switching between mobile edge computing platforms
CN106101262A (zh) 2016-07-21 2016-11-09 广州高能计算机科技有限公司 一种基于以太网的直连架构计算集群系统及构建方法
US11277338B2 (en) 2016-09-26 2022-03-15 Juniper Networks, Inc. Distributing service function chain data and service function instance data in a network
JP6811106B2 (ja) * 2017-01-25 2021-01-13 矢崎総業株式会社 ヘッドアップディスプレイ装置および表示制御方法
CN108737271B (zh) 2017-04-14 2021-06-01 华为技术有限公司 一种报文路由方法、装置及系统
CN107612832A (zh) 2017-08-09 2018-01-19 上海斐讯数据通信技术有限公司 一种路由器的控制方法及系统和一种路由器
CN107592274A (zh) 2017-09-01 2018-01-16 洛阳市恒凯网络技术服务有限公司 一种计算机网络服务器的控制管理方法
US20190355177A1 (en) * 2018-05-15 2019-11-21 Honeywell International Inc. Building system maintenance using mixed reality
CN208849791U (zh) 2018-10-23 2019-05-10 中国石油天然气股份有限公司西南油气田分公司通信与信息技术中心 多功能一体化路由器
CN109725885A (zh) * 2018-11-16 2019-05-07 国网江苏省电力有限公司盐城供电分公司 一种基于移动平台的应用开发架构
CN109917956B (zh) * 2019-02-22 2021-08-03 华为技术有限公司 一种控制屏幕显示的方法和电子设备
JP2022532871A (ja) * 2019-05-20 2022-07-20 ライト フィールド ラボ、インコーポレイテッド モジュラー表示システムのための走査線リフレッシュ
US11435899B1 (en) * 2019-06-03 2022-09-06 Zachary Michaels Dynamic view user interface system and method

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20130305144A1 (en) * 2012-05-09 2013-11-14 Ni Group Limited Method of Publishing Digital Content
CN103970894A (zh) * 2014-05-27 2014-08-06 合一网络技术(北京)有限公司 自适应调整的界面流式布局显示的方法和系统
CN110597510A (zh) * 2019-08-09 2019-12-20 华为技术有限公司 一种界面的动态布局方法及设备
CN111190681A (zh) * 2019-12-31 2020-05-22 华为技术有限公司 显示界面适配方法、显示界面适配设计方法和电子设备

Non-Patent Citations (1)

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

Also Published As

Publication number Publication date
US11709688B2 (en) 2023-07-25
EP3995948A4 (en) 2022-08-17
US20220269515A1 (en) 2022-08-25
CN110597510A (zh) 2019-12-20
CN110597510B (zh) 2021-08-20
EP3995948A1 (en) 2022-05-11
CN114365080A (zh) 2022-04-15
US20240126574A1 (en) 2024-04-18

Similar Documents

Publication Publication Date Title
WO2021027661A1 (zh) 一种界面的动态布局方法及设备
WO2021027747A1 (zh) 一种界面显示方法及设备
US20230115868A1 (en) Displaying Interfaces in Different Display Areas Based on Activities
WO2020259452A1 (zh) 一种移动终端的全屏显示方法及设备
WO2021213164A1 (zh) 应用界面交互方法、电子设备和计算机可读存储介质
WO2021135730A1 (zh) 显示界面适配方法、显示界面适配设计方法和电子设备
WO2021036771A1 (zh) 具有可折叠屏幕的电子设备及显示方法
WO2021036585A1 (zh) 一种柔性屏显示方法和电子设备
WO2021036770A1 (zh) 一种分屏处理方法及终端设备
WO2021052279A1 (zh) 一种折叠屏显示方法及电子设备
WO2022022575A1 (zh) 显示控制方法、装置和存储介质
WO2021036898A1 (zh) 折叠屏设备中应用打开方法及相关装置
WO2023103951A1 (zh) 一种折叠屏的显示方法及相关装置
WO2022001258A1 (zh) 多屏显示方法、装置、终端设备及存储介质
WO2020155875A1 (zh) 电子设备的显示方法、图形用户界面及电子设备
WO2021238370A1 (zh) 显示控制方法、电子设备和计算机可读存储介质
US20230298498A1 (en) Full-Screen Display Method and Apparatus, and Electronic Device
CN113961157A (zh) 显示交互系统、显示方法及设备
WO2020233593A1 (zh) 一种前景元素的显示方法和电子设备
US20230353862A1 (en) Image capture method, graphic user interface, and electronic device
WO2022143180A1 (zh) 协同显示方法、终端设备及计算机可读存储介质
EP4266173A1 (en) Application display method and apparatus, chip system, medium and program product
WO2021179829A1 (zh) 一种人机交互方法及设备
WO2020228735A1 (zh) 一种显示应用的方法及电子设备
CN115729346A (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: 20852483

Country of ref document: EP

Kind code of ref document: A1

NENP Non-entry into the national phase

Ref country code: DE

ENP Entry into the national phase

Ref document number: 2020852483

Country of ref document: EP

Effective date: 20220204