Page display method and device, storage medium and electronic device
Patent Information
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- BEIJING VOLCANO ENGINE TECH CO LTD
- Filing Date
- 2022-12-27
- Publication Date
- 2026-06-16
Smart Images
Figure CN116028740B_ABST
Abstract
Description
Technical Field
[0001] This disclosure relates to the field of page display technology, and more specifically, to a page display method, apparatus, storage medium, and electronic device. Background Technology
[0002] Flutter is a widely used cross-platform UI (User Interface) framework. Developers typically use Flutter to develop web pages, which are called Flutter pages. Taking Flutter's SurfaceView solution on the Android platform as an example, for scenarios where Flutter pages are embedded into native Android pages (i.e., card scenarios), SurfaceView needs to create an independent rendering surface for each Flutter page. Because each Flutter page's rendering surface is independent of the native Android page's rendering surface, desynchronization can occur between the Flutter page and the native Android page when scrolling or swiping. Therefore, SurfaceView has poor support for card scenarios. Summary of the Invention
[0003] This summary section is provided to briefly introduce the concepts, which will be described in detail in the detailed description section below. This summary section is not intended to identify key or essential features of the claimed technical solution, nor is it intended to limit the scope of the claimed technical solution.
[0004] Firstly, this disclosure provides a page display method, including:
[0005] In response to a screen refresh signal, a layer tree for the subpage to be displayed in the next frame is determined. The subpage is a page to be displayed on the native Android page to be displayed in the next frame, and the subpage is implemented through a non-native Android component. The layer tree is a tree structure formed by layering the page nodes that constitute the subpage and according to the different layers obtained from the layering and the drawing instructions corresponding to each layer.
[0006] The layer tree is converted into an intermediate product for drawing the subpages;
[0007] In the native rendering thread, the intermediate artifacts are read through the callback interface provided by Android, and the sub-pages are drawn on the target rendering surface according to the intermediate artifacts. The target rendering surface is a memory area used to carry the drawing data of the Android native page and the sub-pages, and the drawing data is controlled to be displayed on the screen after being read by the graphics processor.
[0008] Secondly, this disclosure provides a page display device, comprising:
[0009] The layer tree determination module is used to determine the layer tree of the subpage to be displayed in the next frame in response to the screen refresh signal. The subpage is a page to be displayed on the Android native page to be displayed in the next frame, and the subpage is implemented by a non-Android native component. The layer tree is a tree structure formed by layering the page nodes used to constitute the subpage and according to the different layers obtained by layering and the drawing instructions corresponding to each layer.
[0010] A layer tree conversion module is used to convert the layer tree into an intermediate product for drawing the sub-pages;
[0011] The page rendering module is used to read the intermediate product through the callback interface provided by Android in the native rendering thread, and to draw the subpage on the target rendering surface according to the intermediate product. The target rendering surface is a memory area used to carry the drawing data of the Android native page and the subpage, and the drawing data is controlled to be displayed on the screen after being read by the graphics processor.
[0012] Thirdly, this disclosure provides a computer-readable storage medium having a computer program stored thereon, which, when executed by a processing device, implements the method described in the first aspect.
[0013] Fourthly, this disclosure provides an electronic device, comprising:
[0014] A storage device on which computer programs are stored;
[0015] A processing device for executing the computer program in the storage device to implement the method described in the first aspect.
[0016] In this technical solution, by utilizing special interfaces provided by Android and the callback mechanism of the native rendering thread for these interfaces, data from subpages implemented using non-Android native components can be inserted into the rendering process of the native rendering thread for drawing. This allows the native rendering thread to draw subpages implemented using non-Android native components and the Android native page on the same rendering surface. Because subpages implemented using non-Android native components and the Android native page are drawn on the same rendering surface, synchronization between the subpage and the Android native page can be ensured when the page scrolls or swipes. Therefore, this solution can effectively support card-based scenarios.
[0017] Other features and advantages of this disclosure will be described in detail in the following detailed description section. Attached Figure Description
[0018] The above and other features, advantages, and aspects of the embodiments of this disclosure will become more apparent from the accompanying drawings and the following detailed description. Throughout the drawings, the same or similar reference numerals denote the same or similar elements. It should be understood that the drawings are schematic, and the originals and elements are not necessarily drawn to scale. In the drawings:
[0019] Figure 1 This is a schematic diagram of a card scenario provided in an exemplary embodiment;
[0020] Figure 2 This is a flowchart of a page display method provided in an exemplary embodiment;
[0021] Figure 3 This is a flowchart of a page display method in a first mode provided by an exemplary embodiment;
[0022] Figure 4 This is a flowchart of a page display method in a second mode provided by an exemplary embodiment;
[0023] Figure 5 This is a block diagram of a page display device provided in an exemplary embodiment;
[0024] Figure 6 This is a block diagram of an electronic device provided in an exemplary embodiment. Detailed Implementation
[0025] Embodiments of this disclosure will now be described in more detail with reference to the accompanying drawings. While some embodiments of this disclosure are shown in the drawings, it should be understood that this disclosure can be implemented in various forms and should not be construed as limited to the embodiments set forth herein. Rather, these embodiments are provided to provide a more thorough and complete understanding of this disclosure. It should be understood that the accompanying drawings and embodiments of this disclosure are for illustrative purposes only and are not intended to limit the scope of protection of this disclosure.
[0026] It should be understood that the steps described in the method embodiments of this disclosure may be performed in different orders and / or in parallel. Furthermore, the method embodiments may include additional steps and / or omit the steps shown. The scope of this disclosure is not limited in this respect.
[0027] The term "comprising" and its variations as used herein are open-ended inclusions, meaning "including but not limited to". The term "based on" means "at least partially based on". The term "one embodiment" means "at least one embodiment"; the term "another embodiment" means "at least one additional embodiment"; the term "some embodiments" means "at least some embodiments". Definitions of other terms will be given in the description below.
[0028] It should be noted that the concepts of "first" and "second" mentioned in this disclosure are used only to distinguish different devices, modules or units, and are not used to limit the order of functions performed by these devices, modules or units or their interdependencies.
[0029] It should be noted that the terms "a" and "a plurality of" used in this disclosure are illustrative rather than restrictive, and those skilled in the art should understand that, unless otherwise expressly indicated in the context, they should be understood as "one or more".
[0030] The names of messages or information exchanged between multiple devices in the embodiments of this disclosure are for illustrative purposes only and are not intended to limit the scope of such messages or information.
[0031] It is understood that before using the technical solutions disclosed in the various embodiments of this disclosure, users should be informed of the types, scope of use, and usage scenarios of the personal information involved in this disclosure in an appropriate manner in accordance with relevant laws and regulations, and user authorization should be obtained.
[0032] For example, upon receiving a user's active request, a prompt message is sent to the user to explicitly inform them that the requested operation will require the acquisition and use of the user's personal information. This allows the user to independently choose whether to provide personal information to the software or hardware, such as the electronic device, application, server, or storage medium performing the operations of this disclosed technical solution, based on the prompt message.
[0033] As an optional but non-limiting implementation, in response to a user's active request, sending a prompt message to the user can be done via a pop-up window, where the prompt message can be presented in text format. Furthermore, the pop-up window can also include a selection control allowing the user to choose "agree" or "disagree" to provide personal information to the electronic device.
[0034] It is understood that the above notification and user authorization process are merely illustrative and do not constitute a limitation on the implementation of this disclosure. Other methods that comply with relevant laws and regulations may also be applied to the implementation of this disclosure.
[0035] Meanwhile, it is understood that the data involved in this technical solution (including but not limited to the data itself, the acquisition or use of the data) shall comply with the requirements of relevant laws, regulations and related provisions.
[0036] As mentioned in the background section, Flutter's SurfaceView solution on the Android platform has poor support for card-based scenarios. Therefore, this disclosure provides a page display method that better supports card-based scenarios. It is understood that a card-based scenario refers to the ability to embed and display one or more card-shaped subpages within a native Android page, such as... Figure 1 As shown, these subpages can be implemented using Flutter. Each Flutter page can correspond to a card on the page. When a user clicks on a Flutter page, they can access the corresponding card function.
[0037] Figure 2 A flowchart of a page display method in an exemplary embodiment is shown, such as Figure 2 As shown, the methods for displaying this page include:
[0038] S201, in response to the screen refresh signal, determines the layer tree of the subpage to be displayed in the next frame.
[0039] For example, the screen refresh signal is the Vsync signal. In response to the screen refresh signal, a layer tree of the subpages to be displayed in the next frame is generated.
[0040] The subpage to be displayed in the next frame is a page embedded in the native Android page to be displayed in the next frame. This subpage is implemented using a non-native Android component, such as a page implemented using Flutter. Understandably, if multiple subpages need to be embedded in the native Android page to be displayed in the next frame, a layer tree for each subpage to be displayed in the next frame is generated in response to the screen refresh signal. The layer tree is a tree structure formed by layering the page nodes that constitute the subpage and based on the different layers and the corresponding drawing instructions for each layer.
[0041] S202 converts the layer tree into an intermediate product for drawing subpages.
[0042] In some embodiments, the intermediate product can be a set of drawing instructions, thus converting the layer tree into a set of drawing instructions for drawing subpages. In other embodiments, the intermediate product can be a texture, thus converting the layer tree into a texture for drawing subpages.
[0043] Understandably, if multiple subpages need to be embedded and displayed on the native Android page to be displayed in the next frame, then the layer tree of each subpage to be displayed in the next frame needs to be converted into intermediate products for drawing the corresponding subpage, such as drawing instruction sets or textures.
[0044] S203, in the native rendering thread, the intermediate product is read through the callback interface provided by Android, and the sub-page is drawn on the target rendering surface according to the intermediate product. The target rendering surface is a memory area used to carry the drawing data of the Android native page and the sub-page, and the drawing data is controlled to be displayed on the screen after being read by the graphics processor.
[0045] In the native rendering thread, the native Android page will be drawn on the target rendering surface corresponding to the rendering thread according to the drawing instructions used to draw the native Android page. In addition, the previously saved intermediate artifacts will be read through the callback interface provided by Android, and the corresponding sub-pages will be drawn on the target rendering surface according to the intermediate artifacts.
[0046] Understandably, if multiple subpages need to be embedded in the Android native page to be displayed in the next frame, the intermediate artifacts corresponding to each subpage are read through the callback interface provided by Android in the native rendering thread, and each subpage is drawn on the aforementioned target rendering surface according to the intermediate artifacts. Thus, the Android native page to be displayed in the next frame and each subpage to be displayed in the next frame are drawn on the same rendering surface.
[0047] After completing the drawing of the next frame of the Android native page to be displayed and each sub-page, the graphics processor can read the drawing data in the target rendering surface and control the display of the drawing data on the screen, so that the next frame of the page can be displayed on the screen. The next frame of the page includes the Android native page and each sub-page embedded and displayed on the Android native page.
[0048] In some embodiments, if the intermediate product is a drawing instruction set, then in the native rendering thread, the drawing instruction set is read through the callback interface provided by Android, and the corresponding sub-page is drawn on the target rendering surface according to the drawing instructions in the drawing instruction set.
[0049] In other embodiments, if the intermediate product is a texture, the texture is read through the callback interface provided by Android in the native rendering thread and drawn directly on the target rendering surface.
[0050] It's important to note that solutions like Flutter's SurfaceView on Android require creating a separate rendering surface for each Flutter page. This independent rendering surface, separate from the native Android page, leads to poor support for card-based scenarios. The inventors discovered a special interface in the Android source code: the GL Functor interface. The native rendering thread can call back this interface and read data to render specific subpages. The above solution utilizes this special Android interface and the native rendering thread's callback mechanism to insert data from subpages implemented with non-native Android components into the native rendering thread's rendering process. This allows the native rendering thread to render non-native Android component subpages on the same surface as the native Android page. Because these subpages are rendered on the same surface, page scrolling and swiping ensure synchronization, thus providing excellent support for card-based scenarios.
[0051] In an exemplary embodiment, the layer tree of the next frame of the subpage to be displayed can be generated as follows: First, based on the current frame of the subpage displayed on the screen and the configured page animation information, the animation attribute values of the next frame of the subpage are determined. For example, the configured page animation information includes animation type, mode, time, and other information. Based on the animation attribute values of the next frame of the subpage and the page data, a component tree (such as a Widget tree) is constructed to describe the page structure of the subpage. Based on the component tree, the page nodes used to constitute the subpage are laid out, with each page node corresponding to a page element constituting the subpage. Based on the component tree, the position and size of each page node are calculated to obtain layout information. Based on the layout information, the page nodes are layered, and the layer tree of the next frame of the subpage is generated based on the different layers obtained from the layering and the drawing instructions corresponding to each layer.
[0052] Understandably, if multiple subpages need to be embedded and displayed on the native Android page to be displayed in the next frame, the above process is used to generate the layer tree for each subpage to be displayed in the next frame.
[0053] In an optional embodiment, since the intermediate artifacts can have two forms—a drawing instruction set and a texture—two modes can be provided for developers to configure, including a first mode and a second mode. Developers can pre-configure the corresponding modes and convert the layer tree into different intermediate artifacts to realize the drawing of subpages under different modes. In practice, the mode configuration can be pre-written in the program. This mode configuration can be represented by 0, 1, or 2. When the mode is configured as 0, it indicates that the original Flutter solution, such as the SurfaceView solution, is used; when the mode is configured as 1, it indicates that the first mode of this solution is used; and when the mode is configured as 2, it indicates that the second mode of this solution is used.
[0054] Figure 3 A flowchart of a page display method in a first mode in an exemplary embodiment is shown, as follows: Figure 3 As shown, the methods for displaying this page include:
[0055] S301, in response to the screen refresh signal, determines the layer tree of each subpage to be displayed in the next frame.
[0056] S302, according to the pre-configured first mode, converts each layer tree into a drawing instruction set for drawing the corresponding sub-page.
[0057] S303, in the native rendering thread, reads the drawing instruction set corresponding to each subpage through the callback interface provided by Android, and draws the corresponding subpage on the target rendering surface according to the drawing instructions in the drawing instruction set.
[0058] In this way, with the first mode pre-configured, the layer tree of each sub-page to be displayed in the next frame can be converted into a drawing instruction set. The native rendering thread will, on the one hand, draw the Android native page on the target rendering surface corresponding to the rendering thread according to the drawing instructions used to draw the Android native page. On the other hand, it will also read the drawing instruction set of each sub-page through the callback interface provided by Android, and draw the corresponding sub-page on the target rendering surface used to draw the Android native page according to the drawing instructions in the drawing instruction set of each sub-page. Thus, the Android native page and each sub-page are drawn on the same rendering surface. The graphics processor controls the display of the drawing data on the screen by reading the drawing data in the target rendering surface, thereby completing the display of the next frame page.
[0059] In some embodiments, the drawing instruction set can be implemented using SkPicture provided by the Skia graphics renderer.
[0060] Furthermore, the method also includes: creating at least one instance of a drawing context based on a graphics library to obtain at least one sub-drawing context associated with that drawing context, which provides a drawing environment for executing drawing instructions. For example, if the drawing context is an OpenGL Context, then, taking the Skia graphics renderer as an example, the sub-drawing context could be a GrDirectContext instance. Understandably, these sub-drawing contexts can individually store some private resources and data, but they will share the state of the drawing context.
[0061] If multiple sub-pages need to be embedded and displayed on the Android native page to be displayed in the next frame, multiple instances are created based on the drawing context of the graphics library to obtain multiple sub-drawing contexts. The Android native page and each sub-page correspond to a sub-drawing context.
[0062] In the native rendering thread, drawing instructions for drawing the Android native page are executed based on the sub-drawing context corresponding to the Android native page, so as to draw the Android native page on the target rendering surface. During the execution of drawing instructions, operations on the sub-drawing context are mapped to operations on the drawing context. In addition, in the native rendering thread, drawing instructions in the drawing instruction set corresponding to each sub-page are also executed based on the sub-drawing context corresponding to that sub-page, so as to draw the corresponding sub-page on the target rendering surface.
[0063] By creating separate sub-drawing contexts for the Android native page and each sub-page, isolation of private resources / data between the Android native page and each sub-page is achieved.
[0064] Furthermore, since the Android native page and each sub-page's sub-drawing context share the same drawing context state, sometimes abnormal page display occurs due to state conflicts between the Android native page and each sub-page's sub-drawing context when executing drawing instructions. To solve this problem, the page display method also includes: resetting the state of each sub-drawing context before executing drawing instructions for drawing the Android native page and / or executing drawing instructions for drawing sub-pages.
[0065] Figure 4 A flowchart of a page display method in a second mode in an exemplary embodiment is shown, as follows: Figure 4 As shown, the methods for displaying this page include:
[0066] S401, in response to the screen refresh signal, determines the layer tree of each subpage to be displayed in the next frame.
[0067] S402, according to the pre-configured second mode, draw the layer tree of each subpage as a texture in the texture buffer corresponding to each subpage.
[0068] Before this, a corresponding texture buffer needs to be created for each subpage.
[0069] S403, in the native rendering thread, reads the texture corresponding to each subpage through the callback interface provided by Android and draws the texture on the target rendering surface.
[0070] In this way, with the second mode pre-configured, the layer tree of each sub-page to be displayed in the next frame can be drawn as a texture. The native rendering thread will, on the one hand, draw the Android native page on the target rendering surface corresponding to the rendering thread according to the drawing instructions used to draw the Android native page; on the other hand, it will also read the texture of each sub-page through the callback interface provided by Android and draw the texture directly on the target rendering surface used to draw the Android native page. Thus, the Android native page and each sub-page are drawn on the same rendering surface. The graphics processor controls the display of the drawing data on the screen by reading the drawing data in the target rendering surface, thereby completing the display of the next frame of the page.
[0071] In some embodiments, the texture can be implemented using a shared texture (ShareContext) or the EGLImageKHR mechanism provided by Android.
[0072] In some embodiments, Figures 3-4 The process shown involves the UI thread, GPU thread, and native rendering thread working together to display one frame of a page. Specifically, the UI thread responds to the screen refresh signal, generating a layer tree for each sub-page to be displayed in the next frame. The GPU thread converts the layer tree of each sub-page into a drawing instruction set or texture based on a pre-configured first or second mode. The native rendering thread reads the drawing instruction set or texture through a callback interface and draws the native Android page on the target rendering surface, as well as the corresponding sub-pages on the target rendering surface according to the drawing instruction set or texture. Finally, the graphics processor reads the drawing data from the target rendering surface and controls the display of this drawing data on the screen, thus completing the display of the next frame of the page.
[0073] Understandably, in the second mode, since the GPU thread has already drawn the layer tree of the subpage as a texture before the native rendering thread, the native rendering thread does not need to perform additional drawing. It only needs to draw the texture directly onto the rendering surface. Therefore, it can significantly reduce the drawing pressure on the native rendering thread and allow the native rendering thread to complete the drawing of a frame of the page faster. The GPU thread itself is relatively idle, and the operation of drawing the layer tree as a texture does not cause a burden on the GPU thread. When the native interface is complex and the native rendering thread is heavily loaded, the page display will be smoother than in the first mode.
[0074] In summary, the page display method provided in this disclosure, utilizing the callback interface provided by Android, can offer two modes: a first mode and a second mode. The first mode rasterizes the layer tree of subpages implemented with non-Android native components into a drawing instruction set. The native rendering thread executes the drawing instructions in the drawing instruction set to draw the subpage, eliminating the need to create a separate rendering surface or buffer, thus significantly reducing Graphics memory usage. Furthermore, the UI thread and GPU thread can be selectively merged into one thread, or the GPU thread and native rendering thread can be merged into one thread, further streamlining the rendering pipeline. The second mode renders the layer tree of subpages implemented with non-Android native components into a texture in the GPU thread, and then the native rendering thread directly draws the texture onto the rendering surface. This approach maximizes the utilization of the GPU thread, reduces the rendering overhead of the native rendering thread, and results in smoother page display. The first mode consumes less memory, while the second mode offers superior smoothness. Developers can choose the appropriate mode based on their actual needs.
[0075] Therefore, this technical solution can well support page display in card scenarios, and can also reduce the memory usage of graphics and improve the smoothness of page display.
[0076] Based on the same technical concept, this disclosure also provides a page display device. Please refer to... Figure 5 The page display device 500 includes:
[0077] The layer tree determination module 501 is used to determine the layer tree of the subpage to be displayed in the next frame in response to the screen refresh signal. The subpage is a page to be displayed on the Android native page to be displayed in the next frame, and the subpage is implemented by a non-Android native component. The layer tree is a tree structure formed by layering the page nodes used to constitute the subpage and according to the different layers obtained by layering and the drawing instructions corresponding to each layer.
[0078] Layer tree conversion module 502 is used to convert the layer tree into an intermediate product for drawing the sub-page;
[0079] The page rendering module 503 is used to read the intermediate product through the callback interface provided by Android in the native rendering thread, and to draw the sub-page on the target rendering surface according to the intermediate product. The target rendering surface is a memory area used to carry the rendering data of the Android native page and the sub-page, and the rendering data is controlled to be displayed on the screen after being read by the graphics processor.
[0080] In some embodiments, the layer tree conversion module 502 is used to convert the layer tree into a drawing instruction set for drawing the subpage according to a pre-configured first mode; the page drawing module 503 is used to read the drawing instruction set through a callback interface provided by Android in the native rendering thread, and draw the subpage on the target rendering surface according to the drawing instructions in the drawing instruction set.
[0081] In some embodiments, the page display device 500 further includes a context instance creation module, configured to create at least one instance based on a graphics library drawing context to obtain at least one sub-drawing context associated with the drawing context, wherein the drawing context is used to provide a drawing environment for executing drawing instructions. The page drawing module 503 is configured to, in the native rendering thread, execute drawing instructions for drawing the Android native page according to the sub-drawing context corresponding to the Android native page, to draw the Android native page on the target rendering surface, wherein operations on the sub-drawing context are mapped to operations on the drawing context during the execution of the drawing instructions.
[0082] In some embodiments, the page drawing module 503 is configured to execute drawing instructions in the drawing instruction set according to the sub-drawing context corresponding to the sub-page, so as to draw the sub-page on the target rendering surface.
[0083] In some embodiments, the page display device 500 further includes a state reset module for resetting the state of each of the sub-drawing contexts before executing drawing instructions for drawing the Android native page and / or executing drawing instructions for drawing the sub-page.
[0084] In some embodiments, the layer tree conversion module 502 is used to draw the layer tree as a texture in the texture buffer corresponding to the subpage according to a pre-configured second mode; the page drawing module 503 is used to read the texture through the callback interface provided by Android in the native rendering thread, and draw the texture on the target rendering surface.
[0085] In some embodiments, the layer tree determination module 501 is configured to: determine the animation attribute value of the next frame subpage based on the current frame subpage displayed on the screen and the configured page animation information; and construct a page structure to describe the subpage based on the animation attribute value of the next frame subpage and page data.
[0086] The component tree is constructed; the page nodes used to constitute the subpage are laid out according to the component tree; the page nodes are layered according to the layout information, and the layer tree of the next frame subpage is generated according to the different layers obtained by layering and the drawing instructions corresponding to each layer.
[0087] Regarding the apparatus in the above embodiments, the specific manner in which each module performs its operation has been described in detail in the embodiments related to the method, and will not be elaborated upon here.
[0088] The following is for reference. Figure 6 The diagram illustrates a structural schematic of an electronic device 600 suitable for implementing embodiments of the present disclosure. The electronic devices in the embodiments of the present disclosure may include, but are not limited to, mobile terminals such as mobile phones, laptops, digital broadcast receivers, PDAs (personal digital assistants), PADs (tablet computers), PMPs (portable multimedia players), in-vehicle terminals (e.g., in-vehicle navigation terminals), and fixed terminals such as digital TVs and desktop computers. Figure 6 The electronic device shown is merely an example and should not be construed as limiting the functionality and scope of the embodiments disclosed herein.
[0089] 0 as Figure 6 As shown, the electronic device 600 may include a processing device (e.g., a central processing unit, a graphics processing unit, etc.) 601, which can perform various appropriate actions and processes according to a program stored in a read-only memory (ROM) 602 or a program loaded from a storage device 608 into a random access memory (RAM) 603. The RAM 603 also stores various...
[0090] Programs and data. Processing unit 601, ROM 602, and RAM 603 are interconnected via bus 604. Input / output (I / O) interface 605 is also connected to bus 604.
[0091] Typically, the following devices can be connected to I / O interface 605: input devices 606 including, for example, touchscreens, touchpads, keyboards, mice, cameras, microphones, accelerometers, gyroscopes, etc.; output devices 607 including, for example, liquid crystal displays (LCDs), speakers, vibrators, etc.; storage devices 608 including, for example, magnetic tapes, hard disks, etc.; and communication devices 609. Communication device 609 allows electronic device 600 to communicate wirelessly or wiredly with other devices to exchange data. Although Figure 6 An electronic device 600 with various devices is shown; however, it should be understood that it is not required to implement or possess all of the devices shown. More or fewer devices may be implemented or possessed alternatively.
[0092] In particular, according to embodiments of this disclosure, the processes described above with reference to the flowcharts can be implemented as computer software programs. For example, embodiments of this disclosure include a computer program product comprising a computer program carried on a non-transitory computer-readable medium, the computer program containing program code for performing the methods shown in the flowcharts. In such embodiments, the computer program can be downloaded and installed from a network via a communication device 609, or installed from a storage device 608, or installed from a ROM 602. When the computer program is executed by the processing device 601, it performs the functions defined in the methods of embodiments of this disclosure.
[0093] It should be noted that the computer-readable medium described in this disclosure can be a computer-readable signal medium or a computer-readable storage medium, or any combination thereof. A computer-readable storage medium can be, for example,—but not limited to—an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination thereof. More specific examples of a computer-readable storage medium may include, but are not limited to: an electrical connection having one or more wires, a portable computer disk, a hard disk, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, portable compact disk read-only memory (CD-ROM), optical storage device, magnetic storage device, or any suitable combination thereof. In this disclosure, a computer-readable storage medium can be any tangible medium containing or storing a program that can be used by or in connection with an instruction execution system, apparatus, or device. In this disclosure, a computer-readable signal medium can include a data signal propagated in baseband or as part of a carrier wave, carrying computer-readable program code. Such propagated data signals can take various forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination thereof. A computer-readable signal medium can be any computer-readable medium other than a computer-readable storage medium, which can send, propagate, or transmit a program for use by or in connection with an instruction execution system, apparatus, or device. The program code contained on the computer-readable medium can be transmitted using any suitable medium, including but not limited to: wires, optical fibers, RF (radio frequency), etc., or any suitable combination thereof.
[0094] The aforementioned computer-readable medium may be included in the aforementioned electronic device; or it may exist independently and not assembled into the electronic device.
[0095] The aforementioned computer-readable medium carries one or more programs that, when executed by the electronic device, cause the electronic device to: in response to a screen refresh signal, determine a layer tree of a subpage to be displayed in the next frame, wherein the subpage is a page to be displayed on the Android native page to be displayed in the next frame, and the subpage is implemented using non-Android native components; the layer tree is a tree structure formed by layering the page nodes that constitute the subpage and according to the different layers obtained from the layering and the drawing instructions corresponding to each layer; convert the layer tree into an intermediate product for drawing the subpage; in the native rendering thread, read the intermediate product through a callback interface provided by Android, and draw the subpage on a target rendering surface according to the intermediate product, wherein the target rendering surface is a memory area for carrying the drawing data of the Android native page and the subpage, and the drawing data is controlled to be displayed on the screen after being read by the graphics processor.
[0096] Computer program code for performing the operations of this disclosure can be written in one or more programming languages or a combination thereof, including but not limited to object-oriented programming languages such as Java, Smalltalk, and C++, as well as conventional procedural programming languages such as the "C" language or similar programming languages. The program code can be executed entirely on the user's computer, partially on the user's computer, as a standalone software package, partially on the user's computer and partially on a remote computer, or entirely on a remote computer or server. In cases involving remote computers, the remote computer can be connected to the user's computer via any type of network—including a local area network (LAN) or a wide area network (WAN)—or can be connected to an external computer (e.g., via the Internet using an Internet service provider).
[0097] The flowcharts and block diagrams in the accompanying drawings illustrate the architecture, functionality, and operation of possible implementations of systems, methods, and computer program products according to various embodiments of this disclosure. In this regard, each block in a flowchart or block diagram may represent a module, segment, or portion of code containing one or more executable instructions for implementing a specified logical function. It should also be noted that in some alternative implementations, the functions indicated in the blocks may occur in a different order than those indicated in the drawings. For example, two consecutively indicated blocks may actually be executed substantially in parallel, and they may sometimes be executed in reverse order, depending on the functions involved. It should also be noted that each block in the block diagrams and / or flowcharts, and combinations of blocks in the block diagrams and / or flowcharts, can be implemented using a dedicated hardware-based system that performs the specified function or operation, or using a combination of dedicated hardware and computer instructions.
[0098] The modules described in the embodiments of this disclosure can be implemented in software or in hardware. The names of the modules do not necessarily limit the module itself; for example, a layer tree determination module can also be described as "a module for determining the layer tree of the subpage to be displayed in the next frame".
[0099] The functions described above in this document can be performed, at least in part, by one or more hardware logic components. For example, exemplary types of hardware logic components that can be used, without limitation, include: Field Programmable Gate Arrays (FPGAs), Application-Specific Integrated Circuits (ASICs), Application Standard Products (ASSPs), System-on-Chip (SoCs), Complex Programmable Logic Devices (CPLDs), and so on.
[0100] In the context of this disclosure, a machine-readable medium can be a tangible medium that may contain or store a program for use by or in conjunction with an instruction execution system, apparatus, or device. A machine-readable medium can be a machine-readable signal medium or a machine-readable storage medium. A machine-readable medium can be, but is not limited to, electronic, magnetic, optical, electromagnetic, infrared, or semiconductor systems, apparatus, or devices, or any suitable combination of the foregoing. More specific examples of machine-readable storage media include electrical connections based on one or more wires, portable computer disks, hard disks, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, portable compact disk read-only memory (CD-ROM), optical storage devices, magnetic storage devices, or any suitable combination of the foregoing.
[0101] According to one or more embodiments of this disclosure, Example 1 provides a page display method, including:
[0102] In response to a screen refresh signal, a layer tree for the subpage to be displayed in the next frame is determined. The subpage is a page to be displayed on the native Android page to be displayed in the next frame, and the subpage is implemented through a non-native Android component. The layer tree is a tree structure formed by layering the page nodes that constitute the subpage and according to the different layers obtained from the layering and the drawing instructions corresponding to each layer.
[0103] The layer tree is converted into an intermediate product for drawing the subpages;
[0104] In the native rendering thread, the intermediate artifacts are read through the callback interface provided by Android, and the sub-pages are drawn on the target rendering surface according to the intermediate artifacts. The target rendering surface is a memory area used to carry the drawing data of the Android native page and the sub-pages, and the drawing data is controlled to be displayed on the screen after being read by the graphics processor.
[0105] According to one or more embodiments of this disclosure, Example 2 provides the method of Example 1, wherein converting the layer tree into an intermediate product for drawing the subpage includes:
[0106] According to the pre-configured first mode, the layer tree is converted into a drawing instruction set for drawing the sub-pages;
[0107] The step of reading the intermediate artifacts through a callback interface provided by Android in the native rendering thread, and drawing the subpage on the target rendering surface based on the intermediate artifacts, includes:
[0108] In the native rendering thread, the drawing instruction set is read through the callback interface provided by Android, and the subpage is drawn on the target rendering surface according to the drawing instructions in the drawing instruction set.
[0109] According to one or more embodiments of this disclosure, Example 3 provides the method of Example 2, the method further comprising:
[0110] At least one instance is created based on the drawing context of the graphics library to obtain at least one sub-drawing context associated with the drawing context, the drawing context being used to provide a drawing environment for executing drawing instructions;
[0111] In the native rendering thread, drawing instructions for drawing the Android native page are executed according to the sub-drawing context corresponding to the Android native page, so as to draw the Android native page on the target rendering surface. During the execution of the drawing instructions, the operation on the sub-drawing context is mapped to the operation on the drawing context.
[0112] According to one or more embodiments of this disclosure, Example 4 provides the method of Example 3, wherein drawing the subpage on the target rendering surface according to drawing instructions in the drawing instruction set includes:
[0113] The drawing instructions in the drawing instruction set are executed according to the sub-drawing context corresponding to the sub-page to draw the sub-page on the target rendering surface.
[0114] According to one or more embodiments of this disclosure, Example 5 provides the method of Example 4, further comprising:
[0115] Before executing drawing instructions for drawing the native Android page and / or drawing instructions for drawing the sub-page, the state of each sub-drawing context is reset.
[0116] According to one or more embodiments of this disclosure, Example 6 provides the method of Example 1, wherein converting the layer tree into an intermediate product for drawing the subpages includes:
[0117] According to the pre-configured second mode, the layer tree is drawn as a texture in the texture buffer corresponding to the subpage;
[0118] The step of reading the intermediate artifacts through a callback interface provided by Android in the native rendering thread, and drawing the subpage on the target rendering surface based on the intermediate artifacts, includes:
[0119] In the native rendering thread, the texture is read through the callback interface provided by Android and then drawn on the target rendering surface.
[0120] According to one or more embodiments of this disclosure, Example 7 provides a method for any of Examples 1 to 6, wherein determining the layer tree of the subpage to be displayed in the next frame includes:
[0121] Based on the current frame subpage displayed on the screen and the configured page animation information, determine the animation attribute values for the next frame subpage;
[0122] Based on the animation attribute values of the next frame's subpage and the page data, construct a component tree to describe the page structure of the subpage;
[0123] Based on the component tree, the page nodes used to constitute the subpage are laid out;
[0124] The page nodes are layered based on the layout information, and the layer tree of the next frame subpage is generated based on the different layers obtained from the layering and the drawing instructions corresponding to each layer.
[0125] According to one or more embodiments of this disclosure, Example 8 provides a page display device, including:
[0126] The layer tree determination module is used to determine the layer tree of the subpage to be displayed in the next frame in response to the screen refresh signal. The subpage is a page to be displayed on the Android native page to be displayed in the next frame, and the subpage is implemented by a non-Android native component. The layer tree is a tree structure formed by layering the page nodes used to constitute the subpage and according to the different layers obtained by layering and the drawing instructions corresponding to each layer.
[0127] A layer tree conversion module is used to convert the layer tree into an intermediate product for drawing the sub-pages;
[0128] The page rendering module is used to read the intermediate product through the callback interface provided by Android in the native rendering thread, and to draw the subpage on the target rendering surface according to the intermediate product. The target rendering surface is a memory area used to carry the drawing data of the Android native page and the subpage, and the drawing data is controlled to be displayed on the screen after being read by the graphics processor.
[0129] According to one or more embodiments of the present disclosure, Example 9 provides a computer-readable storage medium having a computer program stored thereon that, when executed by a processing device, implements the method of any of Examples 1 to 7.
[0130] According to one or more embodiments of this disclosure, Example 10 provides an electronic device, including:
[0131] A storage device on which computer programs are stored;
[0132] A processing device for executing the computer program in the storage device to implement the method of any of the examples 1 to 7.
[0133] The above description is merely a preferred embodiment of this disclosure and an explanation of the technical principles employed. Those skilled in the art should understand that the scope of this disclosure is not limited to technical solutions formed by specific combinations of the above-described technical features, but should also cover other technical solutions formed by arbitrary combinations of the above-described technical features or their equivalents without departing from the above-described concept. For example, technical solutions formed by substituting the above features with (but not limited to) technical features disclosed in this disclosure that have similar functions.
[0134] Furthermore, while the operations are described in a specific order, this should not be construed as requiring these operations to be performed in the specific order shown or in a sequential order. In certain environments, multitasking and parallel processing may be advantageous. Similarly, while several specific implementation details are included in the above discussion, these should not be construed as limiting the scope of this disclosure. Certain features described in the context of individual embodiments may also be implemented in combination in a single embodiment. Conversely, various features described in the context of a single embodiment may also be implemented individually or in any suitable sub-combination in multiple embodiments.
[0135] Although the subject matter has been described using language specific to structural features and / or methodological logic, it should be understood that the subject matter defined in the appended claims is not necessarily limited to the specific features or actions described above. Rather, the specific features and actions described above are merely illustrative examples of implementing the claims.
Claims
1. A page display method, characterized in that, include: In response to a screen refresh signal, a layer tree for the subpage to be displayed in the next frame is determined. The subpage is a page to be displayed on the native Android page to be displayed in the next frame, and the subpage is implemented through a non-native Android component. The layer tree is a tree structure formed by layering the page nodes that constitute the subpage and according to the different layers obtained from the layering and the drawing instructions corresponding to each layer. The layer tree is converted into an intermediate product for drawing the subpage. The intermediate product includes a drawing instruction set and a texture. In the native rendering thread, the intermediate product is read through a callback interface provided by Android. The subpage is drawn on the same target rendering surface as the Android native page. The target rendering surface is a memory area for carrying the drawing data of the Android native page and the subpage. The drawing data is controlled to be displayed on the screen after being read by the graphics processor.
2. The method according to claim 1, characterized in that, The step of converting the layer tree into an intermediate product for drawing the subpage includes: According to the pre-configured first mode, the layer tree is converted into a drawing instruction set for drawing the sub-pages; The step of reading the intermediate artifacts through a callback interface provided by Android in the native rendering thread, and drawing the subpage on the target rendering surface based on the intermediate artifacts, includes: In the native rendering thread, the drawing instruction set is read through the callback interface provided by Android, and the subpage is drawn on the target rendering surface according to the drawing instructions in the drawing instruction set.
3. The method according to claim 2, characterized in that, The method further includes: At least one instance is created based on the drawing context of the graphics library to obtain at least one sub-drawing context associated with the drawing context, the drawing context being used to provide a drawing environment for executing drawing instructions; In the native rendering thread, drawing instructions for drawing the Android native page are executed according to the sub-drawing context corresponding to the Android native page, so as to draw the Android native page on the target rendering surface. During the execution of the drawing instructions, the operation on the sub-drawing context is mapped to the operation on the drawing context.
4. The method according to claim 3, characterized in that, The step of drawing the subpage on the target rendering surface according to the drawing instructions in the drawing instruction set includes: The drawing instructions in the drawing instruction set are executed according to the sub-drawing context corresponding to the sub-page to draw the sub-page on the target rendering surface.
5. The method according to claim 4, characterized in that, The method further includes: Before executing drawing instructions for drawing the native Android page and / or drawing instructions for drawing the sub-page, the state of each sub-drawing context is reset.
6. The method according to claim 1, characterized in that, The step of converting the layer tree into an intermediate product for drawing the subpage includes: According to the pre-configured second mode, the layer tree is drawn as a texture in the texture buffer corresponding to the subpage; The step of reading the intermediate artifacts through a callback interface provided by Android in the native rendering thread, and drawing the subpage on the target rendering surface based on the intermediate artifacts, includes: In the native rendering thread, the texture is read through the callback interface provided by Android and then drawn on the target rendering surface.
7. The method according to any one of claims 1-6, characterized in that, The process of determining the layer tree of the subpage to be displayed in the next frame includes: Based on the current frame subpage displayed on the screen and the configured page animation information, determine the animation attribute values for the next frame subpage; Based on the animation attribute values of the next frame's subpage and the page data, construct a component tree to describe the page structure of the subpage; Based on the component tree, the page nodes used to constitute the subpage are laid out; The page nodes are layered based on the layout information, and the layer tree of the next frame subpage is generated based on the different layers obtained from the layering and the drawing instructions corresponding to each layer.
8. A page display device, characterized in that, include: The layer tree determination module is used to determine the layer tree of the subpage to be displayed in the next frame in response to the screen refresh signal. The subpage is a page to be displayed on the Android native page to be displayed in the next frame, and the subpage is implemented by a non-Android native component. The layer tree is a tree structure formed by layering the page nodes used to constitute the subpage and according to the different layers obtained by layering and the drawing instructions corresponding to each layer. A layer tree conversion module is used to convert the layer tree into an intermediate product for drawing the sub-page, the intermediate product including a drawing instruction set and a texture; The page rendering module is used to read the intermediate product through the callback interface provided by Android in the native rendering thread, and to draw the subpage on the same target rendering surface as the Android native page based on the intermediate product and the Android native page. The target rendering surface is a memory area used to carry the drawing data of the Android native page and the subpage, and the drawing data is controlled to be displayed on the screen after being read by the graphics processor.
9. A computer-readable storage medium having a computer program stored thereon, characterized in that, When executed by the processing device, the program implements the steps of the method described in any one of claims 1-7.
10. An electronic device, characterized in that, include: A storage device on which computer programs are stored; A processing device for executing the computer program in the storage device to implement the steps of the method according to any one of claims 1-7.