Card display method and electronic equipment

Abstract

The invention relates to the technical field of terminals. Provided are a card display method and an electronic device, the method comprising: displaying a first interface of a first application, the first interface comprising a card display area, the card display area comprising a plurality of cards; in response to a first operation acting on the card display area, a second interface is displayed by unfolding a plurality of cards in the card display area, and the second interface comprises a plurality of first cards which are completely visible and a plurality of second cards which are displayed in a stacked mode; responding to a sliding operation acting on the second interface, and obtaining distance information of the sliding operation; according to the distance information of the sliding operation, determining position information of each of a plurality of completely visible third cards and a plurality of stacked and displayed fourth cards; according to the position information of each card, a plurality of third cards are displayed in a third interface in a completely visible mode, and a plurality of fourth cards are displayed in a stacked mode; based on the scheme, the user can efficiently obtain the information of one or more cards; and the user experience is improved.

Description

Technical Field

[0001] The present application relates to the field of terminal technology, and in particular to a card display method and electronic device. Background Art

[0002] With the development of electronic devices, in order to facilitate users to quickly obtain application information, widgets are increasingly used in electronic devices; a widget refers to a tiny application view that can be embedded in other applications; a widget can also be called a desktop widget or card. At present, in order to save the display space of the desktop in an electronic device, multiple cards can be displayed in turn in the card display area where the same widget is located, and each card corresponds to a view of an application, thereby forming a card stacking effect. Summary of the invention

[0003] The present application provides a method and electronic device for displaying cards, which can achieve a stacked display effect of displaying the top display area and / or the bottom display area of ​​the card on a display screen, so that a user can efficiently obtain information about one or more cards and improve the user experience.

[0004] In a first aspect, a method for displaying a card is provided, comprising:

[0005] Display a first interface of a first application, wherein the first interface includes a card display area, the card display area includes a plurality of cards, and the card display area displays the topmost card among the plurality of cards;

[0006] In response to a first operation applied to the card display area, a second interface is displayed by expanding the plurality of cards in the card display area, wherein the second interface includes a plurality of first cards that are fully visible and a plurality of second cards that are displayed in a stacked manner, wherein the stacked display refers to displaying partial card content information in the cards;

[0007] In response to a sliding operation on the second interface, obtaining distance information of the sliding operation;

[0008] Determine, according to the distance information of the sliding operation, the position information of each card in the plurality of fully visible third cards and the plurality of stacked and displayed fourth cards, wherein the plurality of third cards are the same as or different from the plurality of first cards, and the plurality of second cards are the same as or different from the plurality of fourth cards;

[0009] According to the position information of each card, the multiple third cards are fully visibly displayed in the third interface, and the multiple fourth cards are stacked and displayed.

[0010] In an embodiment of the present application, in response to a sliding operation acting on the second interface, the electronic device can obtain distance information of the sliding operation; based on the distance information of the sliding operation, the electronic device can determine the position information of each of the multiple fully visible third cards and the multiple stacked fourth cards; based on the position information of each card, the multiple third cards are displayed fully visibly in the third interface, and the multiple fourth cards are displayed in a stacked manner; in the scheme of the present application, the electronic device can calculate the position information of each of the multiple fully visible third cards and the stacked fourth cards based on detecting the sliding operation acting on the second interface, so as to realize that the card position changes with the change of the finger position of the sliding operation; in addition, multiple fourth cards can be stacked and displayed on the display screen, so that the user can efficiently obtain the information of one or more cards, thereby improving the user experience.

[0011] In combination with the first aspect, in some implementations of the first aspect, determining, according to the distance information of the sliding operation, the position information of each card in the plurality of completely visible third cards and the plurality of stacked fourth cards includes:

[0012] A sliding coefficient is obtained according to the distance information of the sliding operation, wherein the sliding coefficient is used to represent a ratio between a first value and the first distance information, the first value is used to represent a remainder obtained by performing a modulo operation on the distance information of the sliding operation and the first distance information, and the first distance information is used to represent a preset interval between top edges of two adjacent completely visible cards;

[0013] According to the distance information of the sliding operation and the sliding coefficient, the position information of each card in the multiple fully visible third cards and the multiple fourth cards displayed in stacked form is determined.

[0014] In an embodiment of the present application, a sliding coefficient is obtained according to the distance information of the sliding operation of the first distance information, and the position information of each card in the multiple third cards in which the first distance information is completely visible and the multiple fourth cards in which the first distance information is stacked and displayed is determined according to the distance information of the sliding operation of the first distance information and the sliding coefficient of the first distance information; based on the scheme of the present application, the sliding coefficient can be used to realize the stacking and display of multiple fourth cards in the third interface, so that the user can efficiently obtain the information of one or more cards, thereby improving the user experience.

[0015] In combination with the first aspect, in some implementations of the first aspect, obtaining a sliding coefficient according to distance information of the sliding operation includes:

[0016] Obtaining the sliding coefficient according to the distance information of the sliding operation, the preset card height information and the first interval information;

[0017] The first interval information is used to represent the preset interval between two adjacent completely visible cards.

[0018] In one possible implementation, a=[h%(h2+h3)] / (h2+h3);

[0019] Among them, a represents the sliding coefficient; h represents the distance information of the sliding operation; h2 represents the preset card height information; h3 represents the first interval information; and % represents the remainder operation.

[0020] In combination with the first aspect, in some implementations of the first aspect, the multiple third cards are arranged vertically, and determining, according to the distance information of the sliding operation, the position information of each card in the multiple third cards that are fully visible and displayed and the multiple fourth cards that are stacked and displayed includes:

[0021] performing an upward rounding operation on the first distance information according to the distance information of the sliding operation to obtain an identifier of a first completely visible third card among the multiple completely visible third cards;

[0022] Obtaining a first stack quantity according to the distance information of the sliding operation, the identifier of the first completely visible third card, and a first preset threshold, where the first stack quantity is used to represent the number of cards of the plurality of fourth cards displayed in the stack in a first display area, where the first display area is a top area of ​​the third interface;

[0023] The position information of the first completely visible third card is obtained according to the first stack quantity, the first distance information, the sliding coefficient and the second interval information, and the second interval information is used to represent the interval between two adjacent cards of the preset stack display.

[0024] In combination with the first aspect, in some implementations of the first aspect, obtaining the position information of the first completely visible third card according to the first stack quantity, the first distance information, the sliding coefficient, and the second interval information includes:

[0025] The position information of the first completely visible third card is obtained according to the following formula:

[0026] The position information of the first completely visible third card = the first stack quantity * the second interval information + the first distance information * (1-the sliding coefficient);

[0027] The first distance information is the sum of the preset card height information and the first interval information.

[0028] In conjunction with the first aspect, in some implementations of the first aspect, the method further includes:

[0029] The position information of each third card in the plurality of third cards except the first completely visible third card is obtained according to the position information of the first completely visible third card and the first distance information.

[0030] In combination with the first aspect, in some implementations of the first aspect, obtaining the position information of each third card among the multiple third cards except the first completely visible third card according to the position information of the first completely visible third card and the first distance information includes:

[0031] The position information of each third card is obtained according to the following formula:

[0032] The location information of card A = (the identification of the card A - the identification of the first completely visible third card) * the first distance information + the location information of the first completely visible third card;

[0033] The card A is any one of the third cards.

[0034] In combination with the first aspect, in some implementations of the first aspect, the plurality of fourth cards displayed in a stacked manner include a plurality of fourth cards displayed in a stacked manner in a second display area, where the second display area is a bottom area of ​​the third interface, and further includes:

[0035] According to the position information of the last fully visible third card among the multiple fully visible third cards, the first distance information, the sliding coefficient and the second interval information, the position information of the multiple fourth cards stacked and displayed in the second display area is obtained.

[0036] In combination with the first aspect, in some implementations of the first aspect, obtaining a plurality of fourth cards stacked and displayed in the second display area according to the position information of the first completely visible third card, the first distance information, the sliding coefficient, and the second interval information includes:

[0037] The position information of the plurality of fourth cards stacked and displayed in the second display area is obtained according to the following formula:

[0038] The position information of card B = the position information of the last completely visible third card + the first distance information * the sliding coefficient + (the identifier of the card B - the identifier of the last completely visible third card - the sliding coefficient) * the second interval information;

[0039] The card B is any fourth card among a plurality of fourth cards stacked and displayed in the second display area.

[0040] In conjunction with the first aspect, in some implementations of the first aspect, the method further includes:

[0041] According to the first stacking quantity, the second interval information and the sliding coefficient, position information of a plurality of fourth cards stacked and displayed in the first display area is obtained.

[0042] In combination with the first aspect, in some implementations of the first aspect, obtaining position information of a plurality of fourth cards stacked and displayed in the first display area according to the first stack quantity, the second interval information, and the sliding coefficient includes:

[0043] The position information of the plurality of fourth cards stacked and displayed in the first display area is obtained according to the following formula:

[0044] The position information of card C = the first stack quantity * the second interval information - (the identification of the first completely visible third card - the identification of card C - 1 + the sliding coefficient) * the second interval information;

[0045] The card C is any fourth card among a plurality of fourth cards stacked and displayed in the first display area.

[0046] In conjunction with the first aspect, in some implementations of the first aspect, the method further includes:

[0047] In response to a down event in the sliding operation on the second interface, obtaining a current first angle coefficient of each card, where the current first angle coefficient of each card is used to characterize a degree of change of each card from a preset initial angle to a current maximum distortion angle of each card, where the current maximum distortion angle of each card is related to current position information of each card;

[0048] The current angle of each piece is obtained according to the current maximum distortion angle of each card and the current first angle coefficient.

[0049] In an embodiment of the present application, in response to a down event in a first distance information sliding operation on a second interface of the first distance information, a current first angle coefficient of each card of the first distance information is obtained, and the current first angle coefficient of each card of the first distance information is used to characterize the degree of change of each card of the first distance information from a preset initial angle to the current maximum distortion angle of each card of the first distance information, and the current maximum distortion angle of each card of the first distance information is related to the current position information of each card of the first distance information; according to the current maximum distortion angle of each card of the first distance information and the current first angle coefficient, the current angle of each piece of the first distance information is obtained; based on the scheme of the present application, when displaying the card, the dynamic change of the distortion of the card angle can be achieved according to the first angle coefficient and the maximum distortion angle.

[0050] In combination with the first aspect, in some implementations of the first aspect, the current angle of each card is obtained according to the following formula:

[0051] The current angle of card D=the maximum distortion angle of card D*the first angle coefficient of card D.

[0052] In combination with the first aspect, in certain implementations of the first aspect, at the moment of detecting the down event in the sliding operation, the first angle coefficient is 0; at the first preset time after detecting the down event in the sliding operation, the first angle coefficient is 1.

[0053] In conjunction with the first aspect, in some implementations of the first aspect, the method further includes:

[0054] In response to an up event in the sliding operation on the second interface, obtaining a current second angle coefficient of each card, where the current second angle coefficient of each card is used to characterize a degree of change of each card from the maximum distortion angle to the preset initial angle;

[0055] The current angle of each piece is obtained according to the current maximum distortion angle of each card and the current second angle coefficient.

[0056] In combination with the first aspect, in certain implementations of the first aspect, at the moment when the up event in the sliding operation is detected, the second angle coefficient is 1; at a second preset time after the up event in the sliding operation is detected, the second angle coefficient is 0.

[0057] In a second aspect, an electronic device is provided, comprising: one or more processors and a memory; the memory is coupled to the one or more processors, the memory is used to store computer program code, the computer program code comprises computer instructions, and the one or more processors call the computer instructions to enable the electronic device to execute any one of the methods for displaying a card in the first aspect.

[0058] In a third aspect, a chip system is provided. The chip system is applied to an electronic device. The chip system includes one or more processors. The processor is used to call computer instructions so that the electronic device executes any one of the card display methods in the first aspect.

[0059] In a fourth aspect, a computer-readable storage medium is provided, wherein the computer-readable storage medium stores a computer program code. When the computer program code is executed by an electronic device, the electronic device executes any one of the card display methods in the first aspect.

[0060] In a fifth aspect, a computer program product is provided, the computer program product comprising: a computer program code, when the computer program code is executed by an electronic device, the electronic device executes any one of the methods for displaying a card in the first aspect.

[0061] In an embodiment of the present application, in response to a sliding operation acting on the second interface, the electronic device can obtain distance information of the sliding operation; based on the distance information of the sliding operation, the electronic device can determine the position information of each of the multiple fully visible third cards and the multiple stacked fourth cards; based on the position information of each card, the multiple third cards are displayed fully visibly in the third interface, and the multiple fourth cards are displayed in a stacked manner; in the scheme of the present application, the electronic device can calculate the position information of each of the multiple fully visible third cards and the stacked fourth cards based on detecting the sliding operation acting on the second interface, so as to realize that the card position changes with the change of the finger position of the sliding operation; in addition, multiple fourth cards can be stacked and displayed on the display screen, so that the user can efficiently obtain the information of one or more cards, thereby improving the user experience. BRIEF DESCRIPTION OF THE DRAWINGS

[0062] Figure 1 is a schematic diagram of an existing display card provided in an embodiment of the present application;

[0063] Figure 2 is a schematic diagram of another existing display card provided in an embodiment of the present application;

[0064] Figure 3 is a schematic diagram of a display card provided in an embodiment of the present application;

[0065] Figure 4 is a schematic diagram of another display card provided in an embodiment of the present application;

[0066] Figure 5 is a schematic diagram of another display card provided in an embodiment of the present application;

[0067] Figure 6 is a schematic diagram of another display card provided in an embodiment of the present application;

[0068] Figure 7 is a schematic diagram of a software system of an electronic device provided in an embodiment of the present application;

[0069] Figure 8 is a schematic diagram of a method for displaying a card provided in an embodiment of the present application;

[0070] Fig. 9 is a schematic diagram of a card spacing provided in an embodiment of the present application;

[0071] Fig.10 is a schematic diagram of a display card provided in an embodiment of the present application;

[0072] Fig.11 is a schematic diagram of another display card provided in an embodiment of the present application;

[0073] Fig.12 is a schematic diagram of a software system of another electronic device provided in an embodiment of the present application;

[0074] Fig.13 is a schematic diagram of a method for displaying a card provided in an embodiment of the present application;

[0075] Fig.14 is a schematic diagram of another method for displaying cards provided in an embodiment of the present application;

[0076] Fig.15 The present invention is a schematic diagram of the hardware structure of an electronic device suitable for the present application. DETAILED DESCRIPTION

[0077] In the embodiments of the present application, the following terms "first", "second", etc. are used for descriptive purposes only and are not to be understood as indicating or implying relative importance or implicitly indicating the number of the indicated technical features. Thus, a feature defined as "first" or "second" may explicitly or implicitly include one or more of the features. In the description of the present embodiment, unless otherwise specified, "plurality" means two or more.

[0078] At present, in order to facilitate users to use various applications and to increase the richness of mobile phone displays when using mobile phones, multiple cards of applications can usually be displayed on the desktop of electronic devices. For example, after the application is installed in the electronic device, the application can be registered with the widget manager (also called the card manager) of the mobile phone to generate a card corresponding to the application. If the user's operation of adding a card to the desktop of the electronic device is detected, the electronic device responds to the operation of adding the card, obtains the information of the application and displays the card on the desktop.

[0079] For example, in order to save desktop space, the user can display multiple cards of the same size in the same card display area; Figure 1 As shown in (a) in the figure, the card display area 101 displays cards in a stacked state; wherein the cards in the stacked state include a weather card, a news card, a clock card, and a schedule card; in the case where multiple cards are stacked and displayed, if the user wants to view a card among the multiple cards, he needs to search through the multiple cards until the card is displayed in the electronic device; the multiple cards are stacked and displayed on the desktop of the electronic device, and the display order of the multiple cards in the card display area 101 is a weather card, a recommendation card, a clock card, and a schedule card; as shown in FIG. Figure 1 As described in (b) of the above, the weather card is currently displayed at the top, and the electronic device detects a sliding operation on the weather card; in response to the sliding operation on the weather card, the electronic device displays the weather card at the bottom of the multiple cards, and displays the next card in the display order, that is, displays the news card; Figure 1 As shown in (c) in FIG. 1 , if the news card is not the card that the user wants to view, the user needs to continue to slide down the news card; in response to the sliding down operation on the news card, the electronic device displays the recommended card at the bottom of the multiple cards and displays the next card in the display order, that is, displays the clock card; Figure 1 As shown in (d) in FIG. 1 , if the clock card is still not the card that the user needs to view, the user continues to slide down the clock card; Figure 2 As shown, in response to a sliding action on the clock card, the electronic device displays the clock card at the bottom of the multiple cards, and displays the next card in the display order, that is, displays the schedule card.

[0080] From the above description, it can be seen that currently, if multiple cards are stacked and displayed on the desktop of an electronic device, when a user wants to view a certain card, he needs to continuously turn pages among the stacked cards until the card is found; the above process is cumbersome and results in a poor user experience.

[0081] In view of this, an embodiment of the present application provides a method and an electronic device for displaying cards; in an embodiment of the present application, a first interface of a first application is displayed, the first interface includes a card display area, the card display area includes multiple cards, and the card display area displays the top card of the multiple cards; in response to a first operation applied to the card display area, a second interface is displayed by unfolding multiple cards in the card display area, the second interface includes multiple fully visible first cards and multiple stacked second cards, wherein the stacked display refers to displaying part of the card content information in the card; in response to a sliding operation applied to the second interface, distance information of the sliding operation is obtained; according to the distance information of the sliding operation, the position information of each card in the multiple fully visible third cards and the multiple stacked fourth cards is determined, wherein the multiple third cards are the same as or different from the multiple first cards, and the multiple second cards are the same as or different from the multiple fourth cards; according to the position information of each card, the multiple third cards are fully visible in the third interface, and the multiple fourth cards are stacked; through the embodiment of the present application, a display effect of stacking cards at the top and / or bottom of the display screen can be achieved, so that the user can efficiently obtain the information of one or more cards; and the user experience is improved.

[0082] Before explaining the card display provided in the embodiment of the present application in detail, the electronic device involved in the embodiment of the present application is first described.

[0083] The method provided in the embodiment of the present application can be executed by an electronic device, and a plurality of cards running in the main process of the desktop are displayed on the desktop of the electronic device, and the plurality of cards can be displayed in a stacked manner. As an example and not a limitation, the electronic device can be, but is not limited to, a mobile sports camera (GoPro), a digital camera, a tablet computer, a desktop, a laptop, a handheld computer, a notebook computer, a vehicle-mounted device, an ultra-mobile personal computer (UMPC), a netbook, a cellular phone, a personal digital assistant (PDA), an augmented reality (AR)\virtual reality (VR) device, a mobile phone, a door lock, a smart appliance, etc., and the embodiment of the present application does not limit this.

[0084] Optionally, the hardware structure diagram of the electronic device can be found in the following Fig.15 Related description.

[0085] Combine the following Figures 3 to 14 The method for displaying a card provided in an embodiment of the present application is described in detail.

[0086] Implementation method 1

[0087] In one implementation, when multiple cards in a card set are expanded and displayed on an electronic device, an animation effect of stacking the cards at the top and bottom of the display screen can be achieved, so that users can efficiently obtain information about one or more cards, thereby improving the user experience.

[0088] For example, Figure 3 is a schematic diagram of an interface for displaying a card provided in an embodiment of the present application; Figure 3 The interface shown in (a) may be a display interface of the negative one screen of an electronic device, such as Figure 3 As shown in (a) in FIG. 1 , the display interface of the negative one screen includes card 0 and information about the number of steps today; card 0 is a card displayed on the top layer, and multiple cards can be stacked below card 0; Figure 3 As shown in (b) in FIG. 1 , a sliding operation on card 1 is detected; Figure 3 As shown in (c) in FIG. 1 , in response to a swipe-up operation on card 0, expanded cards 0, 1, 2, 3, and 4 are displayed; wherein card 4 is located below card 3; Figure 3 As shown in (d) in FIG. 1 , a sliding operation on card 1 is detected; Figure 4 As shown in (a), in response to the upward sliding operation on card 1, cards 0, 1, 2, 3, 4 and 5 are displayed in the expanded state; wherein card 0 is located below card 1, and card 5 is located below card 4; Figure 4 As shown in (b) in FIG. 1 , a sliding operation on card 2 is detected; Figure 4 As described in (c) in the figure, in response to the upward sliding operation on card 2, cards 1, 2, 3, 4 and 5 are displayed in the expanded state; wherein card 1 is located below card 2; Figure 4 As shown in (d) in FIG. 5 , a sliding operation on card 5 is detected; Figure 5 As shown, in response to the upward sliding operation on card 5, the cards are in a stacked state and the card displayed on the top layer is card 2; it should be noted that the card displayed on the top layer is as shown in FIG. Figure 4 The first fully displayed card in the display interface of (d) is card 2.

[0089] It should be noted that when it is detected that the sliding distance of the sliding operation on card 0 is greater than the preset distance (for example, 2 / 3 of the height of a single card), the sliding operation on card 0 is displayed as follows: Fig. 9 In the interface shown in (c), multiple expanded cards are displayed.

[0090] It should be understood that Figure 3 and Figure 4The above sliding operation is used as an example to illustrate the triggering operation of triggering the card set to be displayed from a stacked state to an expanded state; the triggering operation can also be a long press operation, or other operations, and the embodiments of the present application do not impose any limitations on this.

[0091] In an embodiment of the present application, when a plurality of cards in an expanded state are displayed on a display screen of an electronic device, a stacked card effect may be displayed at the top of the display screen, such as Figure 4 The card 0 and card 1 shown in (a) in FIG. 1 and the stacked card effect can be displayed at the bottom of the display screen, such as Figure 4 Card 4 and card 5 shown in (a); the method for displaying cards provided in the embodiment of the present application can, on the one hand, avoid the user from frequently turning pages among multiple stacked cards, and the operation is simple; on the other hand, it can display the information of multiple cards on the display screen at the same time, thereby improving the user experience.

[0092] For example, in the embodiment of the present application, the card positions of the multiple cards displayed in the unfolded state on the display screen can be adjusted; Figure 6 As shown in (a) of FIG. 1 , in the order from top to bottom of the display screen, the display screen displays expanded cards 0, card 1, card 2, card 3, card 4 and card 5; card 0 is located below card 1, and card 5 is located below card 4; a selection operation on card 3 is detected; as shown in FIG. Figure 6 (b) and Figure 6 As shown in (c) in FIG. 1 , a drag operation on card 3 is detected, and card 3 is gradually dragged to the top of card 2; Figure 6 As shown in (d) in FIG. 8 , in response to the drag operation applied to card 3 , card 3 is located above card 2 .

[0093] Figure 7 It is a schematic diagram of a software system of an electronic device provided in an embodiment of the present application.

[0094] like Figure 7 As shown, the electronic device adopts a layered software system, which is divided into several layers, each layer has a clear role and division of labor. The layers communicate with each other through software interfaces. In some embodiments, the software system can be divided into four layers, from top to bottom, namely, the application layer, the application framework layer, the Android runtime (Android Runtime) and the system library, and the kernel layer.

[0095] Exemplarily, the application layer may include a page manager in the electronic device; the page manager may be used to manage location information of different components in the page.

[0096] Exemplarily, different pages in an electronic device may correspond to different page managers; for example, the negative one screen page manager may be used to manage the location information of different components in the negative one screen; the desktop page manager may be used to manage the location information of different components in the desktop.

[0097] Exemplarily, the application framework layer provides an application programming interface (API) and a programming framework for the application programs of the application layer. The application framework layer may include some predefined functions.

[0098] In an embodiment of the present application, the application framework layer includes: a card set control manager, a navigation point control manager, a View architecture module and an animation effect architecture management module, etc.; wherein, the card set control manager is used to manage the relevant controls of the card set; the navigation point control manager is used to manage the navigation point controls; the View architecture module is used to draw the animation effects of the cards in the card set; the animation effect architecture management module is used to control the View architecture module to draw the animation effects of the cards in the card set; wherein, the animation effects of the cards in the card set include but are not limited to: card movement, card size scaling, card transparency change and card angle change, etc.; the card set control manager includes a state manager, a state change animation manager, a layout manager and a data adapter; the state manager is used to manage the state of the card set, and the state of the card set includes a stacked state, an expanded state, a contracted state and a stretched state; the state change animation manager: is used to manage the transition state animation of the cards in the card set; the layout manager: is used to manage the position and size of the cards in the card set; the data adapter is used to manage and transmit the identification of the cards in the card set, the content information of the cards and the sorting of the cards.

[0099] Optionally, a position information interface is provided in the View framework module, and the position information of the card is transmitted through the position information interface.

[0100] Exemplarily, the system layer includes a surface manager, a media library, a 3D graphics processing library (e.g., an open graphics library for embedded systems), and a 2D graphics engine, etc.; wherein the surface manager is used to manage the display subsystem and provides the fusion of 2D layers and 3D layers for multiple applications; the media library supports playback and recording of multiple audio formats, playback and recording of multiple video formats, and static image files. The media library can support multiple audio and video encoding formats, such as: MPEG4, H.264, moving picture experts group audio layer III (MP3), advanced audio coding (AAC), adaptive multi-rate (AMR), joint photographic experts group (JPG) and portable network graphics (PNG), etc.; the 3D graphics processing library can be used to implement 3D graphics drawing, image rendering, synthesis and layer processing. The 2D graphics engine is a drawing engine for 2D drawing.

[0101] Exemplarily, the kernel layer is a layer between hardware and software. The kernel layer may include driver modules such as display driver, camera driver, audio driver, and sensor driver.

[0102] Optionally, Figure 7 The connection relationship between the layers shown is only a schematic illustration and does not constitute a limitation on the connection relationship between the software architecture layers of the electronic device.

[0103] Exemplarily, the method for displaying cards provided in the embodiment of the present application can be implemented between various managers or modules in the application architecture layer; for example, after the application layer detects the user's operation, it can send card-related information to the card set control manager in the application architecture layer; for example, the page manager can send card size, card quantity, card identifier, card identifier sorting and card content information to the layout manager in the card set control manager; optionally, the data interaction process between various managers in the card set control manager can refer to the subsequent Figure 8 Related description.

[0104] Combine the following Figure 8 The method of implementing the display card of the present application and the data flow interaction between various managers or modules in the application architecture layer of the electronic device are described in detail. Figure 8 As shown, the method includes S201 to S207; S201 to S07 are described in detail below.

[0105] It should be noted that Figure 8 The functions of each manager or data adapter can be found in Figure 7 The relevant description in will not be repeated here.

[0106] S201: The page manager detects a swipe-up operation on the topmost card in a card set.

[0107] For example, Figure 3 As shown in (d) in the figure, the page manager of the negative one screen detects a swipe up operation on card 0, which is the topmost card in the card set; the swipe up operation's swiping distance is greater than a preset distance, for example, the preset distance may be 2 / 3 of the height of a single card.

[0108] For example, if the card set is located on the desktop, the page manager of the desktop can detect a swipe-up operation on the topmost card in the card set.

[0109] In one example, the swipe up operation may also be a long press operation, or other operations that trigger display of an expanded card.

[0110] S202. In response to the slide-up operation, the page manager sends the card size, the number of cards, the card identifiers, the order of the card identifiers, and the content information of the cards to the layout manager.

[0111] Exemplarily, the card size information is used to characterize the size of the cards in the card set; the number of cards includes a first preset number, a second preset number, and a third preset number; wherein the first preset number is used to characterize the maximum number of cards that are allowed to display complete card content information in a display interface; Figure 4 As shown in (a), the maximum number of cards allowed to display complete card content information in the display interface is 4; the second preset number is used to represent the maximum number of cards allowed to be stacked in the top display area of ​​the display screen; the third preset number is used to represent the maximum number of cards allowed to be stacked in the bottom display area of ​​the display screen.

[0112] In one example, the first preset number and the second preset number may be equal.

[0113] Optionally, the card sizes of multiple cards in the card set may be the same.

[0114] Exemplarily, the card identifier is used to identify different cards in the card set; the order of the card identifiers is used to represent the display order of multiple cards in the card set; the content information of the card includes text information or image information in the card.

[0115] For example, Figure 4The card display area shown in (a) in FIG. 1 shows a card set, which includes a weather card, a note card, a daily trick card, a courier reminder card, a download information card, and a to-do card. The weather card, the note card, the daily trick card, the courier reminder card, the download information card, and the to-do card can be identified by different numbers; for example, Figure 4 As shown in (c), 0 is used to identify the weather card, 1 is used to identify the note card, 2 is used to identify the daily tips card, 3 is used to identify the express reminder card, and 4 is used to identify the download information card.

[0116] It should be noted that the above is an example of identifying cards by continuous numbers, and the present application does not impose any limitation on the implementation method of marking different cards in the card set.

[0117] For example, Figure 4 The weather card shown in (a) includes the current temperature "30℃", "maximum 31℃", "minimum 23℃", "clear", "30℃ at 12:00", "28℃ at 13:00", "27℃ at 14:00", "26℃ at 15:00", "21℃ at 16:00", "20℃ at 17:00" and other information.

[0118] For example, the card identifiers, the order of the card identifiers, and the content information of the cards may be represented by the following information:

[0119] / Card Queue

[0120] List <hnstackitem>mHnStackItems=new ArrayList<>();

[0121] / / Card class

[0122] public class HnStackItem{

[0123] / / Card sorting

[0124] int mPosition;

[0125] / / Card ID

[0126] String id;

[0127] / / Card content

[0128] HnStackViewItemView mManualCardView;

[0129] };

[0130] S203: A sliding operation is detected.

[0131] Exemplarily, the page manager detects a sliding operation on the card.

[0132] S206: The page manager sends the sliding distance of the sliding operation to the layout manager.

[0133] Exemplarily, the measurement unit of the sliding distance of the sliding operation may be pixel (px). For example, the page manager detects a sliding operation on a card, and in response to the sliding operation on the card, the page manager may periodically report the sliding distance of the sliding operation; for example, the sampling period is 20ms, and the touch operation is detected at 0ms, and the sliding distance of the sliding operation reported is 0 pixels; at 20ms, the sliding distance of the sliding operation reported is 15 pixels; at 40ms, the sliding distance of the sliding operation reported is 10 pixels.

[0134] Alternatively, if Figure 7 As shown, the application layer detects a click operation; the application layer can send a sliding distance to a card set control manager in the application framework layer, and the card set control manager can send the sliding distance to the layout manager.

[0135] S205. The layout manager obtains a cumulative total sliding distance h based on the sliding distance; and calculates the position information of each card in the card set according to the cumulative total sliding distance h.

[0136] In an example, sliding upward is a positive slide, and sliding downward is a negative slide; based on the sliding distance of the sliding operation periodically reported by the page manager, the layout manager can obtain the cumulative total sliding distance of the sliding operation; for example, the sampling period is 20ms, the touch operation is detected at the 0th ms, and the sliding distance of the sliding operation reported is 0 pixels; the sliding operation is detected at the 20th ms, and the sliding distance of the sliding operation reported is 15 pixels; the sliding operation is detected at the 40th ms, and the sliding distance of the sliding operation reported is 10 pixels, then the cumulative total sliding distance h=15+10=25 pixels.

[0137] In an example, sliding upward is a positive slide, and sliding downward is a negative slide; based on the sliding distance of the sliding operation periodically reported by the page manager, the layout manager can obtain the cumulative total sliding distance of the sliding operation; for example, the sampling period is 20ms, the touch operation is detected at 0ms, and the sliding distance of the sliding operation reported is 0 pixels; the sliding operation is detected at 20ms, and the sliding distance of the sliding operation reported is 15 pixels; the sliding operation is detected at 40ms, and the sliding distance of the sliding operation reported is 5 pixels; then the cumulative total sliding distance h=15+(-5)=10 pixels.

[0138] It should be understood that the sliding distance may refer to the sliding distance reported once in the sampling period, and the cumulative total sliding distance h is the cumulative sum of sliding distances reported multiple times before the current moment and without detecting the hand-lifting operation.

[0139] It should be noted that the above is an example description of the sliding operation and the accumulated total sliding distance, and the present application does not impose any limitation on this.

[0140] The following is a detailed description of how the layout manager calculates the position information of each card in the card set.

[0141] Exemplarily, when calculating the position information of each card in the card set, the layout manager can first determine the identifier (for example, identifier n) and the sliding coefficient a of the first fully visible card based on the cumulative total sliding distance h; based on the sliding coefficient a, the position information of the first fully visible card can be obtained; based on the position information of the first fully visible card, the preset order of card identifiers, the preset single card height and the preset visible card interval, the position information of other fully visible cards can be obtained; based on the cumulative total sliding distance h and the preset number of stacked card layers, the current number of stacking layers in the top stacking area and / or the number of stacking layers in the bottom stacking area can be obtained; based on the preset stacked card interval and the current number of stacking layers in the top stacking area and / or the number of stacking layers in the bottom stacking area, the position information of the cards in the current top stacking area and / or the bottom stacking area of ​​the display screen can be obtained.

[0142] For example, the identifier of the first fully visible card (for example, identifier n) is determined according to the accumulated sliding distance h; based on the identifier of the first fully visible card and the number of cards in S202, the card identifier of each card in the multiple cards displayed on the display screen can be obtained.

[0143] For example, Fig. 9 As shown in (a), according to the cumulative total sliding distance h, the identification of the first completely visible card is n, and the number of cards includes a first preset number and a second preset number. The first preset number is the maximum number of cards allowed to display complete card content information in a display interface (for example, 4), and the second preset number is the maximum number of stacked cards in the stacking area (for example, 3); according to the identification n of the first completely visible card, the first preset number and the second preset number, it can be obtained that the card identifications displayed in the current display interface are n-3, n-2, n-1, n, n+1, n+2, n+3, n+4 (for example, m), n+4+1 (for example, m+1), n+4+2 (for example, m+2) and n+4+3 (for example, m+3).

[0144] Exemplarily, you can first obtain the card identifier of each of the multiple cards displayed on the display screen, and then calculate the location information of each card separately; or, you can obtain a card identifier and calculate the location information of the card; then obtain the next card identifier and calculate the location information of the next card; this application does not impose any limitations on this.

[0145] The following is an example of the calculation process of the identification of the first fully visible card.

[0146] For example, Fig. 9 As shown in (a), the cards displayed in the display screen include, in order from top to bottom: card n-3, card n-2, card n-1 (for example, cards located in the top stacking area of ​​the display screen), card n (for example, the first fully visible card), card n+1, card n+2, card n+3, and so on to card m (for example, other fully visible cards), card m+1, card m+2, card m+3 (for example, cards located in the bottom stacking area of ​​the display screen); wherein, the stacking card interval of the cards located in the top stacking area of ​​the display screen, or the cards located in the bottom stacking area of ​​the display screen is h1; the height of a single card is h2; the visible card interval is h3; and h1 is less than h2.

[0147] Exemplarily, h1 and h3 may be equal, or h3 may be greater than h1.

[0148] For example, Wherein, h represents the total cumulative sliding distance of the detected sliding operation; h2 represents the height of a single card; h3 represents the visible card interval; Indicates a round-up operation.

[0149] For example, Figure 3 As shown in (c) in the figure, no sliding operation is detected, the cumulative sliding distance h=0; the identification of the first completely visible card=0.

[0150] In an example, a single card is 4 pixels high, the visible card interval is 1 pixel; the cumulative total sliding distance is 5 pixels, then

[0151] It should be understood that the cumulative sliding distance may refer to the total vertical cumulative sliding distance in the display screen.

[0152] The calculation process of the sliding coefficient a is illustrated below with an example.

[0153] Exemplarily, a=[h%(h2+h3)] / (h2+h3);

[0154] Among them, a represents the sliding coefficient; h represents the total cumulative sliding distance; h2 represents the height of a single card; h3 represents the visible card interval; % represents the remainder operation.

[0155] For example, the sliding coefficient a may have a value range of 0% to 100%; the sliding coefficient a may be unitless.

[0156] It should be noted that the sliding coefficient a=[accumulated sliding distance%(single card height+visible card interval)] / (single card height+visible card interval).

[0157] The following is an example of the calculation process of the position information of the first completely visible card.

[0158] Exemplarily, the position of the first fully visible card = the number of stacking layers in the top stacking area * the stacking card interval + (the height of a single card + the visible card interval) * (1-sliding coefficient) = K1*h1+(h2+h3)*(1-a); wherein K1 represents the number of stacking layers in the top stacking area; h1 represents the stacking card interval; h2 represents the height of a single card; h3 represents the visible card interval; and a represents the sliding coefficient.

[0159] In one example, K1 is related to the accumulated total sliding distance h, and K1 is less than or equal to a first preset threshold; for example, K1 is less than or equal to 3; it can be understood that the stacking level with the most top stacking areas is 3.

[0160] For example, Fig. 9 Taking the position of the first completely visible card shown in (a) as an example, the number of stacking layers K1=3; the position of the first completely visible card=3*h1+(h2+h3)*(1-a).

[0161] Exemplarily, before the card moves, the first fully visible card is card n; in response to the user's swipe up operation, multiple cards move upward, and card n+1 covers at least part of card n, and the first fully visible card is card n+1; before the card moves, for the card of card n+1, the sliding coefficient a is 0%; when the card of card n+1 moves to the card position of card n, for the card of card n+1, the sliding coefficient a is 100%.

[0162] The following is an example of the calculation process of the position information of other completely visible cards.

[0163] Exemplarily, if the card identifier is a consecutive number, the position of other fully visible cards = (this card identifier - the identifier of the first fully visible card) * (h2 + h3) + the position of the first fully visible card; where h2 represents the height of a single card; and h3 represents the visible card interval.

[0164] For example, for other fully visible cards except the first fully visible card, the distances between other fully visible cards are fixed; for example, the interval between card n+1 and card n+2 may be a fixed interval h3.

[0165] The following is an example of the calculation process of the position information of the card located in the top stacking area of ​​the display screen.

[0166] Exemplarily, if the card identification is a consecutive number, the position of the card located in the top stacking area = K1*h1-(identification of the first fully visible card-identification of this card-1+a)*h1; wherein K1 represents the number of stacking layers in the top stacking area; h1 represents the stacking card interval; and a represents the sliding coefficient.

[0167] The following is an example of the calculation process of the position information of the card located in the stacking area at the bottom of the display screen.

[0168] For example, Fig. 9 As shown, if the card identification is a continuous number, the position of the card located in the bottom stacking area = the position of the last completely visible card (for example, card m) + (h2+h3)*a+(the identification of this card - the card identification of the last completely visible card - a)*h1; wherein h1 represents the stacked card interval; h2 represents the height of a single card; h3 represents the visible card interval; and a represents the sliding coefficient.

[0169] For example, the following is combined with Fig. 9 The derivation principle of the calculation process of the position information of each card in the above display screen is explained with examples.

[0170] For example, when displaying the animation effect of a card, the position information of the card can be calculated based on the distance between the vertices of the upper left corner of the card (for example, if the card has rounded corners, the vertex of the upper left corner is the vertex of the upper left corner of the minimum circumscribed rectangle of the card), with the top of the display screen as the initial position, sliding up is a positive slide, and sliding down is a negative slide; for example, Fig. 9 As shown in (b) in FIG. 1 , before the position of the card changes, the distance between the upper left corner vertex A1 of card n and the upper left corner vertex A2 of card n+1 is h2+h3, and an upward sliding operation is detected; Fig. 9 As shown in (c), in response to the upward sliding operation on the display screen, the position of card n moves to the position of card n', and the position of card n+1 moves to the position of card n+1'; since the movement process of card n+1 is a dynamic process, and the moving distance is related to the sliding coefficient a; therefore, after card n+1 moves, the distance between the upper left corner vertex A1' of card n' and the upper left corner vertex A2' of card n+1' is (h2+h3)*(1-a); therefore, the interval between the upper left corner vertex and the initial position of the first fully visible card is K1*h1+(h2+h3)*(1-a), that is, the position of the first fully visible card = K1*h1+(h2+h3)*(1-a); K1 represents the number of stacking layers in the top stacking area of ​​the display screen; h1 represents the stacking card interval; h2 represents the height of a single card; h3 represents the visible card interval; a represents the sliding coefficient; for example, Fig. 9 As shown in (a) in , K1 = 3. Fig. 9 As shown in (d) in FIG. 1 , before the position of the card changes, the distance between the upper left corner vertex A1 of card n and the upper left corner vertex A3 of card n-1 is h1, and an upward sliding operation is detected; Fig. 9 As shown in (e), in response to the upward sliding operation on the display screen, the position of card n moves to the position of card n', and the position of card n-1 moves to the position of card n-1'; since the movement process of card n is a dynamic process, and the moving distance is related to the sliding coefficient a; therefore, after card n moves, the distance between the upper left corner vertex A1' of card n' and the upper left corner vertex A3' of card n-1' is a*h1. Fig. 9 As shown in (f) in FIG. 1 , before the position of the card changes, the distance between the upper left corner vertex A4 of card m and the upper left corner vertex A5 of card m+1 is h1, and an upward sliding operation is detected; Fig. 9 As shown in (g), in response to the upward sliding operation on the display screen, the position of card m moves to the position of card m', and the position of card m+1 moves to the position of card m+1'; since the movement process of card m+1 is a dynamic process, and the moving distance is related to the sliding coefficient a; therefore, after card m+1 moves, the distance between the upper left corner vertex A4' of card m' and the upper left corner vertex A5' of card m+1' is (1-a)*h1.

[0171] In one example, if Fig. 9 As shown in (a), the number of stacking layers in the top stacking area of ​​the display screen may be equal to the number of stacking layers in the bottom stacking area of ​​the display screen.

[0172] In an embodiment of the present application, the card set control manager includes a layout manager; the layout manager can obtain the cumulative total sliding distance of the user's sliding operation; calculate the position information of each card in the card set according to the cumulative total sliding distance, and when multiple cards in the card set are expanded and displayed in an electronic device, an animation effect of stacking the cards at the top and bottom of the display screen can be achieved, so that the user can efficiently obtain the information of one or more cards, improving the user experience. S206, the layout manager sends the card identification, the sorting of the card identification, the content information of the card, and the position information of the card to the View framework module.

[0173] Optionally, a position information interface is provided in the View framework module, and the View framework module can receive the position information of the card through the position information interface.

[0174] Optionally, the View framework module may receive the card identification, the order of the card identification and the content information of the card in any existing manner, and the embodiment of the present application does not impose any limitation on this.

[0175] S207, the View framework module draws the card display interface of the current frame according to the card identifiers, the order of the card identifiers, the card content information and the card position information.

[0176] Optionally, after the View framework module draws the card display interface of the current frame, the View framework module may trigger the display screen of the electronic device to display the card display interface of the current frame.

[0177] It should be noted that Figure 8 S201 to S207 may be a process of generating a frame of card display interface; based on periodically sampling the sliding distance of the sliding operation, the electronic device may perform the above steps multiple times to generate multiple frames of card display interface; display multiple frames of card display interface, that is, display card animation effects; the moment of detecting the sliding operation is related to the sampling rate of the display screen.

[0178] Exemplarily, the View framework module can draw the card animation effect according to any existing algorithm; in the solution of the present application, the View framework module can obtain the position information of the card to achieve the animation effect of the cards being stacked up and down simultaneously on the display screen.

[0179] In an embodiment of the present application, the card set control manager includes a layout manager; the layout manager can obtain the cumulative total sliding distance of the user's sliding operation; calculate the position information of each card in the card set based on the cumulative total sliding distance; the animation effect architecture module controls the View architecture module to draw the card display interface of the current frame according to the card identification, sorting of the card identification, card content information and card location information of each card in the card set; display multiple frames of card display interface, that is, display the animation effect of the card set; when multiple cards in the card set are expanded and displayed in an electronic device, an animation effect of the cards stacking at the top and bottom of the display screen can be achieved, so that users can efficiently obtain the information of one or more cards and improve the user experience.

[0180] Implementation method 2

[0181] In one implementation, when multiple cards in a card set are expanded and displayed on an electronic device, an animation effect of the cards being stacked at the top and bottom of the display screen can be achieved; in addition, the cards in the card set can also produce distortion of the card angle in the process of being displayed from a stacked state to an expanded state; for example, when the electronic device detects a click operation, that is, at 0ms, the card is in a 2D state (that is, the angle of the card has not changed); within the preset duration of the click operation, the card changes from a 2D state to a 3D state; it can be understood that the card produces a distortion angle during the display process; when the click operation exceeds the preset duration, the card is completely distorted into a 3D state.

[0182] For example, Fig.10 is a schematic diagram of an interface for displaying a card provided in an embodiment of the present application; Fig.10 The interface shown in (a) may be a display interface of the negative one screen of an electronic device, such as Fig.10 As shown in (a) in FIG. 1 , the display interface of the negative one screen includes card 00 and information about the number of steps today; card 00 is displayed as a card on the top layer, and multiple cards can be stacked below card 00; Fig.10 As shown in (b) in FIG. 1 , a sliding operation on card 00 is detected; Fig.10 As shown in (c) in the figure, in response to the upward sliding operation on card 00, cards 00, 01, 02, 03 and 04 are displayed in the expanded state; wherein the cards are all distorted at a certain angle, and card 04 is located below card 03; Figure 3 As shown in (d) in FIG. 1 , a sliding operation on card 01 is detected; Fig.11 As shown in (a), in response to the upward sliding operation on card 01, cards 00, 01, 02, 03, 04 and 05 are displayed in the expanded state; wherein card 00 is located below card 01, and card 05 is located below card 04; Fig.11 As shown in (b) in FIG. 1 , a sliding operation on card 02 is detected; Fig.11 As described in (c) in the figure, in response to the upward sliding operation on card 02, cards 01, 02, 03, 04 and 05 in the expanded state are displayed; wherein card 01 is located below card 02; Fig.11 As shown in (d) in FIG. 1 , a sliding operation on card 05 is detected; Figure 5 As shown, in response to the upward sliding operation on card 05, the cards are in a stacked state and the card displayed on the top layer is card 02; it should be noted that the card displayed on the top layer is as shown in FIG. Fig.10 The first fully displayed card in the display interface of (d) is card 02.

[0183] It should be noted that when it is detected that the sliding distance of the sliding operation on the card 00 is greater than the preset distance (for example, 2 / 3 of the height of a single card), in response to the sliding operation on the card 00, the following is displayed: Fig. 9 In the interface shown in (c), multiple expanded cards are displayed.

[0184] In an embodiment of the present application, when a plurality of cards in an expanded state are displayed on a display screen of an electronic device, a stacked card effect may be displayed at the top of the display screen, such as Fig.11 The card 00 and the card 01 shown in (a) in FIG. 1 can be stacked at the bottom of the display screen, such as Fig.11 Card 04 and card 05 shown in (a); the method for displaying cards provided in the embodiment of the present application can, on the one hand, avoid the user from frequently turning pages among multiple stacked cards, and the operation is simple; it can display the information of multiple cards on the display screen at the same time, thereby improving the user experience; on the other hand, when displaying multiple cards, the cards all produce a certain angle of distortion; in the embodiment of the present application, an angle manager can be used to manage the angle information of multiple cards in the card set, which can save the resources of the electronic device to a certain extent.

[0185] Fig.12 It is a schematic diagram of a software system of another electronic device provided in an embodiment of the present application.

[0186] like Fig.12 As shown, the electronic device adopts a layered software system, which is divided into several layers, each layer has a clear role and division of labor. The layers communicate with each other through software interfaces. In some embodiments, the software system can be divided into four layers, from top to bottom, namely, the application layer, the application framework layer, the Android runtime (Android Runtime) and the system library, and the kernel layer.

[0187] Exemplarily, the application layer may include a page manager in the electronic device; the page manager may be used to manage location information of different components in the page.

[0188] Exemplarily, different pages in an electronic device may correspond to different page managers; for example, the negative one screen page manager may be used to manage the location information of different components in the negative one screen; the desktop page manager may be used to manage the location information of different components in the desktop.

[0189] Exemplarily, the application framework layer provides an application programming interface (API) and a programming framework for the application programs of the application layer. The application framework layer may include some predefined functions.

[0190] In one example, in an embodiment of the present application, the application framework layer includes: a card set control manager, a navigation point control manager, a View architecture module, and an animation effect architecture management module, etc.; wherein the card set control manager is used to manage the relevant controls of the card set; the navigation point control manager is used to manage the navigation point controls; the View architecture module is used to draw the animation effects of the cards in the card set; the animation effect architecture management module is used to control the View architecture module to draw the animation effects of the cards in the card set; wherein the animation effects of the cards in the card set include but are not limited to: card movement, card size scaling, card transparency change, and card angle change, etc.; the card set control manager includes: an angle manager, a layout manager, a data adapter, a state change animation manager, and a state manager; wherein the angle manager is used to calculate the angle information of the cards in the card set; the angle manager includes a timer; the layout manager is used to manage the position and size of the cards in the card set; the data adapter is used to manage and transmit the identification of the cards in the card set, the content information of the cards, and the sorting of the cards; the state change animation manager is used to manage the transition state animation of the cards in the card set; the state manager is used to manage the state of the card set; wherein the state of the card set includes a stacked state, an expanded state, a contracted state, and a stretched state.

[0191] Optionally, a position information interface is provided in the View framework module, and the position information of the card is transmitted through the position information interface.

[0192] Exemplarily, the system layer includes a surface manager, a media library, a 3D graphics processing library (e.g., an open graphics library for embedded systems), and a 2D graphics engine, etc.; wherein the surface manager is used to manage the display subsystem and provides the fusion of 2D layers and 3D layers for multiple applications; the media library supports playback and recording of multiple audio formats, playback and recording of multiple video formats, and static image files. The media library can support multiple audio and video encoding formats, such as: MPEG4, H.264, moving picture experts group audio layer III (MP3), advanced audio coding (AAC), adaptive multi-rate (AMR), joint photographic experts group (JPG) and portable network graphics (PNG), etc.; the 3D graphics processing library can be used to implement 3D graphics drawing, image rendering, synthesis and layer processing; the 2D graphics engine is a drawing engine for 2D drawing.

[0193] Exemplarily, the kernel layer is a layer between hardware and software. The kernel layer may include driver modules such as display driver, camera driver, audio driver, and sensor driver.

[0194] Optionally, Fig.12 The connection relationship between the layers shown is only a schematic illustration and does not constitute a limitation on the connection relationship between the software architecture layers of the electronic device.

[0195] Exemplarily, the method for displaying cards provided in the embodiment of the present application can be implemented between various managers or modules in the application architecture layer; for example, after the application layer detects the user's operation, it can send card-related information to the card set control manager in the application architecture layer; for example, the page manager can send the card size, card quantity, card ID, card ID sorting and card content information to the layout manager in the card set control manager; the layout manager can send the card ID and card location information to the angle manager; optionally, the data interaction process between the various managers in the card set control manager can refer to the subsequent Fig.13 Related description.

[0196] Combine the following Fig.13 The method of implementing the display card of the present application and the data flow interaction between various managers in the application architecture layer of the electronic device are described in detail. Fig.13 As shown, the method includes steps S401 to S421; steps S401 to S421 are described in detail below.

[0197] S401: The page manager detects a swipe-up operation on the topmost card in a card set.

[0198] For example, Figure 3 As shown in (d) in the figure, the page manager of the negative one screen detects a swipe up operation on card 0, which is the topmost card in the card set; the swipe up operation's swiping distance is greater than a preset distance, for example, the preset distance may be 2 / 3 of the height of a single card.

[0199] For example, if the card set is located on the desktop, the page manager of the desktop can detect a swipe-up operation on the topmost card in the card set.

[0200] In one example, the swipe up operation may also be a long press operation, or other operations that trigger display of an expanded card.

[0201] In one implementation, when a user expects to view one or several cards in a stacked card set, the page manager detects a swipe up operation on the top card in the card set, and in response to the swipe operation on the top card, the card set is adjusted from a stacked state to an expanded state, and multiple cards can be displayed on the display screen; if the user expects to flip through the information in multiple cards, the page manager can detect the user's swiping operation on the display screen; if the user stops flipping through the information of multiple cards on the display screen, the page manager can detect a release event on the display screen.

[0202] S402: In response to the slide-up operation, the page manager sends the card size, the number of cards, the card identifiers, the order of the card identifiers, and the content information of the cards to the layout manager.

[0203] Alternatively, see Figure 8 The relevant description of S202 will not be repeated here.

[0204] S403: The page manager detects a down event.

[0205] Exemplarily, a plurality of cards in an expanded state are displayed on the display screen, and the page manager detects a touch operation on the expanded card. For example, the down event may be an event of detecting that a user clicks on the expanded card; or the down event may be an event of detecting that a user long presses on the expanded card, etc.

[0206] For example, Fig.12 As shown, if the page manager detects a touch event, the page manager can send information to the card set control manager in the application framework layer, and the card set control manager sends information to the angle manager; this instruction is used to represent the detection of a down event acting on an expanded card, and the angle manager is triggered to update the timer status through this information.

[0207] S404: The page manager sends information of a down event to the layout manager.

[0208] Exemplarily, the down event information is used to indicate that the page manager detects a down event of the user.

[0209] S405. The layout manager sends information of a down event to the angle manager.

[0210] S406: The angle manager updates the timer status and calculates the angle change degree a1.

[0211] It should be understood that the angle change degree a1 is used to characterize the degree of distortion of the cards in the card set after a touch operation is detected; for example, within a preset duration of detecting a touch event on an unfolded card, the angle change degree a1 ranges from 0% to 100%.

[0212] S407: The page manager detects a sliding event.

[0213] Exemplarily, a plurality of cards in an expanded state are displayed on the display screen, and the page manager detects a sliding event on the cards in the expanded state.

[0214] In one example, the sliding event can be as follows Figure 8 The sliding operation shown in S203.

[0215] Alternatively, see Figure 8 The relevant description of S203 will not be repeated here.

[0216] S408: The page manager sends the sliding distance to the layout manager.

[0217] Alternatively, see Figure 8 The relevant description of S206 will not be repeated here.

[0218] S409: The layout manager obtains the accumulated total sliding distance based on the sliding distance, and calculates the position information of each card in the card set according to the accumulated total sliding distance.

[0219] Optionally, the layout manager calculates the position information of each card in the card set. See Figure 8 S205 and Fig. 9 The relevant description will not be repeated here.

[0220] S410: The layout manager sends the card identifier, the order of the card identifiers, the card content information, and the card location information to the View architecture module.

[0221] Optionally, the layout manager can also send the card size and number of cards to the View framework module.

[0222] For example, the card identifiers, the order of the card identifiers and the content information of the cards can be found in Figure 8 For the relevant description of S202, the location information of the card can refer to the relevant description of S205, which will not be repeated here.

[0223] Optionally, a position information interface is provided in the View framework module, and the View framework module can receive the position information of the card through the position information interface.

[0224] Optionally, the View framework module may receive the card identification, the order of the card identification and the content information of the card in any existing manner, and the embodiment of the present application does not impose any limitation on this.

[0225] S411. The layout manager sends the card location information and card identifier to the angle manager.

[0226] Exemplarily, when the angle manager calculates the angle information of each card, the position information and card identification of the card can be periodically obtained; therefore, the angle manager can obtain the position information and card identification of the slice from the layout manager.

[0227] S412. The angle manager calculates the current angle A corresponding to each card identifier in the card set according to the angle change degree a1 and the position information of the card.

[0228] Exemplarily, in an embodiment of the present application, the current angle A of the card is positively correlated with the maximum distortion angle of the card and the angle change degree a1; the maximum distortion angle of the card is positively correlated with the center point interval, and the center point interval is the interval between the center position of the card and the center position of multiple cards displayed on the display screen.

[0229] For example, if the position of a card is far from the center position of multiple cards displayed on the display screen, the maximum distortion angle of the card is large; if the position of the card is close to the center position of multiple cards displayed on the display screen, the maximum distortion angle of the card is small.

[0230] The following is an example of the calculation process of the current angle A of the card.

[0231] For example, the current angle A of card n = the maximum distortion angle corresponding to the current position of card n * a1; wherein the maximum distortion angle of card n can be used to characterize the maximum distortion angle of card n; a1 represents the degree of change in the angle of card n at the current moment from the initial angle to the maximum distortion angle.

[0232] The following is an example of the calculation process of the maximum distortion angle of the card.

[0233] For example, the maximum distortion angle of card n=F (y-axis coordinate value of the position center of card n); wherein the y-axis may be the y-axis of the display screen coordinate system.

[0234] In one example, the maximum distortion angle of card n = (y-axis coordinate value of the center point of card n - the center position of the card set) / half the overall height of the card set * preset angle; wherein the center position of the card set refers to the position of the center points of the multiple expanded cards displayed on the display screen; the overall height of the card set refers to the distance between the top of the first card visible on the display screen to the bottom of the last card visible on the display screen.

[0235] For example, the preset angle may be 15 degrees.

[0236] Optionally, the above example uses a preset angle of 15 degrees; the preset angle may be a pre-configured angle, and the preset angle may also be 10 degrees, 11 degrees, 12 degrees, 13 degrees, 14 degrees or 16 degrees, etc., and the present application does not impose any limitation on this.

[0237] Exemplarily, within the preset time length of detecting a down event of an expanded card, the range of a1 is: 0% to 100%; at the moment of detecting a down event, a1 is 0%; after a preset time length after the moment of detecting the down event, a1 is 100%; wherein, the preset time length may be 200ms, i.e., at the moment of detecting the down event, a1 is 0%; 200ms after the moment of detecting the down event, a1 is 100%; i.e., after 200ms, the card completely reaches a tilted state; within 0 to 200ms, a1 is a changing value.

[0238] In one example, the current angle A of a card displayed at the center of the display screen may be zero, the current angle A of a card displayed above the center may be greater than 0, and the current angle A of a card displayed below the center may be greater than 0.

[0239] S413. The angle manager sends the current angle A corresponding to each card identifier to the layout manager.

[0240] Exemplarily, after the angle manager calculates the current angle A of each card in the card set, the angle manager may send the current angle A corresponding to each card identifier to the layout manager.

[0241] For example, card 0, card 1, card 2 and card 3 are displayed in order from top to bottom on the display screen; the card identifiers include identifier 0, identifier 1, identifier 2 and identifier 3; identifier 0 identifies card 0, and the current angle A of card 0 is 30 degrees; identifier 1 identifies card 1, and the current angle A of card 1 is 15 degrees; identifier 2 identifies card 2, and the current angle A of card 2 is 15 degrees; identifier 3 identifies card 3, and the current angle A of card 3 is 30 degrees; the angle manager sends information to the layout manager, and the information may include: identifier 0-30 degrees, identifier 1-15 degrees, identifier 2-15 degrees, and identifier 3-30 degrees. Among them, for card 0, the current angle A is 30 degrees, which is used to represent that card 0 rotates 30 degrees toward the inside of the screen with the bottom edge of card 0 as the rotation axis; for card 1, the current angle A is 15 degrees, which is used to represent that card 1 rotates 15 degrees toward the inside of the screen with the bottom edge of card 1 as the rotation axis; for card 2, the current angle A is 15 degrees, which is used to represent that card 2 rotates 15 degrees toward the inside of the screen with the top edge of card 2 as the rotation axis; for card 3, the current angle A is 30 degrees, which is used to represent that card 3 rotates 30 degrees toward the inside of the screen with the top edge of card 3 as the rotation axis.

[0242] It should be noted that, for cards above the center position of multiple cards displayed on the display screen, the current angle A is used to represent the angle of rotation toward the inside of the screen with the bottom edge of the card as the rotation axis; for cards below the center position of multiple cards displayed on the display screen, the current angle A is used to represent the angle of rotation toward the inside of the screen with the top edge of the card as the rotation axis.

[0243] S414, the View architecture module draws the card display interface of the current frame according to the card identifier, the order of the card identifiers, the content information of the card, the position information of the card and the current angle A of the card.

[0244] Optionally, after the View framework module draws the card display interface of the current frame, the View framework module may trigger the display screen of the electronic device to display the card display interface of the current frame.

[0245] For example, Fig.12 As shown, the animation effect architecture module can control the View architecture module to draw the card display interface of the current frame according to the card identification of each card in the card set, the order of the card identification, the content information of the card, the position information of the card and the current angle A of the card; the View architecture module can trigger the electronic device to display a multi-frame card display interface, that is, to display the animation effect of the card set; in the scheme of the present application, the View framework module can obtain the position information of the card to achieve the animation effect of the cards being stacked up and down at the same time on the display screen; in addition, the View architecture module can obtain the current angle A of each card, and achieve the effect of changing the card angle based on the current angle A of each card.

[0246] S415: The page manager detects an up event.

[0247] Exemplarily, a plurality of cards in an expanded state are displayed on the display screen, and the page manager detects an up event for the expanded card; for example, it detects that the user's finger leaves the card. S416: The page manager sends information of the up event to the layout manager.

[0248] The information of the up event is used to indicate that the page manager detects the up event.

[0249] S417. The layout manager sends information about the up event to the angle manager.

[0250] S418. The layout manager sends the card location information and card identifier to the angle manager.

[0251] Exemplarily, when the angle manager calculates the angle information of each card, the position information and card identification of the card can be periodically obtained; therefore, the angle manager can obtain the position information and card identification of the slice from the layout manager.

[0252] S419. The angle manager updates the timer status and calculates the angle change degree a2; based on the angle change degree 2 and the position information of the card, calculates the current angle B corresponding to each card identifier.

[0253] Exemplarily, the angle change degree a2 represents the angle change degree of the card at the current moment from the maximum distortion angle to the initial angle; for example, within the preset duration of detecting the up event, the angle change degree a2 varies from 100% to 0%.

[0254] Optionally, the implementation method of S419 can refer to the relevant description of S412. The difference between S419 and S442 is that in S419, the current angle B of each card in the card set is calculated according to the angle change degree a2 and the position information of the card; that is, the angle change degree a1 in S412 can be replaced with the angle change degree a2 to obtain the current angle B of each card; refer to the relevant description of S412, which will not be repeated here.

[0255] S420. The angle manager sends the current angle B corresponding to each card identifier to the View architecture module.

[0256] Exemplarily, after the angle manager calculates the current angle B of each card in the card set, the angle manager may send the current angle B corresponding to each card identifier to the layout manager.

[0257] Optionally, refer to the relevant description of S413, which will not be repeated here.

[0258] S421. The View architecture module draws the card display interface of the current frame according to the card identifier, the order of the card identifiers, the content information of the card, the position information of the card and the current angle B of the card.

[0259] Optionally, after the View framework module draws the card display interface of the current frame, the View framework module may trigger the display screen of the electronic device to display the card display interface of the current frame.

[0260] For example, Fig.12 As shown, the animation effect architecture module can control the View architecture module to draw the card display interface of the current frame according to the card identification of each card in the card set, the order of the card identification, the content information of the card, the position information of the card and the current angle B of the card; the View architecture module can trigger the electronic device to display a multi-frame card display interface, that is, to display the animation effect of the card set; in the scheme of the present application, the View framework module can obtain the position information of the card to achieve the animation effect of the cards being stacked up and down at the same time on the display screen; in addition, the View architecture module can obtain the current angle B of each card, and achieve the effect of changing the card angle based on the current angle B of each card.

[0261] In an embodiment of the present application, on the one hand, when multiple cards in a card set are expanded and displayed in an electronic device, an animation effect of stacking the cards at the top and bottom of the display screen can be achieved, so that the user can efficiently obtain the information of one or more cards, thereby improving the user experience; on the other hand, in an embodiment of the present application, the angle information of multiple cards in the card set can be managed by an angle manager, which can save the resources of the electronic device to a certain extent.

[0262] For example, the above Fig.13 The method for displaying cards shown in the figure manages the angle information of multiple cards in the card set through an angle manager; optionally, in one implementation, the card set control manager may include multiple angle managers, and one angle manager in the multiple angle managers is used to manage the angle information of a card in the card set. The implementation method for calculating the current angle of the card can be referred to. Fig.13 The relevant description in will not be repeated here.

[0263] Fig.14 is a schematic flow chart of a method for displaying a card provided in an embodiment of the present application. The method can be Figure 7 or Fig.12 The software architecture of the electronic device shown is executed; the method includes S510 to S550, and S510 to S550 are described in detail below.

[0264] S510: Display a first interface of a first application.

[0265] The first interface includes a card display area, the card display area includes multiple cards, and the card display area displays the topmost card among the multiple cards.

[0266] For example, Figure 3 As shown in (a), the first application may refer to a negative one screen application; the first interface may refer to a display interface of the negative one screen.

[0267] Exemplarily, the first application may refer to a desktop application, and the first interface may refer to a display interface of the desktop.

[0268] S520: In response to a first operation applied to the card display area, display a second interface by expanding multiple cards in the card display area.

[0269] The second interface includes a plurality of fully visible first cards and a plurality of stacked second cards, and the stacked display refers to displaying partial card content information in the cards.

[0270] For example, Figure 3 As shown in (b) in FIG. 1 , a first operation (eg, a sliding operation) acting on the card display area is detected; as shown in FIG. Figure 3 As shown in (c) , in response to the first operation applied to the card display area, the second interface is displayed by expanding multiple cards in the card display area.

[0271] For example, fully visible means that all card content information of the card is fully displayed, such as Figure 3 Card 0, card 1, card 2 or card 3 shown in (c) in FIG. 1 ; stacked display refers to displaying part of the card content information in the card; Figure 3 Card 4 shown in (c) of FIG. Figure 4 Card 0 or card 5 shown in (a) in the figure.

[0272] S530: In response to a sliding operation on the second interface, obtain distance information of the sliding operation.

[0273] For example, Figure 8 S205 or Fig.13 As shown in S409, the distance information of the sliding operation may refer to the accumulated total sliding distance of the sliding operation; see S205 or S409 for related descriptions, which will not be repeated here.

[0274] S540: Determine, according to distance information of the sliding operation, position information of each card in the plurality of fully visible third cards and the plurality of stacked fourth cards.

[0275] The plurality of third cards are the same as or different from the plurality of first cards, and the plurality of second cards are the same as or different from the plurality of fourth cards.

[0276] S550. Display multiple third cards in a completely visibly manner in the third interface according to the position information of each card, and display multiple fourth cards in a stacked manner.

[0277] In one implementation, determining the position information of each card in the plurality of fully visible third cards and the plurality of stacked fourth cards according to the distance information of the sliding operation includes:

[0278] A sliding coefficient is obtained according to the distance information of the sliding operation, wherein the sliding coefficient is used to represent a ratio between a first value and the first distance information, the first value is used to represent a remainder obtained by performing a modulo operation on the distance information of the sliding operation on the first distance information, and the first distance information is used to represent a preset interval between top edges of two adjacent completely visible cards;

[0279] According to the distance information and the sliding coefficient of the sliding operation, the position information of each card in the multiple third cards that are completely visible and the multiple fourth cards that are stacked and displayed is determined.

[0280] For example, see Figure 8 In the relevant description of S205, the sliding coefficient may refer to the sliding coefficient a in S205; see Fig. 9 , the first distance information may refer to Fig. 9 The interval between the upper left corner vertex A1 and the upper left corner vertex A2 shown in (b); or; Fig. 9 The interval between the upper left corner vertex A1' and the upper left corner vertex A2' shown in (c); or Fig. 9 The distance between the upper left corner vertex A3 and the upper left corner vertex A1 shown in (d); or; Fig. 9 The interval between the upper left corner vertex A3' and the upper left corner vertex A1' shown in (e); or Fig. 9 The interval between the upper left corner vertex A4 and the upper left corner vertex A5 shown in (f); or; Fig. 9 The interval between the upper left corner vertex A4' and the upper left corner vertex A5' shown in (g) in FIG. 1 is not repeated here.

[0281] In one implementation, a plurality of fully visible third cards are arranged vertically, and a sliding coefficient is obtained according to distance information of the sliding operation, including:

[0282] Obtaining a sliding coefficient according to the distance information of the sliding operation, the preset card height information and the first interval information;

[0283] The first interval information is used to represent the preset interval between two adjacent completely visible cards.

[0284] For example, Figure 4 As shown in (a), multiple third cards are arranged vertically; see Figure 8 In the related description of S205, the card height may refer to the height of a single card h2; the first spacing information may refer to the visible card spacing h3, which will not be repeated here.

[0285] In one implementation, determining, according to distance information of the sliding operation, position information of each card in the plurality of third cards that are fully visible and displayed and the plurality of fourth cards that are stacked and displayed, includes:

[0286] performing an upward rounding operation on the first distance information according to the distance information of the sliding operation to obtain an identifier of a first completely visible third card among multiple completely visible third cards;

[0287] Obtaining a first stacking quantity according to the distance information of the sliding operation, the identifier of the first completely visible third card and the first preset threshold, where the first stacking quantity is used to represent the number of cards of the plurality of fourth cards stacked and displayed in the first display area, where the first display area is the top area of ​​the third interface;

[0288] The position information of the first completely visible third card is obtained according to the first stack quantity, the first distance information, the sliding coefficient and the second interval information, and the second interval information is used to represent the interval between two adjacent cards in the preset stack display.

[0289] For example, see Figure 8 S205 and Fig. 9 , the first stacking quantity may refer to the number of stacking layers K1 in the top stacking area; the second spacing information may refer to the stacking card spacing h1 of the cards located in the top stacking area of ​​the display screen, or the stacking card spacing h1 of the cards located in the bottom stacking area of ​​the display screen; Fig. 9 As shown in (a) in , the first fully visible card may refer to card n.

[0290] In one implementation, obtaining the position information of the first completely visible third card according to the first stack quantity, the first distance information, the sliding coefficient and the second interval information includes:

[0291] The position information of the first fully visible third card is obtained according to the following formula:

[0292] The position information of the first completely visible third card = the first stack quantity * the second interval information + the first distance information * (1-sliding coefficient);

[0293] The first distance information is the sum of the preset card height information and the first interval information.

[0294] In one implementation, the method further includes:

[0295] The position information of each third card among the plurality of third cards except the first completely visible third card is obtained according to the position information of the first completely visible third card and the first distance information.

[0296] For example, Figure 4 As shown in (a), the first completely visible card may refer to card 1; the third cards among the plurality of third cards except the first completely visible third card may refer to card 2, card 3 and card 4.

[0297] In one implementation, obtaining the position information of each third card among the plurality of third cards except the first completely visible third card according to the position information of the first completely visible third card and the first distance information includes:

[0298] The position information of each third card is obtained according to the following formula:

[0299] The location information of card A = (the identification of card A - the identification of the first completely visible third card) * the first distance information + the location information of the first completely visible third card;

[0300] Among them, card A is any third card among each third card.

[0301] For example, see Figure 8 S205 and Fig. 9 , card A can refer to other fully visible cards.

[0302] In one implementation, the plurality of fourth cards displayed in a stacked manner include a plurality of fourth cards displayed in a stacked manner in a second display area, where the second display area is a bottom area of ​​the third interface, and further includes:

[0303] According to the position information of the first completely visible third card, the first distance information, the sliding coefficient and the second interval information, the position information of the plurality of fourth cards stacked and displayed in the second display area is obtained.

[0304] For example, Figure 4 As shown in (a) in FIG. 5 , the multiple third cards including the last fully visible third card may refer to card 4 .

[0305] In one implementation, obtaining a plurality of fourth cards stacked and displayed in the second display area according to the position information of the first completely visible third card, the first distance information, the sliding coefficient, and the second interval information includes:

[0306] The position information of the plurality of fourth cards stacked and displayed in the second display area is obtained according to the following formula:

[0307] The position information of card B = the position information of the last completely visible third card + the first distance information * the sliding coefficient + (the identifier of card B - the identifier of the last completely visible third card - the sliding coefficient) * the second interval information;

[0308] Among them, card B is any fourth card among multiple fourth cards stacked and displayed in the second display area.

[0309] For example, see Figure 8 S205 and Fig. 9 In the related description, card B may refer to a card in the stacking area at the bottom of the display screen.

[0310] In one implementation, the method further includes:

[0311] According to the first stacking quantity, the second interval information and the sliding coefficient, position information of a plurality of fourth cards stacked and displayed in the first display area is obtained.

[0312] In one implementation, obtaining position information of a plurality of fourth cards stacked and displayed in the first display area according to the first stack quantity, the second interval information, and the sliding coefficient includes:

[0313] The position information of the plurality of fourth cards stacked and displayed in the first display area is obtained according to the following formula:

[0314] The position information of card C = the first stack quantity * the second interval information - (the identification of the first completely visible third card - the identification of card C - 1 + the sliding coefficient) * the second interval information;

[0315] The card C is any fourth card among a plurality of fourth cards stacked and displayed in the first display area.

[0316] For example, see Figure 8 S205 and Fig. 9 In the related description, card C may refer to a card in the top stacking area of ​​the display screen.

[0317] In one implementation, the method further includes:

[0318] In response to a down event in the sliding operation on the second interface, a current first angle coefficient of each card is obtained, where the current first angle coefficient of each card is used to characterize the degree of change of each card from a preset initial angle to a current maximum distortion angle of each card, where the current maximum distortion angle of each card is related to current position information of each card;

[0319] According to the current maximum distortion angle of each card and the current first angle coefficient, the current angle of each piece is obtained.

[0320] For example, see Fig.13 In the related description, the current first angle coefficient may refer to the angle change degree a1 in S406; the current angle of each slice may refer to the current angle A in S412.

[0321] In one implementation, the current angle of each card is obtained according to the following formula:

[0322] The current angle of card D = the maximum distortion angle of card D * the first angle coefficient of card D.

[0323] In one implementation, at the moment when a down event in the sliding operation is detected, the first angle coefficient is 0; at a first preset time after the down event in the sliding operation is detected, the first angle coefficient is 1.

[0324] In one implementation, the method further includes:

[0325] In response to an up event in a sliding operation on the second interface, a current second angle coefficient of each card is obtained, where the current second angle coefficient of each card is used to characterize a degree of change of each card from a maximum distortion angle to a preset initial angle;

[0326] According to the current maximum distortion angle of each card and the current second angle coefficient, the current angle of each piece is obtained.

[0327] For example, see Fig.13 In the related description, the current second angle coefficient may refer to the angle change degree a2 in S419; the current angle of each slice may refer to the current angle B in S419.

[0328] In one implementation, at the moment when the up event in the sliding operation is detected, the second angle coefficient is 1; at a second preset time after the up event in the sliding operation is detected, the second angle coefficient is 0.

[0329] In an embodiment of the present application, in response to a sliding operation acting on the second interface, the electronic device can obtain distance information of the sliding operation; based on the distance information of the sliding operation, the electronic device can determine the position information of each of the multiple fully visible third cards and the multiple stacked fourth cards; based on the position information of each card, the multiple third cards are displayed fully visibly in the third interface, and the multiple fourth cards are displayed in a stacked manner; in the scheme of the present application, the electronic device can calculate the position information of each of the multiple fully visible third cards and the stacked fourth cards based on detecting the sliding operation acting on the second interface, so as to realize that the card position changes with the change of the finger position of the sliding operation; in addition, multiple fourth cards can be stacked and displayed on the display screen, so that the user can efficiently obtain the information of one or more cards, thereby improving the user experience.

[0330] It should be understood that the above examples are intended to help those skilled in the art understand the embodiments of the present application, rather than to limit the embodiments of the present application to the specific numerical values ​​or specific scenarios illustrated. Those skilled in the art can obviously make various equivalent modifications or changes based on the above examples, and such modifications or changes also fall within the scope of the embodiments of the present application.

[0331] Fig.15 A hardware system of an electronic device suitable for the present application is shown.

[0332] The electronic device 100 can be a mobile phone, a smart screen, a tablet computer, a wearable electronic device, an in-vehicle electronic device, an augmented reality (AR) device, a virtual reality (VR) device, a laptop computer, an ultra-mobile personal computer (UMPC), a netbook, a personal digital assistant (PDA), a projector, etc. The embodiment of the present application does not impose any restrictions on the specific type of the electronic device 100.

[0333] Exemplarily, the electronic device 100 may include a processor 110, an external memory interface 120, an internal memory 121, a universal serial bus (USB) interface 130, a charging management module 140, a power management module 141, a battery 142, an antenna 1, an antenna 2, a mobile communication module 150, a wireless communication module 160, an audio module 170, a speaker 170A, a receiver 170B, a microphone 170C, an earphone interface 170D, a sensor module 180, a button 190, a motor 191, an indicator 192, a camera 193, a display screen 194, and a subscriber identification module (SIM) card interface 195, etc. The sensor module 180 may include a pressure sensor 180A, a gyroscope sensor 180B, an air pressure sensor 180C, a magnetic sensor 180D, an acceleration sensor 180E, a distance sensor 180F, a proximity light sensor 180G, a fingerprint sensor 180H, a temperature sensor 180J, a touch sensor 180K, an ambient light sensor 180L, a bone conduction sensor 180M, etc.

[0334] It should be noted that Fig.15 The structure shown does not constitute a specific limitation on the electronic device 100. In other embodiments of the present application, the electronic device 100 may include Fig.15 More or fewer components than those shown, or the electronic device 100 may include Fig.15 Combinations of some of the components shown, or the electronic device 100 may include Fig.15 Subassemblies of some of the components shown. Fig.15 The components shown may be implemented in hardware, software, or a combination of software and hardware.

[0335] Exemplarily, the processor 110 may include one or more processing units. For example, the processor 110 may include at least one of the following processing units: an application processor (AP), a modem processor, a graphics processor (GPU), an image signal processor (ISP), a controller, a video codec, a digital signal processor (DSP), a baseband processor, and a neural-network processing unit (NPU). Different processing units may be independent devices or integrated devices.

[0336] Exemplarily, the controller may generate an operation control signal according to the instruction operation code and the timing signal to complete the control of fetching and executing instructions.

[0337] Exemplarily, a memory may also be provided in the processor 110 for storing instructions and data. In some embodiments, the memory in the processor 110 is a cache memory. The memory may store instructions or data that the processor 110 has just used or cyclically used. If the processor 110 needs to use the instruction or data again, it may be directly called from the memory. This avoids repeated access, reduces the waiting time of the processor 110, and thus improves the efficiency of the system.

[0338] For example, in an embodiment of the present application, the processor 110 may execute: displaying a first interface of a first application, the first distance information first interface including a card display area, the first distance information card display area including multiple cards, and the first distance information card display area displaying the topmost card among the multiple cards of the first distance information; in response to a first operation applied to the first distance information card display area, displaying a second interface by expanding the multiple cards of the first distance information in the first distance information card display area, the first distance information second interface including multiple first cards that are fully visible and multiple second cards that are displayed in a stacked manner, wherein the stacked display of the first distance information refers to displaying part of the card content information in the card; in response to a sliding operation applied to the first distance information second interface, obtaining distance information of the sliding operation of the first distance information; determining, according to the distance information of the sliding operation of the first distance information, the position information of each of the multiple third cards that are fully visible and the multiple fourth cards that are displayed in a stacked manner, wherein the multiple third cards of the first distance information are the same as or different from the multiple first cards of the first distance information, and the multiple second cards of the first distance information are the same as or different from the multiple fourth cards of the first distance information; according to the position information of each card of the first distance information, displaying the multiple third cards of the first distance information in a fully visible manner in the third interface, and displaying the multiple fourth cards of the first distance information in a stacked manner.

[0339] Fig.15 The connection relationship between the modules shown is only a schematic illustration and does not constitute a limitation on the connection relationship between the modules of the electronic device 100. Optionally, the modules of the electronic device 100 may also adopt a combination of multiple connection modes in the above embodiments.

[0340] The wireless communication function of the electronic device 100 can be implemented through components such as the antenna 1, the antenna 2, the mobile communication module 150, the wireless communication module 160, the modem processor, and the baseband processor.

[0341] Antenna 1 and antenna 2 are used to transmit and receive electromagnetic wave signals. Each antenna in electronic device 100 can be used to cover a single or multiple communication frequency bands. Different antennas can also be reused to improve the utilization of antennas. For example, antenna 1 can be reused as a diversity antenna for a wireless local area network. In some other embodiments, the antenna can be used in combination with a tuning switch.

[0342] The electronic device 100 can realize the display function through the GPU, the display screen 194 and the application processor. The GPU is a microprocessor for image processing, which connects the display screen 194 and the application processor. The GPU is used to perform mathematical and geometric calculations for graphics rendering. The processor 110 may include one or more GPUs, which execute program instructions to generate or change display information.

[0343] Exemplarily, the motor 191 can generate vibrations. The motor 191 can be used for incoming call reminders or for touch feedback. The motor 191 can generate different vibration feedback effects for touch operations acting on different applications. The motor 191 can also generate different vibration feedback effects for touch operations acting on different areas of the display screen 194. Different application scenarios (for example, time reminders, receiving messages, alarm clocks, and games) can correspond to different vibration feedback effects. The touch vibration feedback effect can also support customization.

[0344] For example, the display screen 194 may be used to display images or videos.

[0345] Exemplarily, the electronic device 100 can implement a shooting function through an ISP, a camera 193, a video codec, a GPU, a display screen 194, and an application processor.

[0346] Exemplarily, the ISP is used to process the data fed back by the camera 193. For example, when taking a photo, the shutter is opened, and the light is transmitted to the camera photosensitive element through the lens, and the light signal is converted into an electrical signal. The camera photosensitive element transmits the electrical signal to the ISP for processing and converts it into an image visible to the naked eye. The ISP can perform algorithmic optimization on the noise, brightness and color of the image. The ISP can also optimize the exposure and color temperature of the shooting scene and other parameters. In some embodiments, the ISP can be set in the camera 193.

[0347] The camera 193 is used to capture still images or videos. The object generates an optical image through the lens and projects it onto the photosensitive element. The photosensitive element can be a charge coupled device (CCD) or a complementary metal-oxide-semiconductor (CMOS) phototransistor. The photosensitive element converts the optical signal into an electrical signal, and then passes the electrical signal to the ISP to be converted into a digital image signal. The ISP outputs the digital image signal to the DSP for processing. The DSP converts the digital image signal into an image signal in a standard red green blue (RGB), YUV or other format. In some embodiments, the electronic device 100 may include 1 or N cameras 193, where N is a positive integer greater than 1.

[0348] Exemplarily, the gyro sensor 180B can be used to determine the motion posture of the electronic device 100. In some embodiments, the angular velocity of the electronic device 100 around three axes (i.e., the x-axis, the y-axis, and the z-axis) can be determined by the gyro sensor 180B. The gyro sensor 180B can be used for anti-shake shooting. For example, when the shutter is pressed, the gyro sensor 180B detects the angle of the electronic device 100 shaking, calculates the distance that the lens module needs to compensate based on the angle, and allows the lens to offset the shaking of the electronic device 100 through reverse movement to achieve anti-shake. The gyro sensor 180B can also be used in scenes such as navigation and somatosensory games.

[0349] Exemplarily, in an embodiment of the present application, the gyro sensor 180B may be used to collect jitter information, and the jitter information may be used to indicate changes in the posture of the electronic device during shooting.

[0350] For example, the acceleration sensor 180E can detect the magnitude of the acceleration of the electronic device 100 in various directions (generally the x-axis, y-axis, and z-axis). When the electronic device 100 is stationary, the magnitude and direction of gravity can be detected. The acceleration sensor 180E can also be used to identify the posture of the electronic device 100 as an input parameter for applications such as horizontal and vertical screen switching and pedometers.

[0351] Exemplarily, the distance sensor 180F is used to measure the distance. The electronic device 100 can measure the distance by infrared or laser. In some embodiments, for example, in a shooting scene, the electronic device 100 can use the distance sensor 180F to measure the distance to achieve fast focusing.

[0352] Exemplarily, the ambient light sensor 180L is used to sense the brightness of the ambient light. The electronic device 100 can adaptively adjust the brightness of the display screen 194 according to the perceived ambient light brightness. The ambient light sensor 180L can also be used to automatically adjust the white balance when taking pictures. The ambient light sensor 180L can also cooperate with the proximity light sensor 180G to detect whether the electronic device 100 is in a pocket to prevent accidental touches.

[0353] Optionally, the present application also provides a computer program product, which, when executed by a processor, implements the method of any method embodiment in the present application.

[0354] Optionally, the computer program product may be stored in a memory, for example, a program, which is finally converted into an executable target file that can be executed by a processor after preprocessing, compiling, assembling and linking.

[0355] Optionally, the present application further provides a computer-readable storage medium on which a computer program is stored, and when the computer program is executed by a computer, the method of any method embodiment of the present application is implemented. The computer program can be a high-level language program or an executable target program.

[0356] The computer-readable storage medium is, for example, a memory. The memory may be a volatile memory or a nonvolatile memory, or the memory may include both a volatile memory and a nonvolatile memory. Among them, the nonvolatile memory may be a read-only memory (ROM), a programmable read-only memory (PROM), an erasable programmable read-only memory (EPROM), an electrically erasable programmable read-only memory (EEPROM), or a flash memory. The volatile memory may be a random access memory (RAM), which is used as an external cache. By way of example and not limitation, many forms of RAM are available, such as static RAM (SRAM), dynamic RAM (DRAM), synchronous DRAM (SDRAM), double data rate SDRAM (DDR SDRAM), enhanced SDRAM (ESDRAM), synchronous link DRAM (SLDRAM), and direct rambus RAM (DR RAM).

[0357] Those skilled in the art can clearly understand that, for the convenience and brevity of description, the specific working process of the above-described devices and equipment and the technical effects produced can refer to the corresponding processes and technical effects in the aforementioned method embodiments, and will not be repeated here.

[0358] In several embodiments provided in the present application, the disclosed systems, devices and methods can be implemented in other ways. For example, some features of the method embodiments described above can be ignored or not performed. The device embodiments described above are merely schematic, and the division of units is only a logical function division. There may be other division methods in actual implementation, and multiple units or components may be combined or integrated into another system. In addition, the coupling between the units or the coupling between the components may be direct coupling or indirect coupling, and the above coupling includes electrical, mechanical or other forms of connection.

[0359] It should be understood that in the various embodiments of the present application, the size of the serial number of each process does not mean the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiments of the present application.

[0360] In addition, the terms "system" and "network" are often used interchangeably in this article. The term "and / or" in this article is only a description of the association relationship of the associated objects, indicating that there can be three relationships. For example, A and / or B can mean: A exists alone, A and B exist at the same time, and B exists alone. In addition, the character " / " in this article generally indicates that the associated objects before and after are in an "or" relationship.

[0361] In short, the above are only preferred embodiments of the technical solution of this application, and are not intended to limit the protection scope of this application. Any modifications, equivalent replacements, improvements, etc. made within the spirit and principles of this application should be included in the protection scope of this application.< / hnstackitem>

Claims

1. A method for displaying a card, characterized in that: include: Display a first interface of a first application, wherein the first interface includes a card display area, the card display area includes a plurality of cards, and the card display area displays the topmost card among the plurality of cards; In response to a first operation applied to the card display area, a second interface is displayed by expanding the plurality of cards in the card display area, wherein the second interface includes a plurality of first cards that are fully visible and a plurality of second cards that are displayed in a stacked manner, wherein the stacked display refers to displaying partial card content information in the cards; In response to a sliding operation on the second interface, obtaining distance information of the sliding operation; Determine, according to the distance information of the sliding operation, the position information of each card in the plurality of fully visible third cards and the plurality of stacked and displayed fourth cards, wherein the plurality of third cards are the same as or different from the plurality of first cards, and the plurality of second cards are the same as or different from the plurality of fourth cards; According to the position information of each card, the multiple third cards are fully visibly displayed in the third interface, and the multiple fourth cards are stacked and displayed.

2. The method according to claim 1, characterized in that The determining, according to the distance information of the sliding operation, the position information of each card in the plurality of completely visible third cards and the plurality of stacked fourth cards includes: A sliding coefficient is obtained according to the distance information of the sliding operation, wherein the sliding coefficient is used to represent a ratio between a first value and the first distance information, the first value is used to represent a remainder obtained by performing a modulo operation on the distance information of the sliding operation and the first distance information, and the first distance information is used to represent a preset interval between top edges of two adjacent completely visible cards; According to the distance information of the sliding operation and the sliding coefficient, the position information of each card in the multiple fully visible third cards and the multiple fourth cards displayed in stacked form is determined.

3. The method according to claim 2, characterized in that The obtaining of the sliding coefficient according to the distance information of the sliding operation includes: The sliding coefficient is obtained according to the distance information of the sliding operation, the preset card height information and the first interval information, where the first interval information is used to represent the interval between two preset adjacent completely visible cards.

4. The method according to claim 3, characterized in that The plurality of third cards are arranged vertically, and determining the position information of each card in the plurality of third cards that are fully visible and displayed and the plurality of fourth cards that are stacked and displayed according to the distance information of the sliding operation includes: performing an upward rounding operation on the first distance information according to the distance information of the sliding operation to obtain an identifier of a first completely visible third card among the multiple completely visible third cards; Obtaining a first stack quantity according to the distance information of the sliding operation, the identifier of the first completely visible third card, and a first preset threshold, where the first stack quantity is used to represent the number of cards of the plurality of fourth cards displayed in the stack in a first display area, where the first display area is a top area of ​​the third interface; The position information of the first completely visible third card is obtained according to the first stack quantity, the first distance information, the sliding coefficient and the second interval information, and the second interval information is used to represent the interval between two adjacent cards of the preset stack display.

5. The method according to claim 4, characterized in that The obtaining the position information of the first completely visible third card according to the first stacking quantity, the first distance information, the sliding coefficient and the second interval information includes: The position information of the first completely visible third card is obtained according to the following formula: The position information of the first completely visible third card = the first stack quantity * the second interval information + the first distance information * (1-the sliding coefficient); The first distance information is the sum of the preset card height information and the first interval information.

6. The method according to claim 4 or 5, characterized in that Also includes: The position information of each third card in the plurality of third cards except the first completely visible third card is obtained according to the position information of the first completely visible third card and the first distance information.

7. The method according to claim 6, characterized in that The obtaining, according to the position information of the first completely visible third card and the first distance information, the position information of each third card among the plurality of third cards except the first completely visible third card, comprises: The position information of each third card is obtained according to the following formula: The location information of card A = (the identification of the card A - the identification of the first completely visible third card) * the first distance information + the location information of the first completely visible third card; The card A is any one of the third cards.

8. The method according to claim 6 or 7, characterized in that The plurality of fourth cards displayed in a stacked manner include a plurality of fourth cards displayed in a stacked manner in a second display area, where the second display area is a bottom area of ​​the third interface, and further includes: According to the position information of the last fully visible third card among the multiple fully visible third cards, the first distance information, the sliding coefficient and the second interval information, the position information of the multiple fourth cards stacked and displayed in the second display area is obtained.

9. The method according to claim 8, characterized in that The obtaining, according to the position information of the first completely visible third card, the first distance information, the sliding coefficient and the second interval information, a plurality of fourth cards stacked and displayed in the second display area includes: The position information of the plurality of fourth cards stacked and displayed in the second display area is obtained according to the following formula: The position information of card B = the position information of the last completely visible third card + the first distance information * the sliding coefficient + (the identifier of the card B - the identifier of the last completely visible third card - the sliding coefficient) * the second interval information; The card B is any fourth card among a plurality of fourth cards stacked and displayed in the second display area.

10. The method according to any one of claims 4 to 9, characterized in that Also includes: According to the first stacking quantity, the second interval information and the sliding coefficient, position information of a plurality of fourth cards stacked and displayed in the first display area is obtained.

11. The method according to claim 10, characterized in that The obtaining, according to the first stacking quantity, the second interval information and the sliding coefficient, position information of a plurality of fourth cards stacked and displayed in the first display area includes: The position information of the plurality of fourth cards stacked and displayed in the first display area is obtained according to the following formula: The position information of card C = the first stack quantity * the second interval information - (the identification of the first completely visible third card - the identification of card C - 1 + the sliding coefficient) * the second interval information; The card C is any fourth card among a plurality of fourth cards stacked and displayed in the first display area.

12. The method according to any one of claims 1 to 11, characterized in that Also includes: In response to a down event in the sliding operation on the second interface, obtaining a current first angle coefficient of each card, where the current first angle coefficient of each card is used to characterize a degree of change of each card from a preset initial angle to a current maximum distortion angle of each card, where the current maximum distortion angle of each card is related to current position information of each card; The current angle of each piece is obtained according to the current maximum distortion angle of each card and the current first angle coefficient.

13. The method according to claim 12, characterized in that The current angle of each card is obtained according to the following formula: The current angle of card D=the maximum distortion angle of card D*the first angle coefficient of card D.

14. The method according to claim 12 or 13, characterized in that At the moment when a down event in the sliding operation is detected, the first angle coefficient is 0; and at a first preset time after the down event in the sliding operation is detected, the first angle coefficient is 1.

15. The method according to any one of claims 12 to 14, characterized in that Also includes: In response to an up event in the sliding operation on the second interface, obtaining a current second angle coefficient of each card, where the current second angle coefficient of each card is used to characterize a degree of change of each card from the maximum distortion angle to the preset initial angle; The current angle of each piece is obtained according to the current maximum distortion angle of each card and the current second angle coefficient.

16. The method according to claim 15, characterized in that At the moment when the up event in the sliding operation is detected, the second angle coefficient is 1; at a second preset time after the up event in the sliding operation is detected, the second angle coefficient is 0.

17. An electronic device, characterized in that: include: one or more processors and memory; The memory is coupled to the one or more processors, and the memory is used to store computer program code, wherein the computer program code includes computer instructions, and the one or more processors call the computer instructions to enable the electronic device to execute the method for displaying a card as described in any one of claims 1 to 16.

18. A chip system, characterized in that: The chip system is applied to an electronic device, and the chip system includes one or more processors, and the processor is used to call computer instructions so that the electronic device executes the method for displaying a card as described in any one of claims 1 to 16.

19. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores a computer program, and when the computer program is executed by an electronic device, the electronic device executes the method for displaying a card according to any one of claims 1 to 16.

Images