WO2023231818A1 - 一种应用界面显示方法及电子设备 - Google Patents

一种应用界面显示方法及电子设备 Download PDF

Info

Publication number
WO2023231818A1
WO2023231818A1 PCT/CN2023/095508 CN2023095508W WO2023231818A1 WO 2023231818 A1 WO2023231818 A1 WO 2023231818A1 CN 2023095508 W CN2023095508 W CN 2023095508W WO 2023231818 A1 WO2023231818 A1 WO 2023231818A1
Authority
WO
WIPO (PCT)
Prior art keywords
interface
application interface
application
electronic device
elements
Prior art date
Application number
PCT/CN2023/095508
Other languages
English (en)
French (fr)
Other versions
WO2023231818A9 (zh
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 华为技术有限公司
Publication of WO2023231818A1 publication Critical patent/WO2023231818A1/zh
Publication of WO2023231818A9 publication Critical patent/WO2023231818A9/zh

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/20—Software design

Definitions

  • the present application relates to the field of terminal technology, and in particular, to an application interface display method and electronic device.
  • the forms of smart terminals are becoming increasingly diverse, and the electronic devices owned by users have gradually expanded from smart phones to smart watches, smart TVs, smart cars and other devices.
  • the diversification of electronic device types has brought about diversification of screens.
  • the interface of some applications may need to be migrated between the screens of different electronic devices. For example, the application interface of a smartphone may be displayed on a smart TV.
  • the application interface when the application interface is migrated between the screens of different electronic devices, a better display effect cannot be achieved.
  • the layout of the application interface is suitable for small screens, and a better display effect can be achieved when displayed on a small screen.
  • the application interface migrates to large-screen electronic devices (such as from smartphones to smart TVs)
  • the application interface cannot achieve a better display effect when displayed on the large screen.
  • the application interface when the application interface is displayed on a large screen, the application interface of multiple small windows will be displayed.
  • the application interface of each small window corresponds to an application interface displayed on the small screen, and each application interface is generally displayed on the small screen. will be displayed in full screen.
  • this method cannot take advantage of the large screen and affects the display effect of the application interface. Therefore, when the application interface is migrated between screens of different electronic devices, a better display effect cannot be achieved. This is an urgent problem that needs to be solved.
  • This application provides an application interface display method and an electronic device to solve the problem that the application interface cannot achieve a better display effect when it is migrated between screens of different electronic devices.
  • embodiments of the present application provide an application interface display method, which method can be applied to an electronic device provided by the present application.
  • the method is specifically:
  • the electronic device displays an application interface of the target application.
  • the interface layout of the application interface corresponds to the screen size of the electronic device or the size of the application interface.
  • the interface layout of the application interface is based on the application interface in the electronic device.
  • the layout parameters on the device are determined according to the interface attributes of the application interface of the target application and the screen size of the electronic device and/or the size of the application interface.
  • the interface attributes are constraints.
  • the application interface of the target application when the application interface of the target application is migrated to the electronic device, it can be determined based on the interface attributes of the target application, the screen size of the electronic device and/or the size of the application interface on the electronic device. layout parameters, so that the interface layout corresponding to the screen size of the electronic device can be displayed according to the layout parameters of the application interface. Therefore, the application interface can be adapted to the screen size of the electronic device, thereby achieving a better display effect.
  • the interface attributes of the application interface include a spacing attribute, and the spacing attribute is used to determine the spacing between adjacent interface elements in the application interface.
  • the spacing between adjacent interface elements in the application interface can be adaptively determined to improve the display effect.
  • the spacing attribute is used to determine that the spacing between adjacent interface elements in the application interface is the same, and the spacing between the interface elements at the edge of the application interface and the edge of the application interface is the same, or Are not the same;
  • the spacing attribute is used to determine the maximum value and ⁇ or the minimum value of the spacing between adjacent interface elements in the application interface, and ⁇ or the spacing attribute is used to determine the interface elements at the edge of the application interface The maximum and ⁇ or minimum distance from the edge of the app interface.
  • the spacing attribute includes a mapping relationship between the spacing between adjacent interface elements in the application interface and the size of adjacent interface elements, and/or the relationship between the interface elements at the edge of the application interface and Mapping relationship between the spacing of the application interface edge and the size of the interface elements of the application interface edge.
  • the spacing between adjacent interface elements in the application interface can be adaptively adjusted according to the size of the adjacent interface elements, and the spacing between the interface elements at the edge of the application interface and the edge of the application interface can be adjusted according to the size of the interface elements at the edge of the application interface.
  • the size is adjusted adaptively.
  • the interface attributes of the application interface include element arrangement attributes, and the element arrangement attributes are used to determine the display area in the application interface and the display area where each interface element is located.
  • the display area in the application interface and the display area where each interface element is located can be determined adaptively.
  • the element arrangement attributes include row attributes and/or column attributes.
  • the row attributes are used to determine the number of rows of interface elements in the application interface and the row where the interface elements are located.
  • the column attributes Used to determine the number of columns of interface elements in the application interface and the column in which the interface elements are located.
  • the number of rows of interface elements and the rows where interface elements are located, as well as the number of columns of interface elements and the columns where interface elements are located can be adaptively determined.
  • the row attributes include a mapping relationship between the length and width of the application interface and the number of rows of interface elements in the application interface
  • the column attributes include the length and width of the application interface. The mapping relationship between the width ratio and the number of columns of interface elements in the application interface.
  • the ratio of the length to the width of the application interface can indirectly reflect the screen size of the electronic device, determining the row attributes and/or the column attributes according to the ratio of the length to the width of the application interface can enable the application to The arrangement of interface elements in the interface is more suitable for the screen size of electronic devices.
  • the row attributes include at least one of the maximum number of rows, the minimum number of rows, the maximum number of row elements, and the minimum number of row elements
  • the column attributes include the maximum number of columns and the minimum number of columns. , at least one of the maximum number of column elements and the minimum number of column elements.
  • the interface attributes of the application interface include hidden attributes, and the hidden attributes are used to determine whether to hide or display each interface element in the application interface.
  • each interface element in the application interface can be adaptively determined to be hidden or displayed.
  • the hidden attributes include the hidden priority corresponding to each interface element in the application interface, Each interface element in the application interface is hidden according to the hiding priority order of each interface element.
  • the hidden attributes also include a set of elements that can be hidden and/or a maximum number of hidden elements.
  • the set of elements that can be hidden is a set of interface elements that are allowed to be hidden in the application interface.
  • the hidden elements The maximum number is the maximum number of interface elements allowed to be hidden in the application interface.
  • the interface attributes of the application interface include a scaling attribute, and the scaling attribute is used to determine the size of each interface element in the application interface.
  • the size of each interface element in the application interface can be adaptively determined to improve the display effect.
  • the scaling attribute is used to determine the size scaling ratio of each interface element in the application interface, where the size scaling ratio of any interface element is based on the width of the interface element and the size of the electronic device.
  • the screen size and/or the size of the application interface are obtained.
  • the interface attributes of the application interface include a repeat attribute, and the repeat attribute is used to determine the number of repeated displays of each interface element in the application interface.
  • the number of repeated displays of each interface element in the application interface is determined based on the repetition attribute, the size of each interface element in the application interface, and the ratio of the length and width of the application interface.
  • the ratio of the length and width of the application interface can indirectly reflect the screen size of the electronic device
  • the number of repeated displays is determined based on the ratio of the length and width of the application interface, which can make the interface elements in the application interface repeated. Displays screen sizes more suitable for electronic devices.
  • the electronic device displays the application interface of the target application, it further includes:
  • the electronic device obtains the interface attributes of the application interface; the electronic device determines the content of the application interface according to the screen size of the electronic device and/or the size of the application interface, and the interface attributes of the application interface.
  • the size of each interface element the electronic device determines the layout parameters of the application interface according to the size of each interface element in the application interface and the interface attributes of the application interface.
  • the layout parameters of the application interface can be automatically determined according to the current screen size, so that the interface layout of the application interface adapts to the current screen size.
  • each interface attribute of the application interface is set with a corresponding attribute priority
  • the electronic device determines the size of the application interface according to the screen size of the electronic device and/or the size of the application interface, and the application interface.
  • the interface attributes determine the size of each interface element in the application interface, including:
  • the electronic device determines an intermediate value of the size of each interface element in the application interface according to the first attribute according to the screen size of the electronic device and/or the size of the application interface; the electronic device determines the intermediate value of the size of each interface element in the application interface according to the electronic device.
  • the screen size of the device and/or the size of the application interface, according to the second attribute adjust the intermediate value of the size of each interface element in the application interface to obtain the size of each interface element in the application interface, the
  • the first attribute and the second attribute are any two interface attributes of the application interface, and the attribute priority of the first attribute is greater than the attribute priority of the second attribute.
  • the size of each interface element can be set according to the priority of the preset attributes, so that the corresponding display effect can be highlighted according to specific needs.
  • the application interface includes K interface elements
  • the electronic device determines the layout parameters of the application interface based on the size of each interface element in the application interface and the interface attributes of the application interface, include:
  • the electronic device determines, based on the size of each interface element in the application interface and the interface attributes of the application interface, based on the remaining space of the application interface, that T interface elements among the K interface elements are within the remaining space. layout parameters in the space; the electronic device updates the remaining space, and if the remaining space is greater than a preset threshold, returns the remaining space based on the application interface to determine T interfaces among the K interface elements Steps to layout parameters of elements in the remaining space.
  • the layout parameters in the remaining space can be determined for T interface elements each time, so that the layout parameters of different batches of interface elements can be set separately to satisfy Personalization requirements for interface elements.
  • embodiments of the present application provide an application interface display method. Both the first electronic device and the second electronic device are used to display the application interface of the target application.
  • the screen size of the first electronic device is different from that of the second electronic device.
  • the screen sizes of electronic devices are different.
  • the methods include:
  • the first electronic device displays a first application interface of the target application, and the interface layout of the first application interface corresponds to the screen size of the first electronic device or the size of the first application interface;
  • the second electronic device displays a second application interface of the target application, and the interface layout of the second application interface corresponds to the screen size of the second electronic device or the size of the second application interface.
  • the interface layout of the first application interface includes at least the spacing between adjacent interface elements, the display area in the application interface and the display area where each interface element is located, the hiding or display of each interface element, and the display area of each interface element.
  • the size of the interface elements and/or the number of repeated displays of each interface element is different from the interface layout of the second application interface.
  • the interface attributes of the first application interface include a spacing attribute, and the spacing attribute is used to determine the spacing between adjacent interface elements in the first application interface.
  • the spacing between adjacent interface elements in the first application interface can be adaptively determined, thereby improving the display effect.
  • the spacing attribute is used to determine that the spacing between adjacent interface elements in the application interface is the same, and the spacing between the interface elements at the edge of the application interface and the edge of the application interface is the same, or Are not the same;
  • the spacing attribute is used to determine the maximum value and ⁇ or the minimum value of the spacing between adjacent interface elements in the first application interface, and ⁇ or the spacing attribute is used to determine the first application interface The maximum and ⁇ or minimum value of the distance between the edge interface element and the edge of the first application interface.
  • the spacing between adjacent interface elements in the first application interface and the spacing between the interface elements at the edge of the first application interface and the edge of the first application interface are adaptively determined, thereby improving flexibility.
  • the spacing attribute includes a mapping relationship between the spacing between adjacent interface elements in the application interface and the size of adjacent interface elements, and/or the relationship between the interface elements at the edge of the application interface and Mapping relationship between the spacing of the application interface edge and the size of the interface elements of the application interface edge.
  • the spacing between adjacent interface elements in the first application interface can be adaptively adjusted according to the size of the adjacent interface elements, and the spacing between the interface elements at the edge of the first application interface and the edge of the first application interface can be adjusted according to the size of the adjacent interface elements.
  • the size of the interface elements at the edge of the application interface is adaptively adjusted.
  • the interface attributes of the first application interface include element arrangement attributes, and the element arrangement The attributes are used to determine the display area in the first application interface and the display area where each interface element is located.
  • the display area in the first application interface and the display area where each interface element is located can be determined adaptively.
  • the element arrangement attributes include row attributes and/or column attributes.
  • the row attributes are used to determine the number of rows of interface elements in the first application interface and the row where the interface elements are located.
  • the column attribute is used to determine the number of columns of interface elements in the first application interface and the column in which the interface elements are located.
  • the number of rows of interface elements and the rows where interface elements are located, as well as the number of columns of interface elements and the columns where interface elements are located can be adaptively determined.
  • the row attributes include a mapping relationship between the length and width ratio of the first application interface and the number of rows of interface elements in the first application interface
  • the column attributes include the mapping relationship between the length and width of the first application interface.
  • the row attributes and/or the column are determined according to the ratio of the length to the width of the first application interface.
  • the attributes can make the arrangement of interface elements in the first application interface more suitable for the screen size of the electronic device.
  • the row attributes include at least one of the maximum number of rows, the minimum number of rows, the maximum number of row elements, and the minimum number of row elements
  • the column attributes include the maximum number of columns and the minimum number of columns. , at least one of the maximum number of column elements and the minimum number of column elements.
  • the interface attributes of the first application interface include hidden attributes, and the hidden attributes are used to determine whether each interface element in the first application interface is hidden or displayed.
  • the hidden attributes include the corresponding hiding priority of each interface element in the first application interface, and each interface element in the first application interface is hidden in the order of the hiding priority of each interface element.
  • the hidden attributes also include a set of elements that can be hidden and/or a maximum number of elements that can be hidden, and the set of elements that can be hidden is a set of interface elements that are allowed to be hidden in the first application interface.
  • the maximum number of hidden elements is the maximum number of interface elements allowed to be hidden in the first application interface.
  • the interface attributes of the first application interface include a scaling attribute, and the scaling attribute is used to determine the size of each interface element in the first application interface.
  • the size of each interface element in the first application interface can be determined adaptively, thereby improving the display effect.
  • the scaling attribute is used to determine the size scaling ratio of each interface element in the first application interface, wherein the size scaling ratio of any interface element is based on the width of the interface element and the electronic The screen size of the device and/or the size of the first application interface are obtained.
  • the interface attributes of the first application interface include a repeat attribute, and the repeat attribute is used to determine the number of repeated displays of each interface element in the first application interface.
  • the number of repeated displays of each interface element in the first application interface is based on the repetition attribute, the size of each interface element in the first application interface, the length and length of the first application interface.
  • the width ratio is determined.
  • the ratio of the length to the width of the first application interface can indirectly reflect the screen size of the electronic device, Therefore, determining the number of repeated displays based on the ratio of the length and width of the first application interface can make the repeated display of interface elements in the first application interface more suitable for the screen size of the electronic device.
  • the electronic device displays the first application interface of the target application, it further includes:
  • the electronic device obtains the interface attributes of the first application interface; the electronic device obtains the interface attributes of the first application interface according to the screen size of the electronic device and/or the size of the first application interface, and the interface attributes of the first application interface, Determine the size of each interface element in the first application interface; the electronic device determines the size of each interface element in the first application interface according to the size of each interface element in the first application interface and the interface attributes of the first application interface. layout parameters.
  • the layout parameters of the first application interface can be automatically determined according to the current screen size, so that the interface layout of the first application interface adapts to the current screen size.
  • this application provides an electronic device, including: one or more processors; one or more memories;
  • the one or more memories store one or more computer programs, and the one or more computer programs include instructions that, when executed by the one or more processors, cause the electronic device to Perform any possible method as in the first aspect.
  • the present application provides a system.
  • the system includes a first electronic device and a second electronic device.
  • the first electronic device and the second electronic device are both used to display an application interface of a target application.
  • the first electronic device The screen size is different from the screen size of the second electronic device;
  • the first electronic device is configured to display a first application interface of the target application, and the interface layout of the first application interface corresponds to the screen size of the first electronic device or the size of the first application interface;
  • the second electronic device is configured to display a second application interface of the target application, and the interface layout of the second application interface corresponds to the screen size of the second electronic device or the size of the second application interface.
  • the present application provides a computer-readable storage medium.
  • the computer-readable storage medium includes a computer program.
  • the computer program When the computer program is run on an electronic device, the electronic device causes the electronic device to execute any one of the first aspects. Possible ways.
  • inventions of the present application provide a chip.
  • the chip includes a processor and a communication interface.
  • the communication interface is used to receive code instructions and transmit them to the processor.
  • the processor is configured to call the code instructions transmitted by the communication interface to execute the steps of the processor in either the first aspect or the second aspect.
  • the present application also provides a computer program product including instructions that, when executed, cause the methods described in the above aspects to be executed.
  • Figure 1 is a schematic structural diagram of an electronic device 100 provided by an embodiment of the present application.
  • Figures 2a to 2b are schematic scene diagrams of an application interface display method provided by an embodiment of the present application.
  • Figures 3a to 3b are schematic diagrams of the interface layout corresponding to the equalization type in the spacing attribute
  • Figures 4a to 4h are display renderings of interface elements maintained evenly distributed within the application interface
  • Figures 5a to 5b are display renderings in which the spacing of interface elements is determined according to the size of the interface elements
  • Figures 6a to 6b are schematic diagrams of the interface layout corresponding to element arrangement attributes
  • Figures 7a to 7d are schematic diagrams of the application interface display effects corresponding to element arrangement attributes
  • Figures 8a to 8d are schematic diagrams of the application interface display effects corresponding to hidden attributes
  • Figures 9a to 9d are schematic diagrams of the application interface display effects corresponding to the zoom attribute
  • Figures 10a to 10d are schematic diagrams of the application interface display effects corresponding to repeated attributes
  • Figure 11 is a schematic diagram of the development process corresponding to an interface display method provided by an embodiment of the present application.
  • Figure 12 is a schematic diagram of the software architecture corresponding to an application interface display method provided by this application.
  • Figure 13 is a schematic diagram of application interface loading corresponding to an interface display method provided by an embodiment of the present application.
  • Figure 14 is a schematic flowchart of the steps for determining the spacing parameters of the application interface in an interface display method provided by an embodiment of the present application;
  • Figure 15 is a schematic flowchart of the steps for determining layout parameters of interface elements in the remaining space in an interface display method provided by an embodiment of the present application;
  • Figure 16 is a schematic flowchart of steps for determining the size of each interface element in an application interface in an interface display method provided by an embodiment of the present application;
  • Figure 17 is a schematic structural diagram of an electronic device provided by an embodiment of the present application.
  • multiple in the embodiments of this application means two or more.
  • plural in the embodiments of this application can also be understood as “at least two”.
  • At least one can be understood as One or more, for example, is understood to mean one, two or more.
  • including at least one means including one, two or more, and does not limit which ones are included.
  • including A, At least one of B and C then it can include A, B, C, A and B, A and C, B and C, or A and B and C.
  • “at least one” and other descriptions Understanding is similar.
  • “And/or” describes the relationship between associated objects, indicating that there can be three relationships.
  • a and/or B can mean: A exists alone, A and B exist simultaneously, and B exists alone. These three situations.
  • the character "/" unless otherwise specified, generally indicates that the related objects are in an "or” relationship.
  • ordinal numbers such as “first” and “second” mentioned in the embodiments of this application are used to distinguish multiple objects and are not used to limit the order, timing, priority or importance of multiple objects.
  • the embodiment of the present application provides an application interface display method, which can be applied to electronic devices.
  • the electronic device may be a device that provides voice and/or data connectivity to the user, and may include, for example, a handheld device with wireless connection capabilities, or a terminal device connected to a wireless modem.
  • the terminal device can communicate with the core network via the radio access network (RAN) and exchange voice and/or data with the RAN.
  • the terminal equipment may include user equipment (UE), wireless terminal equipment, mobile terminal equipment, subscriber unit (subscriber unit), subscriber station (subscriber station), mobile station (mobile station), mobile station (mobile), remote Remote station, access point (AP), remote terminal, access terminal, user terminal, user agent, or user Equipment (user device), etc.
  • this may include mobile phones (or “cellular” phones), mobile computers, tablets, personal digital assistants (PDAs), media players, smart TVs, wearable devices (e.g., smart watches, smart helmets) or smart bracelets, etc.), routers, set-top boxes, speakers, mobile phones, tablets, etc., and combinations of two or more of the above.
  • the electronic device can also be a vehicle-mounted system, such as an electric vehicle.
  • the electronic device may be a portable terminal that includes a built-in battery, such as a mobile phone, a tablet computer, etc., or it may be a terminal that does not include a built-in battery, which is not limited by the embodiments of the present application.
  • Exemplary embodiments of the above-mentioned electronic devices include, but are not limited to, portable electronic devices equipped with iOS, Android, Microsoft or other operating systems.
  • the above-mentioned portable electronic device may also be other portable electronic devices, such as a digital camera. It should also be understood that in other embodiments of the present application, the above-mentioned electronic device may not be a portable electronic device, but a desktop computer or the like.
  • electronic devices can support multiple applications.
  • one or more of the following applications camera application, instant messaging application, photo management application, etc.
  • instant messaging applications there can be many kinds of instant messaging applications.
  • WeChat Tencent chat software (QQ), WhatsApp Messenger, Line, photo sharing (instagram), Kakao Talk, DingTalk, etc.
  • Users can send information such as text, voice, pictures, video files, and other various files to other contacts through instant messaging applications; or users can make video or audio calls with other contacts through instant messaging applications.
  • FIG. 1 takes the electronic device as a mobile phone as an example.
  • FIG. 1 shows a schematic structural diagram of a mobile phone 100 .
  • the mobile phone 100 may include a processor 110, an external memory interface 120, an internal memory 121, a universal serial bus (USB) interface 130, a charging management module 140, a power management module 141, a battery 142, an antenna 1, an antenna 2, Mobile communication module 150, wireless communication module 160, audio module 170, speaker 170A, receiver 170B, microphone 170C, headphone interface 170D, sensor module 180, button 190, motor 191, indicator 192, camera 193, display screen 194, and user Identification module (subscriber identification module, SIM) card interface 195, etc.
  • the sensor module 180 may include a fingerprint sensor 180H and a touch sensor 180K.
  • the processor 110 may include one or more processing units.
  • the processor 110 may include an application processor (application processor, AP), a modem processor, a graphics processing unit (GPU), and an image signal processor. (image signal processor, ISP), controller, memory, video codec, digital signal processor (digital signal processor, DSP), baseband processor, and/or neural-network processing unit (NPU) wait.
  • application processor application processor, AP
  • modem processor graphics processing unit
  • GPU graphics processing unit
  • image signal processor image signal processor
  • ISP image signal processor
  • controller memory
  • video codec digital signal processor
  • DSP digital signal processor
  • baseband processor baseband processor
  • NPU neural-network processing unit
  • different processing units can be independent devices or integrated in one or more processors.
  • the controller may be the nerve center and command center of the mobile phone 100 .
  • the controller can generate operation control signals based on the instruction operation code and timing signals to complete the control of fetching and executing instructions.
  • the processor 110 may also be provided with a memory for storing instructions and data.
  • the memory in processor 110 is a cache device. This memory may hold instructions or data that have been recently used or recycled by processor 110 . If the processor 110 needs to use the instructions or data again, it can be called directly from the memory. Repeated access is avoided and the waiting time of the processor 110 is reduced, thus improving the efficiency of the system.
  • the USB interface 130 is an interface that complies with USB standard specifications, and may be a mini USB interface, a micro USB interface, a USB Type C interface, etc.
  • the USB interface 130 can be used to connect a power adapter to charge the mobile phone 100, and can also be used to transmit data between the mobile phone 100 and peripheral devices.
  • a charging device such as a power adapter
  • the mobile phone 100 can transmit power to the power adapter through the USB interface 130.
  • the configuration signal line (configuration channel, cc) in the USB interface 130 of the mobile phone 100 (such as the USB type-c interface) will detect the current sent by the power adapter to realize current transmission between the mobile phone 100 and the power adapter.
  • the mobile phone 100 is connected to the power adapter through the USB interface 130 as an example.
  • the mobile phone 100 can also be connected to the power adapter in other ways.
  • the mobile phone 100 in a wireless charging scenario, can be connected to the power adapter through the USB interface 130.
  • the magnetic field coupling between the transmitter coil and the receiver coil in the power adapter transmits electric energy, or in a wired charging scenario, electric energy is transmitted through other types of charging interfaces connected to the power adapter. Therefore, the embodiment of the present application does not limit the connection method between the mobile phone 100 and the power adapter.
  • the power transmission between the mobile phone 100 and the power adapter can be realized through the USB interface 130; when the mobile phone 100 is charged using wireless charging, for example, the mobile phone 100 is connected through Bluetooth. wirelessly connected to the power adapter, in this case, the power transmission between the mobile phone 100 and the power adapter can be transmitted through Bluetooth.
  • the power transmission process between the mobile phone 100 and the power adapter includes the process of the mobile phone 100 identifying the power supply capability of the power adapter. The specific content will be introduced later.
  • the power adapter and the mobile phone 100 can support the same protocol, such as charging protocol (power delivery protocol, PDP), super charging protocol (super charging protocol, SCP), fast charging protocol (fast charging protocol, FCP), etc.
  • charging protocol power delivery protocol, PDP
  • super charging protocol super charging protocol
  • SCP super charging protocol
  • fast charging protocol fast charging protocol, FCP
  • the power adapter can be connected to an external power supply (such as household electricity, etc.), obtain electric energy from the external power supply (such as household electricity, etc.), and then input the obtained electric energy to the mobile phone 100 through the USB interface 130 (such as input to the mobile phone 100 charging management module 140).
  • the charging management module 140 is used to manage the charging process. For example, the charging management module 140 is used to decide whether to provide the power received from the USB interface 130 to the power management module 141 or to the battery 142 .
  • the power management module 141 receives electrical energy input from the battery 142 and/or the charging management module 140 for the processor 110, internal memory 121, external memory through the external memory interface 120, the display screen 194, the camera 193, and the wireless communication module 160 and other peripherals. Component power supply.
  • the power management module 141 receives electric energy input from the battery 142 to provide power for various components.
  • the power management module 141 receives the electric energy input by the charging management module 140 to provide power to each component.
  • the power management module 141 can also It receives the electric energy input from the battery 142 to provide power to various components.
  • the power management module 141 can supply power to various components in a sequential order. For example, it first supplies power to the processor 110 and then supplies power to other components. When the power management module 141 supplies power to the processor 110 and the processor 110 is started, it can Notify the power management module 141 which parts of other components are powered, or which components are not powered, etc.
  • the charging process can be as follows:
  • the power adapter After receiving the power from the external power supply, the power adapter inputs the power to the charging management module through the USB interface 130 140.
  • the charging management module 140 stores electricity for the battery 142, and on the other hand, it provides input electric energy to the power management module 141; or, the charging management module 140 only stores electricity for the battery 142, and the power management module 141 obtains electric energy from the battery 142 for each component. (such as the processor 110, internal memory 121, display screen 194, camera 193, and wireless communication module 160, etc.).
  • the power management module 141 can be connected to the processor 110, and the processor 110 can decide which components to power through the power management module 141. For example, when the mobile phone 100 is turned on in a lower power consumption working mode, the processor 110 determines If the display screen 194 needs power supply and the wireless communication module 160 does not need power supply, the power management module 141 supplies power to the display screen 194 but not to the wireless communication module 160 . It should be understood that when the mobile phone 100 is not connected to the power adapter, the mobile phone 100 can power various devices through the electric energy stored in the battery 142 .
  • the wireless communication function of the mobile phone 100 can be realized through the antenna 1, the antenna 2, the mobile communication module 150, the wireless communication module 160, and so on.
  • Antenna 1 and Antenna 2 are used to transmit and receive electromagnetic wave signals.
  • Each antenna in mobile phone 100 can be used to cover a single or multiple communication frequency bands. Different antennas can also be reused to improve antenna utilization. For example: Antenna 1 can be reused as a diversity antenna for a wireless LAN. In other embodiments, antennas may be used in conjunction with tuning switches.
  • the mobile communication module 150 can provide wireless communication solutions including 2G/3G/4G/5G applied on the mobile phone 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 through the antenna 1, perform filtering, amplification and other processing on the received electromagnetic waves, and transmit 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 through the antenna 1 for radiation.
  • at least part of the functional modules of the mobile communication module 150 may be disposed 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 wireless communication module 160 can provide applications on the mobile phone 100 including wireless local area networks (WLAN) (such as wireless fidelity (Wi-Fi) network), Bluetooth (bluetooth, BT), and global navigation satellite system. (global navigation satellite system, GNSS), frequency modulation (FM), near field communication technology (near field communication, NFC), infrared technology (infrared, IR) and other wireless communication solutions.
  • WLAN wireless local area networks
  • BT Bluetooth
  • 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, frequency modulate it, amplify it, and convert it into electromagnetic waves through the antenna 2 for
  • the antenna 1 of the mobile phone 100 is coupled to the mobile communication module 150, and the antenna 2 is coupled to the wireless communication module 160, so that the mobile phone 100 can communicate with the network and other devices through wireless communication technology.
  • the wireless communication technology may include global system for mobile communications (GSM), general packet radio service (GPRS), code division multiple access (CDMA), broadband Code division multiple access (wideband code division multiple access, WCDMA), time-division code division multiple access (TD-SCDMA), long term evolution (long term evolution, LTE), BT, GNSS, WLAN, NFC , FM, and/or IR technology, etc.
  • the GNSS may include global positioning system (GPS), global navigation satellite system (GLONASS), Beidou navigation satellite system (BDS), quasi-zenith satellite system (quasi -zenith satellite system (QZSS) and/or satellite based enhancement system (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 enhancement system
  • the mobile phone 100 implements display functions through the GPU, the display screen 194, and the application processor.
  • the GPU is an image processing microprocessor and is connected to the display screen 194 and the application processor. GPUs are used to perform mathematical and geometric calculations for graphics rendering.
  • Processor 110 may include one or more GPUs that execute program instructions to generate or alter display information.
  • the display screen 194 is used to display images, videos, etc.
  • Display 194 includes a display panel.
  • the display panel can use a liquid crystal display (LCD), an organic light-emitting diode (OLED), an active matrix organic light emitting diode or an active matrix organic light emitting diode (active-matrix organic light emitting diode).
  • LCD liquid crystal display
  • OLED organic light-emitting diode
  • AMOLED organic light-emitting diode
  • FLED flexible light-emitting diode
  • Miniled MicroLed, Micro-oLed, quantum dot light emitting diode (QLED), etc.
  • the mobile phone 100 may include N display screens 194, where N is a positive integer greater than 1.
  • Camera 193 is used to capture still images or video.
  • the camera 193 may include at least one front camera and/or at least one rear camera.
  • Internal memory 121 may be used to store computer executable program code, which includes instructions.
  • the processor 110 executes instructions stored in the internal memory 121 to execute various functional applications and data processing of the mobile phone 100 .
  • the internal memory 121 may include a program storage area and a data storage area. Among them, the stored program area can store the operating system and the software code of at least one application (such as a camera application, WeChat application, etc.).
  • the storage data area can store data (such as images, videos, etc.) generated during the use of the mobile phone 100.
  • the internal memory 121 may include high-speed random access memory, and may also include non-volatile memory, such as at least one disk storage device, flash memory device, universal flash storage (UFS), etc.
  • the internal memory 121 can store the software module/code of the boot control method provided by the embodiment of the present application. When the processor 110 runs the software module/code, the corresponding process steps are executed.
  • the internal memory 121 can also store values such as preset voltage, preset current, and preset power.
  • the external memory interface 120 can be used to connect an external memory card, such as a micro (micro) secure digital (SD) card, to expand the storage capacity of the mobile phone 100.
  • the external memory card communicates with the processor 110 through the external memory interface 120 to implement the data storage function. Such as saving music, videos, etc. files in external memory card.
  • the software module/code of the boot control method provided by the embodiment of the present application can also be stored in an external memory, and the processor 110 can run the software module/code through the external memory interface 120 to execute corresponding process steps.
  • the preset voltage, preset current, preset power and other values in the mobile phone 100 can also be stored in the external memory.
  • the mobile phone 100 can implement audio functions through the audio module 170, the speaker 170A, the receiver 170B, the microphone 170C, the headphone interface 170D, and the application processor. For example, music playback, recording, voice calls, etc.
  • Fingerprint sensor 180H is used to collect fingerprints.
  • the mobile phone 100 can use the collected fingerprint characteristics to realize fingerprint unlocking, access application lock, fingerprint photography, fingerprint answering incoming calls, etc.
  • Touch sensor 180K also called “touch panel”.
  • the touch sensor 180K can be disposed on the display screen 194.
  • the touch sensor 180K and the display screen 194 form a touch screen, which is also called a "touch screen”.
  • the touch sensor 180K is used to detect a touch operation on or near the touch sensor 180K.
  • the touch sensor can pass the detected touch operation to the application processor to determine the touch event type.
  • Visual output related to the touch operation may be provided through display screen 194 .
  • the touch sensor 180K may also be disposed on the surface of the mobile phone 100 in a position different from that of the display screen 194 .
  • the sensor module 180 may also include other sensors, such as a pressure sensor, a gyroscope sensor, an air pressure sensor, a magnetic sensor, an acceleration sensor, a distance sensor, a proximity light sensor, a temperature sensor, an ambient light sensor, a bone conduction sensor, etc.
  • sensors such as a pressure sensor, a gyroscope sensor, an air pressure sensor, a magnetic sensor, an acceleration sensor, a distance sensor, a proximity light sensor, a temperature sensor, an ambient light sensor, a bone conduction sensor, etc.
  • This application implements The example is not limited to this.
  • the buttons 190 include a power button, a volume button, etc.
  • the button 190 may be a mechanical button or a touch button.
  • the mobile phone 100 can receive key input and generate key signal input related to user settings and function control of the mobile phone 100 .
  • the boot command, confirmation command, etc. can be input through the button 190 .
  • it can also be input through the display screen 194.
  • the motor 191 can generate vibration prompts.
  • the motor 191 can be used for vibration prompts for incoming calls and can also be used for touch vibration feedback.
  • touch operations for different applications can correspond to different vibration feedback effects.
  • the indicator 192 may be an indicator light, which may be used to indicate charging status, power changes, or may be used to indicate messages, missed calls, notifications, etc.
  • the SIM card interface 195 is used to connect a SIM card.
  • the SIM card can be connected to and separated from the mobile phone 100 by inserting it into the SIM card interface 195 or pulling it out from the SIM card interface 195 .
  • the structure shown in Figure 1 does not constitute a specific limitation on the mobile phone 100.
  • the mobile phone 100 may include more or fewer components than shown in FIG. 1 , or combine some components, or split some components, or arrange different components.
  • the components shown in Figure 1 may be implemented in hardware, software, or a combination of software and hardware.
  • the electronic device shown in Figure 1 can be applied to an application interface display method provided by an embodiment of the present application.
  • An application interface display method provided by an embodiment of the present application will be described in detail below.
  • the electronic device displays an application interface of the target application.
  • the interface layout of the application interface corresponds to the screen size of the electronic device or the size of the application interface.
  • the interface layout of the application interface is based on the application interface in the electronic device.
  • the layout parameters on the device are determined based on the interface attributes of the target application and the screen size and/or display interface size of the electronic device.
  • the interface attributes are preset constraints that constrain the layout parameters. Set conditions.
  • the application interface can be composed of interface elements, and the interface elements are the basic units that constitute the application interface. For example, interface elements are controls.
  • the interface attributes of the application interface include at least one of the following: spacing attributes; element arrangement attributes; hidden attributes; scaling attributes; and repeat attributes.
  • the spacing attribute is used to determine the spacing between adjacent interface elements in the application interface; the element arrangement attribute is used to determine the display area in the application interface and the display area where each interface element is located;
  • the hidden attribute is used to determine whether each interface element in the application interface is hidden or displayed;
  • the scaling attribute is used to determine the size of each interface element in the application interface;
  • the repeat attribute is used to determine each interface element in the application interface The number of repeated displays.
  • Another application interface display method provided by the embodiment of the present application can be applied to the first electronic device and the second electronic device.
  • the first electronic device and the second electronic device are both used to display the application interface of the target application.
  • the first electronic device The screen size of the device is different from the screen size of the second electronic device.
  • the method may be:
  • the first electronic device displays a first application interface of the target application, and the interface layout of the first application interface corresponds to the screen size of the first electronic device or the first application interface size; the second The electronic device displays a second application interface of the target application, and the interface layout of the second application interface corresponds to the screen size of the second electronic device or the second application interface size.
  • the application interface display methods provided by the embodiments of the present application can be applied to the scenario shown in Figure 2a.
  • the first electronic device (device A) and the second electronic device (device B) are both used to display the application interface of the target application, and the first electronic device (device A) and device B (device B) are both used to display The application interface of the target application will be migrated between device A and device B.
  • the interface elements in the first application interface and the interface elements in the second application interface are both originate from the same target application.
  • the first application interface and the second application interface both correspond to the same interface defined in the target application.
  • the identifier of the first application interface is the same as the identifier of the second application interface.
  • the first application interface and the second application interface are both startup interfaces of the target application, or both are setting interfaces.
  • the interface layout of the first application interface corresponds to the horizontal screen size of the device A
  • the interface layout of the second application interface corresponds to the vertical screen size of the device B, so that the target application can be
  • each electronic device displays a corresponding application interface based on its respective screen size. Therefore, the application interface can be adapted to the screen size of the electronic device, thereby achieving a better display effect.
  • the application interface display method provided by the embodiment of the present application can also be applied to the scenario shown in Figure 2b.
  • the interface layout of device A may be different in split-screen state and full-screen state.
  • the first electronic device can adaptively determine the layout parameters of the first application interface based on the interface attributes of the target application according to the screen size of the electronic device. Then the first electronic device can display the first application interface according to the layout parameters of the first application interface, so that the display can be adaptively performed according to the screen size of the electronic device to achieve a better display effect.
  • the application interface can have multiple dimensions of interface attributes. Therefore, when displayed on the screens of electronic devices of different sizes, the electronic device may present application interfaces with different layouts based on different layout parameters of the application interface.
  • the following describes in detail the interface attributes based on each dimension of the application interface, and shows the layout of the application interface determined by the interface attributes of each dimension. details as follows:
  • the spacing attribute can be used to determine the spacing parameters of the application interface.
  • the spacing attribute can include an even distribution type, which is a uniform distribution.
  • the value of the equalization type (that is, the attribute value) can be the default equalization type or the internal equalization type.
  • the equalization type can be specifically represented by a preset value. For example, a value of 0 indicates that the equalization type is the default equalization type, and a value of 1 indicates that the equalization type is an internal equalization type.
  • the spacing parameter may include the spacing between adjacent interface elements in the application interface, and the spacing between interface elements at the edge of the application interface and the edge of the application interface. In addition, since the relative position relationship between interface elements may be predetermined, the spacing parameter can be determined based on the relative position relationship between the interface elements and according to the spacing attribute.
  • the default equalization type means that the spacing between adjacent interface elements in the application interface and the spacing between interface elements at the edge of the application interface and the edge of the application interface are all the same, that is, the distance between the interface elements at the edge of the application interface and the edge of the application interface participates in the spacing. Evenly divided; as shown in Figure 3a, the distance between adjacent interface elements in the application interface and the distance between interface elements at the edge of the application interface and the edge of the application interface are all C1.
  • the internal even type means that the spacing between adjacent interface elements in the application interface is the same. The spacing between interface elements at the edge of the application interface and the edge of the application interface does not participate in equalization. The spacing between adjacent interface elements in the application interface is C3.
  • only the interface elements in the horizontal direction defined by the equalization type are used as an example. The same applies to the equalization in the vertical direction, which will not be described again here.
  • the first electronic device may determine the spacing between adjacent interface elements in the application interface and the spacing between interface elements at the edge of the application interface and the edge of the application interface based on the equalization type and the screen size of the first electronic device. Taking the interface element in the first application interface as a row of interface elements as an example, the number of interface elements in the first application interface is N, and N is a positive integer.
  • the first electronic device may determine the width of the first application interface to be W based on the screen size of the first electronic device, and the widths of each interface element to be w1, w2, w3,..., wN in sequence.
  • N is greater than 1.
  • the equalization type is the default equalization type
  • the equalization type is the internal equalization type
  • N is 1, regardless of whether the equalization type is the default equalization type or the internal equalization type, the spacing from both sides of the unique interface element to the edge of the interface element is the same and is displayed in the center.
  • the spacing attribute may also include attributes related to the equalization type.
  • the spacing attribute may also include attributes such as equalization type switch, maximum spacing, and minimum spacing.
  • the equalization type switch can control whether the equalization type takes effect when the application interface is displayed. Turning on the equalization type can also be called equalization capability enablement.
  • the maximum and minimum spacing are used to control the maximum and minimum values of the spacing between adjacent interface elements in the application interface and the distance between interface elements at the edge of the application interface and the edge of the application interface, that is, the value range. Therefore, on the basis of the equalization type restrictions, the spacing when the interface elements are equally divided can be determined by the equalization type, maximum spacing, minimum spacing and other restrictions. This enables the application interface of the target application to automatically calculate the spacing between interface elements based on the configuration of the spacing attribute on different screen sizes, so that the interface elements remain evenly distributed within the application interface.
  • Figure 4a shows the effect of uniform distribution of interface elements in the horizontal direction in an application interface with a screen size of 16:9 when the equalization type is the default equalization type; the three "high", “low” and “off” can be seen.
  • the interface elements are evenly distributed in the horizontal direction.
  • Figure 4b shows the effect of evenly distributing interface elements in the horizontal direction in an application interface with a screen size of 4:3 when the equalization type is the default equalization type; it can be seen that the three "high", “low” and “off”
  • the interface elements are evenly distributed in the horizontal direction.
  • Figure 4c shows the effect of the interface elements in the application interface of the first screen size being evenly distributed in the horizontal direction when the equalization type is the internal equalization type; it can be seen that the interface elements (4 pictures) in Figure 4c are distributed in the horizontal direction Uniform distribution is achieved.
  • Figure 4d shows the effect of the interface elements in the application interface of the second screen size being evenly distributed in the horizontal direction when the equalization type is the internal equalization type; it can be seen that the interface elements (4 pictures) in Figure 4d are distributed in the horizontal direction Uniform distribution is achieved.
  • the width of the first screen size is greater than the width of the second screen size.
  • Figures 4a to 4d only take the effect of uniform distribution of interface elements in the horizontal direction in the application interface as an example. The same applies to the uniform distribution of interface elements in the vertical direction in the application interface, as shown in Figures 4e to 4h.
  • Figure 4e shows the effect of uniform distribution of interface elements in the vertical direction in the application interface of the third screen size when the equalization type is the default equalization type; it can be seen that 4 interface elements (4 squares) are realized in the vertical direction Evenly distributed.
  • Figure 4f shows the effect of uniform distribution of interface elements in the vertical direction in the application interface of the fourth screen size when the equalization type is the default equalization type; it can be seen that 4 interface elements (4 squares) are realized in the vertical direction Evenly distributed.
  • the length of the third screen size is greater than the length of the fourth screen size.
  • Figure 4g shows the effect of evenly distributing interface elements in the vertical direction in the application interface of the fifth screen size when the equalization type is the internal equalization type; it can be seen that 4 interface elements (4 squares) are realized in the vertical direction Evenly distributed.
  • Figure 4h shows the effect of uniform distribution of interface elements in the vertical direction in the application interface of the sixth screen size when the equalization type is the internal equalization type; it can be seen that 4 interface elements (4 squares) are realized in the vertical direction Evenly distributed.
  • the length of the fifth screen size is greater than the length of the sixth screen size.
  • the spacing attribute can also set the spacing ratio.
  • the spacing ratio refers to the ratio of the spacing between adjacent interface elements in the application interface to the spacing between the interface elements at the edge of the application interface and the edge of the application interface, which is a preset ratio.
  • the spacing attribute sets the spacing in a way that limits the spacing, so that when the application interface is displayed, the spacing between interface elements in the layout of the application interface can be determined.
  • the spacing of interface elements can also be determined based on the size of the interface elements.
  • the spacing attribute includes a mapping relationship between the spacing between adjacent interface elements in the application interface and the size of adjacent interface elements, and/or the interface elements at the edge of the application interface.
  • the distance between the edge of the application interface and the edge of the application interface Mapping relationship between the dimensions of interface elements at the edge of the face.
  • the spacing between interface elements may refer to the spacing between adjacent interface elements and/or the spacing between interface elements at the edge of the application interface and the edge of the application interface. For example, when the sizes of interface elements are inconsistent, the spacing can be set in a positive or negative relationship with the size of the interface elements.
  • the spacing between interface elements can be directly proportional or inversely proportional to the length, width, and area of the interface elements.
  • the spacing of interface elements can refer to the spacing between interface elements on a certain side and other interface elements, for example, the spacing on the left side of interface elements.
  • the spacing of interface elements can also refer to the spacing between interface elements and other interface elements on both sides. It can be stipulated that when the spacing of different interface elements conflicts, you can choose a larger spacing or a smaller spacing.
  • the area ratio of interface element A and interface element B is 1:4.
  • the spacing between interface elements refers to the spacing between the interface element and other interface elements on both sides. It is stipulated that when the spacing between different interface elements conflicts, you can choose the smaller one. Pitch.
  • the spacing between the interface elements is calculated in proportion to the area of the interface element.
  • the spacing on both sides of interface element A is 1 but the spacing on both sides of interface element B is 4. Then the interface The distance between element A and interface element B is 1.
  • FIG. 5a it is a schematic diagram that the spacing between interface elements is proportional to the length of the interface element.
  • the length ratios of interface element A, interface element B, interface element C, and interface element D are 1:2:2:1 in order. Therefore, key interface elements in the application interface can be highlighted, and larger interface elements and smaller interface elements can be prevented from being displayed together.
  • FIG. 5b it is a schematic diagram in which the spacing of interface elements is inversely proportional to the length of the interface elements.
  • the length ratios of interface element A, interface element B, interface element C, and interface element D are 1:2:2:1 in order.
  • larger elements can occupy more intervals for display, making the display of interface elements more compact.
  • the above distance between interface elements is directly proportional and inversely proportional to the length of the interface element is just an example.
  • the relationship between the spacing of interface elements and the size of interface elements can be configured according to actual needs and is not limited here.
  • the application interface of the target application can adaptively determine the spacing parameters in real time based on the spacing attribute when displaying the application interface on different screen sizes, thereby adapting to the current screen size and achieving better display effects.
  • the above description of the spacing attribute only takes the spacing attribute as an example.
  • the spacing attribute can be combined with other attributes to determine the layout parameters of the application interface. For more specific implementation methods, please refer to the subsequent description.
  • the element arrangement properties can be used to determine the arrangement parameters of elements in the application interface.
  • element arrangement properties may include row properties and ⁇ or column properties.
  • the element arrangement parameters can be determined based on the relative positional relationship between the interface elements and according to the element arrangement attributes.
  • the interface elements of the application interface include: interface element 1, interface element 2, interface element 3, interface element 4 and interface element 5.
  • the relative positional relationship between interface elements may include: interface element 1 is located to the left or above interface element 2, interface element 2 is located to the left or above interface element 3, and interface element 3 is located to the left or above interface element 4.
  • Interface element 4 is located to the left or above interface element 5.
  • a row of the application interface can be understood as a horizontal display area, and all or part of the interface elements within this display area can be understood as being in this row.
  • the row attributes may include at least one of row element equalization switch, arrangement direction, maximum number of rows, minimum number of rows, maximum number of row elements, minimum number of row elements, and priorities that can be set among these items.
  • the row element equalization switch can limit the number of interface elements in each row to be the same, or the interface elements in one row at most are different from the interface elements in other rows, and the interface elements in other rows are the same.
  • Arrangement direction means that interface elements can be arranged in rows or columns.
  • the row attributes include a mapping relationship between the length and width of the application interface and the number of rows of interface elements in the application interface
  • the column attributes include the length and width of the application interface. wide ratio to the application
  • the maximum number of rows, the minimum number of rows, the maximum number of row elements, and the minimum number of row elements can be set to values that map to the aspect ratio of the screen. For example, when the layout direction is parallel to the length of the screen, when the aspect ratio of the screen is greater than or equal to 3, the maximum number of lines and the minimum number of lines are both 1; when the aspect ratio of the screen is greater than or equal to When equal to 2 and less than 3, the maximum number of rows is 3 and the minimum number of rows is 1.
  • the row layout parameters used by the row attribute to determine may include: the number of rows of interface elements in the application interface and the row in which the interface element is located.
  • the application interface has a total of 5 interface elements, the row element equalization switch is on, the screen aspect ratio is 2.5, and the maximum number of rows is 3.
  • the element arrangement parameters that can be obtained include: the number of rows of interface elements in the application interface is 3, interface element 1 is located in behavior 1, interface elements 2 and 3 are located in behavior 2, and interface elements 4 and 5 are located in behavior 3. That is, the application interface includes: 1 row of 1 interface element, and 2 rows of 2 interface elements in each row.
  • a column of the application interface can be understood as a vertical display area, and all or part of the interface elements within this display area can be understood as being in this column.
  • the column attributes may include at least one of column element equalization switch, arrangement direction, maximum number of columns, minimum number of columns, maximum number of column elements, minimum number of column elements, and priorities that can be set among these items.
  • the column element equalization switch can limit the number of interface elements in each column to be the same, or the interface elements in at most one column are different from the interface elements in other columns, and the interface elements in other columns are the same.
  • Arrangement direction means that interface elements can be arranged in a direction parallel to the length of the screen or in a direction parallel to the width of the screen.
  • the maximum number of columns, the minimum number of columns, the maximum number of column elements, and the minimum number of column elements can be set to values that map to the aspect ratio of the screen. For example, when the layout direction is parallel to the length of the screen, when the aspect ratio of the screen is greater than or equal to 3, the maximum number of columns and the minimum number of columns are both 1; when the aspect ratio of the screen is greater than Or when it is equal to 2 and less than 3, the maximum number of columns is 3 and the minimum number of columns is 1.
  • the column layout parameters used to determine the column attribute may include: the number of columns of interface elements in the application interface and the column in which the interface elements are located.
  • the application interface has a total of 5 interface elements
  • the column element equalization switch is on
  • the screen aspect ratio is 2.5
  • the maximum number of columns is 3.
  • the interface element arrangement parameters that can be obtained include: the number of columns of interface elements in the application interface is 3, interface element 1 is located in column 1, interface elements 2 and 3 are located in column 2, and interface elements 4 and 5 are located in column 3. That is, the application interface includes: 1 column with 1 interface element, and 2 columns with 2 interface elements in each column.
  • the above element arrangement attributes are only explained using some attributes as examples. There are many ways to set element layout parameters through element layout attributes, which will not be described in detail here. It can be seen from the related description of the above element arrangement attributes that when developing the application interface of the target application, there is no need to specify the element arrangement parameters of the application interface.
  • the application interface of the target application can adaptively determine the element arrangement parameters in real time based on the element arrangement attributes when displaying the application interface on different screen sizes, so as to adapt to the current screen size and achieve better display effects.
  • the above-mentioned description of the element layout attributes only takes the element layout attributes as an example.
  • the element layout attributes can be combined with other attributes to determine the layout parameters of the application interface. For more specific implementation methods, please refer to the subsequent description.
  • the present invention can be applied to photo display in albums/galleries. When the element arrangement attribute is used in conjunction with the spacing attribute, each row can be displayed evenly in multiple rows, and the effect of grid display can be achieved.
  • the screen size of the application interface it may not be possible to fully display all interface elements of the application interface on some screens to achieve a better display effect. Therefore, it may be necessary to hide some interface elements in the application interface and only display some interface elements. Then you can use the hidden attribute to determine the hidden parameters in the application interface.
  • the hidden parameters can indicate which interface elements are hidden and which interface elements are displayed.
  • hidden attributes may include the hiding priority of interface elements, the set of elements that can be hidden, and the number of hidden elements. At least one of the maximum quantities. Interface elements with higher hiding priority will be hidden first.
  • the set of elements that can be hidden is the set of interface elements that are allowed to be hidden in the application interface.
  • the maximum number of hidden elements refers to the maximum number of interface elements allowed to be hidden in the application interface.
  • Hidden parameters can include whether each interface element is hidden or displayed.
  • the hiding parameters can be determined based on the relative position relationship between the interface elements and according to the hiding attribute.
  • relative positional relationships between interface elements please refer to the examples in hidden attributes.
  • the hiding priority can be set according to the characteristics of the interface element. For example, it can be set according to the business type of the interface element. For example, the priority of the interface element of the picture type can be set to the lowest, and the priority of the interface element of the form can be set to the highest. It can also be set according to the width of the interface element. For example, the hiding priority is positively correlated with the width of the interface element, that is, the larger the interface element, the more priority it will be hidden.
  • Hidden parameters can be determined based on screen size and hidden properties. For example, hiding parameters can be determined based on the aspect ratio of the screen. For example, when the aspect ratio of the screen of the terminal device is smaller than the preset aspect ratio, the number of hidden elements can be determined based on the difference between the aspect ratio of the screen and the preset aspect ratio. And determine the interface elements to be hidden in the application interface based on the hiding priority, the set of elements that can be hidden, and the number of hidden elements.
  • FIG. 8a is a first application interface displayed on the first terminal device
  • FIG. 8b is a second application interface displayed on the second terminal device.
  • the screen aspect ratio of the first terminal device is greater than the preset aspect ratio.
  • the screen aspect ratio of the second terminal device is smaller than the preset aspect ratio. If the screen of the second terminal device displays all the interface elements of the application interface, the display of the interface elements may not be clear, thus hiding some of the interface elements of the application interface. , such as "singer".
  • the above hidden attributes only take some attributes as examples. There are many ways to hide elements through the hidden attribute, so I won’t go into details here. It can be seen from the related description of the above hidden attributes that when developing the application interface of the target application, there is no need to specify the hidden parameters of the application interface.
  • the application interface of the target application can be based on the hidden attribute.
  • the hidden parameters can be adaptively determined in real time, so as to adapt to the current screen size and achieve better display effects.
  • the hidden attribute can be combined with other attributes, such as the spacing attribute.
  • interface elements may be displayed on some screens based only on the screen size, resulting in deformed display of interface elements and inability to achieve better display effects. Therefore, some interface elements in the application interface may need to be scaled. Then you can use the scaling attribute to determine the scaling parameters in the application interface.
  • the scaling parameters can indicate which interface elements are scaled and which interface elements are displayed.
  • the scaling attribute may include at least one of the size scaling ratio of the interface element and the element scaling width value.
  • the element size ratio is the ratio range of interface elements that are allowed to be scaled in the application interface.
  • the element scaling width value refers to the width value of the screen size at which interface elements in the application interface trigger scaling.
  • the size scaling ratio can be obtained based on the width of the interface element and the screen size of the electronic device and/or the size of the application interface.
  • Scaling parameters can include the size of each interface element.
  • the scaling parameter may be determined based on the relative positioning relationship between the interface elements and according to the scaling attribute. For examples of relative positional relationships between interface elements, refer to the examples in the scaling attribute.
  • FIG. 9a is a first application interface displayed on the first terminal device
  • FIG. 9b is a second application interface displayed on the second terminal device.
  • the zoom width value of the element of the first terminal device is greater than the preset width value.
  • the second terminal device The element's scaled width value is smaller than the preset width value.
  • Figures 9c to 9d show the display effect of the application interface.
  • the above scaling attributes only take some attributes as examples. There are many ways to set the zoom of elements through the zoom attribute, so I won’t go into details here. It can be seen from the relevant description of the above scaling attributes that when developing the application interface of the target application, there is no need to specify the scaling parameters of the application interface.
  • the application interface of the target application can adaptively determine the scaling parameters in real time based on the scaling attribute when displaying the application interface on different screen sizes, thereby adapting to the current screen size and achieving better display effects.
  • the scaling attribute can be combined with other attributes, such as the spacing attribute.
  • interface elements may be displayed on some screens based only on the screen size, resulting in deformed display of interface elements and inability to achieve better display effects. Therefore, you may need to repeat some interface elements in your application interface. Then you can use the repeat attribute to determine the repeat parameters in the application interface.
  • the repeat parameters can indicate which interface elements are repeated and which interface elements are displayed.
  • the repeating attribute may include at least one of the repeatable number of elements and the repeated width value of the element of the interface element.
  • the number of elements that can be repeated is the proportion of interface elements that are allowed to be repeated in the application interface.
  • the element repetition width value refers to the width value of the screen size that triggers repetition of interface elements in the application interface.
  • Repeat parameters can include the repeatable number of each interface element.
  • the repeating parameters can be determined based on the relative positional relationship between the interface elements and according to the repeating attribute. For examples of relative positional relationships between interface elements, please refer to the examples in Repeating Attributes.
  • Figures 10a to 10d the renderings displayed on the application interface can be shown in Figures 10a to 10d.
  • Figure 10a is a first application interface displayed on the first terminal device
  • Figure 10b is a second application interface displayed on the second terminal device.
  • the repeated width value of the element of the first terminal device is greater than the preset width value.
  • the repeated width value of the element of the second terminal device is smaller than the preset width value.
  • Figures 10c to 10d show the display effect of the application interface.
  • the above repeated attributes are only some attributes as examples. There are many ways to set the repetition of elements through the repetition attribute, so I won’t go into details here. It can be seen from the relevant description of the above repeated attributes that when developing the application interface of the target application, there is no need to specify repeated parameters of the application interface.
  • the application interface of the target application can be based on the repetition attribute. When the application interface is displayed on different screen sizes, the repetition parameters can be adaptively determined in real time, so as to adapt to the current screen size and achieve better display effects.
  • the repeat attribute can be combined with other attributes, such as the spacing attribute.
  • FIG. 11 it is a schematic diagram of the development process corresponding to an interface display method provided by an embodiment of the present application.
  • Step (1) Developers use development tools to develop application interfaces.
  • Step (2) The development tool displays the development interface of the development tool by calling the development framework.
  • Step (3) The development tool selects the interface attributes corresponding to the development interface from the interface attribute library by calling the framework.
  • Step (4) The development tool is based on the interface attribute library to complete the development of the application interface.
  • Step (5) The electronic device determines the layout parameters of the application interface according to the screen size of the electronic device.
  • Step (6) The electronic device displays the application interface.
  • the software architecture corresponding to an application interface display method provided by this application includes development tools and target applications.
  • Figure 12 takes the development tool as an integrated development environment (IDE) development tool and the target application is an Android apk as an example.
  • IDE integrated development environment
  • IDE development tools include application modules and dependent modules.
  • the application module includes source code and development resources
  • the development resources include layout files (for example, in XML format);
  • the dependent modules include the layout decompression package of the interface attributes of the application interface, for example, the layout decompression package is an aar package.
  • an apk can be generated, and the apk can be installed on electronic devices, such as mobile phones.
  • layout resources include Android native interface attributes and custom interface attributes.
  • the terminal device can create an application interface based on Activity, and write the attribute values to the interface attributes in the layout file of the application interface through the attribute assignment interface.
  • the electronic device takes effect through the measurement, layout, and drawing of the View in the layout file, and renders the application interface to the screen of the electronic device to present it to the user.
  • the terminal device can determine the layout parameters of the application interface based on the attributes in the layout file.
  • the terminal device can display the application interface based on the layout parameters.
  • FIG 13 it is a schematic diagram of application interface loading corresponding to an interface display method provided by an embodiment of the present application.
  • Figure 13 shows the process in which the layout parameters of an activity window (Activity) are transferred to the view through a hierarchical relationship during the loading process.
  • the view is loaded based on the layout parameters, and the application interface is loaded and displayed.
  • any Activity holds a Window object, which is an instance of the phone window (PhoneWindow).
  • the management of this Window instance in Android can be completed through the window manager (WindowManager) in the Activity.
  • PhoneWindow holds a view window object (DecorView).
  • DecorView itself is an interface layout frame (FrameLayout).
  • DecorView When DecorView receives the layout file resource ID passed from Activity, it will use the layout filler (layoutInflater) to The layout resource ID is converted into a View and added to the DecorView, and in the subsequent recovery (resume) phase, the application interface is displayed on the electronic device screen through the display service.
  • the display service is WindowManagerService(), which is a service that passes the application process to the system process and then completes the display.
  • DecorView contains multiple Views, and each View can contain multiple ViewGroups.
  • the device initialization parameters obtained through WindowManager can be passed to each sub-View level by level through the View hierarchy.
  • Each sub-View can correspond to an application interface.
  • Each child View uses the parameter constraints and its own configuration passed by the parent View to complete its own size calculation.
  • the layout file developed by the application developer in this application is a sub-View in the ContentView or TitleView in Figure 13.
  • the application interface When the application interface is running, it can be based on the size parameters passed by the parent View. and the attribute values of the interface attributes to calculate the size of the View, and determine the layout parameters of the application interface based on the size of the View and the interface attributes.
  • the process by which the electronic device determines the layout parameters of the application interface can be as follows:
  • the electronic device obtains the interface attributes of the application interface; the electronic device determines the layout parameters of the application interface based on the screen size of the electronic device and the interface attributes of the application interface.
  • the electronic device can determine the size of each interface element in the application interface according to the screen size of the electronic device and/or the size of the application interface, as well as the interface attributes of the application interface; and the electronic device can determine the size of each interface element in the application interface according to The size and the interface properties of the application interface determine the layout parameters of the application interface.
  • the interface properties of the application interface have been described in detail previously.
  • the following takes the interface attribute of the application interface as the spacing attribute as an example to explain how to determine the spacing parameters of the application interface based on the size and spacing attributes of each interface element in the application interface.
  • the spacing attribute only affects the spacing parameter, but does not affect the size of each interface element.
  • Figure 14 shows the process of the electronic device determining the spacing parameter of the application interface based on the spacing attribute. Specific steps are as follows:
  • Step 1401 The electronic device obtains the initial value of the spacing parameter of the application interface.
  • Step 1402 The electronic device measures the size of each interface element in the application interface.
  • Step 1403 The electronic device determines the spacing parameters of the application interface according to the spacing attribute.
  • the interface elements of the application interface may be one line or multiple lines. If it is one row, determine the spacing parameters of the only one row of interface elements; if it is multiple rows, determine the spacing parameters of each row of interface elements in the multi-line interface elements.
  • Step 1404 The electronic device refreshes the spacing parameter of the application interface.
  • the application interface includes K interface elements, and the steps for determining the layout parameters of the application interface may be as follows:
  • the electronic device determines, based on the size of each interface element in the application interface and the interface attributes of the application interface, based on the remaining space of the application interface, that T interface elements among the K interface elements are within the remaining space. layout parameters in the space; the electronic device updates the remaining space, and if the remaining space is greater than a preset threshold, returns the remaining space based on the application interface to determine T interfaces among the K interface elements Steps to layout parameters of elements in the remaining space.
  • Step 1501 Obtain the remaining space of the application interface.
  • the remaining space can be the number of rows, the number of columns, or the unit of the predefined display area.
  • the remaining space can be 3 lines. The following uses the remaining space as the number of rows as an example.
  • Step 1502 Determine whether the remaining space is greater than a preset threshold.
  • Step 1503 Create a new row. This line is used for the layout of interface elements.
  • Step 1504 Determine whether all interface elements of the application interface have been laid out.
  • step 1505 If yes, perform step 1505; otherwise, perform step 1508.
  • Step 1505 Determine the spacing parameters of the application interface according to the spacing attribute of the application interface.
  • Step 1506 Determine the coordinates of the interface element of the current row.
  • Step 1507 Update the remaining space.
  • step 1507 After step 1507 is executed, return to step 1502.
  • Step 1508 Obtain the size and layout parameters of each interface element in the application interface.
  • Step 1509 Determine whether to add the current interface element to the current row according to the element arrangement attribute.
  • step 1504 If yes, return to step 1504; otherwise, return to step 1505.
  • each interface attribute of the application interface is set with a corresponding attribute priority.
  • the process of determining the size of each interface element in the application interface can be as follows:
  • the electronic device determines the intermediate value of the size of each interface element in the application interface according to the first attribute according to the screen size of the electronic device and/or the size of the application interface; the electronic device determines the intermediate value of the size of each interface element in the application interface according to the screen size of the electronic device and/or the size of the application interface. Or the size of the application interface, according to the second attribute, adjust the intermediate value of the size of each interface element in the application interface to obtain the size of each interface element in the application interface.
  • the first attribute and the second attribute are any two interface attributes of the application interface, and the attribute priority of the first attribute is greater than the attribute priority of the second attribute.
  • Step 1601 Obtain the remaining space of the application interface.
  • the remaining space can be the number of rows, the number of columns, or the unit of the predefined display area.
  • the remaining space can be 3 lines. The following uses the remaining space as the number of rows as an example.
  • Step 1602 Determine whether the remaining space is greater than a preset threshold.
  • Step 1603 Create a new row. This line is used for the layout of interface elements.
  • Step 1604 Determine whether all interface elements of the application interface have been laid out.
  • step 1605 If yes, perform step 1605; otherwise, perform step 1608.
  • Step 1605 Determine the proportion of interface elements in the current row.
  • the proportion value of the interface element is the ratio of the width of the interface element to the width of the application interface.
  • Step 1606 Determine the size of the interface element based on the proportion of the interface element in the current row and the initial aspect ratio.
  • Step 1607 Update the remaining space.
  • step 1607 After step 1607 is executed, return to step 1602.
  • Step 1608 Obtain the size and layout parameters of each interface element in the application interface.
  • Step 1609 Determine whether to add the current interface element to the current row according to the element arrangement attribute.
  • step 1604 If yes, return to step 1604; otherwise, return to step 1605.
  • the interface element size adaptation is mainly based on the calculated width information and the original aspect ratio information of the interface element, and calculates the scaled width and height information. And refresh the aspect ratio to the layout parameters of the interface element. Calculate the top, bottom, left, and right coordinates of the current first interface element, and then layout it into the interface elements based on the top, bottom, left, and right coordinates, and then traverse the layout of all current interface elements. Batch refresh all layout parameters according to the set interface attributes, and so on to each interface element.
  • the method provided by the embodiments of the present application is introduced from the perspective of the electronic device (mobile phone 100) as the execution subject.
  • the electronic device may include a hardware structure and/or a software module to implement the above functions in the form of a hardware structure, a software module, or a hardware structure plus a software module. Whether one of the above functions is performed as a hardware structure, a software module, or a hardware structure plus a software module depends on the specific application and design constraints of the technical solution.
  • the electronic device may include: a communication interface 1701, one or more processors 1702, and one or more memories 1703; each of the above devices may be configured through a or multiple communication bus connections.
  • one or more computer programs may be stored in the above-mentioned memory 1703 and configured to be executed by the one or more processors 1702.
  • the one or more computer programs include instructions, and the instructions are executed by the one or more processors 1702. When 1702 is executed, all or part of the steps recorded in the foregoing method embodiments can be implemented.
  • the processor 1702 may be a central processing unit (CPU) or an application-specific integrated circuit (ASIC). It may be one or more integrated circuits used to control program execution. It may be Baseband chips, etc.
  • the number of memories 1703 may be one or more, and the memory 1703 may be a read-only memory (ROM), a random access memory (RAM), a disk memory, or the like.
  • the electronic device shown in Figure 17 may be a mobile phone, an iPad, a laptop, a smart TV, a wearable device (such as a smart watch, a smart helmet, or a smart bracelet, etc.).
  • a mobile phone When the electronic device shown in Figure 17 is a mobile phone, its structure can be seen in Figure 1 .
  • the present application provides a system.
  • the system includes a first electronic device and a second electronic device.
  • the first electronic device and the second electronic device are both used to display the application interface of a target application.
  • the screen size of the first electronic device is the same as that of the second electronic device.
  • the screen sizes of the second electronic devices are different;
  • the first electronic device is configured to display a first application interface of the target application, and the interface layout of the first application interface corresponds to the screen size of the first electronic device or the size of the first application interface;
  • the second electronic device is configured to display a second application interface of the target application, and the interface layout of the second application interface corresponds to the screen size of the second electronic device or the size of the second application interface.
  • the interface layout of the first application interface includes at least the spacing between adjacent interface elements, the display area in the application interface and the display area where each interface element is located, the hiding or display of each interface element, and the display area of each interface element.
  • the size of the interface elements and/or the number of repeated displays of each interface element is different from the interface layout of the second application interface.
  • the interface attributes of the first application interface include a spacing attribute, and the spacing attribute is used to determine the spacing between adjacent interface elements in the first application interface.
  • the spacing between adjacent interface elements in the first application interface can be adaptively determined, thereby improving the display effect.
  • the spacing attribute is used to determine that the spacing between adjacent interface elements in the application interface is the same, and the spacing between the interface elements at the edge of the application interface and the edge of the application interface is the same, or Are not the same;
  • the spacing attribute is used to determine the maximum value and ⁇ or the minimum value of the spacing between adjacent interface elements in the first application interface, and ⁇ or the spacing attribute is used to determine the first application interface The maximum and ⁇ or minimum value of the distance between the edge interface element and the edge of the first application interface.
  • the spacing between adjacent interface elements in the first application interface and the spacing between the interface elements at the edge of the first application interface and the edge of the first application interface are adaptively determined, thereby improving flexibility.
  • the spacing attribute includes a mapping relationship between the spacing between adjacent interface elements in the application interface and the size of adjacent interface elements, and/or the relationship between the interface elements at the edge of the application interface and Mapping relationship between the spacing of the application interface edge and the size of the interface elements of the application interface edge.
  • the spacing between adjacent interface elements in the first application interface can be adjusted according to the size of the adjacent interface elements.
  • the rows are adaptively adjusted, and the distance between the interface element at the edge of the first application interface and the edge of the first application interface can be adaptively adjusted according to the size of the interface element at the edge of the first application interface.
  • the interface attributes of the first application interface include element arrangement attributes, and the element arrangement attributes are used to determine the display area in the first application interface and the display area where each interface element is located.
  • the display area in the first application interface and the display area where each interface element is located can be determined adaptively.
  • the element arrangement attributes include row attributes and/or column attributes.
  • the row attributes are used to determine the number of rows of interface elements in the first application interface and the row where the interface elements are located.
  • the column attribute is used to determine the number of columns of interface elements in the first application interface and the column in which the interface elements are located.
  • the number of rows of interface elements and the rows where interface elements are located, as well as the number of columns of interface elements and the columns where interface elements are located can be adaptively determined.
  • the row attributes include a mapping relationship between the length and width ratio of the first application interface and the number of rows of interface elements in the first application interface
  • the column attributes include the mapping relationship between the length and width of the first application interface.
  • the row attributes and/or the column are determined according to the ratio of the length to the width of the first application interface.
  • the attributes can make the arrangement of interface elements in the first application interface more suitable for the screen size of the electronic device.
  • the row attributes include at least one of the maximum number of rows, the minimum number of rows, the maximum number of row elements, and the minimum number of row elements
  • the column attributes include the maximum number of columns and the minimum number of columns. , at least one of the maximum number of column elements and the minimum number of column elements.
  • the interface attributes of the first application interface include hidden attributes, and the hidden attributes are used to determine whether each interface element in the first application interface is hidden or displayed.
  • the hidden attributes include the corresponding hiding priority of each interface element in the first application interface, and each interface element in the first application interface is hidden in the order of the hiding priority of each interface element.
  • the hidden attributes also include a set of elements that can be hidden and/or a maximum number of elements that can be hidden, and the set of elements that can be hidden is a set of interface elements that are allowed to be hidden in the first application interface.
  • the maximum number of hidden elements is the maximum number of interface elements allowed to be hidden in the first application interface.
  • the interface attributes of the first application interface include a scaling attribute, and the scaling attribute is used to determine the size of each interface element in the first application interface.
  • the size of each interface element in the first application interface can be determined adaptively, thereby improving the display effect.
  • the scaling attribute is used to determine the size scaling ratio of each interface element in the first application interface, wherein the size scaling ratio of any interface element is based on the width of the interface element and the electronic The screen size of the device and/or the size of the first application interface are obtained.
  • the interface attributes of the first application interface include a repeat attribute, and the repeat attribute is used to determine the number of repeated displays of each interface element in the first application interface.
  • the number of repeated displays of each interface element in the first application interface is based on the repetition attribute, the size of each interface element in the first application interface, the length and length of the first application interface.
  • the width ratio is determined.
  • the ratio of the length to the width of the first application interface can indirectly reflect the screen size of the electronic device
  • the number of repeated displays is determined based on the ratio of the length to the width of the first application interface, which can make the first application interface
  • the repeated display of interface elements is more suitable for the screen size of electronic devices.
  • the electronic device displays the first application interface of the target application, it further includes:
  • the electronic device obtains the interface attributes of the first application interface; the electronic device obtains the interface attributes of the first application interface according to the screen size of the electronic device and/or the size of the first application interface, and the interface attributes of the first application interface, Determine the size of each interface element in the first application interface; the electronic device determines the size of each interface element in the first application interface according to the size of each interface element in the first application interface and the interface attributes of the first application interface. layout parameters.
  • the layout parameters of the first application interface can be automatically determined according to the current screen size, so that the interface layout of the first application interface adapts to the current screen size.
  • Embodiments of the present application also provide a computer-readable storage medium.
  • Computer instructions are stored on the computer-readable storage medium. When these computer instructions are called and executed by a computer, they can cause the computer to complete any one of the above method embodiments and method embodiments. methods involved in possible designs.
  • the computer-readable storage medium is not limited. For example, it may be RAM (random-access memory), ROM (read-only memory), etc.
  • This application also provides a chip, which may include a processor and an interface circuit, for completing the above method embodiments and the methods involved in any possible implementation of the method embodiments, where "coupling" means The two components are coupled to each other directly or indirectly, and this coupling may be fixed or removable.
  • An embodiment of the present application also provides a computer program product including instructions.
  • the computer program product When the computer program product is run on an electronic device, the electronic device can execute all or part of the steps described in the foregoing method embodiments.
  • the above embodiments it may be implemented in whole or in part by software, hardware, firmware, or any combination thereof.
  • software it may be implemented in whole or in part in the form of computer instructions.
  • the computer instructions When the computer instructions are loaded and executed on a computer, processes or functions described in accordance with embodiments of the present invention are generated in whole or in part.
  • the computer may be a general-purpose computer, a special-purpose computer, a computer network, or other programmable device.
  • the computer instructions may be stored in or transmitted from one computer-readable storage medium to another, e.g., the computer instructions may be transferred from a website, computer, server, or data center Transmission to another website, computer, server or data center through wired (such as coaxial cable, optical fiber) or wireless (such as infrared, wireless, microwave, etc.) means.
  • the computer-readable storage medium may be any available medium that can be accessed by a computer or a data storage device such as a server, data center, etc. that contains one or more available media integrated.
  • the available media may be magnetic media (eg, floppy disk, hard disk, tape), optical media (eg, DVD), or semiconductor media (eg, Solid State Disk (SSD)), etc.
  • the steps of the method or algorithm described in the embodiments of this application can be directly embedded in hardware, a software unit executed by a processor, or a combination of the two.
  • the software unit may be stored in RAM memory, flash memory, ROM memory, EPROM memory, EEPROM memory, register, hard disk, removable disk, CD-ROM or any other form of storage medium in the art.
  • the storage medium can be connected to the processor, so that the processor can read information from the storage medium and can store and write information to the storage medium.
  • the storage medium can also be integrated into the processor.
  • the processor and the storage medium can be installed in the ASIC, and the ASIC can be installed in the terminal device.
  • the processor and the storage medium may also be provided in different components in the terminal device.
  • These computer instructions may also be loaded onto a computer or other programmable data processing device such that a series of operational steps are performed on the computer or other programmable device to produce computer-implemented processes, thereby causing the instructions to execute on the computer or other programmable device
  • steps for implementing the functionality specified in a process or processes in a flow diagram and/or in a block or blocks in a block diagram are also be loaded onto a computer or other programmable data processing device such that a series of operational steps are performed on the computer or other programmable device to produce computer-implemented processes, thereby causing the instructions to execute on the computer or other programmable device.

Abstract

本发明公开了一种应用界面显示方法及电子设备。其中方法为：电子设备显示目标应用的应用界面，所述应用界面的界面布局和所述电子设备的屏幕尺寸或所述应用界面的尺寸对应，所述应用界面的界面布局是按照所述应用界面在所述电子设备上的布局参数确定的，所述布局参数是根据所述目标应用的应用界面的界面属性和所述电子设备的屏幕尺寸或应用界面的尺寸确定的，所述界面属性为约束所述布局参数的预设条件。从而可以按照应用界面的布局参数显示与电子设备的屏幕尺寸或应用界面的尺寸对应的界面布局。因此，能够使得应用界面适应电子设备的屏幕尺寸，从而达到较佳的显示效果。

Description

一种应用界面显示方法及电子设备
相关申请的交叉引用
本申请要求在2022年05月28日提交中国专利局、申请号为202210595303.7、申请名称为“一种应用界面显示方法及电子设备”的中国专利申请的优先权，其全部内容通过引用结合在本申请中。
技术领域
本申请涉及终端技术领域，尤其涉及一种应用界面显示方法及电子设备。
背景技术
目前智能终端的形态日益丰富，用户拥有的电子设备从智能手机逐渐扩展到智能手表、智能电视、智能车机等设备。电子设备类型的多样化，带来了屏幕多样化。一些应用的界面可能要在不同的电子设备的屏幕之间进行迁移。例如智能手机的应用界面可能要在智能电视上显示。
现有技术中，应用界面在不同电子设备的屏幕之间进行迁移时，不能达到较佳的显示效果。例如，基于小屏幕的电子设备(如智能手机)开发的应用，其应用界面的布局是适用小屏幕的，在小屏幕上显示能够达到较佳的显示效果。然而，当应用界面向大屏幕的电子设备迁移时(如从智能手机向智能电视迁移)，那么应用界面在大屏幕上显示时便不能达到较佳的显示效果。例如，大屏幕显示应用界面时，会显示多个小窗口的应用界面，每个小窗口的应用界面对应于在小屏幕上显示的一个应用界面，而每个应用界面在小屏幕上显示时一般会全屏显示。显然，这种方式不能发挥大屏幕的优势，影响应用界面的显示效果。因此，应用界面在不同电子设备的屏幕之间进行迁移时，不能达到较佳的显示效果。这是一个亟待解决的问题。
发明内容
本申请提供一种应用界面显示方法及电子设备，用以解决应用界面在不同电子设备的屏幕之间进行迁移时，不能达到较佳的显示效果的问题。
第一方面，本申请实施例提供了一种应用界面显示方法，该方法可以应用于本申请提供的一种电子设备。该方法具体为：
电子设备显示目标应用的应用界面，所述应用界面的界面布局和所述电子设备的屏幕尺寸或所述应用界面的尺寸对应，所述应用界面的界面布局是按照所述应用界面在所述电子设备上的布局参数确定的，所述布局参数是根据所述目标应用的应用界面的界面属性和所述电子设备的屏幕尺寸和\或所述应用界面的尺寸确定的，所述界面属性为约束所述布局参数的预设条件。
上述方式下，当目标应用的应用界面迁移至电子设备时，能够根据所述目标应用的界面属性，以及所述电子设备的屏幕尺寸和\或所述应用界面的尺寸确定在所述电子设备上的布局参数，从而可以按照应用界面的布局参数显示与电子设备的屏幕尺寸对应的界面布局。 因此，能够使得应用界面适应电子设备的屏幕尺寸，从而达到较佳的显示效果。
一种可能的设计中，所述应用界面的界面属性包括间距属性，所述间距属性用于确定所述应用界面中相邻界面元素之间的间距。
如此，能够自适应地确定应用界面中相邻界面元素之间的间距，提升显示效果。
一种可能的设计中，所述间距属性用于确定所述应用界面中相邻界面元素之间的间距相同，且与所述应用界面边缘的界面元素与所述应用界面边缘的间距均相同或者不相同；
和\或所述间距属性用于确定所述应用界面中相邻界面元素之间的间距的最大值和\或最小值，和\或所述间距属性用于确定所述应用界面边缘的界面元素与应用界面边缘的间距的最大值和\或最小值。
通过设置间距的最大值和\或最小值，以及设置应用界面中相邻界面元素之间的间距和\或应用界面边缘的界面元素与应用界面边缘的间距是否相同的前提下，在一定条件下自适应地确定应用界面中相邻界面元素之间的间距以及应用界面边缘的界面元素与应用界面边缘的间距，提升了灵活性。
一种可能的设计中，所述间距属性包括所述应用界面中相邻界面元素之间的间距与相邻界面元素的尺寸之间的映射关系，和\或所述应用界面边缘的界面元素与所述应用界面边缘的间距与所述应用界面边缘的界面元素的尺寸之间的映射关系。
如此，使得应用界面中相邻界面元素之间的间距能够根据相邻界面元素的尺寸进行自适应调整，以及使得应用界面边缘的界面元素与应用界面边缘的间距能够根据应用界面边缘的界面元素的尺寸进行自适应调整。
一种可能的设计中，所述应用界面的界面属性包括元素排布属性，所述元素排布属性用于确定所述应用界面中的显示区域以及各界面元素所在显示区域。
如此，能够自适应地确定应用界面中的显示区域以及各界面元素所在显示区域。
一种可能的设计中，所述元素排布属性包括行属性和\或列属性，所述行属性用于确定所述应用界面中的界面元素的行数以及界面元素所在行，所述列属性用于确定所述应用界面中的界面元素的列数以及界面元素所在列。
上述方式下，通过设置行属性和列属性，能够自适应地确定界面元素的行数以及界面元素所在行，以及界面元素的列数以及界面元素所在列。
一种可能的设计中，所述行属性包括所述应用界面的长与宽的比值与所述应用界面中的界面元素的行数的映射关系，所述列属性包括所述应用界面的长与宽的比值与所述应用界面中的界面元素的列数的映射关系。
上述方式下，由于应用界面的长与宽的比值能够间接反映出电子设备的屏幕尺寸，因此根据所述应用界面的长与宽的比值确定所述行属性和\或所述列属性能够使得应用界面中的界面元素排布更适用于电子设备的屏幕尺寸。
一种可能的设计中，所述行属性包括行数最大值、行数最小值、行元素最大数量、行元素最小数量中至少一项，所述列属性包括列数最大值、列数最小值、列元素最大数量、列元素最小数量中至少一项。
一种可能的设计中，所述应用界面的界面属性包括隐藏属性，所述隐藏属性用于确定所述应用界面中各界面元素隐藏或显示。
如此，能够自适应地确定应用界面中各界面元素隐藏或显示。
一种可能的设计中，所述隐藏属性包括所述应用界面中各界面元素对应隐藏优先级， 所述应用界面中各界面元素按照各界面元素的隐藏优先级顺序隐藏。
上述方式下，通过设置各界面元素的隐藏优先级，能够将较重要的界面元素凸显出来，避免因为屏幕尺寸的原因显示过多界面元素造成页面元素显示畸形。
一种可能的设计中，所述隐藏属性还包括元素可隐藏集合和\或元素隐藏数量最大值，所述元素可隐藏集合为所述应用界面中允许隐藏的界面元素的集合，所述元素隐藏数量最大值为所述应用界面中允许隐藏的界面元素的最大数量。
上述方式下，通过设置元素可隐藏集合和\或元素隐藏数量最大值，能够进一步控制应用界面中的界面元素隐藏或者显示。
一种可能的设计中，所述应用界面的界面属性包括缩放属性，所述缩放属性用于确定所述应用界面中各界面元素的尺寸。
如此，能够自适应地确定应用界面中各界面元素的尺寸，提升显示效果。
一种可能的设计中，所述缩放属性用于确定所述应用界面中各界面元素的尺寸缩放比例，其中，任一界面元素的尺寸缩放比例是根据该界面元素的宽度以及所述电子设备的屏幕尺寸和\或所述应用界面的尺寸得到的。
一种可能的设计中，所述应用界面的界面属性包括重复属性，所述重复属性用于确定所述应用界面中各界面元素的重复显示数量。
如此，能够自适应地确定应用界面中各界面元素的是否重复显示，提升显示效果。
一种可能的设计中，所述应用界面中各界面元素的重复显示数量是根据所述重复属性、所述应用界面中各界面元素的尺寸、所述应用界面的长与宽的比值确定的。
上述方式下，由于应用界面的长与宽的比值能够间接反映出电子设备的屏幕尺寸，因此根据所述应用界面的长与宽的比值确定重复显示数量，能够使得应用界面中的界面元素的重复显示更适用于电子设备的屏幕尺寸。
一种可能的设计中，所述电子设备显示所述目标应用的应用界面之前，还包括：
所述电子设备获取所述应用界面的界面属性；所述电子设备根据所述电子设备的屏幕尺寸和\或所述应用界面的尺寸，以及所述应用界面的界面属性，确定所述应用界面中各界面元素的尺寸；所述电子设备根据所述应用界面中各界面元素的尺寸以及所述应用界面的界面属性，确定所述应用界面的布局参数。
如此，可以自动化地根据当前的屏幕尺寸确定应用界面的布局参数，使得应用界面的界面布局与当前的屏幕尺寸适应。
一种可能的设计中，所述应用界面各项界面属性设置有对应的属性优先级，所述电子设备根据所述电子设备的屏幕尺寸和\或所述应用界面的尺寸，以及所述应用界面的界面属性，确定所述应用界面中各界面元素的尺寸，包括：
所述电子设备根据所述电子设备的屏幕尺寸和\或所述应用界面的尺寸，按照第一属性，确定所述应用界面中各界面元素的尺寸的中间值；所述电子设备根据所述电子设备的屏幕尺寸和\或所述应用界面的尺寸，按照第二属性，对所述应用界面中各界面元素的尺寸的中间值进行调整，得到所述应用界面中各界面元素的尺寸，所述第一属性和所述第二属性为所述应用界面的任意两项界面属性，所述第一属性的属性优先级大于所述第二属性的属性优先级。
上述方式下，通过设置属性的优先级，可以按照预先设置的属性的主次设置各界面元素的尺寸，从而能够根据特定需求凸显相应的显示效果。
一种可能的设计中，所述应用界面包括K个界面元素，所述电子设备根据所述应用界面中各界面元素的尺寸以及所述应用界面的界面属性，确定所述应用界面的布局参数，包括：
所述电子设备根据所述应用界面中各界面元素的尺寸以及所述应用界面的界面属性，基于所述应用界面的剩余空间，确定所述K个界面元素中的T个界面元素在所述剩余空间中的布局参数；所述电子设备更新所述剩余空间，若所述剩余空间大于预设阈值，则返回所述基于所述应用界面的剩余空间确定所述K个界面元素中的T个界面元素在所述剩余空间中的布局参数的步骤。
上述方式下，基于所述应用界面的剩余空间不断地迭代，可以每次为T个界面元素确定在所述剩余空间中的布局参数，从而使得不同批次的界面元素可以分别设置布局参数，满足界面元素的个性化设置要求。
第二方面，本申请实施例提供了一种应用界面显示方法，第一电子设备和第二电子设备均用于显示目标应用的应用界面，所述第一电子设备的屏幕尺寸与所述第二电子设备的屏幕尺寸不相同，所述方法包括：
所述第一电子设备显示所述目标应用的第一应用界面，所述第一应用界面的界面布局对应于所述第一电子设备的屏幕尺寸或者所述第一应用界面的尺寸；
所述第二电子设备显示所述目标应用的第二应用界面，所述第二应用界面的界面布局对应于所述第二电子设备的屏幕尺寸或者所述第二应用界面的尺寸。
一种可能的设计中，所述第一应用界面的界面布局至少在相邻界面元素之间的间距、应用界面中的显示区域以及各界面元素所在显示区域、各界面元素的隐藏或显示、各界面元素的尺寸、和/或各界面元素的重复显示数量上，与所述第二应用界面的界面布局不同。
一种可能的设计中，所述第一应用界面的界面属性包括间距属性，所述间距属性用于确定所述第一应用界面中相邻界面元素之间的间距。
如此，能够自适应地确定第一应用界面中相邻界面元素之间的间距，提升显示效果。
一种可能的设计中，所述间距属性用于确定所述应用界面中相邻界面元素之间的间距相同，且与所述应用界面边缘的界面元素与所述应用界面边缘的间距均相同或者不相同；
和\或所述间距属性用于确定所述第一应用界面中相邻界面元素之间的间距的最大值和\或最小值，和\或所述间距属性用于确定所述第一应用界面边缘的界面元素与第一应用界面边缘的间距的最大值和\或最小值。
通过设置间距的最大值和\或最小值，以及设置第一应用界面中相邻界面元素之间的间距和\或第一应用界面边缘的界面元素与第一应用界面边缘的间距是否相同的前提下，在一定条件下自适应地确定第一应用界面中相邻界面元素之间的间距以及第一应用界面边缘的界面元素与第一应用界面边缘的间距，提升了灵活性。
一种可能的设计中，所述间距属性包括所述应用界面中相邻界面元素之间的间距与相邻界面元素的尺寸之间的映射关系，和\或所述应用界面边缘的界面元素与所述应用界面边缘的间距与所述应用界面边缘的界面元素的尺寸之间的映射关系。
如此，使得第一应用界面中相邻界面元素之间的间距能够根据相邻界面元素的尺寸进行自适应调整，以及使得第一应用界面边缘的界面元素与第一应用界面边缘的间距能够根据第一应用界面边缘的界面元素的尺寸进行自适应调整。
一种可能的设计中，所述第一应用界面的界面属性包括元素排布属性，所述元素排布 属性用于确定所述第一应用界面中的显示区域以及各界面元素所在显示区域。
如此，能够自适应地确定第一应用界面中的显示区域以及各界面元素所在显示区域。
一种可能的设计中，所述元素排布属性包括行属性和\或列属性，所述行属性用于确定所述第一应用界面中的界面元素的行数以及界面元素所在行，所述列属性用于确定所述第一应用界面中的界面元素的列数以及界面元素所在列。
上述方式下，通过设置行属性和列属性，能够自适应地确定界面元素的行数以及界面元素所在行，以及界面元素的列数以及界面元素所在列。
一种可能的设计中，所述行属性包括所述第一应用界面的长与宽的比值与所述第一应用界面中的界面元素的行数的映射关系，所述列属性包括所述第一应用界面的长与宽的比值与所述第一应用界面中的界面元素的列数的映射关系。
上述方式下，由于第一应用界面的长与宽的比值能够间接反映出电子设备的屏幕尺寸，因此根据所述第一应用界面的长与宽的比值确定所述行属性和\或所述列属性能够使得第一应用界面中的界面元素排布更适用于电子设备的屏幕尺寸。
一种可能的设计中，所述行属性包括行数最大值、行数最小值、行元素最大数量、行元素最小数量中至少一项，所述列属性包括列数最大值、列数最小值、列元素最大数量、列元素最小数量中至少一项。
一种可能的设计中，所述第一应用界面的界面属性包括隐藏属性，所述隐藏属性用于确定所述第一应用界面中各界面元素隐藏或显示。
如此，能够自适应地确定第一应用界面中各界面元素隐藏或显示。
一种可能的设计中，所述隐藏属性包括所述第一应用界面中各界面元素对应隐藏优先级，所述第一应用界面中各界面元素按照各界面元素的隐藏优先级顺序隐藏。
上述方式下，通过设置各界面元素的隐藏优先级，能够将较重要的界面元素凸显出来，避免因为屏幕尺寸的原因显示过多界面元素造成页面元素显示畸形。
一种可能的设计中，所述隐藏属性还包括元素可隐藏集合和\或元素隐藏数量最大值，所述元素可隐藏集合为所述第一应用界面中允许隐藏的界面元素的集合，所述元素隐藏数量最大值为所述第一应用界面中允许隐藏的界面元素的最大数量。
上述方式下，通过设置元素可隐藏集合和\或元素隐藏数量最大值，能够进一步控制第一应用界面中的界面元素隐藏或者显示。
一种可能的设计中，所述第一应用界面的界面属性包括缩放属性，所述缩放属性用于确定所述第一应用界面中各界面元素的尺寸。
如此，能够自适应地确定第一应用界面中各界面元素的尺寸，提升显示效果。
一种可能的设计中，所述缩放属性用于确定所述第一应用界面中各界面元素的尺寸缩放比例，其中，任一界面元素的尺寸缩放比例是根据该界面元素的宽度以及所述电子设备的屏幕尺寸和\或所述第一应用界面的尺寸得到的。
一种可能的设计中，所述第一应用界面的界面属性包括重复属性，所述重复属性用于确定所述第一应用界面中各界面元素的重复显示数量。
如此，能够自适应地确定第一应用界面中各界面元素的是否重复显示，提升显示效果。
一种可能的设计中，所述第一应用界面中各界面元素的重复显示数量是根据所述重复属性、所述第一应用界面中各界面元素的尺寸、所述第一应用界面的长与宽的比值确定的。
上述方式下，由于第一应用界面的长与宽的比值能够间接反映出电子设备的屏幕尺寸， 因此根据所述第一应用界面的长与宽的比值确定重复显示数量，能够使得第一应用界面中的界面元素的重复显示更适用于电子设备的屏幕尺寸。
一种可能的设计中，所述电子设备显示所述目标应用的第一应用界面之前，还包括：
所述电子设备获取所述第一应用界面的界面属性；所述电子设备根据所述电子设备的屏幕尺寸和\或所述第一应用界面的尺寸，以及所述第一应用界面的界面属性，确定所述第一应用界面中各界面元素的尺寸；所述电子设备根据所述第一应用界面中各界面元素的尺寸以及所述第一应用界面的界面属性，确定所述第一应用界面的布局参数。
如此，可以自动化地根据当前的屏幕尺寸确定第一应用界面的布局参数，使得第一应用界面的界面布局与当前的屏幕尺寸适应。
第三方面，本申请提供一种电子设备，包括：一个或多个处理器；一个或多个存储器；
其中，所述一个或多个存储器存储有一个或多个计算机程序，所述一个或多个计算机程序包括指令，当所述指令被所述一个或多个处理器执行时，使得所述电子设备执行如第一方面中任一种可能的方法。
第四方面，本申请提供一种系统，所述系统包括第一电子设备和第二电子设备，第一电子设备和第二电子设备均用于显示目标应用的应用界面，所述第一电子设备的屏幕尺寸与所述第二电子设备的屏幕尺寸不相同；
所述第一电子设备，用于显示所述目标应用的第一应用界面，所述第一应用界面的界面布局对应于所述第一电子设备的屏幕尺寸或者所述第一应用界面的尺寸；
所述第二电子设备，用于显示所述目标应用的第二应用界面，所述第二应用界面的界面布局对应于所述第二电子设备的屏幕尺寸或者所述第二应用界面的尺寸。
第五方面，本申请提供一种计算机可读存储介质，所述计算机可读存储介质包括计算机程序，当计算机程序在电子设备上运行时，使得所述电子设备执行如第一方面中任一种可能的方法。
第六方面，本申请实施例提供的芯片，该芯片包括处理器和通信接口，所述通信接口用于接收代码指令，并传输到处理器。处理器，用于调用通信接口传输的代码指令以执行上述第一方面或第二方面中任一方面中处理器的步骤。
第七方面，本申请还提供一种包括指令的计算机程序产品，当其被运行时，使得上述各方面所述的方法被执行。
以上第二方面到第七方面的有益效果，请参见第一方面的有益效果，不重复赘述。
附图说明
图1为本申请实施例提供的一种电子设备100的结构示意图；
图2a～图2b为本申请实施例提供的一种应用界面显示方法的场景示意图；
图3a～图3b为间距属性中均分类型对应的界面布局示意图；
图4a～图4h为界面元素在应用界面内保持均匀分布的显示效果图；
图5a～图5b为界面元素的间距根据界面元素的尺寸来确定的显示效果图；
图6a～图6b为元素排布属性对应的界面布局示意图；
图7a～图7d为元素排布属性对应的应用界面显示效果示意图；
图8a～图8d为隐藏属性对应的应用界面显示效果示意图；
图9a～图9d为缩放属性对应的应用界面显示效果示意图；
图10a～图10d为重复属性对应的应用界面显示效果示意图；
图11为本申请实施例提供的一种界面显示方法所对应的开发过程示意图；
图12为本申请提供的一种应用界面显示方法对应的软件架构示意图；
图13为本申请实施例提供的一种界面显示方法所对应的应用界面加载示意图；
图14为本申请实施例提供的一种界面显示方法中确定应用界面的间距参数的步骤流程示意图；
图15为本申请实施例提供的一种界面显示方法中确定界面元素在所述剩余空间中的布局参数的步骤流程示意图；
图16为本申请实施例提供的一种界面显示方法中确定应用界面中各界面元素的尺寸的步骤流程示意图；
图17为本申请实施例提供的电子设备的结构示意图。
具体实施方式
下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述。
以下实施例中所使用的术语只是为了描述特定实施例的目的，而并非旨在作为对本申请的限制。如在本申请的说明书和所附权利要求书中所使用的那样，单数表达形式“一个”、“一种”、“所述”、“上述”、“该”和“这一”旨在也包括例如“一个或多个”这种表达形式，除非其上下文中明确地有相反指示。还应当理解，在本申请实施例中，“一个或多个”是指一个或两个以上(包含两个)；“和/或”，描述关联对象的关联关系，表示可以存在三种关系；例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B的情况，其中A、B可以是单数或者复数。字符“/”一般表示前后关联对象是一种“或”的关系。
在本说明书中描述的参考“一个实施例”或“一些实施例”等意味着在本申请的一个或多个实施例中包括结合该实施例描述的特定特征、结构或特点。由此，在本说明书中的不同之处出现的语句“在一个实施例中”、“在一些实施例中”、“在其他一些实施例中”、“在另外一些实施例中”等不是必然都参考相同的实施例，而是意味着“一个或多个但不是所有的实施例”，除非是以其他方式另外特别强调。术语“包括”、“包含”、“具有”及它们的变形都意味着“包括但不限于”，除非是以其他方式另外特别强调。
本申请实施例中的术语多个”是指两个或两个以上，鉴于此，本申请实施例中也可以将“多个”理解为“至少两个”。“至少一个”，可理解为一个或多个，例如理解为一个、两个或更多个。例如，包括至少一个，是指包括一个、两个或更多个，而且不限制包括的是哪几个。例如，包括A、B和C中的至少一个，那么包括的可以是A、B、C，A和B，A和C，B和C，或A和B和C。同理，对于“至少一种”等描述的理解，也是类似的。“和/或”，描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。另外，字符“/”，如无特殊说明，一般表示前后关联对象是一种“或”的关系。
除非有相反的说明，本申请实施例提及“第一”、“第二”等序数词用于对多个对象进行区分，不用于限定多个对象的顺序、时序、优先级或者重要程度。
为了便于理解，对本申请实施例涉及的术语进行解释说明，该术语的解释说明也作为对本申请实施例发明内容的一部分。
本申请实施例提供了一种应用界面显示方法，该应用界面显示方法可以应用于电子设备。该电子设备可以是指向用户提供语音和/或数据连通性的设备，例如可以包括具有无线连接功能的手持式设备、或连接到无线调制解调器的终端设备。该终端设备可以经无线接入网(radio access network，RAN)与核心网进行通信，与RAN交换语音和/或数据。该终端设备可以包括用户设备(user equipment，UE)、无线终端设备、移动终端设备、订户单元(subscriber unit)、订户站(subscriber station)、移动站(mobile station)、移动台(mobile)、远程站(remote station)、接入点(access point，AP)、远程终端设备(remote terminal)、接入终端设备(access terminal)、用户终端设备(user terminal)、用户代理(user agent)、或用户装备(user device)等。例如，可以包括移动电话(或称为“蜂窝”电话)、移动电脑、平板电脑、个人数字助理(personal digital assistant，PDA)、媒体播放器、智能电视、穿戴式设备(例如智能手表、智能头盔或智能手环等)、路由器，机顶盒，音箱，手机，平板等，以及上述两项或两项以上的组合等。电子设备还可以是车载系统，比如电动车等。
在本申请一些实施例中，电子设备可以是包含内置电池的便捷式终端，诸如手机、平板电脑等，也可以是不包含内置电池的终端，本申请实施例不作限定。上述电子设备的示例性实施例包括但不限于搭载iOS、Android、Microsoft或者其它操作系统的便携式电子设备。上述便携式电子设备也可以是其它便携式电子设备，例如数码相机。还应当理解的是，在本申请其他一些实施例中，上述电子设备也可以不是便携式电子设备，而是台式计算机等。
通常情况下，电子设备可以支持多种应用。比如以下应用中的一个或多个：相机应用、即时消息收发应用、照片管理应用等。其中，即时消息收发应用可以有多种。比如微信、腾讯聊天软件(QQ)、WhatsApp Messenger、连我(Line)、照片分享(instagram)、Kakao Talk、钉钉等。用户通过即时消息收发应用，可以将文字、语音、图片、视频文件以及其他各种文件等信息发送给其他联系人；或者，用户可以通过即时消息收发应用实现与其他联系人的视频或音频通话。
图1以电子设备是手机为例进行说明，图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可以包括指纹传感器180H、触摸传感器180K。
处理器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的等待时间，因而提高了系统的效率。
USB接口130是符合USB标准规范的接口，具体可以是迷你(mini)USB接口，微型(micro)USB接口，USB类型C(USB Type C)接口等。USB接口130可以用于连接电源适配器为手机100充电，也可以用于手机100与外围设备之间传输数据。当手机100通过USB接口130与充电设备(比如电源适配器)连接时，手机100可以通过USB接口130与电源适配器传输电能。具体而言，手机100的USB接口130(比如USB type-c接口)中的配置信号线(configuration channel，cc)会检测电源适配器发送的电流，实现手机100和电源适配器之间的电流传输。
需要说明的是，图1中以手机100通过USB接口130与电源适配器连接为例，在实际应用中，手机100还可以通过其它方式与电源适配器连接，比如，在无线充电场景下，手机100通过发射端线圈与电源适配器中的接收端线圈之间的磁场耦合作用传输电能，或者有线充电场景下，通过其它类型充电接口与电源适配器连接传输电能。因此，本申请实施例不限定手机100与电源适配器之间的连接方式。
应理解，当手机100通过USB接口130与电源适配器连接时，手机100与电源适配器之间的电能传输可以通过USB接口130实现；当手机100使用无线充电的方式进行充电，比如手机100通过蓝牙连接的方式与电源适配器无线连接，这样的话，手机100与电源适配器之间的电能传输可以通过蓝牙传输。手机100与电源适配器之间的电能传输过程包括手机100识别电源适配器的供电能力等过程，具体内容在后文介绍。其中，电源适配器和手机100可以支持相同的协议，比如充电协议(power delivery protocol，PDP)、超级快充协议(super charging protocol，SCP)、快速充电协议(fast charging protocol，FCP)等。本申请实施例不作限定。
电源适配器可以与外部的电源(比如家用电等)连接，从外部的电源(比如家用电等)处获取电能，然后将获取的电能通过USB接口130输入到手机100(比如输入到手机100中的充电管理模块140)。充电管理模块140用于管理充电过程。比如，充电管理模块140用于决定将从USB接口130接收的电能提供给电源管理模块141还是提供给电池142。电源管理模块141接收电池142和/或充电管理模块140输入的电能，为处理器110，内部存储器121，通过外部存储器接口120为外部存储器，显示屏194，摄像头193，和无线通信模块160等外围部件供电。比如，当手机100未与电源适配器连接时，电源管理模块141接收电池142输入的电能，为各个部件供电。当手机100与电源适配器连接并进行充电时，电源管理模块141接收充电管理模块140输入的电能，为各个部件供电，当然，当手机100与电源适配器连接并进行充电时，电源管理模块141也可以接收电池142输入的电能，为各个部件供电。需要说明的是，电源管理模块141为各个部件供电可以有先后顺序，比如先为处理器110供电，然后为其它部件供电，当电源管理模块141为处理器110供电，处理器110启动之后，可以通知电源管理模块141为其它部件中的哪些部分供电，或者不为哪些部件供电等。
因此，手机100通过电源适配器与外部的电源(比如家用电)连接后，充电的过程可以如下：
电源适配器接收外部的电源的电能后，通过USB接口130将电能输入给充电管理模块 140。充电管理模块140一方面为电池142蓄电，另一方面为电源管理模块141提供输入电能；或者，充电管理模块140仅为电池142蓄电，电源管理模块141再从电池142获取电能为各个部件(比如处理器110，内部存储器121，显示屏194，摄像头193，和无线通信模块160等)供电。
需要说明的是，电源管理模块141可以和处理器110连接，处理器110可以通过电源管理模块141决定为哪些部件供电，比如，手机100以较低功耗的工作模式开机时，处理器110确定显示屏194需要供电，无线通信模块160不需要供电，则电源管理模块141为显示屏194供电，不为无线通信模块160供电。应理解，当手机100未连接电源适配器时，手机100可以通过电池142中储存的电能来为各个器件供电。
手机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的至少部分模块被设置在同一个器件中。
无线通信模块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可以包括N个显示屏194，N为大于1的正整数。
摄像头193用于捕获静态图像或视频。摄像头193可以包括至少一个前置摄像头和/或至少一个后置摄像头。
内部存储器121可以用于存储计算机可执行程序代码，所述可执行程序代码包括指令。处理器110通过运行存储在内部存储器121中的指令，从而执行手机100的各种功能应用以及数据处理。内部存储器121可以包括存储程序区和存储数据区。其中，存储程序区可存储操作系统，以及至少一个应用程序(比如相机应用，微信应用等)的软件代码等。存储数据区可存储手机100使用过程中所产生的数据(比如图像、视频等)等。此外，内部存储器121可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件，闪存器件，通用闪存存储器(universal flash storage，UFS)等。具体地，内部存储器121可以存储本申请实施例提供的开机控制方法的软件模块/代码，当处理器110运行所述软件模块/代码时，执行相应的流程步骤。内部存储器121还可以存储预设电压、预设电流、预设功率等取值。
外部存储器接口120可以用于连接外部存储卡，例如微型(micro)数字安全(secure digital，SD)卡，实现扩展手机100的存储能力。外部存储卡通过外部存储器接口120与处理器110通信，实现数据存储功能。例如将音乐，视频等文件保存在外部存储卡中。
当然，本申请实施例提供的开机控制方法的软件模块/代码也可以存储在外部存储器中，处理器110可以通过外部存储器接口120运行所述软件模块/代码，执行相应的流程步骤。手机100中的预设电压、预设电流、预设功率等取值也可以存储在外部存储器中。
手机100可以通过音频模块170，扬声器170A，受话器170B，麦克风170C，耳机接口170D，以及应用处理器等实现音频功能。例如音乐播放，录音、语音通话等。
指纹传感器180H用于采集指纹。手机100可以利用采集的指纹特性实现指纹解锁，访问应用锁，指纹拍照，指纹接听来电等。
触摸传感器180K，也称“触控面板”。触摸传感器180K可以设置于显示屏194，由触摸传感器180K与显示屏194组成触摸屏，也称“触控屏”。触摸传感器180K用于检测作用于其上或附近的触摸操作。触摸传感器可以将检测到的触摸操作传递给应用处理器，以确定触摸事件类型。可以通过显示屏194提供与触摸操作相关的视觉输出。在另一些实施例中，触摸传感器180K也可以设置于手机100的表面，与显示屏194所处的位置不同。
当然，传感器模块180还可以包括其它传感器，比如压力传感器，陀螺仪传感器，气压传感器，磁传感器，加速度传感器，距离传感器，接近光传感器，温度传感器，环境光传感器，骨传导传感器等，本申请实施例对此不限定。
按键190包括开机键，音量键等。按键190可以是机械按键，也可以是触摸式按键。手机100可以接收按键输入，产生与手机100的用户设置以及功能控制有关的键信号输入。本申请实施例中的开机指令、确认指令等可以通过按键190来输入。当然也可以通过显示屏194来输入。
马达191可以产生振动提示。马达191可以用于来电振动提示，也可以用于触摸振动反馈。例如，作用于不同应用(例如拍照，音频播放等)的触摸操作，可以对应不同的振动反馈效果。
指示器192可以是指示灯，可以用于指示充电状态，电量变化，也可以用于指示消息，未接来电，通知等。
SIM卡接口195用于连接SIM卡。SIM卡可以通过插入SIM卡接口195，或从SIM卡接口195拔出，实现和手机100的接触和分离。
可以理解的是，图1所示的结构并不构成对手机100的具体限定。在本申请另一些实施例中，手机100可以包括比图1示更多或更少的部件，或者组合某些部件，或者拆分某些部件，或者不同的部件布置。图1示的部件可以以硬件，软件或软件和硬件的组合实现。
图1示出的电子设备能够应用于本申请实施例提供的一种应用界面显示方法，下面对本申请实施例提供的一种应用界面显示方法进行详细描述。
电子设备显示目标应用的应用界面，所述应用界面的界面布局和所述电子设备的屏幕尺寸或所述应用界面的尺寸对应，所述应用界面的界面布局是按照所述应用界面在所述电子设备上的布局参数确定的，所述布局参数是根据所述目标应用的界面属性和所述电子设备的屏幕尺寸和\或显示界面尺寸确定的，所述界面属性为约束所述布局参数的预设条件。其中，应用界面可以由界面元素构成，界面元素是构成应用界面的基本单元。举例来说，界面元素为控件。所述应用界面的界面属性包括以下至少一项：间距属性；元素排布属性；隐藏属性；缩放属性；重复属性。
其中，所述间距属性用于确定所述应用界面中相邻界面元素之间的间距；所述元素排布属性用于确定所述应用界面中的显示区域以及各界面元素所在显示区域；所述隐藏属性用于确定所述应用界面中各界面元素隐藏或显示；所述缩放属性用于确定所述应用界面中各界面元素的尺寸；所述重复属性用于确定所述应用界面中各界面元素的重复显示数量。
本申请实施例提供的另一种应用界面显示方法可应用于第一电子设备和第二电子设备，第一电子设备和第二电子设备均用于显示目标应用的应用界面，所述第一电子设备的屏幕尺寸与所述第二电子设备的屏幕尺寸不相同，该方法可以为：
所述第一电子设备显示所述目标应用的第一应用界面，所述第一应用界面的界面布局对应于所述第一电子设备的屏幕尺寸或者所述第一应用界面尺寸；所述第二电子设备显示所述目标应用的第二应用界面，所述第二应用界面的界面布局对应于所述第二电子设备的屏幕尺寸或者所述第二应用界面尺寸。
本申请实施例提供的应用界面显示方法均可以适用于图2a示出的场景。所述第一电子设备(设备A)和第二电子设备(设备B)均用于显示目标应用的应用界面，所述第一电子设备(设备A)和设备B(设备B)均用于显示目标应用的应用界面，那么目标应用的应用界面会在设备A和设备B之间进行迁移。以设备A显示的第一应用界面、设备B显示的第二应用界面为例，所述第一应用界面中的界面元素与第二应用界面中的界面元素均 源于同一个目标应用。第一应用界面与第二应用界面均对应于目标应用中定义的同一界面，例如第一应用界面的标识与第二应用界面的标识相同。举例来说，第一应用界面与第二应用界面均是目标应用的启动界面，或者均是设置界面。然而，第一应用界面的界面布局对应于所述设备A中横屏的屏幕尺寸，第二应用界面的界面布局对应于所述设备B中竖屏的屏幕尺寸，从而可以使得所述目标应用在不同的电子设备显示时，使得各电子设备基于各自屏幕尺寸显示相应的应用界面。因此，能够使得应用界面适应电子设备的屏幕尺寸，从而达到较佳的显示效果。
需要说明的是，对于同一设备，本申请实施例提供的应用界面显示方法也可以均适用于图2b示出的场景。例如，设备A在分屏状态和全屏状态的界面布局也可能不同。
由上述应用界面显示方法的描述可知，第一电子设备根据电子设备的屏幕尺寸，能够基于目标应用的界面属性，自适应地确定第一应用界面的布局参数。那么第一电子设备便能够按照第一应用界面的布局参数显示第一应用界面，从而可以根据电子设备的屏幕尺寸自适应显示，达到较佳的显示效果。而应用界面可以有多个维度的界面属性。因此在不同尺寸电子设备的屏幕上显示时，电子设备可能基于应用界面不同的布局参数，呈现出不同布局的应用界面。下面详细描述基于应用界面的各个维度的界面属性，示出各维度的界面属性所确定的应用界面的布局。具体如下：
(1)间距属性
间距属性可以用于确定应用界面的间距参数。举例来说，间距属性可以包括均分类型，均分即为均匀分布。均分类型的取值(即属性值)可以为默认均分类型或内部均分类型。均分类型具体可用预设取值来表示，如取值为0表示均分类型为默认均分类型，取值为1表示均分类型为内部均分类型。间距参数可以包括应用界面中相邻界面元素之间的间距、应用界面边缘的界面元素与应用界面边缘的间距。另外，由于界面元素之间的相对位置关系可能是预先确定的，因此可以基于界面元素之间的相对位置关系，按照间距属性，确定间距参数。
其中，默认均分类型指应用界面中相邻界面元素之间的间距、应用界面边缘的界面元素与应用界面边缘的间距均相同，即应用界面边缘的界面元素与应用界面边缘的间距参与间距的均分；如图3a所示，应用界面中相邻界面元素之间的间距、应用界面边缘的界面元素与应用界面边缘的间距均为C1。内部均分类型指应用界面中相邻界面元素之间的间距均相同。应用界面边缘的界面元素与应用界面边缘的间距不参与均分，应用界面中相邻界面元素之间的间距均为C3。另外，图3a中仅以均分类型限定水平方向的界面元素为例，垂直方向上的均分也是同理，在此不再赘述。
举例来说，第一电子设备可以基于均分类型以及第一电子设备的屏幕尺寸，确定应用界面中相邻界面元素之间的间距以及应用界面边缘的界面元素与应用界面边缘的间距。以第一应用界面中的界面元素为一行界面元素为例，第一应用界面中的界面元素个数为N，N为正整数。第一电子设备可以基于第一电子设备的屏幕尺寸确定第一应用界面的宽度为W，各界面元素的宽度依次为w1,w2,w3,…,wN。
如图3b所示，N大于1，当均分类型为默认均分类型时，应用界面中相邻界面元素之间的间距、应用界面边缘的界面元素与应用界面边缘的间距均为C2，C2＝(W-∑(w1,w2….wN))/(N+1)，∑(w1,w2,…,wN)为w1,w2,…,wN之和。当均分类型为内部均分类型时，应用界面中相邻界面元素之间的间距均为C4，C4＝(W-∑(w1,w2,…,wN))/(N-1)。 当N为1时，无论均分类型是默认均分类型还是内部均分类型，该唯一的界面元素两边至界面元素边缘的间距相同，居中显示。
间距属性还可以包括与均分类型相关的属性，例如间距属性还包括均分类型开关、最大间距、最小间距等属性。其中，均分类型开关可以控制均分类型是否在应用界面显示时生效，均分类型开启也可以称为均分能力使能。最大间距和最小间距用于控制应用界面中相邻界面元素之间的间距以及应用界面边缘的界面元素与应用界面边缘的间距的最大值和最小值，即取值范围。因此，在均分类型限制的基础上，可以通过均分类型、最大间距、最小间距等限定，确定界面元素均分时的间距。使得目标应用的应用界面在不同屏幕尺寸上，都可以基于间距属性的配置，自动计算界面元素之间的间距，使得界面元素在应用界面内保持均匀分布。
界面元素在应用界面内保持均匀分布的效果图可以如图4a～图4d所示。图4a示出了均分类型为默认均分类型时，16:9的屏幕尺寸的应用界面中界面元素在水平方向上均匀分布的效果；可见“高”、“低”、“关”这三个界面元素在水平方向上实现了均匀分布。图4b示出了均分类型为默认均分类型时，4:3的屏幕尺寸的应用界面中界面元素在水平方向上均匀分布的效果；可见“高”、“低”、“关”这三个界面元素在水平方向上实现了均匀分布。
图4c示出了均分类型为内部均分类型时，第一屏幕尺寸的应用界面中界面元素在水平方向上均匀分布的效果；可见图4c中的界面元素(4张图片)在水平方向上实现了均匀分布。图4d示出了均分类型为内部均分类型时，第二屏幕尺寸的应用界面中界面元素在水平方向上均匀分布的效果；可见图4d中的界面元素(4张图片)在水平方向上实现了均匀分布。其中，第一屏幕尺寸的宽度大于第二屏幕尺寸的宽度。
图4a～图4d仅以应用界面中界面元素在水平方向上均匀分布的效果为例说明，应用界面中界面元素在垂直方向上均匀分布也是同理，具体可以如图4e～图4h所示。图4e示出了均分类型为默认均分类型时，第三屏幕尺寸的应用界面中界面元素在垂直方向上均匀分布的效果；可见4个界面元素(4个方块)在垂直方向上实现了均匀分布。图4f示出了均分类型为默认均分类型时，第四屏幕尺寸的应用界面中界面元素在垂直方向上均匀分布的效果；可见4个界面元素(4个方块)在垂直方向上实现了均匀分布。其中，第三屏幕尺寸的长度大于第四屏幕尺寸的长度。
图4g示出了均分类型为内部均分类型时，第五屏幕尺寸的应用界面中界面元素在垂直方向上均匀分布的效果；可见4个界面元素(4个方块)在垂直方向上实现了均匀分布。图4h示出了均分类型为内部均分类型时，第六屏幕尺寸的应用界面中界面元素在垂直方向上均匀分布的效果；可见4个界面元素(4个方块)在垂直方向上实现了均匀分布。其中，第五屏幕尺寸的长度大于第六屏幕尺寸的长度。
需要说明的是，上述间距属性仅以均分类型以及相关属性为例说明。通过间距属性设置间距的方式还有多种，例如间距属性还可以设置间距比例。间距比例指，应用界面中相邻界面元素之间的间距与应用界面边缘的界面元素与应用界面边缘的间距的比例为预设比例。间距属性设置间距的方式均可以对间距进行限定，从而可以在应用界面显示时，确定应用界面的布局中界面元素之间的间距。
例如，界面元素的间距还可以根据界面元素的尺寸来确定。一种可能的实现方式中，所述间距属性包括所述应用界面中相邻界面元素之间的间距与相邻界面元素的尺寸之间的映射关系，和\或所述应用界面边缘的界面元素与所述应用界面边缘的间距与所述应用界 面边缘的界面元素的尺寸之间的映射关系。其中，界面元素的间距可以指相邻界面元素之间的间距和\或应用界面边缘的界面元素与应用界面边缘的间距。例如当界面元素的尺寸不一致时，可以按照间距与界面元素的尺寸正相关或负相关的关系设置。例如，按照界面元素的间距与界面元素的长、宽、面积大小成正比例关系或者反比例关系均可。界面元素的间距可以指界面元素在某一侧与其他界面元素的间距，例如指界面元素左侧的间距。界面元素的间距也可以指界面元素在两侧与其他界面元素的间距，可以规定当不同界面元素的间距出现冲突时，可以选择取较大的间距或较小的间距。例如，界面元素A、界面元素B的面积比例为1:4，界面元素的间距指界面元素在两侧与其他界面元素的间距；规定当不同界面元素的间距出现冲突时，可以选择取较小的间距。例如，当界面元素A、界面元素B相邻时，界面元素的间距按照界面元素的面积呈正比例计算，得到界面元素A两侧的间距为1但界面元素B两侧的间距为4，那么界面元素A与界面元素B之间的间距便取1。
如图5a所示，为界面元素的间距按照界面元素的长度呈正比例的示意图。界面元素A、界面元素B、界面元素C、界面元素D的长度比例依次为1:2:2:1。从而，可以突出应用界面中重点的界面元素，避免较大界面元素和较小界面元素都集中一起显示。
如图5b所示，为界面元素的间距按照界面元素的长度呈反比例的示意图。界面元素A、界面元素B、界面元素C、界面元素D的长度比例依次为1:2:2:1。从而，可以使得较大元素占用了更多间隔来进行显示，使得界面元素的显示更加紧凑。需要说明的是，以上界面元素的间距与界面元素的长度呈正比例和反比例仅是一种示例说明。界面元素的间距与界面元素的尺寸关系可以根据实际需求配置，在此不进行限定。
由上述间距属性的相关描述可知，目标应用的应用界面在开发时，无需指定应用界面的间距参数。目标应用的应用界面可以基于间距属性，在不同屏幕尺寸上显示应用界面时，实时地自适应确定间距参数，从而与当前的屏幕尺寸所适应，可以达到较佳的显示效果。另外，上述间距属性的相关描述中仅以间距属性为例进行说明，间距属性可以和其他属性一同结合，确定应用界面的布局参数，更具体的实现方式可以参照后续描述。
(2)元素排布属性
元素排布属性可以用于确定应用界面中元素排布参数。举例来说，元素排布属性可以包括行属性和\或列属性。另外，由于界面元素之间的相对位置关系可能是预先确定的，因此可以基于界面元素之间的相对位置关系，按照元素排布属性，确定元素排布参数。例如，应用界面的界面元素包括：界面元素1、界面元素2、界面元素3、界面元素4和界面元素5。界面元素之间的相对位置关系可以包括：界面元素1位于界面元素2的左侧或者上方，界面元素2位于界面元素3的左侧或者上方，界面元素3位于界面元素4的左侧或者上方，界面元素4位于界面元素5的左侧或者上方。
其中，应用界面的一行可以理解为一段横向的显示区域，界面元素的全部或部分在这段显示区域内，均可以理解为在这一行。例如，行属性可以包括行元素均分开关、排布方向、行数最大值、行数最小值、行元素最大数量、行元素最小数量中至少一项，并且这些项中可以设置的优先级。行元素均分开关可以限定每行的界面元素数量相同，或者至多一行的界面元素与其他行的界面元素不同，且其他行的界面元素均相同。排布方向指界面元素可以按照行的方式排布或者与列的方式排布等。
一种可能的情形中，所述行属性包括所述应用界面的长与宽的比值与所述应用界面中的界面元素的行数的映射关系，所述列属性包括所述应用界面的长与宽的比值与所述应用 界面中的界面元素的列数的映射关系。行数最大值、行数最小值、行元素最大数量、行元素最小数量可以设置为与屏幕的长宽比例映射的值。例如，排布方向为与屏幕的长平行的方向的情形下，当屏幕的长宽比例大于或等于3时，行数最大值和行数最小值均为1；当屏幕的长宽比例大于或等于2且小于3时，行数最大值为3，行数最小值为1。
行属性用于确定的行布局参数可以包括：应用界面中的界面元素的行数以及界面元素所在行。举例来说，如图6a所示，应用界面共有5个界面元素，行元素均分开关为开启，屏幕的长宽比例为2.5，行数最大值为3。那么可得到元素排布参数包括：应用界面中的界面元素的行数为3，界面元素1所在行为1，界面元素2、3所在行为2，界面元素4、5所在行为3。即应用界面中包括：1个界面元素的1行，每行2个界面元素的2行。
相应地，应用界面的一列可以理解为一段纵向的显示区域，界面元素的全部或部分在这段显示区域内，均可以理解为在这一列。例如，列属性可以包括列元素均分开关、排布方向、列数最大值、列数最小值、列元素最大数量、列元素最小数量中至少一项，并且这些项中可以设置的优先级。列元素均分开关可以限定每列的界面元素数量相同，或者至多一列的界面元素与其他列的界面元素不同，且其他列的界面元素均相同。排布方向指界面元素可以按照与屏幕的长平列的方向或者与屏幕的宽平列的方向排布等。列数最大值、列数最小值、列元素最大数量、列元素最小数量可以设置为与屏幕的长宽比例映射的值。例如，排布方向为与屏幕的长平列的方向的情形下，当屏幕的长宽比例大于或等于3时，列数最大值和列数最小值均为1；当屏幕的长宽比例大于或等于2且小于3时，列数最大值为3，列数最小值为1。
列属性用于确定的列布局参数可以包括：应用界面中的界面元素的列数以及界面元素所在列。举例来说，如图6b所示，应用界面共有5个界面元素，列元素均分开关为开启，屏幕的长宽比例为2.5，列数最大值为3。那么可得到界面元素排布参数包括：应用界面中的界面元素的列数为3，界面元素1所在列为1，界面元素2、3所在列为2，界面元素4、5所在列为3。即应用界面中包括：1个界面元素的1列，每列2个界面元素的2列。
基于上述元素排布属性的描述，应用界面显示的效果图可以如图7a～图7d所示。
需要说明的是，上述元素排布属性仅以部分属性为例说明。通过元素排布属性设置元素排布参数的方式还有多种，在此不再赘述。由上述元素排布属性的相关描述可知，目标应用的应用界面在开发时，无需指定应用界面的元素排布参数。目标应用的应用界面可以基于元素排布属性，在不同屏幕尺寸上显示应用界面时，实时地自适应确定元素排布参数，从而与当前的屏幕尺寸所适应，可以达到较佳的显示效果。另外，上述元素排布属性的相关描述中仅以元素排布属性为例进行说明，元素排布属性可以和其他属性一同结合，确定应用界面的布局参数，更具体的实现方式可以参照后续描述。例如，本发明可应用在相册/图库的照片展示，元素排布属性结合间距属性一同使用时，可达到每一行均分展示分多行进行展示，并达到网格化展示的效果。
(3)隐藏属性
在一些情况下，由于应用界面的屏幕尺寸的原因，可能在一些屏幕上完全显示应用界面的所有界面元素并不能达到较佳的显示效果。因此，可能需要隐藏应用界面中的部分界面元素不予显示，只显示一部分界面元素。那么可以通过隐藏属性来确定应用界面中隐藏参数，隐藏参数能够指示出哪些界面元素隐藏，哪些界面元素显示。
举例来说，隐藏属性可以包括界面元素的隐藏优先级、元素可隐藏集合、元素隐藏数 量最大值中至少一项。隐藏优先级越高的界面元素优先被隐藏。元素可隐藏集合即为应用界面中允许隐藏的界面元素的集合。元素隐藏数量最大值指应用界面中允许隐藏的界面元素的最大数量。
隐藏参数可以包括各界面元素是否隐藏或显示。另外，由于界面元素之间的相对位置关系可能是预先确定的，因此可以基于界面元素之间的相对位置关系，按照隐藏属性，确定隐藏参数。界面元素之间的相对位置关系的例子可以参照隐藏属性中的例子。
隐藏优先级可以根据界面元素的特性设置。例如可以根据界面元素的业务类型设置，如可以将图片类型的界面元素的优先级设置为最低，将表单的界面元素的优先级设置为最高。也可以根据界面元素的宽度设置，如隐藏优先级与界面元素的宽度呈正相关，即越大的界面元素越优先被隐藏。
隐藏参数可以根据屏幕尺寸和隐藏属性确定。例如，隐藏参数可以根据屏幕的长宽比确定。例如，当终端设备的屏幕的长宽比小于预设长宽比时，可以根据屏幕的长宽比与预设长宽比的差值，确定元素隐藏数量。并且根据隐藏优先级、元素可隐藏集合和元素隐藏数量确定应用界面中待隐藏的界面元素。
基于上述隐藏属性的描述，应用界面显示的效果图可以如图8a～图8d所示。在一种可能的情形中，图8a为在第一终端设备上显示的第一应用界面，图8b为在第二终端设备上显示的第二应用界面。第一终端设备的屏幕长宽比大于预设长宽比。而第二终端设备的屏幕长宽比小于预设长宽比，若第二终端设备的屏幕全部显示应用界面的界面元素，可能使得界面元素的显示不清晰，因此隐藏了部分应用界面的界面元素，如“歌手”。
需要说明的是，上述隐藏属性仅以部分属性为例说明。通过隐藏属性设置元素隐藏的方式还有多种，在此不再赘述。由上述隐藏属性的相关描述可知，目标应用的应用界面在开发时，无需指定应用界面的隐藏参数。目标应用的应用界面可以基于隐藏属性，在不同屏幕尺寸上显示应用界面时，实时地自适应确定隐藏参数，从而与当前的屏幕尺寸所适应，可以达到较佳的显示效果。另外，隐藏属性可以和其他属性一同结合，例如可以和间距属性一起结合。
(4)缩放属性
在一些情况下，由于应用界面的屏幕尺寸的原因，可能在一些屏幕上仅根据屏幕尺寸显示界面元素，造成界面元素显示畸形，并不能达到较佳的显示效果。因此，可能需要缩放应用界面中的部分界面元素。那么可以通过缩放属性来确定应用界面中缩放参数，缩放参数能够指示出哪些界面元素缩放，哪些界面元素显示。
举例来说，缩放属性可以包括界面元素的尺寸缩放比例、元素缩放宽度值中至少一项。元素尺寸比例即为应用界面中允许缩放的界面元素的比例范围。元素缩放宽度值指应用界面中界面元素触发缩放的屏幕尺寸的宽度值。尺寸缩放比例可以根据该界面元素的宽度以及所述电子设备的屏幕尺寸和\或所述应用界面的尺寸得到。
缩放参数可以包括各界面元素的尺寸。另外，由于界面元素之间的相对位置关系可能是预先确定的，因此可以基于界面元素之间的相对位置关系，按照缩放属性，确定缩放参数。界面元素之间的相对位置关系的例子可以参照缩放属性中的例子。
基于上述缩放属性的描述，应用界面显示的效果图可以如图9a～图9d所示。在一种可能的情形中，图9a为在第一终端设备上显示的第一应用界面，图9b为在第二终端设备上显示的第二应用界面。第一终端设备的元素缩放宽度值大于预设宽度值。而第二终端设备 的元素缩放宽度值小于预设宽度值。当应用界面中包含不同大小的界面元素时，也会重复显示，图9c～图9d示出了应用界面的显示效果。
需要说明的是，上述缩放属性仅以部分属性为例说明。通过缩放属性设置元素缩放的方式还有多种，在此不再赘述。由上述缩放属性的相关描述可知，目标应用的应用界面在开发时，无需指定应用界面的缩放参数。目标应用的应用界面可以基于缩放属性，在不同屏幕尺寸上显示应用界面时，实时地自适应确定缩放参数，从而与当前的屏幕尺寸所适应，可以达到较佳的显示效果。另外，缩放属性可以和其他属性一同结合，例如可以和间距属性一起结合。
(5)重复属性
在一些情况下，由于应用界面的屏幕尺寸的原因，可能在一些屏幕上仅根据屏幕尺寸显示界面元素，造成界面元素显示畸形，并不能达到较佳的显示效果。因此，可能需要重复应用界面中的部分界面元素。那么可以通过重复属性来确定应用界面中重复参数，重复参数能够指示出哪些界面元素重复，哪些界面元素显示。
举例来说，重复属性可以包括界面元素的元素可重复数量、元素重复宽度值中至少一项。元素可重复数量即为应用界面中允许重复的界面元素的比例。元素重复宽度值指应用界面中界面元素触发重复的屏幕尺寸的宽度值。
重复参数可以包括各界面元素的可重复数量。另外，由于界面元素之间的相对位置关系可能是预先确定的，因此可以基于界面元素之间的相对位置关系，按照重复属性，确定重复参数。界面元素之间的相对位置关系的例子可以参照重复属性中的例子。
基于上述重复属性的描述，应用界面显示的效果图可以如图10a～图10d所示。在一种可能的情形中，图10a为在第一终端设备上显示的第一应用界面，图10b为在第二终端设备上显示的第二应用界面。第一终端设备的元素重复宽度值大于预设宽度值。而第二终端设备的元素重复宽度值小于预设宽度值。当应用界面中包含不同大小的界面元素时，也会重复显示，图10c～图10d示出了应用界面的显示效果。
需要说明的是，上述重复属性仅以部分属性为例说明。通过重复属性设置元素重复的方式还有多种，在此不再赘述。由上述重复属性的相关描述可知，目标应用的应用界面在开发时，无需指定应用界面的重复参数。目标应用的应用界面可以基于重复属性，在不同屏幕尺寸上显示应用界面时，实时地自适应确定重复参数，从而与当前的屏幕尺寸所适应，可以达到较佳的显示效果。另外，重复属性可以和其他属性一同结合，例如可以和间距属性一起结合。
上述各个维度的界面属性的相关描述能够看出本申请实施例提供的一种界面显示方法对应的外部显示结果。下面介绍本申请实施例提供的一种界面显示方法所对应的内部实现原理。
如图11所示，为本申请实施例提供的一种界面显示方法所对应的开发过程示意图。
步骤(1)：开发者使用开发工具开发应用界面。
步骤(2)：开发工具通过调用开发框架，显示开发工具的开发界面。
步骤(3)：开发工具通过调用框架，从界面属性库选取开发界面对应的界面属性。
步骤(4)：开发工具基于界面属性库，完成应用界面开发。
步骤(5)：电子设备根据电子设备的屏幕尺寸，确定应用界面的布局参数。
步骤(6)：电子设备显示应用界面。
在图11应用开发过程中，需要在本申请提供的一种应用界面显示方法对应的软件架构中部署相应的界面属性，从而达到图3a～图10b所示出的应用界面的显示效果。如图12所示，为本申请提供的一种应用界面显示方法对应的软件架构。
本申请提供的一种应用界面显示方法对应的软件架构包括开发工具和目标应用。图12中以开发工具为集成开发环境(IDE，integrated development environment)开发工具，且目标应用为安卓(Android)的apk为例说明。
IDE开发工具包括应用模块和依赖模块。其中，应用模块包括源代码和开发资源，开发资源包括布局文件(例如为xml格式)；依赖模块包括应用界面的界面属性的布局解压包，例如布局解压包为aar包。那么通过IDE开发工具开发打包后，便能生成apk，apk可以在电子设备上安装，如在手机设备上安装。包括活动界面(Activity)、布局资源(Layout resource)和视图(View)。其中，布局资源包括安卓原生界面属性以及自定义界面属性。终端设备能够基于Activity创建应用界面，并且通过属性赋值接口，将属性值写入应用界面的布局文件中的界面属性。之后，电子设备通过View的测量、布局、绘制生效布局文件中的属性，并将应用界面渲染到电子设备的屏幕上对用户呈现出来。其中，View的测量过程中，终端设备能够基于布局文件中的属性确定应用界面的布局参数。终端设备便可以基于布局参数显示应用界面。
如图13所示，为本申请实施例提供的一种界面显示方法所对应的应用界面加载示意图。图13示出了一个活动窗口(Activity)在加载过程中布局参数通过层级关系传递给视图(view)的过程，基于布局参数加载视图，便加载显示出了应用界面。其中，任一Activity都持有一个Window对象，该Window对象为手机窗口(PhoneWindow)的实例，android中对该Window实例的管理可以通过Activity中的窗口管理器(WindowManager)来完成。而PhoneWindow则持有一个视图窗口对象(DecorView)，DecorView本身是一个界面布局框架(FrameLayout)，当DecorView接收到来自Activity传递过来的布局文件资源ID后，便会通过布局填充器(layoutInflater)，把布局资源ID转换为一个View，并添加到DecorView中，并在此后的恢复(resume)阶段通过显示服务，将应用界面显示到电子设备屏幕上。举例来说，显示服务为WindowManagerService()，这是一种将应用进程传递到系统进程然后完成显示的服务。
如图13所示，能够看出DecorView包含多个View，每个View内部又可以包含多个视图组(ViewGroup)。在Activity的初始化过程中，通过WindowManager获取到的设备初始化参数，便可以通过View的层级分发一级级传递到各子View中，每个子View可以对应于一个应用界面。各子View使用父View传递来的参数约束及自身配置完成各自尺寸计算。而在本申请中应用开发者开发的布局文件，便是图13中目录视图(ContentView)或标题视图(TitleView)中的一个子View，在应用界面运行时，可根据父View传递过来的尺寸参数及界面属性的属性值计算出View的尺寸，并根据View的尺寸和界面属性，确定应用界面的布局参数。
具体来说，电子设备确定应用界面的布局参数的过程可以如下：
电子设备获取应用界面的界面属性；电子设备根据电子设备的屏幕尺寸和应用界面的界面属性，确定应用界面的布局参数。
举例来说，电子设备可以根据电子设备的屏幕尺寸和\或所述应用界面的尺寸，以及应用界面的界面属性，确定应用界面中各界面元素的尺寸；并且电子设备根据应用界面中各界面元素的尺寸以及应用界面的界面属性，确定应用界面的布局参数。
其中，应用界面的界面属性在前面已经做了详细描述。下面以应用界面的界面属性为间距属性为例，说明如何根据应用界面中各界面元素的尺寸以及间距属性，确定应用界面的间距参数。该例子间距属性只影响间距参数，但不影响各界面元素的尺寸，具体步骤如图14所示，图14示出了电子设备根据间距属性确定应用界面的间距参数的过程。具体步骤如下：
步骤1401：电子设备获取应用界面的间距参数的初始值。
步骤1402：电子设备测量应用界面中各界面元素的尺寸。
步骤1403：电子设备根据间距属性，确定应用界面的间距参数。
应用界面的界面元素可能为一行，也可能为多行。若为一行，则确定唯一的一行界面元素的间距参数；若为多行，则分别确定多行界面元素中每一行界面元素的间距参数。
步骤1404：电子设备刷新应用界面的间距参数。
一种可能实现方式中，所述应用界面包括K个界面元素，确定应用界面的布局参数的步骤具体可以如下：
所述电子设备根据所述应用界面中各界面元素的尺寸以及所述应用界面的界面属性，基于所述应用界面的剩余空间，确定所述K个界面元素中的T个界面元素在所述剩余空间中的布局参数；所述电子设备更新所述剩余空间，若所述剩余空间大于预设阈值，则返回所述基于所述应用界面的剩余空间确定所述K个界面元素中的T个界面元素在所述剩余空间中的布局参数的步骤。
具体来说，其步骤可以如图15所示。
步骤1501：获取应用界面的剩余空间。
其中，剩余空间可以为行数、列数，或者以预先定义的显示区域为单位。例如剩余空间可以为3行。下面以剩余空间为行数举例说明。
步骤1502：确定剩余空间是否大于预设阈值。
若是，执行步骤1503；否则，结束流程。
步骤1503：新建一行。该行用于界面元素的布局。
步骤1504：确定应用界面的所有界面元素是否都已布局。
若是，执行步骤1505；否则，执行步骤1508。
步骤1505：根据应用界面的间距属性，确定应用界面的间距参数。
步骤1506：确定当前行的界面元素的坐标。
步骤1507：更新剩余空间。
步骤1507执行完毕后，返回步骤1502。
步骤1508：获取应用界面中各界面元素的尺寸以及布局参数。
步骤1509：根据元素排布属性确定是否将当前界面元素添加到当前行。
若是，则返回步骤1504；否则，返回步骤1505。
如图15所示，首先需要获取列表容器剩余空间，空间不足的情况下不需要进行特殊的处理。当剩余空间足够(大于预设阈值)时，则需要新建一行。新建一行就涉及到剩下的所有的界面元素的处理了。需要遍历所有的子空间，根据用户设定的均分类型，以及应 用界面中空间或者间隔的设定。根据设定的界面属性进行批量刷新所有的布局参数，以此类推到各个界面元素中去。
一种可能实现方式中，应用界面各项界面属性设置有对应的属性优先级，确定应用界面中各界面元素的尺寸的过程可以如下：
电子设备根据所述电子设备的屏幕尺寸和\或所述应用界面的尺寸，按照第一属性，确定应用界面中各界面元素的尺寸的中间值；电子设备根据所述电子设备的屏幕尺寸和\或所述应用界面的尺寸，按照第二属性，对应用界面中各界面元素的尺寸的中间值进行调整，得到应用界面中各界面元素的尺寸。
第一属性和第二属性为应用界面的任意两项界面属性，第一属性的属性优先级大于第二属性的属性优先级。
具体来说，其步骤可以如图16所示。
步骤1601：获取应用界面的剩余空间。
其中，剩余空间可以为行数、列数，或者以预先定义的显示区域为单位。例如剩余空间可以为3行。下面以剩余空间为行数举例说明。
步骤1602：确定剩余空间是否大于预设阈值。
若是，执行步骤1603；否则，结束流程。
步骤1603：新建一行。该行用于界面元素的布局。
步骤1604：确定应用界面的所有界面元素是否都已布局。
若是，执行步骤1605；否则，执行步骤1608。
步骤1605：确定当前行中界面元素的占比值。
其中，界面元素的占比值为界面元素的宽度与应用界面的宽度比值。
步骤1606：根据当前行中界面元素的占比值以及初始宽高比，确定界面元素的尺寸。
步骤1607：更新剩余空间。
步骤1607执行完毕后，返回步骤1602。
步骤1608：获取应用界面中各界面元素的尺寸以及布局参数。
步骤1609：根据元素排布属性确定是否将当前界面元素添加到当前行。
若是，则返回步骤1604；否则，返回步骤1605。
如图16所示，类似于图15，仍然需要针对容器的剩余空间进行计算，整体流程需要结合界面元素尺寸自适应的流程。界面元素尺寸适应主要是根据占比计算的宽度信息和界面元素的原始宽高比信息，并计算缩放后的宽高信息。并且刷新宽高比到界面元素的布局参数中去。计算当前首个界面元素的上下左右的坐标，然后再基于上下左右坐标布局到界面元素中去，然后遍历完当前所有的界面元素的布局。根据设定的界面属性进行批量刷新所有的布局参数，以此类推到各个界面元素中去。
需要说明的是，本申请的各个实施方式可以任意进行组合，以实现不同的技术效果。上述本申请提供的实施例中，从电子设备(手机100)作为执行主体的角度对本申请实施例提供的方法进行了介绍。为了实现上述本申请实施例提供的方法中的各功能，电子设备可以包括硬件结构和/或软件模块，以硬件结构、软件模块、或硬件结构加软件模块的形式来实现上述各功能。上述各功能中的某个功能以硬件结构、软件模块、还是硬件结构加软件模块的方式来执行，取决于技术方案的特定应用和设计约束条件。
下面结合附图介绍本申请实施例提供的电子设备，以实现本申请上述方法实施例。
如图17所示，本申请另外一些实施例公开了一种电子设备，该电子设备可以包括：通信接口1701，一个或多个处理器1702，一个或多个存储器1703；上述各器件可以通过一个或多个通信总线连接。其中，一个或多个计算机程序可以被存储在上述存储器1703中并被配置为被该一个或多个处理器1702执行，该一个或多个计算机程序包括指令，该指令被一个或多个处理器1702执行时，可以实现前述方法实施例中记载的全部或部分步骤。
其中，处理器1702可以是中央处理器(central processing unit，CPU)，或特定应用集成电路(application-specific integrated circuit，ASIC)，可以是一个或多个用于控制程序执行的集成电路，可以是基带芯片，等等。存储器1703的数量可以是一个或多个，存储器1703可以是只读存储器(read-only memory，ROM)、随机存取存储器(random access memory，RAM)或磁盘存储器等。
图17所示的电子设备可以是手机、ipad、笔记本电脑、智能电视、穿戴式设备(例如智能手表、智能头盔或智能手环等)等。当图17所示的电子设备是手机时，其结构可以参见图1。
本申请提供一种系统，所述系统包括第一电子设备和第二电子设备，第一电子设备和第二电子设备均用于显示目标应用的应用界面，所述第一电子设备的屏幕尺寸与所述第二电子设备的屏幕尺寸不相同；
所述第一电子设备，用于显示所述目标应用的第一应用界面，所述第一应用界面的界面布局对应于所述第一电子设备的屏幕尺寸或者所述第一应用界面的尺寸；
所述第二电子设备，用于显示所述目标应用的第二应用界面，所述第二应用界面的界面布局对应于所述第二电子设备的屏幕尺寸或者所述第二应用界面的尺寸。
一种可能的设计中，所述第一应用界面的界面布局至少在相邻界面元素之间的间距、应用界面中的显示区域以及各界面元素所在显示区域、各界面元素的隐藏或显示、各界面元素的尺寸、和/或各界面元素的重复显示数量上，与所述第二应用界面的界面布局不同。
一种可能的设计中，所述第一应用界面的界面属性包括间距属性，所述间距属性用于确定所述第一应用界面中相邻界面元素之间的间距。
如此，能够自适应地确定第一应用界面中相邻界面元素之间的间距，提升显示效果。
一种可能的设计中，所述间距属性用于确定所述应用界面中相邻界面元素之间的间距相同，且与所述应用界面边缘的界面元素与所述应用界面边缘的间距均相同或者不相同；
和\或所述间距属性用于确定所述第一应用界面中相邻界面元素之间的间距的最大值和\或最小值，和\或所述间距属性用于确定所述第一应用界面边缘的界面元素与第一应用界面边缘的间距的最大值和\或最小值。
通过设置间距的最大值和\或最小值，以及设置第一应用界面中相邻界面元素之间的间距和\或第一应用界面边缘的界面元素与第一应用界面边缘的间距是否相同的前提下，在一定条件下自适应地确定第一应用界面中相邻界面元素之间的间距以及第一应用界面边缘的界面元素与第一应用界面边缘的间距，提升了灵活性。
一种可能的设计中，所述间距属性包括所述应用界面中相邻界面元素之间的间距与相邻界面元素的尺寸之间的映射关系，和\或所述应用界面边缘的界面元素与所述应用界面边缘的间距与所述应用界面边缘的界面元素的尺寸之间的映射关系。
如此，使得第一应用界面中相邻界面元素之间的间距能够根据相邻界面元素的尺寸进 行自适应调整，以及使得第一应用界面边缘的界面元素与第一应用界面边缘的间距能够根据第一应用界面边缘的界面元素的尺寸进行自适应调整。
一种可能的设计中，所述第一应用界面的界面属性包括元素排布属性，所述元素排布属性用于确定所述第一应用界面中的显示区域以及各界面元素所在显示区域。
如此，能够自适应地确定第一应用界面中的显示区域以及各界面元素所在显示区域。
一种可能的设计中，所述元素排布属性包括行属性和\或列属性，所述行属性用于确定所述第一应用界面中的界面元素的行数以及界面元素所在行，所述列属性用于确定所述第一应用界面中的界面元素的列数以及界面元素所在列。
上述方式下，通过设置行属性和列属性，能够自适应地确定界面元素的行数以及界面元素所在行，以及界面元素的列数以及界面元素所在列。
一种可能的设计中，所述行属性包括所述第一应用界面的长与宽的比值与所述第一应用界面中的界面元素的行数的映射关系，所述列属性包括所述第一应用界面的长与宽的比值与所述第一应用界面中的界面元素的列数的映射关系。
上述方式下，由于第一应用界面的长与宽的比值能够间接反映出电子设备的屏幕尺寸，因此根据所述第一应用界面的长与宽的比值确定所述行属性和\或所述列属性能够使得第一应用界面中的界面元素排布更适用于电子设备的屏幕尺寸。
一种可能的设计中，所述行属性包括行数最大值、行数最小值、行元素最大数量、行元素最小数量中至少一项，所述列属性包括列数最大值、列数最小值、列元素最大数量、列元素最小数量中至少一项。
一种可能的设计中，所述第一应用界面的界面属性包括隐藏属性，所述隐藏属性用于确定所述第一应用界面中各界面元素隐藏或显示。
如此，能够自适应地确定第一应用界面中各界面元素隐藏或显示。
一种可能的设计中，所述隐藏属性包括所述第一应用界面中各界面元素对应隐藏优先级，所述第一应用界面中各界面元素按照各界面元素的隐藏优先级顺序隐藏。
上述方式下，通过设置各界面元素的隐藏优先级，能够将较重要的界面元素凸显出来，避免因为屏幕尺寸的原因显示过多界面元素造成页面元素显示畸形。
一种可能的设计中，所述隐藏属性还包括元素可隐藏集合和\或元素隐藏数量最大值，所述元素可隐藏集合为所述第一应用界面中允许隐藏的界面元素的集合，所述元素隐藏数量最大值为所述第一应用界面中允许隐藏的界面元素的最大数量。
上述方式下，通过设置元素可隐藏集合和\或元素隐藏数量最大值，能够进一步控制第一应用界面中的界面元素隐藏或者显示。
一种可能的设计中，所述第一应用界面的界面属性包括缩放属性，所述缩放属性用于确定所述第一应用界面中各界面元素的尺寸。
如此，能够自适应地确定第一应用界面中各界面元素的尺寸，提升显示效果。
一种可能的设计中，所述缩放属性用于确定所述第一应用界面中各界面元素的尺寸缩放比例，其中，任一界面元素的尺寸缩放比例是根据该界面元素的宽度以及所述电子设备的屏幕尺寸和\或所述第一应用界面的尺寸得到的。
一种可能的设计中，所述第一应用界面的界面属性包括重复属性，所述重复属性用于确定所述第一应用界面中各界面元素的重复显示数量。
如此，能够自适应地确定第一应用界面中各界面元素的是否重复显示，提升显示效果。
一种可能的设计中，所述第一应用界面中各界面元素的重复显示数量是根据所述重复属性、所述第一应用界面中各界面元素的尺寸、所述第一应用界面的长与宽的比值确定的。
上述方式下，由于第一应用界面的长与宽的比值能够间接反映出电子设备的屏幕尺寸，因此根据所述第一应用界面的长与宽的比值确定重复显示数量，能够使得第一应用界面中的界面元素的重复显示更适用于电子设备的屏幕尺寸。
一种可能的设计中，所述电子设备显示所述目标应用的第一应用界面之前，还包括：
所述电子设备获取所述第一应用界面的界面属性；所述电子设备根据所述电子设备的屏幕尺寸和\或所述第一应用界面的尺寸，以及所述第一应用界面的界面属性，确定所述第一应用界面中各界面元素的尺寸；所述电子设备根据所述第一应用界面中各界面元素的尺寸以及所述第一应用界面的界面属性，确定所述第一应用界面的布局参数。
如此，可以自动化地根据当前的屏幕尺寸确定第一应用界面的布局参数，使得第一应用界面的界面布局与当前的屏幕尺寸适应。
本申请实施例还提供了一种计算机可读存储介质，计算机可读存储介质上存储有计算机指令，这些计算机指令被计算机调用执行时，可以使得计算机完成上述方法实施例、方法实施例的任意一种可能的设计中所涉及的方法。本申请实施例中，对计算机可读存储介质不做限定，例如，可以是RAM(random-access memory，随机存取存储器)、ROM(read-only memory，只读存储器)等。
本申请还提供一种芯片，该芯片可以包括处理器以及接口电路，用于完成上述方法实施例、方法实施例的任意一种可能的实现方式中所涉及的方法，其中，“耦合”是指两个部件彼此直接或间接地结合，这种结合可以是固定的或可移动性的。
本申请实施例还提供一种包含计算机程序产品，包括指令，当所述计算机程序产品在电子设备上运行时，使得所述电子设备可以执行包括如前述方法实施例中记载的全部或部分步骤。
在上述实施例中，可以全部或部分地通过软件、硬件、固件或者其任意组合来实现。当使用软件实现时，可以全部或部分地以计算机指令的形式实现。在计算机上加载和执行所述计算机指令时，全部或部分地产生按照本发明实施例所述的流程或功能。所述计算机可以是通用计算机、专用计算机、计算机网络、或者其他可编程装置。所述计算机指令可以存储在计算机可读存储介质中，或者从一个计算机可读存储介质向另一个计算机可读存储介质传输，例如，所述计算机指令可以从一个网站站点、计算机、服务器或数据中心通过有线(例如同轴电缆、光纤)或无线(例如红外、无线、微波等)方式向另一个网站站点、计算机、服务器或数据中心进行传输。所述计算机可读存储介质可以是计算机能够存取的任何可用介质或者是包含一个或多个可用介质集成的服务器、数据中心等数据存储设备。所述可用介质可以是磁性介质，(例如，软盘、硬盘、磁带)、光介质(例如，DVD)、或者半导体介质(例如固态硬盘(Solid State Disk，SSD))等。
本申请实施例中所描述的方法或算法的步骤可以直接嵌入硬件、处理器执行的软件单元、或者这两者的结合。软件单元可以存储于RAM存储器、闪存、ROM存储器、EPROM存储器、EEPROM存储器、寄存器、硬盘、可移动磁盘、CD-ROM或本领域中其它任意形式的存储媒介中。示例性地，存储媒介可以与处理器连接，以使得处理器可以从存储媒介中读取信息，并可以向存储媒介存写信息。可选地，存储媒介还可以集成到处理器中。 处理器和存储媒介可以设置于ASIC中，ASIC可以设置于终端设备中。可选地，处理器和存储媒介也可以设置于终端设备中的不同的部件中。
这些计算机指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
尽管结合具体特征及其实施例对本发明进行了描述，显而易见的，在不脱离本发明的范围的情况下，可对其进行各种修改和组合。相应地，本说明书和附图仅仅是所附权利要求所界定的本发明的示例性说明，且视为已覆盖本发明范围内的任意和所有修改、变化、组合或等同物。显然，本领域的技术人员可以对本发明进行各种改动和变型而不脱离本发明的精神和范围。这样，倘若本发明的这些修改和变型属于本发明权利要求及其等同技术的范围之内，则本发明也意图包含这些改动和变型在内。

Claims (21)

  1. 一种应用界面显示方法，其特征在于，所述方法包括：
    电子设备显示目标应用的应用界面，所述应用界面的界面布局和所述电子设备的屏幕尺寸或所述应用界面的尺寸对应，所述应用界面的界面布局是按照所述应用界面在所述电子设备上的布局参数确定的，所述布局参数是根据所述目标应用的应用界面的界面属性和所述电子设备的屏幕尺寸和\或所述应用界面的尺寸确定的，所述界面属性为约束所述布局参数的预设条件。
  2. 如权利要求1所述的方法，其特征在于，所述应用界面的界面属性包括间距属性，所述间距属性用于确定所述应用界面中相邻界面元素之间的间距。
  3. 如权利要求2所述的方法，其特征在于，所述间距属性用于确定所述应用界面中相邻界面元素之间的间距相同，且与所述应用界面边缘的界面元素与所述应用界面边缘的间距均相同或者不相同；
    和\或所述间距属性用于确定所述应用界面中相邻界面元素之间的间距的最大值和\或最小值，和\或所述间距属性用于确定所述应用界面边缘的界面元素与应用界面边缘的间距的最大值和\或最小值。
  4. 如权利要求2或3所述的方法，其特征在于，所述间距属性包括所述应用界面中相邻界面元素之间的间距与相邻界面元素的尺寸之间的映射关系，和\或所述应用界面边缘的界面元素与所述应用界面边缘的间距与所述应用界面边缘的界面元素的尺寸之间的映射关系。
  5. 如权利要求1至4任一项所述的方法，其特征在于，所述应用界面的界面属性包括元素排布属性，所述元素排布属性用于确定所述应用界面中的显示区域以及各界面元素所在显示区域。
  6. 如权利要求5所述的方法，其特征在于，所述元素排布属性包括行属性和\或列属性，所述行属性用于确定所述应用界面中的界面元素的行数以及界面元素所在行，所述列属性用于确定所述应用界面中的界面元素的列数以及界面元素所在列。
  7. 如权利要求6所述的方法，其特征在于，所述行属性包括所述应用界面的长与宽的比值与所述应用界面中的界面元素的行数的映射关系，所述列属性包括所述应用界面的长与宽的比值与所述应用界面中的界面元素的列数的映射关系。
  8. 如权利要求6或7所述的方法，其特征在于，所述行属性包括行数最大值、行数最小值、行元素最大数量、行元素最小数量中至少一项，所述列属性包括列数最大值、列数最小值、列元素最大数量、列元素最小数量中至少一项。
  9. 如权利要求1至8任一项所述的方法，其特征在于，所述应用界面的界面属性包括隐藏属性，所述隐藏属性用于确定所述应用界面中各界面元素隐藏或显示。
  10. 如权利要求9所述的方法，其特征在于，所述隐藏属性包括所述应用界面中各界面元素对应隐藏优先级，所述应用界面中各界面元素按照各界面元素的隐藏优先级顺序隐藏。
  11. 如权利要求10所述的方法，其特征在于，所述隐藏属性还包括元素可隐藏集合和\或元素隐藏数量最大值，所述元素可隐藏集合为所述应用界面中允许隐藏的界面元素的集合，所述元素隐藏数量最大值为所述应用界面中允许隐藏的界面元素的最大数量。
  12. 如权利要求1至11任一项所述的方法，其特征在于，所述应用界面的界面属性包 括缩放属性，所述缩放属性用于确定所述应用界面中各界面元素的尺寸。
  13. 如权利要求12所述的方法，其特征在于，所述缩放属性用于确定所述应用界面中各界面元素的尺寸缩放比例，其中，任一界面元素的尺寸缩放比例是根据该界面元素的宽度以及所述电子设备的屏幕尺寸和\或所述应用界面的尺寸得到的。
  14. 如权利要求1至13任一项所述的方法，其特征在于，所述应用界面的界面属性包括重复属性，所述重复属性用于确定所述应用界面中各界面元素的重复显示数量。
  15. 如权利要求14所述的方法，其特征在于，所述应用界面中各界面元素的重复显示数量是根据所述重复属性、所述应用界面中各界面元素的尺寸、所述应用界面的长与宽的比值确定的。
  16. 如权利要求1至15任一项所述的方法，其特征在于，所述电子设备显示所述目标应用的应用界面之前，还包括：
    所述电子设备获取所述应用界面的界面属性；
    所述电子设备根据所述电子设备的屏幕尺寸和\或所述应用界面的尺寸，以及所述应用界面的界面属性，确定所述应用界面中各界面元素的尺寸；
    所述电子设备根据所述应用界面中各界面元素的尺寸以及所述应用界面的界面属性，确定所述应用界面的布局参数。
  17. 如权利要求16所述的方法，其特征在于，所述应用界面各项界面属性设置有对应的属性优先级，所述电子设备根据所述电子设备的屏幕尺寸和\或所述应用界面的尺寸，以及所述应用界面的界面属性，确定所述应用界面中各界面元素的尺寸，包括：
    所述电子设备根据所述电子设备的屏幕尺寸和\或所述应用界面的尺寸，按照第一属性，确定所述应用界面中各界面元素的尺寸的中间值；
    所述电子设备根据所述电子设备的屏幕尺寸和\或所述应用界面的尺寸，按照第二属性，对所述应用界面中各界面元素的尺寸的中间值进行调整，得到所述应用界面中各界面元素的尺寸，所述第一属性和所述第二属性为所述应用界面的任意两项界面属性，所述第一属性的属性优先级大于所述第二属性的属性优先级。
  18. 如权利要求16或17所述的方法，其特征在于，所述应用界面包括K个界面元素，所述电子设备根据所述应用界面中各界面元素的尺寸以及所述应用界面的界面属性，确定所述应用界面的布局参数，包括：
    所述电子设备根据所述应用界面中各界面元素的尺寸以及所述应用界面的界面属性，基于所述应用界面的剩余空间，确定所述K个界面元素中的T个界面元素在所述剩余空间中的布局参数；
    所述电子设备更新所述剩余空间，若所述剩余空间大于预设阈值，则返回所述基于所述应用界面的剩余空间确定所述K个界面元素中的T个界面元素在所述剩余空间中的布局参数的步骤。
  19. 一种电子设备，其特征在于，包括：
    一个或多个处理器；
    一个或多个存储器；
    其中，所述一个或多个存储器存储有一个或多个计算机程序，所述一个或多个计算机程序包括指令，当所述指令被所述一个或多个处理器执行时，使得所述电子设备执行权利要求1至18任一项所述的方法。
  20. 一种系统，其特征在于，所述系统包括第一电子设备和第二电子设备，第一电子设备和第二电子设备均用于显示目标应用的应用界面，所述第一电子设备的屏幕尺寸与所述第二电子设备的屏幕尺寸不相同；
    所述第一电子设备，用于显示所述目标应用的第一应用界面，所述第一应用界面的界面布局对应于所述第一电子设备的屏幕尺寸或者所述第一应用界面的尺寸；
    所述第二电子设备，用于显示所述目标应用的第二应用界面，所述第二应用界面的界面布局对应于所述第二电子设备的屏幕尺寸或者所述第二应用界面的尺寸。
  21. 一种计算机可读存储介质，其特征在于，所述计算机可读存储介质包括计算机程序，当计算机程序在电子设备上运行时，使得所述电子设备执行如权利要求1至18任一项所述的方法。
PCT/CN2023/095508 2022-05-28 2023-05-22 一种应用界面显示方法及电子设备 WO2023231818A1 (zh)

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN202210595303.7 2022-05-28
CN202210595303.7A CN117170628A (zh) 2022-05-28 2022-05-28 一种应用界面显示方法及电子设备

Publications (2)

Publication Number Publication Date
WO2023231818A1 true WO2023231818A1 (zh) 2023-12-07
WO2023231818A9 WO2023231818A9 (zh) 2024-02-08

Family

ID=88943730

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2023/095508 WO2023231818A1 (zh) 2022-05-28 2023-05-22 一种应用界面显示方法及电子设备

Country Status (2)

Country Link
CN (1) CN117170628A (zh)
WO (1) WO2023231818A1 (zh)

Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111190681A (zh) * 2019-12-31 2020-05-22 华为技术有限公司 显示界面适配方法、显示界面适配设计方法和电子设备
US20210365165A1 (en) * 2019-03-04 2021-11-25 Guangdong Oppo Mobile Telecommunications Corp., Ltd. Method of performing a split-screen display, electronic device, and storage medium
CN114327701A (zh) * 2020-09-29 2022-04-12 华为技术有限公司 一种应用界面的布局方法及电子设备

Patent Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20210365165A1 (en) * 2019-03-04 2021-11-25 Guangdong Oppo Mobile Telecommunications Corp., Ltd. Method of performing a split-screen display, electronic device, and storage medium
CN111190681A (zh) * 2019-12-31 2020-05-22 华为技术有限公司 显示界面适配方法、显示界面适配设计方法和电子设备
CN114327701A (zh) * 2020-09-29 2022-04-12 华为技术有限公司 一种应用界面的布局方法及电子设备

Also Published As

Publication number Publication date
CN117170628A (zh) 2023-12-05
WO2023231818A9 (zh) 2024-02-08

Similar Documents

Publication Publication Date Title
US11561754B2 (en) Electronic device and method for displaying and transmitting images thereof
WO2021218864A1 (zh) 一种Wi-Fi点对点业务的实现方法以及相关设备
WO2021121052A1 (zh) 一种多屏协同方法、系统及电子设备
US20150055622A1 (en) Communication method and apparatus for electronic device in mobile communication system
US10552182B2 (en) Multiple display device and method of operating the same
WO2021063090A1 (zh) 一种建立应用组合的方法与电子设备
US20170244890A1 (en) Electronic device and method for controlling operation thereof
KR20160001076A (ko) 데이터 관리 방법 및 그 방법을 처리하는 전자 장치
CN110178111B (zh) 一种终端的图像处理方法及装置
WO2022161119A1 (zh) 一种显示方法及电子设备
WO2022179405A1 (zh) 一种投屏显示方法及电子设备
US10237087B2 (en) Method for controlling transmission speed and electronic device thereof
US9757651B2 (en) Electronic device and method of processing user input by electronic device
WO2022135186A1 (zh) 设备控制方法和终端设备
WO2023179428A1 (zh) 一种界面的自适应显示方法及终端设备
WO2023029983A1 (zh) 一种控件内容的拖拽方法、电子设备及系统
US10331334B2 (en) Multiple transparent annotation layers for use within a graphical user interface
WO2023231818A1 (zh) 一种应用界面显示方法及电子设备
US20220346083A1 (en) Methods and apparatuses for determining network allocation vector, and storage media
WO2022206848A1 (zh) 一种应用小部件的显示方法及设备
CN112015359A (zh) 一种显示方法与电子设备
KR20150098533A (ko) 영상 획득 방법 및 그 방법을 처리하는 전자 장치
WO2021179126A1 (zh) 控制信令检测方法、控制信令检测装置及存储介质
CN116991302B (zh) 应用与手势导航栏兼容运行方法、图形界面及相关装置
WO2023011215A1 (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: 23815002

Country of ref document: EP

Kind code of ref document: A1