CN111880889B - Interface display method and device, electronic equipment and storage medium - Google Patents
Interface display method and device, electronic equipment and storage medium Download PDFInfo
- Publication number
- CN111880889B CN111880889B CN202010803087.1A CN202010803087A CN111880889B CN 111880889 B CN111880889 B CN 111880889B CN 202010803087 A CN202010803087 A CN 202010803087A CN 111880889 B CN111880889 B CN 111880889B
- Authority
- CN
- China
- Prior art keywords
- view
- container
- interface
- display
- thread
- 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.)
- Active
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The application provides an interface display method, an interface display device, electronic equipment and a storage medium. Through the interface display method, the first thread is used for acquiring the hierarchical relationship among the view controls in the display interface, and the second thread is used for processing data processing operation irrelevant to acquiring the hierarchical relationship among the view controls in the display interface, so that the interference of the first thread is avoided. Because the drawing of the display interface depends on the hierarchical relation among the view controls, the fluency and the frame rate of the display process of the display interface can be improved by avoiding the interference of the second thread on the first thread, and then the phenomena of blocking, screen display and the like are reduced.
Description
Technical Field
The present invention relates to the field of computers, and in particular, to an interface display method, an interface display device, an electronic device, and a storage medium.
Background
With the popularization of intelligent devices, more and more intelligent devices start to be loaded with an Android system. When an application program with a display Interface is developed based on an Android system, a UI (User Interface) system based on Android is generally used.
However, under the Android native UI system, related operations such as construction of a display interface and drawing of the display interface and non-display interface operations are synchronously executed. Under the flow, the problems of unsmooth display process, low frame rate and the like of a display interface are easily caused, and the user experience is influenced.
Disclosure of Invention
To overcome at least one of the disadvantages in the prior art, an object of an embodiment of the present application is to provide an interface display method applied to an electronic device running an android system, where the electronic device is configured with a plurality of container components for organizing hierarchical relationships between view controls in a display interface, and the electronic device runs a first thread and a second thread, and the method includes:
analyzing an organization mode among the plurality of container components through the first thread to obtain a hierarchical relationship among view controls in the display interface;
and drawing according to the hierarchical relationship through the second thread to obtain view data of the display interface, and displaying the display interface into a screen according to the view data.
Optionally, at least one container component of the plurality of container components includes a view control in the display interface, wherein the plurality of container components are in a tree structure, and each container component includes a layout identifier, and the layout identifier is used for describing a layout style of a child container component of the container component when the container component is a parent container component;
analyzing, by the first thread, an organization manner among the plurality of container components to obtain a hierarchical relationship among view controls in the display interface, and further including:
traversing the container components, and determining the hierarchical relationship among the view controls in the display interface according to the tree-shaped connection relationship among the container components and the layout identification of each container component.
Optionally, the step of traversing the plurality of container components and determining a hierarchical relationship between view controls in the display interface according to a tree connection relationship between the plurality of container components and a layout identifier of each container component includes:
traversing the plurality of container components, determining to measure each view control according to the tree-shaped connection relation among the plurality of container components and the layout identification of each container component, and obtaining the size of each view control;
traversing the plurality of container components, and laying out each view control according to the tree-shaped connection relation among the plurality of container components and the layout identifier of each container component to obtain the position of each view control;
and obtaining the hierarchical relationship among the view controls according to the sizes of the view controls and the positions of the view controls.
Optionally, the container assembly further includes a dynamic control, the dynamic control binds at least one view control in the container assembly, the hierarchical relationship includes a position state of each view control in the display interface, and the method further includes:
aiming at the view control binding the dynamic control, acquiring a new position state of the view control after executing the corresponding dynamic change of the dynamic control through the first thread;
and obtaining a new hierarchical relationship according to the new position state of each view control.
Optionally, the step of obtaining, by the first thread, a new position state of the view control after the view control executes the dynamic change corresponding to the dynamic change includes:
acquiring a position offset which needs to occur after the view control executes the dynamic change corresponding to the dynamic effect control;
and obtaining a new position state of the view control according to the position offset based on the current position state of the view control.
Optionally, the step of drawing according to the hierarchical relationship by the second thread to obtain view data of the display interface and displaying the display interface into a screen according to the view data includes:
drawing according to the hierarchical relationship to obtain view data of a plurality of display interfaces, wherein each display interface comprises view controls with the same hierarchical relationship;
and sequentially displaying the display interfaces into the screen based on view data of the display interfaces.
A second object of the embodiment of the present application is to provide an interface display device, which is applied to an electronic device running an android system, where the electronic device is configured with a plurality of container components for organizing hierarchical relationships between view controls in a display interface, and the electronic device runs a first thread and a second thread, and the interface display device includes:
the view data module is used for analyzing the organization mode among the plurality of container components through the first thread to obtain the hierarchical relationship among view controls in the display interface;
and the interface display module is used for drawing according to the hierarchical relationship through the second thread, obtaining view data of the display interface and displaying the display interface into a screen according to the view data.
Optionally, at least a part of the container assemblies of the plurality of container assemblies comprise view controls in the display interface, wherein the container assemblies are in a tree structure, each container assembly comprises a layout identifier, the layout identifier is used for describing a layout style of a child container assembly of the container assembly when the container assembly is used as a parent container assembly, and the interface display module specifically comprises:
traversing the container components, and determining the hierarchical relationship among the view controls in the display interface according to the tree-shaped connection relationship among the container components and the layout identification of each container component.
It is a third object of embodiments of the present application to provide an electronic device, where the electronic device includes a processor and a memory, where the memory stores computer executable instructions that, when executed by the processor, implement the interface display method.
A fourth object of the embodiments of the present application is to provide a storage medium storing a computer program, which when executed by a processor, implements the interface display method.
Compared with the prior art, the application has the following beneficial effects:
the application provides an interface display method, an interface display device, electronic equipment and a storage medium. Through the interface display method, the first thread is used for acquiring the hierarchical relationship among the view controls in the display interface, and the second thread is used for processing data processing operation irrelevant to acquiring the hierarchical relationship among the view controls in the display interface, so that the interference of the first thread is avoided. Because the drawing of the display interface depends on the hierarchical relation among the view controls, the fluency and the frame rate of the display process of the display interface can be improved by avoiding the interference of the second thread on the first thread, and then the phenomena of blocking, screen display and the like are reduced.
Drawings
In order to more clearly illustrate the technical solutions of the embodiments of the present application, the drawings that are needed in the embodiments will be briefly described below, it being understood that the following drawings only illustrate some embodiments of the present application and therefore should not be considered limiting the scope, and that other related drawings may be obtained according to these drawings without inventive effort for a person skilled in the art.
Fig. 1 is a drawing flow under an Android native UI system provided in an embodiment of the present application;
fig. 2 is a drawing flow of an interface display method provided in an embodiment of the present application;
fig. 3 is a schematic structural diagram of an electronic device according to an embodiment of the present application;
FIG. 4 is a flowchart illustrating steps of an interface display method according to an embodiment of the present disclosure;
FIG. 5 is a schematic diagram of a hierarchical relationship of container components according to an embodiment of the present disclosure;
fig. 6 is a schematic diagram of a hierarchical relationship under the UI system of Android native provided in the embodiment of the present application;
FIG. 7 is a schematic diagram of memory consumption comparison provided in an embodiment of the present application;
FIG. 8 is a flowchart illustrating steps of a dynamic control provided in an embodiment of the present application;
fig. 9 is a sub-step of step S110 provided in the embodiment of the present application;
fig. 10 is a sub-step of step S130 provided in the embodiment of the present application;
FIG. 11 is a schematic diagram of a multi-display interface according to an embodiment of the present disclosure;
fig. 12 is a schematic structural diagram of an interface display device according to an embodiment of the present application.
Icon: 900-a first thread; 800-a second thread; 100-an electronic device; 110-an interface display device; 120-memory; 130-a processor; 500-root container assembly; 501-a first container assembly; 502-a second container assembly; 503-a third container assembly; 504-fourth container assembly; 700—current display interface; 701-a first interface to be displayed; 702-a second interface to be displayed; 1101-view data module; 1102-interface display module.
Detailed Description
For the purposes of making the objects, technical solutions and advantages of the embodiments of the present application more clear, the technical solutions of the embodiments of the present application will be clearly and completely described below with reference to the drawings in the embodiments of the present application, and it is apparent that the described embodiments are some embodiments of the present application, but not all embodiments. The components of the embodiments of the present application, which are generally described and illustrated in the figures herein, may be arranged and designed in a wide variety of different configurations.
Thus, the following detailed description of the embodiments of the present application, as provided in the accompanying drawings, is not intended to limit the scope of the application, as claimed, but is merely representative of selected embodiments of the application. All other embodiments, which can be made by one of ordinary skill in the art based on the embodiments herein without making any inventive effort, are intended to be within the scope of the present application.
It should be noted that: like reference numerals and letters denote like items in the following figures, and thus once an item is defined in one figure, no further definition or explanation thereof is necessary in the following figures.
In the description of the present application, it should be noted that the terms "first," "second," "third," and the like are used merely to distinguish between descriptions and are not to be construed as indicating or implying relative importance.
As described in the background art, under the Android native UI system, related operations such as measurement, layout and drawing of the display interface and non-display interface operations are synchronously executed. Under the flow, the problems of unsmooth display process, low frame rate, blocking, even screen display and the like of a display interface are easily caused, and the user experience is influenced.
Regarding the Android native UI architecture, details thereof are set forth below in connection with fig. 1. In the Android native UI system, the method sequentially comprises the steps of obtaining a vertical synchronous signal, measuring, laying out, drawing and the like.
In the step of vertical synchronizing signal, the vertical synchronizing signal is used for representing that the display interface in the screen needs to be updated, and in the step of measuring, the electronic equipment recursively traverses the view tree to obtain the size of each view control in the display interface. In the layout step, the electronic equipment recursively traverses the view tree to obtain the positions of the view controls in the interface to be displayed, including the absolute positions and the relative positions. The electronic device obtains the hierarchical relationship of the view controls in the display interface based on the sizes of the view controls and the positions of the view controls.
In the drawing step, the electronic equipment draws through a CPU or a GPU according to the hierarchical relation of each view control in the interface to be displayed to obtain view data of the display interface, and displays the view data into a screen. However, during the measurement, layout, and drawing steps, the electronic device may need to process some data processing operations unrelated to the display interface, which may cause a certain blockage to the measurement, layout, and drawing steps, resulting in problems of unsmooth display process, low frame rate, and the like of the display interface. This phenomenon is more pronounced, especially for some complex display interfaces.
In view of this, the embodiment of the present application provides an interface display method, which is used for improving the smoothness and frame rate of the display process of the display interface, and reducing the phenomena of blocking, screen display, and the like. The interface display method is applied to the electronic equipment running the android system, the electronic equipment is configured with a plurality of container components for organizing hierarchical relations among view controls in a display interface, and the electronic equipment runs a first thread and a second thread.
As a possible implementation, the principle of the interface display method is explained below in conjunction with fig. 1 and fig. 2. In the interface display method, measurement and layout operations in an Android native UI system are extracted as a first thread 900, and other steps in the Android native UI system are taken as a second thread 800. The two threads cooperate with each other, so that the operation irrelevant to measurement and layout in the second thread 800 does not affect the first thread 900, thereby achieving the purpose of improving the smoothness and frame rate of the display process of the display interface. Wherein, the operation irrelevant to measurement and layout can be, but is not limited to, obtaining text data to be presented from a server.
Referring to fig. 3, a schematic structural diagram of an electronic device 100 for executing the interface display method according to the present application is provided. The electronic device 100 may be, but is not limited to, a smart phone, a personal computer (personal computer, PC), a tablet computer, a personal digital assistant (personal digital assistant, PDA), a mobile internet device (mobile Internet device, MID), etc.
As shown in fig. 3, the electronic device 100 includes an interface display 110, a memory 120, and a processor 130. The memory 120, processor 130, and other elements are communicatively coupled, either directly or indirectly, to one another to enable transmission or interaction of data. For example, the components may be electrically connected to each other via one or more communication buses or signal lines. The interface display 110 includes at least one software function module that may be stored in the memory 120 in the form of software or Firmware (Firmware) or cured in an Operating System (OS) of the electronic device 100. The processor 130 is configured to execute executable modules stored in the memory 120, such as software functional modules and computer programs included in the interface display device 110. Wherein the interface display method is implemented when the computer executable instructions in the interface display device 110 are executed by the processor.
The Memory 120 may be, but is not limited to, a random access Memory (Random Access Memory, RAM), a Read Only Memory (ROM), a programmable Read Only Memory (Programmable Read-Only Memory, PROM), an erasable Read Only Memory (Erasable Programmable Read-Only Memory, EPROM), an electrically erasable Read Only Memory (Electric Erasable Programmable Read-Only Memory, EEPROM), etc. The memory 120 is configured to store a program, and the processor 130 executes the program after receiving an execution instruction. In the embodiment of the application, the processor may be a CPU or a GPU, which is used for rendering.
The processor 130 may be an integrated circuit chip with signal processing capabilities. The processor may be a general-purpose processor, including a central processing unit (Central Processing Unit, CPU for short), a network processor (Network Processor, NP for short), etc.; but also Digital Signal Processors (DSPs), application Specific Integrated Circuits (ASICs), field Programmable Gate Arrays (FPGAs) or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components. The disclosed methods, steps, and logic blocks in the embodiments of the present application may be implemented or performed. A general purpose processor may be a microprocessor or the processor may be any conventional processor or the like.
Referring to fig. 4, a flowchart of steps of the interface display method according to the embodiment of the present application is provided, and each step of the method is described in detail below with reference to fig. 4.
Step S100, through the first thread 900, the organization mode among the plurality of container components is analyzed to obtain the hierarchical relationship among the view controls in the display interface.
It should be appreciated that there are many ways to organize the view controls in the display interface. As one possible implementation, the embodiments organize the hierarchical relationship of view controls in a display interface through a container component. The hierarchical relationship mainly comprises the information of the size, the relative position, the absolute position and the like of each view control.
The view controls may be, but are not limited to, text controls, button controls, image controls, and the like.
Step S130, drawing according to the hierarchical relationship through the second thread 800, obtaining view data of the display interface, and displaying the display interface into a screen according to the view data.
Through the above interface display method, the first thread 900 is used to obtain the hierarchical relationship between the view controls in the display interface, and the second thread 800 is used to process the data processing operation unrelated to the hierarchical relationship between the view controls in the display interface, so as to avoid the interference to the first thread 900. Because the drawing of the display interface depends on the hierarchical relationship among the view controls, the smoothness and the frame rate of the display process of the display interface can be improved by avoiding the interference of the second thread 800 on the first thread 900, and then the phenomena of blocking, screen display and the like are reduced.
In addition, in consideration of the Android native UI system, more storage space is needed when the hierarchical relationship of view controls is organized, and flexibility is also lacking when the existing hierarchical relationship is adjusted. Accordingly, embodiments of the present disclosure organize hierarchical relationships of view controls in a display interface through a container component.
The organization method specifically comprises the following steps:
at least a portion of the plurality of container assemblies includes a view control in the display interface, wherein the plurality of container assemblies are in a tree structure, and each container assembly includes a layout identifier, and the layout identifier is used for describing a layout style of a child container assembly of the container assembly when the container assembly is used as a parent container assembly. Step S100 is described in detail below.
The electronic device 100 traverses the container components, and determines a hierarchical relationship between view controls in the display interface according to the tree connection relationship between the container components and the layout identifier of each container component.
The hierarchical relationship between the view controls specifically includes the size of each view control and the position of each view control. The electronic device 100 traverses the plurality of container components, determines to measure each view control according to the tree connection relationship among the plurality of container components and the layout identifier of each container component, and obtains the size of each view control; traversing the plurality of container components, and laying out each view control according to the tree-shaped connection relation among the plurality of container components and the layout identifier of each container component to obtain the position of each view control; and obtaining the hierarchical relationship among the view controls according to the sizes of the view controls and the positions of the view controls.
The manner in which the hierarchical relationships of the view controls are organized by the container component provided in the embodiments of the present application is described below in conjunction with fig. 5. As shown in fig. 5, which includes 5 containers constituting 3 levels. Wherein each "Cell" represents a container assembly, namely a root container assembly 500, a first container assembly 501, a second container assembly 502, a third container assembly 503, and a fourth container assembly 504.
The root container component 500 is arranged in a linear layout manner by a "linear layout" identifier that indicates that the view controls corresponding to the first container component 501 and the second container component 502 are in a linear layout; the second container component 502 is arranged in a manner that indicates the form layout of the view controls corresponding to the third container component 503 and the fourth container component 504 by the "form layout" identification.
The first container assembly 501 includes text controls, image controls and button controls, and then the first container assembly 501 displays text, images and buttons at corresponding positions in the interface to be displayed. Therefore, based on the container component provided by the embodiment of the application, a developer can flexibly organize the tree connection relationship between the container components to adapt to different hierarchical relationships between view controls, and add corresponding view controls into the container components according to the style requirements of the interface to be displayed.
Based on the above description of organizing the hierarchical relationship of each view control by the container assembly, when the electronic device 100 analyzes the organization manner among the container assemblies, from the root container assembly, sequentially traversing each container assembly according to the tree-like connection relationship among the container assemblies, determining the layout style of the sub container assembly according to the layout identifier in the container assembly, and combining the view controls included in each container assembly to obtain the hierarchical relationship of each view control.
It should be understood that when the hierarchical relationship of view controls is organized under the Android native UI system, a layout component needs to be declared first, and the controls in the layout component lay out the view controls in the layout component according to the layout mode of the layout component. Referring to fig. 6, in the Android native UI system provided in the embodiment of the present application, when the same hierarchical relationship as that of fig. 5 is implemented, the required organization method is required. As shown in fig. 6, in the Android native UI system, the layout components (linear layout components and frame layout components) need to occupy one hierarchy, so, compared with the container components in the application, when the same display interface is implemented, the hierarchical relationship between the view controls is more complex. And, the storage of layout components requires more storage space.
In addition, because a layout component needs to be declared first when the hierarchical relationship of view controls is organized under the Android native UI system, if the original layout mode needs to be changed (linear layout is changed into table layout), a developer needs to change the source code, modify the corresponding layout component in the source code (change the linear layout component into the table layout component), and adaptively adjust other parts of the code based on the modified layout component.
Therefore, through the container component provided by the embodiment of the application, the hierarchical relationship of each view control in the display interface can be changed only by changing the layout identifier in the container component, so that the flexibility of a developer in organizing the hierarchical relationship of the view controls can be improved.
When the dynamic layout function is realized, a plurality of redundant layout patterns are built in an application program without a UI system as in Android, and only the layout identification in the container is required to be changed, so that the corresponding layout pattern can be drawn according to the layout identification, and further, the consumption of the storage space caused by storing the redundant layout pattern can be avoided.
Therefore, through the interface display method, a developer can flexibly organize tree-shaped connection relations among container components to adapt to different hierarchical relations among view controls, and corresponding view controls are added into the tree-shaped connection relations according to style requirements of a display interface. In addition, through the layout identification in the container assembly, a developer can conveniently realize the change of the layout style, the development difficulty is reduced, and the flexibility degree in the development process is improved. Meanwhile, compared with the redundant layout style, the dynamic layout is realized, and the consumption of the storage space can be reduced through the layout identification in the container assembly.
Furthermore, unnecessary attributes and methods in view controls under the Android native UI system are removed by rewriting the view controls. Tests show that the container and the view control provided by the application can obviously reduce the consumption of storage space. See in particular the test comparison results shown in fig. 7. As shown in fig. 7, the consumption of storage space by a single container component, text control, image control, and layout component is included.
Wherein, a single text control occupies 812 bytes under the UI system of Android native. The visual control occupies 553 bytes. The layout component occupies 672 bytes. Whereas in the present embodiment, a single text control occupies 287 bytes. The image control occupies 245 bytes. The layout identifier occupies 205 bytes. Even if the container component and the view control mutually aggregate, the consumption of storage space is lower than that of the UI system which is native to Android.
Since the view controls in the display interface are organized by container, the electronic device 100 draws the view controls in the containers sequentially, starting from the root container component, at the time of drawing. The electronic device 100 draws the view controls in each container assembly according to the arrangement sequence of the view controls in each container assembly.
For example, a container component includes an image control and a text control, and the electronic device 100 draws the image control first and draws the text control based on the drawn image control. And when the text control is drawn, covering the drawn image control.
In view of the richness of display effects, the container assembly further includes a dynamic effect control. The dynamic effect control is used for supporting the dynamic effect of each view control in the container component. For example, the active control may provide movement, springback, rotation, scaling, time delay, display priority, and transparency change functions.
It should be appreciated that the electronic device 100 sequentially displays the view data of the multi-frame display interface on the screen to achieve the dynamic effect. However, before obtaining view data of the multi-frame display interface, the electronic device 100 needs to calculate a new position state of each view control in the display interface according to a specific dynamic effect to be achieved. In addition, the more complex the dynamic effect is, the larger the corresponding calculation amount is, so the electronic device 100 performs the calculation of the dynamic effect through the first thread 900, so that the second thread 800 can draw based on the new hierarchical relationship of each view control obtained by calculation of the first thread 900.
The active control binds at least one view control in the container assembly. Referring to fig. 8, before step S130, the interface display method further includes:
step S110, aiming at the view control binding the dynamic control, a new position state of the view control after the dynamic control is executed corresponding to the dynamic change is obtained through the first thread 900.
Step S120, a new hierarchical relationship is obtained according to the new position state of each view control.
Because the first thread 900 and the second thread 800 are executed in parallel, through the step of obtaining the new hierarchical relationship of each view control, the electronic device 100 calculates the hierarchical relationship of each view control of other display interfaces in the dynamic effect while drawing the current display interface through the second thread 800, so that when the next frame of display interface is displayed, the drawing is directly performed based on the new hierarchical relationship which has been calculated. Thus, the smoothness of the display interface can be improved.
In addition, the binding mode of the dynamic control and the view control is related. As one possible implementation, all view controls in the container component are made to exhibit the same dynamic effect by binding the attribute values in the dynamic control with the container component.
The electronic device 100 obtains a new position state after the dynamic effects of all view controls in the container component are transformed through the dynamic effects control, obtains a new hierarchical relationship based on the new position state, and draws a new display interface.
By the interface display method, testing is performed under the mobile terminal with the same hardware configuration parameters, and test results show that the frame dropping rate of the Android native UI system is reduced from 28% to 5% by the interface display method, so that the smoothness of a display interface can be obviously improved.
As another implementation, a plurality of dynamic effect controls are added in the container component, and each dynamic effect control is bound with different view controls through attribute values. The electronic device 100 provides dynamic effects corresponding to the bound dynamic effect controls for each view control through each dynamic effect control.
For example, taking a container component including an image control and a button control as an example, the image control is bound to a dynamic control providing a zoom function, and the button control is bound to a dynamic control providing a transparency change function. When the button is clicked, the transparency of the button is adjusted and the picture in the image control is scaled.
Referring to fig. 9 for a specific implementation of step S110, step S110 specifically includes:
step S110-1, obtaining the position offset which needs to occur after the view control executes the dynamic change corresponding to the dynamic effect control.
Step S110-2, based on the current position state of the view control, obtaining a new position state of the view control according to the position offset.
The dynamic control is a dynamic control which is bound with the image control and provides a dynamic effect of rotating the picture in the image control by 90 degrees. The electronic device 100 provides the view data of 9 display interfaces through the dynamic control to display sequentially, that is, the image rotates 10 ° in each display interface.
For each display interface, the electronic device 100 calculates an offset amount that needs to occur when the picture rotates by 10 °, and determines a new position state of the picture after the offset amount occurs based on the current position state of the picture.
It should be understood that in a general technical solution, when it is detected that a user needs to update content in a display screen, new data is acquired based on a view control displayed in the display screen, and a display interface is redrawn according to the new data to obtain new view data, and the new view data is displayed in the display screen. Therefore, more time is required to acquire new data, redraw according to the new data, and acquire new view data of a new display interface than to display the view data directly.
In view of this, since the plurality of interfaces to be displayed include the same view control, and the interface styles formed by the view controls in the respective interfaces to be displayed are the same, the difference is only that there is a difference in the data displayed in the respective interfaces to be displayed. One possible implementation of step S130 is described below with reference to fig. 10:
and step S130-1, drawing according to the hierarchical relationship to obtain view data of a plurality of display interfaces, wherein each display interface comprises view controls with the same hierarchical relationship.
Step S130-2, based on view data of the plurality of display interfaces, each display interface is sequentially displayed in a screen.
The electronic device 100 draws a plurality of interfaces to be displayed in advance based on the same interface style, and when a user updates the display content in the screen by sliding the screen, the user does not need to redraw each view control in the display interface again, and the view data drawn in advance can be directly displayed. Since the drawing step is not required to be waited for to acquire view data when updating the display interface of the display screen, the smooth feeling when sliding the screen can be improved.
The above steps will be exemplarily described with reference to fig. 11 by taking news application as an example. The electronic device 100 draws 2 to-be-displayed interfaces in advance, namely a first to-be-displayed interface 701 and a second to-be-displayed interface 702, except for the current display interface 700, based on the interface style formed by the controls with the same view, wherein the interface styles of the first to-be-displayed interface 701 and the second to-be-displayed interface 702 are the same, but news content displayed in the interfaces is different. When the user slides the screen upwards, the view data of the first display interface are directly displayed, so that the process of waiting for drawing is omitted, and the fluency feeling when the screen is slid can be improved.
It should be noted that, in the embodiment of the present application, based on the graphical interface frame formed by the container component and the view control, the ViewGroup component in the Android native UI system is developed, so that functions of key event dispatch, touch event dispatch and focus selection of the ViewGroup component are multiplexed.
Based on the same inventive concept, the application implementation further provides an interface display device 110, which is applied to the electronic equipment 100 running with the android system, wherein the electronic equipment 100 is configured with a plurality of container components for organizing hierarchical relationships among view controls in a display interface, and the electronic equipment 100 runs with a first thread 900 and a second thread 800. Referring to fig. 12, the interface display device 110 includes:
and the view data module 1101 is configured to parse the organization manner among the plurality of container components through the first thread 900 to obtain a hierarchical relationship among view controls in the display interface.
In the embodiment of the present application, regarding the view data module 1101 for performing step S100 in fig. 4, reference may be made to the detailed description of step S100 regarding the detailed description of the view data module 1101.
And the interface display module 1102 is configured to draw according to the hierarchical relationship through the second thread 800, obtain view data of the display interface, and display the display interface into a screen according to the view data.
In the embodiment of the present application, regarding the interface display module 1102 for executing step S130 in fig. 4, reference may be made to the detailed description of step S130 for the detailed description of the interface display module 1102.
Optionally, at least one container component of the plurality of container components includes a view control in the display interface, wherein the plurality of container components are in a tree structure, and each container component includes a layout identifier, and the layout identifier is used for describing a layout style of a child container component of the container component when the container component is a parent container component; the interface display module 1102 specifically includes:
traversing the container components, and determining the hierarchical relationship among the view controls in the display interface according to the tree-shaped connection relationship among the container components and the layout identification of each container component.
The embodiment of the application also provides a storage medium. The storage medium stores a computer program which, when executed by the processor 130, implements an interface display method.
In summary, according to the interface display method, the device, the electronic equipment and the storage medium, the first thread is used for acquiring the hierarchical relationship between the view controls in the display interface, and the second thread is used for processing the data processing operation irrelevant to the hierarchical relationship between the view controls in the display interface, so that the interference to the first thread is avoided. Because the drawing of the display interface depends on the hierarchical relation among the view controls, the fluency and the frame rate of the display process of the display interface can be improved by avoiding the interference of the second thread on the first thread, and then the phenomena of blocking, screen display and the like are reduced.
In the embodiments provided in the present application, it should be understood that the disclosed apparatus and method may be implemented in other manners as well. The apparatus embodiments described above are merely illustrative, for example, flow diagrams and block diagrams in the figures illustrate the architecture, functionality, and operation of possible implementations of apparatus, methods and computer program products according to various embodiments of the present application. In this regard, each block in the flowchart or block diagrams may represent a module, segment, or portion of code, which comprises one or more executable instructions for implementing the specified logical function(s). It should also be noted that in some alternative implementations, the functions noted in the block may occur out of the order noted in the figures. For example, two blocks shown in succession may, in fact, be executed substantially concurrently, or the blocks may sometimes be executed in the reverse order, depending upon the functionality involved. It will also be noted that each block of the block diagrams and/or flowchart illustration, and combinations of blocks in the block diagrams and/or flowchart illustration, can be implemented by special purpose hardware-based systems which perform the specified functions or acts, or combinations of special purpose hardware and computer instructions.
In addition, the functional modules in the embodiments of the present application may be integrated together to form a single part, or each module may exist alone, or two or more modules may be integrated to form a single part.
The functions, if implemented in the form of software functional modules and sold or used as a stand-alone product, may be stored in a computer-readable storage medium. Based on such understanding, the technical solution of the present application may be embodied essentially or in a part contributing to the prior art or in a part of the technical solution, in the form of a software product stored in a storage medium, including several instructions for causing a computer device (which may be a personal computer, a server, or a network device, etc.) to perform all or part of the steps of the methods described in the embodiments of the present application. And the aforementioned storage medium includes: a U-disk, a removable hard disk, a Read-Only Memory (ROM), a random access Memory (RAM, random Access Memory), a magnetic disk, or an optical disk, or other various media capable of storing program codes.
It is noted that relational terms such as first and second, and the like are used solely to distinguish one entity or action from another entity or action without necessarily requiring or implying any actual such relationship or order between such entities or actions. Moreover, the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or apparatus. Without further limitation, an element defined by the phrase "comprising one … …" does not exclude the presence of other like elements in a process, method, article, or apparatus that comprises the element.
The foregoing is merely various embodiments of the present application, but the scope of the present application is not limited thereto, and any person skilled in the art can easily think about changes or substitutions within the technical scope of the present application, and the changes and substitutions are intended to be covered in the scope of the present application. Therefore, the protection scope of the present application shall be subject to the protection scope of the claims.
Claims (8)
1. An interface display method, applied to an electronic device running an android system, the electronic device being configured with a plurality of container components for organizing hierarchical relationships between view controls in a display interface, at least some of the plurality of container components including the view controls in the display interface, the plurality of container components being in a tree structure, each of the container components including a layout identifier for describing a layout style of a child container component of the container component when the container component is a parent container component, the electronic device running a first thread and a second thread, the method comprising:
traversing the container components, and determining the hierarchical relationship among view controls in the display interface according to the tree-shaped connection relationship among the container components and the layout identification of each container component;
and drawing according to the hierarchical relationship through the second thread to obtain view data of the display interface, and displaying the display interface into a screen according to the view data.
2. The interface display method according to claim 1, wherein the step of traversing the plurality of container components to determine a hierarchical relationship between view controls in the display interface according to a tree connection relationship between the plurality of container components and a layout identifier of each container component comprises:
traversing the plurality of container components, determining to measure each view control according to the tree-shaped connection relation among the plurality of container components and the layout identification of each container component, and obtaining the size of each view control;
traversing the plurality of container components, and laying out each view control according to the tree-shaped connection relation among the plurality of container components and the layout identifier of each container component to obtain the position of each view control;
and obtaining the hierarchical relationship among the view controls according to the sizes of the view controls and the positions of the view controls.
3. The interface display method of claim 2, wherein the container assembly further comprises a dynamic control that binds at least one view control in the container assembly, the method further comprising:
aiming at the view control binding the dynamic control, acquiring a new position state of the view control after executing the corresponding dynamic change of the dynamic control through the first thread;
and obtaining a new hierarchical relationship according to the new position state of each view control.
4. The interface display method according to claim 3, wherein the step of obtaining, by the first thread, a new position state of the view control after the view control performs the dynamic change corresponding to the dynamic change includes:
acquiring a position offset which needs to occur after the view control executes the dynamic change corresponding to the dynamic effect control;
and obtaining a new position state of the view control according to the position offset based on the current position state of the view control.
5. The interface display method according to claim 1, wherein the steps of drawing, by the second thread, according to the hierarchical relationship, obtaining view data of the display interface, and displaying the display interface into a screen according to the view data, include:
drawing according to the hierarchical relationship to obtain view data of a plurality of display interfaces, wherein each display interface comprises view controls with the same hierarchical relationship;
and sequentially displaying the display interfaces into the screen based on view data of the display interfaces.
6. An interface display device, characterized in that it is applied to an electronic device running an android system, the electronic device is configured with a plurality of container components for organizing hierarchical relationships between view controls in a display interface, at least some of the plurality of container components include view controls in the display interface, the plurality of container components are in a tree structure, each container component includes a layout identifier for describing a layout style of a child container component of the container component when the container component is a parent container component, and the electronic device runs a first thread and a second thread, and the interface display device includes:
the view data module is used for traversing the plurality of container components and determining the hierarchical relationship among view controls in the display interface according to the tree-shaped connection relationship among the plurality of container components and the layout identification of each container component;
and the interface display module is used for drawing according to the hierarchical relationship through the second thread, obtaining view data of the display interface and displaying the display interface into a screen according to the view data.
7. An electronic device comprising a processor and a memory storing computer executable instructions that when executed by the processor implement the interface display method of any one of claims 1-5.
8. A storage medium storing a computer program which, when executed by a processor, implements the interface display method according to any one of claims 1 to 5.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010803087.1A CN111880889B (en) | 2020-08-11 | 2020-08-11 | Interface display method and device, electronic equipment and storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010803087.1A CN111880889B (en) | 2020-08-11 | 2020-08-11 | Interface display method and device, electronic equipment and storage medium |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN111880889A CN111880889A (en) | 2020-11-03 |
| CN111880889B true CN111880889B (en) | 2023-08-08 |
Family
ID=73203512
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010803087.1A Active CN111880889B (en) | 2020-08-11 | 2020-08-11 | Interface display method and device, electronic equipment and storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111880889B (en) |
Families Citing this family (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113687815B (en) * | 2021-09-07 | 2024-03-15 | 网易（杭州）网络有限公司 | Method and device for processing dynamic effects of multiple components in container, electronic equipment and storage medium |
Citations (12)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101499099A (en) * | 2009-03-23 | 2009-08-05 | 深圳市金蝶中间件有限公司 | Method and system for WEB page layout |
| CN102141894A (en) * | 2011-05-12 | 2011-08-03 | 北京瑞信在线系统技术有限公司 | User interface displaying method and device |
| CN104516727A (en) * | 2013-09-27 | 2015-04-15 | 国际商业机器公司 | Method and system for changing resource in resource file |
| CN105912313A (en) * | 2015-12-28 | 2016-08-31 | 乐视致新电子科技（天津）有限公司 | Method and device for displaying animation of view, and terminal device |
| CN106503041A (en) * | 2016-09-19 | 2017-03-15 | 曙光信息产业(北京)有限公司 | Page layout self-adaptive method and system |
| CN107656759A (en) * | 2017-09-04 | 2018-02-02 | 口碑(上海)信息技术有限公司 | A kind of rendering intent and device for user interface |
| CN108334386A (en) * | 2017-01-20 | 2018-07-27 | 阿里巴巴集团控股有限公司 | A kind of layout method and system of view component |
| CN108419114A (en) * | 2018-01-18 | 2018-08-17 | 海尔优家智能科技（北京）有限公司 | A kind of UI interface display methods, device and storage medium for smart television |
| CN108780401A (en) * | 2016-05-17 | 2018-11-09 | 谷歌有限责任公司 | The layout system based on constraint of efficient layout and control for user interface element |
| CN109542543A (en) * | 2017-09-21 | 2019-03-29 | 腾讯科技（深圳）有限公司 | Application page surface treatment method, apparatus, storage medium and computer equipment |
| CN109782983A (en) * | 2017-11-13 | 2019-05-21 | 腾讯科技（深圳）有限公司 | The view layout method of adjustment and device of Application Program Interface |
| CN111258467A (en) * | 2020-01-07 | 2020-06-09 | 腾讯科技（深圳）有限公司 | Interface display method and device, computer equipment and storage medium |
Family Cites Families (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US6765597B2 (en) * | 2001-04-19 | 2004-07-20 | International Business Machines Corporation | System and method for using layer bars to indicate levels within non-indented tree view control |
-
2020
- 2020-08-11 CN CN202010803087.1A patent/CN111880889B/en active Active
Patent Citations (12)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101499099A (en) * | 2009-03-23 | 2009-08-05 | 深圳市金蝶中间件有限公司 | Method and system for WEB page layout |
| CN102141894A (en) * | 2011-05-12 | 2011-08-03 | 北京瑞信在线系统技术有限公司 | User interface displaying method and device |
| CN104516727A (en) * | 2013-09-27 | 2015-04-15 | 国际商业机器公司 | Method and system for changing resource in resource file |
| CN105912313A (en) * | 2015-12-28 | 2016-08-31 | 乐视致新电子科技（天津）有限公司 | Method and device for displaying animation of view, and terminal device |
| CN108780401A (en) * | 2016-05-17 | 2018-11-09 | 谷歌有限责任公司 | The layout system based on constraint of efficient layout and control for user interface element |
| CN106503041A (en) * | 2016-09-19 | 2017-03-15 | 曙光信息产业(北京)有限公司 | Page layout self-adaptive method and system |
| CN108334386A (en) * | 2017-01-20 | 2018-07-27 | 阿里巴巴集团控股有限公司 | A kind of layout method and system of view component |
| CN107656759A (en) * | 2017-09-04 | 2018-02-02 | 口碑(上海)信息技术有限公司 | A kind of rendering intent and device for user interface |
| CN109542543A (en) * | 2017-09-21 | 2019-03-29 | 腾讯科技（深圳）有限公司 | Application page surface treatment method, apparatus, storage medium and computer equipment |
| CN109782983A (en) * | 2017-11-13 | 2019-05-21 | 腾讯科技（深圳）有限公司 | The view layout method of adjustment and device of Application Program Interface |
| CN108419114A (en) * | 2018-01-18 | 2018-08-17 | 海尔优家智能科技（北京）有限公司 | A kind of UI interface display methods, device and storage medium for smart television |
| CN111258467A (en) * | 2020-01-07 | 2020-06-09 | 腾讯科技（深圳）有限公司 | Interface display method and device, computer equipment and storage medium |
Also Published As
| Publication number | Publication date |
|---|---|
| CN111880889A (en) | 2020-11-03 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN106570098B (en) | Page refreshing method and device | |
| US8365086B2 (en) | System and method for building graphical instrument panels | |
| CN109893852B (en) | Interface information processing method and device | |
| CN109725803B (en) | Comment information processing method and device, storage medium and electronic equipment | |
| AU2014308633B2 (en) | Swipe toolbar to switch tabs | |
| CN109782977B (en) | View processing method, electronic device and storage medium | |
| US9671926B2 (en) | Method and terminal device for displaying dynamic icon | |
| WO2016192546A1 (en) | Method and device for updating data point of dynamic curve | |
| CN107831965B (en) | Information display method and device | |
| CN111880889B (en) | Interface display method and device, electronic equipment and storage medium | |
| CN110633220A (en) | Debugging information display method and device, storage medium and electronic equipment | |
| CN107621951B (en) | View level optimization method and device | |
| CN113434138A (en) | Information display method and device and electronic equipment | |
| CN117093244A (en) | Dynamic release method, device, equipment and system for function items on APP | |
| US20100192074A1 (en) | Pluggable margin extension | |
| CN111324845A (en) | Method and system for constructing dial plate object | |
| CN112433723B (en) | Personalized list development method and device | |
| EP3298507A1 (en) | Document presentation qualified by conditions evaluated on rendering | |
| CN113742432A (en) | Editable ER graph generation method and device | |
| CN112367295A (en) | Plug-in display method and device, storage medium and electronic equipment | |
| US10997341B1 (en) | System editing plugin | |
| CN117519560A (en) | Interface display method, electronic device, and computer-readable medium | |
| CN109783100B (en) | Method and device for checking user interface element attribute and electronic equipment | |
| CN114546199B (en) | Image processing method, device, electronic equipment and storage medium | |
| CN113835791B (en) | Method and apparatus for presenting hierarchical relationships of view components |
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 | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |