CN112698828A - Display interface layout method and electronic equipment - Google Patents

Display interface layout method and electronic equipment Download PDF

Info

Publication number
CN112698828A
CN112698828A CN202011583597.9A CN202011583597A CN112698828A CN 112698828 A CN112698828 A CN 112698828A CN 202011583597 A CN202011583597 A CN 202011583597A CN 112698828 A CN112698828 A CN 112698828A
Authority
CN
China
Prior art keywords
control unit
display
attribute
layout file
layout
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202011583597.9A
Other languages
Chinese (zh)
Inventor
高璋
陈晓晓
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Huawei Technologies Co Ltd
Original Assignee
Huawei Technologies Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Huawei Technologies Co Ltd filed Critical Huawei Technologies Co Ltd
Publication of CN112698828A publication Critical patent/CN112698828A/en
Priority to CN202110586643.9A priority Critical patent/CN114077429A/en
Priority to EP21857527.2A priority patent/EP4184314A4/en
Priority to US18/022,090 priority patent/US20230359447A1/en
Priority to PCT/CN2021/111594 priority patent/WO2022037432A1/en
Pending legal-status Critical Current

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/38Creation or generation of source code for implementing user interfaces
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00Arrangements for program control, e.g. control units
    • G06F9/06Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44Arrangements for executing specific programs
    • G06F9/451Execution arrangements for user interfaces

Landscapes

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

Abstract

The application provides a layout method of a display interface and electronic equipment, and relates to the field of terminals, wherein developers can use an application development tool to display a preset initial layout file in the development interface, and then the developers can add one or more control units in the initial layout file and set attribute constraint conditions of the control units to obtain a first layout file corresponding to a first display interface in a first application; wherein, the attribute value (for example, size, position, etc.) of the control unit is calculated by the running device of the first application according to the corresponding attribute constraint condition; subsequently, the running equipment of the first application can calculate the attribute value of each control unit according to the attribute constraint condition set in the first layout file, so that the layout and display of the first display interface are automatically completed according to the attribute value of each control unit, developers do not need to design a plurality of layout files respectively aiming at different running equipment, and the development efficiency of the application is improved.

Description

Display interface layout method and electronic equipment
Technical Field
The present application relates to the field of terminals, and in particular, to a layout method for a display interface and an electronic device.
Background
Electronic devices such as mobile phones are usually installed with one or more applications, and these applications can realize rich application functions. At present, when a developer develops each application, the developer needs to design the layout (layout) of each control in each display interface in the application, obtain the layout file of each display interface, and carry the layout file in an application installation package. Therefore, after the electronic equipment installs the installation package of the application, when the application is operated, the layout file of the relevant display interface can be acquired, and the corresponding display interface is displayed according to the layout file.
However, as the variety of electronic devices increases and the specifications of each electronic device also increase, developers need to spend much time and effort designing layout files applied to different electronic devices. Taking a car machine as an example, car machines produced by different manufacturers have at least more than ten specifications of display interfaces, and then, for the same display interface in the same application, developers need to design layout files of the display interface for the car machines of each specification. Obviously, the method for developing the layout file of the display interface is time-consuming and labor-consuming, so that the difficulty of developing the application by developers is increased, and the efficiency is reduced.
Disclosure of Invention
The application provides a display interface layout method and electronic equipment, which can automatically complete the layout of a display interface according to the equipment characteristics of the electronic equipment, reduce the development difficulty of applications and improve the development efficiency of the applications.
In order to achieve the purpose, the technical scheme is as follows:
in a first aspect, the present application provides a method for generating a layout file, including: displaying a development interface of a first application; if a first operation input by a user (such as a developer) is detected, displaying a preset initial layout file in a development interface; furthermore, if a second operation input by the user is detected, a first control unit can be added to the initial layout file, the first control unit is used for being displayed in a first display interface of the first application, and the control unit can be a control (View) or a control group (View group); furthermore, if a third operation input by the user is detected, a first attribute constraint condition of the first control unit may be set in the initial layout file, where an attribute value of the first control unit (for example, an attribute such as a size and a position of the first control unit) is calculated by the running device of the first application according to the first attribute constraint condition; that is, the attribute value of each View or View group in the layout file is not fixed, but calculated according to the first attribute constraint condition by the running device; subsequently, after the developer adds all the required control units and the attribute constraints of the control units in the first display interface to the initial layout file according to the method, a first layout file corresponding to the first display interface can be obtained, wherein the first layout file is used for indicating the layout mode of the N control units in the first display interface; further, the application development tool may generate an application installation package for the first application from the first layout file.
In this way, the electronic device (which may be referred to as a runtime device) of the application installation package in which the first application is installed may dynamically calculate the attribute values of the respective controls (or control groups) according to the attribute constraints set for the respective controls (or control groups) in the first layout file, so as to automatically complete the layout and display of the first display interface according to the attribute values of the respective controls (or control groups).
That is to say, the developer only needs to set the attribute constraint condition of each control (or control group) in the layout file, so that different running devices can be adaptively laid out according to the attribute constraint condition, and the developer does not need to design multiple sets of layout files for different running devices, thereby reducing the development difficulty of the application and improving the development efficiency of the application.
In a possible implementation manner, a property window may be set in the development interface, where the property window includes one or more property constraints, and the property constraints are used to define device parameters obtained when a running device of the first application calculates a property value of the control unit, and for example, the property constraints may include at least one of a device type, a device size, a display direction, a device capability, and an interaction manner of the running device.
Before setting the first property constraint condition of the first control unit in the initial layout text, the method may further include: detecting a third operation input by the user, wherein the third operation is an operation of selecting the first attribute constraint condition in the attribute window by the user; at this time, the first attribute constraint condition of the first control unit is set in the initial layout text, and the method comprises the following steps: and according to a first attribute constraint condition selected in the attribute window by the user in the third operation, establishing a first corresponding relation between the first attribute constraint condition and the first control unit in the first layout file. For example, if the first attribute constraint condition selected by the user for the first control unit is the device size, the application development tool may establish a correspondence between the first control unit and the device size, that is, the specific attribute value of the first control unit is dynamically determined by the device size of the running device.
In a possible implementation manner, the property window may further include one or more property options, for example, at least one of a width, a height, and a display position; when the user selects a first property option (such as width) in the one or more property options, the first corresponding relationship is a corresponding relationship between the first property constraint and the first property option of the first control unit. For example, the first correspondence is a correspondence between the width of the first control unit (i.e. the first property option of the first control unit) and the device size (i.e. the first property constraint), i.e. the property value of the width of the first control unit is dynamically determined by the device size of the running device.
In a possible implementation manner, the property window may further include one or more function items or function item groups, where the function items include at least one layout capability of zooming, stretching, hiding, halving, and folding, and the function item group is a layout capability formed by overlapping a plurality of function items, for example, a layout capability of an immersive layout can be realized after overlapping of the layout capabilities of zooming, stretching, hiding, and the like.
Then, when the user selects a first function item from the one or more function items, the first corresponding relationship is a corresponding relationship between the first attribute constraint and the first function item and the first control unit; and/or when the user selects a first function item group from the one or more function item groups, the first corresponding relation is a corresponding relation among the first attribute constraint condition, the first function item group and the first control unit. For example, the first corresponding relationship is a corresponding relationship between the first control unit, the scaling (i.e. the first function item) and the device size (i.e. the first property constraint), that is, when the first control unit implements the layout capability of scaling, the specific property value of the first control unit is dynamically determined by the device size of the running device.
In one possible implementation manner, after setting the first property constraint condition of the first control unit, the method further includes: establishing a second corresponding relation between a first preset algorithm and the first control unit in the first layout file; the input parameters of the first preset algorithm are device parameters (for example, a specific device size, a device type, and the like of the running device) acquired by the running device of the first application and corresponding to the first attribute constraint condition, and the output parameters of the first preset algorithm are attribute values (for example, a size, a position, and the like of the control) of the first control unit.
In a possible implementation manner, a control library and a view tree may also be set in the development interface, where the control library includes different types of control units, and the view tree is used to indicate a structural relationship between the control units in the first display interface; the second operation is an operation in which a user (i.e., a developer) selects a first control unit in the control library and adds the first control unit to the view tree, and at this time, adding the first control unit in the initial layout file specifically includes: and adding the first control unit to the first position of the view tree selected by the user in the second operation according to the first control unit selected by the user in the second operation. That is, the developer can select the added control unit in the development interface and set the position of the control unit in the view tree.
In a possible implementation manner, a preview window may be further set in the development interface, where the preview window is used to simulate a first display interface presented when a first application runs; then, after adding the first control unit in the initial layout file, the method further includes: and displaying the first control unit in a first display interface of a preview window so that a developer can preview the display effect of the first control unit on the running equipment.
In a possible implementation manner, after the first attribute constraint condition of the first control unit is set in the initial layout file, similar to adding the first control unit, a second control unit may also be added in the initial layout file, where the second control unit is also used for displaying in the first display interface; furthermore, the developer may set a second attribute constraint condition of the second control unit in the initial layout text, where the attribute value of the second control unit (for example, the position and size of the second control unit in the first display interface) is calculated for the running device of the first application according to the second attribute constraint condition.
In a possible implementation manner, after the first property constraint condition of the first control unit is set in the initial layout file, the developer may further add a third control unit in the initial layout file, where the third control unit is also used for displaying in the first display interface; different from the above, a developer may directly set an attribute value of the third control unit in the initial layout text, instead of setting an attribute constraint condition of the third control unit in the initial layout text, that is, a part of the control units in the first layout file generated in the present application may be laid out according to the existing development manner, which is not limited in this embodiment of the present application.
In a second aspect, the present application provides a layout method of a display interface, including: the method comprises the steps that an application installation package of a first application is installed by running equipment, the application installation package comprises a first layout file, the first layout file is used for indicating the layout mode of each control unit in N (N is an integer larger than 0) control units of a first display interface, and the control units are controls or control groups; when a first application is operated, the operating equipment can read the first layout file; if a first attribute constraint condition is set for a first control unit (the first control unit is one of the N control units) in the first layout file, the running equipment can acquire a first equipment parameter corresponding to the first attribute constraint condition; furthermore, the running device may calculate a first attribute value of the first control unit according to the first device parameter, where the first attribute value may be used to indicate a size and a position of the first control unit in the first display interface, and of course, the first attribute value may also indicate attributes such as a color and a shape font of the first control unit; subsequently, the running device can lay out the first control unit according to the calculated first attribute value; after the operation equipment completes the uniform distribution of the N control units according to the first layout file, a corresponding first display interface can be displayed in the display screen.
In one possible implementation, the first attribute constraint includes at least one of a device type, a device size, a display orientation, a device capability, and an interaction mode of the operating device.
That is to say, the running device of the first application may obtain corresponding device parameters according to attribute constraint conditions set by the developer for each View or View group in the layout file, and further, according to each View or View group in the layout display interface that is self-adaptive to the obtained device parameters, match the presentation effect of each View or View group in the display interface with the device characteristics (for example, device type, size, interaction mode or function, etc.) of the currently running device.
In a possible implementation manner, the first layout file further includes a first function item of the first control unit, where the first function item includes one layout capability of zooming, stretching, hiding, halving, or folding; the method further comprises the following steps: the operating equipment acquires a first preset algorithm corresponding to the first function item; at this time, the running device calculates a first attribute value of the first control unit according to the first device parameter, and specifically includes: the operating equipment takes the first equipment parameter as an input parameter and inputs the first equipment parameter into a first preset algorithm, and a first attribute value of the first control unit is obtained through calculation of the first preset algorithm.
In a possible implementation manner, the first layout file further includes a first function item group of the first control unit, and the first function item group is formed by superimposing one or more layout capabilities of zooming, stretching, hiding, halving, or folding; the method further comprises the following steps: the operating equipment acquires a second preset algorithm corresponding to the first functional item group; at this time, the running device calculates a first attribute value of the first control unit according to the first device parameter, and specifically includes: and the running equipment inputs the first equipment parameter as an input parameter into a second preset algorithm, and a first attribute value of the first control unit is obtained through calculation of the second preset algorithm.
In a possible implementation manner, after the running device reads the first layout file, the method further includes: the running equipment acquires display resources of the first control unit, such as icons, texts and the like of the controls, according to the first layout file; the method for laying out the first control unit by the running equipment according to the first attribute value specifically comprises the following steps: the running device can load the display resource of the first control unit according to the calculated first attribute value, and the layout process of the first control unit is realized.
In a possible implementation manner, after the running device calculates the first attribute value of the first control unit according to the first device parameter, the method further includes: the operating equipment acquires brand information of the operating equipment; and the running equipment updates the first attribute value according to the brand information, so that the running equipment of the same brand keeps consistent display style when displaying each control unit.
In a possible implementation manner, after the running device reads the first layout file, and before the running device displays the first display interface in the display screen, the method may further include: if a second attribute constraint condition is set for the second control unit in the first layout file, the running equipment can acquire a second equipment parameter corresponding to the second attribute constraint condition; furthermore, the running equipment calculates a second attribute value of the second control unit according to the second equipment parameter, wherein the second attribute value can be used for indicating the size and the position of the second control unit in the first display interface; further, the runtime device may lay out the second control element in accordance with the second property value.
In a possible implementation manner, after the running device reads the first layout file, and before the running device displays the first display interface in the display screen, the method may further include: if the third attribute value of the third control unit is set in the first layout file, the running device may directly layout the third control unit according to the third attribute value, and the third attribute value may be used to indicate the size and the position of the third control unit in the first display interface.
In a possible implementation manner, after the running device reads the first layout file, the method further includes: if the first layout file includes the device capability corresponding to the fourth control unit, which indicates that the running device displaying the fourth control unit needs a specific device capability (e.g., positioning capability, photographing capability, etc.), the running device may query a nearby display output device having the device capability; further, the running device may instruct the display output device to display the fourth control unit.
In this way, the operating device can distribute different views or View groups to one or more electronic devices with related device capabilities according to the device capabilities set for the views or View groups in the layout file, so that the different views or View groups in one display interface can be presented to the user on the corresponding electronic devices matched with the functions of the display interface.
In a third aspect, the present application provides a computer-readable storage medium, including computer instructions, where the computer instructions are configured to display a first display interface of a first application, where the first display interface includes a first control unit (the first control unit is a control or a control group); when the computer instructions are executed on the first running device, the first running device can be caused to display a first control unit in the first display interface according to the first device parameter; when the computer instruction runs on the second running device, the second running device can display the first control unit in the first display interface according to the second device parameter; and the layout mode of the first control unit in the first running device is different from the layout mode of the first control unit in the second running device. That is to say, a developer only needs to design a set of corresponding computer instructions for each display interface of an application, and can implement the layout process of each View or View group in the display interface on different running devices, and the developer does not need to respectively develop the corresponding computer instructions for different running devices for the same display interface.
Illustratively, the first device parameter or the second device parameter includes at least one of a device type, a device size, a display direction, a device capability, and an interaction manner.
In a fourth aspect, the present application provides a computer-readable storage medium, for example, an application development tool, where the application development tool may specifically include computer instructions, and when the computer instructions are executed on the electronic device, the electronic device may be caused to execute the method for generating a layout file according to any one of the first aspect.
In a fifth aspect, the present application provides an electronic device, comprising: a display screen, an input device, one or more processors, one or more memories, and one or more computer programs; wherein the processor is coupled to the input device, the display screen and the memory, and the one or more computer programs are stored in the memory, and when the electronic device is running, the processor can execute the one or more computer programs stored in the memory, so as to make the electronic device execute the method for generating the layout file according to any one of the first aspect.
In a sixth aspect, the present application provides an operating apparatus comprising: a display screen, one or more processors, one or more memories, and one or more computer programs; the processor is coupled to both the display screen and the memory, the one or more computer programs are stored in the memory, and when the execution device executes the first application, the processor may execute the one or more computer programs stored in the memory, so as to enable the execution device to execute the layout method of the display interface according to any one of the second aspects.
It is to be understood that the electronic device, the operating device, and the computer-readable storage medium provided in the foregoing aspects are all applied to the corresponding method provided in the foregoing, and therefore, the beneficial effects achieved by the electronic device, the operating device, and the computer-readable storage medium can refer to the beneficial effects in the corresponding method provided in the foregoing, and are not described herein again.
Drawings
FIG. 1 is a diagram illustrating a control and a group of controls in a display interface according to the prior art;
fig. 2 is a first schematic structural diagram of an electronic device according to an embodiment of the present disclosure;
fig. 3A is a first schematic diagram of a development interface provided in an embodiment of the present application;
fig. 3B is a schematic diagram of a development interface provided in the embodiment of the present application;
fig. 4A is a third schematic diagram of a development interface provided in the embodiment of the present application;
fig. 4B is a fourth schematic diagram of a development interface provided in the embodiment of the present application;
fig. 5 is a first application diagram of a layout method of a display interface according to an embodiment of the present disclosure;
fig. 6 is a schematic application diagram of a layout method of a display interface according to an embodiment of the present application;
fig. 7 is a schematic application diagram three of a layout method of a display interface according to an embodiment of the present application;
fig. 8 is a schematic application diagram of a layout method of a display interface according to an embodiment of the present application;
fig. 9 is a schematic structural diagram of an electronic device according to an embodiment of the present application;
fig. 10 is a schematic structural diagram of an electronic device according to an embodiment of the present application.
Detailed Description
To facilitate an understanding of the following embodiments, a brief description of the related art is first given:
control (View): elements presented in a GUI (graphical user interface) can be generally referred to as controls that can provide a user with certain operational functionality or for displaying certain content.
For example, the control may specifically include a text control, such as a TextView control, an EditText control, or may also include a Button control, such as a Button control, an ImageButton control, and the like, and may also include a picture control, such as an Image control, and the like, which is not limited in this embodiment of the present application.
In the android system example, all elements in the display interface in the Application (APP) are composed of a control (View) and a control group (ViewGroup).
As shown in FIG. 1, one display interface may contain one or more views or ViewGroups. View is an element displayed in a display interface; the ViewGroup is a layout container for storing views (or ViewGroup). New views or views can be added into the views group, so that the views are arranged according to a certain hierarchical and structural relationship.
Illustratively, a developer may design View or ViewGroup in each display interface in APP using a layout manner such as a linear layout (linear layout), a table layout (TableLayout), a relative layout (RelativeLayout), a layer layout (FrameLayout), an absolute layout (AbsoluteLayout), or a grid layout (gridllayout), so as to generate a layout file, i.e., layout file, for each display interface.
The layout files of the display interfaces can be carried in an application installation package of the APP to be installed in electronic equipment such as a mobile phone. Therefore, when the APP runs in the electronic device, the electronic device can lay out the View or the Viewgroup in the corresponding display interface according to the layout file by acquiring the corresponding layout file, so that the corresponding display interface is presented to the user.
Embodiments of the present embodiment will be described in detail below with reference to the accompanying drawings.
The layout method of the display interface provided in the embodiment of the present application may be applied to an electronic device having a display function, such as a mobile phone, a tablet computer, a notebook computer, an ultra-mobile personal computer (UMPC), a handheld computer, a netbook, a Personal Digital Assistant (PDA), a wearable electronic device, a vehicle-mounted device (also referred to as a car machine), and a virtual reality device, and the present application embodiment does not limit the layout method.
Exemplarily, a mobile phone is taken as an example of the electronic device, and fig. 2 shows a schematic structural diagram of the mobile phone.
The handset may include a processor 110, an external memory interface 120, an internal memory 121, a Universal Serial Bus (USB) interface 130, an antenna 1, an antenna 2, a mobile communication module 150, a wireless communication module 160, an audio module 170, a speaker 170A, a receiver 170B, a microphone 170C, an earphone interface 170D, a sensor module 180, and the like.
It is to be understood that the illustrated structure of the embodiment of the present invention is not to be specifically limited to a mobile phone. In other embodiments of the present application, the handset may include more or fewer components than shown, or combine certain components, or split certain components, or a different arrangement of components. The illustrated components may be implemented in hardware, software, or a combination of software and hardware.
Processor 110 may include one or more processing units, such as: the processor 110 may include an Application Processor (AP), a modem processor, a Graphics Processing Unit (GPU), an Image Signal Processor (ISP), a controller, a memory, a video codec, a Digital Signal Processor (DSP), a baseband processor, and/or a neural-Network Processing Unit (NPU), etc. The different processing units may be separate devices or may be integrated into one or more processors.
A memory may also be provided in processor 110 for storing instructions and data. In some embodiments, the memory in the processor 110 is a cache memory. The memory may hold instructions or data that have just been used or recycled by the processor 110. If the processor 110 needs to reuse the instruction or data, it can be called directly from the memory. Avoiding repeated accesses reduces the latency of the processor 110, thereby increasing the efficiency of the system.
The wireless communication function of the mobile phone can be realized by the antenna 1, the antenna 2, the mobile communication module 150, the wireless communication module 160, the modem processor, the baseband processor, and the like.
The antennas 1 and 2 are used for transmitting and receiving electromagnetic wave signals.
The mobile communication module 150 may provide a solution including wireless communication of 2G/3G/4G/5G, etc. applied to a mobile phone. In some embodiments, at least some of the functional modules of the mobile communication module 150 may be disposed in the processor 110. In some embodiments, at least some of the functional modules of the mobile communication module 150 may be disposed in the same device as at least some of the modules of the processor 110.
The wireless communication module 160 may provide solutions for wireless communication applied to a mobile phone, including Wireless Local Area Networks (WLANs) (e.g., wireless fidelity (Wi-Fi) networks), Bluetooth (BT), Global Navigation Satellite System (GNSS), Frequency Modulation (FM), Near Field Communication (NFC), Infrared (IR), and the like.
In some embodiments, the handset antenna 1 is coupled to the mobile communication module 150 and the handset antenna 2 is coupled to the wireless communication module 160 so that the handset can communicate with the network and other devices via wireless communication techniques.
The mobile phone realizes the display function through the GPU, the display screen 194, the application processor and the like. The GPU is a microprocessor for image processing, and is connected to the display screen 194 and an application processor. The GPU is used to perform mathematical and geometric calculations for graphics rendering. The 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, video, and the like. The display screen 194 includes a display panel. The display panel may adopt a Liquid Crystal Display (LCD), an organic light-emitting diode (OLED), an active-matrix organic light-emitting diode (active-matrix organic light-emitting diode, AMOLED), a flexible light-emitting diode (FLED), a miniature, a Micro-oeld, a quantum dot light-emitting diode (QLED), and the like. In some embodiments, the cell phone may include 1 or N display screens 194, with N being a positive integer greater than 1.
The mobile phone can realize shooting function through the ISP, the camera 193, the video codec, the GPU, the display screen 194, the application processor and the like.
The camera 193 is used to capture still images or video. The object generates an optical image through the lens and projects the optical image to the photosensitive element. The photosensitive element may be a Charge Coupled Device (CCD) or a complementary metal-oxide-semiconductor (CMOS) phototransistor. The light sensing element converts the optical signal into an electrical signal, which is then passed to the ISP where it is converted into a digital image signal. And the ISP outputs the digital image signal to the DSP for processing. The DSP converts the digital image signal into image signal in standard RGB, YUV and other formats. In some embodiments, the handset may include 1 or N cameras 193, N being a positive integer greater than 1.
The external memory interface 120 may be used to connect an external memory card, such as a Micro SD card, to extend the storage capability of the mobile phone. The external memory card communicates with the processor 110 through the external memory interface 120 to implement a data storage function. For example, files such as music, video, etc. are saved in an external memory card.
The internal memory 121 may be used to store computer-executable program code, which includes instructions. The processor 110 executes various functional applications of the cellular phone and data processing by executing instructions stored in the internal memory 121. The internal memory 121 may include a program storage area and a data storage area. The storage program area may store an operating system, an application program (such as a sound playing function, an image playing function, etc.) required by at least one function, and the like. The data storage area can store data (such as audio data, a phone book and the like) created in the use process of the mobile phone. In addition, the internal memory 121 may include a high-speed random access memory, and may further include a nonvolatile memory, such as at least one magnetic disk storage device, a flash memory device, a universal flash memory (UFS), and the like.
The mobile phone can implement audio functions through the audio module 170, the speaker 170A, the receiver 170B, the microphone 170C, the earphone interface 170D, and the application processor. Such as music playing, recording, etc.
The audio module 170 is used to convert digital audio information into an analog audio signal output and also to convert an analog audio input into a digital audio signal. The audio module 170 may also be used to encode and decode audio signals. In some embodiments, the audio module 170 may be disposed in the processor 110, or some functional modules of the audio module 170 may be disposed in the processor 110.
The speaker 170A, also called a "horn", is used to convert the audio electrical signal into an acoustic signal. The handset can listen to music through the speaker 170A or listen to a hands-free conversation.
The receiver 170B, also called "earpiece", is used to convert the electrical audio signal into an acoustic signal. When the mobile phone receives a call or voice information, the receiver 170B can be close to the ear to receive voice.
The microphone 170C, also referred to as a "microphone," is used to convert sound signals into electrical signals. When making a call or transmitting voice information, the user can input a voice signal to the microphone 170C by speaking the user's mouth near the microphone 170C. The handset may be provided with at least one microphone 170C. In other embodiments, the mobile phone may be provided with two microphones 170C to achieve the noise reduction function in addition to collecting the sound signal. In other embodiments, the mobile phone may further include three, four or more microphones 170C to collect sound signals, reduce noise, identify sound sources, and implement directional recording functions.
The headphone interface 170D is used to connect a wired headphone. The headset interface 170D may be the USB interface 130, or may be a 3.5mm open mobile electronic device platform (OMTP) standard interface, a cellular telecommunications industry association (cellular telecommunications industry association of the USA, CTIA) standard interface.
The sensor module 180 may include a pressure sensor, a gyroscope sensor, an air pressure sensor, a magnetic sensor, an acceleration sensor, a distance sensor, a proximity light sensor, a fingerprint sensor, a temperature sensor, a touch sensor, an ambient light sensor, a bone conduction sensor, and the like.
Certainly, the mobile phone may further include a charging management module, a power management module, a battery, a key, an indicator, 1 or more SIM card interfaces, and the like, which is not limited in this embodiment of the present application.
Generally, applications developed and completed by developers can be installed in an application market in the form of application installation packages, and the application installation packages of the applications can be provided in the application market and downloaded by users. For example, the application installation package may be an APK file.
Still taking a mobile phone as an example of the above electronic device, a user may download an application installation package of a certain application in an application market by using the mobile phone. For example, after downloading the application installation package of the music APP, the mobile phone may install the music APP in the mobile phone by running the application installation package.
For example, the application installation package of the music APP may include a layout file of each display interface designed by a developer. The content in the layout file determines how the display interface is presented to the user. For example, a control (View) or a control group (ViewGroup) included in the display interface 1 and a structural relationship between the controls (View) or the control group (ViewGroup) may be defined in the layout file 1. Meanwhile, display resources of each control (View) or control group (View group), such as icons, text contents, head portraits, pictures, and the like of buttons, may also be installed in a mobile phone of a user in an application installation package of a music APP. Therefore, when the music APP runs, the mobile phone can obtain a layout file of a related display interface, obtain display resources of a corresponding control or control group according to a control or control group defined by the layout file, and further load the display resources of the corresponding control or control group at a corresponding position in the display interface according to the layout file, namely complete the layout of each control or control group in the layout file. Finally, the mobile phone can display each corresponding control or control group which is loaded in the display screen, and a corresponding display interface is presented.
In the prior art, a developer may define attribute values for individual controls (views) or control groups (viewgroups) in a layout file. The property values of a control or group of controls can be used to indicate the position and size of the control or group of controls when displayed in a display interface. Of course, the attribute values may also be used to indicate specific display modes and display effects, such as colors, fonts, resolutions, and the like, of the control or the control group when displayed in the display interface, which is not limited in this embodiment of the application.
For example, the control 1 is a picture 1 named "123", the resolution of the control 1 is 1080p, the control 1 is in a shape of a rounded rectangle when displayed, and the display position of the control 1 is in a position centered on the upper layer of the control 2. That is, the attribute values of each View or ViewGroup in the layout file are unambiguous. Thus, after the mobile phone reads the attribute value of the control 1 in the layout file, the control 1 can be laid out according to the attribute value of the control 1. For example, the corresponding picture 1 (i.e., display resource) is obtained by using the control 1 as the name, and the picture 1 is loaded in the display interface according to the attribute values, such as the resolution, the shape, the display position, and the like, defined for the control 1 in the layout file, so as to display the corresponding display interface.
Since the display specifications (e.g., the size and resolution of the display screen) of different electronic devices are usually different, the user's requirements for the display interface in the application on different electronic devices are different, and if the display interface of the application is laid out using the same layout file on each electronic device, the display effect is not good. In order to achieve a better display effect when different electronic devices display the display interface of the application, developers need to design layout files corresponding to the display interface for each type of electronic device when developing the display interface of the APP, so that the process of developing and maintaining the APP by the developers is complex, and the developing and maintaining efficiency is reduced.
In the embodiment of the present application, the developer does not need to set an explicit attribute value for each View or View group in the layout file of the application, and accordingly, the developer may set a constraint condition (which may be referred to as an attribute constraint condition subsequently) for the attribute value of each View or View group in the layout file. The specific attribute value of each View (or ViewGroup) depends on the specific values of these attribute constraints.
For example, the attribute constraint of View1 may include a device type. For example, when the device type is a mobile phone, the attribute value of View1 specifically includes: the resolution is 1080p, and the display direction is the vertical screen display direction; when the device type is a television, the attribute values of View1 specifically include: the resolution was 2048p and the display direction was the landscape display direction. It should be noted that the attribute value of View1 may also include size, shape, color, and the like, and these attribute values may all be affected by the attribute constraint condition of the device type, which is not limited in any way by the embodiment of the present application.
Of course, the attribute constraint of View1 may also include more than one. For example, the property constraints of View1 may include device type, display size, and interaction with the user. When the device type, the display size or the interaction mode with the user of the electronic device are different, the View1 can correspond to different attribute values, so that different display effects of the View1 are presented to the user. The specific method for the electronic device to lay out the View or the ViewGroup according to the attribute constraint condition in the layout file will be described in detail in the following embodiments, and therefore, details are not repeated here.
That is to say, when different electronic devices lay out the display interface of the application, the device type, the display size, the interaction mode with the user, and the like of the electronic device (i.e., running device) running the application may be acquired according to the attribute constraint condition set by the developer in the layout file for each control (or control group), and the attribute value of each control (or control group) matching the attribute constraint condition is automatically determined, so that the layout of the display interface is automatically completed according to the attribute value of each control (or control group).
Therefore, different electronic devices can self-adaptively arrange and display the controls (or control groups) in the interface according to the attribute constraint conditions in the layout files, meanwhile, developers only need to set the attribute constraint conditions of the controls (or control groups) in the layout files of the display interface, so that the different electronic devices can be self-adaptively arranged according to the attribute constraint conditions, and the developers do not need to respectively design a plurality of sets of layout files aiming at the different electronic devices, thereby reducing the development difficulty of the application and improving the development efficiency of the application.
For example, a developer may use a corresponding application development tool (e.g., Android Studio) to design a layout of each control (or control group) in a display interface in a certain application, and then obtain a layout file of the display interface.
Still taking the example of the music APP, as shown in fig. 3A, a developer may design each display interface of the music APP in the development interface 301 of the application development tool. For example, when a developer designs a display interface (which may also be referred to as a play interface) for playing a song in a music APP, a layout file 302 may be created in the development interface 301 for the play interface. For example, the layout file 302 may be a file named "activity _ main" in the format of xml (Extensible Markup Language). At this point, the layout file 302 created by the application development tool is the default initial layout file. Subsequently, the developer can add the View or ViewGroup required in the playing interface in the initial layout file.
Still as shown in fig. 3A, a control library 303 is provided in the development interface 301, and various types of views and viewgroups are included in the control library 303. Such as text controls, picture controls, and the like. The developer may add a corresponding View or ViewGroup to the layout file 302 in the controls library 303. These views or viewgroups constitute the playing interface of the music APP.
Still as shown in fig. 3A, a preview window 304 may be further disposed in the development interface 301, and a developer may View the display effect of the display interface composed of the added View or View group in real time through the preview window 304. For example, in the preview window 304, 3 viewgroups, namely, a title bar 401, a play status bar 402, and an operation bar 403, are included in the play interface of the current music APP. Wherein, the title bar 401 includes two views of the return button 41 and the title 42; the playback status bar 402 includes four views, cover 43, song title 44, singer 45, and lyrics 46; the operation bar 403 includes five views, i.e., a progress bar 404, a pause button 48, a previous button 47, a next button 49, and a collection button 50.
Taking the View of the developer adding the progress bar (progress bar)404 in the operation bar 403 as an example, after the developer selects the View of the progress bar 404 in the control library 303, the developer may add the progress bar 404 as a node into the ViewGroup corresponding to the View Tree 305 (e.g., Component Tree). For example, the progress bar 404 is a child node in the ViewGroup 1. At this point, the application development tool may display the progress bar 404 in the preview window 304 according to the structural relationship between the progress bar 404 in the view tree 305 and the other views in the View group 1.
Illustratively, when a developer adds the progress bar 404 to the view tree 305, the application development tool may set a default set of attribute values for the progress bar 404 according to the specific position of the progress bar 404 in the view tree 305, for example, the width of the progress bar 404 is 1, the height is 1, and the display position is 1. In turn, the application development tool may display the progress bar 404 at a corresponding location in the preview window 304 according to the default attribute value. The attribute value of a View or a View group may include a color, a shape, a font, and the like, in addition to a width, a height, and a display position, and these attribute values determine a display mode and a display effect of the View or the View group on the display interface.
In the embodiment of the present application, a developer may set the attribute values of one or more views or viewgroups to be dynamically changeable in the layout file 302. Still taking the progress bar 404 as an example, if the developer does not want the specific attribute value of the progress bar 404 displayed in the playing interface to be fixed, as shown in fig. 3A, the developer may set a constraint condition, i.e., an attribute constraint condition, for the attribute value of the View to the progress bar 404 in the attribute window 306 of the development interface 301. The specific attribute value of the View depends on the specific value of the corresponding attribute constraint.
For example, the property constraints of View or ViewGroup may include one or more of device type, device size, display orientation, device capabilities, and interaction style. The specific value of the device type can be a mobile phone, a television, a car machine, a watch and the like, and can also be a specific device of a certain model or specification. The specific value of the device size can be the resolution, the aspect ratio and the like of the device. The specific value of the display direction can be a horizontal screen direction or a vertical screen direction and the like. The specific value of the device capability may be a function provided by the device, such as a camera capability, a positioning capability, a call capability, and the like. The specific value of the interaction mode can be a specific mode of interaction with a user, such as touch interaction, remote controller interaction, voice interaction and the like.
Still taking the View of the progress bar 404 as an example, the developer may set the property constraints of the progress bar 404 in the property window 306. For example, if the developer checks the attribute constraint of "interactive mode", it indicates that the specific attribute value of View, which means that the developer sets the progress bar 404, depends on the interactive mode between the device running the music APP and the user. At this time, the application development tool may carry a preset algorithm (for example, a first preset algorithm F) of the control attribute corresponding to the "interactive mode" in the layout file 302, or carry the first preset algorithm F in the application installation package of the music APP. And, the application development tool may establish a correspondence between the first preset algorithm F and the View of the progress bar 404 in the layout file 302. The first preset algorithm F may include one or more algorithms preset by a developer, an input parameter of the first preset algorithm F1 is a specific value of an attribute constraint condition "interactive mode", and an output parameter of the first preset algorithm F1 is a specific attribute value (e.g., height, width, display position, etc.) of View of the progress bar 404.
For example, the first preset algorithm F1 may include a height algorithm F11, a width algorithm F12, and a position algorithm F13. Subsequently, when the device (e.g., a mobile phone) running the music APP displays the progress bar 404 in the playing interface, it may be obtained that the current interaction mode is "touch interaction" according to the attribute constraint condition of "interaction mode" set by the developer in the layout file 302, that is, the specific value of the interaction mode is "touch interaction". Further, the mobile phone may input the parameter "touch interaction" into the height algorithm F11, and calculate the height of the progress bar 404 through the height algorithm F11. Similarly, the mobile phone may input the parameter "touch interaction" into the width algorithm F12, and calculate the width of the progress bar 404 through the width algorithm F12. Similarly, the mobile phone may input the parameter "touch interaction" into the position algorithm F13, and calculate the display position of the progress bar 404 through the position algorithm F13. In this way, the mobile phone can display the progress bar 404 in the playing interface according to the calculated height, width and display position. That is to say, the device running the music APP may dynamically determine the attribute value of the related View or View group according to the attribute constraint condition set by the developer in the layout file 302, so as to dynamically layout and display the View or View group in the interface.
In other embodiments, as shown in fig. 3B, the property window 306 may further include property options such as "width", "height", "display position", and the like. Still taking the View of the progress bar 404 as an example, after the developer adds the progress bar 404 to the View tree 305, if the developer considers that the two attribute values of height 1 and position 1, which are set by the application development tool for the progress bar 404 as a default, do not need to be modified, but the parameter of width 1, which is set by the progress bar 404 as a default, needs to be modified, the developer may select the attribute option of "width". Further, for an attribute value of "width," the developer may continue to set the attribute constraint for that attribute value in the attribute window 306. For example, if the developer clicks on the attribute constraint of "device size", the specific attribute value indicating that the developer has set the width of the progress bar 404 depends on the device size of the device running the music APP. At this time, the application development tool may carry the second preset algorithm F2 with the "device size" as an argument and the "width" as a dependent variable in the layout file 302 (or the application installation package of the music APP). Also, the layout file 302 records the correspondence between the second preset algorithm F2 and the attribute value of the width of the progress bar 404.
Subsequently, when a device (e.g. a mobile phone) running the music APP displays the progress bar 404 in the playing interface, attribute values such as the width, the height, and the display position of the progress bar 404 need to be determined. The mobile phone may determine, by reading the layout file, that the height of the progress bar 404 is the default height 1, the display position of the progress bar 404 is the default position 1, and the width of the progress bar 404 depends on the attribute constraint condition of "device size". Further, the mobile phone can obtain a specific value of the current 'equipment size'. For example, if the "device size" is 2400 x 1080, the mobile phone may input the parameter 2400 x 1080 into the second preset algorithm F2, and calculate the width of the progress bar 404 through the second preset algorithm F2. In this way, the mobile phone can display the progress bar 404 in the playing interface according to the default height 1, the default position 1 and the calculated height in the layout file 302. That is, one or more attribute values in the View or the View group may be dynamically determined according to the attribute constraint conditions set in the layout file 302 by the developer, so as to implement dynamic layout of the View or the View group in the display interface.
It should be noted that the preview window 304 may default to the device running the music APP (i.e. running device), so that the layout of each View or View group in the cell phone screen is displayed in the preview window 304. The developer may also switch the preview window 304 to a preview mode of other running devices (e.g., a television, a car machine, etc.), and display the layout of each View or View group in the other device screens in the preview window 304, which is not limited in this embodiment of the present application.
In addition, the developer may set corresponding attribute constraints for all views or views in the playing interface in the layout file 302, or may set corresponding attribute constraints for one or part of views or views in the playing interface. When the developer adds all views or views group in the layout file 302, the application development tool may generate a layout file 302 corresponding to the playing interface. Subsequently, the application development tool can carry the layout file 302 in the application installation package of the music APP by compiling the layout file 302.
That is to say, when the developer lays out the display interface of the application by using the method, the developer may set a corresponding attribute constraint condition for one or more views or View groups in the display interface, so that the views or View groups in the display interface may be laid out adaptively according to the specific values of the attribute constraint condition when running in different electronic devices. Therefore, developers do not need to respectively create corresponding layout files for different electronic devices, and set attribute values of each View or View group in different layout files, so that the development difficulty of the application is reduced, and the development efficiency of the application is improved.
In other embodiments, still taking the layout file 302 of the playing interface as an example, the developer may set the function items supported by View or ViewGroup in the development interface 301. For example, the functionality options supported by View or ViewGroup may include functionality items of basic layout capabilities such as zoom, stretch, hide, divide, or divide. Wherein, zooming refers to the display capability of zooming in or zooming out the width and height of View or ViewGroup according to a certain proportion. Stretch refers to the ability of the View or ViewGroup to be enlarged or reduced in width and height in different proportions. Hiding refers to the display capability of View or ViewGroup to be visible or invisible in the display interface. The equipartition refers to the display capability of the content in the View or the View group uniformly distributed in the display interface. The broken line refers to the display capability of the content in the View or the View group displayed by one line or multiple lines in the display interface.
As shown in fig. 4A, still taking the View of the progress bar 404 in the operation bar 403 as an example, after the developer adds the progress bar 404 in the View group1 of the View tree 305, the developer may also set the function item supported by the progress bar 404 in the property window 306, and the property constraint condition of the progress bar 404 when the function item is implemented. For example, if the developer clicks on the "zoom" function, the developer is instructed to set the progress bar 404 to View with the display capability of "zoom". If the developer clicks on the attribute constraint of "device type", it means that the attribute value of the progress bar 404 depends on the device type of the running device of the music APP when the "zoom" function is implemented.
For example, the developer may preset a preset algorithm Y1 of the control attribute value corresponding to the function item "zoom". When specific values of different attribute constraint conditions are input into the preset algorithm Y1, different attribute values corresponding to the control can be calculated through the preset algorithm Y1. For example, the specific value of the "device type" may be input as an input parameter into the preset algorithm Y1, and the attribute values such as the width, the height, and the display position of the progress bar 404 are calculated by the preset algorithm Y1. For another example, the preset algorithm Y1 further includes a preset algorithm Y11 for calculating the width of the control, a preset algorithm Y12 for calculating the height of the control, and a preset algorithm Y13 for calculating the display position of the control. Then, if the specific value of the "device type" is input as an input parameter to the preset algorithm Y11, the width of the progress bar 404 can be calculated by the preset algorithm Y11. If the specific value of the "device type" is input as an input parameter to the preset algorithm Y12, the height of the progress bar 404 can be calculated by the preset algorithm Y12. If the specific value of the "device type" is input as an input parameter to the preset algorithm Y13, the display position of the progress bar 404 can be calculated by the preset algorithm Y13.
Similarly, the developer can also preset the preset algorithms of the control attribute values corresponding to the functional items such as "stretch", "hide", "divide equally", and "fold line". Thus, after a developer sets a corresponding function item for a View or a View group in the layout file 302, the application development tool can carry a corresponding preset algorithm in the layout file or the application installation package and issue the preset algorithm to the device for installing the music APP. Subsequently, when the device for installing the music APP displays the related View or View group, the corresponding preset algorithm may be obtained according to the function items set in the layout file 302, and a specific value of an attribute constraint condition set by a developer is input into the preset algorithm, so as to dynamically calculate a specific attribute value of the View or View group, so as to dynamically layout the View or View group in the display interface according to the specific attribute value of the View or View group.
In some embodiments, View or ViewGroup may also be designed as a group of functional items consisting of multiple basic layout capabilities through a combination and superposition of basic local capabilities such as scaling, extending, hiding, halving or collapsing as described above. For example, View1 may implement an immersive layout by scaling, extending, and hiding groups of function items. As another example, each View in ViewGroup1 may implement dynamic merging of the expanded set of function items by scaling and folding. Developers can arrange and combine the basic local capabilities according to actual application scenes or user requirements and then design corresponding functional item groups, and the embodiment of the application does not limit the basic local capabilities.
Similarly, the developer may set the preset algorithm of the corresponding control attribute value for different function item groups in advance. For example, the preset algorithm of the control attribute value corresponding to the function item group of "immersive layout" is preset algorithm Y2. When specific values of different attribute constraint conditions are input into the preset algorithm Y2, different attribute values corresponding to the control can be calculated through the preset algorithm Y2. For example, since the group of function items of the "immersive layout" integrates multiple basic local capabilities of zooming, extending, and hiding, the preset algorithm Y2 may include a preset algorithm of control attribute values corresponding to multiple function items of zooming, extending, and hiding, which is not limited in this embodiment of the present application.
For example, as shown in fig. 4B, by taking the view group of the operation bar 403 as an example, after the developer adds the view group1 corresponding to the operation bar 403 to the view tree 305, the developer may set the function item group supported by the operation bar 403 in the property window 306. For example, the developer can set the operation bar 403 to have layout capability of an immersive layout by checking the function item group of "immersive layout". Further, the developer can continue to set the attribute constraint corresponding to the function item of "immersive layout", that is, the constraint of the attribute value of the operation bar 403 when the layout capability of the "immersive layout" is realized by the operation bar 403, in the attribute window 306. For example, the property constraint set by the developer is the interactive mode.
Then, when the device (e.g. mobile phone) running the music APP displays the operation bar 403, the corresponding preset algorithm Y2 can be obtained according to the function item group of "immersive layout" set in the layout file 302. Moreover, the mobile phone can obtain that the interaction mode of the device and the user is touch interaction according to the attribute constraint condition of the "interaction mode" set in the layout file 302, that is, the specific value of the "interaction mode" is as follows: and (6) touch interaction. Furthermore, the mobile phone may input the touch interaction as an input parameter into the preset algorithm Y2, and calculate specific attribute values (such as a display position, a height, and a width) of the operation bar 403 through the preset algorithm Y2. In this way, the mobile phone can dynamically layout the operation bar 403 in the display interface according to the calculated specific attribute value, so that the operation bar 403 can implement the function of immersive layout according to the interaction mode of the mobile phone and the user.
That is to say, the developer may also set the function item (or the function item group) supported by the View or the View group and the attribute constraint condition corresponding to the function item (or the function item group) in the layout file by taking the View or the View group as a unit. Subsequently, the electronic device running the music APP can obtain the specific values of the attribute constraint conditions, so that the View or the Viewgroup corresponding to the layout of the attribute constraint conditions is self-adaptive, and the View or the Viewgroup can realize the function items set by developers.
Similarly, when the display interface is developed by using the method for developing the layout files, a developer can be suitable for different electronic devices by only designing one set of layout files for each display interface of the application, the developer does not need to respectively create a plurality of sets of corresponding layout files for different electronic devices, and the attribute values of each View or View group are respectively set in each layout file, so that the development difficulty of the application is reduced, and the development efficiency of the application is improved.
Moreover, when a subsequent developer maintains the music APP, if the layout in a certain display interface needs to be modified, the developer may modify the function item, the function item group, or the attribute constraint condition of each View or View group in the corresponding layout file, generate a new layout file, and update the new layout file to the electronic device used by the user. Developers do not need to respectively modify each View or ViewGroup in the layout file aiming at different electronic equipment, so that the maintenance process of the application after the application development is finished is simplified.
The above embodiment is exemplified by a layout file for a display interface (i.e. a playing interface) in a music APP designed by a developer. It can be understood that, a developer may generate layout files of each display interface in the music APP according to the above method, where each layout file declares each View or View group included in the corresponding display interface, a function item (or a function item group) supported by one or more views or View groups in the display interface, and an attribute constraint condition corresponding to the function item (or the function item group). Furthermore, developers can carry the layout files in the application installation package of the music APP, so that different electronic devices can acquire the layout files of different display interfaces by downloading and installing the application installation package of the music APP. Therefore, when different electronic devices run the music APP, the View or the Viewgroup in the display interface can be laid out according to the corresponding layout file, and therefore the complete display interface is presented to the user.
Still by way of example of the music APP, after the user downloads the application installation package of the music APP in the mobile phone, the application installation package may be installed in the mobile phone. At this time, the layout files of the display interfaces designed by the developers carried in the application installation package are also stored in the mobile phone. For example, when installing an application installation package of a music APP, the mobile phone may create a folder 1 named "music" under a specified path and store layout files of respective display interfaces carried in the application installation package in the folder 1.
Of course, the application installation package of the music APP may also carry other information set by the developer. For example, the application installation package of the music APP may also carry display resources of a related View or View group, such as icons of buttons, head images of contacts, pictures, texts, or web links. These display resources may also be stored in a folder created by the handset for the music APP, for example, in the above-mentioned folder 1 named "music". And the music APP can acquire the display resource corresponding to the View or the ViewGroup according to the layout file during running, so that the corresponding View or ViewGroup is loaded by using the display resource of the View or the ViewGroup to display a corresponding display interface.
In the embodiment of the application, the mobile phone can display different display interfaces in the music APP when the music APP is operated. For example, when the music APP needs to display a playing interface, the music APP may trigger the mobile phone to obtain a layout file corresponding to the playing interface from the folder 1 named "music" by calling the corresponding interface, that is, the layout file 302 created by the developer in fig. 3A, fig. 3B, fig. 4A, or fig. 4B.
Illustratively, as shown in fig. 5, ViewGroup1, ViewGroup2, and ViewGroup3 are defined in the layout file 302. The ViewGroup1 corresponds to the operation bar in the playing interface, and the ViewGroup1 includes 5 views, namely, a progress bar, a pause button, a previous button, a next button and a collection button. The Viewgroup2 corresponds to the playing status bar in the playing interface, and the Viewgroup2 includes 4 views of the cover, the title of the song, the singer, and the lyrics. The ViewGroup3 corresponds to the title bar in the Play interface, and the ViewGroup3 includes 2 views, the Return button and the title.
Also, as shown in fig. 5, the developer sets a corresponding function item (or a function item group) and an attribute constraint corresponding to the function item (or the function item group) in the layout file 302 for the related View or View group. For example, the set of function items supported by ViewGroup1 is "immersive layout", and the corresponding property constraint 1 includes: device type and interaction mode. For another example, the function item group supported by the ViewGroup2 is "dynamic merge expansion", and the corresponding attribute constraint 2 includes: device type and display orientation. For another example, the function item supported by the ViewGroup3 is "zoom", and the corresponding attribute constraint 3 includes: the size of the device.
It should be noted that, in fig. 5, the function item and the attribute constraint condition of each View group are set with the View group as the granularity, and it can be understood that a developer may also set a corresponding function item and an attribute constraint condition for each View with the View as the granularity when designing a layout file, which is not limited in this embodiment of the present application.
Taking the above View group1 as an example, the cell phone can determine 5 views including a progress bar, a pause button, a previous button, a next button and a collection button in the View group1 by reading the layout file 302. Further, the mobile phone can obtain the display resource of each of the 5 views from the folder 1.
Moreover, the mobile phone can determine that the function item group of ViewGroup1 is "immersive layout" by reading the layout file 302, and the corresponding attribute constraint condition 1 includes: device type and interaction mode. Further, as shown in fig. 5, the mobile phone may obtain the preset algorithm 1 of the corresponding control attribute according to the function item group of "immersive layout". The corresponding relationship between different function items (or function item groups) and different preset algorithms can be carried in the layout file 302 or an application installation package of the music APP and issued to the mobile phone. Also, as shown in fig. 5, the mobile phone may obtain the corresponding device parameter 1 (i.e., the specific value of the attribute constraint 1) according to the attribute constraint 1. For example, the device parameter 1 includes a device parameter corresponding to the device type, which is a mobile phone, that is, the device type is a mobile phone; the device parameter 1 includes a device parameter corresponding to the interaction method, which is touch interaction, that is, the interaction method is touch interaction.
Further, the mobile phone may input the device parameter 1 (mobile phone, touch interaction) as an input parameter into the preset algorithm 1, and calculate a specific attribute value of each View in the View group1, such as the size, shape, display position, and the like of the View, through the preset algorithm 1. For example, when the device type in the device parameter 1 is a cell phone and the interaction mode is touch interaction, the View in the View group1 may be set to be located at the bottom of the cell phone screen, which is convenient for the user to operate. Of course, the mobile phone may also calculate attribute values such as size and shape of each View in the View group1 according to the device parameter 1, which is not limited in this embodiment of the present application. Further, as shown in fig. 5, the mobile phone may load each View in the View group1 in the play interface 501 by using the display resource of each View according to the calculated specific attribute value of each View, so as to display the operation bar 502 in the play interface 501 in the display screen of the mobile phone.
The above embodiment is exemplified by displaying the ViewGroup1 according to the layout file 302 by the mobile phone. Similarly, when displaying the View group2, the cell phone can obtain the display resource of each View in the View group2 from the folder 1 by reading the layout file 302.
As also shown in fig. 5, the mobile phone may determine, by reading the layout file 302, that the function item of ViewGroup2 is "dynamic merge and expand", where the corresponding attribute constraint 2 includes: device type and display orientation. Further, as shown in fig. 5, the mobile phone may obtain the preset algorithm 2 of the corresponding control attribute according to the function item group of "dynamic merging and expanding". And, the mobile phone can obtain the corresponding device parameter 2 (i.e. the specific value of the attribute constraint condition 2) according to the attribute constraint condition 2. For example, the device parameter 2 includes a device parameter corresponding to the device type, which is a mobile phone, that is, the device type is a mobile phone; the device parameter 2 includes a device parameter corresponding to the display direction, which is displayed in a vertical screen, that is, the display direction is displayed in a vertical screen.
Furthermore, the mobile phone may input the device parameter 2 (mobile phone, vertical screen display) as an input parameter into the preset algorithm 2, and calculate a specific attribute value of each View in the View group2, such as the size, shape, display position, and the like of the View, through the preset algorithm 2. For example, when the device type in the device parameter 2 is a mobile phone and the display direction is a vertical screen display, the views in the View group2 may be arranged in a vertical direction. Further, as shown in fig. 5, the mobile phone may load each View in the View group2 in the play interface 501 according to the calculated specific attribute value of each View by using the display resource of each View, so as to display the play status bar 503 in the play interface 501 in the display screen of the mobile phone.
Similarly, as also shown in FIG. 5, the handset can determine the View contained in ViewGroup3 by reading the layout file 302 and obtain the display resource corresponding to the View. In addition, the layout file 302 defines that the function item of ViewGroup3 is "zoom", and the corresponding attribute constraint 3 includes: the size of the device. Further, as shown in fig. 5, the mobile phone may obtain the preset algorithm 3 of the corresponding control attribute according to the function item of "zoom". And, the mobile phone can obtain the corresponding device parameter 3 (i.e. the specific value of the attribute constraint condition 3) according to the attribute constraint condition 3. For example, the device parameter 3 includes a device parameter 2400 × 1080 corresponding to the device size, that is, the device size is 2400 × 1080.
Furthermore, the mobile phone may input the device parameter 3 ═ (2400 × 1080) as an input parameter into the preset algorithm 3, and calculate a specific attribute value of each View in the View group3, such as the size, shape, display position, and the like of the View, by the preset algorithm 3. For example, when the device size in the device parameter 3 is 2400 × 1080, the ViewGroup3 may be set to be located at the top of the screen, and the size of the font in each View in the ViewGroup3 is 14. Further, as shown in fig. 5, the mobile phone may load each View in the View group3 in the playing interface 501 according to the calculated specific attribute value of each View by using the display resource of each View, so as to display the title bar 504 in the playing interface 501 in the display screen of the mobile phone.
Thus, when the mobile phone displays the playing interface 501 of the music APP, the mobile phone may obtain a preset algorithm for calculating the attribute value of the specific control according to the function item (or the function item group) set for each View or View group in the layout file 302, obtain the corresponding device parameter according to the attribute constraint condition set for each View or View group, further calculate the attribute value of the corresponding View or View group according to the obtained device parameter by using the corresponding preset algorithm, thereby laying out each View or View group according to the attribute value, and finally displaying the corresponding playing interface 501 in the display screen for the user.
Similarly, when the mobile phone runs the music APP to display other display interfaces in the music APP, each View or View group in the corresponding layout file layout can be obtained according to the method, so that the corresponding display interface is displayed.
That is to say, the mobile phone may obtain corresponding device parameters according to the function items and attribute constraint conditions set by the developer for each View or View group in the layout file, and further, according to each View or View group in the layout display interface in which the obtained device parameters are adaptive, make the presentation effect of each View or View group in the display interface match with the device characteristics (for example, device type, size, interaction mode or function, etc.) of the currently running device.
Still by way of example of the above music APP, similar to the music APP running on a mobile phone, when a user installs an application installation package of the music APP in the car machine 1, the car machine 1 may also store layout files of each display interface in the application installation package in a folder of a specified path.
Still taking the layout file 302 of the playing interface as an example, when the music APP needs to display the playing interface, the music APP may trigger the car machine 1 to obtain the layout file 302 corresponding to the playing interface by calling the corresponding interface. The layout file 302 includes a ViewGroup1 corresponding to the operation column, a ViewGroup2 corresponding to the playback status column, and a ViewGroup3 corresponding to the title column.
Then, the car machine 1 may respectively obtain the display resources of each View in the View group1, the View group2 and the View group3 by reading the layout file 302.
As shown in fig. 6, car machine 1 may determine that the function item group of ViewGroup1 is "immersive layout" by reading layout file 302, and the corresponding attribute constraint condition 1 includes: device type and interaction mode. Furthermore, as shown in fig. 6, the car-machine 1 may obtain the preset algorithm 1 of the corresponding control attribute according to the function item group of "immersive layout". And the car machine 1 can obtain the corresponding equipment parameter 1 (i.e. the specific value of the attribute constraint condition 1) according to the attribute constraint condition 1. For example, the device parameter 1 includes a device parameter corresponding to the device type, which is a vehicle machine, that is, the device type is a vehicle machine; the device parameter 1 includes a device parameter corresponding to the interaction method, which is voice interaction, that is, the interaction method is voice interaction.
Further, the in-vehicle device 1 may input the device parameter 1 (in-vehicle device 1, touch interaction) as an input parameter into the preset algorithm 1, and calculate a specific attribute value, such as a size, a shape, a display position, and the like, of each View in the View group1 through the preset algorithm 1.
For example, when the device type in the device parameter 1 is car machine and the interaction mode is voice interaction, the user does not need to click the button in the ViewGroup1, so that hiding the pause button, the previous button, the next button and the favorite button in the ViewGroup1 in the play interface 601 and displaying the progress bar in the ViewGroup1 in the play interface 601 can be set, and the display effect of the immersive layout is realized. Further, as shown in fig. 6, the car machine 1 may hide the View corresponding to the View group1 in the playing interface 601 for non-display, and display the progress bar in the playing interface 601. At this time, only one View of the progress bar is in the operation bar 602 of the playing interface 601.
Similarly, the car machine 1 may determine that the function item of ViewGroup2 is "dynamic merge expand" by reading the layout file 302, and the corresponding attribute constraint 2 includes: device type and display orientation. Further, as shown in fig. 6, the car machine 1 may obtain the preset algorithm 2 of the corresponding control attribute according to the function item group of "dynamic merging and expanding". And the car machine 1 can obtain the corresponding equipment parameter 2 (i.e. the specific value of the attribute constraint condition 2) according to the attribute constraint condition 2. For example, the device parameter 2 includes a device parameter corresponding to the device type, which is the vehicle machine 1, that is, the device type is the vehicle machine; the device parameter 2 includes a device parameter corresponding to the display direction, which is a horizontal screen display, that is, a display direction is a horizontal screen display.
Further, the in-vehicle machine 1 may input the device parameter 2 (in-vehicle machine, landscape display) as an input parameter into the preset algorithm 2, and calculate a specific attribute value, such as a size, a shape, a display position, and the like of each View in the View group2 through the preset algorithm 2.
For example, when the device type in the device parameter 2 is the car machine and the display direction is the landscape display, the views in the View group2 may be arranged to be spread in the horizontal direction. Furthermore, as shown in fig. 6, the in-vehicle device 1 may load each View in the View group2 in the playing interface 601 by using the display resource of each View according to the calculated specific attribute value of each View, so as to display the playing status bar 603 in the playing interface 601.
Similarly, as also shown in fig. 6, car machine 1 may determine that the function item of ViewGroup3 is "zoom" by reading layout file 302, and the corresponding attribute constraint 3 includes: the size of the device. Further, as shown in fig. 6, the car machine 1 may obtain the preset algorithm 3 of the corresponding control attribute according to the function item of "zoom". And the car machine 1 can obtain the corresponding equipment parameter 3 (i.e. the specific value of the attribute constraint condition 3) according to the attribute constraint condition 3. For example, the device parameter 3 includes a device parameter corresponding to the device size of 800 × 480, that is, the device size of 800 × 480.
Further, the in-vehicle device 1 may input the device parameter 3 (800 × 480) as an input parameter into the preset algorithm 3, and calculate a specific attribute value, such as a size, a shape, a display position, and the like of each View in the View group3 through the preset algorithm 3. For example, when the device size in the device parameter 3 is 800 × 480, the ViewGroup3 may be set to be located at the top of the screen, and the size of the font in each View in the ViewGroup3 is 10. Furthermore, as shown in fig. 6, the in-vehicle device 1 may load each View in the View group3 in the playing interface 601 by using the display resource of each View according to the calculated specific attribute value of each View, so as to display the title bar 604 in the playing interface 601.
In this way, when the car machine 1 displays the playing interface 601 of the music APP, the corresponding device parameters may be acquired according to the function items and the attribute constraint conditions set for each View or View group in the layout file 302, and then the attribute values of each View or View group are adaptively set according to the acquired device parameters, so that each View or View group is laid out according to the attribute values, and finally the corresponding playing interface 601 is displayed.
It should be noted that not all views or View groups in the display interface need to set corresponding function items and attribute constraints. The developer may set corresponding function items and attribute constraints for one or more views or View groups in the layout file 302 according to a specific application scenario or actual experience, and the developer may set specific attribute values (such as width, height, and display position) for other views or View groups in the layout file 302. Then, if the car machine 1 (or the mobile phone) reads the View or the View group without the function item and the attribute constraint condition from the layout file 302, the layout may be performed according to the specific attribute value set for the View or the View group in the layout file 302, which is not limited in this embodiment of the present application.
It can be seen that, no matter the process of the mobile phone displaying the playing interface 501 in the music APP according to the layout file 302 or the process of the car machine 1 displaying the playing interface 601 in the music APP according to the layout file 302, although the layout forms of the controls in the playing interfaces finally displayed by the mobile phone and the car machine 1 are different, the layout files used by the mobile phone and the car machine 1 are the same (i.e. the layout file 302). That is, when different electronic devices display the same display interface in an application, the View or View group in the layout display interface can be adaptively arranged according to the function item and attribute constraint condition set for each View or View group in the related layout file. Therefore, developers do not need to respectively create corresponding layout files for different electronic devices, and therefore development difficulty of the application is reduced, and development efficiency of the application is improved.
In some embodiments, the developer may also update the function item (or group of function items) and attribute constraints set for a View or ViewGroup in a layout file (e.g., layout file 302 described above). The updated layout file 302 may be carried in an application installation package of the latest version of the music APP and downloaded to the electronic device (e.g., the mobile phone or the car machine 1) of the user, so that the electronic device of the user may obtain the latest layout file of the relevant display interface.
For example, as shown in fig. 5 or fig. 6, the set of function items in the layout file 302 for the developer ViewGroup2 is "dynamic merge and expand", and the corresponding attribute constraint 2 includes: device type and display orientation. As shown in FIG. 7, the developer may modify attribute constraint 2 to: the device type, display direction, and device size, resulting in an updated layout file 701. Further, the developer may carry the updated layout file 701 in the application installation package of the latest version of the music APP.
If the car machine 1 and the car machine 2 both install the application installation package example of the music APP of the latest version, both the car machine 1 and the car machine 2 can obtain the updated layout file 701 in the application installation package.
Then, similar to the process of each View or View group in the layout playing interface in the foregoing embodiment, when the car machine 1 displays View group2, the car machine 1 may determine that the function item of View group2 is "dynamic merge and expand" by reading the layout file 701, and the corresponding attribute constraint condition 2 includes: device type, display orientation, and device size. Furthermore, the car machine 1 can obtain the corresponding equipment parameter 2 according to the attribute constraint condition 2. For example, device parameters 2 include: the device type is the car machine, the display direction is the horizontal screen display, and the device size is 800 × 480. Then, the car machine 1 may calculate a specific attribute value of each View in the View group2 by using the preset algorithm 2 according to the acquired device parameter 2. For example, the cover 702 in the ViewGroup2 may be aligned with other views (i.e., song title, singer, lyrics) laterally, since the screen width (i.e., 800) in the device size is less than the threshold. Furthermore, as shown in fig. 7, the car-in-vehicle 1 may display the front cover 702 of the ViewGroup2 and other views (i.e. song title, singer, and lyrics) in parallel and horizontally in the playing interface 703.
Similarly, when the car machine 2 displays the ViewGroup2, the car machine 2 may determine that the function item of the ViewGroup2 is "dynamic merge expand" by reading the layout file 701, and the corresponding attribute constraint 2 includes: device type, display orientation, and device size. And then, the car machine 2 can obtain the corresponding equipment parameter 2 according to the attribute constraint condition 2. For example, device parameters 2 include: the device type is the car machine, the display direction is the horizontal screen display, and the device size is 1080 × 480. Then, the car machine 2 may calculate a specific attribute value of each View in the View group2 by using the preset algorithm 2 according to the obtained device parameter 2. At this time, since the screen width (i.e., 1080) in the device size is larger than the threshold value, the cover 702 in the ViewGroup2 can be enlarged and displayed on the right side of the screen. Furthermore, as shown in fig. 7, the car machine 2 may enlarge the front cover 702 in the ViewGroup2 in the play interface 704 and display the layout on the right side of the screen.
It can be seen that when the attribute constraint condition of the View or the View group in the layout file is changed, different electronic devices may obtain the latest device parameter according to the latest attribute constraint condition, so as to adaptively adjust the layout of the View or the View group according to the latest device parameter, and enable the presentation effect of each View or View group in the display interface to be matched with the device characteristics (such as device type, size, interaction mode or function, etc.) of the currently running device.
In some embodiments, different brands of electronic devices may set a uniform display style when displaying individual views or View groups. For example, brand a mobile phones uniformly use a first font to display each View or View group in the display interface, and brand B mobile phones uniformly use a second font to display each View or View group in the display interface. Then, when the running device of the music APP lays out the corresponding display interface according to the layout file, brand information of the current running device may also be obtained. Furthermore, the running device may further adjust attribute values of each View or View group in the display interface to be displayed currently according to the acquired brand information, for example, a color of the title, a font of the title, a size of a rounded corner of the button, and the like.
In addition, in the above embodiments, the layout files of music APPs are all exemplified, and it can be understood that developers may also develop the layout files of each display interface in other APPs according to the above method. Therefore, after the electronic device acquires the corresponding layout file, the electronic device can acquire the corresponding device parameters according to the method and the function items and the attribute constraint conditions of each View or View group in the layout file, so that each View or View group in the layout display interface can be self-adapted according to the acquired device parameters.
In other embodiments, the developer may also set the device capabilities required for each View or ViewGroup in the layout file. For example, View for playing video requires running the device with video display function; for another example, View for displaying maps requires the running equipment to have a positioning function; as another example, View for payments requires a runtime environment with secure authentication of the runtime device.
Then, as shown in fig. 8, it is assumed that there are View1 for playing video, View2 for displaying map, and View3 for payment in a layout file (e.g., layout file 801) of one display interface. Taking the operating device as an example of the mobile phone, after the mobile phone acquires the layout file 801, it can be queried whether an electronic device with a video display function exists near the mobile phone, whether an electronic device with a positioning function exists, and whether an electronic device with a security authentication operating environment exists.
For example, a cell phone may communicate with electronic devices located in the same Wi-Fi network to obtain device capabilities of nearby electronic devices. If the mobile phone inquires that the television in the same Wi-Fi network has the video display function, the mobile phone can establish network connection with the television. Further, the cell phone can send the display resources of View1 to an electronic device (e.g., a television) having video display capabilities, and View1 is displayed by the television.
For example, the mobile phone may further obtain corresponding device parameters according to the function items and the attribute constraints set for the View1 in the layout file 801, and calculate attribute values of the View1, such as the size, shape, display position, and the like of the View1, according to the obtained device parameters. Further, the cell phone may also send the attribute values of View1 to the television so that the television may display View1 using the display resources of View1 according to the attribute values of View 1.
Or, the mobile phone can also send the function items and attribute constraints set for View1 in the layout file 801 to the television. Furthermore, the television may acquire corresponding device parameters according to the function items and the attribute constraint conditions set for the View1 in the layout file 801, and calculate an attribute value of the View1 according to the acquired device parameters. Further, the television may display the View1 using the display resources of View1 according to the calculated attribute value of View 1.
Similarly, as also shown in fig. 8, if the handset queries that the watch located in the same Wi-Fi network has a location function, the handset may establish a network connection with the watch. In turn, the cell phone can send the View2 display resource to a location-enabled electronic device (e.g., a watch) that displays View 2. The attribute value of the View2 may be calculated by the mobile phone according to the function item and the attribute constraint condition set in the layout file 801 and then sent to the watch, or the mobile phone may send the function item and the attribute constraint condition set for the View2 in the layout file 801 to the watch, and the watch calculates the attribute value of the View2 according to the function item and the attribute constraint condition set in the layout file 801.
Still as shown in fig. 8, if the mobile phone does not inquire that other electronic devices located in the same Wi-Fi network have a security-certified operating environment, but the mobile phone itself has a security-certified operating environment, the mobile phone may obtain corresponding device parameters according to the function items and attribute constraints set for View3 in the layout file 801. Furthermore, the mobile phone can calculate the attribute value of View3 according to the acquired device parameters, and display View3 on the mobile phone screen according to the calculated attribute value of View 3.
Of course, when the mobile phone has a video display function, the mobile phone may also display the View1 in its own screen. For another example, when the mobile phone has a positioning function, the mobile phone may also display the View2 on its own screen, which is not limited in this embodiment of the present application.
In this way, the mobile phone can distribute different views or View groups to one or more electronic devices with related device capabilities according to the device capabilities set for each View or View group in the layout file 801, so that different views or View groups in one display interface can be presented to the user on the corresponding electronic device matched with the functions of the View or View group.
As shown in fig. 9, an embodiment of the present application discloses an electronic device, which may be an electronic device running the application development tool. The electronic device may specifically include: a display screen 901; an input device 902 (e.g., a mouse, keyboard, or touch screen, etc.); one or more processors 903; a memory 904; a communication module 905; one or more application programs (not shown); and one or more computer programs 906, which may be connected by one or more communication buses 907. Wherein the one or more computer programs 906 are stored in the memory 904 and configured to be executed by the one or more processors 903, the one or more computer programs 906 comprising instructions that may be used to perform the steps associated with the embodiments described above.
As shown in fig. 10, an embodiment of the present application discloses an electronic device, which may be an electronic device (also referred to as a running device) installed with an application installation package containing the layout file. The electronic device may specifically include: a display screen 1001; one or more processors 1003; a memory 1004; a communication module 1005; one or more application programs (not shown); and one or more computer programs 1006, which may be connected via one or more communication buses 1007. Wherein the one or more computer programs 1006 are stored in the memory 1004 and configured to be executed by the one or more processors 1003, the one or more computer programs 1006 including instructions that can be used to perform the relevant steps in the above embodiments.
Through the above description of the embodiments, it is clear to those skilled in the art that, for convenience and simplicity of description, the foregoing division of the functional modules is merely used as an example, and in practical applications, the above function distribution may be completed by different functional modules according to needs, that is, the internal structure of the device may be divided into different functional modules to complete all or part of the above described functions. For the specific working processes of the system, the apparatus and the unit described above, reference may be made to the corresponding processes in the foregoing method embodiments, and details are not described here again.
Each functional unit in the embodiments of the present application may be integrated into one processing unit, or each unit may exist alone physically, or two or more units are integrated into one unit. The integrated unit can be realized in a form of hardware, and can also be realized in a form of a software functional unit.
The integrated unit, if implemented in the form of a software functional unit and sold or used as a stand-alone product, may be stored in a computer readable storage medium. Based on such understanding, the technical solutions of the embodiments of the present application may be essentially implemented or make a contribution to the prior art, or all or part of the technical solutions may be implemented in the form of a software product stored in a storage medium and including several instructions for causing a computer device (which may be a personal computer, a server, or a network device) or a processor to execute all or part of the steps of the methods described in the embodiments of the present application. And the aforementioned storage medium includes: flash memory, removable hard drive, read only memory, random access memory, magnetic or optical disk, and the like.
The above description is only a specific implementation of the embodiments of the present application, but the scope of the embodiments of the present application is not limited thereto, and any changes or substitutions within the technical scope disclosed in the embodiments of the present application should be covered by the scope of the embodiments of the present application. Therefore, the protection scope of the embodiments of the present application shall be subject to the protection scope of the claims.

Claims (22)

1. A layout method of a display interface is characterized by comprising the following steps:
the method comprises the steps that an application installation package of a first application is installed on running equipment, the application installation package comprises a first layout file, the first layout file comprises a first corresponding relation between a first control unit and a first preset algorithm, input parameters of the first preset algorithm are values of a first attribute constraint condition of the running equipment, the first attribute constraint condition comprises at least one of equipment type, equipment size, display direction, equipment capacity or interaction mode, output parameters of the first preset algorithm are attribute values of the first control unit, and the attribute values of the first control unit are used for indicating the size and the position of the first control unit in a first display interface;
the operating equipment acquires equipment parameters of the operating equipment, wherein the equipment parameters comprise at least one of an equipment type value of the operating equipment, an equipment size value of the operating equipment, a display direction value of the operating equipment, an equipment capacity value of the operating equipment or an interaction mode value of the operating equipment;
the running equipment calculates a first attribute value of the first control unit according to the equipment parameter and the first preset algorithm;
and the running equipment lays out the first control unit according to the first attribute value and displays the first control unit on the first display interface.
2. The method according to claim 1, wherein the first layout file further includes a second corresponding relationship between a second control unit and a second preset algorithm, an input parameter of the second preset algorithm is a value of a second attribute constraint condition of the operating device, the second attribute constraint condition includes at least one of a device type, a device size, a display direction, a device capability, or an interaction manner, an output parameter of the second preset algorithm is an attribute value of the second control unit, and the attribute value of the second control unit is used to indicate a size and a position of the second control unit in the first display interface, and the method further includes:
the running equipment calculates a second attribute value of the second control unit according to the equipment parameter and the second preset algorithm;
and the running equipment lays out the second control unit according to the second attribute value and displays the second control unit on the first display interface.
3. The method of claim 1 or 2, wherein the property value of the first control element is further used to indicate a display style of the first control element.
4. The method of claim 1 or 2, wherein the device type comprises a cell phone, a television, a car machine, or a watch.
5. The method of claim 1 or 2, wherein the device dimensions comprise a device resolution or an aspect ratio.
6. The method of claim 1 or 2, wherein the display direction comprises a landscape screen direction or a portrait screen direction.
7. The method according to claim 1 or 2, wherein the device capabilities comprise camera capabilities, positioning capabilities or call capabilities, and the interaction means comprises touch interaction, remote control interaction or voice interaction.
8. The method of claim 1 or 2, wherein the first layout file further comprises a first function item of the first control element, the first function item comprising one of zoom, stretch, hide, split, or fold, the method further comprising:
the running equipment acquires a third preset algorithm corresponding to the first function item;
and the running equipment inputs the equipment parameters into the third preset algorithm as input parameters, and a third attribute value of the first control unit is obtained through calculation of the third preset algorithm.
9. The method of claim 1 or 2, wherein a third device capability corresponding to a third control element is included in the first layout file, the method further comprising:
the running device queries a display output device having the third device capability;
and the running equipment instructs the display output equipment to display the third control unit.
10. The method of claim 9, wherein the operating device instructing the display output device to display the third control element comprises:
and the running equipment sends the display resource corresponding to the third control unit to the display output equipment, so that the display output equipment displays the third control unit.
11. A method of generating a layout file, comprising:
displaying a development interface of a first application;
responding to a first operation input by a user, and displaying a preset initial layout file in the development interface;
responding to a second operation input by a user, adding a first control unit in the initial layout file, wherein the first control unit is used for being displayed in a first display interface of the first application, and the control unit is a control or a control group;
responding to a third operation input by a user, setting a first attribute constraint condition of the first control unit in the initial layout file, and obtaining a first layout file; the attribute value of the first control unit is obtained by calculating the running equipment of the first application according to the first attribute constraint condition, and the attribute value of the first control unit is used for indicating the position and the size of the first control unit in the first display interface; the first layout file is used for indicating the layout mode of N control units in the first display interface, the first control unit is one of the N control units, and N is an integer greater than 0;
and generating an application installation package of the first application according to the first layout file.
12. The method according to claim 11, wherein a property window is set in the development interface, the property window includes one or more property constraints, the property constraints are used to define device parameters obtained when a running device of the first application calculates property values of a control unit, and the property constraints include at least one of a device type, a device size, a display direction, a device capability, and an interaction manner of the running device;
before setting the first attribute constraint condition of the first control unit in the initial layout text, the method further comprises:
detecting a third operation input by a user, wherein the third operation is an operation of selecting the first attribute constraint condition in the attribute window by the user;
wherein setting a first attribute constraint of the first control unit in the initial layout text comprises:
and according to the first attribute constraint condition selected by the user in the attribute window in the third operation, establishing a first corresponding relation between the first attribute constraint condition and the first control unit in the first layout file.
13. The method of claim 12, further comprising one or more property options in the property window, the property options comprising at least one of a width, a height, and a display position;
when a user selects a first attribute option from the one or more attribute options, the first corresponding relationship is a corresponding relationship between the first attribute constraint and the first attribute option of the first control unit.
14. The method according to claim 12, wherein the property window further includes one or more function items or function item groups, the function items include at least one layout capability of zooming, stretching, hiding, halving and folding, and the function item groups are layout capabilities formed by overlapping a plurality of the function items;
when a user selects a first function item in the one or more function items, the first corresponding relationship is a corresponding relationship among the first attribute constraint, the first function item and the first control unit; and/or the presence of a gas in the gas,
when a user selects a first function item group from the one or more function item groups, the first corresponding relationship is a corresponding relationship among the first attribute constraint, the first function item group and the first control unit.
15. The method according to any of claims 12-14, further comprising, after setting the first property constraint of the first control element:
establishing a second corresponding relation between a first preset algorithm and the first control unit in the first layout file;
the input parameter of the first preset algorithm is an equipment parameter which is acquired by running equipment of the first application and corresponds to the first attribute constraint condition, and the output parameter of the first preset algorithm is an attribute value of the first control unit.
16. The method according to any one of claims 11-15, wherein a control library and a view tree are provided in the development interface, wherein the control library comprises different types of control units, and the view tree is used for indicating structural relationships among the control units in the first display interface;
adding a first control unit in the initial layout file, wherein the adding of the first control unit in the initial layout file comprises:
adding a first control element selected by a user in the control library to a first position of the view tree.
17. The method according to any one of claims 11-16, wherein a preview window is provided in the development interface for simulating the first display interface presented when the first application is run; after adding the first control unit in the initial layout file, the method further comprises:
and displaying the first control unit in a first display interface of the preview window.
18. The method of any of claims 11-17, after setting the first property constraint for the first control element in the initial layout file, further comprising:
adding a second control unit in the initial layout file, wherein the second control unit is used for being displayed in the first display interface and is one of the N control units;
and setting a second attribute constraint condition of the second control unit in the initial layout text, wherein the attribute value of the second control unit is obtained by calculating the running equipment of the first application according to the second attribute constraint condition, and the attribute value of the second control unit is used for indicating the position and the size of the second control unit in the first display interface.
19. The method of any of claims 11-17, after setting the first property constraint for the first control element in the initial layout file, further comprising:
adding a third control unit in the initial layout file, wherein the third control unit is used for displaying in the first display interface and is one of the N control units;
setting an attribute value of the third control unit in the initial layout text, wherein the attribute value of the third control unit is used for indicating the position and the size of the third control unit in the first display interface.
20. An electronic device, comprising:
one or more processors;
a display screen;
a memory;
wherein the memory has stored therein one or more computer programs, the one or more computer programs comprising instructions, which when executed by the electronic device, cause the electronic device to perform the method of generating a layout file of any of claims 11-19.
21. A computer-readable storage medium having instructions stored therein, which when run on an electronic device, cause the electronic device to perform the method of generating a layout file of any of claims 11-19.
22. An operating device, comprising:
one or more processors;
a display screen;
a memory;
wherein the memory has stored therein one or more computer programs comprising instructions which, when executed by the execution apparatus, cause the execution apparatus to perform the method of layout of a display interface according to any one of claims 1 to 10.
CN202011583597.9A 2020-08-18 2020-12-28 Display interface layout method and electronic equipment Pending CN112698828A (en)

Priority Applications (4)

Application Number Priority Date Filing Date Title
CN202110586643.9A CN114077429A (en) 2020-08-18 2021-05-27 Display interface layout method and electronic equipment
EP21857527.2A EP4184314A4 (en) 2020-08-18 2021-08-09 Display interface layout method and electronic device
US18/022,090 US20230359447A1 (en) 2020-08-18 2021-08-09 Display Interface Layout Method and Electronic Device
PCT/CN2021/111594 WO2022037432A1 (en) 2020-08-18 2021-08-09 Display interface layout method and electronic device

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN2020108333821 2020-08-18
CN202010833382 2020-08-18

Publications (1)

Publication Number Publication Date
CN112698828A true CN112698828A (en) 2021-04-23

Family

ID=75513032

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202011583597.9A Pending CN112698828A (en) 2020-08-18 2020-12-28 Display interface layout method and electronic equipment

Country Status (1)

Country Link
CN (1) CN112698828A (en)

Cited By (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113687828A (en) * 2021-08-27 2021-11-23 北方工业大学 Method and device for designing interface of automatic interactive system
WO2022037432A1 (en) * 2020-08-18 2022-02-24 华为技术有限公司 Display interface layout method and electronic device
CN114895995A (en) * 2022-03-15 2022-08-12 网易(杭州)网络有限公司 Control view generation method and device, electronic equipment and readable medium
WO2022252040A1 (en) * 2021-05-31 2022-12-08 京东方科技集团股份有限公司 Configuration data packet and file generating method, processing method, device, and medium
CN117453323A (en) * 2023-04-13 2024-01-26 成都赛力斯科技有限公司 UI page drawing method, device, equipment and storage medium

Cited By (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2022037432A1 (en) * 2020-08-18 2022-02-24 华为技术有限公司 Display interface layout method and electronic device
WO2022252040A1 (en) * 2021-05-31 2022-12-08 京东方科技集团股份有限公司 Configuration data packet and file generating method, processing method, device, and medium
CN113687828A (en) * 2021-08-27 2021-11-23 北方工业大学 Method and device for designing interface of automatic interactive system
CN114895995A (en) * 2022-03-15 2022-08-12 网易(杭州)网络有限公司 Control view generation method and device, electronic equipment and readable medium
CN114895995B (en) * 2022-03-15 2024-03-15 网易(杭州)网络有限公司 Control view generation method and device, electronic equipment and readable medium
CN117453323A (en) * 2023-04-13 2024-01-26 成都赛力斯科技有限公司 UI page drawing method, device, equipment and storage medium

Similar Documents

Publication Publication Date Title
CN111324327B (en) Screen projection method and terminal equipment
CN112698828A (en) Display interface layout method and electronic equipment
CN111399789B (en) Interface layout method, device and system
US11538501B2 (en) Method for generating video, and electronic device and readable storage medium thereof
US20230359447A1 (en) Display Interface Layout Method and Electronic Device
CN109359262B (en) Animation playing method, device, terminal and storage medium
CN109977333B (en) Webpage display method and device, computer equipment and storage medium
CN108595239B (en) Picture processing method, device, terminal and computer readable storage medium
CN110321126B (en) Method and device for generating page code
CN108717365B (en) Method and device for executing function in application program
CN112116690B (en) Video special effect generation method, device and terminal
CN113467663B (en) Interface configuration method, device, computer equipment and medium
CN109902282B (en) Text typesetting method, text typesetting device and storage medium
CN112257006B (en) Page information configuration method, device, equipment and computer readable storage medium
CN112230907A (en) Program generation method, device, terminal and storage medium
CN113867848A (en) Method, device and equipment for calling graphic interface and readable storage medium
CN113409427A (en) Animation playing method and device, electronic equipment and computer readable storage medium
CN111125602A (en) Page construction method, device, equipment and storage medium
CN110889060A (en) Webpage display method and device, computer equipment and storage medium
CN111443858B (en) Display method, device, terminal and storage medium of application interface
CN112073768B (en) Bluetooth communication method and display device
CN114911478B (en) Page creation method and device, electronic equipment and storage medium
CN110990623A (en) Method and device for displaying audio subtitles, computer equipment and storage medium
CN112596810B (en) Loading prompt information display method and device, electronic equipment and storage medium
CN110045999B (en) Method, device, terminal and storage medium for drawing assembly

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
WD01 Invention patent application deemed withdrawn after publication

Application publication date: 20210423

WD01 Invention patent application deemed withdrawn after publication