Display device and control display method

Abstract

The invention provides a display device and a control display method. The display device comprises a display; the controller is connected with the display, and the controller is configured to receive a first instruction that the focus moves to the first control; in response to the first instruction, updating the focus to the first control, drawing the first control after obtaining the focus through a second layout class, and obtaining a first shadow bitmap corresponding to the first control from the cache by the second layout class; if the first shadow bitmap exists in the cache, loading the first shadow bitmap to a first control canvas corresponding to the first control; if the first shadow bitmap does not exist, drawing a second shadow bitmap on the first control canvas; and drawing the first control on the first control canvas through the first layout class inherited by the second layout class, so that the first control is positioned on an upper layer of the first shadow bitmap or the second shadow bitmap. According to the method and the device, the shadow effect is added to the control without the shadow effect.

Description

Technical Field

[0001] The present application relates to the field of image processing technology, and in particular to a display device and a control display method. Background Art

[0002] Setting shadow effects for controls is a way to enhance the immersion of controls in the page. In the related art, for newly developed pages, during the development and design phase of the page, in the layout file of the control that needs to set the shadow effect, a shadow area can be designed outside the control, and then a shadow can be displayed in the shadow area to achieve the setting of the shadow effect for the control. However, for a large number of pages that have already been launched, if the above-mentioned method of modifying the layout file is adopted, the page is redeveloped and designed, so as to add shadow effects one by one to the controls without shadow effects, and to achieve version upgrades of the page display effects, the workload is huge and the development cycle is long, which affects the timely launch of the new version of the page. Summary of the invention

[0003] In order to solve the problem of adding shadow effects to controls, the present application provides a display device and a control display method.

[0004] In a first aspect, the present application provides a display device, the display device comprising:

[0005] monitor;

[0006] A controller is connected to the display, and the controller is configured to:

[0007] Receive a first instruction to move the focus to a first control;

[0008] In response to the first instruction, the focus is updated to the first control, and the first control after obtaining the focus is drawn by the second layout class. The method for the second layout class to draw the first control after obtaining the focus includes: according to the shadow drawing switch being in a first state representing turning on the shadow effect, a first shadow bitmap corresponding to the first control is obtained from a cache; if the first shadow bitmap exists in the cache, the first shadow bitmap is loaded into a first control canvas corresponding to the first control; if the first shadow bitmap does not exist in the cache, the second shadow bitmap corresponding to the first control is drawn on the first control canvas; the first control is drawn on the first control canvas by the first layout class inherited by the second layout class, so that the first control is located in an upper layer of the first shadow bitmap or the second shadow bitmap, wherein the size of the first shadow bitmap and the second shadow bitmap is larger than the size of the first control.

[0009] In some embodiments, the controller is further configured to:

[0010] Receive a second instruction to remove the focus from the first control;

[0011] In response to the second instruction, the first control after the focus is removed is drawn through the second layout class, wherein the method for the second layout class to draw the first control after the focus is removed includes: according to the shadow drawing switch being in a second state representing turning off the shadow effect, the first control is drawn on the first control canvas through the first layout class inherited by the second layout class, so that the bottom layer of the first control does not include the first shadow bitmap or the second shadow bitmap.

[0012] In some embodiments, the shadow drawing switch is in a first state indicating that the shadow effect is turned on after the control to be drawn of the second layout class obtains the focus, and is in a second state indicating that the shadow effect is turned off after the control to be drawn of the second layout class removes the focus.

[0013] In some embodiments, when the control to be drawn of the second layout class obtains focus and the current page is a first type page that indicates support for shadow effects, the shadow drawing switch is in a first state that indicates turning on the shadow effect; when the control to be drawn of the second layout class removes focus, or the current page is a second type page that indicates not supporting shadow effects, the shadow drawing switch is in a second state that indicates turning off the shadow effect.

[0014] In some embodiments, the controller is further configured to: store the second shadow bitmap in the cache through the second layout class, wherein a size of the second shadow bitmap is the same as a size of the first shadow bitmap.

[0015] In some embodiments, obtaining a first shadow bitmap corresponding to the first control from a cache includes:

[0016] Calculating a target size corresponding to the first control according to the size of the first control and a preset size mapping rule;

[0017] A first shadow bitmap having a size equal to the target size is obtained from the cache.

[0018] In some embodiments, drawing a second shadow bitmap corresponding to the first control on the first control canvas includes:

[0019] Generate a blank bitmap of a size corresponding to the first control;

[0020] Generate a shadow brush, wherein the shadow brush is used to draw a rectangular frame with a shadow;

[0021] Draw a rectangular frame on the blank bitmap by using the shadow brush to obtain a second shadow bitmap, wherein the size of the rectangular frame is the same as the size of the first control;

[0022] The second shadow bitmap is loaded into the first control canvas.

[0023] In some embodiments, drawing a rectangular frame on the blank bitmap by using the shadow brush includes:

[0024] When the first control is a control with rounded corners, drawing a transparent rectangular frame with rounded corners and a shadow;

[0025] When the first control is a control without rounded corners, a transparent rectangular frame with a shadow and without rounded corners is drawn.

[0026] In a second aspect, the present application provides a control display method, the method comprising:

[0027] Receive a first instruction to move the focus to a first control;

[0028] In response to the first instruction, the focus is updated to the first control, and the first control after obtaining the focus is drawn by the second layout class. The method for the second layout class to draw the first control after obtaining the focus includes: according to the shadow drawing switch being in a first state representing turning on the shadow effect, a first shadow bitmap corresponding to the first control is obtained from a cache; if the first shadow bitmap exists in the cache, the first shadow bitmap is loaded into a first control canvas corresponding to the first control; if the first shadow bitmap does not exist in the cache, the second shadow bitmap corresponding to the first control is drawn on the first control canvas; the first control is drawn on the first control canvas by the first layout class inherited by the second layout class, so that the first control is located in an upper layer of the first shadow bitmap or the second shadow bitmap, wherein the size of the first shadow bitmap and the second shadow bitmap is larger than the size of the first control.

[0029] In some embodiments, it also includes:

[0030] Receive a second instruction to remove the focus from the first control;

[0031] In response to the second instruction, the first control after the focus is removed is drawn through the second layout class, wherein the method for the second layout class to draw the first control after the focus is removed includes: according to the shadow drawing switch being in a second state representing turning off the shadow effect, the first control is drawn on the first control canvas through the first layout class inherited by the second layout class, so that the bottom layer of the first control does not include the first shadow bitmap or the second shadow bitmap.

[0032] The beneficial effects of the display device and control display method provided by the present application include:

[0033] For the pages that have been launched, the embodiment of the present application designs a second layout class to inherit the existing first layout class for drawing controls during the secondary development and design stage of the page. The second layout class first adds a shadow bitmap to the canvas of the control before drawing the control, and then continues to draw the control on the canvas through the inherited first layout class, so that the second layout class has the function of adding shadow effects to the controls on the basis of retaining the function of the first layout class to draw controls. There is no need to modify the layout file for each control that needs to display the shadow effect. In the display stage of the page, the controls are drawn through the second layout class, so that the drawn controls can have shadow effects, which greatly reduces the workload and development time of the secondary development and design of the page; and the second layout class of the embodiment of the present application is configured to draw the controls with shadow effects according to the first state of the shadow drawing switch representing the turning on of the shadow effect, thereby realizing the switch control of the shadow effect; the second layout class of the embodiment of the present application is also configured to preferentially obtain the shadow bitmap from the cache, and if the shadow bitmap cannot be obtained, then create the shadow bitmap, which can ensure the speed of displaying the shadow effect of the control and the smoothness of the page display. BRIEF DESCRIPTION OF THE DRAWINGS

[0034] In order to more clearly illustrate the implementation methods in the embodiments of the present application or the related technologies, the following is a brief introduction to the drawings required for use in the embodiments or the related technology descriptions. Obviously, the drawings described below are some embodiments of the present application, and a person skilled in the art can also obtain other drawings based on these drawings.

[0035] Figure 1 Schematic diagram of an operation scenario between a display device and a control device according to some embodiments is exemplarily shown in FIG.

[0036] Figure 2 exemplarily shows a hardware configuration block diagram of a control device 100 according to some embodiments;

[0037] Figure 3 exemplarily shows a hardware configuration block diagram of a display device 200 according to some embodiments;

[0038] Figure 4 exemplarily shows a schematic diagram of software configuration in a display device 200 according to some embodiments;

[0039] Figure 5 A schematic diagram of a flow chart of a control display method according to some embodiments is exemplarily shown in FIG.

[0040] Figure 6 exemplarily shows a schematic diagram of inheritance relationship of the second layout class according to some embodiments;

[0041] Figure 7A flowchart of a method for drawing a first control according to some embodiments is exemplarily shown in FIG.

[0042] Figure 8 Schematic diagrams of shadow brushes and transparent rectangular frames according to some embodiments are exemplarily shown in FIG.

[0043] Fig. 9 A schematic diagram of a first control according to some embodiments is exemplarily shown in FIG.

[0044] Fig.10 exemplarily shows a schematic diagram after the first control acquires the focus according to some embodiments;

[0045] Fig.11 exemplarily shows a schematic diagram after the first control acquires the focus according to some embodiments;

[0046] Fig.12 exemplarily shows a schematic diagram after the first control acquires the focus according to some embodiments. DETAILED DESCRIPTION

[0047] In order to make the purpose and implementation method of the present application clearer, the exemplary implementation method of the present application will be clearly and completely described below in conjunction with the drawings in the exemplary embodiments of the present application. Obviously, the described exemplary embodiments are only part of the embodiments of the present application, rather than all the embodiments.

[0048] It should be noted that the brief description of terms in this application is only for the convenience of understanding the embodiments described below, and is not intended to limit the embodiments of this application. Unless otherwise specified, these terms should be understood according to their common and usual meanings.

[0049] The terms "first", "second", "third", etc. in the specification and claims of this application and the above drawings are used to distinguish similar or similar objects or entities, and do not necessarily mean to limit a specific order or sequence, unless otherwise noted. It should be understood that the terms used in this way can be interchangeable under appropriate circumstances.

[0050] The terms "comprises," "comprising," and "having," and any variations thereof, are intended to cover but not exclude inclusion, for example, a product or device comprising a list of components is not necessarily limited to all the components expressly listed but may include other components not expressly listed or inherent to such product or device.

[0051] The display device provided in the embodiments of the present application may have various implementation forms, for example, it may be a television, a smart television, a laser projection device, a monitor, an electronic bulletin board, an electronic table, etc. Figure 1 and Figure 2 This is a specific implementation of the display device of the present application.

[0052] Figure 1 FIG. 1 is a schematic diagram of an operation scenario between a display device and a control device according to an embodiment. Figure 1 As shown, the user can operate the display device 200 through the smart device 300 or the control apparatus 100 .

[0053] In some embodiments, the control device 100 may be a remote controller, and the communication between the remote controller and the display device includes infrared protocol communication or Bluetooth protocol communication, and other short-range communication methods, and the display device 200 is controlled wirelessly or wired. The user may control the display device 200 by inputting user commands through buttons on the remote controller, voice input, control panel input, etc.

[0054] In some embodiments, a smart device 300 (such as a mobile terminal, a tablet computer, a computer, a laptop computer, etc.) may also be used to control the display device 200. For example, the display device 200 is controlled using an application running on the smart device.

[0055] In some embodiments, the display device may not use the above-mentioned smart device or control device to receive instructions, but may receive user control through touch or gestures.

[0056] In some embodiments, the display device 200 can also be controlled in a manner other than the control device 100 and the smart device 300. For example, the user's voice command control can be directly received through a module for obtaining voice commands configured inside the display device 200, or the user's voice command control can be received through a voice control device set outside the display device 200.

[0057] In some embodiments, the display device 200 also communicates data with the server 400. The display device 200 may be allowed to communicate via a local area network (LAN), a wireless local area network (WLAN), and other networks. The server 400 may provide various content and interactions to the display device 200. The server 400 may be one cluster or multiple clusters, and may include one or more types of servers.

[0058] Figure 2 Schematically shows a block diagram of a configuration of the control device 100 according to an exemplary embodiment. Figure 2 As shown, the control device 100 includes a controller 110, a communication interface 130, a user input / output interface 140, a memory, and a power supply. The control device 100 can receive input operation instructions from the user, and convert the operation instructions into instructions that the display device 200 can recognize and respond to, playing the role of an interactive intermediary between the user and the display device 200.

[0059] like Figure 3 The display device 200 includes at least one of a tuner and demodulator 210, a communicator 220, a detector 230, an external device interface 240, a controller 250, a display 260, an audio output interface 270, a memory, a power supply, and a user interface.

[0060] In some embodiments, the controller includes a processor, a video processor, an audio processor, a graphics processor, a RAM, a ROM, and a first interface to an nth interface for input / output.

[0061] The display 260 includes a display screen component for presenting images, and a driving component for driving image display, which is used to receive image signals output from the controller, and display video content, image content, and menu control interface components and user control UI interface.

[0062] The display 260 may be a liquid crystal display, an OLED display, or a projection display, and may also be a projection device and a projection screen.

[0063] The communicator 220 is a component for communicating with an external device or server according to various communication protocol types. For example, the communicator may include at least one of a Wifi module, a Bluetooth module, a wired Ethernet module, and other network communication protocol chips or near field communication protocol chips, and an infrared receiver. The display device 200 can establish transmission and reception of control signals and data signals with the external control device 100 or the server 400 through the communicator 220.

[0064] The user interface can be used to receive control signals from the control device 100 (such as an infrared remote controller, etc.).

[0065] The detector 230 is used to collect signals from the external environment or the external interaction. For example, the detector 230 includes a light receiver, a sensor for collecting the intensity of ambient light; or, the detector 230 includes an image collector, such as a camera, which can be used to collect external environment scenes, user attributes or user interaction gestures; or, the detector 230 includes a sound collector, such as a microphone, etc., for receiving external sounds.

[0066] The external device interface 240 may include, but is not limited to, any one or more of the following: an optical fiber interface, a high-definition multimedia interface (HDMI), an analog or digital high-definition component input interface (component), a composite video input interface (CVBS), a USB input interface (USB), an RGB port, etc. It may also be a composite input / output interface formed by the above multiple interfaces.

[0067] The tuner-demodulator 210 receives broadcast television signals via wired or wireless reception, and demodulates audio and video signals, such as EPG data signals, from a plurality of wireless or wired broadcast television signals.

[0068] In some embodiments, the controller 250 and the tuner-demodulator 210 may be located in different separate devices, that is, the tuner-demodulator 210 may also be located in an external device of the main device where the controller 250 is located, such as an external set-top box.

[0069] The controller 250 controls the operation of the display device and responds to user operations through various software control programs stored in the memory. The controller 250 controls the overall operation of the display device 200. For example, in response to receiving a user command for selecting a UI object to be displayed on the display 260, the controller 250 can perform operations related to the object selected by the user command.

[0070] In some embodiments, the controller includes at least one of a central processing unit (CPU), a video processor, an audio processor, a graphics processing unit (GPU), a RAM (Random Access Memory, RAM), a ROM (Read-Only Memory, ROM), a first interface to an nth interface for input / output, a communication bus (Bus), etc.

[0071] The user may input a user command through a graphical user interface (GUI) displayed on the display 260, and the user input interface receives the user input command through the graphical user interface (GUI). Alternatively, the user may input a user command through a specific sound or gesture, and the user input interface recognizes the sound or gesture through a sensor to receive the user input command.

[0072] "User interface" is the medium interface for interaction and information exchange between applications or operating systems and users. It realizes the conversion between the internal form of information and the form acceptable to users. The commonly used form of user interface is the Graphical User Interface (GUI), which refers to the user interface related to computer operation displayed in a graphical way. It can be an interface element such as an icon, window, control, etc. displayed on the display screen of an electronic device, where the control can include icons, buttons, menus, tabs, text boxes, dialog boxes, status bars, navigation bars, widgets, etc.

[0073] See also Figure 4 In some embodiments, the system is divided into four layers, from top to bottom, namely, the application layer (Applications) layer (referred to as "application layer"), the application framework layer (Application Framework) layer (referred to as "framework layer"), the Android runtime (Android runtime) and system library layer (referred to as "system runtime library layer"), and the kernel layer.

[0074] In some embodiments, at least one application is running in the application layer, and these applications can be window programs, system settings programs, clock programs, etc. provided by the operating system, or applications developed by third-party developers. In specific implementations, the application packages in the application layer are not limited to the above examples.

[0075] The framework layer provides application programming interfaces (APIs) and programming frameworks for applications. The application framework layer includes some predefined functions. The application framework layer is equivalent to a processing center that determines the actions that applications in the application layer take. Through the API interface, applications can access system resources and obtain system services during execution.

[0076] like Figure 4As shown, in the embodiment of the present application, the application framework layer includes managers, content providers, etc., wherein the manager includes at least one of the following modules: an activity manager (ActivityManager) is used to interact with all activities running in the system; a location manager (Location Manager) is used to provide system services or applications with access to system location services; a package manager (Package Manager) is used to retrieve various information related to the application package currently installed on the device; a notification manager (NotificationManager) is used to control the display and clearing of notification messages; a window manager (Window Manager) is used to manage icons, windows, toolbars, wallpapers, and desktop components on the user interface.

[0077] In some embodiments, the activity manager is used to manage the life cycle of each application and the common navigation back function, such as controlling the exit, opening, and back of the application. The window manager is used to manage all window programs, such as obtaining the display screen size, determining whether there is a status bar, locking the screen, capturing the screen, and controlling the display window changes (for example, reducing the display window, shaking the display, distorting the display, etc.).

[0078] In some embodiments, the system runtime layer provides support for the upper layer, namely the framework layer. When the framework layer is used, the Android operating system will run the C / C++ library contained in the system runtime layer to implement the functions to be implemented by the framework layer.

[0079] In some embodiments, the kernel layer is a layer between hardware and software. Figure 4 As shown, the kernel layer includes at least one of the following drivers: audio driver, display driver, Bluetooth driver, camera driver, WIFI driver, USB driver, HDMI driver, sensor driver (such as fingerprint sensor, temperature sensor, pressure sensor, etc.), and power driver, etc.

[0080] The hardware or software architecture in some embodiments may be based on the introduction in the above embodiments, and in some embodiments may be based on other similar hardware or software architectures, so as to implement the technical solution of the present application.

[0081] In some embodiments, the controls on the page of the display device do not have shadow effects. In the layout files of these controls, the display content of the controls can be laid out and configured in the display area of ​​the controls, and there is no need to reserve a shadow area outside the display area of ​​the controls for displaying the shadow effects. As users' pursuit of page display effects continues to improve, in some pages, adding shadow effects to controls has become an important means to improve the immersion of controls in the page and improve the page display effect.

[0082] In order to add shadow effects to controls, one way to achieve this is to directly design a shadow area outside the control in the layout file of the control during the development and design stage of a new page, and then display a shadow in the shadow area to achieve setting a shadow effect for the control. For old pages that have been developed and launched, it is necessary to perform secondary development and design on the page, modify the layout file of the control that needs to display the shadow effect, design a shadow area outside the control display area, and then display a shadow in the shadow area, so that the control can display the shadow effect after the secondary development and design of the page is completed. However, the number of old pages and the number of controls that need to display shadow effects in the old pages may be large. If the layout files of the controls are modified one by one, the workload is large and the time is long.

[0083] In order to solve the above technical problems, while achieving the same shadow effect, reducing the development cost of adding shadow effects to controls and shortening the development time of pages, the embodiment of the present application proposes a control display method, which generates a second layout class that can add a shadow bitmap function to the control during the secondary development and design stage of the page, and the second layout class inherits the first layout class that originally does not have the function of adding a shadow bitmap to the control. When the shadow effect is not needed, the function of adding the shadow bitmap is skipped, and the control without the shadow effect is drawn through the first layout class inherited by the second layout class, wherein the drawing process may include: drawing posters, drawing text, drawing corner marks, etc. in the display area of ​​the control in sequence.

[0084] When a shadow effect is needed, a shadow bitmap is first added to the control canvas through the second layout class, and then the control is drawn on the canvas through the first layout class inherited by the second layout class, so that a control with a shadow effect can be obtained. There is no need to modify the layout file of the control in advance during the page development and design stage.

[0085] See also Figure 5 The control display method is used for a display device and may include the following steps:

[0086] Step S101: receiving a control instruction to switch to a first control.

[0087] In some embodiments, the first control is a control that acquires focus in response to a control instruction. The control instruction may be a power-on instruction, and the first control is a control corresponding to a default focus position after the display device is powered on, such as a recommended position control.

[0088] In some embodiments, the control instruction may be an instruction to switch from one control to another control, and the first control is the control where the focus is after the focus is switched.

[0089] In some embodiments, the first control may be a preset control on some preset pages of the display device, such as controls in the Header bar on the home page of the display device, controls in the navigation bar, recommended position controls, etc., or controls on other pages of the display device. The embodiments of the present application do not make specific limitations on this.

[0090] In some embodiments, in addition to the controls that display shadow effects after acquiring focus, the page of the display device also includes controls that do not display shadow effects after acquiring focus, such as a playback window control.

[0091] The control instruction to switch to the first control may be a control instruction to switch from a control that displays a shadow effect after acquiring focus to another control that displays a shadow effect after acquiring focus, or may be a control instruction to switch from a control that does not display a shadow effect after acquiring focus to a control that displays a shadow effect after acquiring focus.

[0092] In some embodiments, a shadow switch flag may be set in the page data of the page currently displayed by the display device. The shadow switch flag may be an on flag indicating that the shadow effect of the controls on the current page is turned on. In this case, the current page is a first type of page. Alternatively, the shadow switch flag may be an off flag indicating that the shadow effect of the controls on the current page is turned off. In this case, the current page is a second type of page.

[0093] The shadow switch flag is a general switch flag indicating whether the controls on the page have the shadow effect turned on. In actual implementation, when drawing the controls on the page, it can be configured that when the general switch flag is turned on and the control gets the focus, the control with the shadow effect is drawn, and when the general switch flag is turned off or the control does not get the focus, the control without the shadow effect is drawn.

[0094] In actual implementation, when the main switch is in the on position, all controls on the page may be drawn with shadow effects, and when the main switch is in the off position, all controls on the page may not be drawn with shadow effects.

[0095] In some embodiments, the control data of each control on the page may include a control type identifier, such as a first identifier and a second identifier. The first identifier may indicate that the control is a control that displays a shadow effect after obtaining focus, and the second identifier may indicate that the control is a control that does not display a shadow effect after obtaining focus.

[0096] Alternatively, the type identifier may represent that the control is a header bar control, a navigation bar control, a recommendation position control or other control, wherein some controls with type identifiers are configured to display a shadow effect after obtaining the focus, such as header bar controls, navigation bar controls, recommendation position controls or other controls, and other controls with type identifiers are configured not to display a shadow effect after obtaining the focus, such as a playback window control.

[0097] In some embodiments, a user can input a control instruction to the display device through a control device, such as a remote control, to switch the focus of the display device to a first control. For example, when the focus of the display device is on control A, the user can press the direction key of the remote control to switch the focus of the display device to control B, where control B is the first control corresponding to the control instruction, and control B is a control that displays a shadow effect after acquiring the focus.

[0098] Step S102: in response to the first instruction, updating the focus to the first control, drawing the first control after obtaining the focus through the second layout class, the method for the second layout class to draw the first control after obtaining the focus includes: according to the shadow drawing switch being in a first state representing turning on the shadow effect, obtaining a first shadow bitmap corresponding to the first control from the cache; if the first shadow bitmap exists in the cache, loading the first shadow bitmap to the first control canvas corresponding to the first control; if the first shadow bitmap does not exist in the cache, drawing the second shadow bitmap corresponding to the first control on the first control canvas; drawing the first control on the first control canvas through the first layout class inherited from the second layout class, so that the first control is located in the upper layer of the first shadow bitmap or the second shadow bitmap, wherein the size of the first shadow bitmap and the second shadow bitmap is larger than the size of the first control.

[0099] In some embodiments, the display device draws controls through multiple layout classes. Common layout classes may include RelativeLayout class, LinearLayout class and FrameLayou class. Through these layout classes, controls with different layout modes can be drawn on the canvas of the control. For example, through the RelativeLayout class, each component in the control can be drawn as a relative layout control, through the LinearLayout class, each component in the control can be drawn as a linear layout control, and through the FrameLayou class, each component in the control can be drawn as a hierarchical layout control. The above common layout class does not have the function of drawing shadow effects for controls and can be called the first layout class. In order to achieve the addition of shadow effects to controls, the layout file of the control can be modified in the secondary development and design stage of the page to add padding (pad) to the outside of the control. The padding is used to display the shadow effect. The shadow is drawn in the padding through CardView to wrap the control. In the display stage of the page, the control without shadow effects is drawn through the first layout class, and the shadow effect is displayed outside the control based on the layout file.

[0100] However, modifying the layout file of the control is time-consuming and laborious. In some embodiments, during the secondary development and design stage of the page, a second layout class with a shadow drawing effect can be added, and the layout class for drawing the control can be changed from the original first layout class to the second layout class. In the display stage of the page, the newly added second layout class is used to first load a shadow bitmap with a shadow effect on the control canvas, and then the control is drawn, so that the shadow effect can be added to the control without modifying the layout file of the control.

[0101] Among them, since the types of controls on a page are usually limited, such as 3 to 5 types, each type of control can be modified to be drawn by the second layout class to enable the shadow effect for all controls on the page after obtaining the focus, saving time and effort.

[0102] The newly added second layout class can be configured to inherit the first layout class, so that in the second layout class, in addition to adding the code for the shadow effect, the method in the first layout class can continue to be called to draw the control, so that the code data volume of the second layout class is smaller, the development time is shortened, and the original function of the first layout class to draw the control is retained.

[0103] In some embodiments, since the first layout class includes multiple layout classes, multiple second layout classes can be developed accordingly. Figure 6 , is a schematic diagram of the inheritance relationship of the second layout class according to some embodiments.

[0104] like Figure 6As shown, the second layout class includes three layout classes: ShadowRelativeLayout class, ShadowLinearLayout class and ShadowFrameLayout class, wherein the ShadowRelativeLayout class inherits the RelativeLayout class, the ShadowLinearLayout class inherits the LinearLayout class, and the ShadowFrameLayout class inherits the FrameLayout class.

[0105] In some embodiments, although the methods of drawing controls of the first layout class inherited by multiple second layout classes are different, the methods of adding shadow effects to controls by these second layout classes may be the same, all including loading a shadow bitmap on the canvas of the control. Therefore, after developing a second layout class, the program code for loading the shadow bitmap can be transplanted to another second layout class to achieve rapid development of another layout class.

[0106] In some embodiments, the second layout class includes a program code for determining the state of a shadow drawing switch. When the shadow drawing switch is in the first state representing the opening of the shadow effect, the program code for loading a shadow bitmap on the canvas of the control is executed, and then based on the first layout class inherited by the second layout class, the program code for drawing the control on the canvas of the control is executed to achieve drawing of the control with a shadow effect; and when the shadow drawing switch is in the second state of turning off the shadow effect, the program code for loading the shadow bitmap on the canvas of the control is skipped, and based on the first layout class inherited by the second layout class, the program code for drawing the control on the canvas of the control is executed to achieve drawing of the control without a shadow effect.

[0107] Among them, the shadow drawing switch is in the first state representing turning on the shadow effect after the control to be drawn of the second layout class obtains the focus, and is in the second state representing turning off the shadow effect after the control to be drawn of the second layout class removes the focus. Therefore, when drawing the control that obtains the focus, the shadow effect can be drawn for the control, and when drawing the control that does not obtain the focus, the shadow effect is not drawn for the control.

[0108] The shadow drawing switch can also be in the first state representing turning on the shadow effect when the control to be drawn in the second layout class obtains the focus and the current page is the first type page representing support for the shadow effect; and in the second state representing turning off the shadow effect when the control to be drawn in the second layout class removes the focus or the current page is the second type page representing support for the shadow effect. Thus, when drawing the control that obtains the focus on some specific pages, such as the home page of the display device, the shadow effect can be drawn for the control; when drawing the control that does not obtain the focus on a specific page or drawing the control on other pages, such as the setting page, the shadow effect is not drawn for the control.

[0109] In some embodiments, the second layout class includes a program code for determining whether there is a shadow bitmap corresponding to the control to be drawn in the cache. When there is a corresponding shadow bitmap in the cache, the shadow bitmap in the cache can be loaded onto the canvas of the control, and then the control is drawn on the canvas of the control. If there is no corresponding shadow bitmap in the cache, a drawing process can be executed to draw a shadow bitmap, store the shadow bitmap in the cache for next use, load the drawn shadow bitmap onto the canvas of the control, and then draw the control on the canvas of the control. The above method of searching for shadow bitmaps in the cache can improve the efficiency of adding shadow effects to controls.

[0110] Based on the above embodiment, for the first control, before acquiring the focus, when drawing the control through the second layout class, since the shadow drawing switch is in the second state representing the closing of the shadow effect, the second layout class will skip the step of loading the shadow bitmap, and draw the first control without the shadow effect through the inherited first layout class; after acquiring the focus, when drawing the control through the second layout class, since the shadow drawing switch is in the first state representing the opening of the shadow effect, the second layout class will execute the step of loading the shadow bitmap, wherein the shadow bitmap corresponding to the first control in the cache is called the first shadow bitmap, and when the first shadow bitmap does not exist, the shadow bitmap drawn by the second layout class is called the second shadow bitmap, and after loading the shadow bitmap, the second layout class draws the first control through the inherited first layout class, and finally the first control with a shadow effect can be obtained. It can be seen from the above embodiments that, for the pages that have been launched, the embodiments of the present application design a second layout class to inherit the existing first layout class for drawing controls during the secondary development and design stage of the page. The second layout class first adds a shadow bitmap to the canvas of the control before drawing the control, and then continues to draw the control on the canvas through the inherited first layout class, so that the second layout class has the function of adding shadow effects to the controls on the basis of retaining the function of the first layout class to draw controls. There is no need to modify the layout file for each control that needs to display the shadow effect. In the display stage of the page, the controls are drawn through the second layout class, so that the drawn controls have shadow effects, which greatly reduces the workload and development time of the secondary development and design of the page; and the second layout class of the embodiment of the present application is configured to draw the controls with shadow effects according to the first state of the shadow drawing switch that represents the turning on of the shadow effect, thereby realizing the switch control of the shadow effect; the second layout class of the embodiment of the present application is also configured to preferentially obtain the shadow bitmap from the cache, and if the shadow bitmap cannot be obtained, then create the shadow bitmap, which can ensure the speed of displaying the shadow effect of the control and the smoothness of the page display.

[0112] In order to further process the control display method provided in the embodiment of the present application, the second layout class is described below.

[0113] In some embodiments, the second layout class includes a dispatchDraw function. The three functions of ShadowRelativeLayout function, ShadowLinearLayout function and ShadowFrameLayout function may include the same dispatchDraw function. The method of drawing the first control by the dispatchDraw function is shown in Figure 7 , including the following steps:

[0114] Step S201: determining a target size of a shadow bitmap according to the size of the first control.

[0115] In some embodiments, the target size of the shadow bitmap is larger than the size of the first control so that a shadow is displayed outside the first control. After the first control is determined, the target size of the shadow bitmap can be calculated according to the size of the first control, wherein the target size of the shadow bitmap can be the size of the first control plus the size of the shadow width, and the shadow width can be set to a fixed size or to have a certain proportional relationship with the size of the first control.

[0116] Step S202: Determine whether there is a first shadow bitmap of the target size in the cache.

[0117] In some embodiments, in order to improve the drawing efficiency of controls that have obtained focus, the shadow bitmap corresponding to the controls that have historically obtained focus can be stored in the cache of the display device. After determining the target size of the shadow bitmap corresponding to the first control, the shadow bitmap of the target size can be searched from the cache. At this time, the shadow bitmap of the target size stored in the cache is called the first shadow bitmap.

[0118] Step S203: If it exists, add the first shadow bitmap to the canvas of the first control.

[0119] In some embodiments, the first shadow bitmap may be added to the canvas of the first control so that the first shadow bitmap is located at the bottom layer of the canvas. When the first control is subsequently drawn on the canvas, the drawn first control will be located on the upper layer of the first shadow bitmap.

[0120] Step S204: drawing the display content of the first control on the canvas.

[0121] In some embodiments, on the canvas of the first control, after adding the shadow bitmap, the dispatchDraw method can be called to draw the display content of the first control. The dispatchDraw method comes from the first layout class and is the control drawing method of the first layout class. Since the second layout class inherits the first layout class, the dispatchDraw method can be directly called in the second layout class.

[0122] In some embodiments, the dispatchDraw method is configured to stretch the canvas corresponding to the control that has obtained the focus to a larger size, so that the size of the control increases. After the canvas of the first control is increased by calling the dispatchDraw method, the first control and the shadow bitmap at the bottom of the first control can be increased in proportion, so that the first control has both a prominent size increase effect and a shadow effect.

[0123] In some embodiments, the dispatchDraw method is configured to change the background color of the control that obtains the focus. By calling the dispatchDraw method to change the background color of the first control, the first control can have both the effect of background color change and shadow effect.

[0124] In some embodiments, the dispatchDraw method is configured to sequentially perform processes such as drawing a poster, drawing text, and drawing a superscript in the display area of ​​the first control to achieve drawing of the display content of the first control.

[0125] Step S205: If it does not exist, generate a blank bitmap.

[0126] In some embodiments, if the first shadow bitmap of the target size does not exist in the cache, a blank bitmap may be generated, and the blank bitmap is used to draw a rectangular box with a shadow.

[0127] Exemplarily, the Bitmap.creatBitmap method may be called to create a blank bitmap, the size of the blank bitmap being the size of the shadow bitmap corresponding to the size of the first control.

[0128] Step S206: Draw a rectangular frame on the blank bitmap using a shadow brush to obtain a second shadow bitmap.

[0129] In some embodiments, see Figure 8 , the shadow brush 510 is used to draw lines with shadows.

[0130] Exemplarily, the shadowPaint function may be called to generate the shadow brush, and the shadow parameters of the shadow brush may be set by the setShadowLayer method. The implementation code includes:

[0131] shadowPaint.setShadowLayer(shadowBurl,dx,dy,shadowColor).

[0132] Among them, shadowBur is the fuzzy boundary of the shadow, that is, the width of the shadow, dx is the offset parameter of the shadow in the x direction, dy is the offset parameter of the shadow in the y direction, and shadowColor is the color of the shadow.

[0133] In some embodiments, see Figure 8 The shadow brush trajectory generated by calling the shadowPaint function is a brush trajectory 510, and the brush trajectory 510 has a shadow effect. A transparent rectangular frame 511 with a shadow effect can be drawn on the bitmap canvas by the shadow brush to obtain a shadow bitmap. The size of the transparent rectangular frame is the same as the size of the first control.

[0134] For example, calling the above shadow brush through the canvas.drawRoundRect method can draw a rectangular frame with rounded corners. The implementation code includes:

[0135] canvas.drawRoundRect(shadowRect,radius,radius,shadowPaint).

[0136] Among them, shadowRect indicates that the drawn object is a rectangular box with a shadow, the two radii are the fillet radii of the rectangular box in the x direction and the y direction respectively, and shadowPaint indicates that the brush used to draw the rectangular box is the above shadow brush.

[0137] Exemplarily, the shadow brush can be called through the canvas.drawRect method to draw a rectangle without rounded corners. The implementation code includes: canvas.drawRect(shadowRect,shadowPaint), wherein shadowRect indicates that the drawn object is a rectangle with a shadow, and shadowPaint indicates that the brush used to draw the rectangle is the shadow brush.

[0138] In some embodiments, when the first control is a control with rounded corners, a transparent rectangular box with shadows and rounded corners is drawn through the canvas.drawRoundRect method. When the first control is a control without rounded corners, a transparent rectangular box with shadows and without rounded corners is drawn through the canvas.drawRect method to enhance the matching effect between the shadow bitmap and the first control. Whether the first control has rounded corners can be obtained from the first layout class of the first control. The second layout class can be set to determine whether the first layout class draws the first control with rounded corners or the first control without rounded corners before the first control obtains the focus. If it is the first control with rounded corners, the second layout class also draws a transparent rectangular box with rounded corners, and the rounded corner parameters, such as the radius of the rounded corners, are obtained from the first layout class. If it is the first control without rounded corners, the second layout class also draws a transparent rectangular box without rounded corners.

[0139] It should be noted that, in order to distinguish the shadow bitmap of the target size drawn in real time by the second layout class from the shadow bitmap of the target size already in the cache, the shadow bitmap of the target size drawn in real time is called the second shadow bitmap. Step S207: Save the second shadow bitmap to the cache.

[0140] In some embodiments, after the second shadow bitmap is generated, the second shadow bitmap can be saved to a cache so that the second shadow bitmap can be called from the cache the next time the control is switched to a control of the same size as the first control.

[0141] Step S206: Add the second shadow bitmap to the canvas of the first control.

[0142] In some embodiments, the second shadow bitmap may be first added to the canvas of the first control so that the shadow bitmap is located at the bottom layer of the canvas.

[0143] Step S207: drawing the display content of the first control on the canvas.

[0144] In some embodiments, on the canvas of the first control, after adding the second shadow bitmap, the dispatchDraw method can be called to draw the display content of the first control. The dispatchDraw method comes from the first layout class and is the control drawing method of the first layout class. Since the second layout class inherits the first layout class, the dispatchDraw method can be directly called in the second layout class.

[0145] By using the above method, the first control drawn can be seen Fig. 9 ,like Fig. 9 As shown, on the canvas 500 of the first control, the bottom layer is a transparent rectangular frame 511, and the upper layer of the transparent rectangular frame 511 is a first control 520, and the outside of the first control 520 has a shadow.

[0146] The following uses the first control as a header bar control, a navigation bar control, and a recommendation position control as examples to introduce the display effect after applying the control display method provided in the embodiment of the present application.

[0147] See also Fig.10 The header bar 600 includes multiple header bar controls 601. The header bar control 601 that has not obtained the focus is controlled by the first layout class and has a light gray background. The header bar control 601 that has obtained the focus is controlled by the second layout class and has a dark gray background. The size is increased and has both the display effect of the increased size and the shadow effect.

[0148] See also Fig.11 The navigation bar 700 includes multiple navigation bar controls 701. The navigation bar control 701 that has not obtained the focus is controlled by the first layout class and has a transparent background. The navigation bar control 701 that has obtained the focus is controlled by the second layout class and has a dark gray background. The size is increased and has a display effect of changing the background color and a shadow effect.

[0149] See also Fig.12 The recommendation area 800 includes multiple recommendation position controls 801. The recommendation position control 801 that has not obtained focus is controlled by the first layout class. The recommendation position control 801 displays a media poster without a background. The recommendation position control 801 that has obtained focus is controlled by the second layout class, displays a media poster with an increased size, and has a display effect of increased size and a shadow effect.

[0150] In some embodiments, after the second layout class draws the first control so that the current page refreshes the first control without shadow effect to the first control with shadow effect, if the user moves the focus to move the focus away from the first control, the processing flow of the display device includes: receiving a second instruction to remove the focus from the first control, wherein the second instruction can be an instruction to move the focus from the first control to another control on the current page, such as the second control; in response to the second instruction, drawing the first control after the focus is removed through the second layout class, wherein the second layout class draws the first control on the first control canvas through the first layout class inherited by the second layout class according to the shadow drawing switch as the second state representing the closing of the shadow effect, so that the bottom layer of the first control does not include the first shadow bitmap or the second shadow bitmap; drawing the first control after the focus is obtained through the second layout class, and the drawing method is the same as the method used to draw the first control after the focus is obtained. Through the above steps, the shadow effect of the first control is cancelled and the shadow effect is added to the second control. It can be seen from the above embodiments that for pages where controls do not have shadow effects, by updating the layout class for drawing the controls from the first layout class to the second layout class with the function of loading shadow bitmaps, and configuring the second layout class to inherit the first layout class, it is possible to add a shadow effect to the controls without modifying the layout file of the controls, thereby greatly shortening the development time and workload of new versions of the pages that have been launched, and facilitating the rapid popularization of the function of adding shadow effects in a large number of pages.

[0151] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present application, rather than to limit it. Although the present application has been described in detail with reference to the aforementioned embodiments, those skilled in the art should understand that they can still modify the technical solutions described in the aforementioned embodiments, or replace some or all of the technical features therein with equivalents. However, these modifications or replacements do not cause the essence of the corresponding technical solutions to deviate from the scope of the technical solutions of the embodiments of the present application.

[0152] For the convenience of explanation, the above description has been made in conjunction with specific embodiments. However, the above exemplary discussion is not intended to be exhaustive or limit the embodiments to the specific forms disclosed above. Based on the above teachings, various modifications and variations can be obtained. The selection and description of the above embodiments are to better explain the principles and practical applications, so that those skilled in the art can better use the embodiments and various different variations of the embodiments suitable for specific use considerations.

Claims

1. A display device, characterized in that: include: monitor; A controller is connected to the display, and the controller is configured to: Receive a first instruction to move the focus to a first control; In response to the first instruction, the focus is updated to the first control, and the first control after obtaining the focus is drawn by the second layout class. The method for the second layout class to draw the first control after obtaining the focus includes: according to the shadow drawing switch being in a first state representing turning on the shadow effect, a first shadow bitmap corresponding to the first control is obtained from a cache; if the first shadow bitmap exists in the cache, the first shadow bitmap is loaded into a first control canvas corresponding to the first control; if the first shadow bitmap does not exist in the cache, the second shadow bitmap corresponding to the first control is drawn on the first control canvas; the first control is drawn on the first control canvas by the first layout class inherited by the second layout class, so that the first control is located in an upper layer of the first shadow bitmap or the second shadow bitmap, wherein the size of the first shadow bitmap and the second shadow bitmap is larger than the size of the first control.

2. The display device according to claim 1, characterized in that The controller is also configured to: Receive a second instruction to remove the focus from the first control; In response to the second instruction, the first control after the focus is removed is drawn through the second layout class, wherein the method for the second layout class to draw the first control after the focus is removed includes: according to the shadow drawing switch being in a second state representing turning off the shadow effect, the first control is drawn on the first control canvas through the first layout class inherited by the second layout class, so that the bottom layer of the first control does not include the first shadow bitmap or the second shadow bitmap.

3. The display device according to claim 1 or 2, characterized in that: The shadow drawing switch is in a first state indicating that the shadow effect is turned on after the control to be drawn of the second layout type acquires the focus, and is in a second state indicating that the shadow effect is turned off after the control to be drawn of the second layout type removes the focus.

4. The display device according to claim 1 or 2, characterized in that: When the control to be drawn of the second layout class obtains focus and the current page is a first type page that supports shadow effects, the shadow drawing switch is in a first state that indicates turning on the shadow effect; when the control to be drawn of the second layout class removes focus, or the current page is a second type page that does not support shadow effects, the shadow drawing switch is in a second state that indicates turning off the shadow effect.

5. The display device according to claim 1, characterized in that The controller is further configured to: store the second shadow bitmap in the cache through the second layout class, wherein a size of the second shadow bitmap is the same as a size of the first shadow bitmap.

6. The display device according to claim 1, characterized in that The acquiring the first shadow bitmap corresponding to the first control from the cache includes: Calculating a target size corresponding to the first control according to the size of the first control and a preset size mapping rule; A first shadow bitmap having a size equal to the target size is obtained from the cache.

7. The display device according to claim 1, characterized in that Drawing a second shadow bitmap corresponding to the first control on the first control canvas includes: Generate a blank bitmap of a size corresponding to the first control; Generate a shadow brush, wherein the shadow brush is used to draw a rectangular frame with a shadow; Draw a rectangular frame on the blank bitmap by using the shadow brush to obtain a second shadow bitmap, wherein the size of the rectangular frame is the same as the size of the first control; The second shadow bitmap is loaded into the first control canvas.

8. The display device according to claim 7, characterized in that Drawing a rectangular frame on the blank bitmap by using the shadow brush includes: When the first control is a control with rounded corners, drawing a transparent rectangular frame with rounded corners and a shadow; When the first control is a control without rounded corners, a transparent rectangular frame with a shadow and without rounded corners is drawn.

9. A control display method, characterized in that: include: Receive a first instruction to move the focus to a first control; In response to the first instruction, the focus is updated to the first control, and the first control after obtaining the focus is drawn by the second layout class. The method for the second layout class to draw the first control after obtaining the focus includes: according to the shadow drawing switch being in a first state representing turning on the shadow effect, a first shadow bitmap corresponding to the first control is obtained from a cache; if the first shadow bitmap exists in the cache, the first shadow bitmap is loaded into a first control canvas corresponding to the first control; if the first shadow bitmap does not exist in the cache, the second shadow bitmap corresponding to the first control is drawn on the first control canvas; the first control is drawn on the first control canvas by the first layout class inherited by the second layout class, so that the first control is located in an upper layer of the first shadow bitmap or the second shadow bitmap, wherein the size of the first shadow bitmap and the second shadow bitmap is larger than the size of the first control.

10. The control display method according to claim 9, characterized in that: Also includes: Receive a second instruction to remove the focus from the first control; In response to the second instruction, the first control after the focus is removed is drawn through the second layout class, wherein the method for the second layout class to draw the first control after the focus is removed includes: according to the shadow drawing switch being in a second state representing turning off the shadow effect, the first control is drawn on the first control canvas through the first layout class inherited by the second layout class, so that the bottom layer of the first control does not include the first shadow bitmap or the second shadow bitmap.

Images