Interface element display method and device, medium and program product

Abstract

The invention discloses an interface element display method and device, a medium and a program product. The method comprises the steps of determining a second display element corresponding to a first display element under the condition that a life cycle stage meets a cycle visibility requirement; determining a visible state of the first display element in the first interface according to a shielding relationship between the first display element and the second display element; and displaying the first display element on the first interface based on the visible state of the first display element. Multi-dimensional judgment conditions of the life cycle stage and the shielding relation are introduced, the judgment accuracy of the visible state of the display element is improved, and therefore the actual visible situation of the display element in the interface is accurately determined, and the accuracy of interface display is improved; by judging the life cycle stage, invalid display elements (such as destroyed display elements) can be filtered, the display elements participating in the subsequent process are reduced, and the interface display efficiency is improved.

Description

Technical Field

[0001] The present application relates to the field of computer technology, and in particular to a method, device, medium, and program product for displaying interface elements. Background Art

[0002] The visible state of a display element (such as a control, text box, image, etc.) is used to determine whether the display element is displayed in the user interface, that is, whether the user can see the display element on the screen.

[0003] In related technologies, in user interface development, display elements can be implemented by views. Developers can dynamically configure the visibility of views, where visibility includes: visible, invisible but occupying layout space, and invisible and not occupying layout space. When the user interface is running, it dynamically obtains the visibility of the view based on the current triggering conditions of the view (such as user operations, data changes, etc.) to determine the visibility status of the corresponding display elements. By obtaining the visibility status of the display elements currently existing in the user interface, it can determine how to display the user interface on the screen.

[0004] However, in the related art, the visibility status judgment of the display element only depends on the visibility of the view, and the accuracy of the visibility status of the display element is low, resulting in the inaccurate display of the user interface. Summary of the Invention

[0005] This application provides a method, device, medium, and program product for displaying interface elements. The technical solution is as follows:

[0006] In one aspect, a method for displaying an interface element is provided, the method comprising:

[0007] Determining a current life cycle stage of a first display element in a first interface;

[0008] If the lifecycle stage meets the stage visibility requirement, determining a second display element in the first interface, the first display element corresponds to a first display container, the second display element corresponds to a second display container, and the first display container and the second display container are at the same container level;

[0009] Determining a visible state of the first display element in the first interface according to an occlusion relationship between the first display element and the second display element;

[0010] Based on the visible state of the first display element, the first display element is displayed on the first interface.

[0011] In another aspect, a device for displaying an interface element is provided, the device comprising:

[0012] A determination module, configured to determine a current life cycle stage of a first display element in a first interface;

[0013] The determining module is configured to determine, if the lifecycle stage meets the stage visibility requirement, a second display element in the first interface, the first display element corresponding to a first display container, the second display element corresponding to a second display container, and the first display container and the second display container being at the same container level;

[0014] The determining module is configured to determine a visible state of the first display element in the first interface according to an occlusion relationship between the first display element and the second display element;

[0015] A display module is configured to display the first display element on the first interface based on the visible state of the first display element.

[0016] On the other hand, a computer device is provided, comprising a processor and a memory, wherein a computer program is stored in the memory, and the computer program is loaded and executed by the processor to implement the above-mentioned method for displaying interface elements.

[0017] On the other hand, a computer-readable storage medium is provided, in which a computer program is stored. The computer program is loaded and executed by a processor to implement the above-mentioned method for displaying interface elements.

[0018] On the other hand, a computer program product is provided, which includes a computer program stored in a computer-readable storage medium, and a processor reads and executes the computer program from the computer-readable storage medium to implement the above-mentioned method for displaying interface elements.

[0019] The beneficial effects of the technical solutions provided in the embodiments of the present application include at least:

[0020] By determining whether the life cycle stage of the display elements in the interface meets the stage visibility requirements, the real display elements are screened out, and then the occlusion relationship between the display element and other display elements in the interface (such as those in the same container level as the display element) is analyzed to determine the visible state of the display element. On the one hand, the introduction of multi-dimensional judgment conditions of life cycle stage and occlusion relationship improves the accuracy of judging the visible state of the display element, thereby accurately determining the actual visibility of the display element in the interface and improving the accuracy of the interface display; on the other hand, by judging the life cycle stage, invalid display elements (such as destroyed display elements) can be filtered out, reducing the display elements involved in subsequent processes and improving the efficiency of interface display. BRIEF DESCRIPTION OF THE DRAWINGS

[0021] In order to more clearly illustrate the technical solutions in the embodiments of the present application, the following briefly introduces the drawings required for use in the description of the embodiments. Obviously, the drawings described below are only some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without any creative work.

[0022] Figure 1 is a schematic diagram of a computer system provided by an exemplary embodiment of the present application;

[0023] Figure 2 is a flow chart of a method for displaying interface elements provided by an exemplary embodiment of the present application;

[0024] Figure 3 This is a schematic diagram of the life cycle of an Activity component provided by an exemplary embodiment of the present application;

[0025] Figure 4 This is a schematic diagram of the life cycle of a Fragment component provided by an exemplary embodiment of the present application;

[0026] Figure 5 is a schematic diagram of an occlusion relationship of display elements provided by an exemplary embodiment of the present application;

[0027] Figure 6 is a schematic diagram of a viewing area provided by an exemplary embodiment of the present application;

[0028] Figure 7 is a flowchart of a method for displaying interface elements provided by another exemplary embodiment of the present application;

[0029] Figure 8 is a schematic diagram of a sliding state of a display element provided by an exemplary embodiment of the present application;

[0030] Figure 9 is a schematic diagram of a sliding state of a display element provided by another exemplary embodiment of the present application;

[0031] Figure 10 is a flowchart of a method for displaying interface elements provided by another exemplary embodiment of the present application;

[0032] Figure 11 This is a structural block diagram of a display device for interface elements provided by an exemplary embodiment of the present application;

[0033] Figure 12 It is a structural block diagram of a computer device provided by an exemplary embodiment of the present application. DETAILED DESCRIPTION

[0034] To make the objectives, technical solutions, and advantages of this application more clear, the following will further describe the embodiments of this application in detail with reference to the accompanying drawings. Obviously, the embodiments described are only part of the embodiments of this application, not all of them. Based on the embodiments in this application, all other embodiments obtained by ordinary technicians in this field without making any creative efforts are within the scope of protection of this application.

[0035] It should be noted that before collecting the user's relevant data and during the process of collecting the user's relevant data, this application can display a prompt interface, pop-up window or output voice prompt information. The prompt interface, pop-up window or voice prompt information is used to remind the user that its relevant data is currently being collected, so that this application only starts to execute the relevant steps of obtaining the user's relevant data after obtaining the user's confirmation operation on the prompt interface or pop-up window. Otherwise (that is, when the user's confirmation operation on the prompt interface or pop-up window is not obtained), the relevant steps of obtaining the user's relevant data are terminated, that is, the user's relevant data is not obtained. In other words, all user data collected by this application are collected with the user's consent and authorization, and the collection, use and processing of relevant user data need to comply with relevant laws, regulations and standards.

[0036] The visible state of display elements (such as controls, text boxes, pictures, etc.) is used to determine whether the display elements are displayed in the user interface, that is, whether the user can see the display elements on the screen. In the related art, in the development of the user interface, the display elements can be implemented by views (View), and the developer can dynamically configure the visibility of the view, where visibility includes: visible, invisible but occupying the layout space, invisible and not occupying the layout space. When the user interface is running, it will dynamically obtain the visibility of the view according to the current triggering conditions of the view (such as user operations, data changes, etc.) to determine the visible state of the corresponding display elements; by obtaining the visible state of the display elements currently existing in the user interface, it can be determined how to display the user interface on the screen. However, the judgment of the visible state of the display elements in the related art only depends on the visibility of the view, and the accuracy of the visible state of the display elements is low, resulting in the inaccurate display of the user interface.

[0037] Based on this, the present application provides a method for displaying interface elements. By judging whether the life cycle stage of the display elements in the interface meets the stage visibility requirements, the real display elements are screened out, and then the occlusion relationship between the display element and other display elements in the interface (such as those in the same container level as the display element) is analyzed to determine the visible state of the display element. On the one hand, the introduction of multi-dimensional judgment conditions of life cycle stage and occlusion relationship improves the judgment accuracy of the visible state of the display element, thereby accurately determining the actual visibility of the display element in the interface and improving the accuracy of the interface display; on the other hand, by judging the life cycle stage, invalid display elements (such as destroyed display elements) can be filtered out, reducing the display elements involved in subsequent processes and improving the efficiency of interface display.

[0038] The following introduces a computer system for implementing the method for displaying interface elements provided in this application.

[0039] Figure 1 1 is a schematic diagram of a computer system provided by an exemplary embodiment of the present application. This computer system can be implemented as a system architecture for a method for displaying interface elements. The computer system includes a terminal 110 and a server 120. Terminal 110 is connected to server 120 via a wireless network or a wired network.

[0040] The terminal 110 can be an electronic device such as a mobile phone, a tablet computer, a vehicle-mounted terminal (vehicle computer), a wearable device, a PC (Personal Computer), a virtual reality (VR) device, an augmented reality (AR) device, etc. The terminal 110 can be installed with a client that runs a first application. The first application is an application that provides an interface display function, which is not limited in this application. In addition, this application does not limit the form of the first application, including but not limited to App (Application, application) installed in the terminal 110, applet, etc., and can also be in the form of a web page.

[0041] Server 120 can be an independent physical server, a server cluster or distributed system composed of multiple physical servers, a cloud server providing basic cloud computing services, or a node in a blockchain system. Server 120 can be the backend server of the first application described above, used to provide backend services to the client of the first application.

[0042] In the method for displaying interface elements provided in the embodiment of the present application, the execution subject of each step may be a computer device, which refers to an electronic device with data calculation, processing and storage capabilities. Figure 1As shown, the method for displaying interface elements can be executed by the terminal 110 (for example, the client of the first application installed and running in the terminal 110 executes the method for displaying interface elements), or the method for displaying interface elements can be executed by the server 120, or the terminal 110 and the server 120 can interact and cooperate to execute the method for displaying interface elements, and this application does not limit this.

[0043] The following description will be made by taking the method for displaying interface elements executed by the terminal 110 as an example.

[0044] A first interface is displayed in a client of a first application running on terminal 110. The first interface corresponds to a first display element. Terminal 110 determines the current lifecycle stage of the first display element in the first interface. The lifecycle stage is used to represent the existence state of the first display element. Lifecycle stages include, but are not limited to, creation stage, initialization stage, interaction stage, pause stage, stop stage, and destruction stage. After determining the current lifecycle stage of the first display element, it is determined whether the lifecycle stage meets the stage visibility requirements. Schematically, different lifecycle stages correspond to different existence states. For example, the creation stage indicates that the display element does not exist on the current screen, the initialization stage indicates that the display element exists on the current screen, and the stop stage indicates that the display element does not exist on the current screen. If the first display element's current lifecycle stage is the initialization stage, it can be determined that the first display element's lifecycle stage meets the stage visibility requirements. Then, a second display element is determined in the first interface. The second display element is at the same container level as the first display element, that is, the first display element corresponds to a first display container, the second display element corresponds to a second display container, and the first display container and the second display container are at the same container level.

[0045] After determining the second display element, the visibility state of the first display element in the first interface is determined based on the occlusion relationship between the first display element and the second display element. For example, if the second display element completely occludes the first display element, the first display element is determined to be invisible in the first interface; if the second display element partially occludes the first display element, the first display element is determined to be partially visible in the first interface; and if the second display element does not occlude the first display element, the first display element is determined to be completely visible in the first interface. Finally, based on the visibility state of the first display element, the first display element is displayed in the first interface.

[0046] Next, the process of the method for displaying interface elements provided in the embodiment of the present application is introduced.

[0047] Figure 2 This is a flow chart of a method for displaying interface elements provided by an embodiment of the present application. The method is executed by a computer device, which may be Figure 1The terminal 110 and / or the server 120 are shown. The method includes the following steps 210 to 240.

[0048] Step 210: Determine the current life cycle stage of the first display element in the first interface.

[0049] Among them, display elements include but are not limited to: video, pictures, text, audio, controls, text boxes, etc., which are not limited in this application.

[0050] The life cycle phase refers to the phase that the first display element goes through during its existence. Optionally, the life cycle phase includes but is not limited to: creation phase, initialization phase, interaction phase, pause phase, stop phase, and destruction phase.

[0051] In some embodiments, the first interface includes a first component, and the first display element is associated with the first component. Optionally, the current life cycle stage of the first component associated with the first display element in the first interface is determined. The component is used to carry the display element, and the first component is the component carried by the first display element. Schematically, in an application development scenario, a component is a basic module that constitutes a user interface. It not only encapsulates its own logic and style, but also manages display elements. The display element serves as the visual presentation part of the component, and its state and behavior are controlled by the component.

[0052] Optionally, the first component includes at least one of a global component and a local component.

[0053] The global component is used to carry all display elements in the first interface. Schematically, in the Android system, the global component can be implemented as an Activity component.

[0054] Please refer to Figure 3 , Figure 3 A schematic diagram of the life cycle of an Activity component is shown. Figure 3 As shown in the figure, the life cycle stages of the Activity component include: activity component creation stage, activity component initialization stage, activity component interaction stage, activity component pause stage, activity component stop stage, activity component destruction stage and component reinitialization stage. Figure 3 The complete life cycle of the Activity component from startup to shutdown is shown, which includes the following processes:

[0055] 1. Active component startup

[0056] Schematically, when a user opens an Activity component for the first time, the following lifecycle phases are triggered in sequence:

[0057] (1) Activity component creation phase: Call onCreate() to enter the activity component creation phase and perform basic settings of the Activity component (such as layout and binding data). At this time, the Activity component is not visible on the screen.

[0058] (2) Activity component initialization phase: Call onStart() to enter the activity component initialization phase and load dynamic content into the Activity component. At this time, the Activity component is visible on the screen but cannot be interacted with.

[0059] (3) Activity component interaction phase: Call onResume() to enter the activity component interaction phase. At this time, the Activity component is visible and interactive on the screen, which can be regarded as the Activity component entering the foreground.

[0060] 2. Active component operation

[0061] Schematically, when an Activity component enters the foreground, that is, when the Activity component runs, the following life cycle stages are triggered during the running of the Activity component:

[0062] (4) Activity component pause phase: When the user jumps to another Activity component (that is, another Activity component enters the foreground), onPause() is called to enter the activity component pause phase. At this time, the Activity component is partially visible on the screen (and cannot be interacted with).

[0063] Among them, when the user returns to the original activity component from other Activity components, onResume() is called to re-enter the activity component interaction phase.

[0064] (5) Activity component stop phase: Call onStop() to enter the activity component stop phase. At this time, the Activity component is completely invisible on the screen. If other Activity components completely cover the original Activity component, trigger onStop() to enter the activity component stop phase.

[0065] Among them, when the user navigates back to the original Activity component, onRestart() is called to enter the component reinitialization phase. At this time, the Activity component is not visible on the screen; then onStart() is called to re-enter the activity component initialization phase.

[0066] (6) Activity component destruction phase: When the Activity component is ending or being destroyed by the system, onDestroy() is called to enter the activity component destruction phase. At this time, the Activity component is not visible on the screen.

[0067] 3. Active component shutdown

[0068] When onDestroy() is called to destroy the Activity component, the Activity component is closed.

[0069] 4. The application is terminated

[0070] During the activity component stop phase, if a higher-priority application requires memory, the application containing the original activity component will be terminated, and the original activity component will be directly closed (without calling onDestroy()). When the user navigates back to the original activity component, onCreate() is called to enter the activity component creation phase.

[0071] Among them, the local components are used to carry some display elements in the first interface. Schematically, in the Android system, some components can be implemented as Fragment components.

[0072] Please refer to Figure 4 , Figure 4 A schematic diagram of the life cycle of a Fragment component is shown. Figure 4 As shown, the life cycle stages of the Fragment component include: fragment component association stage, fragment component creation stage, view creation stage, view association stage, fragment component initialization stage, fragment component interaction stage, fragment component pause stage, fragment component stop stage, view destruction stage, fragment component destruction stage, and fragment component disassociation stage. Figure 4 This shows the complete life cycle of a Fragment component from being added to being closed, which includes the following processes:

[0073] 1. Fragment component is added

[0074] Schematically, when a Fragment component is first added to an Activity component, the following lifecycle phases are triggered in sequence:

[0075] (1) Fragment component association phase: Call onAttach() to enter the fragment component association phase, which associates the Fragment component with the Activity component. At this time, the Fragment component is invisible on the screen. The Activity component associated with the Fragment component is also the host Activity component of the Fragment component.

[0076] (2) Fragment component creation phase: Call onCreate() to enter the fragment component creation phase and perform basic settings of the Fragment component. At this time, the Fragment component is not visible on the screen.

[0077] (3) View creation phase: Call onCreateView() to enter the view creation phase and create the view corresponding to the Fragment component. At this time, the Fragment component is not visible on the screen.

[0078] (4) View association phase: When the host Activity component of the Fragment component is created, onActivityCreated() is called to enter the view association phase and associate the view with the host Activity component. At this time, the Activity component is not visible on the screen.

[0079] (5) Fragment component initialization phase: Call onStart() to enter the fragment component initialization phase and load dynamic content into the Fragment component. At this time, the Fragment component is visible on the screen but cannot be interacted with.

[0080] (6) Fragment component interaction stage: Call onResume() to enter the fragment component interaction stage. At this time, the Fragment component is visible and interactive on the screen, which can be regarded as the Fragment component entering the foreground.

[0081] 2. Fragment component operation

[0082] Schematically, the Fragment component enters the foreground, that is, the Fragment component runs. During the running of the Fragment component, the following life cycle stages are triggered:

[0083] (7) Fragment component pause phase: When the user navigates back or the Fragment component is removed / replaced, or the Fragment component is removed / replaced after being added to the back stack, onPause() is called to enter the fragment component pause phase. At this time, the Fragment component is partially visible on the screen (and cannot be interacted with).

[0084] (8) Fragment component stop phase: Call onStop() to enter the fragment component stop phase. At this time, the Fragment component is not visible on the screen.

[0085] Among them, when the fragment component is returned to the layout from the back stack, onCreate() is called to re-enter the fragment component creation phase.

[0086] (9) View destruction phase: Call onDestroyView() to enter the view destruction phase. At this time, the Fragment component is not visible on the screen.

[0087] (10) Fragment component destruction phase: Call onDestroy() to enter the fragment component destruction phase. At this time, the Fragment component is not visible on the screen.

[0088] (11) Fragment component disassociation phase: Call onDetach() to enter the fragment component disassociation phase, and disassociate the Fragment component from the host Activity component. At this point, the Fragment component is not visible on the screen.

[0089] 3. Fragment component closed

[0090] When onDetach() is called to release the association between the Fragment component and the host Activity component, the Fragment component is closed.

[0091] In this solution, display elements are associated with components, and their lifecycle phases are determined based on the component's lifecycle phase. This enables modular management of display elements. For example, a global component controls the overall interface state, while a local component handles specific areas within the interface. Components can be used to control the lifecycle phases of a group of display elements in batches, improving efficiency.

[0092] In some embodiments, when the first display element meets the visibility state change requirement, the current life cycle stage of the first display element in the first interface is determined. That is, when the first display element meets the visibility state change requirement, the visibility state of the first display element is determined.

[0093] Optionally, the situation where the first display element meets the visible state change requirement includes at least one of the following situations:

[0094] Case 1: When the life cycle stage corresponding to the first display element changes, the current life cycle stage of the first display element in the first interface is determined.

[0095] Illustratively, when the lifecycle stage of the first component corresponding to the first display element changes, the current lifecycle stage of the first component corresponding to the first display element in the first interface is determined. For example, when a user switches from the homepage to a subpage, the original homepage component enters a paused state, triggering a visibility check for its associated display element. If obscured, the component is hidden to save resources.

[0096] Case 2: When the layout of the first interface changes, the current life cycle stage of the first display element in the first interface is determined.

[0097] Illustratively, when the layout of the first interface changes due to user operations (e.g., scrolling, displaying content, collapsing content, dragging a display element) or dynamic content loading (e.g., ad insertion, data refresh), the current lifecycle stage of the first display element in the first interface is determined. For example, when a user expands the comment area on a reading page, the newly loaded comment area may obscure the main text, requiring the visibility of the main text to be determined and the display to be adjusted (e.g., automatic scrolling to avoid obstruction).

[0098] Case 3: When the device hardware state changes (such as screen rotation, folding screen opening and closing, split screen mode) or display parameters are adjusted (such as resolution, zoom ratio), the current life cycle stage of the first display element in the first interface is determined.

[0099] For example, when the phone is in landscape mode, the video player is enlarged, which may block the operation buttons below. The visibility of the buttons needs to be recalculated. If they are blocked, a floating control bar is provided.

[0100] Case 4: When the interface content of the first interface changes, the current life cycle stage of the first display element in the first interface is determined.

[0101] Illustratively, when the interface content of the first interface is updated in real time (such as real-time message push, animation playback, data visualization chart refresh), the current life cycle stage of the first display element in the first interface is determined. For example, in full-screen mode of a video player, after the progress bar is automatically hidden, if the user clicks the screen to wake up the control, it is necessary to determine whether the control obscures the subtitles and adjust its position.

[0102] Case 5: According to the user's historical operation habits (such as high frequency of clicking on a certain element), the current life cycle stage of the first display element in the first interface is determined.

[0103] Illustratively, when a user frequently returns to a blocked element (such as a "Back to Top" button), for example, when a user repeatedly attempts to click a "Buy" button blocked by an ad, the system automatically adjusts the ad position to ensure that the button is fully visible.

[0104] It should be noted that the above example of the first display element meeting the visible state change requirements is only an illustrative description, and the embodiment of the present application does not limit this. For example, the current life cycle stage of the first display element in the first interface can also be determined at preset time intervals.

[0105] Step 220: When the life cycle stage meets the stage visibility requirement, determine the second display element in the first interface.

[0106] In some embodiments, when the life cycle stage is a preset life cycle stage, a second display element in the first interface is determined, wherein the preset life cycle stage refers to a pre-set life cycle stage that meets the stage visibility requirements.

[0107] Schematically, different lifecycle stages correspond to different visibility states. For example, when the lifecycle stage is the initialization stage, the display element is fully visible (or partially visible), and the lifecycle stage meets the stage visibility requirements; when the lifecycle stage is the interaction stage, the display element is fully visible (or partially visible), and the lifecycle stage meets the stage visibility requirements; when the lifecycle stage is the pause stage, the display element is fully visible (or partially visible), and the lifecycle stage meets the stage visibility requirements.

[0108] In the above scheme, the second display element is determined only when the life cycle stage is the preset life cycle stage, which can specifically judge the occlusion relationship and determine the visible state at a specific life cycle stage, avoiding processing at unnecessary or irrelevant stages, saving resources and computing costs, and improving the efficiency and targeting of display control.

[0109] Optionally, when the current life cycle stage of the first component corresponding to the first display element is a preset life cycle stage, the second display element in the first interface is determined.

[0110] Taking the first component implemented as an Activity component as an example, when the current life cycle stage of the Activity component is the activity component creation stage, the activity component stop stage, the component reinitialization stage, or the activity component destruction stage, it does not meet the stage visibility requirements; when the current life cycle stage of the Activity component is the activity component initialization stage, the activity component interaction stage, or the activity component pause stage, it meets the stage visibility requirements.

[0111] Taking the first component implemented as a Fragment component as an example, when the current life cycle stage of the Fragment component is any one of the fragment component association stage, fragment component creation stage, view creation stage, view association stage, fragment component stop stage, view destruction stage, fragment component destruction stage, and fragment component disassociation stage, it does not meet the stage visibility requirements; when the current life cycle stage of the Fragment component is the fragment component initialization stage, the fragment component interaction stage, or the fragment component pause stage, it meets the stage visibility requirements.

[0112] In some embodiments, the first interface is provided by a client of the first application, and a first account is logged into the client. Optionally, historical operation data of the first account is obtained; and a frequency of determining a visible state during a preset life cycle stage corresponding to the first display element is determined based on the historical operation data.

[0113] Among them, the historical operation data includes at least one of the triggering frequency of the first display element and the return frequency of the first display element by the first account within the historical time period; the return frequency indicates the frequency of switching from other display elements to the first display element; the historical time period represents the time period of the preset life cycle stage currently corresponding to the first display element.

[0114] Illustratively, within a historical time period, the first account's operational behavior on the first display element during its preset lifecycle stage is determined, and the following data is recorded: 1) Trigger count: The total number of times a user actively triggered (clicked / interacted) the first display element during the preset lifecycle stage. 2) Return count: The number of times the user switched back to the first display element from other interfaces / elements. 3) Stage duration: The total duration of the preset lifecycle stage (used for frequency calculation). The trigger count and return count are then normalized by the stage duration to calculate the trigger frequency (trigger count / stage duration) and return frequency (return count / stage duration). Weights for the trigger frequency (W1) and return frequency (W2) are defined as needed (e.g., W1 = 0.6, W2 = 0.4). An activity score is calculated for the preset lifecycle stage: Score = (trigger frequency × W1) + (return frequency × W2). The activity score is used to determine the determination frequency corresponding to the preset lifecycle stage. The activity score and determination frequency are positively correlated. That is, within the current preset time period, the higher the activity score, the higher the frequency of triggering the determination of the visibility status of the first display element. Optionally, the determination frequency corresponding to the preset life cycle stage is re-determined according to a time window (eg, every 3 hours).

[0115] In the above scheme, by analyzing the historical operation data of the first account, such as the triggering frequency and return frequency of the first display element, the frequency of determining the visible state within the preset life cycle stage (i.e., the frequency of calculating and updating the visible state) is dynamically adjusted. The frequency of determining the visible state is determined based on the user's historical operation data to avoid overly frequent visible state determination for display elements that are not frequently used or have low user attention, thereby saving computing resources and device energy consumption. For example, for display elements that are rarely triggered and returned by users, the determination frequency can be appropriately reduced, and more resources can be allocated to important elements that are frequently used by users, thereby improving the overall performance and operating efficiency of the device.

[0116] The first display element corresponds to the first display container, and the second display element corresponds to the second display container. The display container is used to represent the layout information of the display elements.

[0117] In some embodiments, the first display element is implemented by a first view, and the second display element is implemented by a second view. In an application development scenario, display elements are implemented by views. Developers can create view instances in their application code to define interface display elements, such as controls, text boxes, images, animations, progress bars, and so on. Display elements can be considered the "content" of a view; they are the elements that users can directly see and interact with on the screen.

[0118] Among them, the first display container and the second display container are at the same container level. Optionally, in the view (View) hierarchy, the display containers at the same container level have the same hierarchical depth. When the interface needs to be drawn, the containers at the same level will be drawn in a certain order (such as addition order, depth (Z-axis) size order, etc.), and their drawing order and position relationship will affect each other's occlusion. Optionally, the first display container and the second display container are at the same container level means that the two display containers are at the same level in the hierarchical structure of the interface layout and have no containment relationship.

[0119] In some embodiments, the first display container and the second display container are in the same container level, which includes at least one of the following:

[0120] Case 1: The first display container and the second display container are the same.

[0121] Optionally, the first display container and the second display container being the same means that the first view corresponding to the first display element and the second view corresponding to the second display element are in the same child display container. For example, the first display element corresponds to View1, and the second display element corresponds to View2. View1 and View2 belong to the same ViewGroup1, i.e., a child display container.

[0122] Case 2: The first display container and the second display container are different, and the first display container and the second display container are in the same parent display container.

[0123] Optionally, the first display container and the second display container are different, and the first display container and the second display container are in the same parent display container, which means that the first view corresponding to the first display element and the second view corresponding to the second display element are in different child display containers, and the first view and the second view are in the same parent display container. Schematically, the first display element corresponds to View1, the second display element corresponds to View2, View1 belongs to ViewGroup1, View2 belongs to ViewGroup2, and ViewGroup1 and ViewGroup2 belong to ViewGroup3, which is the parent display container.

[0124] In other embodiments, if the life cycle stage does not meet the stage visibility requirements, the first display element is determined to be invisible in the first interface. Alternatively, if the life cycle stage does not meet the preset stage visibility requirements, the first display element is determined to be invisible in the first interface.

[0125] Step 230: Determine the visibility state of the first display element in the first interface according to the occlusion relationship between the first display element and the second display element.

[0126] Different occlusion relationships correspond to different visibility states, and the situation in which the visibility state of the first display element in the first interface is determined according to the occlusion relationship includes at least one of the following situations:

[0127] (1) When the second display element completely covers the first display element, determine that the first display element is not visible in the first interface.

[0128] For illustration, please refer to Figure 5 , which shows a schematic diagram of the occlusion relationship of display elements. Figure 5 As shown in (a), the second display element 502 completely blocks the first display element 501, so the first display element 501 is invisible.

[0129] Optionally, if there are at least two second display elements, and at least one of the at least two second display elements completely blocks the first display element, it is determined that the first display element is not visible in the first interface.

[0130] (2) When the second display element partially blocks the first display element, determining that the first display element is partially visible in the first interface.

[0131] like Figure 5 As shown in FIG. 5( b ), the second display element 502 partially blocks the first display element 501 , so the first display element 501 is partially visible.

[0132] Optionally, if there are at least two second display elements that partially block the first display element, determine the blocked parts of the first display element by the at least two second display elements respectively; when the whole formed by the combination of the at least two blocked parts is different from the first display element, the first display element 501 is partially visible.

[0133] For example, assuming the first display element is a circle, the second display element a is a triangle, and the second display element b is a rectangle, a corner of the second display element a blocks the left-hand 1 / 4 of the upper half of the first display element, while the second display element b blocks the right-hand 1 / 4 of the lower half of the first display element. Therefore, the combination of the blocked portions of the second display elements a and b creates an irregular shape composed of the triangular and rectangular blocking regions. This shape blocks two non-adjacent portions of the first display element but does not completely cover the entire first display element. Therefore, the first display element 501 is partially visible.

[0134] (3) When the second display element does not block the first display element, determine that the first display element is completely visible in the first interface.

[0135] like Figure 5 As shown in (c), the second display element 502 does not completely block the first display element 501, so the first display element 501 is completely visible.

[0136] Optionally, if there are at least two second display elements, and if the at least two second display elements do not block the first display element, it is determined that the first display element is completely visible in the first interface.

[0137] In the above scheme, the specific circumstances for determining the visible state according to the occlusion relationship are refined, and the definition of the visibility of the display elements is improved, making the judgment of the visible state of the display elements more accurate and detailed.

[0138] In some embodiments, the occlusion relationship between the first display element and the second display element is determined according to the order of addition.

[0139] For example, if the first and second display containers are the same (hereinafter collectively referred to as child display containers), the occlusion relationship between the first and second display elements is determined based on the order in which they are added to the child display containers. If the first display element is added to the child display container after the second display element, the second display element does not obstruct the first display element. If the first display element is added to the child display container before the second display element, the second display element does not obstruct the first display element, completely obstructs the first display element, or partially obstructs the first display element.

[0140] For example, if the first and second display containers are different and reside in the same parent display container, the occlusion relationship between the first and second display elements is determined based on the order in which they were added to the parent display container. For example, if the first display container is added to the parent display container after the second display container, the second display element does not obstruct the first display element. If the first display container is added to the parent display container before the second display container, the second display element does not obstruct the first display element, completely obstructs the first display element, or partially obstructs the first display element.

[0141] In other embodiments, the occlusion relationship between the first display element and the second display element is determined according to the display depth of the display element. The display depth refers to the stacking order of the display elements in the first interface. Elements with higher depths are displayed above elements with lower depth values. For example, if the depth attribute value of element A is 3 and the depth attribute value of element B is 1, then element A will be displayed above element B. Schematically, if the first display depth corresponding to the first display element is greater than the second display depth corresponding to the second display element, the second display element does not block the first display element. If the first display depth corresponding to the first display element is less than or equal to the second display depth corresponding to the second display element, the second display element does not block the first display element, or the second display element completely blocks the first display element, or the second display element partially blocks the first display element.

[0142] In some embodiments, first region coordinates corresponding to the first display element are obtained, and second region coordinates corresponding to the second display element are obtained; and based on the first region coordinates and the second region coordinates, an occlusion relationship between the first display element and the second display element is determined.

[0143] In the above solution, the occlusion relationship is determined by obtaining the regional coordinates of the display elements, which makes the determination of the occlusion relationship more operable and accurate, and ensures the objectivity and reliability of the determination of the occlusion relationship.

[0144] Optionally, the region coordinates of the first view area corresponding to the first display element are obtained as the first region coordinates, and the region coordinates of the second view area corresponding to the second display element are obtained as the second region coordinates. The first view area refers to the area where the first view corresponding to the first display element is located, and the second view area refers to the area where the second view corresponding to the second display element is located. Optionally, the shapes of the first view area and the second view area are preset shapes, including but not limited to: rectangle, circle, sector, etc. Optionally, the region coordinates refer to the coordinates on the boundary line of the view area. For example, when the first view area is a first matrix area, the first region coordinates include the coordinates of the four vertices of the first matrix area.

[0145] Figure 6 A schematic diagram of a viewing area is shown, such as Figure 6 As shown, a coordinate system xy is established using the screen space of screen 600 corresponding to the first interface as the coordinate space, where the point in the upper left corner of the screen is the coordinate origin (0,0). In the coordinate system xy, the four vertex coordinates a(x1, y1), b(x2, y1), c(x1, y2), and d(x2, y2) of the first viewing area 610 corresponding to the first display element are determined, and the four vertex coordinates a'(x1', y1'), b'(x2', y1'), c'(x1', y2'), and d'(x2', y2') of the second viewing area 620 corresponding to the second display element are determined.

[0146] Then, a rectangular collision detection algorithm is used to determine whether the first view area 610 and the second view area 620 intersect:

[0147] (1) When the first region coordinates and the second region coordinates do not meet the overlap requirement, it is determined that the second display element does not block the first display element.

[0148] Illustratively, the x-axis range of the first viewing area 610 is [x1, x2], and the y-axis range is [y1, y2]. The x-axis range of the second viewing area 620 is [x1', x2'], and the y-axis range is [y1', y2']. The coordinates of the first and second regions do not overlap if any of the following conditions 1) to 4) are met: 1) x2 ≤ x1'; 2) x1 ≤ x2'; 3) y2 ≤ y1'; or 4) y1 ≤ y2'.

[0149] (2) When the first region coordinates and the second region coordinates meet the complete overlap requirement, it is determined that the second display element completely covers the first display element.

[0150] The following condition 5) is met, and the first region coordinates and the second region coordinates meet the requirement of complete overlap: 5) x1 ≥ x1' and x2 ≤ x2' and y1 ≥ y1' and y2 ≤ y2'.

[0151] (3) When the first region coordinates and the second region coordinates meet the partial overlap requirement, it is determined that the second display element partially covers the first display element.

[0152] If the first region coordinates and the second region coordinates do not meet any of the above conditions 1) to 5), the first region coordinates and the second region coordinates meet the partial overlap requirement.

[0153] Optionally, if there are at least two second display elements that partially block the first display element, the overlapping areas between the at least two second view areas and the first view area are determined based on the first area coordinates and the second area coordinates; when the overall area coordinates of the overall area formed by the combination of the at least two overlapping areas and the second area coordinates meet the partial overlap requirements, it is determined that the second display element partially blocks the first display element.

[0154] Optionally, the region coordinates corresponding to the first element area corresponding to the first display element are obtained as the first region coordinates, and the region coordinates of the second element area corresponding to the second display element are obtained as the second region coordinates. The first element area refers to the area where the first display element is located, and the second element area refers to the area where the second display element is located. Optionally, the shape of the first element area is the element shape of the first display element, and the shape of the second element area is the element shape of the second display element. The shapes of the first element area and the second element area include but are not limited to: rectangle, circle, sector, irregular shape, etc. Optionally, the region coordinates refer to the coordinates on the boundary line of the element area. For example, when the first element area is the first circular area, the first region coordinates include 6 coordinate points evenly distributed on the boundary line of the first circular area.

[0155] It should be noted that the element area and the view area are different. The view area refers to the layout space occupied by the display element, and the element area refers to the display space actually occupied by the display element. For example, when the first display element is a circular control, the first view area corresponding to the first display element can be implemented as a first rectangular area, and the first element area corresponding to the first display element can be implemented as a first element area. The first element area is contained in the first rectangular area.

[0156] It should be noted that if the first display element is added to the child display container after the second display element, or the first display depth corresponding to the first display element is greater than the second display depth corresponding to the second display element, then it is directly determined that the second display element does not obstruct the first display element. If the first display element is added to the child display container before the second display element, or the first display depth corresponding to the first display element is less than or equal to the second display depth corresponding to the second display element, then it is necessary to determine the obstruction relationship between the first display element and the second display element based on the first region coordinates and the second region coordinates.

[0157] In some embodiments, the method is performed by a first device. Optionally, in response to a change in the device posture of the first device, a current display mode parameter of the first interface is obtained; a first display parameter corresponding to the first display element is adjusted according to the display mode parameter, and a second display parameter corresponding to the second display element is adjusted, wherein the display parameter includes at least one of a display position and a display size of the display element; a first region coordinate corresponding to the first display element is obtained according to the adjusted first display parameter, and a second region coordinate corresponding to the second display element is obtained according to the adjusted second display parameter.

[0158] The device posture change refers to a change in the device posture of the first device. Illustratively, the first device includes a device posture sensor, which obtains device posture sensor parameters of the device posture sensor (such as a gyroscope or accelerometer), and determines whether the device posture of the first device has changed based on the device posture sensor parameters. For example, the rotation angle of the first device is determined based on the device posture sensor parameters, and if the rotation angle is greater than 25 degrees, it is determined that the device posture of the first device has changed.

[0159] When the device posture of the first device changes, the current display mode parameters of the first interface are obtained. The display mode parameters include at least one of screen orientation, resolution, and shake parameters. Schematically, the screen orientation includes at least one of portrait orientation and landscape orientation, and the resolution refers to the screen resolution of the screen currently available for the first device, such as a screen resolution of 1920 (width) x 1080 (height). The shake parameter refers to the movement path of the display element in the first interface as the device posture of the first device changes.

[0160] Optionally, the first display parameter corresponding to the first display element is adjusted according to the screen direction, and the second display parameter corresponding to the second display element is adjusted. For example, the first display element is implemented as a video player and the second display element is implemented as an advertisement pop-up window:

[0161] When the screen orientation is portrait, the video player is located in the center of the screen with a size of 500x300, and the ad pop-up window is located in the upper right corner of the screen with a size of 400x200. There is no obstruction between the two, and the video player is completely visible. When the screen orientation is adjusted from portrait to landscape, the video player size becomes 300x500, the center point position is (200, 100), and the ad pop-up window size becomes 200x400, the center point position is (150, 300). At this time, the first area coordinates corresponding to the video player are determined according to the size of the video player and its corresponding center point position; the second area coordinates corresponding to the ad pop-up window are determined according to the size of the ad pop-up window and its corresponding center point position; and the obstruction relationship between the video player and the ad pop-up window is determined based on the first area coordinates and the second area coordinates for judging the visible state of the video player.

[0162] Optionally, the first display parameter corresponding to the first display element is adjusted according to the resolution, and the second display parameter corresponding to the second display element is adjusted. For example, the first display element is implemented as a video player and the second display element is implemented as an advertisement pop-up window:

[0163] In the initial state, the screen resolution corresponding to the first device is 1920x1080, the video player is located in the center of the screen, with a size of 500x300, and is fully visible. The ad pop-up window is located in the upper right corner, with a size of 400x200, and is not blocked by the video player. When the user adjusts the screen resolution corresponding to the first device to 1080x1920, the video player size becomes 300x500, the center point position becomes (540,960), and the ad pop-up window size becomes 200x400, and the center point position becomes (880,1720). At this time, the first area coordinates corresponding to the video player are determined based on the size of the video player and its corresponding center point position; the second area coordinates corresponding to the ad pop-up window are determined based on the size of the ad pop-up window and its corresponding center point position; and the occlusion relationship between the video player and the ad pop-up window is determined based on the first area coordinates and the second area coordinates for determining the visible state of the video player.

[0164] Optionally, the first display parameter corresponding to the first display element is adjusted according to the shaking parameter, and the second display parameter corresponding to the second display element is adjusted. For example, the first display element is implemented as a video player and the second display element is implemented as an advertisement pop-up window:

[0165] Optionally, when the first device leans forward, the video player moves upward (closer to the user's line of sight) and the ad pop-up moves downward (to avoid obstruction). For example, when the first device leans forward 30°, the center position of the video player is adjusted from (200, 100) to (200, 80). Optionally, when the first device leans forward, the size of the video player increases (to enhance visibility) and the size of the ad pop-up decreases (to reduce interference). For example, the size of the video player is adjusted from 300x500 to 350x550, and the size of the ad pop-up is adjusted from 200x400 to 160x320. Optionally, if the first device shakes a large amplitude (such as ±10 degrees), the video player is fixed in position (to avoid shaking with the shaking), and the ad pop-up is fixed in the lower right corner of the screen (or the ad pop-up is reduced and translucent). Schematically, in the initial state, the first device is stationary, the video player is located in the center of the screen, with a size of 300x500, and is fully visible. The ad pop-up window is located in the upper right corner, with a size of 200x400, partially blocking the video player. When the user controls the first device to tilt forward 30°, the center point of the video player moves up to (200,80), the size increases to 350x550, and the size of the ad pop-up window decreases to 160x320, and the position remains unchanged. At this time, the first area coordinates corresponding to the video player are determined based on the size of the video player and its corresponding center point position; the second area coordinates corresponding to the ad pop-up window are determined based on the size of the ad pop-up window and its corresponding center point position; and the occlusion relationship between the video player and the ad pop-up window is determined based on the first area coordinates and the second area coordinates for determining the visible state of the video player.

[0166] This solution considers the impact of device posture changes on display mode parameters and adjusts the display parameters of display elements accordingly, allowing the interface display to dynamically adapt to changes in device posture, enhancing the interface's display adaptability under different device postures. Furthermore, obtaining region coordinates based on the adjusted display parameters ensures that the accuracy of occlusion relationship judgment remains unchanged even after device posture changes.

[0167] In some embodiments, the maximum movement range of the display element in the first interface is the range corresponding to the parent display container corresponding to the display element. For example, the maximum display range of the first display element is the parent display container corresponding to the first display container, and the maximum display range of the second display element is the parent display container corresponding to the second display container. When determining the visible state of the first display element in the first interface, it is only necessary to judge the occlusion relationship between the second display element and the first display element that are at the same container level as the first display element.

[0168] In some embodiments, the maximum movable range of a display element in the first interface is the screen range corresponding to the first interface. Therefore, when determining the visibility of the first display element in the first interface, it is necessary to determine the occlusion relationship between the first display element and a third display element. The third display element includes the second display element, and the third display element is a display element in the first interface other than the first display element.

[0169] In the above scheme, the judgment of the occlusion relationship is extended to all display elements other than the first display element in the first interface, that is, the third display element, so that the consideration of the occlusion relationship is more comprehensive and complete, and other elements that may affect the visible state of the first display element will not be missed, so that the visible state of the first display element can be determined more accurately, the accuracy and rationality of the interface display can be ensured, display errors or unreasonable occlusion can be avoided, and the overall display quality can be improved.

[0170] In some embodiments, the occlusion relationship between the first display element and the third display element is determined in the order of addition. If the first display element is added to the first interface after the second display element, the second display element does not block the first display element. If the first display element is added to the first interface before the second display element, the second display element does not block the first display element, or the second display element completely blocks the first display element, or the second display element partially blocks the first display element. Optionally, if the first display element is added to the first interface before the second display element, the occlusion relationship between the first display element and the third display element is determined based on the first area coordinates corresponding to the first display element and the third area coordinates corresponding to the third display element.

[0171] In other embodiments, the occlusion relationship between the first display element and the second display element is determined according to the depth attribute of the display element. Schematically, if the first display depth corresponding to the first display element is greater than the third display depth corresponding to the third display element, the third display element does not block the first display element. If the first display depth corresponding to the first display element is less than or equal to the third display depth corresponding to the third display element, the third display element does not block the first display element, or the third display element completely blocks the first display element, or the third display element partially blocks the first display element. Optionally, if the first display depth corresponding to the first display element is less than or equal to the third display depth corresponding to the third display element, the occlusion relationship between the first display element and the third display element is determined based on the first area coordinates corresponding to the first display element and the third area coordinates corresponding to the third display element.

[0172] Among them, the description of “determining the occlusion relationship between the first display element and the third display element based on the first area coordinates corresponding to the first display element and the third area coordinates corresponding to the third display element” can refer to the above description of “determining the occlusion relationship between the first display element and the second display element based on the first area coordinates corresponding to the first display element and the second area coordinates corresponding to the second display element”, and will not be repeated here.

[0173] Step 240: Display the first display element on the first interface based on the visible state of the first display element.

[0174] In some embodiments, when the first display element is not visible in the first interface, the first interface does not display the first display element.

[0175] In some embodiments, when the first display element is fully visible in the first interface, the first interface fully displays the first display element.

[0176] In some embodiments, when the first display element is partially visible in the first interface, the first interface partially displays the first display element. Alternatively, when the first display element is partially visible in the first interface, a first visible portion of the first display element in the first interface is determined, and the first interface partially displays the first visible portion of the first display element.

[0177] In some embodiments, the first display element is a video playback element. Optionally, when the visible state indicates that the visible area of ​​the video playback element meets a preset area requirement, the video playback element is switched from a video playback mode to an audio playback mode; and a video key frame corresponding to the video playback element is displayed as a floating thumbnail in an unobstructed area of ​​the first interface.

[0178] Among them, the video playback element refers to a display element that plays video content, such as the video player described above. Optionally, the visible state indicates that the visible area of ​​the video playback element meets the preset area requirement, which means that the visible state indicates that the visible area of ​​the video playback element is less than or equal to the preset area threshold. Optionally, switching the video playback element from video playback mode to audio playback mode includes: pausing the video stream rendering in the video playback element and retaining the audio stream playback in the video playback element. Optionally, displaying the video key frame corresponding to the video playback element in the form of a floating thumbnail in the unobstructed area of ​​the first interface means: when the video playback element is switched from video playback mode to audio playback mode, extracting the video key frame within a preset time length (such as 1 second) before and after the playback position of the currently playing video content, scaling the video key frame to the target size corresponding to the floating thumbnail, and then displaying the video key frame in the form of a floating thumbnail in the unobstructed area of ​​the first interface. Optionally, in response to the user clicking on the video key frame in the floating thumbnail, the video playback element is fully displayed on the first interface. Optionally, in response to the user dragging the second display element so that the first display element is fully displayed on the first interface, the video key frame is canceled. Optionally, during the display of the floating thumbnail, the video key frame displayed in the floating thumbnail is updated according to the playback position of the current video content at every preset time period.

[0179] In the above scheme, when the first display element is a video playback element, it switches to audio playback mode when the visible area meets the preset requirements, and displays video key frames in the form of floating thumbnails, thereby saving screen space and meeting the user's usage needs in different scenarios. For example, when the user does not want to watch the entire video, he can still understand the video content through audio and key frames, which improves the flexibility and practicality of the video playback element and enhances the user experience.

[0180] In some embodiments, the above-described method for displaying an interface element is executed by a first device, wherein the screen of the first device is a foldable screen, the foldable screen includes a first screen and a second screen, and the first display element is displayed across the first screen and the second screen. Optionally, in response to the foldable screen being in a folded state, if the visible state meets preset display requirements, the first display element is controlled to move to the first screen; wherein the first screen fully displays the first display element.

[0181] Optionally, when the visible state meets preset display requirements, controlling the first display element to move to the first screen includes: controlling the first display element to move to the first screen when an area of ​​the visible region of the first display element in the first screen is larger than an area of ​​the visible region in the second screen. Controlling the first display element to move to the second screen when an area of ​​the visible region of the first display element in the second screen is larger than or equal to an area of ​​the visible region in the first screen.

[0182] Illustratively, when the folding screen of the first setting is in the folded state, when the visible area of ​​the first display element displayed across the screens is larger in the first screen than in the second screen, the first display element is dynamically migrated to the first screen and displayed in its entirety. Illustratively, in a video playback scenario, a user watches a video in the unfolded state of the first device (spanning two screens), then folds the device. When it is detected that the visible area of ​​the video player in the first screen is larger than that of the second screen, the video player is switched to be displayed in its entirety on the first screen.

[0183] Optionally, when the visible state indicates that the visible region area of ​​the first display element is less than or equal to a preset area threshold, the first display element is controlled to move to the first screen or the second screen for complete display.

[0184] In the above solution, for the case where the first device is a device with a foldable screen and the first display element is displayed across two screens, the integrity and readability of the display elements in different screen states are ensured by controlling the display elements that meet the preset display requirements to move to the first screen for complete display in the folded state.

[0185] In summary, the method for displaying interface elements provided in the embodiment of the present application determines whether the life cycle stage of the display elements in the interface meets the interface stage visibility requirements, screens out the real display elements, and then analyzes the occlusion relationship between the display elements and other display elements in the interface to determine the visible state of the display elements. On the one hand, the introduction of multi-dimensional judgment conditions of life cycle stages and occlusion relationships improves the accuracy of judging the visible state of display elements, thereby accurately determining the actual visibility of display elements in the interface and improving the accuracy of interface display; on the other hand, by judging the life cycle stage, invalid display elements (such as destroyed display elements) can be filtered out, reducing the display elements involved in subsequent processes and improving the efficiency of interface display.

[0186] In some embodiments, before determining the second display element in the first interface, it is also necessary to analyze the sliding state of the first display element in the screen. Figure 7 , the above Figure 2 Step 220 in the embodiment also includes the following steps 221 and 222 .

[0187] Step 221 : When the life cycle stage meets the stage visibility requirement, determine the current relative position relationship between the first display element and the screen.

[0188] Optionally, when the life cycle stage is a preset life cycle stage, the current relative position relationship between the first display element and the screen is determined.

[0189] Optionally, when the life cycle stage meets the stage visibility requirements, the first area coordinates corresponding to the first display element are determined; and the current relative position relationship between the first display element and the screen is determined based on the first area coordinates.

[0190] Optionally, when the lifecycle stage meets the stage visibility requirement and the first display element has an off-screen state, the current relative position relationship between the first display element and the screen is determined, wherein the off-screen state means that the first display element can be moved out of the screen range.

[0191] In some embodiments, the first display container corresponding to the first display element has a sliding function, and the sliding function includes at least one of an up-and-down sliding function and a left-and-right sliding function.

[0192] For illustration, please refer to Figure 8 , Figure 8 A schematic diagram showing the sliding state of a display element is shown, such as Figure 8 As shown, display element 801, display element 802, display element 803, display element 804 and display element 805 are in a container with up and down sliding functions, such as ScrollView, RecyclerView, ListView. At this time, display element 801, display element 802, display element 803, display element 804 and display element 805 may be slid out of the screen range corresponding to screen 800, that is, display element 801 to display element 805 have an off-screen state.

[0193] For illustration, please refer to Figure 9 , Figure 9 A schematic diagram showing the sliding state of a display element is shown, such as Figure 9 As shown, the display element 811 is in a container 810 with a left and right sliding function, such as ViewPage and HorizontalScrollView. At this time, the display element 811 may be slid out of the screen range corresponding to the screen 800, that is, the display element 811 has an off-screen state.

[0194] Step 222: When the current relative position relationship between the first display element and the screen meets the screen visibility requirement, determine the second display element in the first interface.

[0195] In some embodiments, when the first display element is entirely outside the screen range, it is determined that the first display element is not visible in the first interface.

[0196] Schematically, the regional coordinates of the first viewing area corresponding to the first display element are used as the first regional coordinates for explanation: the first regional coordinates are a rectangular area, and the screen space of the screen corresponding to the first interface is used as the coordinate space to establish a coordinate system xy, where the point in the upper left corner of the screen is the coordinate origin (0,0). In the coordinate system xy, the four vertex coordinates a(x1, y1), b(x2, y1), c(x1, y2), and d(x2, y2) of the first viewing area corresponding to the first display element are determined. The x-axis range of the first viewing area 610 is [x1, x2], and the y-axis range is [y1, y2]. The x-axis range of the screen is [0, x3], and the y-axis range is [0, y3].

[0197] When any of the following conditions 1) to 4) is met, the first display element is entirely outside the screen range: 1) x1 < 0 and x2 ≤ 0; 2) y1 < 0 and y2 ≤ 0; 3) x1 ≥ x3 and x2 > x3; 4) y1 ≥ y3 and y2 > y3.

[0198] In some embodiments, when the first display element is entirely within the screen range, a second display element in the first interface is determined.

[0199] When the following condition 5) is met, the first display element is partially outside the screen range: 5) 0≤x1<x3 and 0<x2≤x3 and 0≤y1<y3 and 0<y2≤y3.

[0200] In other embodiments, when the first display element is partially within the screen range, the second display element in the first interface is determined.

[0201] If the first area coordinates do not meet any of the above conditions 1) to 5), the first display element is partially within the screen range.

[0202] To sum up, the display of the interface elements provided by the present application is obtained by adding a judgment of the relative position relationship between the first display element and the screen before determining the second display element, and combining the screen visibility requirements to further refine the judgment process, ensuring that subsequent processing is performed only when the display element exists on the screen, avoiding unreasonable occlusion relationship judgment and visibility status determination, and improving the accuracy and rationality of display control.

[0203] For illustration, please refer to Figure 10 , Figure 10 This is a flow chart of a method for displaying interface elements provided by an embodiment of the present application. The method is executed by a computer device, which may be Figure 1 The terminal 110 and / or server 120 shown in FIG.

[0204] Step 1001: Determine the current life cycle stage of a first component corresponding to a first view in a first interface.

[0205] The first component is a component to which the first display element is attached. Optionally, the first component includes at least one of an Activity component and a Fragment component.

[0206] The Activity component is a global component, representing a screen. The Fragment component is a local component, part of the Activity component, and runs nested within the Activity component.

[0207] The first view corresponds to the first display element. Schematically, the first view can be implemented as an advertisement view, and the advertisement view corresponds to the first advertisement element, and the first advertisement element includes at least one of video, picture, audio, text, etc.

[0208] Step 1002 : When the current life cycle stage of the first component corresponding to the first view belongs to a preset life cycle stage, determine the first display container in which the first view is located.

[0209] Taking the first component implemented as an Activity component as an example, when the current life cycle stage of the Activity component is the activity component initialization stage, the activity component interaction stage, or the activity component pause stage, it is determined that the current life cycle stage of the first component belongs to the preset life cycle stage.

[0210] Taking the first component implemented as a Fragment component as an example, when the current life cycle stage of the Fragment component is the fragment component initialization stage, the fragment component interaction stage, or the fragment component pause stage, it is determined that the current life cycle stage of the first component belongs to the preset life cycle stage.

[0211] Step 1003: When the first display container has a sliding function, obtain the first region coordinates corresponding to the first view.

[0212] When it is determined that the current life cycle stage of the first component belongs to the preset life cycle stage, it is determined whether the first display container where the first view is located has a sliding function.

[0213] Optionally, when it is determined that the first display container in which the first view is located is a preset display container, it is determined that the first display container has a sliding function. Schematically, the preset display containers include but are not limited to: ScrollView (scrolling layout), HorizontalScrollView (horizontal scrolling layout), RecyclerView (advanced list control), ListView, and ViewPager (left and right sliding control).

[0214] Step 1004 : Determine the current relative position relationship between the first view and the screen according to the first region coordinates.

[0215] When it is determined that the first display container in which the first view is located has a sliding function, it is necessary to determine whether the first display element slides out of the screen: after obtaining the first area coordinates corresponding to the first view, determine the current relative position relationship between the first view and the screen based on the first area coordinates.

[0216] Step 1005 : When the current relative position relationship between the first display element and the screen indicates that the first view has not completely slid out of the screen, determine the second view in the first interface.

[0217] After obtaining the current relative position relationship between the first display element and the screen, if the relative position relationship indicates that the first view has completely slid off the screen, then the first display element is directly determined to be invisible in the first interface. If the relative position relationship indicates that the first view has not completely slid off the screen, then the second view in the first interface needs to be obtained.

[0218] The second view corresponds to the second display element, the first view corresponds to the first display container, and the second view corresponds to the second display container. The first display container and the second display container are at the same container level.

[0219] Step 1006 : Determine the visibility state of the first view in the first interface according to the occlusion relationship between the first view and the second view.

[0220] Different occlusion relationships correspond to different visibility states, and the situation in which the visibility state of the first display element in the first interface is determined according to the occlusion relationship includes at least one of the following situations:

[0221] (1) When the second display element completely covers the first display element, determine that the first display element is not visible in the first interface.

[0222] (2) When the second display element partially blocks the first display element, determining that the first display element is partially visible in the first interface.

[0223] (3) When the second display element does not block the first display element, determine that the first display element is completely visible in the first interface.

[0224] In some embodiments, first region coordinates corresponding to the first display element are obtained, and second region coordinates corresponding to the second display element are obtained; and based on the first region coordinates and the second region coordinates, an occlusion relationship between the first display element and the second display element is determined.

[0225] Step 1007: Based on the visible state of the first view, display a first display element corresponding to the first view on the first interface.

[0226] In some embodiments, when the first display element is not visible in the first interface, the first interface does not display the first display element.

[0227] In some embodiments, when the first display element is fully visible in the first interface, the first interface fully displays the first display element.

[0228] In some embodiments, when the first display element is partially visible in the first interface, the first interface partially displays the first display element.

[0229] Figure 11 This is a structural block diagram of a display device for interface elements provided by an exemplary embodiment of the present application. Figure 11 As shown, the device includes:

[0230] A determining module 1110 is configured to determine a current life cycle stage of a first display element in a first interface, where the life cycle stage is used to represent an existence state of the first display element;

[0231] The determining module 1110 is configured to determine, if the lifecycle stage meets the stage visibility requirement, a second display element in the first interface, the first display element corresponding to a first display container, the second display element corresponding to a second display container, and the first display container and the second display container being at the same container level;

[0232] The determining module 1110 is configured to determine a visible state of the first display element in the first interface according to an occlusion relationship between the first display element and the second display element;

[0233] The display module 1120 is configured to display the first display element on the first interface based on the visible state of the first display element.

[0234] In some embodiments, the determining module 1110 is configured to:

[0235] In a case where the second display element completely covers the first display element, determining that the first display element is not visible in the first interface;

[0236] In a case where the second display element partially obscures the first display element, determining that the first display element is partially visible in the first interface;

[0237] In the case where the second display element does not block the first display element, it is determined that the first display element is completely visible in the first interface.

[0238] In some embodiments, the determining module 1110 is configured to:

[0239] Obtaining first region coordinates corresponding to the first display element, and obtaining second region coordinates corresponding to the second display element;

[0240] An occlusion relationship between the first display element and the second display element is determined based on the first area coordinates and the second area coordinates.

[0241] In some embodiments, the determining module 1110 is configured to:

[0242] In response to a change in the device posture of the first device, obtaining current display mode parameters of the first interface, the display mode parameters including at least one of a screen orientation, a resolution, and a shake parameter;

[0243] adjusting a first display parameter corresponding to the first display element and a second display parameter corresponding to the second display element according to the display mode parameter, wherein the display parameter includes at least one of a display position and a display size of the display element;

[0244] The first region coordinates corresponding to the first display element are acquired according to the adjusted first display parameter, and the second region coordinates corresponding to the second display element are acquired according to the adjusted second display parameter.

[0245] In some embodiments, the first display container and the second display container are in the same container level, which includes at least one of the following:

[0246] The first display container and the second display container are the same;

[0247] The first display container and the second display container are different, and the first display container and the second display container are in the same parent display container.

[0248] In some embodiments, the first interface includes a first component, and the first display element is associated with the first component; the determining module 1110 is configured to:

[0249] Determine a current life cycle stage of the first component associated with the first display element in the first interface; wherein the first component includes at least one of the following components:

[0250] A global component, which is used to carry all display elements in the first interface;

[0251] A local component, which is used to carry some display elements in the first interface.

[0252] In some embodiments, the determining module 1110 is configured to:

[0253] When the life cycle stage is a preset life cycle stage, the second display element in the first interface is determined.

[0254] In some embodiments, the first interface is an interface provided by a client of the first application, and the first account is logged into the client; the determining module 1110 is configured to:

[0255] Obtaining historical operation data of the first account, the historical operation data including at least one of a triggering frequency of the first display element and a return frequency of the first display element by the first account within a historical time period, the return frequency indicating a frequency of switching from other display elements to the first display element; wherein the historical time period represents a time period of the preset life cycle stage corresponding to the first display element;

[0256] A determination frequency of determining the visible state during the preset life cycle stage currently corresponding to the first display element is determined according to the historical operation data.

[0257] In some embodiments, the determining module 1110 is configured to:

[0258] In a case where the life cycle stage meets the visibility requirement of the stage, determining a current relative position relationship between the first display element and the screen;

[0259] In a case where the current relative position relationship between the first display element and the screen meets the screen visibility requirement, the second display element in the first interface is determined.

[0260] In some embodiments, the maximum movement range of the display element in the first interface is the screen range corresponding to the first interface; the determining module 1110 is configured to:

[0261] Determine the visibility state of the first display element in the first interface based on the occlusion relationship between the first display element and a third display element, wherein the third display element includes the second display element, and the third display element is a display element other than the first display element in the first interface.

[0262] In some embodiments, the first display element is a video playback element; the display module 1120 is configured to:

[0263] When the visible state indicates that the visible area of ​​the video playback element meets a preset area requirement, switching the video playback element from a video playback mode to an audio playback mode;

[0264] The video key frame corresponding to the video playback element is displayed in the unobstructed area of ​​the first interface in the form of a floating thumbnail.

[0265] In some embodiments, the method is performed by a first device, where the screen of the first device is a foldable screen, the foldable screen includes a first screen and a second screen, and the first display element is displayed across the first screen and the second screen; the display module 1120 is configured to:

[0266] In response to the folding screen being in a folded state, and when the visible state meets a preset display requirement, the first display element is controlled to move to the first screen; wherein the first screen completely displays the first display element.

[0267] In summary, the display device of the interface element provided by the present application determines whether the life cycle stage of the display element in the interface meets the stage visibility requirements, screens out the real display elements, and then analyzes the occlusion relationship between the display element and other display elements in the interface (such as those in the same container level as the display element), thereby determining the visible state of the display element. On the one hand, the introduction of multi-dimensional judgment conditions of life cycle stage and occlusion relationship improves the judgment accuracy of the visible state of the display element, thereby accurately determining the actual visibility of the display element in the interface and improving the accuracy of the interface display; on the other hand, by judging the life cycle stage, invalid display elements (such as destroyed display elements) can be filtered out, reducing the display elements involved in the subsequent process and improving the efficiency of the interface display.

[0268] It should be noted that the apparatus provided in the above embodiments, when implementing its functions, is only illustrated by the division of the above functional modules. In actual applications, the above functions can be assigned to different functional modules as needed, that is, the content structure of the device can be divided into different functional modules to complete all or part of the functions described above. In addition, the apparatus and method embodiments provided in the above embodiments are based on the same concept. The specific implementation process is detailed in the method embodiment and will not be repeated here.

[0269] Please refer to Figure 12 , which shows a block diagram of the structure of a computer device provided by an embodiment of the present application. The computer device 1200 may be Figure 1 The terminal or server in the computer system shown is used to implement the display method of the interface elements provided in the above embodiment. Specifically:

[0270] Typically, the computer device 1200 includes a processor 1201 and a memory 1202 .

[0271] The processor 1201 may include one or more processing cores, such as a 4-core processor, an 8-core processor, etc. The processor 1201 may be implemented in at least one hardware form of DSP (Digital Signal Processing), FPGA (Field Programmable Gate Array), or PLA (Programmable Logic Array). The processor 1201 may also include a main processor and a coprocessor. The main processor is a processor for processing data in the awake state, also known as a CPU (Central Processing Unit); the coprocessor is a low-power processor for processing data in the standby state. In some embodiments, the processor 1201 may be integrated with a GPU (Graphics Processing Unit), which is responsible for rendering and drawing the content to be displayed on the display screen. In some embodiments, the processor 1201 may also include an AI (Artificial Intelligence) processor, which is used to process computing operations related to machine learning.

[0272] Memory 1202 may include one or more computer-readable storage media, which may be non-transitory. Memory 1202 may also include high-speed random access memory and non-volatile memory, such as one or more disk storage devices and flash memory storage devices. In some embodiments, the non-transitory computer-readable storage medium in memory 1202 is used to store a computer program, which is configured to be executed by one or more processors to implement the above-mentioned method for displaying interface elements.

[0273] In some embodiments, computer device 1200 may optionally include other components 1203, such as a peripheral device interface and at least one peripheral device. The processor 1201, memory 1202, and peripheral device interface may be connected via a bus or signal lines. Each peripheral device may be connected to the peripheral device interface via a bus, signal lines, or circuit boards. Specifically, the peripheral device may include at least one of a radio frequency circuit, a display screen, an audio circuit, and a power supply.

[0274] Those skilled in the art will understand that Figure 12 The structure shown in the figure does not constitute a limitation on the computer device 1200, and the computer device 1200 may include more or fewer components than shown in the figure, or combine some components, or adopt a different component arrangement.

[0275] In an exemplary embodiment, a computer-readable storage medium is further provided, wherein a computer program is stored in the storage medium, and when the computer program is executed by the processor, the method for displaying the above-mentioned interface elements is implemented. Optionally, the computer-readable storage medium may include: ROM (Read-Only Memory), RAM (Random Access Memory), SSD (Solid State Drives) or an optical disk, etc. Among them, the random access memory may include ReRAM (Resistance Random Access Memory) and DRAM (Dynamic Random Access Memory).

[0276] In an exemplary embodiment, a computer program product is further provided, comprising a computer program stored in a computer-readable storage medium. A processor of a computer device reads the computer program from the computer-readable storage medium and executes the computer program, causing the computer device to perform the above-described method for displaying interface elements.

[0277] It should be noted that the collection and processing of relevant data in this application (such as the first content requirements, etc.) should be strictly in accordance with the requirements of relevant national laws and regulations when applied in practice, and the informed consent or separate consent of the personal information subject should be obtained. Subsequent data use and processing should be carried out within the scope of authorization of laws and regulations and the personal information subject.

[0278] It should be understood that the "multiple" mentioned in this article refers to two or more. "And / or" describes the association relationship of associated objects, indicating that three relationships may exist. For example, A and / or B can represent three situations: A exists alone, A and B exist at the same time, and B exists alone. The character " / " generally indicates that the previous and subsequent associated objects are in an "or" relationship. In addition, the step numbers described in this article only illustrate a possible execution sequence between the steps. In some other embodiments, the above steps may not be executed in the order of the numbers, such as two steps with different numbers are executed at the same time, or two steps with different numbers are executed in the opposite order to the diagram. The embodiments of the present application do not limit this.

[0279] The above description is merely an exemplary embodiment of the present application and is not intended to limit the present application. Any modifications, equivalent substitutions, improvements, etc. made within the spirit and principles of the present application shall be included in the scope of protection of the present application.

Claims

1. A method for displaying interface elements, characterized in that: The method comprises: Determining a current life cycle stage of a first display element in a first interface; If the lifecycle stage meets the stage visibility requirement, determining a second display element in the first interface, the first display element corresponds to a first display container, the second display element corresponds to a second display container, and the first display container and the second display container are at the same container level; Determining a visible state of the first display element in the first interface according to an occlusion relationship between the first display element and the second display element; Based on the visible state of the first display element, the first display element is displayed on the first interface.

2. The method according to claim 1, characterized in that The determining, based on the occlusion relationship between the first display element and the second display element, the visible state of the first display element in the first interface includes: In a case where the second display element completely covers the first display element, determining that the first display element is not visible in the first interface; In a case where the second display element partially obscures the first display element, determining that the first display element is partially visible in the first interface; In the case where the second display element does not block the first display element, it is determined that the first display element is completely visible in the first interface.

3. The method according to claim 1, characterized in that Before determining the visibility state of the first display element in the first interface according to the occlusion relationship between the first display element and the second display element, the method further includes: Obtaining first region coordinates corresponding to the first display element, and obtaining second region coordinates corresponding to the second display element; An occlusion relationship between the first display element and the second display element is determined based on the first area coordinates and the second area coordinates.

4. The method according to claim 3, characterized in that The method is performed by a first device; the method further includes: In response to a change in the device posture of the first device, obtaining current display mode parameters of the first interface, the display mode parameters including at least one of a screen orientation, a resolution, and a shake parameter; adjusting a first display parameter corresponding to the first display element and a second display parameter corresponding to the second display element according to the display mode parameter, wherein the display parameter includes at least one of a display position and a display size of the display element; The acquiring the first region coordinates corresponding to the first display element, and acquiring the second region coordinates corresponding to the second display element, includes: The first region coordinates corresponding to the first display element are acquired according to the adjusted first display parameter, and the second region coordinates corresponding to the second display element are acquired according to the adjusted second display parameter.

5. The method according to any one of claims 1 to 4, characterized in that: The situation where the first display container and the second display container are at the same container level includes at least one of the following: The first display container and the second display container are the same; The first display container and the second display container are different, and the first display container and the second display container are in the same parent display container.

6. The method according to any one of claims 1 to 4, characterized in that: The first interface includes a first component, and the first display element is associated with the first component; Determining the current life cycle stage of the first display element in the first interface includes: Determine a current life cycle stage of the first component associated with the first display element in the first interface; wherein the first component includes at least one of the following components: A global component, which is used to carry all display elements in the first interface; A local component, which is used to carry some display elements in the first interface.

7. The method according to any one of claims 1 to 4, characterized in that: When the life cycle stage meets the stage visibility requirement, determining the second display element in the first interface includes: When the life cycle stage is a preset life cycle stage, the second display element in the first interface is determined.

8. The method according to claim 7, characterized in that The first interface is an interface provided by a client of the first application, and a first account is logged in to the client; The method further comprises: Obtaining historical operation data of the first account, the historical operation data including at least one of a triggering frequency of the first display element and a return frequency of the first display element by the first account within a historical time period, the return frequency indicating a frequency of switching from other display elements to the first display element; wherein the historical time period represents a time period of the preset life cycle stage corresponding to the first display element; A determination frequency of determining the visible state during the preset life cycle stage currently corresponding to the first display element is determined according to the historical operation data.

9. The method according to any one of claims 1 to 4, characterized in that: The determining of the second display element in the first interface when the life cycle stage meets the stage visibility requirement includes: In a case where the life cycle stage meets the visibility requirement of the stage, determining a current relative position relationship between the first display element and the screen; In a case where the current relative position relationship between the first display element and the screen meets the screen visibility requirement, the second display element in the first interface is determined.

10. The method according to any one of claims 1 to 4, characterized in that: The maximum movement range of the display element in the first interface is the screen range corresponding to the first interface; The method further comprises: Determine the visibility state of the first display element in the first interface based on the occlusion relationship between the first display element and a third display element, wherein the third display element includes the second display element, and the third display element is a display element other than the first display element in the first interface.

11. The method according to any one of claims 1 to 4, characterized in that: The first display element is a video playback element; The displaying the first display element on the first interface based on the visible state of the first display element includes: When the visible state indicates that the visible area of ​​the video playback element meets a preset area requirement, switching the video playback element from a video playback mode to an audio playback mode; The video key frame corresponding to the video playback element is displayed in the unobstructed area of ​​the first interface in the form of a floating thumbnail.

12. The method according to any one of claims 1 to 4, characterized in that: The method is performed by a first device, where the screen of the first device is a folding screen, the folding screen includes a first screen and a second screen, and the first display element is displayed across the first screen and the second screen; The displaying the first display element on the first interface based on the visible state of the first display element includes: In response to the folding screen being in the folded state, and if the visible state meets a preset display requirement, controlling the first display element to move to the first screen; The first screen completely displays the first display element.

13. A computer device, characterized in that: The computer device includes a processor and a memory, wherein a computer program is stored in the memory, and the computer program is loaded and executed by the processor to implement the method for displaying interface elements according to any one of claims 1 to 12.

14. A computer-readable storage medium, characterized in that The computer-readable storage medium stores a computer program, which is loaded and executed by a processor to implement the method for displaying interface elements according to any one of claims 1 to 12.

15. A computer program product, characterized in that The computer program product includes a computer program, which is stored in a computer-readable storage medium. A processor reads and executes the computer program from the computer-readable storage medium to implement the method for displaying interface elements according to any one of claims 1 to 12.

Images