CN111880792B

CN111880792B - User interface implementation method, mobile terminal and computer readable storage medium

Info

Publication number: CN111880792B
Application number: CN202010682960.6A
Authority: CN
Inventors: 郭子亮
Original assignee: Guangdong Oppo Mobile Telecommunications Corp Ltd; Shenzhen Huantai Technology Co Ltd
Current assignee: Guangdong Oppo Mobile Telecommunications Corp Ltd; Shenzhen Huantai Technology Co Ltd
Priority date: 2020-07-15
Filing date: 2020-07-15
Publication date: 2024-05-14
Anticipated expiration: 2040-07-15
Also published as: CN111880792A

Abstract

The application discloses a user interface realization method, a mobile terminal and a computer readable storage medium. The implementation method comprises the following steps: acquiring a device identifier and a user interface drawing instruction; responding to a user interface drawing instruction to obtain a common drawing resource and a common logic chain, placing the common drawing resource on a corresponding node on the common logic chain, obtaining a difference drawing resource and a difference logic chain of corresponding user equipment, and placing the difference drawing resource on a corresponding node on the difference logic chain; the UI visual effect is rendered based on a common logical chain that houses common rendering resources, and a differential logical chain that houses differential rendering resources. Through the mode, the method and the device can effectively avoid maintenance of multiple sets of codes, and the requirements of different types of equipment on different UI visual effects can be met by only adopting one set of codes.

Description

User interface implementation method, mobile terminal and computer readable storage medium

Technical Field

The present application relates to the field of user interfaces, and in particular, to a method for implementing a user interface, a mobile terminal, and a computer readable storage medium.

Background

Along with the development of communication technology, a User Interface becomes an important human-computer interaction channel, a User Interface (UI) of a mobile terminal is also widely used, and along with the arrival of an information age, personalized customization of the User Interface for the mobile terminal takes up a more important position.

In the process of drawing the UI by the mobile terminal, aiming at different types of equipment, the same control often realizes different UI drawing effects through different codes. Due to the different device types, the various control types and the like, a plurality of sets of codes need to be written to realize different UI drawing effects, the cost for maintaining the plurality of sets of codes is increased, and when the plurality of sets of devices need to be logically added and modified, the development amount tends to be multiplied.

Disclosure of Invention

The application provides a user interface realization method, a mobile terminal and a computer readable storage medium, which are used for solving the problems of high cost and excessive development amount of maintaining a plurality of sets of codes at present.

A first aspect of an embodiment of the present application provides a method for implementing a user interface, where the implementing method includes: acquiring a device identifier and a user interface drawing instruction; responding to a user interface drawing instruction to obtain a common drawing resource and a common logic chain, placing the common drawing resource on a corresponding node on the common logic chain, obtaining a difference drawing resource and a difference logic chain of corresponding user equipment, and placing the difference drawing resource on a corresponding node on the difference logic chain; the UI visual effect is rendered based on a common logical chain that houses common rendering resources, and a differential logical chain that houses differential rendering resources.

A second aspect of an embodiment of the present application provides a mobile terminal, including: the acquisition module is used for acquiring the equipment identifier and the user interface drawing instruction; the processing module is used for responding to the user interface drawing instruction to obtain the common drawing resources and the common logic chains, placing the common drawing resources on the corresponding nodes on the common logic chains, obtaining the difference drawing resources and the difference logic chains of the corresponding user equipment, and placing the difference drawing resources on the corresponding nodes on the difference logic chains; and the drawing module is used for drawing the UI visual effect based on a common drawing logic chain for placing the common drawing resources and a difference logic chain for placing the difference drawing resources.

A third aspect of an embodiment of the present application provides a mobile terminal, including: a processor, a memory and a computer program stored in the memory and running on the processor, the processor being configured to execute the computer program to implement the method provided by the first aspect of the embodiment of the present application.

A fourth aspect of the embodiments of the present application provides a computer readable storage medium storing a computer program which, when executed by a processor, is capable of implementing the method provided by the first aspect of the embodiments of the present application.

The beneficial effects of the application are as follows: different from the prior art, the method and the device are respectively provided with the common logic chain and the differential logic chain aiming at the commonality and the diversity of the UI visual effects of a plurality of user equipment, the common logic chain is adopted for realizing the placement of the common drawing resources for the same logic of the user equipment, the differential logic chain is adopted for realizing the placement of the differential drawing resources for the personalized differential drawing resources, and the UI visual effects are jointly drawn based on the common logic chain for placing the common drawing resources and the differential logic chain for placing the differential drawing resources. Through the mode, maintenance of multiple sets of codes can be effectively avoided, and the requirements of different types of equipment on different UI visual effects can be met by only adopting one set of codes.

Drawings

In order to more clearly illustrate the technical solutions of the embodiments of the present application, the drawings required for the description of the embodiments will be briefly described below, and it is apparent that the drawings in the following description are only some embodiments of the present application, and other drawings may be obtained according to these drawings without inventive effort for a person skilled in the art.

FIG. 1 is a flow chart of a first embodiment of a method of implementing a user interface of the present application;

FIG. 2 is a flow chart of an embodiment of step S12 shown in FIG. 1;

FIG. 3 is a flowchart of a specific embodiment of the step S21 shown in FIG. 2;

FIG. 4 is a flowchart of a specific embodiment of the step S24 shown in FIG. 2;

FIG. 5 is a flow chart of another embodiment of step S23 shown in FIG. 2;

FIG. 6 is a diagram of multiple devices implementing different UI visual effects for the same control in a conventional approach;

FIG. 7 is a diagram of a referencing relationship between a common attribute, a common implementation, and a plurality of devices;

FIG. 8 is a diagram of a software toolkit, proxy module, and difference module versus multiple device implementations;

FIG. 9 is a timing diagram of execution of a draw command by a device when drawing a UI visual effect;

FIG. 10 is a diagram of the present application implementing different UI visual effects on the same control for multiple devices;

FIG. 11 is a schematic block diagram of one embodiment of a mobile terminal of the present application;

FIG. 12 is a schematic block diagram of another embodiment of a mobile terminal of the present application;

FIG. 13 is a schematic block diagram of one embodiment of a computer readable storage medium of the present application;

fig. 14 is a schematic diagram of a mobile terminal frame of the present application.

Detailed Description

In the following description, for purposes of explanation and not limitation, specific details are set forth such as the particular system architecture, techniques, etc., in order to provide a thorough understanding of the embodiments of the present application. It will be apparent, however, to one skilled in the art that the present application may be practiced in other embodiments that depart from these specific details. In other instances, detailed descriptions of well-known systems, devices, circuits, and methods are omitted so as not to obscure the description of the present application with unnecessary detail.

It should be understood that the terms "comprises" and/or "comprising," when used in this specification and the appended claims, specify the presence of stated features, integers, steps, operations, elements, and/or components, but do not preclude the presence or addition of one or more other features, integers, steps, operations, elements, components, and/or groups thereof.

It is also to be understood that the terminology used in the description of the application herein is for the purpose of describing particular embodiments only and is not intended to be limiting of the application. As used in this specification and the appended claims, the singular forms "a," "an," and "the" are intended to include the plural forms as well, unless the context clearly indicates otherwise.

It should be further understood that the term "and/or" as used in the present specification and the appended claims refers to any and all possible combinations of one or more of the associated listed items, and includes such combinations.

As used in this specification and the appended claims, the term "if" may be interpreted as "when..once" or "in response to a determination" or "in response to detection" depending on the context. Similarly, the phrase "if a determination" or "if a [ described condition or event ] is detected" may be interpreted in the context of meaning "upon determination" or "in response to determination" or "upon detection of a [ described condition or event ]" or "in response to detection of a [ described condition or event ]".

In order to illustrate the technical scheme of the application, the following description is made by specific examples.

Referring to fig. 1, fig. 1 is a flowchart of a first embodiment of a method for implementing a user interface according to the present application. The method provided by the embodiment specifically comprises the following steps:

S11: acquiring a device identifier and a user interface drawing instruction;

For the embodiment of the application, the user equipment is provided with an external interface for embedding a developed software development kit (Software Development Kit, SDK), the user equipment is internally provided with an internal interface which is butted with the external interface, and after the SDK is embedded into the user equipment, a user interface drawing command can be obtained through the internal interface corresponding to the SDK, and the equipment identifier is identified.

The user equipment may be a mobile terminal, a tablet computer, a notebook computer, a wearable device, etc., which is not limited herein, and the mobile terminal is taken as an example in this embodiment. That is, the mobile terminal is provided with an external interface for embedding the developed SDK, the mobile terminal is provided with an internal interface interfacing with the external interface, and when the SDK is embedded into the mobile terminal, a user interface drawing command can be obtained through the internal interface corresponding to the SDK, and the device identifier is identified.

In addition, when the mobile terminal is provided with a programming interface acquisition function, the device identification and the user interface drawing instruction can also be acquired through acquisition of the programming interface. Of course, the device identification and user interface drawing instructions may be obtained by other means known to those skilled in the art.

S12: responding to a user interface drawing instruction to obtain a common drawing resource and a common logic chain, placing the common drawing resource on a corresponding node on the common logic chain, obtaining a difference drawing resource and a difference logic chain of corresponding user equipment, and placing the difference drawing resource on a corresponding node on the difference logic chain;

The common drawing resources represent non-exclusive control resources, and based on the android system, as the logic rules are approximately consistent, the common drawing resources can be the type of the device, the UI style of the device, the UI theme of the logic trigger rule, the visual effect of the representation, an application programming interface (Application Programming Interface, API) and the like, and represent that the underlying logic and codes are basically consistent. The common logical chain represents the order, timing or flow of installing the common drawing resources, such as by a developer's discussion, unifying the regulatory revision criteria, and placing the common drawing resources onto the various logical nodes. The difference drawing resources represent the individuality and configuration of each device, such as interface colors, different colors are called, the visual effects of the presented UI are different, such as round or square icon corners, the selected difference drawing resources are different, and the visual effects of the presented UI are different. The difference logic chain indicates the sequence, time sequence or flow of installing the difference drawing resources, such as through personalized formulation of the devices, and each common logic chain node can present different resource configurations, so that the UI visual effects presented by different devices are different.

The shared drawing resource, the shared logic chain, the differential drawing resource and the differential logic chain can be packaged in one SDK for the mobile terminal to call and configure.

Therefore, after the user equipment acquires the equipment identifier and the user interface drawing instruction, the user interface drawing instruction can be responded to acquire the common drawing resource and the common logic chain, and the common drawing resource is placed on the corresponding node on the common logic chain, wherein the common logic chain is a logic chain unified by all the user equipment, and all the user equipment can perform logic execution according to the common logic chain.

And responding to the user interface drawing instruction to obtain a difference drawing resource and a difference logic chain of the corresponding user equipment, and placing the difference drawing resource on a corresponding node on the difference logic chain.

S13: the UI visual effect is rendered based on a common rendering logical chain that houses common rendering resources, and a differential logical chain that houses differential rendering resources.

The common drawing resources are placed through the common logic chain, and then the common drawing resources can be placed on the corresponding nodes on the common logic chain; by placing the difference drawing resources through the difference logic chain, the difference drawing resources can be placed on the corresponding nodes on the difference logic chain.

Based on the common logical chain of placing common drawing resources and the differential logical chain of placing differential drawing resources, personalized UI visual effects can be drawn.

Therefore, a common logic chain and a differential logic chain are respectively set for commonality and diversity of UI visual effects of a plurality of user equipment, common logic chains are adopted for realizing placement of common drawing resources for the same logic of the user equipment, and differential logic chains are adopted for realizing placement of differential drawing resources for personalized differential drawing resources, and the UI visual effects are jointly drawn based on the common logic chains for placing the common drawing resources and the differential logic chains for placing the differential drawing resources. Through the mode, maintenance of multiple sets of codes can be effectively avoided, and the requirements of different types of equipment on different UI visual effects can be met by only adopting one set of codes.

Referring to fig. 2, fig. 2 is a flow chart of an embodiment of step S12 shown in fig. 1, including the following steps:

S21: the method comprises the steps that common drawing resources and difference drawing resources corresponding to equipment identifiers are obtained from an inheritance module, and the inheritance module can obtain the common drawing resources and the difference drawing resources of different user equipment for user interface drawing;

The inheritance module is similar to a subclass, and the idea of the inheritance module is to provide the same parent class for reducing the repeated occurrence of common problems, so that other objects have all public resources and attributes of the parent class, and the subclass can realize the public resources and attributes by itself without affecting other subclass objects.

The inheritance module is used as one module in the SDK, and can be used for the user equipment to acquire the common drawing resources and the difference drawing resources of the corresponding equipment identifiers, and the inheritance module can be used for acquiring the common drawing resources and the difference drawing resources of different user equipment for user interface drawing, so that the common drawing resources and the difference drawing resources of the corresponding equipment identifiers can be acquired from the inheritance module.

S22: the common logic module integrates common logic implementation which is executed by different user equipment for user interface drawing UI visual effects;

Because the drawing resources and the logic implementation are divided and assisted, and the shared logic chains are stored in the shared logic modules, the shared logic chains can be acquired from the shared logic modules, and the shared logic modules integrate the shared logic implementation which is executed by different user equipment for user interface drawing UI visual effects.

S23: executing the common logic implementation according to the common logic chain to place the common drawing resources on the corresponding nodes on the common logic chain;

When the shared drawing resource and the shared logic chain corresponding to the device identifier are obtained from the inheritance module, the shared logic implementation can be executed according to the shared logic chain, so that the shared drawing resource is placed on the corresponding node on the shared logic chain.

S24: based on the agent module, acquiring a difference logic chain corresponding to the equipment identifier from the difference module, wherein the agent module is used for calling the difference logic chain of the difference drawing resources different from other user equipment, and the difference module integrates the difference logic realization of the UI visual effect drawn by different user equipment;

The difference logic chain is different from user equipment to user equipment, so that the individualization can be performed by using a proxy module, wherein the proxy module is used for inserting a proxy object between the actual object and the caller in order to provide additional processing or different operations. The agent module defines a template variable, which can be instantiated into templates of different specific implementations according to different devices. All of these templates, specific implementations of templates, and agents may be packaged within one SDK. Thus, the proxy module may be used to invoke a differential logic chain of differential rendering resources that is distinct from other user devices.

The difference module stores the difference logic chains and integrates the difference logic implementation of the UI visual effect drawn by different user equipment, so that the difference logic chains corresponding to the equipment identifiers can be obtained from the difference module based on the agent module.

S25: and executing the differential logic implementation according to the differential logic chain to place the differential drawing resource on the corresponding node on the differential logic chain.

After common logic implementation is performed according to the common logic chain so as to place the common drawing resources on the corresponding nodes on the common logic chain, the controls on the common logic chain are determined, and the personalized configuration of the specific controls is that the placement of the different drawing resources is performed.

When the difference logic chain corresponding to the equipment identifier is obtained from the user equipment, the difference logic implementation can be executed according to the difference logic chain, so that the difference drawing resources are placed on the corresponding nodes on the difference logic chain, namely, the personalized configuration of the controls on the common logic chain is selected in a differentiated mode.

Referring to fig. 3, fig. 3 is a flowchart of an embodiment of step S21 shown in fig. 2, including the following steps:

S31: based on the user interface drawing instruction and the inheritance module, a common drawing resource calling instruction is sent to the common module, and the common module can acquire common drawing resources and differential drawing resources;

The common drawing resources and the differential drawing resources of the user equipment are stored in a drawing resource library of the user equipment, and the common module can acquire the common drawing resources and the differential drawing resources from the drawing resource library after receiving the common resource calling instruction.

The common drawing resources comprise a plurality of common drawing resource packages corresponding to different controls, each common drawing resource comprises a difference drawing resource, the difference drawing resources mean that corresponding control UI visual effects are different, and for the same control, more control UI visual effects can be configured as more different drawing resources are selected.

The shared module is a guide for storing the drawing resources and can acquire the drawing resources in the drawing resource library, so that the shared module can call the shared drawing resources and the differential drawing resources, and the inheritance module inherits from the shared module, so that the inheritance module can call the shared drawing resources and the differential drawing resources, and therefore when the equipment identifier and the user interface drawing instruction are acquired, the shared drawing resource calling instruction can be sent to the shared module based on the user interface drawing instruction and the inheritance module so as to call the shared drawing resources and the differential drawing resources.

S32: the user equipment receives a drawing resource calling instruction through a shared module;

Through the transmission of the drawing resource calling instruction by the plurality of modules, the user equipment can receive the drawing resource calling instruction through the sharing module, and the sharing module can acquire the sharing drawing resource and the difference drawing resource from the drawing resource library.

S33: executing a drawing resource calling instruction callback based on the drawing resource calling instruction so as to store the common drawing resource and the difference drawing resource in the inheritance module;

After the sharing module obtains the sharing drawing resources and the difference drawing resources from the drawing resource library, the user equipment is indicated to complete the instruction of drawing resource calling through the sharing module, and based on the drawing resource calling instruction, a drawing resource calling instruction callback can be executed, and the sharing drawing resources and the difference drawing resources are sent to the inheritance module so as to store the sharing drawing resources and the difference drawing resources in the inheritance module.

Referring to fig. 4, fig. 4 is a flowchart of an embodiment of step S24 shown in fig. 2, including the following steps:

S41: unpacking the common drawing resources on the nodes corresponding to the common logic chain to obtain a plurality of different drawing resource packages, wherein the nodes corresponding to the common logic chain are equipment controls;

for the mobile terminal, the common drawing resource at least comprises one of equipment type, equipment UI style, logic triggering rule and equipment API, and the corresponding nodes on the common logic chain are equipment controls, namely a plurality of corresponding equipment controls in the user UI visual effect. For example, the device type may be a drawing resource packet formed by a common drawing resource, and the logic trigger rule and the device API may also be drawing resource packets formed by another two common drawing resources, where the contents of the drawing resource packets are different according to different user devices, that is, the common drawing resource packet corresponding to each control.

Therefore, by placing the common logical link, the common drawing resources composed of such drawing resource packages can be placed on each corresponding logical node, and therefore, the common drawing resources on the corresponding nodes on the common logical link can be unpacked, and a plurality of differential drawing resource packages can be obtained.

S42: according to the difference logic chain, the difference logic implementation is carried out on the plurality of difference drawing resource packages through the difference module, so that the plurality of difference drawing resource packages are placed on corresponding nodes on the difference logic chain, and different configuration effects of the equipment control are achieved on the corresponding nodes on the difference logic chain.

The difference drawing resource at least comprises one of enlargement or abbreviation of an icon, clipping or enlargement of a number, size of a character, color shading, a graphic fillet or a square corner. For example, the color of one logic node on the common logic chain is blue, but the difference is a bright blue and a dark blue, so that the difference drawing resource of the point is also the bright blue and the dark blue, and likewise, on other logic nodes on the common logic chain, the enlargement or abbreviation of the icon, the cutting or enlargement of the number, the size of the text, the color brightness, the graphic round angle or the square angle can all form a plurality of difference drawing resource packages on different logic nodes on the common logic chain, namely, different configuration effects of the equipment control on the corresponding nodes on the difference logic chain.

According to the difference logic chain, the difference logic implementation is carried out on the plurality of difference drawing resource packages, and the plurality of difference drawing resource packages can be placed on corresponding nodes on the difference logic chain.

Referring to fig. 5, fig. 5 is a flowchart of another embodiment of step S23 shown in fig. 2, including the following steps:

s51: sending a difference logic chain implementation instruction corresponding to the equipment identifier to the difference module through the proxy module;

the proxy module determines how and how many of the differential rendering resources are to be placed for multiple differential rendering resource packages on different logical nodes on the common logical chain due to its attribute of invoking differential logic.

The agent module sends a difference logic chain implementation instruction corresponding to the equipment identifier to the difference module, and the difference module can receive the difference logic chain implementation instruction through monitoring.

S52: the user equipment receives a difference logic chain implementation instruction through a difference module;

the drawing instructions are transmitted to the bottom layer in a layered manner through a plurality of modules, and the user equipment can receive the differential logic chain implementation instructions through the differential modules, so that the differential modules execute differential logic implementation, and the scheme feasibility is facilitated.

S53: the user equipment executes the difference logic implementation through the difference module;

for each device control, the corresponding difference drawing resources are different, the user device can implement an instruction through the difference module according to the difference logic chain, and a plurality of difference drawing resources can be configured to be placed on nodes of the difference logic chain to execute the difference logic implementation.

S54: executing a difference logic realization callback to complete a difference logic chain corresponding to the device identifier obtained from the difference module and complete the difference logic realization;

Because the device identifiers are different, based on the difference logic chain implementation instruction, when the difference module executes the completion of the difference logic implementation, executing the difference logic implementation callback according to the instruction of the drawing command so as to complete the acquisition of the difference logic chain corresponding to the device identifier from the difference module and the completion of the difference logic implementation, and feeding back the difference logic implementation to the connected proxy module.

The agent module and the difference module are both packaged in the SDK, and the SDK is embedded in the user equipment.

Therefore, the method abstracts the difference of UI of different user equipment into templates, and inherits the templates for each user equipment to realize personalized parts. Embodied in different user equipment. And judging different user equipment through the SDK, selecting different attribute templates and agent modules, and returning to different specific implementations. Meanwhile, all logic is packaged into one SDK, and the SDK is automatically adapted to different devices to complete the functions of different UI effects and logic.

For the user equipment, the execution flow and implementation mode are transparent, and specific details in the SDK do not need to be studied, so that the development efficiency of UI function developers of different user equipment is improved. Meanwhile, the maintenance is changed, the total improvement is realized in effect, the efficiency ratio of work is directly improved, and the maintenance cost of project engineering can be obviously reduced.

Further, the implementation method of the user interface of the present application will be described in detail with reference to the following specific application scenario.

The control is intended to implement different UI visual effects for the same control defined in different types of devices, such as graphical fillets or square corners as described above, or to implement different behaviors for different types of devices. In conventional schemes, coding for different devices based on different types is required.

Specifically, referring to fig. 6, fig. 6 is a diagram showing the situation of different UI visual effects of a plurality of devices in the conventional scheme for the same control, for example, fig. 6, in different devices (device 1, device 2, device 3), if different UI visual effects (UI a, UI B, UI C) are to be expressed in the same control, it is necessary to write code a, code B, and code C for device 1, device 2, and device 3, respectively, and it is necessary to write 3 sets of codes in total. Three sets of codes are also provided simultaneously in the same logical processing aspect.

The same control defined in different types of devices is intended to implement different UI visual effects or logic. A corresponding set of code needs to be written point-to-point for different devices and UI styles and logic. That is, writing code a for device 1, writing code B for device 2, and writing code C for device 3 may implement UI a visual effect, UI B visual effect, and UI C visual effect, respectively.

The code quantity is dispersed in different devices, the different devices have one set of codes, and the number of the controls in the devices is very large, so that the code quantity is relatively large and the maintenance is difficult. When three sets of equipment need to be subjected to unified logic addition modification, the development amount is three times that of one set of equipment. Therefore, the maintenance cost is high and the development amount is large.

Therefore, if different UI visual effects aiming at the same control can be developed for different types of equipment, the code quantity can be greatly simplified, the maintenance is convenient, and the cost is reduced.

In software engineering, an application programming interface (Application Programming Interface, API) is a number of predefined functions that are designed to provide applications and developers the ability to access a set of routines based on certain software or hardware without having to access source code or understand the details of the internal operating mechanisms.

Firstly, unified summarizing the different UI styles and resources of each device and the logic triggering rules through the attribute and API modes, thereby extracting a common attribute parent template and a logic parent template, wherein the attribute parent template is a common module, and the logic parent template is a common logic chain. And calling a difference module by each different device through the proxy template, so that a UI style of difference can be realized. The use of resources is controlled by the common module, and the variability of logic is controlled by the proxy template.

The idea of the inheritance module is to provide the same parent class for reducing the repeated occurrence of common problems, so that other objects have all public resources and attributes of the parent class, and the subclasses can also realize the public resources and attributes by themselves without affecting other subclass objects. All of these attributes, the differential implementation of the attributes, are encapsulated within one SDK. Reference relationship referring to fig. 7, fig. 7 is a reference relationship diagram among a shared attribute, a shared implementation and a plurality of devices, where the shared implementation may obtain drawing resources from the shared attribute and distribute the drawing resources to the device 1 implementation, the device 2 implementation and the device 3 implementation.

The idea of the proxy module is to insert a proxy object between the actual object and the caller in order to provide additional processing or different operations. A template variable can be defined in the proxy module, and the template variable is instantiated into templates of different specific implementations according to different devices in the proxy module.

All of these templates, the specific implementation of the templates, and the agents are packaged within one SDK. Referring to fig. 8, fig. 8 is a reference relationship diagram of a software tool package, a proxy module, a module difference module and multiple device implementations, where the difference module stores differences among the device 1 implementation, the device 2 implementation and the device 3 implementation, and the proxy module can perform difference call among the device 1 implementation, the device 2 implementation and the device 3 implementation according to a drawing command obtained by the SDK, and if the SDK is embedded into the device a, the device B, the device C and the SDK, the SDK is responsible for realizing the implementation effects of all the devices. When the device draws the control effect, the execution time sequence is shown in fig. 9, and fig. 9 is a time sequence diagram of executing drawing commands when the device draws the UI visual effect, specifically comprising the following steps:

S601: receiving a user interface drawing instruction of the device based on the SDK;

Generally, the device is provided with a keyboard or a touch screen, etc., through which a user interface drawing instruction can be sent to the SDK, and the user interface drawing instruction of the device can be received based on the SDK.

In addition, the device is further provided with external buttons such as a start key, and the user interface drawing instruction can be sent to the SDK by pressing the start key for a certain period of time such as 2 seconds, 3 seconds, 5 seconds and the like, so that the device obtains the user interface drawing instruction. Of course, the user may also give other ways to obtain the user interface drawing instruction, which is not limited herein.

S602: acquiring a device identifier based on the SDK;

Once the device is molded and shipped, the device generally has a specific identifier, for example, the device identifier is stored in the SDK interface, so that when the device receives a user interface drawing instruction of the device based on the SDK, the device can be triggered to acquire the device identifier of the device for subsequent use.

The SDK can be internally packaged with an inheritance module, a sharing logic module and a difference module, the sharing module can acquire the sharing drawing resources and the difference drawing resources in a drawing resource library, the drawing resource library is used for storing the sharing drawing resources and the difference drawing resources, the inheritance module can inherit the drawing resources called by the sharing module and can formulate personalized labels according to equipment identifiers, the sharing logic module is used for storing a sharing logic chain and can execute sharing logic implementation according to drawing instructions, and the difference module is used for storing the difference logic chain and can execute difference logic implementation according to the drawing instructions.

In addition, the device identifier may be identified from the device information, or may be determined from the type of the device, which is not limited herein.

S603: sending a drawing call instruction to an inheritance module through the SDK;

The device SDK is packaged with an inheritance module and a shared module, the definition inheritance module can inherit all drawing resources of the shared module from the shared module, for example, the shared module represents a record form of a drawing resource library, and the inheritance module can transcribe and personalize a new form on the basis of the form of the shared module, so that the inheritance module also has unique properties, can enrich the selection of the device, and is beneficial to the personalized formulation of the device.

Therefore, after the SDK acquires the user interface drawing instruction and the device identification, a drawing call command may be sent to the inheritance module through the SDK.

S604: continuously sending the drawing resource calling instruction to the sharing module through the inheritance module;

After receiving the drawing call instruction, the inheritance module does not reach the drawing resource library, so that the drawing resource call instruction needs to be continuously sent to the sharing module through the inheritance module, drawing resources, such as sharing drawing resources and difference drawing resources, are taken from the drawing resource library based on the sharing module, and the drawing resources, including sharing drawing resources and difference drawing resources, are stored in the drawing resource library.

The common drawing resource represents a non-exclusive control resource, and as the logic rules are approximately consistent, the common drawing resource can be the type of the device, the UI style of the device, the logic trigger rule UI theme, the visual effect of the representation, and the API, and represents that the underlying logic and codes are basically consistent.

The difference drawing resources represent that each device is provided with own individuality and characteristics, such as interface colors, different colors are called, the visual effects of the presented UI are different, such as round or square icon corners, the selected difference drawing resources are different, and the visual effects of the presented UI are different.

S605: the drawing resource calling instruction is called back through the sharing module, and returned and sent to the inheritance module;

And after the drawing resources are taken from the drawing resource library based on the sharing module, the drawing resource calling instruction is called back through the sharing module, and the drawing resource calling instruction is returned and sent to the inheritance module.

S606: and continuing callback of the drawing resource calling instruction through the inheritance module, and returning the callback to the SDK to finish the callback of the drawing resource calling instruction.

Because the shared module is connected with the inheritance module and the inheritance module is connected with the SDK, the shared module cannot pass through the inheritance module to inform the SDK command interface of the completion condition of the drawing resource calling instruction by the shared module.

Therefore, the drawing resource calling instruction is continuously called back to the SDK through the inheritance module to finish the drawing resource calling instruction callback, so that the acquisition of the drawing resource is finished, and the acquired drawing resource is stored in the inheritance module.

S607: after the callback of the drawing resource calling instruction is completed, a drawing resource package is obtained through an inheritance module based on the equipment identification;

After the callback of the drawing resource calling instruction is completed, the equipment can be set up in a personalized mode through the inheritance module based on the self requirement, namely, the drawing resource package is obtained through the inheritance module based on the equipment identification, for example, the obtained drawing resource is classified, repackaged and the like, so that the drawing resource package corresponding to the control is formed.

S608: calling a shared logic to a shared logic module through the SDK based on the acquired drawing command;

For the acquired drawing resource package, how to place the drawing command still to be seen, for example, the drawing command can firstly deliver the clock icon or firstly place the software icon, so that how to place the drawing resource of the corresponding control becomes a problem to be realized in the logic module.

The common logical chain represents the order, timing or flow of installing the common drawing resources, such as by a developer's discussion, unifying the regulatory revision criteria, and placing the common drawing resources onto the various logical nodes.

Thus, first, the shared logic can be called to the shared logic module through the SDK based on the acquired drawing command. Specifically, the common logic module stores a common logic chain therein, and the SDK is connected to the common logic module, so that the common logic can be called to the common logic module through the SDK to acquire the common logic chain.

S609: executing the common logic by the common logic module to realize the common logic;

The common logic module not only can provide a common logic chain, but also can execute the common logic based on the drawing command to realize the common logic, so that the common logic module can be arranged to realize the common logic according to the shortest route, and the time for realizing the common logic is saved.

S610: after the shared logic is realized, notifying the proxy module through the shared logic module;

After the common logic is completed by the common logic module, the drawing resource package of each control is already placed on the node on the common logic chain, and the proxy module needs to be informed of the placement and configuration of the difference drawing resources by the common logic module through the drawing instruction.

S611: based on the agent module, sending a difference logic chain implementation instruction to the difference module;

The difference logic chain indicates the sequence, time sequence or flow of installing the difference drawing resources, such as through personalized formulation of the devices, and each common logic chain node can present different resource configurations, so that the UI visual effects presented by different devices are different.

After receiving the notice of completion of the shared logic implementation, the proxy module receives the notice of completion of the shared logic implementation, and the drawing command pointing to the differential logic implementation is triggered. Therefore, based on the agent module, a difference logic chain implementation instruction can be sent to the difference module to acquire the difference logic chain so as to configure the difference drawing resource package corresponding to each control, namely, the difference drawing resource is selectively placed or configured on the node of the difference logic chain.

S612: based on the difference module, calling back a difference logic realization instruction to the proxy module;

After the difference drawing resource is placed or configured on the node of the difference logic chain, based on the difference module, the difference logic realization instruction can be called back to the proxy module.

S613: based on the proxy module, continuing callback of the differential logic implementation instruction to the shared logic module;

because the difference module is connected with the proxy module and the proxy module is connected with the common logic module, the difference module cannot cross the proxy module to inform the common logic module of the completion condition of the difference logic implementation instruction.

Therefore, based on the agent module, the difference logic implementation instruction is continuously called back through the difference module, the completion condition of the difference drawing resource configuration is reported step by step, and the realization of the scheme is facilitated to be improved.

S614: based on the shared logic module, continuing callback of shared logic implementation and differential logic implementation instructions to the SDK;

Similarly, because the proxy module is connected to the common logic module and the common logic module is connected to the SDK, the proxy module cannot pass over the common logic module to notify the SDK of the completion of the common logic implementation and the differential logic implementation instruction.

Therefore, based on the shared logic module, the shared logic implementation and the differential logic implementation instructions are continuously called back to the SDK, and the completion condition of the shared drawing resource configuration and the completion condition of the differential drawing resource configuration are informed to the SDK through a mechanism of reporting upwards from the bottom layer step by step so as to improve the operability of the scheme.

S615: and (3) based on the common logic implementation and the difference logic implementation instruction of the callback, drawing the UI visual effect.

The UI visual effect is drawn based on the callback-based shared logic implementation and the difference logic implementation instruction, namely, based on the shared logic chain for placing the shared drawing resources and the difference logic chain for placing the difference drawing resources.

Referring to fig. 10, fig. 10 is a diagram showing the situation that different UI visual effects are realized on the same control by a plurality of devices according to the present application, that is, the UI a visual effect, the UI B visual effect and the UI C visual effect can be respectively realized by writing the same set of codes for device 1, device 2 and device 3.

Therefore, different from the traditional method, the user interface implementation method can write only one set of codes, and can realize different UI visual effects on the same control defined in different types of equipment by only one set of codes. Therefore, the code multiplexing degree is improved, and the module coupling degree is reduced. Maintenance cost is reduced, development efficiency is improved, and maintenance cost of project engineering can be remarkably reduced.

Because of the difference of UI of different devices, abstract to form templates, and inherit and modify templates for each device to realize individuation. In different device specific implementations, different devices are judged through the SDK, different attribute templates and agent implementations are selected, and different specific implementations are returned. Meanwhile, all logic is packaged into one SDK, and the SDK is automatically adapted to different devices to complete the functions of different UI effects and logic.

For the equipment, the same set of codes are transparent, specific details in the SDK do not need to be concerned, and the development efficiency of UI function developers of different equipment is improved. Meanwhile, the maintenance is changed, the total improvement is realized in effect, and the efficiency ratio of work is directly improved.

In addition, the same set of codes and the same control can be expanded to the same set of codes in different types of equipment and the same control except for the scheme for realizing different UI effects, and other functional effects are realized in different types of equipment and the same control.

Referring to fig. 11, fig. 11 is a schematic structural diagram of a mobile terminal according to an embodiment of the application. The embodiment of the application provides a mobile terminal 6, which comprises:

An obtaining module 61, configured to obtain a device identifier and a user interface drawing instruction;

The processing module 62 is configured to obtain a common drawing resource and a common logic chain in response to a user interface drawing instruction, place the common drawing resource on a node corresponding to the common logic chain, obtain a difference drawing resource and a difference logic chain corresponding to the user equipment, and place the difference drawing resource on a node corresponding to the difference logic chain;

The drawing module 63 is used for drawing the UI visual effect based on the common drawing logic chain for placing the common drawing resources and the difference logic chain for placing the difference drawing resources.

By the method, the common logic chain and the differential logic chain are respectively set for a plurality of sets of codes which cause difficult maintenance and large development amount, common logic chains are adopted for the same logic of the user equipment to realize the placement of common drawing resources, and differential logic chains are adopted for realizing the placement of differential drawing resources for personalized differential drawing resources, and based on the common logic chains for placing the common drawing resources and the differential logic chains for placing the differential drawing resources, the UI visual effect is jointly drawn. Through the mode, maintenance of multiple sets of codes can be effectively avoided, and the requirements of different types of equipment on different UI visual effects can be met by only adopting one set of codes.

Further, referring to fig. 12, fig. 12 is a schematic structural diagram of another mobile terminal according to an embodiment of the present application. The embodiment of the application provides a mobile terminal 7, which comprises: the processor 71, the memory 72, and the computer program 721 stored in the memory and running on the processor, the processor 71 is configured to execute the computer program 721 to implement the steps of the method provided in the first aspect of the embodiment of the present application, which is not described herein.

Referring to fig. 13, fig. 13 is a circuit schematic block diagram of an embodiment of a computer readable storage medium of the present application. May be stored in the computer readable storage medium 200 if implemented in the form of software functional units and sold or used as a stand alone product. Based on this understanding, the technical solution of the present application may be embodied essentially or partly in the form of a software product or all or part of the technical solution, which is stored in a storage device, and includes several instructions (computer program 201) for causing a computer device (which may be a personal computer, a server, or a network device, etc.) or a processor (processor) to execute all or part of the steps of the method according to the embodiments of the present application. The aforementioned storage device includes: various media such as a usb 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, and electronic devices such as a computer, a mobile phone, a notebook computer, a tablet computer, and a camera having the above-mentioned storage media.

The description of the execution process of the computer program 201 in the computer readable storage medium 200 may be described with reference to the above embodiment of the touch detection method of the mobile terminal of the present application, which is not repeated herein.

Referring to fig. 14, fig. 14 is a schematic block diagram of a hardware architecture of a mobile terminal according to the present application, where the mobile terminal device may be a mobile phone, a tablet computer, a notebook computer, a wearable device, etc., and this embodiment illustrates the mobile phone as an example. The structure of the terminal device 100 may include a Radio Frequency (RF) circuit 110, a memory 120, an input unit 130, a display unit 140, a sensor 150, an audio circuit 160, wiFi (wireless fidelity) module 170, a processor 180, a power supply 190, and the like. The RF circuit 110, the memory 120, the input unit 130, the display unit 140, the sensor 150, the audio circuit 160, and the WiFi module 170 are respectively connected to the processor 180; the power supply 190 is used to supply power to the entire terminal device 100.

Specifically, RF circuit 110 is used to send and receive signals; memory 120 is used to store data instruction information; the input unit 130 is used for inputting information, and may specifically include a touch screen 131 and other input devices 132 such as operation keys; the display unit 140 may include a display panel, etc.; the sensor 150 includes an infrared sensor, a laser sensor, etc., for detecting a user proximity signal, a distance signal, etc.; a speaker 161 and a microphone (or microphone) 162 are connected to the processor 180 through an audio circuit 160 for receiving and transmitting sound signals; the WiFi module 170 is configured to receive and transmit WiFi signals, and the processor 180 is configured to process data information of the mobile terminal device.

The foregoing description is only a partial embodiment of the present application, and is not intended to limit the scope of the present application, and all equivalent devices or equivalent processes using the descriptions and the drawings of the present application or directly or indirectly applied to other related technical fields are included in the scope of the present application.

Claims

1. A method for implementing a user interface, the method comprising:

Acquiring a device identifier and a user interface drawing instruction;

the common drawing resources and the difference drawing resources corresponding to the equipment identifier are obtained from an inheritance module, and the inheritance module can obtain the common drawing resources and the difference drawing resources of different user equipment for user interface drawing;

the method comprises the steps that a common logic chain is obtained from a common logic module, and the common logic module integrates common logic implementation which is executed by different user equipment for user interface drawing UI visual effects;

Executing a common logic implementation according to the common logic chain so as to place the common drawing resource on a corresponding node on the common logic chain;

Acquiring a difference logic chain corresponding to the equipment identifier from a difference module based on an agent module, wherein the agent module is used for calling the difference logic chain of the difference drawing resource different from other user equipment, and the difference module integrates the difference logic realization of the UI visual effect drawn by different user equipment;

executing a difference logic implementation according to the difference logic chain to place the difference drawing resource on a corresponding node on the difference logic chain;

And drawing a UI visual effect based on the common logic chain for placing the common drawing resources and the difference logic chain for placing the difference drawing resources.

2. The method of claim 1, wherein the step of determining the position of the substrate comprises,

The obtaining, from an inheritance module, the common drawing resource corresponding to the device identifier and the difference drawing resource includes:

based on the user interface drawing instruction and the inheritance module, sending the drawing resource calling instruction to a shared module, wherein the shared module can acquire the shared drawing resource and the difference drawing resource;

receiving the drawing resource calling instruction through the sharing module;

and executing the drawing resource calling instruction callback based on the drawing resource calling instruction so as to store the common drawing resource and the difference drawing resource in the inheritance module.

3. The method of claim 2, wherein the step of determining the position of the substrate comprises,

Executing the differential logic implementation according to the differential logic chain to place the differential drawing resource on a corresponding node on the differential logic chain, including:

Unpacking the common drawing resources on the corresponding nodes on the common logic chain to obtain a plurality of different drawing resource packages, wherein the corresponding nodes on the common logic chain are equipment controls;

And according to the difference logic chain, performing difference logic implementation on the plurality of difference drawing resource packages through a difference module so as to place the plurality of difference drawing resource packages on corresponding nodes on the difference logic chain, wherein the corresponding nodes on the difference logic chain are different configuration effects of the equipment control.

4. The method of claim 3, wherein the step of,

The agent-based module obtains a difference logic chain corresponding to the equipment identifier from a difference module, and the method comprises the following steps:

sending a difference logic chain implementation instruction corresponding to the equipment identifier to a difference module through the proxy module;

receiving the differential logic chain implementation instruction through the differential module;

executing the differential logic implementation by the differential module;

executing the difference logic realization callback to obtain a difference logic chain corresponding to the equipment identifier from the difference module and finish the difference logic realization;

The agent module and the difference module are both packaged in an SDK, and the SDK is embedded in the user equipment.

5. The method of claim 1, wherein the step of determining the position of the substrate comprises,

The obtaining the equipment identifier and the user interface drawing instruction comprises the following steps:

Acquiring the user interface drawing command through an internal interface corresponding to the SDK;

and identifying the equipment identifier based on the internal interface corresponding to the SDK.

6. The method of claim 1, wherein the step of determining the position of the substrate comprises,

The common drawing resource at least comprises one of equipment type, equipment UI style, logic triggering rule and equipment API;

The difference drawing resource at least comprises one of enlargement or abbreviation of an icon, clipping or enlargement of numbers, size of characters, color brightness, graphic round corners or square corners.

7. A mobile terminal, comprising:

The acquisition module is used for acquiring the equipment identifier and the user interface drawing instruction;

The processing module is used for acquiring the common drawing resources and the difference drawing resources corresponding to the equipment identifier from the inheritance module, and the inheritance module can acquire the common drawing resources and the difference drawing resources of different user equipment for user interface drawing; the method comprises the steps that a common logic chain is obtained from a common logic module, and the common logic module integrates common logic implementation which is executed by different user equipment for user interface drawing UI visual effects; executing a common logic implementation according to the common logic chain so as to place the common drawing resource on a corresponding node on the common logic chain; acquiring a difference logic chain corresponding to the equipment identifier from a difference module based on an agent module, wherein the agent module is used for calling the difference logic chain of the difference drawing resource different from other user equipment, and the difference module integrates the difference logic realization of the UI visual effect drawn by different user equipment; executing a difference logic implementation according to the difference logic chain to place the difference drawing resource on a corresponding node on the difference logic chain;

And the drawing module is used for drawing the UI visual effect based on the common logic chain for placing the common drawing resources and the difference logic chain for placing the difference drawing resources.

8. A mobile terminal, comprising: a processor and a memory, the memory having stored therein a computer program for executing the computer program to implement the method of any of claims 1-6.

9. A computer readable storage medium, characterized in that the computer readable storage medium stores a computer program, which, when being executed by a processor, implements the implementation method according to any of claims 1-6.