WO2021036735A1 - 显示用户界面的方法及电子设备 - Google Patents

显示用户界面的方法及电子设备 Download PDF

Info

Publication number
WO2021036735A1
WO2021036735A1 PCT/CN2020/107549 CN2020107549W WO2021036735A1 WO 2021036735 A1 WO2021036735 A1 WO 2021036735A1 CN 2020107549 W CN2020107549 W CN 2020107549W WO 2021036735 A1 WO2021036735 A1 WO 2021036735A1
Authority
WO
WIPO (PCT)
Prior art keywords
electronic device
user interface
view object
view
interface
Prior art date
Application number
PCT/CN2020/107549
Other languages
English (en)
French (fr)
Inventor
张威
姚鑫
李杰纯
Original Assignee
华为技术有限公司
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by 华为技术有限公司 filed Critical 华为技术有限公司
Publication of WO2021036735A1 publication Critical patent/WO2021036735A1/zh

Links

Images

Classifications

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

Definitions

  • the present invention relates to the field of electronic technology, and in particular to a method for displaying a user interface applied to an electronic device and an electronic device.
  • the user interface contains interface elements such as icons, windows, and controls.
  • the controls can include visual interface elements such as pictures, buttons, menus, tabs, text boxes, dialog boxes, status bars, navigation bars, and Widgets.
  • the attributes and content of the interface elements in the interface are defined by tags or nodes.
  • XML Extensible Markup Language, Extensible Markup Language
  • a node in the XML file describes a view object.
  • the View object is obtained after the XML file is parsed.
  • the electronic device draws the View object as an interface element to be displayed through the interface drawing process.
  • the interface elements to be displayed are the interface elements presented in the user interface after being rendered.
  • the speed of interface drawing affects the efficiency of electronic devices presenting user interfaces to users.
  • how to improve the speed of interface drawing is a research direction in the industry.
  • the embodiment of the present application provides a method for displaying a user interface. According to the method, displaying the user interface can save the time for the electronic device to present the user interface to the user, thereby improving the user experience.
  • a method for displaying a user interface on an electronic device may include: the electronic device receives a user operation for displaying a first user interface;
  • the layout file corresponding to the first user interface obtains the View object and the attributes of the View object;
  • the layout file includes multiple nodes, and each node is used to describe one View object;
  • the View object specifies the Interface elements in the first user interface;
  • the electronic device draws the system View objects in the View objects in parallel according to the attributes of the View objects, draws the tripartite View objects in the View objects one by one, and generates and the View
  • the interface element to be displayed has a geometric shape and content
  • the electronic device nests the to-be-displayed interface element into the to-be-displayed user interface;
  • the electronic device renders the to-be-displayed
  • the electronic device draws the system View objects in the View objects in parallel, draws the three-party View objects in the View objects one by one, and generates corresponding views to the View objects.
  • the interface elements to be displayed include: the electronic device calls multiple non-UI threads to draw the system View objects in parallel, and generates the interface elements to be displayed corresponding to the system View objects; each non-UI thread draws one at a time The system View object; the electronic device calls the UI thread to draw the three-party View objects one by one, and generates the to-be-displayed interface elements corresponding to the three-party View object; the UI thread draws one three-party View object at a time; wherein, A process created by the electronic device for the application program corresponding to the first user interface includes one or more threads, and among the one or more threads, the only one is used to display a user interface and implement user interface interaction functions
  • the main thread of is the UI thread, and threads other than the UI thread are the non-UI threads.
  • the number of non-UI threads is determined by the CPU usage rate of the electronic device; the higher the CPU usage rate, the smaller the number of non-UI threads. In this way, it is possible to avoid calling too many non-UI threads to draw system View objects when the CPU usage is high, causing the electronic device to freeze or the system to crash.
  • the number of non-UI threads is determined by the number of system View objects contained in the View object; the more the number of system View objects, the more the non-UI threads The greater the number of threads.
  • the electronic device adjusts the number of non-UI threads called according to the number of View objects. In this way, the electronic device can complete the drawing of the View object faster and more efficiently.
  • the method further includes: the electronic device parses the corresponding first user interface To obtain the parent-child relationship between the View objects; the electronic device nests the interface elements to be displayed as the user interface to be displayed, which specifically includes: the electronic device according to the parent-child relationship between the View objects Relationship, placing the interface element to be displayed corresponding to the child View object into the interface element to be displayed corresponding to the parent View object; the child View object and the parent View object have a parent-child relationship.
  • the electronic device obtains the parent-child relationship between the View objects, and then uses the parent-child relationship between the View objects to nest interface elements to be displayed. In this way, nesting errors in the user interface to be displayed can be avoided. In this way, the electronic device can also nest the display interface elements more accurately.
  • the method further includes: The electronic device saves the View object, the attributes of the View object, and the parent-child relationship of the View object as a tree structure graph; a node in the tree structure graph represents one View object; the tree shape The node attributes in the structure graph correspond to the attributes of the View object; the subordinate relationship between the nodes in the tree structure graph represents the parent-child relationship between the View objects. In this way, the electronic device can more easily obtain the parent-child relationship between the View objects, and can find the View objects more conveniently.
  • the tree structure graph includes multiple subtrees, and the more the number of the subtrees, the more the number of non-UI threads; the subtree describes a part View object with parent-child relationship.
  • the electronic device can divide the tree structure graphics into multiple subtrees to draw View objects, and then adjust the number of non-UI threads according to the number of subtrees. In this way, the electronic device can quickly complete the drawing of the View object.
  • the method further includes: the electronic device records when the layout file is parsed, The analytic order of the View objects; the electronic device nesting the interface elements to be displayed as the user interface to be displayed specifically includes: the electronic device nests the corresponding View objects in sequence according to the analytic order of the View objects Of the to-be-displayed interface elements to obtain the to-be-displayed user interface In this way, when the View object corresponding to the interface element to be displayed has multiple child View objects, the electronic device can nest the to-be-displayed interface element corresponding to the child View object to the to-be-displayed corresponding to the parent View object in the order of resolution of each child View object. Interface elements.
  • the parsing sequence of the View object includes: the electronic device creates an intermediate object; the intermediate object is a kind of Data structure; the electronic device uses the intermediate object to record the parsing sequence of the View object and the parent-child relationship between the View object.
  • the electronic device does not need to find the resolution order of the View object in the tree structure graph, and can obtain the resolution order of the View object directly by searching for the intermediate object.
  • the user operation includes: a user operation for starting an application and displaying the main interface provided by the application, an operation for refreshing the user interface, and an operation for jumping Transfer the operation of the user interface.
  • the attributes of the View object include: the type, color, ID, content of the View object, the relative position, relative width, and relative height between the View objects .
  • the electronic device parsing the layout file includes: the electronic device creates a parser pointer; the parser pointer points to the node being parsed in the layout file
  • the moving distance of the parser pointer is increased by a first preset value; the first preset value is a positive integer; the electronic device records the analysis The moving distance of the pointer of the device; the moving distance is used to indicate which node the electronic device resolves to.
  • the electronic device can know which node is currently parsed through the moving distance of the parser pointer, and which node is the first to be parsed. In this way, the electronic device can obtain the parsing order of the View object through the movement distance of the parser pointer.
  • the method further includes: the electronic device sets the resolution according to the display screen The position, width, and height of the interface elements in the first user interface on the display screen; the electronic device rendering the to-be-displayed user interface into the first user interface specifically includes: the electronic device according to the The layout attribute renders the to-be-displayed user interface into the first user interface, and interface elements in the first user interface obtained after rendering conform to the layout attribute.
  • the electronic device sets the size of the interface element to be displayed according to the size of the display screen. In this way, the first user interface rendered by the electronic device can be more adapted to the display screen.
  • the method further includes: the electronic device according to the name of the type of the View object Determine whether the View object is a system View object; if the name of the type of the View object is composed of the name of the electronic device operating system, then the View object is a system View object; if the name of the View object type is determined by the application If the name of the program is composed, the View object is a tripartite View object. In this way, the electronic device can determine whether the View object is a system View object.
  • the electronic device determines whether the nested interface element to be displayed has child interface elements to be displayed. If so, the electronic device nests the child interface element to be displayed into the parent interface element to be displayed. In this way, it can be avoided that the child to-be-displayed interface elements that are currently nested to the parent to-be-displayed interface element have missing child-to-be-displayed interface elements are not nested during nesting.
  • the electronic device may determine the number of non-UI threads according to the nesting complexity of the subtree. The higher the nesting complexity of the subtree, the more non-UI threads the electronic device can choose to use to draw the system View object.
  • an electronic device including: a communication interface, a memory, and a processor; the communication interface, the memory are coupled to the processor, and the memory is used to store computer program code, the computer program code Including computer instructions, when the processor reads the computer instructions from the memory, so that the electronic device executes any one of the possible implementation manners in the first aspect.
  • a computer-readable storage medium including instructions, which are characterized in that, when the foregoing instructions are executed on an electronic device, the electronic pen-related pen executes any one of the possible implementation manners in the first aspect.
  • a computer product is provided, when the computer program product runs on a computer, so that the computer executes any of the possible implementation manners in the first aspect.
  • FIG. 1 is a schematic diagram of the software structure of an electronic device provided by an embodiment of the application
  • FIG. 2 is a schematic diagram of a user interface for application menus on an electronic device provided by an embodiment of the application
  • Figure 3 is a schematic diagram of the content of an XML file provided by an embodiment of the application.
  • FIG. 4 is a schematic diagram of the result obtained by the electronic device provided by the embodiment of the application after parsing the XML file;
  • FIG. 5 is a schematic diagram of a to-be-displayed user interface of an electronic device provided by an embodiment of the application;
  • FIG. 6 is a schematic diagram of the parent-child relationship between View objects provided by an embodiment of the application.
  • FIG. 7 is a schematic diagram of the interface drawing process of the electronic equipment provided by the current technology.
  • FIG. 8A is a schematic diagram of a user refreshing a user interface through a sliding operation provided by an embodiment of the application.
  • FIG. 8B is a schematic diagram of a refreshed user interface provided by an embodiment of the application.
  • FIG. 9A is a schematic diagram of a user refreshing a user interface through a touch operation provided by an embodiment of the application.
  • 9B is a schematic diagram of another refreshed user interface provided by an embodiment of the application.
  • FIG. 10 is a schematic flowchart of a method for displaying a user interface provided by an embodiment of the application.
  • FIG. 11 is a schematic diagram of the structure of an electronic device provided by an embodiment of the application.
  • FIG. 12 is a schematic diagram of the software and hardware of the electronic device provided by this application for realizing the display user interface of this application.
  • the electronic device may be a portable electronic device that also contains other functions such as a personal digital assistant and/or a music player function, such as a mobile phone, a tablet computer, and a wearable electronic device with wireless communication function (such as a smart watch) Wait.
  • portable electronic devices include, but are not limited to, portable electronic devices equipped with iOS, Android, Microsoft, or other operating systems.
  • the aforementioned portable electronic device may also be other portable electronic devices, such as a laptop computer with a touch-sensitive surface or a touch panel. It should also be understood that, in some other embodiments, the above-mentioned electronic device may not be a portable electronic device, but a desktop computer with a touch-sensitive surface or a touch panel.
  • the software system of the electronic device can adopt a layered architecture, an event-driven architecture, a microkernel architecture, a microservice architecture, or a cloud architecture.
  • the embodiment of the present invention takes an Android system with a layered architecture as an example to illustrate the software structure of an electronic device.
  • Fig. 1 is a block diagram of the software structure of an electronic device according to an embodiment of the present invention.
  • the layered architecture divides the software into several layers, and each layer has a clear role and division of labor. Communication between layers through software interface.
  • the Android system is divided into four layers, from top to bottom, the application layer, the application framework layer, the Android runtime and system library, and the kernel layer.
  • the application layer can include a series of application packages.
  • the application package may include applications (also called applications) such as camera, gallery, calendar, call, map, navigation, WLAN, Bluetooth, music, video, short message, etc.
  • applications also called applications
  • the application framework layer provides an application programming interface (application programming interface, API) and a programming framework for applications in the application layer.
  • the application framework layer includes some predefined functions.
  • the application framework layer can include a window manager, a content provider, a view system, a phone manager, a resource manager, a notification manager, a view manager, a drawing surface manager, and so on.
  • a window manager a content provider
  • a view system a phone manager
  • a resource manager a notification manager
  • a view manager a drawing surface manager
  • FIG. 12 For the detailed description of the view manager and the drawing surface manager, please refer to the detailed description of FIG. 12.
  • the window manager is used to manage window programs.
  • the window manager can obtain the size of the display, determine whether there is a status bar, lock the screen, take a screenshot, etc.
  • the view manager is used to layout and draw the acquired XML file of the application into interface elements of the user interface.
  • the drawing surface manager is used to draw interface elements into the user interface to be displayed.
  • the content provider is used to store and retrieve data and make these data accessible to applications.
  • the data may include videos, images, audios, phone calls made and received, browsing history and bookmarks, phone book, etc.
  • the view system includes visual controls, such as controls that display text, controls that display pictures, and so on.
  • the view system can be used to build applications.
  • the display interface can be composed of one or more views.
  • a display interface that includes a short message notification icon may include a view that displays text and a view that displays pictures.
  • the phone manager is used to provide the communication function of the electronic device 100. For example, the management of the call status (including connecting, hanging up, etc.).
  • the resource manager provides various resources for the application, such as localized strings, icons, pictures, layout files, video files, and so on.
  • the notification manager enables the application to display notification information in the status bar, which can be used to convey notification-type messages, and it can disappear automatically after a short stay without user interaction.
  • the notification manager is used to notify download completion, message reminders, and so on.
  • the notification manager can also be a notification that appears in the status bar at the top of the system in the form of a chart or a scroll bar text, such as a notification of an application running in the background, or a notification that appears on the screen in the form of a dialogue interface. For example, text messages are prompted in the status bar, prompt sounds, electronic devices vibrate, and indicator lights flash.
  • Android Runtime includes core libraries and virtual machines. Android runtime is responsible for the scheduling and management of the Android system.
  • the core library consists of two parts: one part is the function functions that the java language needs to call, and the other part is the core library of Android.
  • the application layer and the application framework layer run in a virtual machine.
  • the virtual machine executes the java files of the application layer and the application framework layer as binary files.
  • the virtual machine is used to perform functions such as object life cycle management, stack management, thread management, security and exception management, and garbage collection.
  • the system library can include multiple functional modules. For example: surface manager (surface manager), media library (Media Libraries), three-dimensional graphics processing library (for example: OpenGL ES), 2D graphics engine (for example: SGL), etc.
  • the surface manager is used to manage the display subsystem and provides a combination of 2D and 3D layers for multiple applications.
  • the media library supports playback and recording of a variety of commonly used audio and video formats, as well as still image files.
  • the media library can support a variety of audio and video encoding formats, such as: MPEG4, H.264, MP3, AAC, AMR, JPG, PNG, etc.
  • the 3D graphics processing library is used to realize 3D graphics drawing, image rendering, synthesis, and layer processing.
  • the 2D graphics engine is a drawing engine for 2D drawing.
  • the kernel layer is the layer between hardware and software.
  • the kernel layer contains at least display driver, camera driver, audio driver, and sensor driver.
  • the corresponding hardware interrupt is sent to the kernel layer.
  • the kernel layer processes the touch operation into the original input event (including touch coordinates, time stamp of the touch operation, etc.).
  • the original input events are stored in the kernel layer.
  • the application framework layer obtains the original input event from the kernel layer and identifies the control corresponding to the input event. Taking the touch operation as a touch operation, and the control corresponding to the touch operation is the control of the camera application icon as an example, the camera application calls the interface of the application framework layer to start the camera application, and then starts the camera driver by calling the kernel layer, and passes the 3D camera model Group 193 captures still images or videos.
  • UI user interface
  • the term "user interface (UI)" in the description, claims and drawings of this application is a medium interface for interaction and information exchange between applications or operating systems and users, which implements the internal form of information And the user can accept the conversion between the forms.
  • the user interface of the application is the source code written in a specific computer language such as java, extensible markup language (XML), etc.
  • the interface source code is parsed and rendered on the terminal device, and finally presented as interface elements in the user interface .
  • the user interface contains interface elements such as icons, windows, and controls. Among them, control is also called widget. Typical controls include toolbar, menu bar, text box, button, scrollbar, and picture. And text.
  • GUI graphical user interface
  • the commonly used form of the user interface is a graphical user interface (GUI), which refers to a user interface related to computer operations that is displayed in a graphical manner. It can be an icon, window, control and other interface elements displayed on the display screen of an electronic device.
  • the control can include pictures, buttons, menus, tabs, text boxes, dialog boxes, status bars, navigation bars, Widgets, etc. Visual interface elements.
  • the following describes an exemplary user interface on the electronic device for displaying the application menu.
  • FIG. 2 exemplarily shows an exemplary user interface 200 for an application menu on an electronic device.
  • the user interface 200 may include: a status bar 201, a tray 213 with icons of commonly used applications, a navigation bar 214, and other application icons. among them:
  • the status bar 201 may include: one or more signal strength indicators 201-1 of a mobile communication signal (also called a cellular signal), an indicator 201-2 of an operator of the mobile communication signal, a time indicator 201-3, Battery status indicator 201-4 etc.
  • the tray 213 with icons of commonly used application programs can display: phone icon 213-1, short message icon 213-2, contact icon 213-3, and so on.
  • the icon 213-1 of the phone may be composed of a picture 213-1-1 and a text 213-1-2.
  • the icon 213-2 of the short message may be composed of a picture 213-2-1 and a text 213-2-2.
  • the icon 213-3 of the contact may consist of a picture 213-3-1 and text 213-3-2.
  • the navigation bar 214 may include system navigation keys such as a return button 214-1, a home screen button 214-2, and a call out task history button 214-3.
  • system navigation keys such as a return button 214-1, a home screen button 214-2, and a call out task history button 214-3.
  • the electronic device 100 may display the previous page of the current page.
  • the electronic device 100 may display the home interface.
  • the electronic device 100 may display the task recently opened by the user.
  • the naming of each navigation key can also be other, which is not limited in this application. Not limited to virtual keys, each navigation key in the navigation bar 214 can also be implemented as a physical key.
  • Other application icons can be for example: Wechat icon 202, QQ icon 203, Twitter icon 204, Facebook icon 205, mailbox icon 206, cloud sharing icon 207, memo Icon 208, settings icon 209, gallery icon 210, camera icon 211.
  • the user interface 200 may also include a page indicator 212.
  • Other application icons may be distributed on multiple pages, and the page indicator 212 may be used to indicate which application in which page the user is currently browsing. The user can swipe the area of other application icons left and right to browse application icons in other pages.
  • the icon 202 of Wechat may be composed of a picture 202-1 and a text 202-2.
  • the icon 203 of QQ may consist of a picture 203-1 and text 203-2.
  • the icon 204 of Twitter may consist of a picture 204-1 and a text 204-2.
  • the icon 205 of Facebook may consist of a picture 205-1 and a text 205-2.
  • the icon 206 of the mailbox may be composed of a picture 206-1 and a text 206-2.
  • the icon 207 of cloud sharing may be composed of a picture 207-1 and a text 207-2.
  • the icon 208 of the memo may consist of a picture 208-1 and text 208-2.
  • the set icon 209 may consist of a picture 209-1 and text 209-2.
  • the icon 210 of the gallery may be composed of a picture 210-1 and a text 210-2.
  • the icon 211 of the camera may be composed of a picture 211-1 and text 211-2.
  • the user interface 200 exemplarily shown in FIG. 2 may be a home screen.
  • FIG. 2 only exemplarily shows the user interface on the electronic device, and should not constitute a limitation to the embodiment of the present application.
  • the process of displaying the user interface of the electronic device is described in detail below.
  • the following embodiment takes the electronic device displaying the user interface 200 shown in FIG. 2 as an example to illustrate the process of the electronic device presenting the user interface. It is understandable that after the process of parsing the layout file corresponding to the user interface, the process of interface drawing, and the process of rendering, the electronic device can display the user interface 200 visible to the user on the display screen.
  • the layout file can be a file formed after programming the interface elements in the user interface into program codes using programming languages such as JAVA, C#, XML, etc. In this application, the layout file may also be referred to as an XML file.
  • each user interface may correspond to one or more XML files.
  • the XML file is a layout file, which is composed of multiple lines of program code, and the multiple lines of program code constitute multiple nodes.
  • the node may also be referred to as a label or element, which is not limited in this application.
  • the nodes in the XML file can be divided into a root node and multiple common nodes. Each node in the XML file corresponds to a View object.
  • the upper-level node of the node is the parent node of the node. This node is a child node of the upper-level node.
  • the View object is used to specify the interface elements contained in the user interface. After the View object is drawn, it is the interface element to be displayed. After rendering, the interface elements to be displayed are interface elements presented on the user interface. In the embodiment of the present application, an interface element that is displayed in the user interface after a view object is processed may be referred to as an interface element corresponding to the view object.
  • the View object has some properties, including type, color, content, ID, and the position, width, and height of the View object, and so on. If the View object has a parent View object, the position of the View object refers to the position in its parent View object.
  • the electronic device determines the type (text, image, control, button), color, content, etc. of interface elements through attributes such as the type, color, and content of the View object.
  • the types of View objects can include text view objects (textview), picture view objects (imgview), video view objects (videoview), and so on.
  • the interface element in the user interface corresponding to the View object whose type is textview is text.
  • the interface elements in the user interface corresponding to the View object of type imgview are pictures.
  • the interface element in the user interface corresponding to the View object whose type is videoview is video.
  • the color of the View object can be yellow, red, blue, etc. It is understandable that when the color of the View object is red, the color of the interface element corresponding to the View object is also yellow.
  • the content of the View object can be the text "123", the image "a circle”, and so on. When the content of the View object is the text "123", the content of the interface element corresponding to the View object is also the text "123".
  • the View object corresponding to the parent node in the XML file may be referred to as the parent View object of the View object corresponding to the child node.
  • the View object corresponding to the child node in the XML file can be referred to as the child View object of the View object corresponding to the parent node.
  • one View object is a parent View object or a child View object of another View object can be referred to as a parent-child relationship between the two View objects.
  • the interface element corresponding to the child View object is placed in the interface element corresponding to the parent View object.
  • the electronic device After the electronic device parses the XML file corresponding to the user interface, it can learn the View object corresponding to each node, as well as the attributes of each View object (type, color, content, and the position, width, and height of the View object, etc.) , The parent-child relationship between each view object, etc.
  • FIG. 3 shows a possible schematic diagram of the content of an XML file. It is understandable that Figure 3 is not a real XML file, but a schematic diagram of the information described in the XML file for ease of understanding.
  • the XML file contains: root node A301, node B302, node C303, and node D304.
  • the root node A301 describes the View object named A and the properties of View object A.
  • the properties of View object A include type, color, content, ID, position, width, height and so on of View object A.
  • the node B302 describes the View object named B and the attributes of the View object B.
  • the properties of View object B include type, color, content, ID, width, height, and position in the parent View object A, and so on.
  • the node C303 describes the View object named C and the properties of the View object C.
  • the properties of View object C include type, color, content, ID, width, height, and position in the parent View object A, and so on.
  • the node D304 describes the View object named D and the attributes of the View object D.
  • the properties of the View object D include type, color, content, ID, width, height, and position in the parent View object B, and so on.
  • the root node A301 of the XML file in FIG. 3 is the parent node of node B302 and node C303.
  • node B302 and node C303 are child nodes of root node A301.
  • Node B302 is the parent node of node D304.
  • node D304 is a child node of node B302.
  • FIG. 4 exemplarily shows a schematic diagram of the result obtained after the electronic device parses the XML file.
  • the XML file is an XML file corresponding to the content schematic shown in FIG. 2.
  • the result diagram shown in FIG. 3 shows the view object corresponding to each node in the XML file, and the attributes (type, color, content, width, height, position, etc.) of each view object.
  • the result obtained by the electronic device after parsing the XML file may include: View object A, View object B, View object C, View object D, and the attributes of each View object and the parent-child relationship between the View objects.
  • View object A is the parent View object of View object B and View object C.
  • View object B and View object C are child View objects of View object A.
  • View object B is the parent View object of View object D.
  • View object D is a child View object of View object B.
  • multiple View objects with a parent-child relationship parsed from an XML file can form a View object tree.
  • the View object tree contains multiple objects and the parent-child relationship between multiple objects.
  • View object A, View object B, View object C, and View object D having a parent-child relationship can form a View object tree.
  • the View object tree contains four View objects: View object A, View object B, View object C, and View object D, as well as the parent-child relationship between the four View objects.
  • the electronic device can use the View object tree to save the View object corresponding to each node that the electronic device parses from the XML file, as well as the attributes of each View object (type, color, content, and the position, width, and width of the View object). And height, etc.), the parent-child relationship between each view object, etc.
  • the View object tree can be a Document Object Model (DOM).
  • DOM is a standard interface specification developed by W3C, and it is a standard API for processing HTML and XML files.
  • DOM provides an access model to the entire XML document.
  • DOM treats the XML document as a tree structure, and each node of the tree represents an XML tag or a text item in the tag.
  • the process of converting the XML file into the View object tree by the electronic device can be referred to as the parsing process of the XML file by the electronic device.
  • the electronic device parses the XML file to obtain the View object tree.
  • the layout file (such as XML file) of the user interface is obtained by the developer according to the user interface designed in advance. Developers can choose the View object provided by the Android system or the View object developed by themselves to specify the interface elements in the designed user interface. Finally, the developer uses the programming language to write the View objects corresponding to all the interface elements in the user interface into the program code to form a layout file. In this way, View objects can be divided into system View objects and tripartite View objects according to the provider.
  • the system View object is provided by the Android system and can be used by every developer when designing a user interface.
  • the three-party View object is provided by the application developer. Generally, the electronic device can identify whether it belongs to the system View object or the tripartite View object from the type name of the View object.
  • the type name of the system View object may be "android.widget.Textview", and the prefix of the type name of the system View object is “android”.
  • the type name of the tripartite View object can be "com.sina.weibo.feed.view.MBlogListItemButtonsView", and the prefix of the tripartite View object type name is the name of the application, such as "com.sina.weibo".
  • the electronic device when the application is running, the electronic device creates a process for the application to perform all tasks in the application (for example, accessing the network, displaying the user interface, refreshing the user interface, etc.). Multiple tasks in the application are assigned to threads in the process for specific execution.
  • a process can include one UI thread and multiple non-UI threads.
  • the UI process is used to control the user interface display, refresh, and interface elements to achieve interaction. Non-UI processes are used to perform network access, send messages, and so on. Among them, the UI thread can also be called the main thread.
  • the drawing process of the tripartite View object needs to rely on the data provided in the UI thread for the user interface display.
  • the drawing process of the system View object does not depend on the data provided in the UI thread for the user interface display.
  • the electronic device needs to complete the drawing process of the tripartite View object in the UI thread.
  • the electronic device can complete the drawing process of the system View object in the UI thread, or complete the drawing process of the system View object in the non-UI thread.
  • the electronic device calls the UI thread to perform drawing processing on all View objects parsed from the XML file. Specifically, the electronic device draws the first View object in the UI thread. Then, the electronic device draws the second View object. In turn, the electronic device completes the drawing process of the last View object.
  • the interface drawing may be that the electronic device draws the View object parsed from the XML file into the interface element to be displayed.
  • the input of the interface drawing may include the analysis result in the first process described above, such as the View object, the attributes of the View object, and the parent-child relationship of the View object, and the output is the user interface to be displayed.
  • the interface drawing process can include two steps. In the first step, the electronic device draws multiple View objects into multiple to-be-displayed interface elements in one thread. In the second step, the electronic device nests the multiple drawn interface elements to be displayed into a user interface to be displayed according to the parent-child relationship. After the interface drawing process is completed, the electronic device can obtain a to-be-displayed user interface composed of all to-be-displayed interface elements.
  • the to-be-displayed interface elements drawn by the electronic device according to the View object can be geometric shapes (with attributes such as color, content, width, and height) or text (with attributes such as color, content, width, and height).
  • the graphic or text is rendered as an interface element in the user interface.
  • the interface element to be displayed is a form of data storage (such as an array) inside the electronic device and cannot be seen by the user.
  • FIG. 5 exemplarily shows a schematic diagram of a user interface to be displayed.
  • the user interface 30 to be displayed in FIG. 5 is drawn according to the analysis result shown in FIG. 3.
  • the to-be-displayed user interface is composed of multiple to-be-displayed interface elements nested according to the parent-child relationship. Specifically, the electronic device places the child element to be displayed in the parent interface element to be displayed. In this way, the user interface to be displayed is nested layer by layer. A user interface that is visible to the user after the user interface to be displayed is rendered.
  • the user interface 30 to be displayed includes an interface element to be displayed 300, an interface element to be displayed 301, an interface element to be displayed 302, and an interface element to be displayed 303.
  • the interface element 300 to be displayed is drawn by the View object A in FIG. 4.
  • the interface element 301 to be displayed is drawn by the View object B shown in FIG. 4.
  • the interface element 302 to be displayed is drawn by the View object C shown in FIG. 4.
  • the interface elements to be displayed are drawn by the View object D shown in FIG. 3.
  • the to-be-displayed interface element 303 is nested into the to-be-displayed interface element 301, and the to-be-displayed interface element 301 and the to-be-displayed interface element 302 are nested into the to-be-displayed interface element 300 to obtain the to-be-displayed user interface 30.
  • nesting may mean that the electronic device places one interface element to be displayed in another interface element to be displayed.
  • the to-be-displayed interface element 303 shown in FIG. 5 is placed in the to-be-displayed interface element 301.
  • FIG. 6 shows a possible schematic diagram of the parent-child relationship of View objects.
  • the electronic device may draw the user interface to be displayed according to the schematic diagram of the parent-child relationship of the View object shown in FIG. 6. Then, after the user interface to be displayed is rendered, the user interface 200 shown in FIG. 2 is obtained.
  • the interface elements to be displayed drawn by the View object parsed by the electronic device according to the XML file are also nested one after another according to the hierarchical relationship of the View object.
  • the interface elements obtained after rendering the interface elements to be displayed are also nested layer by layer. For example, the picture 213-2-1 is nested in the short message icon 213-2, and the short message icon 213-2 is nested in the tray 213 of commonly used application icons.
  • the to-be-displayed interface element obtained by drawing the parent View object by the electronic device may be referred to as the parent to-be-displayed interface element.
  • the to-be-displayed interface element obtained by the electronic device drawing the child View object may be referred to as the child-to-be-displayed interface element.
  • rendering refers to the electronic device rendering the user interface to be displayed into a user interface visible to the user.
  • the CPU of the electronic device processes the drawn user interface to be displayed into a multi-dimensional graphic, and textures the graphic.
  • the electronic device calls the GPU to rasterize the graphics.
  • the process of GPU converting graphics into a series of pixels is called rasterization.
  • the electronic device projects the rasterized graphics onto the display screen. In this way, you can get a user interface that the user can see.
  • the View object 202-1 shown in FIG. 6 can be drawn to obtain the corresponding interface element to be displayed.
  • the interface element to be displayed is the WeChat picture 202-1 presented in the user interface 200 shown in FIG. 2.
  • the speed of interface drawing affects the efficiency of the electronic device in presenting the user interface to the user.
  • the View objects parsed by the electronic device from the XML file are drawn one by one. Specifically, after the electronic device performs drawing processing on the first View object in the UI thread, it performs drawing processing on the second View object until the drawing processing on all View objects is completed.
  • FIG. 7 shows a schematic diagram of the interface drawing process of an electronic device provided by the current technology. The electronic device first draws the View object corresponding to the root node in the XML file to obtain the interface elements to be displayed.
  • the electronic device draws the View objects corresponding to the nodes in the XML file one by one in the UI thread according to the parsing order of the nodes in the XML file to obtain the interface elements to be displayed. Finally, the electronic device nests the drawn child interface element to be displayed into the corresponding parent interface element to be displayed.
  • the electronic device may drop frames and freeze when displaying the user interface. Further, when the electronic device displays the user interface, it takes more time to present the user interface to the user, and the user experience is poor.
  • the user interface displayed by the electronic device can be the main interface of the application that is opened when the electronic device starts the application, the user interface after the electronic device refreshes the user interface, or the user after the electronic device jumps to the user interface. interface.
  • an embodiment of the present application provides a method for displaying a user interface.
  • Implementing the method provided in the embodiments of the present application can increase the speed of drawing the interface of the electronic device, thereby quickly displaying the user interface on the display screen, avoiding problems such as frame dropping and freezing, and improving user experience.
  • the electronic device receives a user operation for displaying a user interface.
  • User operations for displaying the user interface may include, but are not limited to: user operations for starting an application and displaying the main interface of the application, operations for refreshing the user interface, and operations for jumping to the user interface.
  • the electronic device obtains the XML file corresponding to the user interface.
  • the electronic device parses the XML file to obtain the View object, the attributes of the View object, and the parent-child relationship between the View objects.
  • the electronic device draws the user interface to be displayed according to the parsed result.
  • the electronic device uses the UI thread to draw the tripartite View object, and uses the non-UI thread to draw the system View object. Finally, the electronic device renders the user interface to be displayed into a user interface visible to the user on the display screen.
  • the electronic device can draw tripartite View objects and system View objects at the same time, and can draw multiple system View objects at the same time. In this way, the electronic device can reduce the time for drawing the interface. Therefore, the electronic device can present the user interface to the user more quickly and improve the user experience.
  • refreshing the user interface may be that the electronic device updates a certain part of the content in the user interface in response to a user operation.
  • the user interface after the refresh of the electronic device is different from the content in the user interface before the refresh.
  • the content in the area 801 may include the content shown by the dashed box 802, the content shown by the dashed box 803, and the content shown by the dashed box 704.
  • the user interface after the refresh of the electronic device may be the user interface 800 shown in FIG. 8B.
  • the content in the dashed box 801 in the refreshed user interface 700 has been updated to the content shown in the dashed box 805, the content shown in the dashed box 806, and the content shown in the dashed box 807.
  • the user operation is not limited to sliding the finger upwards, and can also be sliding the finger downwards to refresh the user interface, which is not limited here.
  • the updated content in the refreshed user interface is also not limited to the content in the dashed box 801 shown in FIG. 8B.
  • the jump user interface may be that after the user touches a certain control or link in the user interface, the user interface displayed in the electronic device changes from the user interface when the user touches it to another user interface.
  • the user interface 90A of FIG. 9A when the user touches the control 901 in the user interface 90A, the electronic device responds to the user's touch operation, and the user interface displayed by the electronic device jumps from the user interface 90A shown in FIG. 9A Go to the user interface 90B as shown in Figure 9B.
  • the method for displaying a user interface provided by an embodiment of the present application will be described below in conjunction with FIG. 10. As shown in FIG. 10, the method for displaying a user interface provided by an embodiment of the present application may include:
  • S1001-S1003 The electronic device parses the XML file corresponding to the user interface.
  • the electronic device receives a user operation for displaying a user interface.
  • the user operation for displaying the user interface may include, but is not limited to: a user operation for starting an application and displaying the main interface of the application, an operation for refreshing the user interface, an operation for jumping to the user interface, etc. .
  • the user operation for starting the application and displaying the main interface of the application may be a tapping operation of the icon of the application by the user.
  • the electronic device starts the application and displays the main interface of the application.
  • the user taps the application icon in the user interface 200 as shown in FIG. 2 (for example, the WeChat icon 202, the QQ icon 203, the Twitter icon 204, etc.).
  • the electronic device starts the application program and displays the main interface of the application program in response to the user's touch operation.
  • the user operation for starting the application and displaying the main interface of the application can also be used by the user to click on the link of the application in other applications.
  • the electronic device In response to the user's operation of clicking the link of the application in other applications, the electronic device starts the application and displays the main interface of the application. For example, the electronic device receives an operation of the user clicking on a Taobao link in WeChat. In response to the operation, the electronic device starts the Taobao application and displays the main interface of the Taobao application.
  • the user operations used to start the application and display the main interface of the application are not limited here.
  • the operation for refreshing the user interface may be an upward sliding finger operation.
  • the electronic device receives the user's upward sliding finger operation, and refreshes the user interface.
  • For how to refresh the user interface of the electronic device according to the user operation please refer to the introduction of refreshing the user interface above, which is not repeated here.
  • the operation for refreshing the user interface may also be a downward sliding finger operation, or the user clicking a refresh button in the user interface, etc., which is not limited here.
  • the operation for jumping to the user interface may be that the user taps a certain control in the user interface.
  • the electronic device receives the user operation and jumps to the user interface.
  • the operation used to jump to the user interface can also be that the user clicks on a link in the user interface, which is not limited here.
  • the electronic device after the electronic device receives a user operation for displaying the user interface, the electronic device obtains the XML file corresponding to the user interface.
  • the electronic device may obtain the XML file corresponding to the user interface from the installation package of the application program corresponding to the user interface.
  • the electronic device may also obtain the XML file corresponding to the user interface from the server of the application developer corresponding to the user interface.
  • the electronic device parses the View object described by each node, the attributes of the View object, and the parent-child relationship between the View objects from the XML file corresponding to the user interface.
  • step S1002 can also be described as follows:
  • the electronic device parses the layout file corresponding to the first user interface to obtain the View object and the attributes of the View object;
  • the layout file includes multiple nodes, and each node is used for Describe one of the View objects;
  • the View object specifies the interface elements in the first user interface;
  • the electronic device can obtain the XML file corresponding to the main interface of the application program started by the electronic device.
  • the XML file corresponding to the main interface of the application can be in the resource package of the application.
  • the electronic device may obtain and store the resource pack of the application program when the application program is installed.
  • the electronic device may also obtain an XML file corresponding to the user interface after the user interface is refreshed.
  • the electronic device may also obtain the XML file corresponding to the user interface after the jump.
  • the following is an example of an XML file.
  • the XML file obtained by the electronic device may be a file composed of the following codes:
  • each node in the XML file has a label at the start and end positions, and the nodes inside the node are child nodes.
  • ⁇ A.> indicates the starting position of the A node
  • ⁇ /A> indicates the ending position of the A node.
  • Nodes B and C in node A are child nodes of node A.
  • Node D in node B is a child node of node B.
  • the electronic device can parse the View object corresponding to each node, the type, color, content width, height, and parent-child relationship between the View objects and so on from the XML file. After the electronic device parses the XML file, the View object tree can be obtained. The electronic device can use the View object tree to store and parse the View object corresponding to each node, the type, color, content width, height, and parent-child relationship between the View objects and so on from the XML file. Regarding how the electronic device parses the XML file, please refer to the process of parsing the XML shown in FIG. 3 above, which will not be repeated here.
  • the electronic device saves the View object, the attributes of the View object, and the parent-child relationship of the View object as a tree structure graph; a node in the tree structure graph represents a View object; in the tree structure graph The node attributes correspond to the attributes of the View object; the subordinate relationship between the nodes in the tree structure graph represents the parent-child relationship between the View objects. In this way, the electronic device can more easily obtain the parent-child relationship between the View objects, and can find the View objects more conveniently.
  • the electronic device creates a parser pointer; the parser pointer points to the node being parsed in the layout file; when the electronic device finishes parsing a node in the layout file, the movement distance of the parser pointer increases first
  • the preset value is a positive integer
  • the electronic device records the movement distance of the parser pointer; the movement distance is used to indicate which node the electronic device resolves to.
  • the electronic device can know which node is currently parsed through the moving distance of the parser pointer, and which node is the first to be parsed. In this way, the electronic device can obtain the parsing order of the View object through the movement distance of the parser pointer.
  • the electronic device uses the moving distance of the parser pointer to determine the position of the node in the XML file.
  • the moving distance of the parser pointer can record the line and node of the XML file to be parsed.
  • the electronic device can point to the current node by a parser pointer.
  • the moving distance of the resolver pointer can be increased by one.
  • a node in the XML file can be composed of one line of program code or multiple lines of program code. There is no limitation here. In this way, the electronic device knows which node in the XML file is parsed according to the pointer distance of the parser. The electronic device does not need to traverse from the first line of the XML file to find which node to parse, which can reduce the parsing time of the XML file.
  • the electronic device can set the layout attribute of the View object.
  • the layout properties of the View object refer to the position, width, height, etc. of the View object on the display screen.
  • the electronic device can set the layout attributes of the View object according to the resolution of the display screen.
  • the electronic device determines, according to the resolution of the display screen, the width and height of the interface element to be displayed drawn by the electronic device according to the View object, and which area of the display screen the interface element to be displayed is rendered to.
  • An electronic device with a larger display screen resolution that is, an electronic device with a larger display screen size), the wider the width and the higher the height of the interface element to be displayed drawn by the electronic device.
  • the electronic device may obtain the resolution of the display screen from the system configuration file of the electronic device.
  • the electronic device records the parsing information of each View object parsed from the XML file.
  • the electronic device records the parsing information of each View object in the parsing XML file.
  • the analysis information includes the parent-child relationship of the View object described by each node and the position of the node in the XML file.
  • the electronic device may use an intermediate object to store the analysis information.
  • the intermediate object created by the electronic device can be:
  • the electronic device after the electronic device records the analysis information of each View object, it splits the parsed View object tree composed of multiple View objects with a parent-child relationship into multiple children according to the recorded analysis information. tree.
  • Figure 6 shows a possible schematic diagram of the parent-child relationship of the View object.
  • the electronic device can split the View parent-child relationship in FIG. 6 into a subtree 21, a subtree 22, a subtree 23, and so on.
  • the subtree is composed of a View object and its child View objects. Among them, there may be multiple levels of child View objects in the subtree, that is, the child View objects may also be the parent View objects of the next level of View objects.
  • the subtree can also have only one View object.
  • the electronic device can determine the size of the subtree after splitting according to the nesting complexity of the View object.
  • a View object can also contain multiple sub-View objects. The more layers of child View objects are contained under a View object, the higher the nesting complexity of this View object.
  • the View object 213 shown in FIG. 6 the View object 213 has a child View object 213-1, a child View object 213-2, and a child View object 213-3.
  • the child View object 213-1 has a child View object 213-1-1 and a child View object 213-1-2.
  • the View object 202 in FIG. 6 has a child View object 202-1 and a child View object 202-2. Neither the child View object 202-1 nor the child View object 202-2 has child View objects.
  • the nesting complexity of the View object 213 is higher than the nesting complexity of the View object 202.
  • Nesting complexity is used to measure how many levels of sub-View objects are nested in a View object. The more layers of sub-View objects a View object contains, the higher the nesting complexity of the View object.
  • S1004-S1007 The electronic device draws the resolved View object to obtain the user interface to be displayed.
  • the electronic device judges whether the parsed View object is a system View object; if not, execute S1005; if yes, execute S1006.
  • the electronic device can determine whether the View object is a system View object or a tripartite View object according to the type of the View object. For example, when the type of the View object is "android.widget.Textview”, then this View object is the system View object. When the type of View object is "com.sina.weibo.feed.view.MBlogListItemButtonsView", then this View object is a tripartite View object. If the name prefix of the type of a View object is "android”, then the View object is a system View object. If the name prefix of a control type is the name of other applications, such as "com.sina.weibo", then this View object is a tripartite View object.
  • the electronic device determines that the parsed View object is not a system View object, and the electronic device draws the View objects into the interface elements to be displayed in order.
  • the electronic device determines that the parsed View object is not a system View object
  • the electronic device draws the View objects into interface elements to be displayed in order.
  • the order in which the electronic device draws the View object may be the parsing order of the nodes in the XML file corresponding to the View object. For example, the electronic device parses the XML file, first parses the View object A corresponding to the A node, then parses the View object B corresponding to the B node, then the View object D corresponding to the D node, and finally the View object corresponding to the C node D.
  • the electronic device draws the interface, it first draws the View object A according to the parsing order of the XML file, then draws the View object B, then draws the View object D, and finally draws the View object C deal with.
  • the electronic device draws the View object as an interface element to be displayed according to the attributes of the View object.
  • the drawn attributes of the interface elements to be displayed correspond to the attributes of the View object. How the electronic device draws the View object into the interface element to be displayed can refer to the interface drawing process of the electronic device described above, which will not be repeated here.
  • the electronic device may draw the View objects one by one in the UI thread into the interface elements to be displayed. It is understandable that, first, the electronic device draws the first tripartite View object in the UI thread. Then, the electronic device draws the second tripartite View object. In turn, the electronic device completes the drawing processing of the last View object in the UI thread.
  • the electronic device determines that the parsed View object is a system View, and the electronic device draws multiple system View objects at the same time to obtain multiple to-be-displayed interface elements.
  • the electronic device can draw multiple system View objects at the same time to obtain multiple to-be-displayed interface elements.
  • the electronic device draws the View object as an interface element to be displayed according to the attributes of the View object.
  • the drawn attributes of the interface elements to be displayed correspond to the attributes of the View object.
  • the electronic device calls multiple threads at the same time to draw multiple system View objects. After each thread completes the drawing processing of the first system View object allocated to the thread, the electronic device performs drawing processing on the second system View object allocated to the thread.
  • System View objects do not need to be drawn one by one in a thread in order, so that the interface drawing time of the electronic device can be reduced.
  • the electronic device may use multiple non-UI threads to simultaneously perform drawing processing on the system View object. In this way, the time for the electronic device to draw the interface can be reduced.
  • the electronic device can adjust the number of non-UI threads used to draw system View objects according to the current CPU usage rate and the number of subtrees.
  • the higher the CPU usage rate the fewer non-UI threads the electronic device uses to draw system View objects. For example, if the current CPU usage rate is greater than 90%, only the UI thread is used to draw the View object. If the current CPU usage is greater than 60% and less than 90%, a non-UI thread is used to draw the system View object. If the current CPU utilization is less than 60%, two non-UI threads are used to draw the system View object.
  • the greater the number of subtrees the more non-UI threads the electronic device can choose to use to draw system View objects.
  • the electronic device will adjust the number of non-UI threads according to the CPU usage. In this way, it is possible to reduce the problems of electronic device jams or system crashes caused by too many non-UI threads.
  • the electronic device may determine the number of non-UI threads according to the nesting complexity of the subtree. The higher the nesting complexity of the subtree, the more non-UI threads the electronic device can choose to use to draw the system view.
  • the electronic device may determine the number of non-UI threads according to the number of system View objects. The greater the number of system View objects, the more non-UI threads the electronic device can choose to use to draw system View objects.
  • the electronic device nests the interface elements to be displayed according to the recorded View object analysis information, and obtains the user interface to be displayed.
  • the interface elements to be displayed that the electronic device draws according to the View object are scattered. Electronics needs to nest the interface elements to be displayed according to the analysis information of the View objects corresponding to the interface elements to be displayed.
  • the analysis information may include the parent-child relationship between the View objects and the parsing order of the View objects.
  • the electronic device can start from the to-be-displayed interface element drawn from the View object corresponding to the root node in the XML file, and nest the child-to-be-displayed interface element drawn by the View object corresponding to the child node of the root node to the parent View object corresponding to the root node.
  • the obtained parent interface element to be displayed After all the interface elements to be displayed drawn by the electronic device are nested, they form the user interface to be displayed.
  • the electronic device nests the interface element to be displayed as the user interface to be displayed, which specifically includes: the electronic device places the interface element to be displayed corresponding to the child View object according to the parent-child relationship between the View objects To the interface element to be displayed corresponding to the parent View object; the child View object and the parent View object have a parent-child relationship.
  • the electronic device obtains the parent-child relationship between the View objects, and then uses the parent-child relationship between the View objects to nest interface elements to be displayed. In this way, nesting errors in the user interface to be displayed can be avoided. In this way, the electronic device can also nest the display interface elements more accurately.
  • the electronic device nests the interface elements to be displayed as the user interface to be displayed, which specifically includes: the electronic device sequentially nests the interface elements to be displayed corresponding to the View objects according to the resolution order of the View objects to obtain the to-be-displayed interface elements.
  • the user interface is displayed.
  • the electronic device can nest the to-be-displayed interface element corresponding to the child View object to the to-be-displayed corresponding to the parent View object in the order of resolution of each child View object. Interface elements.
  • the electronic device may traverse in the middle order to nest all the drawn interface elements to be displayed.
  • Middle-order traversal is a kind of binary tree traversal, which can also be called middle-root traversal, middle-order traversal and so on.
  • in-order traversal first traverses the left subtree, then visits the root node, and finally traverses the right subtree.
  • FIG. 5 a schematic diagram of the hierarchical relationship between the parsed View objects is shown in FIG. 5. After the electronic device draws the View object A, the View object B, the View object C, and the View object D, the user interface 300 to be displayed as shown in FIG. 5 is obtained.
  • the electronic device can nest the to-be-displayed interface elements drawn by each View object according to the recorded analysis record of each View object and the position of each View object in the XML file.
  • the electronic device traverses in the middle order and first nests the interface element to be displayed 303 drawn by the View object D into the interface element to be displayed 301 drawn by the View object B. Then, the electronic device nests the to-be-displayed interface element 301 drawn by the View object B into the to-be-displayed interface element 301 drawn by the View object A. Finally, the electronic device nests the to-be-displayed interface element 302 drawn by the View object C into the to-be-displayed interface element 300 drawn by the View object A.
  • the electronic device determines whether the nested interface element to be displayed has child interface elements to be displayed. If so, the electronic device nests the child interface element to be displayed into the parent interface element to be displayed. In this way, it can be avoided that the child to-be-displayed interface elements that are currently nested to the parent to-be-displayed interface element have missing child-to-be-displayed interface elements are not nested during nesting.
  • the electronic device renders the to-be-displayed user interface into a user interface.
  • step S1008 reference may be made to the rendering process of the electronic device described above, which will not be repeated here.
  • the electronic device sets the position, width, and height of the interface elements in the first user interface on the display screen according to the resolution of the display screen; the electronic device renders the user interface to be displayed into a user interface, specifically It includes: the electronic device renders the user interface to be displayed into a user interface according to the layout attribute, and the interface elements in the user interface obtained after rendering conform to the layout attribute.
  • the electronic device sets the size of the interface element to be displayed according to the size of the display screen. In this way, the user interface rendered by the electronic device can be more adapted to the display screen.
  • the electronic device when the electronic device starts an application or refreshes the user interface, the electronic device obtains and parses the designated XML file. Then the electronic device draws the View object parsed from the XML file. The electronic device uses UI threads to draw tripartite views, and uses multiple non-UI threads to draw system views at the same time. Finally, the electronic device nests the drawn interface element to be displayed into the parent interface element to be displayed, and the user interface to be displayed is obtained after the nesting is completed. Finally, the electronic device renders the user interface to be displayed into a user interface. In this way, the electronic device can save interface drawing time. As a result, the electronic device can display the user interface faster and improve the user experience.
  • FIG. 11 shows a schematic diagram of the structure of the electronic device 100.
  • the electronic device 100 may have more or fewer components than shown in the figure, may combine two or more components, or may have different component configurations.
  • the various components shown in the figure may be implemented in hardware, software, or a combination of hardware and software including one or more signal processing and/or application specific integrated circuits.
  • the electronic device 100 may include a processor 110, an external memory interface 120, an internal memory 121, a universal serial bus (USB) interface 130, a charging management module 140, a power management module 141, a battery 142, an antenna 1, and an antenna 2.
  • Mobile communication module 150 wireless communication module 160, audio module 170, speaker 170A, receiver 170B, microphone 170C, earphone jack 170D, sensor module 180, buttons 190, motor 191, indicator 192, camera 193, display screen 194, and Subscriber identification module (subscriber identification module, SIM) card interface 195, etc.
  • SIM Subscriber identification module
  • the sensor module 180 may include a pressure sensor 180A, a gyroscope sensor 180B, an air pressure sensor 180C, a magnetic sensor 180D, an acceleration sensor 180E, a distance sensor 180F, a proximity light sensor 180G, a fingerprint sensor 180H, a temperature sensor 180J, a touch sensor 180K, and ambient light Sensor 180L, bone conduction sensor 180M, etc.
  • the structure illustrated in the embodiment of the present invention does not constitute a specific limitation on the electronic device 100.
  • the electronic device 100 may include more or fewer components than shown, or combine certain components, or split certain components, or arrange different components.
  • the illustrated components can be implemented in hardware, software, or a combination of software and hardware.
  • the processor 110 may include one or more processing units.
  • the processor 110 may include an application processor (AP), a modem processor, a graphics processing unit (GPU), and an image signal processor. (image signal processor, ISP), controller, memory, video codec, digital signal processor (digital signal processor, DSP), baseband processor, and/or neural-network processing unit (NPU) Wait.
  • AP application processor
  • modem processor modem processor
  • GPU graphics processing unit
  • image signal processor image signal processor
  • ISP image signal processor
  • controller memory
  • video codec digital signal processor
  • DSP digital signal processor
  • NPU neural-network processing unit
  • the different processing units may be independent devices or integrated in one or more processors.
  • the controller may be the nerve center and command center of the electronic device 100.
  • the controller can generate operation control signals according to the instruction operation code and timing signals to complete the control of fetching and executing instructions.
  • a memory may also be provided in the processor 110 to store instructions and data.
  • the memory in the processor 110 is a cache memory.
  • the memory can store instructions or data that the processor 110 has just used or used cyclically. If the processor 110 needs to use the instruction or data again, it can be directly called from the memory. Repeated accesses are avoided, the waiting time of the processor 110 is reduced, and the efficiency of the system is improved.
  • the processor 110 may include one or more interfaces.
  • Interfaces can include integrated circuit (I2C) interfaces, integrated circuit built-in audio (inter-integrated circuit sound, I2S) interfaces, pulse code modulation (PCM) interfaces, universal asynchronous transmitters receiver/transmitter, UART) interface, mobile industry processor interface (MIPI), general-purpose input/output (GPIO) interface, subscriber identity module (SIM) interface, and / Or Universal Serial Bus (USB) interface, etc.
  • I2C integrated circuit
  • I2S integrated circuit built-in audio
  • PCM pulse code modulation
  • UART mobile industry processor interface
  • MIPI mobile industry processor interface
  • GPIO general-purpose input/output
  • SIM subscriber identity module
  • USB Universal Serial Bus
  • the I2C interface is a bidirectional synchronous serial bus, which includes a serial data line (SDA) and a serial clock line (SCL).
  • the processor 110 may include multiple sets of I2C buses.
  • the processor 110 may couple the touch sensor 180K, the charger, the flash, the camera 193, etc., respectively through different I2C bus interfaces.
  • the processor 110 may couple the touch sensor 180K through an I2C interface, so that the processor 110 and the touch sensor 180K communicate through an I2C bus interface to implement the touch function of the electronic device 100.
  • the I2S interface can be used for audio communication.
  • the processor 110 may include multiple sets of I2S buses.
  • the processor 110 may be coupled with the audio module 170 through an I2S bus to implement communication between the processor 110 and the audio module 170.
  • the audio module 170 may transmit audio signals to the wireless communication module 160 through an I2S interface, so as to realize the function of answering calls through a Bluetooth headset.
  • the PCM interface can also be used for audio communication to sample, quantize and encode analog signals.
  • the audio module 170 and the wireless communication module 160 may be coupled through a PCM bus interface.
  • the audio module 170 may also transmit audio signals to the wireless communication module 160 through the PCM interface, so as to realize the function of answering calls through the Bluetooth headset. Both the I2S interface and the PCM interface can be used for audio communication.
  • the UART interface is a universal serial data bus used for asynchronous communication.
  • the bus can be a two-way communication bus. It converts the data to be transmitted between serial communication and parallel communication.
  • the UART interface is generally used to connect the processor 110 and the wireless communication module 160.
  • the processor 110 communicates with the Bluetooth module in the wireless communication module 160 through the UART interface to realize the Bluetooth function.
  • the audio module 170 may transmit audio signals to the wireless communication module 160 through a UART interface, so as to realize the function of playing music through a Bluetooth headset.
  • the MIPI interface can be used to connect the processor 110 with the display screen 194, the camera 193 and other peripheral devices.
  • the MIPI interface includes a camera serial interface (camera serial interface, CSI), a display serial interface (display serial interface, DSI), and so on.
  • the processor 110 and the camera 193 communicate through a CSI interface to implement the shooting function of the electronic device 100.
  • the processor 110 and the display screen 194 communicate through a DSI interface to realize the display function of the electronic device 100.
  • the GPIO interface can be configured through software.
  • the GPIO interface can be configured as a control signal or as a data signal.
  • the GPIO interface can be used to connect the processor 110 with the camera 193, the display screen 194, the wireless communication module 160, the audio module 170, the sensor module 180, and so on.
  • the GPIO interface can also be configured as an I2C interface, I2S interface, UART interface, MIPI interface, etc.
  • the USB interface 130 is an interface that complies with the USB standard specification, and specifically may be a Mini USB interface, a Micro USB interface, a USB Type C interface, and so on.
  • the USB interface 130 can be used to connect a charger to charge the electronic device 100, and can also be used to transfer data between the electronic device 100 and peripheral devices. It can also be used to connect earphones and play audio through earphones. This interface can also be used to connect to other electronic devices, such as AR devices.
  • the interface connection relationship between the modules illustrated in the embodiment of the present invention is merely a schematic description, and does not constitute a structural limitation of the electronic device 100.
  • the electronic device 100 may also adopt different interface connection modes in the foregoing embodiments, or a combination of multiple interface connection modes.
  • the charging management module 140 is used to receive charging input from the charger.
  • the charger can be a wireless charger or a wired charger.
  • the charging management module 140 may receive the charging input of the wired charger through the USB interface 130.
  • the charging management module 140 may receive the wireless charging input through the wireless charging coil of the electronic device 100. While the charging management module 140 charges the battery 142, it can also supply power to the electronic device through the power management module 141.
  • the power management module 141 is used to connect the battery 142, the charging management module 140 and the processor 110.
  • the power management module 141 receives input from the battery 142 and/or the charge management module 140, and supplies power to the processor 110, the internal memory 121, the external memory, the display screen 194, the camera 193, and the wireless communication module 160.
  • the power management module 141 can also be used to monitor parameters such as battery capacity, battery cycle times, and battery health status (leakage, impedance).
  • the power management module 141 may also be provided in the processor 110.
  • the power management module 141 and the charging management module 140 may also be provided in the same device.
  • the wireless communication function of the electronic device 100 can be implemented by the antenna 1, the antenna 2, the mobile communication module 150, the wireless communication module 160, the modem processor, and the baseband processor.
  • the antenna 1 and the antenna 2 are used to transmit and receive electromagnetic wave signals.
  • Each antenna in the electronic device 100 can be used to cover a single or multiple communication frequency bands. Different antennas can also be reused to improve antenna utilization.
  • Antenna 1 can be multiplexed as a diversity antenna of a wireless local area network.
  • the antenna can be used in combination with a tuning switch.
  • the mobile communication module 150 can provide a wireless communication solution including 2G/3G/4G/5G and the like applied to the electronic device 100.
  • the mobile communication module 150 may include at least one filter, switch, power amplifier, low noise amplifier (LNA), etc.
  • the mobile communication module 150 can receive electromagnetic waves by the antenna 1, and perform processing such as filtering, amplifying and transmitting the received electromagnetic waves to the modem processor for demodulation.
  • the mobile communication module 150 can also amplify the signal modulated by the modem processor, and convert it into electromagnetic wave radiation via the antenna 1.
  • at least part of the functional modules of the mobile communication module 150 may be provided in the processor 110.
  • at least part of the functional modules of the mobile communication module 150 and at least part of the modules of the processor 110 may be provided in the same device.
  • the modem processor may include a modulator and a demodulator.
  • the modulator is used to modulate the low frequency baseband signal to be sent into a medium and high frequency signal.
  • the demodulator is used to demodulate the received electromagnetic wave signal into a low-frequency baseband signal. Then the demodulator transmits the demodulated low-frequency baseband signal to the baseband processor for processing. After the low-frequency baseband signal is processed by the baseband processor, it is passed to the application processor.
  • the application processor outputs a sound signal through an audio device (not limited to the speaker 170A, the receiver 170B, etc.), or displays an image or video through the display screen 194.
  • the modem processor may be an independent device. In other embodiments, the modem processor may be independent of the processor 110 and be provided in the same device as the mobile communication module 150 or other functional modules.
  • the wireless communication module 160 can provide applications on the electronic device 100 including wireless local area networks (WLAN) (such as wireless fidelity (Wi-Fi) networks), bluetooth (BT), and global navigation satellites.
  • WLAN wireless local area networks
  • BT wireless fidelity
  • GNSS global navigation satellite system
  • FM frequency modulation
  • NFC near field communication technology
  • infrared technology infrared, IR
  • the wireless communication module 160 may be one or more devices integrating at least one communication processing module.
  • the wireless communication module 160 receives electromagnetic waves via the antenna 2, frequency modulates and filters the electromagnetic wave signals, and sends the processed signals to the processor 110.
  • the wireless communication module 160 may also receive the signal to be sent from the processor 110, perform frequency modulation, amplify it, and convert it into electromagnetic waves to radiate through the antenna 2.
  • the antenna 1 of the electronic device 100 is coupled with the mobile communication module 150, and the antenna 2 is coupled with the wireless communication module 160, so that the electronic device 100 can communicate with the network and other devices through wireless communication technology.
  • the wireless communication technology may include global system for mobile communications (GSM), general packet radio service (GPRS), code division multiple access (CDMA), broadband Code division multiple access (wideband code division multiple access, WCDMA), time-division code division multiple access (TD-SCDMA), long term evolution (LTE), BT, GNSS, WLAN, NFC , FM, and/or IR technology, etc.
  • the GNSS may include global positioning system (GPS), global navigation satellite system (GLONASS), Beidou navigation satellite system (BDS), quasi-zenith satellite system (quasi -zenith satellite system, QZSS) and/or satellite-based augmentation systems (SBAS).
  • GPS global positioning system
  • GLONASS global navigation satellite system
  • BDS Beidou navigation satellite system
  • QZSS quasi-zenith satellite system
  • SBAS satellite-based augmentation systems
  • the electronic device 100 realizes the function of displaying a user interface through a GPU, a display screen 194, an application processor, and the like.
  • the GPU is an image processing microprocessor, which is connected to the display screen 194 and the application processor.
  • the GPU is used to perform mathematical and geometric calculations for graphics rendering.
  • the processor 110 may include one or more GPUs, which execute program instructions to generate or change display information.
  • the display screen 194 is used to display images, videos, and the like.
  • the display screen 194 includes a display panel.
  • the display panel can adopt liquid crystal display (LCD), organic light-emitting diode (OLED), active matrix organic light-emitting diode or active-matrix organic light-emitting diode (active-matrix organic light-emitting diode).
  • LCD liquid crystal display
  • OLED organic light-emitting diode
  • active-matrix organic light-emitting diode active-matrix organic light-emitting diode
  • emitting diode AMOLED, flexible light-emitting diode (FLED), Miniled, MicroLed, Micro-oLed, quantum dot light-emitting diode (QLED), etc.
  • the electronic device 100 may include one or N display screens 194, and N is a positive integer greater than one.
  • the electronic device 100 can realize a shooting function through an ISP, a camera 193, a video codec, a GPU, a display screen 194, and an application processor.
  • the ISP is used to process the data fed back by the camera 193. For example, when taking a picture, the shutter is opened, the light is transmitted to the photosensitive element of the camera through the lens, the light signal is converted into an electrical signal, and the photosensitive element of the camera transmits the electrical signal to the ISP for processing and is converted into an image visible to the naked eye.
  • ISP can also optimize the image noise, brightness, and skin color. ISP can also optimize the exposure, color temperature and other parameters of the shooting scene.
  • the ISP may be provided in the camera 193.
  • the camera 193 is used to capture still images or videos.
  • the object generates an optical image through the lens and is projected to the photosensitive element.
  • the photosensitive element may be a charge coupled device (CCD) or a complementary metal-oxide-semiconductor (CMOS) phototransistor.
  • CMOS complementary metal-oxide-semiconductor
  • the photosensitive element converts the optical signal into an electrical signal, and then transfers the electrical signal to the ISP to convert it into a digital image signal.
  • ISP outputs digital image signals to DSP for processing.
  • DSP converts digital image signals into standard RGB, YUV and other formats of image signals.
  • the electronic device 100 may include one or N cameras 193, and N is a positive integer greater than one.
  • Digital signal processors are used to process digital signals. In addition to digital image signals, they can also process other digital signals. For example, when the electronic device 100 selects a frequency point, the digital signal processor is used to perform Fourier transform on the energy of the frequency point.
  • Video codecs are used to compress or decompress digital video.
  • the electronic device 100 may support one or more video codecs. In this way, the electronic device 100 can play or record videos in multiple encoding formats, such as: moving picture experts group (MPEG) 1, MPEG2, MPEG3, MPEG4, and so on.
  • MPEG moving picture experts group
  • MPEG2 MPEG2, MPEG3, MPEG4, and so on.
  • NPU is a neural-network (NN) computing processor.
  • NN neural-network
  • applications such as intelligent cognition of the electronic device 100 can be realized, such as image recognition, face recognition, voice recognition, text understanding, and so on.
  • the external memory interface 120 may be used to connect an external memory card, such as a Micro SD card, to expand the storage capacity of the electronic device 100.
  • the external memory card communicates with the processor 110 through the external memory interface 120 to realize the data storage function. For example, save music, video and other files in an external memory card.
  • the internal memory 121 may be used to store computer executable program code, where the executable program code includes instructions.
  • the processor 110 executes various functional applications and data processing of the electronic device 100 by running instructions stored in the internal memory 121.
  • the internal memory 121 may include a storage program area and a storage data area.
  • the storage program area can store an operating system, at least one application program (such as a sound playback function, an image playback function, etc.) required by at least one function.
  • the data storage area can store data (such as audio data, phone book, etc.) created during the use of the electronic device 100.
  • the internal memory 121 may include a high-speed random access memory, and may also include a non-volatile memory, such as at least one magnetic disk storage device, a flash memory device, a universal flash storage (UFS), and the like.
  • UFS universal flash storage
  • the electronic device 100 can implement audio functions through the audio module 170, the speaker 170A, the receiver 170B, the microphone 170C, the earphone interface 170D, and the application processor. For example, music playback, recording, etc.
  • the audio module 170 is used to convert digital audio information into an analog audio signal for output, and is also used to convert an analog audio input into a digital audio signal.
  • the audio module 170 can also be used to encode and decode audio signals.
  • the audio module 170 may be provided in the processor 110, or part of the functional modules of the audio module 170 may be provided in the processor 110.
  • the speaker 170A also called “speaker” is used to convert audio electrical signals into sound signals.
  • the electronic device 100 can listen to music through the speaker 170A, or listen to a hands-free call.
  • the receiver 170B also called “earpiece” is used to convert audio electrical signals into sound signals.
  • the electronic device 100 answers a call or voice message, it can receive the voice by bringing the receiver 170B close to the human ear.
  • the microphone 170C also called “microphone”, “microphone”, is used to convert sound signals into electrical signals. When making a call or sending a voice message, the user can make a sound by approaching the microphone 170C through the human mouth, and input the sound signal into the microphone 170C.
  • the electronic device 100 may be provided with at least one microphone 170C. In other embodiments, the electronic device 100 may be provided with two microphones 170C, which can implement noise reduction functions in addition to collecting sound signals. In other embodiments, the electronic device 100 may also be provided with three, four or more microphones 170C to collect sound signals, reduce noise, identify sound sources, and realize directional recording functions.
  • the earphone interface 170D is used to connect wired earphones.
  • the earphone interface 170D may be a USB interface 130, or a 3.5mm open mobile terminal platform (OMTP) standard interface, and a cellular telecommunications industry association (cellular telecommunications industry association of the USA, CTIA) standard interface.
  • OMTP open
  • the pressure sensor 180A is used to sense the pressure signal and can convert the pressure signal into an electrical signal.
  • the pressure sensor 180A may be provided on the display screen 194.
  • the capacitive pressure sensor may include at least two parallel plates with conductive material. When a force is applied to the pressure sensor 180A, the capacitance between the electrodes changes.
  • the electronic device 100 determines the intensity of the pressure according to the change in capacitance.
  • the electronic device 100 detects the intensity of the touch operation according to the pressure sensor 180A.
  • the electronic device 100 may also calculate the touched position according to the detection signal of the pressure sensor 180A.
  • touch operations that act on the same touch position but have different touch operation strengths may correspond to different operation instructions. For example, when a touch operation whose intensity of the touch operation is less than the first pressure threshold is applied to the short message application icon, an instruction to view the short message is executed. When a touch operation with a touch operation intensity greater than or equal to the first pressure threshold acts on the short message application icon, an instruction to create a new short message is executed.
  • the gyro sensor 180B may be used to determine the movement posture of the electronic device 100.
  • the angular velocity of the electronic device 100 around three axes ie, x, y, and z axes
  • the gyro sensor 180B can be used for image stabilization.
  • the gyro sensor 180B detects the shake angle of the electronic device 100, calculates the distance that the lens module needs to compensate according to the angle, and allows the lens to counteract the shake of the electronic device 100 through reverse movement to achieve anti-shake.
  • the gyro sensor 180B can also be used for navigation and somatosensory game scenes.
  • the air pressure sensor 180C is used to measure air pressure.
  • the electronic device 100 calculates the altitude based on the air pressure value measured by the air pressure sensor 180C to assist positioning and navigation.
  • the magnetic sensor 180D includes a Hall sensor.
  • the electronic device 100 may use the magnetic sensor 180D to detect the opening and closing of the flip holster.
  • the electronic device 100 can detect the opening and closing of the flip according to the magnetic sensor 180D.
  • features such as automatic unlocking of the flip cover are set.
  • the acceleration sensor 180E can detect the magnitude of the acceleration of the electronic device 100 in various directions (generally three axes). When the electronic device 100 is stationary, the magnitude and direction of gravity can be detected. It can also be used to identify the posture of electronic devices, and apply to applications such as horizontal and vertical screen switching, pedometers and so on. In this application, the electronic device 100 can switch between horizontal and vertical screens, and switch between single-screen display and large-screen display of the folding screen according to changes in the magnitude of acceleration and the magnitude of gravity detected by the acceleration sensor 180E.
  • the electronic device 100 can measure the distance by infrared or laser. In some embodiments, when shooting a scene, the electronic device 100 may use the distance sensor 180F to measure the distance to achieve fast focusing.
  • the proximity light sensor 180G may include, for example, a light emitting diode (LED) and a light detector such as a photodiode.
  • the light emitting diode may be an infrared light emitting diode.
  • the electronic device 100 emits infrared light to the outside through the light emitting diode.
  • the electronic device 100 uses a photodiode to detect infrared reflected light from nearby objects. When sufficient reflected light is detected, it can be determined that there is an object near the electronic device 100. When insufficient reflected light is detected, the electronic device 100 can determine that there is no object near the electronic device 100.
  • the electronic device 100 can use the proximity light sensor 180G to detect that the user holds the electronic device 100 close to the ear to talk, so as to automatically turn off the screen to save power.
  • the proximity light sensor 180G can also be used in leather case mode, and the pocket mode will automatically unlock and lock the screen.
  • the ambient light sensor 180L is used to sense the brightness of the ambient light.
  • the electronic device 100 can adaptively adjust the brightness of the display screen 194 according to the perceived brightness of the ambient light.
  • the ambient light sensor 180L can also be used to automatically adjust the white balance when taking pictures.
  • the ambient light sensor 180L can also cooperate with the proximity light sensor 180G to detect whether the electronic device 100 is in the pocket to prevent accidental touch.
  • the fingerprint sensor 180H is used to collect fingerprints.
  • the electronic device 100 can use the collected fingerprint characteristics to realize fingerprint unlocking, access application locks, fingerprint photographs, fingerprint answering calls, and so on.
  • the temperature sensor 180J is used to detect temperature.
  • the electronic device 100 uses the temperature detected by the temperature sensor 180J to execute a temperature processing strategy. For example, when the temperature reported by the temperature sensor 180J exceeds a threshold value, the electronic device 100 reduces the performance of the processor located near the temperature sensor 180J, so as to reduce power consumption and implement thermal protection.
  • the electronic device 100 when the temperature is lower than another threshold, the electronic device 100 heats the battery 142 to avoid abnormal shutdown of the electronic device 100 due to low temperature.
  • the electronic device 100 boosts the output voltage of the battery 142 to avoid abnormal shutdown caused by low temperature.
  • Touch sensor 180K also called “touch panel”.
  • the touch sensor 180K may be disposed on the display screen 194, and the touch screen is composed of the touch sensor 180K and the display screen 194, which is also called a “touch screen”.
  • the touch sensor 180K is used to detect touch operations acting on or near it.
  • the touch sensor can pass the detected touch operation to the application processor to determine the type of touch event.
  • the visual output related to the touch operation can be provided through the display screen 194.
  • the touch sensor 180K may also be disposed on the surface of the electronic device 100, which is different from the position of the display screen 194.
  • the bone conduction sensor 180M can acquire vibration signals.
  • the bone conduction sensor 180M can obtain the vibration signal of the vibrating bone mass of the human voice.
  • the bone conduction sensor 180M can also contact the human pulse and receive the blood pressure pulse signal.
  • the bone conduction sensor 180M may also be provided in the earphone, combined with the bone conduction earphone.
  • the audio module 170 can parse the voice signal based on the vibration signal of the vibrating bone block of the voice obtained by the bone conduction sensor 180M, and realize the voice function.
  • the application processor can analyze the heart rate information based on the blood pressure beating signal obtained by the bone conduction sensor 180M, and realize the heart rate detection function.
  • the button 190 includes a power-on button, a volume button, and so on.
  • the button 190 may be a mechanical button. It can also be a touch button.
  • the electronic device 100 may receive key input, and generate key signal input related to user settings and function control of the electronic device 100.
  • the motor 191 can generate vibration prompts.
  • the motor 191 can be used for incoming call vibration notification, and can also be used for touch vibration feedback.
  • touch operations that act on different applications can correspond to different vibration feedback effects.
  • Acting on touch operations in different areas of the display screen 194, the motor 191 can also correspond to different vibration feedback effects.
  • Different application scenarios for example: time reminding, receiving information, alarm clock, games, etc.
  • the touch vibration feedback effect can also support customization.
  • the indicator 192 may be an indicator light, which may be used to indicate the charging status, power change, or to indicate messages, missed calls, notifications, and so on.
  • the SIM card interface 195 is used to connect to the SIM card.
  • the SIM card can be inserted into the SIM card interface 195 or pulled out from the SIM card interface 195 to achieve contact and separation with the electronic device 100.
  • the electronic device 100 may support 1 or N SIM card interfaces, and N is a positive integer greater than 1.
  • the SIM card interface 195 can support Nano SIM cards, Micro SIM cards, SIM cards, etc.
  • the same SIM card interface 195 can insert multiple cards at the same time. The types of the multiple cards can be the same or different.
  • the SIM card interface 195 can also be compatible with different types of SIM cards.
  • the SIM card interface 195 may also be compatible with external memory cards.
  • the electronic device 100 interacts with the network through the SIM card to implement functions such as call and data communication.
  • the electronic device 100 adopts an eSIM, that is, an embedded SIM card.
  • the eSIM card can be embedded in the electronic device 100 and cannot be separated from the electronic device 100.
  • the kernel layer, framework layer, and application layer in Fig. 12 correspond to the kernel layer, application framework layer, and application layer in Fig. 1 respectively.
  • the window manager is responsible for the management of the application's user interface resolution.
  • the window management module sends the resolution of the user interface to the view management module and the drawing surface management module.
  • the view manager obtains the XML file of the APP in the application layer, and then parses the View object corresponding to each node in the XML file. Then draw the parsed View object into interface elements to be displayed. And set the layout properties of the control according to the user interface resolution obtained from the window manager.
  • the drawing surface manager composes the to-be-displayed interface elements drawn by the view management module into the to-be-displayed user interface.
  • the display driver is used to display the user interface obtained by rendering the user interface to be displayed.
  • the computer may be implemented in whole or in part by software, hardware, firmware, or any combination thereof.
  • software it can be implemented in the form of a computer program product in whole or in part.
  • the computer program product includes one or more computer instructions.
  • the computer may be a general-purpose computer, a special-purpose computer, a computer network, or other programmable devices.
  • the computer instructions may be stored in a computer-readable storage medium or transmitted from one computer-readable storage medium to another computer-readable storage medium.
  • the computer instructions may be transmitted from a website, computer, server, or data center.
  • the computer-readable storage medium may be any available medium that can be accessed by a computer or a data storage device such as a server or a data center integrated with one or more available media.
  • the usable medium may be a magnetic medium, (for example, a floppy disk, a hard disk, and a magnetic tape), an optical medium (for example, a DVD), or a semiconductor medium (for example, a solid state disk).

Abstract

一种显示用户界面的方法,包括:电子设备接收到用于显示用户界面的用户操作。然后,电子设备获取用户界面对应的XML文件。接着,电子设备对XML文件进行解析得到View对象、View对象的属性以及View对象之间的父子关系。然后,电子设备根据解析出的结果绘制得到待显示用户界面。具体地,电子设备利用UI线程对三方View对象进行绘制处理,利用非UI线程对系统View对象进行绘制处理。最后,电子设备将待显示用户界面渲染成显示屏上用户可见的用户界面。这样,电子设备可以减少界面绘制的时间。从而,电子设备可以更快地为用户呈现用户界面,提升用户体验。

Description

显示用户界面的方法及电子设备
本申请要求于2019年08月23日提交中国专利局、申请号为201910787833.X、申请名称“显示用户界面的方法及电子设备”的中国专利申请的优先权,其全部内容通过引用结合在本申请中。
技术领域
本发明涉及电子技术领域,特别涉及应用在电子设备的显示用户界面的方法及电子设备。
背景技术
目前,电子设备可以提供和用户实现交互的用户界面(user interface,UI)。用户界面中包含图标、窗口、控件等界面元素,其中控件可以包括图片、按钮、菜单、选项卡、文本框、对话框、状态栏、导航栏、Widget等可视的界面元素。界面中的界面元素的属性和内容是通过标签或者节点来定义的,比如XML(Extensible Markup Language,可扩展标记语言)通过节点描述的View对象来规定界面所包含的界面元素。XML文件中一个节点描述了一个view对象。XML文件解析之后得到View对象。电子设备通过界面绘制过程将View对象绘制为待显示界面元素。最后,待显示界面元素经过渲染之后为呈现在用户界面中的界面元素。
界面绘制的速度影响到电子设备为用户呈现用户界面的效率,为了提升用户体验,如何提高界面绘制的速度是业界研究的方向。
发明内容
本申请实施例提供了一种显示用户界面的方法,按照该方法显示用户界面可以节约电子设备为用户呈现用户界面的时间,从而可以提升用户体验。
第一方面,提供一种用于电子设备显示用户界面的方法,该方法可包括:电子设备接收到用于显示第一用户界面的用户操作;响应于所述用户操作,所述电子设备解析所述第一用户界面对应的布局文件,获取View对象、所述View对象的属性;所述布局文件包括多个节点,每个节点用于描述一个所述View对象;所述View对象规定了所述第一用户界面中的界面元素;所述电子设备根据所述View对象的属性,并行绘制所述View对象中的系统View对象,逐一绘制所述View对象中的三方View对象,生成和所述View对象对应的待显示界面元素;其中,由Android标准提供的View对象为所述系统View对象,非Android标准提供的View对象为所述三方View对象;所述待显示界面元素是具有几何形状和内容的文字或图片;所述电子设备将所述待显示界面元素嵌套为待显示用户界面;所述电子设备将所述待显示用户界面渲染成所述第一用户界面;所述电子设备在显示屏上显示所述第一用户界面。电子设备在绘制阶段可以并行绘制多个系统View对象,从而可以提高绘制View对象的效率。这样,电子设备可以更快地向用户呈现用户界面,从而可以提升用户体验。
结合第一方面,在一种可能的实现方式中,所述电子设备并行绘制所述View对象中的系统View对象,逐一绘制所述View对象中的三方View对象,生成和所述View对象对应的待显示界面元素包括:所述电子设备调用多个非UI线程并行绘制所述系统View对象,生成和所述系统View对象对应的所述待显示界面元素;每个所述非UI线程一次绘制一个所述系统View对象;所述电子设备调用UI线程逐一绘制所述三方View对象,生成和所述三方View对象对应的所述待显示界面元素;所述UI线程一次绘制一个三方View对象;其中,所述电子设备为所述第一用户界面对应的应用程序创建的一个进程中包含一个或多个线程,在所述 一个或多个线程中,唯一的用于显示用户界面以及实现用户界面交互功能的主线程为所述UI线程,所述UI线程以外的其他线程为所述非UI线程。这样,电子设备在利用多个非UI线程绘制系统View对象,可以提高绘制的效率。这样,电子设备可以更快地完成View对象的绘制。
结合第一方面,在一种可能的实现方式中,所述非UI线程的数量由所述电子设备的CPU使用率确定;所述CPU使用率越高,所述非UI线程数量越少。这样,可以避免在CPU使用率高的时候,调用了过多的非UI线程绘制系统View对象而使得电子设备卡顿或者系统崩溃。
结合第一方面,在一种可能的实现方式中,所述非UI线程的数量由所述View对象中包含的系统View对象的数量确定;所述系统View对象的数量越多,所述非UI线程数量越多。电子设备根据View对象的数量来调整调用的非UI线程数量。这样,电子设备可以更快地、更有效率地完成View对象的绘制。
结合第一方面,在一种可能的实现方式中,所述电子设备接收到用于显示第一用户界面的用户操作之后,所述方法还包括:所述电子设备解析所述第一用户界面对应的布局文件,获取所述View对象之间的父子关系;所述电子设备将所述待显示界面元素嵌套为待显示用户界面,具体包括:所述电子设备根据所述View对象之间的父子关系,将子View对象对应的待显示界面元素放置到到父View对象对应的待显示界面元素中;所述子View对象和所述父View对象具有父子关系。电子设备获取到View对象之间的父子关系,然后利用View对象之间的父子关系来嵌套待显示界面元素。这样,可以避免嵌套得到待显示用户界面出现嵌套错误。这样,电子设备也可以更准确地对待显示界面元素进行嵌套。
结合第一方面,在一种可能的实现方式中,所述电子设备解析所述第一用户界面对应的布局文件,获取所述View对象之间的父子关系之后,所述方法还包括:所述电子设备将所述View对象、所述View对象的属性以及所述View对象的父子关系保存为树形结构图形;所述树形结构图形中的一个节点表征一个所述View对象;所述树形结构图形中的节点属性对应所述View对象的属性;所述树形结构图形中节点之间的上下级关系表征所述View对象之间的父子关系。这样,电子设备可以更容易获取到View对象之间的父子关系,以及可以更方便地查找到View对象。
结合第一方面,在一种可能的实现方式中,所述树形结构图形包含多个子树,所述子树的数量越多,所述非UI线程数量越多;所述子树描述了一部分具有父子关系的View对象。电子设备可以将树形结构图形分为多个子树去进行View对象的绘制,然后根据子树的数量来调整非UI线程的数量。这样,电子设备可以更快地完成对View对象的绘制。
结合第一方面,在一种可能的实现方式中,所述电子设备解析所述第一用户界面对应的布局文件之后,所述方法还包括:所述电子设备记录解析所述布局文件时,所述View对象的解析顺序;所述电子设备将所述待显示界面元素嵌套为待显示用户界面,具体包括:所述电子设备按照所述View对象的解析顺序,依次嵌套所述View对象对应的待显示界面元素,得到待显示用户界面。这样,当待显示界面元素对应的View对象有多个子View对象时,电子设备可以按照每个子View对象的解析顺序依次将子View对象对应的待显示界面元素嵌套到父View对象对应的待显示界面元素中。
结合第一方面,在一种可能的实现方式中,所述电子设备记录解析所述布局文件时,所述View对象的解析顺序包括:所述电子设备创建中间对象;所述中间对象是一种数据结构;所述电子设备使用所述中间对象记录所述View对象的解析顺序以及所述View对象之间的父 子关系。这样,电子设备不需要去树形结构图形中去查找View对象的解析顺序,直接通过查找中间对象就可以获取View对象的解析顺序。
结合第一方面,在一种可能的实现方式中,所述用户操作包括:用于启动应用程序并显示所述应用程序提供的主界面的用户操作、用于刷新用户界面的操作、用于跳转用户界面的操作。
结合第一方面,在一种可能的实现方式中,所述View对象的属性包括:所述View对象的类型、颜色、ID、内容、所述View对象之间的相对位置、相对宽度和相对高度。
结合第一方面,在一种可能的实现方式中,所述电子设备对布局文件进行解析处理包括:所述电子设备创建解析器指针;所述解析器指针指向所述布局文件中正在解析的节点;当所述电子设备解析完所述布局文件中的一个节点时,所述解析器指针的移动距离增加第一预设值;所述第一预设值为正整数;电子设备记录所述解析器指针的移动距离;所述移动距离用来指示所述电子设备解析到第几个节点。电子设备可以通过解析器指针的移动距离获知当前解析到第几个节点,以及这些节点是第几个开始解析的。这样,电子设备通过解析器指针的移动距离可以获取到View对象的解析顺序。
结合第一方面,在一种可能的实现方式中,所述电子设备解析所述第一用户界面对应的布局文件之后,所述方法还包括:所述电子设备根据所述显示屏的分辨率设置所述第一用户界面中的界面元素在显示屏中的位置和宽度、高度;所述电子设备将所述待显示用户界面渲染成所述第一用户界面,具体包括:所述电子设备根据所述布局属性将所述待显示用户界面渲染成所述第一用户界面,渲染得到后的所述第一用户界面中的界面元素符合所述布局属性。电子设备根据显示屏的大小来设置待显示界面元素的大小。这样,电子设备渲染出的第一用户界面可以更适应显示屏。
结合第一方面,在一种可能的实现方式中,所述电子设备解析所述第一用户界面对应的布局文件之后,所述方法还包括:所述电子设备根据所述View对象所属类型的名称判断所述View对象是否为系统View对象;若所述View对象所属类型的名称由所述电子设备操作系统的名称组成,则所述View对象为系统View对象;若所述View对象类型名称由应用程序的名称组成,则所述View对象为三方View对象。这样,电子设备可以判断出View对象是否为系统View对象。
结合第一方面,在一种可能的实现方式中,电子设备判断正在嵌套的待显示界面元素是否有子待显示界面元素。若有,则电子设备将子待显示界面元素嵌套到父待显示界面元素中。这样,可以避免在嵌套时当前正在嵌套到父待显示界面元素的待显示界面元素有遗漏的子待显示界面元素没有嵌套。
在一种可能的实现方式中,电子设备可以根据子树的嵌套复杂度来决定非UI线程的数量。子树嵌套复杂度越高,电子设备可以选择利用越多的非UI线程来绘制系统View对象。
第二方面,提供一种电子设备,包括:通信接口、存储器和处理器;所述通信接口、所述存储器与所述处理器耦合,所述存储器用于存储计算机程序代码,所述计算机程序代码包括计算机指令,当所述处理器从所述存储器中读取所述计算机指令,以使得所述电子设备执行如第一方面中任一种可能的实现方式。
第三方面,提供一种计算机可读存储介质,包括指令,其特征在于,当上述指令在电子设备上运行时,以使得电子涉笔执行如第一方面中任一种可能的实现方式。
第四方面,提供一种计算机产品当所述计算机程序产品在计算机上运行时,使得所述计算机执行如第一方面中任一种可能的实现方式。
附图说明
为了更清楚地说明本申请实施例中的技术方案,下面将对本申请实施例中所需要使用的附图进行说明。
图1为本申请实施例提供的电子设备的软件结构的示意图;
图2为本申请实施例提供的电子设备上的用于应用程序菜单的用户界面的示意图;
图3为本申请实施例提供的XML文件内容示意图;
图4为本申请实施例提供的电子设备解析XML文件后得到的结果示意图;
图5为本申请实施例提供的电子设备的待显示用户界面示意图;
图6为本申请实施例提供的View对象之间的父子关系示意图;
图7为现在技术提供的电子设备进行界面绘制的流程示意图;
图8A为本申请实施例提供的用户通过滑动操作刷新用户界面示意图;
图8B为本申请实施例提供的刷新后用户界面示意图;
图9A为本申请实施例提供的用户通过点触操作刷新用户界面示意图;
图9B为本申请实施例提供的另一刷新后用户界面示意图;
图10为本申请实施例提供的显示用户界面的方法流程示意图;
图11为本申请实施例提供的电子设备的结构的示意性图;
图12为本申请提供的电子设备的软硬件实现本申请的显示用户界面的示意图。
具体实施方式
本申请以下实施例中所使用的术语只是为了描述特定实施例的目的,而并非旨在作为对本申请的限制。如在本申请的说明书和所附权利要求书中所使用的那样,单数表达形式“一个”、“一种”、“所述”、“上述”、“该”和“这一”旨在也包括复数表达形式,除非其上下文中明确地有相反指示。还应当理解,本申请中使用的术语“和/或”是指并包含一个或多个所列出项目的任何或所有可能组合。
以下介绍了电子设备、用于这样的电子设备的用户界面、和用于使用这样的电子设备的实施例。在一些实施例中,电子设备可以是还包含其它功能诸如个人数字助理和/或音乐播放器功能的便携式电子设备,诸如手机、平板电脑、具备无线通讯功能的可穿戴电子设备(如智能手表)等。便携式电子设备的示例性实施例包括但不限于搭载iOS、Android、Microsoft或者其它操作系统的便携式电子设备。上述便携式电子设备也可以是其它便携式电子设备,诸如具有触敏表面或触控面板的膝上型计算机(Laptop)等。还应当理解的是,在其他一些实施例中,上述电子设备也可以不是便携式电子设备,而是具有触敏表面或触控面板的台式计算机。
下面首先介绍本申请涉及的电子设备的软体结构。电子设备的软件系统可以采用分层架构,事件驱动架构,微核架构,微服务架构,或云架构。本发明实施例以分层架构的Android系统为例,示例性说明电子设备的软件结构。
图1是本发明实施例的电子设备的软件结构框图。
分层架构将软件分成若干个层,每一层都有清晰的角色和分工。层与层之间通过软件接口通信。在一些实施例中,将Android系统分为四层,从上至下分别为应用程序层,应用程序框架层,安卓运行时(Android runtime)和系统库,以及内核层。
应用程序层可以包括一系列应用程序包。
如图1所示,应用程序包可以包括相机,图库,日历,通话,地图,导航,WLAN,蓝牙,音乐,视频,短信息等应用程序(也可以称为应用)。
应用程序框架层为应用程序层的应用程序提供应用编程接口(application programming interface,API)和编程框架。应用程序框架层包括一些预先定义的函数。
如图1所示,应用程序框架层可以包括窗口管理器,内容提供器,视图系统,电话管理器,资源管理器,通知管理器、视图管理器、绘图表面管理器等。关于视图管理器、绘图表面管理器的具体描述可参考图12的具体描述。
窗口管理器用于管理窗口程序。窗口管理器可以获取显示屏大小,判断是否有状态栏,锁定屏幕,截取屏幕等。
视图管理器用于将获取到的应用程序的XML文件经过布局、绘制成用户界面的界面元素。
绘图表面管理器用于将界面元素绘制到待显示的用户界面中。
内容提供器用来存放和获取数据,并使这些数据可以被应用程序访问。所述数据可以包括视频,图像,音频,拨打和接听的电话,浏览历史和书签,电话簿等。
视图系统包括可视控件,例如显示文字的控件,显示图片的控件等。视图系统可用于构建应用程序。显示界面可以由一个或多个视图组成的。例如,包括短信通知图标的显示界面,可以包括显示文字的视图以及显示图片的视图。
电话管理器用于提供电子设备100的通信功能。例如通话状态的管理(包括接通,挂断等)。
资源管理器为应用程序提供各种资源,比如本地化字符串,图标,图片,布局文件,视频文件等等。
通知管理器使应用程序可以在状态栏中显示通知信息,可以用于传达告知类型的消息,可以短暂停留后自动消失,无需用户交互。比如通知管理器被用于告知下载完成,消息提醒等。通知管理器还可以是以图表或者滚动条文本形式出现在系统顶部状态栏的通知,例如后台运行的应用程序的通知,还可以是以对话界面形式出现在屏幕上的通知。例如在状态栏提示文本信息,发出提示音,电子设备振动,指示灯闪烁等。
Android Runtime包括核心库和虚拟机。Android runtime负责安卓系统的调度和管理。
核心库包含两部分:一部分是java语言需要调用的功能函数,另一部分是安卓的核心库。
应用程序层和应用程序框架层运行在虚拟机中。虚拟机将应用程序层和应用程序框架层的java文件执行为二进制文件。虚拟机用于执行对象生命周期的管理,堆栈管理,线程管理,安全和异常的管理,以及垃圾回收等功能。
系统库可以包括多个功能模块。例如:表面管理器(surface manager),媒体库(Media Libraries),三维图形处理库(例如:OpenGL ES),2D图形引擎(例如:SGL)等。
表面管理器用于对显示子系统进行管理,并且为多个应用程序提供了2D和3D图层的融合。
媒体库支持多种常用的音频,视频格式回放和录制,以及静态图像文件等。媒体库可以支持多种音视频编码格式,例如:MPEG4,H.264,MP3,AAC,AMR,JPG,PNG等。
三维图形处理库用于实现三维图形绘图,图像渲染,合成,和图层处理等。
2D图形引擎是2D绘图的绘图引擎。
内核层是硬件和软件之间的层。内核层至少包含显示驱动,摄像头驱动,音频驱动,传感器驱动。
下面结合捕获拍照场景,示例性说明电子设备100软件以及硬件的工作流程。
当触摸传感器180K接收到触摸操作,相应的硬件中断被发给内核层。内核层将触摸操作加工成原始输入事件(包括触摸坐标,触摸操作的时间戳等信息)。原始输入事件被存储在内核层。应用程序框架层从内核层获取原始输入事件,识别该输入事件所对应的控件。以该触摸操作是触摸操作,该触摸操作所对应的控件为相机应用图标的控件为例,相机应用调用应用框架层的接口,启动相机应用,进而通过调用内核层启动摄像头驱动,通过3D摄像模组193捕获静态图像或视频。
本申请的说明书和权利要求书及附图中的术语“用户界面(user interface,UI)”,是应用程序或操作系统与用户之间进行交互和信息交换的介质接口,它实现信息的内部形式与用户可以接受形式之间的转换。应用程序的用户界面是通过java、可扩展标记语言(extensible markup language,XML)等特定计算机语言编写的源代码,界面源代码在终端设备上经过解析,渲染,最终呈现为用户界面中的界面元素。用户界面中包含图标、窗口、控件等界面元素。其中,控件(control)也称为部件(widget),典型的控件有工具栏(toolbar)、菜单栏(menu bar)、文本框(text box)、按钮(button)、滚动条(scrollbar)、图片和文本。
用户界面常用的表现形式是图形用户界面(graphic user interface,GUI),是指采用图形方式显示的与计算机操作相关的用户界面。它可以是在电子设备的显示屏中显示的一个图标、窗口、控件等界面元素,其中控件可以包括图片、按钮、菜单、选项卡、文本框、对话框、状态栏、导航栏、Widget等可视的界面元素。
下面介绍电子设备上的用于展示应用程序菜单的示例性用户界面。
图2示例性示出了电子设备上的用于应用程序菜单的示例性用户界面200。如图2所示,用户界面200可包括:状态栏201,具有常用应用程序图标的托盘213,导航栏214,以及其他应用程序图标。其中:
状态栏201可包括:移动通信信号(又可称为蜂窝信号)的一个或多个信号强度指示符201-1、移动通信信号的运营商的指示符201-2、时间指示符201-3、电池状态指示符201-4等。
具有常用应用程序图标的托盘213可展示:电话的图标213-1、短消息的图标213-2、联系人的图标213-3等。
其中,电话的图标213-1可以由图片213-1-1和文字213-1-2组成。短消息的图标213-2可以由图片213-2-1和文字213-2-2组成。联系人的图标213-3可以由图片213-3-1和文字213-3-2组成。
导航栏214可包括:返回按键214-1、主界面(Home screen)按键214-2、呼出任务历史按键214-3等系统导航键。当检测到用户点击返回按键214-1时,电子设备100可显示当前页面的上一个页面。当检测到用户点击主界面按键214-2时,电子设备100可显示主界面。当检测到用户点击呼出任务历史按键214-3时,电子设备100可显示用户最近打开的任务。各导航键的命名还可以为其他,本申请对此不做限制。不限于虚拟按键,导航栏214中的各 导航键也可以实现为物理按键。
其他应用程序图标可例如:微信(Wechat)的图标202、QQ的图标203、推特(Twitter)的图标204、脸书(Facebook)的图标205、邮箱的图标206、云共享的图标207、备忘录的图标208、设置的图标209、图库的图标210、相机的图标211。用户界面200还可包括页面指示符212。其他应用程序图标可分布在多个页面,页面指示符212可用于指示用户当前浏览的是哪一个页面中的应用程序。用户可以左右滑动其他应用程序图标的区域,来浏览其他页面中的应用程序图标。
其中,微信(Wechat)的图标202可以由图片202-1和文字202-2组成。QQ的图标203可以由图片203-1和文字203-2组成。推特(Twitter)的图标204可以由图片204-1和文字204-2组成。脸书(Facebook)的图标205可以由图片205-1和文字205-2组成。邮箱的图标206可以由图片206-1和文字206-2组成。云共享的图标207可以由图片207-1和文字207-2组成。备忘录的图标208可以由图片208-1和文字208-2组成。设置的图标209可以由图片209-1和文字209-2组成。图库的图标210可以由图片210-1和文字210-2组成。相机的图标211可以由图片211-1和文字211-2组成。
在一些实施例中,图2示例性所示的用户界面200可以为主界面(Home screen)。
可以理解的是,图2仅仅示例性示出了电子设备上的用户界面,不应构成对本申请实施例的限定。
下面详细说明电子设备显示用户界面的过程。以下实施例以电子设备显示图2所示的用户界面200为例,说明电子设备呈现用户界面的过程。可理解的,经过解析用户界面对应的布局文件的过程、界面绘制的过程、渲染的过程,之后,电子设备才能在显示屏上显示用户可见的用户界面200。布局文件可以是利用JAVA、C#、XML等程序语言将用户界面中的界面元素编写成程序代码后形成的文件。本申请中,布局文件又可以称为XML文件。下面分别介绍解析XML文件的过程、界面绘制的过程以及渲染过程。
1.解析XML文件的过程
具体的,每个用户界面可以对应有一个或多个XML文件。XML文件为布局文件,其由多行程序代码组成,该多行程序代码组成了多个节点。在其他一些实施例中,节点也可以被称为标签或元素,本申请对此不做限制。
XML文件中的节点可以分为一个根节点和多个普通节点。XML文件中的每一个节点对应描述一个View对象。在XML文件中,如果一个节点有上一级的节点,则该节点的上一级节点为该节点的父节点。该节点为上一级节点的子节点。
View对象用来规定用户界面中所包含的界面元素。View对象绘制后是待显示界面元素。待显示界面元素渲染后为呈现在用户界面的界面元素。在本申请实施例中,可以将一个view对象经过处理后呈现在用户界面中的界面元素,称为该view对象对应的界面元素。
View对象具有一些属性,包括类型、颜色、内容、ID以及该View对象的位置、宽度、和高度等等。若View对象具有父View对象,View对象的位置是指在其父View对象中的位置。电子设备通过View对象的类型、颜色、内容等属性来确定界面元素的类型(文本、图像、控件、按钮)、颜色、内容等等。
可理解的,View对象的类型可以有文本视图对象(textview)、图片视图对象(imgview)、视频视图对象(videoview)等等。类型为textview的View对象对应的用户界面中的界面元 素为文本。类型为imgview的View对象对应的用户界面中的界面元素为图片。类型为videoview的View对象对应的用户界面中的界面元素为视频。View对象的颜色可以有黄色、红色、蓝色等等颜色。可理解的,当View对象的颜色为红色时,该View对象对应的界面元素的颜色也是黄色。View对象的内容可以是文字“123”、图像“一个圆形”等等。当View对象的内容是文字“123”,该View对象对应的界面元素的内容也是文字“123”。
在本申请中,XML文件中父节点对应的View对象可以称为子节点对应的View对象的父View对象。XML文件中子节点对应的View对象可以称为父节点对应的View对象的子View对象。在本申请中,一个View对象为另一个View对象的父View对象或子View对象可以称为这两个View对象之间的父子关系。在一个用户界面中,子View对象对应的界面元素放置在父View对象对应的界面元素中。
电子设备对用户界面对应的XML文件进行解析后,可以获知每个节点对应的View对象,以及,各个View对象的属性(类型、颜色、内容以及该View对象的位置、宽度、和高度等等)、各个view对象之间的父子关系等。
参考图3,图3示出了一种可能的一个XML文件的内容示意图。可理解的,图3并非一个真正的XML文件,而是为了便于理解,对该XML文件所描述的信息给出的一个示意图。
如图3所示,该XML文件中包含:根节点A301、节点B302、节点C303、节点D304。根节点A301描述了名称为A的View对象以及View对象A的属性。View对象A的属性包括类型、颜色、内容、ID、View对象A的位置、宽度、高度等等。节点B302描述了名称为B的View对象以及该View对象B的属性。View对象B的属性包括类型、颜色、内容、ID、宽度、高度,以及在父View对象A中的位置等等。节点C303描述了名称为C的View对象以及View对象C的属性。View对象C的属性包括类型、颜色、内容、ID、宽度、高度,以及在父View对象A中的位置等等。节点D304描述了名称为D的View对象以及View对象D的属性。View对象D的属性包括类型、颜色、内容、ID、宽度、高度,以及在父View对象B中的位置等等。
图3中的XML文件的根节点A301为节点B302和节点C303的父节点。对应地,节点B302和节点C303为根节点A301的子节点。节点B302为节点D304的父节点。对应地,节点D304为节点B302的子节点。
参考图4,图4示例性示出了电子设备解析XML文件后得到的结果示意图。该XML文件为图2示出的内容示意图所对应的XML文件。图3所示的结果示意图示出了该XML文件中各个节点对应的view对象,以及,各个view对象的属性(类型、颜色、内容、宽度、高度、位置等等)。
如图4所示,电子设备解析XML文件后得到的结果可以包含:View对象A、View对象B、View对象C、View对象D,以及,各个View对象的属性和View对象之间的父子关系。View对象A为View对象B和View对象C的父View对象。对应地,View对象B和View对象C是View对象A的子View对象。View对象B为View对象D的父View对象。对应地,View对象D是View对象B的子View对象。
在本申请中,XML文件解析出的多个具有父子关系的View对像可以组成View对象树。View对象树包含着多个对象以及多个对象之间的父子关系。举例来说,如图4所示,具有父子关系的View对象A、View对象B、View对象C、View对象D可以组成View对象树。View 对象树包含了View对象A、View对象B、View对象C、View对象D这四个View对象以及着四个View对象之间的父子关系。电子设备可以用View对象树的形式来保存电子设备从XML文件中解析出的每个节点对应的View对象,以及,各个View对象的属性(类型、颜色、内容以及该View对象的位置、宽度、和高度等等)、各个view对象之间的父子关系等。
这里,View对象树是可以是一种文档对象模型(Document Object Model,DOM)。DOM是W3C制定的标准接口规范,是一种处理HTML和XML文件的标准API。DOM提供了对整个XML文档的访问模型。DOM将XML文档作为一个树形结构,树的每个节点表示了一个XML标签或标签内的文本项。电子设备将XML文件转化为View对象树的过程可以称之为电子设备对XML文件的解析过程。电子设备对XML文件进行解析后得到View对象树。
用户界面的布局文件(如XML文件)是由开发人员根据预先设计的用户界面得到的。开发人员可以选择由Android系统提供的View对象或者自己开发的View对象来规定设计的用户界面中的界面元素。最后,开发人员使用程序语言将用户界面中所有界面元素对应的View对象写成程序代码形成布局文件。这样,View对象按照提供方可以区分为系统View对象和三方View对象。系统View对象由Android系统提供,可以供每一个开发人员在设计用户界面时使用。三方View对象由应用程序开发方提供。一般地,电子设备可以从View对象的类型名称中识别出属于系统View对象还是三方View对象。例如,系统View对象的类型名称可以是“android.widget.Textview”,系统View对象类型名称的前缀为“android”。三方View对象的类型名称可以是“com.sina.weibo.feed.view.MBlogListItemButtonsView”,三方View对象类型名称的前缀是应用程序的名称,如“com.sina.weibo”。
一般情况下,应用程序运行时电子设备为该应用程序创建一个进程,用来执行这个应用程序中的所有任务(例如访问网络、显示用户界面、刷新用户界面等等)。应用程序中的多个任务会分配到进程中的线程具体执行。一个进程中可以包括一个UI线程和多个非UI线程。UI进程用于控制用户界面显示、刷新和界面元素实现交互。非UI进程用于执行网络访问、发送消息等等。其中,UI线程也可以被称为主线程。三方View对象的绘制过程需要依赖UI线程中提供的用于用户界面显示的数据。而系统View对象的绘制处理过程不依赖UI线程中提供的用于用户界面显示的数据。电子设备需要在UI线程中完成三方View对象的绘制过程。电子设备可以在UI线程中完成系统View对象的绘制过程,也可以在非UI线程中完成系统View对象的绘制过程。在现有技术中,电子设备调用UI线程对XML文件解析出的所有View对象进行绘制处理。具体地,电子设备在UI线程对第一个View对象进行绘制处理。然后,电子设备对第二个View对象进行绘制处理。依次地,电子设备完成最后一个View对象的绘制处理。
2.界面绘制
界面绘制可以是电子设备将从XML文件解析出的View对象绘制成待显示界面元素。界面绘制的输入可包括上述第1个过程中的解析结果,例如View对象、View对象的属性以及View对象的父子关系,输出是待显示用户界面。界面绘制过程可以包括两个步骤。第一步,电子设备将多个View对象在一个线程中绘制成多个待显示界面元素。第二步,电子设备将绘制得到的多个待显示界面元素按照父子关系嵌套成待显示用户界面。界面绘制过程完成后,电子设备可以得到一个由所有待显示界面元素组成的待显示用户界面。电子设备根据View对 象绘制得到的待显示界面元素可以是具有几何形状的图形(具有颜色、内容、宽度和高度等属性)或者文字(具有颜色、内容、宽度和高度等属性)。该图形或者文字经过渲染之后为呈现在用户界面中的界面元素。待显示界面元素是电子设备内部的一种数据存储形式(例如数组),并不能被用户可见。
参考图5,图5示例性示出了待显示用户界面示意图,图5中的待显示用户界面30是根据图3所示的解析结果绘制得到。待显示用户界面由多个待显示界面元素按照父子关系嵌套之后组成的。具体地,电子设备将子待显示元素放置到父待显示界面元素中。这样,一层又一层地嵌套组成待显示用户界面。待显示用户界面经过渲染之后为用户可见的用户界面。
如图5所示,待显示用户界面30包含待显示界面元素300、待显示界面元素301、待显示界面元素302、待显示界面元素303。待显示界面元素300由图4中的View对象A绘制得到。待显示界面元素301由图4中示出的View对象B绘制得到。待显示界面元素302由图4中示出的View对象C绘制得到。待显示界面元素由图3中示出的View对象D绘制得到。待显示界面元素303嵌套到待显示界面元素301中,待显示界面元素301和待显示界面元素302嵌套到待显示界面元素300中之后得到了待显示用户界面30。
在本申请中,嵌套可以是指电子设备将一个待显示界面元素放置到另一个待显示界面元素中。例如,图5所示的待显示界面元素303被放置到到待显示界面元素301中。
参考图6,其示出了一种可能的View对象父子关系示意图。电子设备可以根据图6示出的View对象父子关系示意图绘制出待显示用户界面。然后,待显示用户界面渲染之后得到图2示出的用户界面200。电子设备根据XML文件解析出来的View对象绘制的待显示界面元素也是按照View对象的层级关系一层又一层嵌套的。待显示界面元素经过渲染之后得到的界面元素也是一层又一层嵌套的。例如,图片213-2-1嵌套在短消息图标213-2中,短消息图标213-2嵌套在常用应用程序图标的托盘213中。
在本申请中,电子设备将父View对象绘制得到的待显示界面元素,可以称为父待显示界面元素。电子设备将子View对象绘制得到的待显示界面元素,可以称为子待显示界面元素。
3.渲染
在本申请中,渲染是指电子设备将待显示用户界面渲染成用户可见的用户界面。具体地,电子设备的CPU将绘制完成的待显示用户界面处理为多维图形,并将图形纹理化。然后电子设备调用GPU将图形光栅化。这里,GPU将图形转换为一系列像素点的过程称为光栅化。最后,电子设备将光栅化的图形投射到显示屏上。这样,就可以得到用户可以看到的用户界面。例如,图6中示出的View对象202-1经过绘制可以得到对应的待显示界面元素。待显示界面元素经过渲染后为呈现在图2示出的用户界面200中的微信图片202-1。
界面绘制的速度影响到电子设备为用户呈现用户界面的效率。在现有技术中,电子设备在界面绘制的过程中,一个一个地绘制电子设备从XML文件中解析出的View对象。具体地,电子设备在UI线程中对第一View对象进行绘制处理之后,再对第二个View对象进行绘制处理,直到对所有的View对象绘制处理完成。如图7示出的现在技术提供的电子设备进行界面绘制的流程示意图。电子设备首先对XML文件中根节点对应的View对象进行绘制得到待显示界面元素。然后,电子设备再按照XML文件中节点的解析顺序依次一个一个地在UI线程中对XML文件中节点对应的View对象进行绘制得到待显示界面元素。最后,电子设备将 绘制得到的子待显示界面元素嵌套到对应的父待显示界面元素中。当用户界面对应的XML文件中包含较多的View对象时,电子设备对View对象进行绘制处理耗费较多时间。这样,电子设备显示用户界面时可能会丢帧、卡顿。进一步地,电子设备在显示用户界面时需要较多时间为用户呈现用户界面,用户体验差。可理解的,电子设备显示的用户界面可以是电子设备启动应用程序时打开的应用程序主界面,也可以是电子设备刷新用户界面后的用户界面,还可以是电子设备跳转用户界面后的用户界面。
针对现有技术中电子设备在界面绘制过程耗时较多的问题,本申请实施例提供了一种显示用户界面的方法。实施本申请实施例提供的方法,可以提升电子设备绘制界面的速度,从而快速地在显示屏上显示用户界面,避免出现丢帧、卡顿等问题,可以提升用户体验。
下面概述本申请提出的显示用户界面的方法。首先,电子设备接收到用于显示用户界面的用户操作。用于显示用户界面的用户操作可包括但不限于:用于启动应用程序并显示该应用程序主界面的用户操作、用于刷新用户界面的操作、用于跳转用户界面的操作。然后,电子设备获取用户界面对应的XML文件。接着,电子设备对XML文件进行解析得到View对象、View对象的属性以及View对象之间的父子关系。然后,电子设备根据解析出的结果绘制得到待显示用户界面。具体地,电子设备利用UI线程对三方View对象进行绘制处理,利用非UI线程对系统View对象进行绘制处理。最后,电子设备将待显示用户界面渲染成显示屏上用户可见的用户界面。电子设备可以同时绘制三方View对象和系统View对象,并且,可以同时绘制多个系统View对象。这样,电子设备可以减少界面绘制的时间。从而,电子设备可以更快地为用户呈现用户界面,提升用户体验。
下面先介绍本申请涉及到的概念:刷新用户界面、跳转用户界面。
在本申请中,刷新用户界面可以是电子设备响应于用户操作更新用户界面中某一部分的内容。电子设备刷新后的用户界面和刷新前的用户界面中的内容不一样。如图8A示出的用户界面示意图所示,当用户打开如图8A所示的用户界面800时,用户可以在显示屏中向上滑动手指来更新用户界面中区域801的内容。区域801中的内容可以包括虚线框802所示的内容、虚线框803所示的内容、以及虚线框704所示的内容。电子设备刷新后的用户界面可以是图8B中示出的用户界面800。刷新后的用户界面700中虚线框801中的内容已经更新为虚线框805所示的内容、虚线框806所示的内容以及虚线框807所示的内容。用户操作不限于向上滑动手指,也可以是向下滑动手指来刷新用户界面,此处不做限定。刷新后的用户界面中更新后的内容也不限于图8B中示出的虚线框801中的内容。
在本申请中,跳转用户界面可以是用户点触用户界面中的某一个控件或者链接后,电子设备中显示的用户界面从用户点触时的用户界面变为另一个用户界面。如图9A示出的用户界面90A,当用户点触用户界面90A中的控件901,电子设备响应于用户的点触操作,电子设备显示的用户界面从如图9A中示出的用户界面90A跳转到如图9B中示出的用户界面90B。
下面结合图10展开描述本申请实施例提供的显示用户界面方法。如图10所示,本申请实施例提供的显示用户界面方法可以包括:
S1001-S1003:电子设备解析用户界面对应的XML文件。
S1001、电子设备接收到用于显示用户界面的用户操作。
这里,用于显示用户界面的用户操作可包括但不限于:用于启动应用程序并显示该应用 程序主界面的用户操作、用于刷新用户界面的操作、用于跳转用户界面的操作等等。
用于启动应用程序并显示该应用程序主界面的用户操作可以是用户对该应用程序的图标的点触操作。电子设备响应于用户对该应用程序的图标的点触操作,启动应用程序并显示该应用程序的主界面。举例来说,用户点触如图2所示的用户界面200中的应用程序图标(例如,微信图标202、QQ图标203、推特图标204等等)。电子设备响应于用户的点触操作启动应用程序并显示该应用程序的主界面。用于启动应用程序并显示该应用程序主界面的用户操作也可以用户在其他应用程序中点击该应用程序的链接。电子设备响应于用户在其他应用程序中点击该应用程序链接的操作,启动应用程序并显示该应用程序的主界面。例如,电子设备接收到用户在微信中点击淘宝链接的操作。电子设备响应于该操作启动淘宝应用并显示淘宝应用的主界面。此处对用于启动应用程序并显示该应用程序主界面的用户操作不做限定。
用于刷新用户界面的操作可以是向上滑动手指操作。电子设备接收用户的向上滑动手指操作,刷新用户界面。电子设备如何根据用户操作刷新用户界面可参考上文对刷新用户界面的介绍,此处不再赘述。用于刷新用户界面的操作也可以是向下滑动手指操作,也可以是用户点击用户界面中的刷新按钮等等,此处不做限定。
用于跳转用户界面的操作可以是用户点触用户界面中的某一个控件。电子设备接收到用户操作,跳转用户界面。电子设备如何根据用户操作跳转用户界面可参考上文对跳转用户界面的介绍,此处不再赘述。用于跳转用户界面的操作也可以用户点击用户界面中的某一个链接,此处不做限定。
在一种可能的实现方式中,电子设备接收用于显示用户界面的用户操作之后,电子设备获取用户界面对应的XML文件。电子设备可以从该用户界面对应的应用程序的安装包中获取的该用户界面对应的XML文件。电子设备还可以从该用户界面对应的应用程序开发方的服务器中获取的该用户界面对应的XML文件。
S1002、电子设备从用户界面对应的XML文件中解析出每个节点描述的View对象、View对象的属性以及View对象之间的父子关系。
这里步骤S1002还可以这样描述:响应于所述用户操作,电子设备解析所述第一用户界面对应的布局文件,获取View对象、View对象的属性;布局文件包括多个节点,每个节点用于描述一个所述View对象;View对象规定了所述第一用户界面中的界面元素;
在一种可能的实现方式中,电子设备可以获取到电子设备所启动的应用程序主界面对应的XML文件。该应用程序主界面对应的XML文件可以在该应用程序的资源包中。电子设备可以在安装该应用程序时就获取并存储了该应用程序的资源包。电子设备还可以获取到刷新用户界面后的用户界面对应的XML文件。电子设备还可以获取到跳转后的用户界面对应的XML文件。
下面举例示意XML文件,电子设备获取到的XML文件可以是由如下代码组成的文件:
<A ID=“0000”width=“800”height=“1000”>
<B ID=“0001”width=“400”height=“600”>
<D ID=“0002”width=“200”height=“300”>
</D>
</B>
<C ID=“0003”width=“400”height=“600”>
</C>
</A>
上述组成XML文件的代码示意中,XML文件中的每个节点在起始和结束位置有标签,在节点内部的节点就是子节点。<A.>表示A节点的起始位置,</A>表示A节点的结束位置。A节点内的B节点和C节点是A节点的子节点。B节点内的节点D是节点B的子节点。这样,电子设备解析这段代码组成的XML文件时,首先解析A节点对应的View对象,然后解析B节点对应的View对象,其次是D节点对应的View对象,最后是C节点对应的View对象。
电子设备可以从XML文件中解析出每个节点对应的View对象、View对象的类型、颜色、内容宽度、高度以及View对象之间的父子关系等等。电子设备对XML文件解析后可以得到View对象树。电子设备可以利用View对象树保存从XML文件中解析出每个节点对应的View对象、View对象的类型、颜色、内容宽度、高度以及View对象之间的父子关系等等。关于电子设备如何解析XML文件可参考上文中对图3示出的XML进行解析的过程,此处不再赘述。
在一种可能的实现方式中,电子设备将View对象、View对象的属性以及View对象的父子关系保存为树形结构图形;树形结构图形中的一个节点表征一个View对象;树形结构图形中的节点属性对应View对象的属性;树形结构图形中节点之间的上下级关系表征View对象之间的父子关系。这样,电子设备可以更容易获取到View对象之间的父子关系,以及可以更方便地查找到View对象。
在一种可能的实现方式中,电子设备创建解析器指针;解析器指针指向布局文件中正在解析的节点;当电子设备解析完布局文件中的一个节点时,解析器指针的移动距离增加第一预设值;第一预设值为正整数;电子设备记录解析器指针的移动距离;移动距离用来指示电子设备解析到第几个节点。电子设备可以通过解析器指针的移动距离获知当前解析到第几个节点,以及这些节点是第几个开始解析的。这样,电子设备通过解析器指针的移动距离可以获取到View对象的解析顺序。
在一种可能的实现方式中,电子设备利用解析器指针的移动距离确定节点在XML文件中的位置。解析器指针的移动距离可以记录XML文件解析到第几行,第几个节点。电子设备在解析每一节点时,电子设备可以由一个解析器指针指向当前节点。电子设备每解析一个节点,解析器指针的移动距离可以加1。XML文件中的一个节点可以由一行程序代码组成,也可以由多行程序代码组成。此处不作限定。这样,电子设备根据解析器指针距离知道解析到了XML文件中哪一个节点。电子设备不用从XML文件的第一行开始遍历查找解析到哪一个节点,可以减少XML文件的解析时间。
在一种可能的实现方式中,电子设备可以设置View对象的布局属性。View对象的布局属性是指View对象在显示屏中的位置、宽、高等等。可选地,电子设备可以根据显示屏的分辨率来设置View对象的布局属性。电子设备根据显示屏的分辨率来决定电子设备根据View对象绘制得到的待显示界面元素的宽度和高度,以及待显示界面元素渲染到显示屏的哪一个区域。显示屏分辨率越大的电子设备(即显示屏尺寸越大的电子设备),电子设备绘制的待显示界面元素的宽度越宽和高度越高。这样,待显示界面元素渲染之后呈现在用户界面中的界 面元素的宽度越宽和高度越高。举例来说,对于图2用户界面中示出的微信图标202。用户在显示屏分辨率大的电子设备(例如,显示屏分辨率为1242x 2688,单位为像素,对应6.5英寸的显示屏)比显示屏分辨率小的电子设备(例如,显示屏分辨率为640x 1136,单位为像素,对应4英寸的显示屏)上看到的微信图标202要大一些(即微信图标202宽度更宽和高度更高)。可选地,电子设备可以从电子设备的系统配置文件中获取到显示屏的分辨率。
S1003、电子设备记录从XML文件中解析出每个View对象的解析信息。
电子设备记录解析XML文件中每个View对象的解析信息。该解析信息包括每个节点描述的View对象的父子关系以及该节点在XML文件中的位置。
在一种实现方式中,电子设备可以利用中间对象来保存解析信息。电子设备创建的中间对象可以是:
Figure PCTCN2020107549-appb-000001
在一种可能的实现方式中,电子设备在记录完每个View对象的解析信息之后,根据记录的解析信息对解析出的多个具有父子关系的View对象组成的View对象树拆分为多个子树。如图6所示的一种可能的View对象父子关系示意图。电子设备可以将图6中的View父子关系拆分出子树21、子树22、子树23等等。子树是由一个View对象和这个View对象的子View对象组成的。其中,子树中可以有多层子View对象,即子View对象还可以是下一层View对象的父View对象。子树也可以只有一个View对象。电子设备可以根据View对象的嵌套复杂度决定拆分后的子树大小。举例来说,一个View对象下面还可以包含多层子View对象。一个View对象下面包含越多层的子View对象,那么这个View对象的嵌套复杂度越高。如图6中示出的View对象213,View对象213有子View对象213-1、子View对象213-2、子View对象213-3。子View对象213-1有子View对象213-1-1和子View对象213-1-2。图6中的View对象202有子View对象202-1和子View对象202-2。子View对象202-1和子View对象202-2都没有子View对象。这样,View对象213的嵌套复杂度比View对象202的嵌套复杂度高。嵌套复杂度是用来衡量一个View对象嵌套了多少层子View对象,一个View对象包含的子View对象层数越多,该View对象的嵌套复杂度就越高。
S1004-S1007:电子设备将解析出的View对象进行绘制处理得到待显示用户界面。
S1004、电子设备判断解析出的View对象是否是系统View对象;若否,则执行S1005;若是,则执行S1006。
电子设备可以根据View对象的类型判断出该View对象是系统View对象还是三方View对象。例如,当View对象的类型为“android.widget.Textview”,那么这个View对象就是系统View对象。当View对象的类型为“com.sina.weibo.feed.view.MBlogListItemButtonsView”,那 么这个View对象就是三方View对象。如果一个View对象的类型的名称前缀是“android”,那么这个View对象是系统View对象。如果一个控件的类型的名称前缀是其他应用程序的名称,如“com.sina.weibo”,那么这个View对象是三方View对象。
S1005、电子设备判断出解析出的View对象不是系统View对象,则电子设备按顺序将View对象绘制成待显示界面元素。
当电子设备判断出解析出的View对象不是系统View对象时,电子设备按顺序将View对象绘制成待显示界面元素。电子设备对View对象进行绘制处理的顺序可以是该View对象对应的在XML文件中节点的解析顺序。举例来说,电子设备对XML文件进行解析,首先解析A节点对应的View对象A,然后解析B节点对应的View对象B,其次是D节点对应的View对象D,最后是C节点对应的View对象D。那么,电子设备在进行界面绘制时,按照XML文件的解析顺序首先对View对象A进行绘制处理,然后对View对象B进行绘制处理,再对View对象D进行绘制处理,最后对View对象C进行绘制处理。这里,电子设备是根据View对象的属性将View对象绘制成待显示界面元素。绘制得到的待显示界面元素的属性和View对象的属性一一对应。电子设备如何将View对象绘制成待显示界面元素可参考上文中描述的电子设备的界面绘制过程,此处不再赘述。
在一种可能的实现方式中,电子设备可以在UI线程中一个一个、依次将View对象绘制成待显示界面元素。可理解的,首先电子设备在UI线程对第一个三方View对象进行绘制处理。然后,电子设备对第二个三方View对象进行绘制处理。依次地,电子设备在UI线程完成对最后一个View对象的绘制处理。
S1006、电子设备判断出解析出的View对象是系统View,则电子设备同时对多个系统View对象进行绘制,得到多个待显示界面元素。
当电子设备判断出解析出的View对象是系统View对象时,电子设备可以同时绘制多个系统View对象,得到多个待显示界面元素。这里,电子设备是根据View对象的属性将View对象绘制成待显示界面元素。绘制得到的待显示界面元素的属性和View对象的属性一一对应。电子设备同时调用了多个线程对多个系统View对象进行绘制处理。电子设备在每个线程完成分配给该线程的第一个系统View对象的绘制处理之后,就对分配该线程的第二个系统View对象进行绘制处理。系统View对象可以不需要按照顺序在一个线程中一个一个的进行绘制,这样,可以减少电子设备的界面绘制时间。
在一种可能的实现方式中,电子设备可以利用多个非UI线程同时来对系统View对象进行绘制处理。这样,可以减少电子设备进行界面绘制的时间。
在一种可能的实现方式中,电子设备可以根据当前CPU的使用率和子树的数量来调整用于绘制系统View对象的非UI线程的数量。CPU的使用率越高,电子设备利用越少的非UI线程来绘制系统View对象。举例来说,若当前CPU使用率大于90%,则只使用UI线程绘制View对象。若当前CPU使用大于60%且小于90%,则利用一个非UI线程来绘制系统View对象。若当前CPU利用率小于60%,则利用两个非UI线程来绘制系统View对象。子树的数量越多,电子设备可以选择利用越多的非UI线程来绘制系统View对象电子设备CPU使用高时,电子设备会根据CPU的使用率来调整非UI线程的数量。这样,可以减少由于过多的非UI线程导致的电子设备卡顿或者系统崩溃的问题。
在一种可能的实现方式中,电子设备可以根据子树的嵌套复杂度来决定非UI线程的数量。子树嵌套复杂度越高,电子设备可以选择利用越多的非UI线程来绘制系统View。
在一种可能的实现方式中,电子设备可以根据系统View对象的数量来决定非UI线程的数量。系统View对象的数量越多,电子设备可以选择利用越多的非UI线程来绘制系统View对象。
S1007、电子设备根据记录的View对象解析信息来嵌套待显示界面元素,并得到待显示用户界面。
电子设备根据的View对象绘制得到的待显示界面元素都是零散的。电子需要根据待显示界面元素对应的View对象的解析信息来嵌套待显示界面元素。该解析信息可以包括View对象之间的父子关系、View对象的解析顺序。电子设备可以从由XML文件中根节点对应的View对象绘制得到的待显示界面元素开始,将根节点的子节点对应的View对象绘制的子待显示界面元素嵌套到根节点对应的父View对象绘制得到的父待显示界面元素中。电子设备绘制得到的所有待显示界面元素完成嵌套后就组成了待显示用户界面。
在一种可能的实现方式中,电子设备将待显示界面元素嵌套为待显示用户界面,具体包括:电子设备根据View对象之间的父子关系,将子View对象对应的待显示界面元素放置到到父View对象对应的待显示界面元素中;子View对象和父View对象具有父子关系。电子设备获取到View对象之间的父子关系,然后利用View对象之间的父子关系来嵌套待显示界面元素。这样,可以避免嵌套得到待显示用户界面出现嵌套错误。这样,电子设备也可以更准确地对待显示界面元素进行嵌套。
在一种可能的实现方式中,电子设备将待显示界面元素嵌套为待显示用户界面,具体包括:电子设备按照View对象的解析顺序,依次嵌套View对象对应的待显示界面元素,得到待显示用户界面。这样,当待显示界面元素对应的View对象有多个子View对象时,电子设备可以按照每个子View对象的解析顺序依次将子View对象对应的待显示界面元素嵌套到父View对象对应的待显示界面元素中。
在一种可能的实现方式中,电子设备可以按照中序遍历来嵌套所有的绘制得到的待显示界面元素。中序遍历是二叉树遍历的一种,也可以叫做中根遍历、中序周游等。在二叉树中,中序遍历首先遍历左子树,然后访问根节点,最后遍历右子树。举例来说,如图5所示的解析后的View对象层级关系示意图。当电子设备绘制完View对象A、View对象B、View对象C、View对象D之后,得到了如图5示出的待显示用户界面300。电子设备可以根据记录的每个View对象的解析记录,以及每个View对象在XML文件中的位置来嵌套由每个View对象绘制得到的待显示界面元素。电子设备按照中序遍历先将由View对象D绘制得到的待显示界面元素303嵌套到由View对象B绘制得到的待显示界面元素301中。然后,电子设备把由View对象B绘制得到的待显示界面元素301嵌套到由View对象A绘制得到的待显示界面元素301中。最后,电子设备把由View对象C绘制的待显示界面元素302嵌套到由View对象A绘制得到的待显示界面元素300中。
在一种可能的实现方式中,电子设备判断正在嵌套的待显示界面元素是否有子待显示界面元素。若有,则电子设备将子待显示界面元素嵌套到父待显示界面元素中。这样,可以避免在嵌套时当前正在嵌套到父待显示界面元素的待显示界面元素有遗漏的子待显示界面元素没有嵌套。
S1008、电子设备将待显示用户界面渲染成用户界面。
这里,电子设备将待显示用户界面渲染成用户界面之后,电子设备将用户界面显示在显示屏上。步骤S1008可参考上文描述的电子设备的渲染过程,此处不再赘述。
在一种可能的实现方式中,电子设备根据显示屏的分辨率设置第一用户界面中的界面元素在显示屏中的位置和宽度、高度;电子设备将待显示用户界面渲染成用户界面,具体包括:电子设备根据所述布局属性将待显示用户界面渲染成用户界面,渲染得到后的用户界面中的界面元素符合布局属性。电子设备根据显示屏的大小来设置待显示界面元素的大小。这样,电子设备渲染出的用户界面可以更适应显示屏。
本申请提出的显示用户界面方法中,电子设备启动应用程序或刷新用户界面时,电子设备获取指定的XML文件并进行解析。然后电子设备绘制从XML文件中解析出的View对象。电子设备利用UI线程绘制三方View,并利用多个非UI线程同时绘制系统View。最后,电子设备将绘制的待显示界面元素嵌套到父待显示界面元素中,嵌套完成后得到待显示用户界面。最后,电子设备将待显示用户界面渲染成用户界面。这样,电子设备可以节约界面绘制时间。从而,电子设备可以更快地显示用户界面,提升用户体验。
下面介绍本申请以下实施例中提供的示例性电子设备100。
图11示出了电子设备100的结构示意图。
下面以电子设备100为例对实施例进行具体说明。应该理解的是,电子设备100可以具有比图中所示的更多的或者更少的部件,可以组合两个或多个的部件,或者可以具有不同的部件配置。图中所示出的各种部件可以在包括一个或多个信号处理和/或专用集成电路在内的硬件、软件、或硬件和软件的组合中实现。
电子设备100可以包括处理器110,外部存储器接口120,内部存储器121,通用串行总线(universal serial bus,USB)接口130,充电管理模块140,电源管理模块141,电池142,天线1,天线2,移动通信模块150,无线通信模块160,音频模块170,扬声器170A,受话器170B,麦克风170C,耳机接口170D,传感器模块180,按键190,马达191,指示器192,摄像头193,显示屏194,以及用户标识模块(subscriber identification module,SIM)卡接口195等。其中传感器模块180可以包括压力传感器180A,陀螺仪传感器180B,气压传感器180C,磁传感器180D,加速度传感器180E,距离传感器180F,接近光传感器180G,指纹传感器180H,温度传感器180J,触摸传感器180K,环境光传感器180L,骨传导传感器180M等。
可以理解的是,本发明实施例示意的结构并不构成对电子设备100的具体限定。在本申请另一些实施例中,电子设备100可以包括比图示更多或更少的部件,或者组合某些部件,或者拆分某些部件,或者不同的部件布置。图示的部件可以以硬件,软件或软件和硬件的组合实现。
处理器110可以包括一个或多个处理单元,例如:处理器110可以包括应用处理器(application processor,AP),调制解调处理器,图形处理器(graphics processing unit,GPU),图像信号处理器(image signal processor,ISP),控制器,存储器,视频编解码器,数字信号处理器(digital signal processor,DSP),基带处理器,和/或神经网络处理器(neural-network processing unit,NPU)等。其中,不同的处理单元可以是独立的器件,也可以集成在一个或多个处理器中。
其中,控制器可以是电子设备100的神经中枢和指挥中心。控制器可以根据指令操作码和时序信号,产生操作控制信号,完成取指令和执行指令的控制。
处理器110中还可以设置存储器,用于存储指令和数据。在一些实施例中,处理器110中的存储器为高速缓冲存储器。该存储器可以保存处理器110刚用过或循环使用的指令或数 据。如果处理器110需要再次使用该指令或数据,可从所述存储器中直接调用。避免了重复存取,减少了处理器110的等待时间,因而提高了系统的效率。
在一些实施例中,处理器110可以包括一个或多个接口。接口可以包括集成电路(inter-integrated circuit,I2C)接口,集成电路内置音频(inter-integrated circuit sound,I2S)接口,脉冲编码调制(pulse code modulation,PCM)接口,通用异步收发传输器(universal asynchronous receiver/transmitter,UART)接口,移动产业处理器接口(mobile industry processor interface,MIPI),通用输入输出(general-purpose input/output,GPIO)接口,用户标识模块(subscriber identity module,SIM)接口,和/或通用串行总线(universal serial bus,USB)接口等。
I2C接口是一种双向同步串行总线,包括一根串行数据线(serial data line,SDA)和一根串行时钟线(derail clock line,SCL)。在一些实施例中,处理器110可以包含多组I2C总线。处理器110可以通过不同的I2C总线接口分别耦合触摸传感器180K,充电器,闪光灯,摄像头193等。例如:处理器110可以通过I2C接口耦合触摸传感器180K,使处理器110与触摸传感器180K通过I2C总线接口通信,实现电子设备100的触摸功能。
I2S接口可以用于音频通信。在一些实施例中,处理器110可以包含多组I2S总线。处理器110可以通过I2S总线与音频模块170耦合,实现处理器110与音频模块170之间的通信。在一些实施例中,音频模块170可以通过I2S接口向无线通信模块160传递音频信号,实现通过蓝牙耳机接听电话的功能。
PCM接口也可以用于音频通信,将模拟信号抽样,量化和编码。在一些实施例中,音频模块170与无线通信模块160可以通过PCM总线接口耦合。在一些实施例中,音频模块170也可以通过PCM接口向无线通信模块160传递音频信号,实现通过蓝牙耳机接听电话的功能。所述I2S接口和所述PCM接口都可以用于音频通信。
UART接口是一种通用串行数据总线,用于异步通信。该总线可以为双向通信总线。它将要传输的数据在串行通信与并行通信之间转换。在一些实施例中,UART接口通常被用于连接处理器110与无线通信模块160。例如:处理器110通过UART接口与无线通信模块160中的蓝牙模块通信,实现蓝牙功能。在一些实施例中,音频模块170可以通过UART接口向无线通信模块160传递音频信号,实现通过蓝牙耳机播放音乐的功能。
MIPI接口可以被用于连接处理器110与显示屏194,摄像头193等外围器件。MIPI接口包括摄像头串行接口(camera serial interface,CSI),显示屏串行接口(display serial interface,DSI)等。在一些实施例中,处理器110和摄像头193通过CSI接口通信,实现电子设备100的拍摄功能。处理器110和显示屏194通过DSI接口通信,实现电子设备100的显示功能。
GPIO接口可以通过软件配置。GPIO接口可以被配置为控制信号,也可被配置为数据信号。在一些实施例中,GPIO接口可以用于连接处理器110与摄像头193,显示屏194,无线通信模块160,音频模块170,传感器模块180等。GPIO接口还可以被配置为I2C接口,I2S接口,UART接口,MIPI接口等。
USB接口130是符合USB标准规范的接口,具体可以是Mini USB接口,Micro USB接口,USB Type C接口等。USB接口130可以用于连接充电器为电子设备100充电,也可以用于电子设备100与外围设备之间传输数据。也可以用于连接耳机,通过耳机播放音频。该接口还可以用于连接其他电子设备,例如AR设备等。
可以理解的是,本发明实施例示意的各模块间的接口连接关系,只是示意性说明,并不构成对电子设备100的结构限定。在本申请另一些实施例中,电子设备100也可以采用上述 实施例中不同的接口连接方式,或多种接口连接方式的组合。
充电管理模块140用于从充电器接收充电输入。其中,充电器可以是无线充电器,也可以是有线充电器。在一些有线充电的实施例中,充电管理模块140可以通过USB接口130接收有线充电器的充电输入。在一些无线充电的实施例中,充电管理模块140可以通过电子设备100的无线充电线圈接收无线充电输入。充电管理模块140为电池142充电的同时,还可以通过电源管理模块141为电子设备供电。
电源管理模块141用于连接电池142,充电管理模块140与处理器110。电源管理模块141接收电池142和/或充电管理模块140的输入,为处理器110,内部存储器121,外部存储器,显示屏194,摄像头193,和无线通信模块160等供电。电源管理模块141还可以用于监测电池容量,电池循环次数,电池健康状态(漏电,阻抗)等参数。在其他一些实施例中,电源管理模块141也可以设置于处理器110中。在另一些实施例中,电源管理模块141和充电管理模块140也可以设置于同一个器件中。
电子设备100的无线通信功能可以通过天线1,天线2,移动通信模块150,无线通信模块160,调制解调处理器以及基带处理器等实现。
天线1和天线2用于发射和接收电磁波信号。电子设备100中的每个天线可用于覆盖单个或多个通信频带。不同的天线还可以复用,以提高天线的利用率。例如:可以将天线1复用为无线局域网的分集天线。在另外一些实施例中,天线可以和调谐开关结合使用。
移动通信模块150可以提供应用在电子设备100上的包括2G/3G/4G/5G等无线通信的解决方案。移动通信模块150可以包括至少一个滤波器,开关,功率放大器,低噪声放大器(low noise amplifier,LNA)等。移动通信模块150可以由天线1接收电磁波,并对接收的电磁波进行滤波,放大等处理,传送至调制解调处理器进行解调。移动通信模块150还可以对经调制解调处理器调制后的信号放大,经天线1转为电磁波辐射出去。在一些实施例中,移动通信模块150的至少部分功能模块可以被设置于处理器110中。在一些实施例中,移动通信模块150的至少部分功能模块可以与处理器110的至少部分模块被设置在同一个器件中。
调制解调处理器可以包括调制器和解调器。其中,调制器用于将待发送的低频基带信号调制成中高频信号。解调器用于将接收的电磁波信号解调为低频基带信号。随后解调器将解调得到的低频基带信号传送至基带处理器处理。低频基带信号经基带处理器处理后,被传递给应用处理器。应用处理器通过音频设备(不限于扬声器170A,受话器170B等)输出声音信号,或通过显示屏194显示图像或视频。在一些实施例中,调制解调处理器可以是独立的器件。在另一些实施例中,调制解调处理器可以独立于处理器110,与移动通信模块150或其他功能模块设置在同一个器件中。
无线通信模块160可以提供应用在电子设备100上的包括无线局域网(wireless local area networks,WLAN)(如无线保真(wireless fidelity,Wi-Fi)网络),蓝牙(bluetooth,BT),全球导航卫星系统(global navigation satellite system,GNSS),调频(frequency modulation,FM),近距离无线通信技术(near field communication,NFC),红外技术(infrared,IR)等无线通信的解决方案。无线通信模块160可以是集成至少一个通信处理模块的一个或多个器件。无线通信模块160经由天线2接收电磁波,将电磁波信号调频以及滤波处理,将处理后的信号发送到处理器110。无线通信模块160还可以从处理器110接收待发送的信号,对其进行调频,放大,经天线2转为电磁波辐射出去。
在一些实施例中,电子设备100的天线1和移动通信模块150耦合,天线2和无线通信 模块160耦合,使得电子设备100可以通过无线通信技术与网络以及其他设备通信。所述无线通信技术可以包括全球移动通讯系统(global system for mobile communications,GSM),通用分组无线服务(general packet radio service,GPRS),码分多址接入(code division multiple access,CDMA),宽带码分多址(wideband code division multiple access,WCDMA),时分码分多址(time-division code division multiple access,TD-SCDMA),长期演进(long term evolution,LTE),BT,GNSS,WLAN,NFC,FM,和/或IR技术等。所述GNSS可以包括全球卫星定位系统(global positioning system,GPS),全球导航卫星系统(global navigation satellite system,GLONASS),北斗卫星导航系统(beidou navigation satellite system,BDS),准天顶卫星系统(quasi-zenith satellite system,QZSS)和/或星基增强系统(satellite based augmentation systems,SBAS)。
在本申请中,电子设备100通过GPU,显示屏194,以及应用处理器等实现显示用户界面功能。GPU为图像处理的微处理器,连接显示屏194和应用处理器。GPU用于执行数学和几何计算,用于图形渲染。处理器110可包括一个或多个GPU,其执行程序指令以生成或改变显示信息。
显示屏194用于显示图像,视频等。显示屏194包括显示面板。显示面板可以采用液晶显示屏(liquid crystal display,LCD),有机发光二极管(organic light-emitting diode,OLED),有源矩阵有机发光二极体或主动矩阵有机发光二极体(active-matrix organic light emitting diode,AMOLED),柔性发光二极管(flex light-emitting diode,FLED),Miniled,MicroLed,Micro-oLed,量子点发光二极管(quantum dot light emitting diodes,QLED)等。在一些实施例中,电子设备100可以包括1个或N个显示屏194,N为大于1的正整数。
电子设备100可以通过ISP,摄像头193,视频编解码器,GPU,显示屏194以及应用处理器等实现拍摄功能。
ISP用于处理摄像头193反馈的数据。例如,拍照时,打开快门,光线通过镜头被传递到摄像头感光元件上,光信号转换为电信号,摄像头感光元件将所述电信号传递给ISP处理,转化为肉眼可见的图像。ISP还可以对图像的噪点,亮度,肤色进行算法优化。ISP还可以对拍摄场景的曝光,色温等参数优化。在一些实施例中,ISP可以设置在摄像头193中。
摄像头193用于捕获静态图像或视频。物体通过镜头生成光学图像投射到感光元件。感光元件可以是电荷耦合器件(charge coupled device,CCD)或互补金属氧化物半导体(complementary metal-oxide-semiconductor,CMOS)光电晶体管。感光元件把光信号转换成电信号,之后将电信号传递给ISP转换成数字图像信号。ISP将数字图像信号输出到DSP加工处理。DSP将数字图像信号转换成标准的RGB,YUV等格式的图像信号。在一些实施例中,电子设备100可以包括1个或N个摄像头193,N为大于1的正整数。
数字信号处理器用于处理数字信号,除了可以处理数字图像信号,还可以处理其他数字信号。例如,当电子设备100在频点选择时,数字信号处理器用于对频点能量进行傅里叶变换等。
视频编解码器用于对数字视频压缩或解压缩。电子设备100可以支持一种或多种视频编解码器。这样,电子设备100可以播放或录制多种编码格式的视频,例如:动态图像专家组(moving picture experts group,MPEG)1,MPEG2,MPEG3,MPEG4等。
NPU为神经网络(neural-network,NN)计算处理器,通过借鉴生物神经网络结构,例如借鉴人脑神经元之间传递模式,对输入信息快速处理,还可以不断的自学习。通过NPU可以 实现电子设备100的智能认知等应用,例如:图像识别,人脸识别,语音识别,文本理解等。
外部存储器接口120可以用于连接外部存储卡,例如Micro SD卡,实现扩展电子设备100的存储能力。外部存储卡通过外部存储器接口120与处理器110通信,实现数据存储功能。例如将音乐,视频等文件保存在外部存储卡中。
内部存储器121可以用于存储计算机可执行程序代码,所述可执行程序代码包括指令。处理器110通过运行存储在内部存储器121的指令,从而执行电子设备100的各种功能应用以及数据处理。内部存储器121可以包括存储程序区和存储数据区。其中,存储程序区可存储操作系统,至少一个功能所需的应用程序(比如声音播放功能,图像播放功能等)等。存储数据区可存储电子设备100使用过程中所创建的数据(比如音频数据,电话本等)等。此外,内部存储器121可以包括高速随机存取存储器,还可以包括非易失性存储器,例如至少一个磁盘存储器件,闪存器件,通用闪存存储器(universal flash storage,UFS)等。
电子设备100可以通过音频模块170,扬声器170A,受话器170B,麦克风170C,耳机接口170D,以及应用处理器等实现音频功能。例如音乐播放,录音等。
音频模块170用于将数字音频信息转换成模拟音频信号输出,也用于将模拟音频输入转换为数字音频信号。音频模块170还可以用于对音频信号编码和解码。在一些实施例中,音频模块170可以设置于处理器110中,或将音频模块170的部分功能模块设置于处理器110中。
扬声器170A,也称“喇叭”,用于将音频电信号转换为声音信号。电子设备100可以通过扬声器170A收听音乐,或收听免提通话。
受话器170B,也称“听筒”,用于将音频电信号转换成声音信号。当电子设备100接听电话或语音信息时,可以通过将受话器170B靠近人耳接听语音。
麦克风170C,也称“话筒”,“传声器”,用于将声音信号转换为电信号。当拨打电话或发送语音信息时,用户可以通过人嘴靠近麦克风170C发声,将声音信号输入到麦克风170C。电子设备100可以设置至少一个麦克风170C。在另一些实施例中,电子设备100可以设置两个麦克风170C,除了采集声音信号,还可以实现降噪功能。在另一些实施例中,电子设备100还可以设置三个,四个或更多麦克风170C,实现采集声音信号,降噪,还可以识别声音来源,实现定向录音功能等。耳机接口170D用于连接有线耳机。耳机接口170D可以是USB接口130,也可以是3.5mm的开放移动电子设备平台(open mobile terminal platform,OMTP)标准接口,美国蜂窝电信工业协会(cellular telecommunications industry association of the USA,CTIA)标准接口。
压力传感器180A用于感受压力信号,可以将压力信号转换成电信号。在一些实施例中,压力传感器180A可以设置于显示屏194。压力传感器180A的种类很多,如电阻式压力传感器,电感式压力传感器,电容式压力传感器等。电容式压力传感器可以是包括至少两个具有导电材料的平行板。当有力作用于压力传感器180A,电极之间的电容改变。电子设备100根据电容的变化确定压力的强度。当有触摸操作作用于显示屏194,电子设备100根据压力传感器180A检测所述触摸操作强度。电子设备100也可以根据压力传感器180A的检测信号计算触摸的位置。在一些实施例中,作用于相同触摸位置,但不同触摸操作强度的触摸操作,可以对应不同的操作指令。例如:当有触摸操作强度小于第一压力阈值的触摸操作作用于短消息应用图标时,执行查看短消息的指令。当有触摸操作强度大于或等于第一压力阈值的触摸操作作用于短消息应用图标时,执行新建短消息的指令。
陀螺仪传感器180B可以用于确定电子设备100的运动姿态。在一些实施例中,可以通过陀螺仪传感器180B确定电子设备100围绕三个轴(即,x,y和z轴)的角速度。陀螺仪传感器180B可以用于拍摄防抖。示例性的,当按下快门,陀螺仪传感器180B检测电子设备100抖动的角度,根据角度计算出镜头模组需要补偿的距离,让镜头通过反向运动抵消电子设备100的抖动,实现防抖。陀螺仪传感器180B还可以用于导航,体感游戏场景。
气压传感器180C用于测量气压。在一些实施例中,电子设备100通过气压传感器180C测得的气压值计算海拔高度,辅助定位和导航。
磁传感器180D包括霍尔传感器。电子设备100可以利用磁传感器180D检测翻盖皮套的开合。在一些实施例中,当电子设备100是翻盖机时,电子设备100可以根据磁传感器180D检测翻盖的开合。进而根据检测到的皮套的开合状态或翻盖的开合状态,设置翻盖自动解锁等特性。
加速度传感器180E可检测电子设备100在各个方向上(一般为三轴)加速度的大小。当电子设备100静止时可检测出重力的大小及方向。还可以用于识别电子设备姿态,应用于横竖屏切换,计步器等应用。本申请中,电子设备100可以根据加速度传感器180E检测到加速度大小、重力大小的变化来进行横竖屏切换以及折叠屏的单屏显示与大屏显示切换。
距离传感器180F,用于测量距离。电子设备100可以通过红外或激光测量距离。在一些实施例中,拍摄场景,电子设备100可以利用距离传感器180F测距以实现快速对焦。
接近光传感器180G可以包括例如发光二极管(LED)和光检测器,例如光电二极管。发光二极管可以是红外发光二极管。电子设备100通过发光二极管向外发射红外光。电子设备100使用光电二极管检测来自附近物体的红外反射光。当检测到充分的反射光时,可以确定电子设备100附近有物体。当检测到不充分的反射光时,电子设备100可以确定电子设备100附近没有物体。电子设备100可以利用接近光传感器180G检测用户手持电子设备100贴近耳朵通话,以便自动熄灭屏幕达到省电的目的。接近光传感器180G也可用于皮套模式,口袋模式自动解锁与锁屏。
环境光传感器180L用于感知环境光亮度。电子设备100可以根据感知的环境光亮度自适应调节显示屏194亮度。环境光传感器180L也可用于拍照时自动调节白平衡。环境光传感器180L还可以与接近光传感器180G配合,检测电子设备100是否在口袋里,以防误触。
指纹传感器180H用于采集指纹。电子设备100可以利用采集的指纹特性实现指纹解锁,访问应用锁,指纹拍照,指纹接听来电等。
温度传感器180J用于检测温度。在一些实施例中,电子设备100利用温度传感器180J检测的温度,执行温度处理策略。例如,当温度传感器180J上报的温度超过阈值,电子设备100执行降低位于温度传感器180J附近的处理器的性能,以便降低功耗实施热保护。在另一些实施例中,当温度低于另一阈值时,电子设备100对电池142加热,以避免低温导致电子设备100异常关机。在其他一些实施例中,当温度低于又一阈值时,电子设备100对电池142的输出电压执行升压,以避免低温导致的异常关机。
触摸传感器180K,也称“触控面板”。触摸传感器180K可以设置于显示屏194,由触摸传感器180K与显示屏194组成触摸屏,也称“触控屏”。触摸传感器180K用于检测作用于其上或附近的触摸操作。触摸传感器可以将检测到的触摸操作传递给应用处理器,以确定触摸事件类型。可以通过显示屏194提供与触摸操作相关的视觉输出。在另一些实施例中,触摸传感器180K也可以设置于电子设备100的表面,与显示屏194所处的位置不同。
骨传导传感器180M可以获取振动信号。在一些实施例中,骨传导传感器180M可以获取人体声部振动骨块的振动信号。骨传导传感器180M也可以接触人体脉搏,接收血压跳动信号。在一些实施例中,骨传导传感器180M也可以设置于耳机中,结合成骨传导耳机。音频模块170可以基于所述骨传导传感器180M获取的声部振动骨块的振动信号,解析出语音信号,实现语音功能。应用处理器可以基于所述骨传导传感器180M获取的血压跳动信号解析心率信息,实现心率检测功能。
按键190包括开机键,音量键等。按键190可以是机械按键。也可以是触摸式按键。电子设备100可以接收按键输入,产生与电子设备100的用户设置以及功能控制有关的键信号输入。
马达191可以产生振动提示。马达191可以用于来电振动提示,也可以用于触摸振动反馈。例如,作用于不同应用(例如拍照,音频播放等)的触摸操作,可以对应不同的振动反馈效果。作用于显示屏194不同区域的触摸操作,马达191也可对应不同的振动反馈效果。不同的应用场景(例如:时间提醒,接收信息,闹钟,游戏等)也可以对应不同的振动反馈效果。触摸振动反馈效果还可以支持自定义。
指示器192可以是指示灯,可以用于指示充电状态,电量变化,也可以用于指示消息,未接来电,通知等。
SIM卡接口195用于连接SIM卡。SIM卡可以通过插入SIM卡接口195,或从SIM卡接口195拔出,实现和电子设备100的接触和分离。电子设备100可以支持1个或N个SIM卡接口,N为大于1的正整数。SIM卡接口195可以支持Nano SIM卡,Micro SIM卡,SIM卡等。同一个SIM卡接口195可以同时插入多张卡。所述多张卡的类型可以相同,也可以不同。SIM卡接口195也可以兼容不同类型的SIM卡。SIM卡接口195也可以兼容外部存储卡。电子设备100通过SIM卡和网络交互,实现通话以及数据通信等功能。在一些实施例中,电子设备100采用eSIM,即:嵌入式SIM卡。eSIM卡可以嵌在电子设备100中,不能和电子设备100分离。
结合本申请的显示用户界面方法,示例性说明电子设备100的软件和硬件的工作流程。
参见图12,图12中的内核层、框架层、应用层分别对应图1中的内核层、应用程序框架层、应用程序层。
窗口管理器负责应用的用户界面分辨率的管理。窗口管理模块将用户界面的分辨率发给视图管理模块和绘图表面管理模块。
视图管理器获取应用层中APP的XML文件,然后解析出XML文件中的每个节点对应的View对象。然后将解析出的View对象绘制成待显示界面元素。并根据从窗口管理器获取到的用户界面分辨率来设置控件的布局属性。
绘图表面管理器将视图管理模块绘制得到的待显示界面元素组成待显示用户界面。
显示驱动用来显示通过渲染待显示用户界面得到的用户界面。
本申请的各实施方式可以任意进行组合,以实现不同的技术效果。
在上述实施例中,可以全部或部分地通过软件、硬件、固件或者其任意组合来实现。当使用软件实现时,可以全部或部分地以计算机程序产品的形式实现。所述计算机程序产品包 括一个或多个计算机指令。在计算机上加载和执行所述计算机程序指令时,全部或部分地产生按照本申请所述的流程或功能。所述计算机可以是通用计算机、专用计算机、计算机网络、或者其他可编程装置。所述计算机指令可以存储在计算机可读存储介质中,或者从一个计算机可读存储介质向另一个计算机可读存储介质传输,例如,所述计算机指令可以从一个网站站点、计算机、服务器或数据中心通过有线(例如同轴电缆、光纤、数字用户线)或无线(例如红外、无线、微波等)方式向另一个网站站点、计算机、服务器或数据中心进行传输。所述计算机可读存储介质可以是计算机能够存取的任何可用介质或者是包含一个或多个可用介质集成的服务器、数据中心等数据存储设备。所述可用介质可以是磁性介质,(例如,软盘、硬盘、磁带)、光介质(例如,DVD)、或者半导体介质(例如固态硬盘Solid State Disk)等。
以上所述,仅为本申请的具体实施方式,但本申请的保护范围并不局限于此,任何熟悉本技术领域的技术人员在本申请揭露的技术范围内,可轻易想到变化或替换,都应涵盖在本申请的保护范围之内。因此,本申请的保护范围应以所述权利要求的保护范围为准。

Claims (17)

  1. 一种用于电子设备显示用户界面的方法,所述电子设备包括显示屏,其特征在于,包括:
    电子设备接收到用于显示第一用户界面的用户操作;
    响应于所述用户操作,所述电子设备解析所述第一用户界面对应的布局文件,获取View对象、所述View对象的属性;所述布局文件包括多个节点,每个节点用于描述一个所述View对象;所述View对象规定了所述第一用户界面中的界面元素;
    所述电子设备根据所述View对象的属性,并行绘制所述View对象中的系统View对象,逐一绘制所述View对象中的三方View对象,生成和所述View对象对应的待显示界面元素;其中,由Android标准提供的View对象为所述系统View对象,非Android标准提供的View对象为所述三方View对象;所述待显示界面元素是具有几何形状和内容的文字或图片;
    所述电子设备将所述待显示界面元素嵌套为待显示用户界面;
    所述电子设备将所述待显示用户界面渲染成所述第一用户界面;
    所述电子设备在显示屏上显示所述第一用户界面。
  2. 根据权利要求1所述方法,其特征在于,所述电子设备并行绘制所述View对象中的系统View对象,逐一绘制所述View对象中的三方View对象,生成和所述View对象对应的待显示界面元素包括:
    所述电子设备调用多个非UI线程并行绘制所述系统View对象,生成和所述系统View对象对应的所述待显示界面元素;每个所述非UI线程一次绘制一个所述系统View对象;
    所述电子设备调用UI线程逐一绘制所述三方View对象,生成和所述三方View对象对应的所述待显示界面元素;所述UI线程一次绘制一个三方View对象;
    其中,所述电子设备为所述第一用户界面对应的应用程序创建的一个进程中包含一个或多个线程,在所述一个或多个线程中,唯一的用于显示用户界面以及实现用户界面交互功能的主线程为所述UI线程,所述UI线程以外的其他线程为所述非UI线程。
  3. 根据权利要求2所述的方法,其特征在于,所述非UI线程的数量由所述电子设备的CPU使用率确定;所述CPU使用率越高,所述非UI线程数量越少。
  4. 根据权利要求2所述的方法,其特征在于,所述非UI线程的数量由所述View对象中包含的系统View对象的数量确定;所述系统View对象的数量越多,所述非UI线程数量越多。
  5. 根据权利要求1或2所述的方法,其特征在于,所述电子设备接收到用于显示第一用户界面的用户操作之后,所述方法还包括:
    所述电子设备解析所述第一用户界面对应的布局文件,获取所述View对象之间的父子 关系;
    所述电子设备将所述待显示界面元素嵌套为待显示用户界面,具体包括:所述电子设备根据所述View对象之间的父子关系,将子View对象对应的待显示界面元素放置到到父View对象对应的待显示界面元素中;所述子View对象和所述父View对象具有父子关系。
  6. 根据权利要求5所述的方法,其特征在于,所述电子设备解析所述第一用户界面对应的布局文件,获取所述View对象之间的父子关系之后,所述方法还包括:
    所述电子设备将所述View对象、所述View对象的属性以及所述View对象的父子关系保存为树形结构图形;所述树形结构图形中的一个节点表征一个所述View对象;所述树形结构图形中的节点属性对应所述View对象的属性;所述树形结构图形中节点之间的上下级关系表征所述View对象之间的父子关系。
  7. 根据权利要求6所述的方法,其特征在于,所述树形结构图形包含多个子树,所述子树的数量越多,所述非UI线程数量越多;所述子树描述了一部分具有父子关系的View对象。
  8. 根据权利要求1或2所述的方法,其特征在于,所述电子设备解析所述第一用户界面对应的布局文件之后,所述方法还包括:
    所述电子设备记录解析所述布局文件时,所述View对象的解析顺序;
    所述电子设备将所述待显示界面元素嵌套为待显示用户界面,具体包括:所述电子设备按照所述View对象的解析顺序,依次嵌套所述View对象对应的待显示界面元素,得到待显示用户界面。
  9. 根据权利要求8所述的方法,其特征在于,所述电子设备记录解析所述布局文件时,所述View对象的解析顺序包括:
    所述电子设备创建中间对象;所述中间对象是一种数据结构;
    所述电子设备使用所述中间对象记录所述View对象的解析顺序以及所述View对象之间的父子关系。
  10. 根据权利要求1所述的方法,其特征在于,所述用户操作包括:用于启动应用程序并显示所述应用程序提供的主界面的用户操作、用于刷新用户界面的操作、用于跳转用户界面的操作。
  11. 根据权利要求1所述的方法,其特征在于,所述View对象的属性包括:所述View对象的类型、颜色、ID、内容、所述View对象之间的相对位置、相对宽度和相对高度。
  12. 根据权利要求1所述的方法,其特征在于,所述电子设备对布局文件进行解析处理包括:
    所述电子设备创建解析器指针;所述解析器指针指向所述布局文件中正在解析的节点;
    当所述电子设备解析完所述布局文件中的一个节点时,所述解析器指针的移动距离增加第一预设值;所述第一预设值为正整数;
    电子设备记录所述解析器指针的移动距离;所述移动距离用来指示所述电子设备解析到第几个节点。
  13. 根据权利要求1所述的方法,其特征在于,所述电子设备解析所述第一用户界面对应的布局文件之后,所述方法还包括:
    所述电子设备根据所述显示屏的分辨率设置所述第一用户界面中的界面元素在显示屏中的位置和宽度、高度;
    所述电子设备将所述待显示用户界面渲染成所述第一用户界面,具体包括:所述电子设备根据所述布局属性将所述待显示用户界面渲染成所述第一用户界面,渲染得到后的所述第一用户界面中的界面元素符合所述布局属性。
  14. 根据权利要求1所述的方法,所述电子设备解析所述第一用户界面对应的布局文件之后,所述方法还包括:
    所述电子设备根据所述View对象所属类型的名称判断所述View对象是否为系统View对象;
    若所述View对象所属类型的名称由所述电子设备操作系统的名称组成,则所述View对象为系统View对象;若所述View对象类型名称由应用程序的名称组成,则所述View对象为三方View对象。
  15. 一种电子设备,其特征在于,包括:通信接口、存储器和处理器;所述通信接口、所述存储器与所述处理器耦合,所述存储器用于存储计算机程序代码,所述计算机程序代码包括计算机指令,当所述处理器从所述存储器中读取所述计算机指令,以使得所述电子设备执行如权利要求1-14任一项所述方法。
  16. 一种计算机存储介质,其特征在于,包括计算机指令,当所述计算机指令在电子设备上运行时,使得所述电子设备执行如权利要求1至14任一项所述的方法。
  17. 一种计算机程序产品,其特征在于,当所述计算机程序产品在计算机上运行时,使得所述计算机执行如权利要求1至14任一项所述的方法。
PCT/CN2020/107549 2019-08-23 2020-08-06 显示用户界面的方法及电子设备 WO2021036735A1 (zh)

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN201910787833.X 2019-08-23
CN201910787833.XA CN110597512B (zh) 2019-08-23 2019-08-23 显示用户界面的方法及电子设备

Publications (1)

Publication Number Publication Date
WO2021036735A1 true WO2021036735A1 (zh) 2021-03-04

Family

ID=68855391

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2020/107549 WO2021036735A1 (zh) 2019-08-23 2020-08-06 显示用户界面的方法及电子设备

Country Status (2)

Country Link
CN (1) CN110597512B (zh)
WO (1) WO2021036735A1 (zh)

Cited By (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112860259A (zh) * 2021-03-31 2021-05-28 中国工商银行股份有限公司 界面处理方法、装置、电子设备、存储介质及程序产品
CN115599384A (zh) * 2022-12-14 2023-01-13 深圳市明源云科技有限公司(Cn) 图片文字生成方法、装置、设备及其存储介质
CN116521043A (zh) * 2022-09-01 2023-08-01 苏州浩辰软件股份有限公司 一种图纸快速响应的方法、系统及计算机程序产品
CN116976286A (zh) * 2023-09-22 2023-10-31 北京紫光芯能科技有限公司 用于进行文本布局的方法及装置、电子设备、存储介质

Families Citing this family (11)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN110597512B (zh) * 2019-08-23 2022-04-08 荣耀终端有限公司 显示用户界面的方法及电子设备
CN111176647B (zh) * 2020-02-27 2023-06-02 北京飞漫软件技术有限公司 一种构建表盘对象的方法及系统
CN114238804A (zh) * 2020-09-08 2022-03-25 荣耀终端有限公司 组件显示方法和电子设备
CN114201978A (zh) * 2020-09-18 2022-03-18 华为技术有限公司 一种对应用程序的界面进行翻译的方法及相关设备
JP2023545659A (ja) * 2020-09-29 2023-10-31 華為技術有限公司 アプリケーションインターフェースレイアウト方法および電子デバイス
CN113713375A (zh) * 2021-08-02 2021-11-30 网易(杭州)网络有限公司 一种界面元素显示方法、装置、终端及存储介质
CN114489689B (zh) * 2021-08-26 2023-01-13 荣耀终端有限公司 应用程序的安装方法、系统、电子设备及服务器
CN113849247B (zh) * 2021-09-26 2024-04-30 上海哔哩哔哩科技有限公司 直播间页面元素的显示方法、装置及系统
CN114461171B (zh) * 2022-01-27 2023-11-28 山东省城市商业银行合作联盟有限公司 网上银行页面的朗读方法及系统
CN116089056B (zh) * 2022-08-22 2023-10-20 荣耀终端有限公司 用于图像绘制的方法及相关装置
CN116450057B (zh) * 2023-06-19 2023-08-15 成都赛力斯科技有限公司 基于客户端的车辆功能图片生成方法、装置及存储介质

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20140181591A1 (en) * 2012-12-20 2014-06-26 Microsoft Corporation Test strategy for profile-guided code execution optimizers
CN104007967A (zh) * 2014-05-21 2014-08-27 广州华多网络科技有限公司 一种基于可扩展标记语言的用户界面生成方法和装置
CN109669752A (zh) * 2018-12-19 2019-04-23 北京达佳互联信息技术有限公司 一种界面绘制方法、装置及移动终端
CN110597512A (zh) * 2019-08-23 2019-12-20 华为技术有限公司 显示用户界面的方法及电子设备

Family Cites Families (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20020149619A1 (en) * 2001-02-12 2002-10-17 Perot Systems Corporation System and method for constructing a graphical user interface
CN101329665A (zh) * 2007-06-18 2008-12-24 国际商业机器公司 解析标记语言文档的方法和解析器
CN104123127A (zh) * 2013-04-27 2014-10-29 北京宇和永泰网络科技有限公司 手机软件开发通用平台
CN106528159A (zh) * 2016-11-22 2017-03-22 深圳铂睿智恒科技有限公司 一种移动终端实现应用具有动态效果的方法及系统
CN107729094B (zh) * 2017-08-29 2020-12-29 口碑(上海)信息技术有限公司 一种用户界面渲染的方法及装置
CN108733445A (zh) * 2018-05-17 2018-11-02 北京五八信息技术有限公司 一种视图管理方法、装置、设备及计算机可读存储介质
CN109634598B (zh) * 2018-12-14 2020-09-18 北京字节跳动网络技术有限公司 一种页面显示方法、装置、设备及存储介质

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20140181591A1 (en) * 2012-12-20 2014-06-26 Microsoft Corporation Test strategy for profile-guided code execution optimizers
CN104007967A (zh) * 2014-05-21 2014-08-27 广州华多网络科技有限公司 一种基于可扩展标记语言的用户界面生成方法和装置
CN109669752A (zh) * 2018-12-19 2019-04-23 北京达佳互联信息技术有限公司 一种界面绘制方法、装置及移动终端
CN110597512A (zh) * 2019-08-23 2019-12-20 华为技术有限公司 显示用户界面的方法及电子设备

Cited By (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112860259A (zh) * 2021-03-31 2021-05-28 中国工商银行股份有限公司 界面处理方法、装置、电子设备、存储介质及程序产品
CN112860259B (zh) * 2021-03-31 2024-02-06 中国工商银行股份有限公司 界面处理方法、装置、电子设备、存储介质
CN116521043A (zh) * 2022-09-01 2023-08-01 苏州浩辰软件股份有限公司 一种图纸快速响应的方法、系统及计算机程序产品
CN116521043B (zh) * 2022-09-01 2023-12-22 苏州浩辰软件股份有限公司 一种图纸快速响应的方法、系统及计算机程序产品
CN115599384A (zh) * 2022-12-14 2023-01-13 深圳市明源云科技有限公司(Cn) 图片文字生成方法、装置、设备及其存储介质
CN115599384B (zh) * 2022-12-14 2023-05-26 深圳市明源云科技有限公司 图片文字生成方法、装置、设备及其存储介质
CN116976286A (zh) * 2023-09-22 2023-10-31 北京紫光芯能科技有限公司 用于进行文本布局的方法及装置、电子设备、存储介质
CN116976286B (zh) * 2023-09-22 2024-02-27 北京紫光芯能科技有限公司 用于进行文本布局的方法及装置、电子设备、存储介质

Also Published As

Publication number Publication date
CN110597512A (zh) 2019-12-20
CN110597512B (zh) 2022-04-08

Similar Documents

Publication Publication Date Title
WO2021036735A1 (zh) 显示用户界面的方法及电子设备
WO2021013158A1 (zh) 显示方法及相关装置
WO2021129326A1 (zh) 一种屏幕显示方法及电子设备
WO2021139768A1 (zh) 跨设备任务处理的交互方法、电子设备及存储介质
WO2021103981A1 (zh) 分屏显示的处理方法、装置及电子设备
WO2020253758A1 (zh) 一种用户界面布局方法及电子设备
WO2021000839A1 (zh) 一种分屏方法及电子设备
WO2021135730A1 (zh) 显示界面适配方法、显示界面适配设计方法和电子设备
WO2021000804A1 (zh) 锁定状态下的显示方法及装置
WO2020221063A1 (zh) 切换父页面和子页面的方法、相关装置
WO2021036770A1 (zh) 一种分屏处理方法及终端设备
WO2020093988A1 (zh) 一种图像处理方法及电子设备
WO2021082835A1 (zh) 启动功能的方法及电子设备
WO2020062294A1 (zh) 系统导航栏的显示控制方法、图形用户界面及电子设备
WO2021249087A1 (zh) 卡片分享方法、电子设备及通信系统
WO2021196970A1 (zh) 一种创建应用快捷方式的方法、电子设备及系统
WO2022068483A1 (zh) 应用启动方法、装置和电子设备
WO2022052662A1 (zh) 显示方法及电子设备
WO2020155875A1 (zh) 电子设备的显示方法、图形用户界面及电子设备
WO2021135838A1 (zh) 一种页面绘制方法及相关装置
WO2021078032A1 (zh) 用户界面的显示方法及电子设备
WO2020233556A1 (zh) 一种通话内容处理方法和电子设备
WO2022017393A1 (zh) 显示交互系统、显示方法及设备
WO2021175272A1 (zh) 一种应用信息的显示方法及相关设备
WO2022179275A1 (zh) 终端应用控制的方法、终端设备及芯片系统

Legal Events

Date Code Title Description
121 Ep: the epo has been informed by wipo that ep was designated in this application

Ref document number: 20855941

Country of ref document: EP

Kind code of ref document: A1

NENP Non-entry into the national phase

Ref country code: DE

122 Ep: pct application non-entry in european phase

Ref document number: 20855941

Country of ref document: EP

Kind code of ref document: A1

122 Ep: pct application non-entry in european phase

Ref document number: 20855941

Country of ref document: EP

Kind code of ref document: A1