IP Library › Granted Patent US 12,585,442
Granted Patent B2
US 12,585,442 · App. 18/022,090 · Granted Mar 24, 2026

Display interface layout method and electronic device

Inventors: Zhang Gao (Shanghai, CN); Xiaoxiao Chen (Nanjing, CN)
Assignee: Huawei Technologies Co., Ltd.
G06F8/38G06F8/61G06F9/451
View Patent ↗
Loading inventors, assignments & file history…
Monitor This Case
Get email alerts when status or documents change.
Order Certified Copies
Most orders are placed with the USPTO same day — all within 24 business hours.
Order via The Patent Place →
Pre-filled with this patent's details
Quick Facts
Patent No.
US 12,585,442
App. No.
18/022,090
Granted
Mar 24, 2026
Kind
B2
Abstract

This application provides a display interface layout method and an electronic device. A preset initial layout file may be displayed on a development interface by using an application development tool. A developer may add one or more control units to the initial layout file, and set an attribute constraint condition of the control unit, to obtain a first layout file that corresponds to a first display interface and that is in a first application. An attribute value of the control unit is obtained by a running device of the first application through calculation based on the corresponding attribute constraint condition. Subsequently, the running device of the first application may calculate an attribute value of each control unit based on the attribute constraint condition set in the first layout file, to automatically complete layout and display of the first display interface based on the attribute value of each control unit.

Claims (41)

1 . A computer-implemented method comprising:

installing, by an electronic device, an application installation package of a first application, wherein the application installation package comprises a first layout file, the first layout file comprises a first correspondence between a first control of the first application and a first preset algorithm, wherein an input parameter of the first preset algorithm is a value of a first attribute constraint condition of the electronic device, wherein the first attribute constraint condition of the electronic device comprises a constraint condition of at least one of a device size or a display direction, and wherein the device size comprises an aspect ratio, and the display direction comprises a landscape direction or a portrait direction;

obtaining, by the electronic device, the first attribute constraint condition;

calculating, by the electronic device, a first attribute value of the first control based on the first attribute constraint condition and the first preset algorithm, wherein the first attribute value of the first control indicates at least a size, a shape, a color, a resolution or a position of the first control on a first display interface of the first application;

determining, by the electronic device, a layout of the first control based on calculating the first attribute value, and displaying the first control on the first display interface according to the layout of the first control, wherein the first control includes a View or a ViewGroup; and

displaying, by a second electronic device different from the electronic device, the first control on a second display interface according to the first layout file when the second electronic device runs the first application, wherein the first control on the first display interface of the electronic device is different from the first control on the second display interface of the second electronic device.

2 . The method according to claim 1 , wherein the first layout file further comprises a second correspondence between a second control and an attribute value of the second control, the attribute value of the second control indicates a size and a position of the second control on the first display interface, and the method further comprises:

calculating, by the electronic device, a second attribute value of the second control based on a device parameter and the first layout file; and

determining, by the electronic device, a layout of the second control based on calculating the second attribute value, and displaying the second control on the first display interface according to the layout of the second control.

3 . The method according to claim 2 , wherein the first layout file further comprises a second preset algorithm, an input parameter of the second preset algorithm is a value of a second attribute constraint condition of the electronic device, the second attribute constraint condition comprises a constraint condition of at least one of a device type, a device size, a display direction, a device capability, or an interaction mode, and an output parameter of the second preset algorithm is the attribute value of the second control.

4 . The method according to claim 1 , wherein the first attribute value of the first control further indicates a display style of the first control.

5 . The method according to claim 3 , wherein the device type comprises a mobile phone, a television, a head unit, or a watch.

6 . The method according to claim 3 , wherein the device capability comprises a photographing capability, a positioning capability, or a call capability, and the interaction mode comprises touch interaction, remote control interaction, or voice interaction.

7 . The method according to claim 1 , wherein the first layout file further comprises a first function item of the first control, the first function item comprises a layout capability of scaling, stretching, hiding, even distribution, or wrapping, and the method further comprises:

obtaining, by the electronic device, a third preset algorithm corresponding to the first function item; and

inputting, by the electronic device, a device parameter as an input parameter to the third preset algorithm, and obtaining a third attribute value of the first control through calculation using the third preset algorithm.

8 . The method according to claim 1 , wherein the first layout file further comprises a third device capability corresponding to a third control, and the method further comprises:

querying, by the electronic device, a display output device having the third device capability; and

indicating, by the electronic device, the display output device to display the third control.

9 . The method according to claim 8 , wherein indicating, by the electronic device, the display output device to display the third control comprises:

sending, by the electronic device to the display output device, a display resource corresponding to the third control to display the third control on the display output device.

10 . An electronic device, comprising:

one or more processors,

a display, and

a non-transitory memory, wherein

the memory stores one or more computer programs, the one or more computer programs comprise instructions, and the instructions, when executed by the electronic device, cause the electronic device to perform operations comprising:

installing an application installation package of a first application, wherein the application installation package comprises a first layout file, the first layout file comprises a first correspondence between a first control of the first application and a first preset algorithm, wherein an input parameter of the first preset algorithm is a value of a first attribute constraint condition of the electronic device, wherein the first attribute constraint condition of the electronic device comprises a constraint condition of at least one of a device size or a display direction, and wherein the device size comprises an aspect ratio, and the display direction comprises a landscape direction or a portrait direction;

calculating, by the electronic device, a first attribute value of the first control based on the first attribute constraint condition and the first preset algorithm, wherein the first attribute value of the first control indicates at least a size, a shape, a color, a resolution or a position of the first control on a first display interface of the first application; and

determining a layout of the first control based on calculating the first attribute value, and displaying the first control on the first display interface according to the layout of the first control, and the first control includes a View or a ViewGroup; and

wherein a second electronic device different from the electronic device displays the first control on a second display interface according to the first layout file when the second electronic device runs the first application, wherein the first control on the first display interface of the electronic device is different from the first control on the second display interface of the second electronic device.

11 . The electronic device according to claim 10 , wherein the first layout file further comprises a second correspondence between a second control and an attribute value of the second control, and the attribute value of the second control indicates a size and a position of the second control on the first display interface; and

the electronic device is further caused to perform:

calculating a second attribute value of the second control based on a device parameter and the first layout file; and

determining a layout of the second control based on calculating the second attribute value, and displaying the second control on the first display interface according to the layout of the second control.

12 . The electronic device according to claim 11 , wherein the first layout file further comprises a second preset algorithm, an input parameter of the second preset algorithm is a value of a second attribute constraint condition of the electronic device, the second attribute constraint condition comprises a constraint condition of at least one of a device type, a device size, a display direction, a device capability, or an interaction mode, and an output parameter of the second preset algorithm is the attribute value of the second control.

13 . The electronic device according to claim 12 , wherein the device capability comprises a photographing capability, a positioning capability, or a call capability, and the interaction mode comprises touch interaction, remote control interaction, or voice interaction.

14 . The electronic device according to claim 10 , wherein the first layout file further comprises a third device capability corresponding to a third control, and the electronic device is further caused to perform:

querying, by the electronic device, a display output device having the third device capability; and

indicating, by the electronic device, the display output device to display the third control.

15 . The electronic device according to claim 14 , wherein indicating, by the electronic device, the display output device to display the third control comprises:

sending, to the display output device, a display resource corresponding to the third control to display the third control on the display output device.

Assignments (1)
ASSIGNMENT OF ASSIGNOR'S INTEREST Recorded Sep 20, 2024
From: GAO, ZHANG; CHEN, XIAOXIAO
To: HUAWEI TECHNOLOGIES CO., LTD.
Reel/Frame 068651/0224 →
Priority Claims (6)
CN 202010833382.1 · Aug 18, 2020 · national
CN 202010949895.9 · Sep 10, 2020 · national
CN 202011141090.8 · Oct 22, 2020 · national
CN 202011185677.9 · Oct 30, 2020 · national
CN 202011583597.9 · Dec 28, 2020 · national
CN 202110586643.9 · May 27, 2021 · national
Continuity (1)
Related Publication 20230359447A1 · Nov 9, 2023
References Cited (29)
US 11574429B1 · Tam · 2023 [cited by examiner]
US 20170235473A1 · Han · 2017 [cited by examiner]
US 20170337321A1 · Hoford · 2017 [cited by examiner]
US 20190278449A1 · Murphy · 2019 [cited by applicant]
US 20190325626A1 · Tao · 2019 [cited by examiner]
US 20200218516A1 · Hari Krishnan · 2020 [cited by examiner]
CN 103164197A · 2013 [cited by applicant]
CN 103176797A · 2013 [cited by applicant]
CN 103530117A · 2014 [cited by applicant]
CN 103744595A · 2014 [cited by applicant]
CN 103885755A · 2014 [cited by applicant]
CN 106250117A · 2016 [cited by applicant]
CN 110032409A · 2019 [cited by examiner]
CN 110262859A · 2019 [cited by examiner]
CN 110597510A · 2019 [cited by applicant]
CN 110874447A · 2020 [cited by examiner]
CN 111190681A · 2020 [cited by examiner]
CN 111240669A · 2020 [cited by examiner]
CN 111367516A · 2020 [cited by examiner]
CN 111367518A · 2020 [cited by examiner]
CN 111399789A · 2020 [cited by examiner]
CN 111443974A · 2020 [cited by examiner]
CN 112698828A · 2021 [cited by applicant]
DE 102018124414A1 · 2019 [cited by examiner]
KR 2020071322A · 2020 [cited by examiner]
WO WO2019218736A1 · 2019 [cited by examiner]
English translation, Wang (CN 111443974 A), 2020, pp. 1-72. (Year: 2020). [cited by examiner]
English translation, Ma et al. (CN 111399789 A), 2020, pp. 1-72. (Year: 2020). [cited by examiner]
Yang Cuixia, UI Ripping in Android: Reverse Engineering of Graphical User Interfaces and its application, 2015, pp. 1-8. https://ieeexplore.ieee.org/stamp/stamp.jsp?tp=&arnumber=7423078 (Year: 2015). [cited by examiner]