Display device and background image display method

Abstract

The embodiment of the invention provides display equipment and a background image display method, and relates to the field of display equipment. And adjusting the margin size of the target container based on the opposite number of the shadow size of the background image with the shadow, so that the background image with the shadow is displayed in the target container after the margin size is adjusted, and the target container is arranged at the lower layer of the target view display area. Thus, the shadow part in the background image is expanded to the margin of the target container after the margin size is adjusted, the non-shadow part in the background image is displayed in the target view display area, the shadow part in the background image does not occupy the layout space, and the situation that the overall size of the view is increased by one circle due to the fact that the background image is displayed in the target view display area is avoided. And the shadow part in the background image does not occupy the layout space of the adjacent views, so that the excessive drawing of the adjacent views is avoided, and the display performance of the display equipment is improved.

Description

Technical Field

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

[0002] A display device is an electronic device capable of presenting a user interface. Generally, at least two views can be displayed simultaneously in a user interface displayed by a display device, and a background image can be set for each view in order to increase the display effect.

[0003] However, when the background image is accompanied by a shadow, in order to ensure the display effect of the view, the shadow part of the background image is usually displayed outside the view size. In other words, the shadow part of the background image occupies layout space outside the layout space of the view. If the size of the shadow part exceeds the distance between adjacent views, the shadow part will affect the display effect of the adjacent views, causing transitional drawing of the views and affecting the display performance of the display device. Summary of the invention

[0004] The present application provides a display device and a background image display method, which can prevent the shadow part of the background image from causing transitional drawing to the view when the background image is accompanied by a shadow, thereby improving the display performance of the display device.

[0005] In a first aspect, a display device is provided, comprising:

[0006] A display configured to display a user interface, wherein the user interface includes a target view display area, a target container is arranged at a lower layer of the target view display area, and a layout size of the target container is the same as a layout size of the target view display area;

[0007] A controller, which communicates with the display, is configured to:

[0008] Adjusting the margin size of the target container based on the inverse of the shadow size of the first background image, where the first background image is an image with a shadow;

[0009] Displays the first background image in the target container after adjusting the margin size.

[0010] In an embodiment of the present application, the margin size of the target container is adjusted based on the opposite number of the shadow size of the first background image, so that the shadow portion of the background image is expanded to the margin of the target container. When the background image is normally displayed in the target view display area, the shadow portion does not occupy the layout space, thereby avoiding the overall size of the view being increased by one circle due to the display of the background image in the target view. The shadow portion in the background image does not occupy the layout space of the adjacent views, thereby avoiding the transitional drawing of the adjacent views and improving the display performance of the display device.

[0011] Optionally, the user interface further includes other containers except the target container, and when the outer border of the target container overlaps with the outer border of the other containers, adjusting the margin size of the target container based on the inverse of the shadow size of the first background image includes:

[0012] The margin size of the target container is adjusted based on the inverse number of the shadow size of the first background image and the outer border size of the target container.

[0013] In an embodiment of the present application, the outer border size of the target container is also used to determine the margin size of the target container, so that when the outer border of the target container overlaps with the outer borders of other containers, transitional drawing of adjacent views due to drawing of the outer border of the target view display area is avoided.

[0014] Optionally, the shadow size of the first background image includes an upper shadow width, a lower shadow width, a left shadow width, and a right shadow width, and adjusting the margin size of the target container based on the inverse of the shadow size of the first background image includes:

[0015] Adjust the top margin width of the target container to the opposite of the top shadow width;

[0016] Adjust the bottom margin width of the target container to the opposite of the bottom shadow width;

[0017] Adjust the left margin width of the target container to the opposite of the left shadow width;

[0018] Adjusts the target container's right margin width to the inverse of the right shadow width.

[0019] In an embodiment of the present application, the shadow width is aligned with the margin width of the target container in different directions, such as up, down, left, and right, so that the determined margin size of the target container is more accurate. When the shadow widths in different directions are different, the situation where the margin width cannot cover the shadow width is avoided, thereby avoiding excessive drawing of the view.

[0020] Optionally, the shadow size of the first background image includes: upper shadow width, lower shadow width, left shadow width, and right shadow width, and the outer border size of the target container includes: upper border width, lower border width, left border width, and right border width. The shadow size of the first background image and the outer border size of the target container are calculated to determine the margin size of the target container, including:

[0021] The inverse number of the upper shadow width and the inverse number of the upper border width are summed to determine the first size, and the upper margin width of the target container is adjusted to the first size;

[0022] The inverse number of the bottom shadow width and the inverse number of the bottom border width are summed to determine the second size, and the bottom margin width of the target container is adjusted to the second size;

[0023] The inverse of the left shadow width and the inverse of the left border width are summed to determine the third size, and the left margin width of the target container is adjusted to the third size;

[0024] The fourth size is determined by summing the inverse of the right shadow width and the inverse of the right border width, and the right margin width of the target container is adjusted to the fourth size.

[0025] In an embodiment of the present application, in different directions of up, down, left, and right, the opposite of the sum of the shadow width and the border width are aligned with the margin width of the target container, so that the determined margin size of the target container is more accurate. When the sum of the shadow width and the upper border width in different directions is different, the situation where the margin width cannot cover the sum of the shadow width and the border width is avoided, thereby avoiding excessive drawing of the view.

[0026] Optionally, adjusting the margin size of the target container based on the opposite number of the shadow size of the first background image includes: when the target view display area obtains focus, adjusting the margin size of the target container based on the opposite number of the shadow size of the first background image.

[0027] In an embodiment of the present application, taking into account the different thicknesses of the outer border of the view display area when it is in focus and out of focus, when the target view display area is focused, the embodiment of the present application displays a background image with a shadow in the target view display area, so that the view display area that has gained focus obtains a better display effect and improves the user experience.

[0028] Optionally, the controller is configured to:

[0029] When the target view display area does not have focus, get the outer border size of the target container;

[0030] Adjust the target container's margin size to the opposite of the target container's border size;

[0031] The second background image is displayed in the target container, where the second background image is an image without a shadow.

[0032] In an embodiment of the present application, when the target view display area does not obtain focus, the margin size of the target container is adjusted to the opposite number of the outer border size of the target container, so that the target container is expanded outward by the distance of the outer border size of the target container. In this way, when a picture without a shadow is displayed in the target container, the size of the target container is made larger, and the outer border is not displayed in the second background image presented in the target view display area, but only the second background image is displayed, so that the visual effect presented by the display is better.

[0033] Optional, the target container is an imageview.

[0034] In an embodiment of the present application, imageview is a container for displaying a background image, and different visual effects can be achieved when the target view display area has focus or not, so that the visual effect presented by the display is better.

[0035] Optionally, the target container is filled using fitxy.

[0036] In the embodiment of the present application, in the target container, the background image is filled in a fitxy manner, and the image can be stretched horizontally and vertically to fill the target container, ensuring that the image completely covers the target container without leaving any blank space.

[0037] In a second aspect, a background image display method is provided, comprising:

[0038] The margin size of the target container is adjusted based on the opposite number of the shadow size of the first background image, the first background image is a picture with a shadow; the target container is the lower layer of the target view display area, and the layout size of the target container is the same as the layout size of the target view display area;

[0039] Displays the first background image in the target container after adjusting the margin size.

[0040] According to a third aspect, a computer-readable storage medium is provided, wherein the computer-readable storage medium stores computer-executable instructions, and the computer-executable instructions are used to enable the computer to execute any one of the above methods.

[0041] According to a fourth aspect, a computer program product is provided, comprising a computer program, wherein when the computer program is executed, any one of the above methods is executed. BRIEF DESCRIPTION OF THE DRAWINGS

[0042] Figure 1 A schematic diagram of an operation scenario between a display device and a control device provided in an embodiment of the present application;

[0043] Figure 2 A configuration block diagram of a control device provided in an embodiment of the present application;

[0044] Figure 3 A schematic diagram of the hardware configuration of a display device provided in an embodiment of the present application;

[0045] Figure 4 A schematic diagram of software configuration in a display device provided in an embodiment of the present application;

[0046] Figure 5 A schematic diagram of a display interface of a display device provided in an embodiment of the present application;

[0047] Figure 6 A schematic diagram of the structure of a display device provided in an embodiment of the present application;

[0048] Figure 7 A schematic diagram of a background image provided in an embodiment of the present application being displayed in a target container;

[0049] Figure 8 A schematic diagram of the positions of the target view display area, the target container and the shadow of the background image when the target view acquires focus provided in an embodiment of the present application;

[0050] Fig. 9 A schematic diagram of the positions of the target view display area and the target container provided in an embodiment of the present application when the target view does not obtain focus;

[0051] Fig.10 A schematic diagram of a display interface of another display device provided in an embodiment of the present application;

[0052] Fig.11 A schematic diagram of the process of the background image display method provided in an embodiment of the present application. DETAILED DESCRIPTION

[0053] The technical solutions in the embodiments of the present application will be described below in conjunction with the drawings in the embodiments of the present application. In the description of the embodiments of the present application, unless otherwise specified, " / " means or, for example, A / B can mean A or B; "and / or" in this article is only a description of the association relationship of associated objects, indicating that there can be three relationships, for example, A and / or B can mean: A exists alone, A and B exist at the same time, and B exists alone. In addition, in the description of the embodiments of the present application, "multiple" means two or more than two.

[0054] In the following, the terms "first", "second", and "third" are used for descriptive purposes only and are not to be understood as indicating or implying relative importance or implicitly indicating the number of the indicated technical features. Thus, a feature defined as "first", "second", and "third" may explicitly or implicitly include one or more of the features.

[0055] For the purpose of illustration rather than limitation, specific details such as specific system structures, technologies, etc. are provided to provide a thorough understanding of the embodiments of the present application. However, it should be clear to those skilled in the art that the present application may also be implemented in other embodiments without these specific details. In other cases, detailed descriptions of well-known systems, devices, circuits, and methods are omitted to prevent unnecessary details from obstructing the description of the present application.

[0056] The display device applicable to the embodiments of the present application is described below.

[0057] 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.

[0058] Figure 1 Schematic diagram of an operation scenario between a display device and a control device provided in some embodiments of the present application. Figure 1 As shown, the user can operate the display device 200 through the smart device 300 or the control apparatus 100 .

[0059] 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.

[0060] 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.

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

[0062] 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.

[0063] 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.

[0064] Figure 2 Schematically shows a block diagram of a configuration of the control device 100 according to an exemplary embodiment. Figure 2As 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.

[0065] 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.

[0066] 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.

[0067] 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.

[0068] 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.

[0069] 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 control device 100 or the server 400 through the communicator 220.

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

[0071] 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.

[0072] The external device interface 240 may include, but is not limited to, any one or more of the following interfaces: 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.

[0073] 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.

[0074] 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.

[0075] The controller 250 controls the operation of the display device 200 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.

[0076] In some embodiments, the controller 250 includes at least one of a central processing unit (CPU), a video processor, an audio processor, a graphics processing unit (GPU), a random access memory (RAM), a read-only memory (ROM), a first interface to an nth interface for input / output, a communication bus, etc.

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

[0078] "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 GUI, which refers to the user interface related to computer operation displayed in a graphical way. It can be an icon, window, control or other interface element 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 and other visual interface elements.

[0079] like 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.

[0080] 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.

[0081] 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.

[0082] 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.

[0083] 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.).

[0084] 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.

[0085] 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.

[0086] The following is a description of the related technologies of the embodiments of the present application.

[0087] At least two views can be displayed simultaneously in the user interface displayed by the display device. Figure 5 A display interface diagram of a display device provided in an embodiment of the present application, such as Figure 5As shown in , three views are displayed simultaneously in the display interface. The three views are adjacent from left to right, and a shaded background image (for example, a point 9 image) is displayed in all three views. When the non-shaded portion of the shaded background image adapts to the size of the view, the shaded portion of the background image will occupy a layout space outside the layout size of the view. For two adjacent views, overlapping borders are often used between the views to ensure the display effect. Since the shaded portion of the background image will occupy a layout space outside the layout size of the view, the layout space of the shaded portion of the background image overlaps with the layout space of the adjacent views. When drawing the adjacent views, the shaded portion of the background image that overlaps with the layout space of the adjacent views will also be drawn, resulting in transitional drawing of the adjacent views, affecting the display performance of the display device.

[0088] In view of this, an embodiment of the present application provides a display device, which adjusts the margin size of the target container based on the opposite number of the shadow size of the shadowed background image, so that the shadowed background image is displayed in the target container after the margin size is adjusted, and the target container is set in the lower layer of the target view display area. In this way, the shadowed part of the background image is expanded to the margin of the target container, and the non-shaded part of the background image is displayed in the target view. The shadowed part of the background image will not occupy the layout space, avoiding the overall size of the view being increased by one circle due to the display of the background image in the target view display area, and the shadowed part of the background image will not occupy the layout space of the adjacent view, thereby avoiding the transitional drawing of the adjacent view.

[0089] In order to facilitate further understanding of the technical solutions in some embodiments of the present application, the technical solutions of the display device and the background image display method, as well as how the technical solutions solve the above-mentioned technical problems are described in detail below in combination with some specific embodiments and drawings. The various embodiments can be combined with each other, and the same or similar concepts or processes may not be repeated in some embodiments. Obviously, the described embodiments are part of the embodiments of the present application, not all of them.

[0090] See also Figure 6 , Figure 6 The structure diagram of the display device 60 in some embodiments of the present application is shown, including:

[0091] The display 61 is configured to display a user interface, wherein the user interface includes a target view display area, a target container is arranged below the target view display area, and the layout size of the target container is the same as the layout size of the target view display area.

[0092] The controller 62, which is in communication with the display, is configured to:

[0093] The margin size of the target container is adjusted based on the inverse number of the shadow size of the first background image, where the first background image is a picture with a shadow; and the first background image is displayed in the target container after the margin size is adjusted.

[0094] Exemplarily, in addition to the target view display area, the user interface may also include other view display areas. The target view display area and the other view display areas may be adjacent, for example, adjacent up and down, adjacent left and right. When the target view display area and the other view display areas are adjacent, the outer frames of the target view display area and the other view display areas may overlap, or the distance between the target view display area and the other view display areas may be less than a preset threshold, or the positions of the target view display area and the other view display areas have an adjacent association relationship, etc. Alternatively, the target view display area and the other view display areas may not be adjacent, for example, the distance between the target view display area and the other view display areas is greater than or equal to a preset threshold, or the positions of the target view display area and the other view display areas do not have an adjacent association relationship, etc.

[0095] Exemplarily, the target container is set in the lower layer of the target view display area, and may be set in the bottom layer of the target view display area, or may be any layer in the lower layer of the target view display area, for example: set in the lower layer of the target view display area and a layer or N layers adjacent to the target view display area.

[0096] Exemplarily, the layout size of the target container being the same as the layout size of the target view display area includes: the length of the target container being the same as the length of the target view display area, and the width of the target container being the same as the width of the target view display area, so that the image displayed in the target container can be displayed in the target view display area.

[0097] The first background image is a preset image, the image format of which may be a dot-9 image, and the layout size may be stored in a layout file.

[0098] In one example, the margin size of the target container refers to the distance between the inner border of the target container and the outer border of the background image.

[0099] The display device provided in the embodiment of the present application expands the shaded portion of the background image to the margin of the target container, and the non-shaded portion of the background image is displayed in the target view display area. The shaded portion of the background image does not occupy the layout space, thereby avoiding the overall view size being increased by one circle due to the display of the background image in the target view display area. The shaded portion of the background image does not occupy the layout space of the adjacent view display area, thereby avoiding the transitional drawing of the adjacent views.

[0100] Optionally, the shadow size of the first background image includes an upper shadow width, a lower shadow width, a left shadow width, and a right shadow width, and adjusting the margin size of the target container based on the shadow size of the first background image includes:

[0101] Adjust the top margin width of the target container to the opposite of the top shadow width;

[0102] Adjust the bottom margin width of the target container to the opposite of the bottom shadow width;

[0103] Adjust the left margin width of the target container by the opposite of the left shadow width;

[0104] Adjust the target container's right margin width by the opposite of the right shadow width.

[0105] Exemplarily, assuming that the shadow widths of the background image in the four directions of up, down, left, and right are width_top, width_bottom, width_left, and width_right respectively, the margin widths of the target container in the four directions of up, down, left, and right are -width_top, -width_bottom, -width_left, and -width_right respectively.

[0106] In a possible implementation, the user interface further includes other containers except the target container, and when the outer border of the target container overlaps with the outer borders of the other containers, adjusting the margin size of the target container based on the inverse of the shadow size of the first background image includes:

[0107] Based on the inverse number of the shadow size of the first background image and the inverse number of the outer border size of the target container, the margin size of the target container is adjusted.

[0108] Exemplarily, the shadow size of the first background image includes: upper shadow width, lower shadow width, left shadow width, and right shadow width, the outer border size of the target container includes: upper border width, lower border width, left border width, and right border width, and based on the opposite number of the shadow size of the first background image and the opposite number of the outer border size of the target container, adjusting the margin size of the target container includes:

[0109] The inverse number of the upper shadow width and the inverse number of the upper border width are summed to determine the first size, and the upper margin width of the target container is adjusted to the first size;

[0110] The inverse number of the bottom shadow width and the inverse number of the bottom border width are summed to determine the second size, and the bottom margin width of the target container is adjusted to the second size;

[0111] The inverse of the left shadow width and the inverse of the left border width are summed to determine the third size, and the left margin width of the target container is adjusted to the third size;

[0112] The fourth size is determined by summing the inverse of the right shadow width and the inverse of the right border width, and the right margin width of the target container is adjusted to the fourth size.

[0113] like Figure 7 As shown, Figure 7 FIG. 4 shows a schematic diagram of a background image displayed in a target container. Figure 7 As shown in the figure, the white circle is the outer frame of the target container, the line next to the inner side of the outer frame is the inner frame, the part inside the inner frame is the display area of ​​the view, and the area from the outer frame to the outermost side is the shaded part of the background image. In the embodiment of the present application, when the background image is a dot 9 image, the stretchable area of ​​the dot 9 image completely fills the display area of ​​the view.

[0114] It is understandable that for different view windows, after stretching the point 9 diagram, point 9 Figure 4 The widths of the shadows corresponding to the weeks are not exactly the same, that is, the widths of the shadows above, below, left and right in point 9 can be the same or different.

[0115] Exemplarily, assuming that the shadow widths of the background image in the four directions of up, down, left and right are width_top, width_bottom, width_left, and width_right, respectively, and the outer border widths of the target container in the four directions of up, down, left and right are respectively: width_e_top, width_e_bottom, width_e_left, and width_e_right. First, the opposite numbers of the shadow widths and the opposite numbers of the border widths of the target container in the four directions of up, down, left and right are summed to obtain the first sizes corresponding to the four directions of up, down, left and right. The second size, the third size, and the fourth size are respectively -(width_top+width_e_top), -(width_bottom+width_e_bottom), -(width_left+width_e_left), and -(width_right+rightmargin). The margin widths topmargin, bottommargin, leftmargin, and rightmargin of the target container in the four directions of up, down, left and right are adjusted to: -(width_top+width_e_top), -(width_bottom+width_e_bottom), -(width_left+width_e_left), and -(width_right+rightmargin).

[0116] Exemplarily, assuming that the shadow widths of the background image in the four directions of up, down, left and right are width_top, width_bottom, width_left and width_right respectively, and the outer border widths of the target container in the four directions of up, down, left and right are width_e_top, width_e_bottom, width_e_left and width_e_right respectively, then the margin widths of the target container in the four directions of up, down, left and right are topmargin, bottommargin, leftmargin and rightmargin respectively -(width_top+width_e_top), -(width_bottom+width_e_bottom), -(width_left+width_e_left) and -(width_right+rightmargin).

[0117] It is understandable that the margin size of the target container can be adjusted based on the inverse of the shadow size of the first background image and the inverse of the outer frame size of the target container. There may also be other calculation forms and sequences, which are not limited in the embodiments of the present application.

[0118] Optionally, adjusting the margin size of the target container based on the opposite number of the shadow size of the first background image includes: when the target view display area obtains focus, adjusting the margin size of the target container based on the opposite number of the shadow size of the first background image.

[0119] In one implementation, the focus state of the target view display area may be monitored to determine whether the target view display area obtains the focus.

[0120] For example, you can set a focus change listener (set On Focused Change Listener) to monitor the target view display area. When the focus state of the target view display area changes (including: from gaining focus to losing focus, from losing focus to gaining focus), the focus change listener will be triggered and inform the target view whether it has gained focus or lost focus.

[0121] like Figure 8 As shown, Figure 8 A schematic diagram of the positions of the target view display area, the target container, and the background image shadow when the target view acquires focus. The target view display area is the same size as the target container, and the background image shadow (i.e. Figure 8 medium-gray) are displayed in the target container's margins.

[0122] In the embodiment of the present application, taking into account that the size of the outer border of the view display area is different when it is in the focus state and when it is not in the focus state, that is, the thickness of the outer border is different, so that the background image displayed by the view when the focus state is obtained cannot be adapted in the view display area when the focus state is not obtained, the embodiment of the present application proposes that when the target view display area does not obtain focus, the background image in the target container can be replaced and the margin size of the target container can be re-determined to make the background image adapt to the situation where the target view display area does not obtain the focus state.

[0123] It can be understood that the view display area not obtaining focus includes the state where the view display area changes from obtaining focus to losing focus, and the state where the view display area never obtains focus.

[0124] In a possible implementation, the controller is configured as follows:

[0125] When the target view display area does not obtain focus, the outer border size of the target container is obtained; the margin size of the target container is adjusted to the opposite number of the outer border size of the target container; and a second background image is displayed in the target container after the margin size is adjusted, where the second background image is a picture without a shadow.

[0126] Exemplarily, when it is detected that the target view display area does not obtain the focus, the outer border size of the target container can be obtained from the layout file of the target container.

[0127] In the two cases where the target view display area does not have focus and has focus, the outer border size can be the same or different. Usually, in order to distinguish whether the target view display area does not have focus and whether it has focus, the outer border size is set to different sizes.

[0128] Displaying the second background image in the target container after adjusting the margin size is achieved through custom XML or UI material replacement.

[0129] Exemplarily, the widths of the outer borders of the target container in the four directions of up, down, left and right are respectively: width_e_top, width_e_bottom, width_e_left, width_e_right, then the margin widths of the target container in the four directions of up, down, left and right, topmargin, bottommargin, leftmargin, rightmargin are adjusted to -(width_top+width_e_top), -(width_bottom+width_e_bottom), -(width_left+width_e_left), -(width_right+rightmargin), respectively.

[0130] like Fig. 9As shown, Fig. 9 The following is a schematic diagram of the positions of the target view display area and the target container when the target view does not have focus. The target view display area and the target container have the same size, and the background image is a picture without a shadow, which is displayed in the target container.

[0131] Optional, the target container is an imageview.

[0132] The target container may also be a control such as TextView, or may be other controls for displaying images.

[0133] Optionally, the target container is filled in a fitxy manner. When fitxy is used, the target container is stretched or compressed to completely fill the border of the ImageView. Of course, the target container can also be filled in other ways, which are not limited in the embodiments of the present application.

[0134] For example, Fig.10 As shown, Fig.10 A display interface schematic diagram of another display device in an embodiment of the present application is provided. Fig.10 In the provided display interface, the middle view is the view that has gained focus, and the left view and right view adjacent to the middle view are both views that have not gained focus. As can be seen from the figure, the shaded part of the background image is displayed in the non-overlapping part of the target container and the target view display area, does not occupy the layout space of the view display area, and the shaded part does not overlap with the layout space of the adjacent views, so that the adjacent views avoid overdrawing and ensure the display performance of the display device.

[0135] Similarly, if Fig.11 As shown, Fig.11 A background image display method provided by an embodiment of the present application includes:

[0136] S1101: Adjust the margin size of the target container based on the inverse number of the shadow size of the first background image.

[0137] The first background image is an image with a shadow; the target container is the lower layer of the target view display area, and the layout size of the target container is the same as the layout size of the target view display area;

[0138] S1102: Display the first background image in the target container after adjusting the margin size.

[0139] Optionally, the user interface further includes other containers except the target container, and when the outer border of the target container overlaps with the outer borders of the other containers, adjusting the margin size of the target container based on the inverse of the shadow size of the first background image includes:

[0140] Based on the inverse number of the shadow size of the first background image and the inverse number of the outer border size of the target container, the margin size of the target container is adjusted.

[0141] Optionally, the shadow size of the first background image includes an upper shadow width, a lower shadow width, a left shadow width, and a right shadow width, and adjusting the margin size of the target container based on the inverse of the shadow size of the first background image includes:

[0142] Adjust the top margin width of the target container to the opposite of the top shadow width;

[0143] Adjust the bottom margin width of the target container to the opposite of the bottom shadow width;

[0144] Adjust the left margin width of the target container to the opposite of the left shadow width;

[0145] Adjusts the target container's right margin width to the inverse of the right shadow width.

[0146] Optionally, the shadow size of the first background image includes: upper shadow width, lower shadow width, left shadow width, and right shadow width, and the outer border size of the target container includes: upper border width, lower border width, left border width, and right border width. Based on the opposite number of the shadow size of the first background image and the opposite number of the outer border size of the target container, adjusting the margin size of the target container includes:

[0147] The inverse of the upper shadow width and the inverse of the upper border width are summed to determine the first size, and the top margin width of the target container is adjusted to the first size;

[0148] The inverse number of the bottom shadow width and the inverse number of the bottom border width are summed to determine the second size, and the bottom margin width of the target container is adjusted to the second size;

[0149] The inverse of the left shadow width and the inverse of the left border width are summed to determine the third size, and the left margin width of the target container is adjusted to the third size;

[0150] The fourth size is determined by summing the inverse of the right shadow width and the inverse of the right border width, and the right margin width of the target container is adjusted to the fourth size.

[0151] Optionally, adjusting the margin size of the target container based on the opposite number of the shadow size of the first background image includes: when the target view display area obtains focus, adjusting the margin size of the target container based on the opposite number of the shadow size of the first background image.

[0152] Optionally, the controller is configured to:

[0153] When the target view display area does not have focus, get the outer border size of the target container;

[0154] Adjust the target container's margin size to the opposite of the target container's border size;

[0155] The second background image is displayed in the target container after the margin size is adjusted. The second background image is an image without a shadow.

[0156] Optional, the target container is an imageview.

[0157] Optionally, the target container is filled using fitxy.

[0158] It should be noted that the division of units (such as displays, controllers) in the embodiments of the present application is schematic and can be understood as a logical functional division. There may be other division methods in actual implementation. In addition, each functional unit in each embodiment of the present application can be integrated into a processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit. The above-mentioned integrated units can be implemented in the form of hardware or in the form of software functional units.

[0159] If the integrated unit is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the present application is essentially or the part that contributes to the prior art or all or part of the technical solution can be embodied in the form of a software product, and the computer software product is stored in a storage medium, including a number of instructions to enable a computer device (which can be a personal computer, a server, or a network device, etc.) or a processor (processor) to perform all or part of the steps of the method described in each embodiment of the present application. The aforementioned storage medium includes: U disk, mobile hard disk, read-only memory (Read-Only Memory, ROM), random access memory (Random Access Memory, RAM), disk or optical disk and other media that can store program codes.

[0160] The embodiment of the present application provides a computing device, which may be a desktop computer, a portable computer, a smart phone, a tablet computer, a personal digital assistant (PDA), etc. The computing device may include a central processing unit (CPU), a memory, an input / output device, etc. The input device may include a keyboard, a mouse, a touch screen, etc. The output device may include a display device, such as a liquid crystal display (LCD), a cathode ray tube (CRT), etc.

[0161] The memory may include a read-only memory (ROM) and a random access memory (RAM), and provides the processor with program instructions and data stored in the memory. In an embodiment of the present application, the memory may be used to store the program of any of the methods provided in the embodiments of the present application.

[0162] The processor calls the program instructions stored in the memory, and the processor is used to execute any of the methods provided in the embodiments of the present application according to the obtained program instructions.

[0163] An embodiment of the present application provides a computer storage medium for storing computer program instructions used for the display device provided in the above-mentioned embodiment of the present application, which includes a program for executing any of the methods provided in the above-mentioned embodiment of the present application.

[0164] The computer storage medium can be any available medium or data storage device that can be accessed by a computer, including but not limited to magnetic storage (such as floppy disks, hard disks, magnetic tapes, magneto-optical disks (MO)), optical storage (such as CDs, DVDs, BDs, HVDs, etc.), and semiconductor storage (such as ROM, EPROM, EEPROM, non-volatile memory (NAND FLASH), solid-state drives (SSDs)), etc.

[0165] The above method processing flow can be implemented by a software program, and the software program can be stored in a storage medium. When the stored software program is called, the above method steps are executed.

[0166] Those skilled in the art will appreciate that the embodiments of the present application may be provided as methods, systems, or computer program products. Therefore, the present application may adopt the form of a complete hardware embodiment, a complete software embodiment, or an embodiment in combination with software and hardware. Moreover, the present application may adopt the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to disk storage and optical storage, etc.) that contain computer-usable program code.

[0167] The present application is described with reference to the flowcharts and / or block diagrams of the methods, devices (systems), and computer program products according to the embodiments of the present application. It should be understood that each process and / or box in the flowchart and / or block diagram, as well as the combination of the processes and / or boxes in the flowchart and / or block diagram, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing device to generate a machine, so that the instructions executed by the processor of the computer or other programmable data processing device generate instructions for implementing the processes in the flowchart and / or block diagram. Figure 1 A process or multiple processes and / or boxes Figure 1 A device that provides the functions specified in a block or multiple blocks.

[0168] These computer program instructions may also be stored in a computer-readable memory capable of directing a computer or other programmable data processing device to operate in a specific manner, so that the instructions stored in the computer-readable memory produce an article of manufacture comprising an instruction device, which implements the process Figure 1 A process or multiple processes and / or boxes Figure 1 A function specified in one or more boxes.

[0169] These computer program instructions can also be loaded onto a computer or other programmable data processing device so that a series of operating steps are executed on the computer or other programmable device to produce a computer-implemented process, thereby providing instructions for implementing the process. Figure 1 A process or multiple processes and / or boxes Figure 1 The steps for the functions specified in one or more boxes.

[0170] Obviously, those skilled in the art can make various changes and modifications to the present application without departing from the spirit and scope of the present application. Thus, if these modifications and variations of the present application fall within the scope of the claims of the present application and their equivalents, the present application is also intended to include these modifications and variations.

Claims

1. A display device, characterized in that: include: A display configured to display a user interface, wherein the user interface includes a target view display area, a target container is arranged at a lower layer of the target view display area, and a layout size of the target container is the same as a layout size of the target view display area; a controller, the controller being in communication with the display, configured to: adjusting the margin size of the target container based on the inverse of the shadow size of the first background image, wherein the first background image is a picture with a shadow; The first background image is displayed in the target container after the margin size is adjusted.

2. The display device according to claim 1, characterized in that The user interface further includes other containers except the target container. When the outer border of the target container overlaps with the outer border of the other containers, adjusting the margin size of the target container based on the inverse number of the shadow size of the first background image includes: Based on the inverse number of the shadow size of the first background image and the inverse number of the outer frame size of the target container, the margin size of the target container is adjusted.

3. The display device according to claim 2, characterized in that The shadow size of the first background image includes: upper shadow width, lower shadow width, left shadow width, and right shadow width; the outer border size of the target container includes: upper border width, lower border width, left border width, and right border width; and adjusting the margin size of the target container based on the opposite number of the shadow size of the first background image and the opposite number of the outer border size of the target container includes: Summing the inverse of the upper shadow width and the inverse of the upper border width to determine a first size, and adjusting the upper margin width of the target container to the first size; Summing the inverse of the lower shadow width and the inverse of the lower border width to determine a second size, and adjusting the bottom margin width of the target container to the second size; Summing the inverse of the left shadow width and the inverse of the left border width to determine a third size, and adjusting the left margin width of the target container to the third size; The inverse number of the right shadow width and the inverse number of the right border width are summed to determine a fourth size, and the right margin width of the target container is adjusted to the fourth size.

4. The display device according to claim 1, characterized in that The shadow size of the first background image includes an upper shadow width, a lower shadow width, a left shadow width, and a right shadow width, and adjusting the margin size of the target container based on the inverse number of the shadow size of the first background image includes: Adjust the top margin width of the target container to the opposite of the top shadow width; Adjust the bottom margin width of the target container to the opposite of the bottom shadow width; Adjust the left margin width of the target container to the opposite of the left shadow width; The right margin width of the target container is adjusted to the negative value of the right shadow width.

5. The display device according to any one of claims 1 to 4, characterized in that: The step of adjusting the margin size of the target container based on the opposite number of the shadow size of the first background image is: when the target view display area obtains focus, adjusting the margin size of the target container based on the opposite number of the shadow size of the first background image.

6. The display device according to claim 5, characterized in that The controller is configured to: When the target view display area does not obtain focus, obtaining the outer frame size of the target container; Adjust the margin size of the target container to the opposite number of the outer border size of the target container; The second background image is displayed in the target container after the margin size is adjusted, and the second background image is a picture without a shadow.

7. The display device according to any one of claims 1 to 4, characterized in that: The target container is imageview.

8. The display device according to any one of claims 1 to 4, characterized in that: The target container is filled in the manner of fitxy.

9. A background image display method, characterized in that: include: The margin size of the target container is adjusted based on the opposite number of the shadow size of the first background image, wherein the first background image is a picture with a shadow; the target container is a lower layer of the target view display area, and the layout size of the target container is the same as the layout size of the target view display area; The first background image is displayed in the target container after the margin size is adjusted.

10. A computer program product, characterized in that The invention comprises a computer program which, when executed, causes the method as claimed in claim 9 to be performed.

Images