Methods and electronic devices for displaying cards

Abstract

This application relates to the field of terminal technology; it provides a method and electronic device for displaying cards. The method includes: displaying a first interface of a first application, the first interface including a card display area, the card display area including multiple cards; responding to a first operation applied to the card display area, displaying a second interface by expanding the multiple cards in the card display area, the second interface including multiple fully visible first cards and multiple stacked second cards; responding to a sliding operation applied to the second interface, acquiring distance information of the sliding operation; determining the position information of each card among the multiple fully visible third cards and the multiple stacked fourth cards based on the distance information of the sliding operation; and displaying the multiple third cards fully visible and the multiple fourth cards stacked in the third interface based on the position information of each card. Based on this solution, users can efficiently obtain information from one or more cards, improving the user experience.

Description

Technical Field

[0001] This application relates to the field of terminal technology, specifically to a method and electronic device for display cards. Background Technology

[0002] With the development of electronic devices, widgets are becoming increasingly widely used to facilitate users' quick access to application information. A widget is a tiny application view that can be embedded into other applications; widgets can also be called desktop widgets or cards. Currently, to save display space on the desktop of electronic devices, multiple cards can be displayed in turn in the same card display area containing the same widget, with each card corresponding to a view of an application, thus creating a card stacking effect. Summary of the Invention

[0003] This application provides a method and electronic device for displaying cards, which can achieve a stacked display effect of displaying cards in the top display area and / or bottom display area of ​​the display screen, enabling users to efficiently obtain information from one or more cards and improving the user experience.

[0004] Firstly, a method for displaying cards is provided, including:

[0005] The first interface of the first application is displayed. The first interface includes a card display area, which includes multiple cards. The card display area displays the topmost card among the multiple 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. The second interface includes a plurality of fully visible first cards and a plurality of stacked second cards, wherein the stacked display refers to displaying partial card content information.

[0007] In response to a sliding operation applied to the second interface, the distance information of the sliding operation is obtained;

[0008] Based on 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;

[0009] Based on the position information of each card, the plurality of third cards are displayed in full visibility on the third interface, and the plurality of fourth cards are stacked and displayed.

[0010] In the embodiments of this application, in response to a sliding operation applied to the second interface, the electronic device can acquire 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 card among multiple fully visible third cards and multiple stacked fourth cards; based on the position information of each card, the multiple third cards are fully visible on the third interface, and the multiple fourth cards are stacked; in the solution of this application, the electronic device can calculate the position information of each card among multiple fully visible third cards and multiple stacked fourth cards based on the detected sliding operation applied to the second interface, so that the card position changes with the change of the finger position in the sliding operation; in addition, multiple fourth cards can be stacked on the display screen, so that the user can efficiently obtain information of one or more cards, improving the user experience.

[0011] In conjunction with the first aspect, in certain implementations of the first aspect, determining the position information of each card among the plurality of fully visible third cards and the plurality of stacked fourth cards based on the distance information of the sliding operation includes:

[0012] Based on the distance information of the sliding operation, a sliding coefficient is obtained, wherein the sliding coefficient is used to characterize the ratio between a first value and a first distance information, the first value is used to characterize the 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 characterize the preset top edge spacing between two adjacent fully visible cards.

[0013] Based on 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 stacked fourth cards is determined.

[0014] In the embodiments of this application, a sliding coefficient is obtained based on the distance information of the sliding operation of the first distance information. Based on the distance information of the sliding operation of the first distance information and the sliding coefficient of the first distance information, the position information of each card in the multiple third cards that are fully visible in the first distance information and the multiple fourth cards that are stacked and displayed in the first distance information is determined. Based on the solution of this application, multiple fourth cards can be stacked and displayed in the third interface through the sliding coefficient, so that users can efficiently obtain information of one or more cards and improve the user experience.

[0015] In conjunction with the first aspect, in some implementations of the first aspect, obtaining the sliding coefficient based on the distance information of the sliding operation includes:

[0016] The sliding coefficient is obtained based on 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 characterize the preset interval between two adjacent fully visible cards.

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

[0019] Where 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 modulo operation.

[0020] In conjunction with the first aspect, in certain implementations of the first aspect, the plurality of third cards are arranged vertically, and determining the position information of each card among the plurality of fully visible third cards and the plurality of stacked fourth cards based on the distance information of the sliding operation includes:

[0021] The first distance information is rounded up based on the distance information of the sliding operation to obtain the identifier of the first fully visible third card among the multiple fully visible third cards.

[0022] Based on the distance information of the sliding operation, the identifier of the first fully visible third card, and the first preset threshold, a first stacking number is obtained. The first stacking number is used to characterize the number of cards of the multiple fourth cards displayed in the stack in the first display area, where the first display area is the top area of ​​the third interface.

[0023] Based on the first stack quantity, the first distance information, the sliding coefficient, and the second interval information, the position information of the first fully visible third card is obtained. The second interval information is used to characterize the preset interval between two adjacent cards displayed in the stack.

[0024] In conjunction with the first aspect, in some implementations of the first aspect, obtaining the position information of the first fully visible third card based on the first stacking quantity, the first distance information, the sliding coefficient, and the second interval information includes:

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

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

[0027] Wherein, 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, some implementations of the first aspect also include:

[0029] Based on the position information of the first fully visible third card and the first distance information, the position information of each of the plurality of third cards, excluding the first fully visible third card, is obtained.

[0030] In conjunction with the first aspect, in certain implementations of the first aspect, obtaining the position information of each of the plurality of third cards, excluding the first fully visible third card, based on the position information of the first fully 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] Location information of card A = (Identifier of card A - Identifier of the first fully visible third card) * First distance information + Location information of the first fully visible third card;

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

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

[0035] Based on 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 conjunction with the first aspect, in certain implementations of the first aspect, obtaining a plurality of fourth cards stacked and displayed in the second display area based on the position information of the first fully visible third card, the first distance information, the sliding coefficient, and the second interval information includes:

[0037] The position information of the multiple fourth cards stacked and displayed in the second display area can be obtained using the following formula:

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

[0039] Wherein, card B is any one of the multiple fourth cards stacked and displayed in the second display area.

[0040] In conjunction with the first aspect, some implementations of the first aspect also include:

[0041] Based on the first stacking quantity, the second interval information, and the sliding coefficient, the position information of the multiple fourth cards stacked and displayed in the first display area is obtained.

[0042] In conjunction with the first aspect, in some implementations of the first aspect, obtaining the position information of the plurality of fourth cards stacked and displayed in the first display area based on the first stacking quantity, the second interval information, and the sliding coefficient includes:

[0043] The position information of the multiple fourth cards stacked 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 identifier of the first fully visible third card - the identifier of card C - 1 + the sliding coefficient) * the second interval information;

[0045] Wherein, card C is any one of the multiple fourth cards stacked and displayed in the first display area.

[0046] In conjunction with the first aspect, some implementations of the first aspect also include:

[0047] In response to the down event in the sliding operation applied to the second interface, the current first angle coefficient of each card is obtained. The current first angle coefficient of each card is used to characterize the degree of change of each card from the preset initial angle to the current maximum distortion angle of each card. The current maximum distortion angle of each card is related to the current position information of each card.

[0048] The current angle of each piece is obtained based on the current maximum distortion angle of each piece and the current first angle coefficient.

[0049] In the embodiments of this application, in response to the down event in the sliding operation of the first distance information on the second interface of the first distance information, the current first angle coefficient of each card in the first distance information is obtained. The current first angle coefficient of each card in the first distance information is used to characterize the degree of change of each card in the first distance information from the preset initial angle to the current maximum distortion angle of each card in the first distance information. The current maximum distortion angle of each card in the first distance information is related to the current position information of each card in the first distance information. Based on the current maximum distortion angle of each card in 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 solution of this application, when displaying cards, the dynamic change of the card angle distortion can be realized according to the first angle coefficient and the maximum distortion angle.

[0050] In conjunction 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 conjunction with the first aspect, in some implementations of the first aspect, the first angle coefficient is 0 at the moment the down event in the sliding operation is detected; and the first angle coefficient is 1 after a first preset time following the detection of the down event in the sliding operation.

[0053] In conjunction with the first aspect, some implementations of the first aspect also include:

[0054] In response to the up event in the sliding operation applied to the second interface, the current second angle coefficient of each card is obtained. The current second angle coefficient of each card is used to characterize the 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 based on the current maximum distortion angle of each piece and the current second angle coefficient.

[0056] In conjunction with the first aspect, in some implementations of the first aspect, the second angle coefficient is 1 at the moment the up event in the sliding operation is detected; and the second angle coefficient is 0 after a second preset time following the detection of the up event in the sliding operation.

[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 being used to store computer program code, the computer program code including computer instructions, wherein the one or more processors invoke the computer instructions to cause the electronic device to perform any of the display card methods of the first aspect.

[0058] Thirdly, a chip system is provided for use in an electronic device, the chip system including one or more processors, the processors being used to invoke computer instructions to cause the electronic device to perform any of the display card methods of the first aspect.

[0059] Fourthly, a computer-readable storage medium is provided that stores computer program code, which, when executed by an electronic device, causes the electronic device to perform any of the display card methods of the first aspect.

[0060] Fifthly, a computer program product is provided, comprising: computer program code, which, when executed by an electronic device, causes the electronic device to perform any of the display card methods described in the first aspect.

[0061] In the embodiments of this application, in response to a sliding operation applied to the second interface, the electronic device can acquire 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 card among multiple fully visible third cards and multiple stacked fourth cards; based on the position information of each card, the multiple third cards are fully visible on the third interface, and the multiple fourth cards are stacked; in the solution of this application, the electronic device can calculate the position information of each card among multiple fully visible third cards and multiple stacked fourth cards based on the detected sliding operation applied to the second interface, so that the card position changes with the change of the finger position in the sliding operation; in addition, multiple fourth cards can be stacked on the display screen, so that the user can efficiently obtain information of one or more cards, improving the user experience. Attached Figure Description

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

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

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

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

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

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

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

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

[0070] Figure 9 This is a schematic diagram of a card spacing provided in an embodiment of this application;

[0071] Figure 10 This is a schematic diagram of a display card provided in an embodiment of this application;

[0072] Figure 11 This is a schematic diagram of another display card provided in an embodiment of this application;

[0073] Figure 12 This is a schematic diagram of a software system for another electronic device provided in an embodiment of this application;

[0074] Figure 13 This is a schematic diagram of a method for displaying a card provided in an embodiment of this application;

[0075] Figure 14 This is a schematic diagram of another method for displaying a card provided in an embodiment of this application;

[0076] Figure 15 This is a schematic diagram of the hardware structure of an electronic device applicable to this application. Detailed Implementation

[0077] In the embodiments of this application, the terms "first," "second," etc., are used for descriptive purposes only and should not be construed as indicating or implying relative importance or implicitly specifying the number of indicated technical features. Therefore, a feature defined as "first" or "second" may explicitly or implicitly include one or more of that feature. In the description of this embodiment, unless otherwise stated, "multiple" means two or more.

[0078] Currently, to facilitate the use of various applications and enhance the visual richness of mobile devices, the home screen of electronic devices typically displays multiple application cards. For example, after an application is installed on an electronic device, it can register with the phone's widget manager (also known as a card manager), thereby generating a card corresponding to that application. If the device detects that a user has added a card to the home screen, it responds by retrieving the application's information and displaying the card on the home screen.

[0079] For example, to save desktop space, users can display multiple cards of the same size in the same card display area; such as Figure 1 As shown in (a), the card display area 101 displays cards in a stacked state; the stacked cards include weather cards, news cards, clock cards, and calendar cards; when multiple cards are stacked, if a user wants to view a specific card among the multiple cards, they need to search through the multiple cards until the card is displayed on the electronic device; multiple cards are stacked on the desktop of the electronic device, and the display order of the multiple cards in the card display area 101 is weather card, recommendation card, clock card, and calendar card; Figure 1 As described in (b), the weather card is currently displayed at the top, and the electronic device detects a swipe-down operation on the weather card; in response to the swipe-down 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, i.e., displays the news card; as Figure 1 As shown in (c), if the news card is not the card the user expects to view, the user needs to continue swiping down on the news card; in response to the swiping operation on the news card, the electronic device displays a recommended card at the bottom of multiple cards and displays the next card in the display order, i.e., displays the clock card; as Figure 1 As shown in (d), if the clock card is still not the card the user needs to view, the user continues to swipe down on the clock card; Figure 2 As shown, in response to the downward movement of the clock card, the electronic device displays the clock card at the bottom of multiple cards and then displays the next card in the display order, i.e., the schedule card.

[0080] As described above, if multiple cards are currently stacked on the desktop of an electronic device, and the user wants to view a specific card, they need to repeatedly flip through the stacked cards until they find the card. This process is cumbersome and results in a poor user experience.

[0081] In view of this, embodiments of this application provide a method and electronic device for displaying cards; in embodiments of this application, a first interface of a first application is displayed, the first interface including a card display area, the card display area including multiple cards, the card display area displaying the topmost card among the multiple cards; in response to a first operation acting on the card display area, a second interface is displayed by expanding the multiple cards in the card display area, the second interface including multiple fully visible first cards and multiple stacked second cards, wherein stacked display refers to displaying partial card content information in the cards; in response to a sliding operation acting on the second interface, distance information of the sliding operation is obtained; based on the distance information of the sliding operation, the position information of each card among 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; based on 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 embodiments of this application, a display effect of cards being stacked simultaneously at the top and / or bottom of the display screen can be achieved, enabling users to efficiently obtain information from one or more cards; improving the user experience.

[0082] Before providing a detailed explanation of the card display provided in the embodiments of this application, the electronic device involved in the embodiments of this application will be described first.

[0083] The method provided in this application embodiment can be executed by an electronic device. The desktop of the electronic device displays multiple cards running in the main desktop process, and these cards can be stacked. As an example and not a limitation, the electronic device can be, but is not limited to, a GoPro action camera, a digital camera, a tablet computer, a desktop, a laptop, a handheld computer, a notebook computer, an in-vehicle 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. This application embodiment does not limit the scope of the application.

[0084] Optionally, a hardware structure diagram of the electronic device can be found in the following sections. Figure 15 Related descriptions.

[0085] The following is combined Figures 3 to 14 The method for displaying cards provided in the embodiments of this application will be described in detail.

[0086] Implementation Method 1

[0087] In one implementation, when multiple cards in a card set are unfolded and displayed on an electronic device, an animation effect can be achieved where the cards are simultaneously stacked at the top and bottom of the screen, allowing users to efficiently obtain information from one or more cards and improving the user experience.

[0088] For example, Figure 3 This is a schematic diagram of a display card interface provided in an embodiment of this application; as shown... Figure 3 The interface shown in (a) can be the display interface of the negative one screen of an electronic device, such as... Figure 3 As shown in (a), the display interface on the negative one screen includes card 0 and today's steps; card 0 is the topmost card, and multiple cards can be stacked below card 0; as shown in (a). Figure 3 As shown in (b), an upward swipe operation on card 1 was detected; Figure 3 As shown in (c), in response to an upward swipe operation on card 0, cards 0, 1, 2, 3, and 4 are displayed in their unfolded state; card 4 is located below card 3; as shown in (c). Figure 3 As shown in (d), an upward swipe operation on card 1 was detected; Figure 4 As shown in (a), in response to an upward swipe operation on card 1, cards 0, 1, 2, 3, 4, and 5 are displayed in their unfolded state; wherein card 0 is located below card 1, and card 5 is located below card 4; as shown in (a), cards 0, 1, 2, 3, 4, and 5 are displayed in their unfolded state. Figure 4 As shown in (b), an upward swipe operation on card 2 was detected; Figure 4 As described in (c), in response to an upward sliding operation on card 2, cards 1, 2, 3, 4, and 5 are displayed in their unfolded state; wherein card 1 is located below card 2; as... Figure 4 As shown in (d), an upward swipe operation on card 5 was detected; as Figure 5 As shown, in response to the swipe-up operation on card 5, the cards are in a stacked state, and card 2 is displayed on the top layer; it should be noted that the card displayed on the top layer is as follows: Figure 4 The first card that is fully displayed in the display interface of (d) is card 2.

[0089] It should be noted that when the sliding distance of the upward swipe operation on card 0 is detected to be greater than a preset distance (e.g., 2 / 3 of the height of a single card), the display will be as shown in response to the upward swipe operation on card 0. Figure 9 The interface shown in (c) displays multiple cards in an expanded state.

[0090] It should be understood that Figure 3 and Figure 4The above swipe gesture is used as an example to illustrate the triggering operation of displaying the card set from a stacked state to an expanded state; the triggering operation can also be a long press operation or other operations, and this application embodiment does not limit it in any way.

[0091] In embodiments of this application, when multiple cards in an unfolded state are displayed on the screen of an electronic device, a stacked card effect can be displayed at the top of the screen, such as... Figure 4 Cards 0 and 1 are shown in (a) in the image, and a stacked card effect can be displayed at the bottom of the screen, as shown in the image. Figure 4 Cards 4 and 5 are shown in (a) of this application. The method for displaying cards provided by this application can, on the one hand, avoid users from frequently flipping through multiple stacked cards, making the operation simple; on the other hand, it can display the information of multiple cards on the display screen at the same time, improving the user experience.

[0092] For example, in embodiments of this application, the positions of multiple cards in their unfolded state displayed on the screen can be adjusted; such as Figure 6 As shown in (a), the display shows cards 0, 1, 2, 3, 4, and 5 in their unfolded state, arranged from top to bottom; card 0 is below card 1, and card 5 is below card 4; a selection operation on card 3 is detected; as shown... Figure 6 (b) and Figure 6 As shown in (c), a drag operation on card 3 is detected, and card 3 is gradually dragged above card 2; as... Figure 6 As shown in (d), in response to a drag operation applied to card 3, card 3 is positioned above card 2.

[0093] Figure 7 This is a schematic diagram of a software system for an electronic device provided in an embodiment of this application.

[0094] like Figure 7 As shown, the electronic device employs a layered software system architecture, which is divided into several layers, each with a clear role and function. Layers communicate with each other through software interfaces. In some embodiments, the software system can be divided into four layers, from top to bottom: the application layer, the application framework layer, the Android Runtime and system libraries, and the kernel layer.

[0095] For example, the application layer may include a page manager in an electronic device; the page manager may be used to manage the position information of different components on the page.

[0096] For example, different pages in an electronic device can correspond to different page managers; for instance, the negative one screen page manager can be used to manage the position information of different components in the negative one screen; the desktop page manager can be used to manage the position information of different components on the desktop.

[0097] For example, the application framework layer provides an application programming interface (API) and programming framework for applications in the application layer. The application framework layer may include some predefined functions.

[0098] In the embodiments of this 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; 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 changes, and card angle changes; 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 stacked state, expanded state, collapsed state, and stretched state; the state change animation manager is used to manage the transition animations 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 card identifiers, card content information, and card sorting in the card set.

[0099] Optionally, the View framework module includes a location information interface, through which the card's location information is transmitted.

[0100] For example, 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. The surface manager manages the display subsystem and provides the fusion of 2D and 3D layers for multiple applications. The media library supports playback and recording of various audio and video formats, as well as still image files. The media library can support various audio and video encoding formats, such as MPEG4, H.264, Moving Picture Experts Group AudioLayer III (MP3), Advanced Audio Coding (AAC), Adaptive Multi-rate (AMR), Joint Photographic Experts Group (JPG), and Portable Network Graphics (PNG). The 3D graphics processing library can be used to implement 3D graphics drawing, image rendering, compositing, and layer processing. The 2D graphics engine is the drawing engine for 2D drawing.

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

[0102] Optionally, Figure 7 The connections between the layers shown are for illustrative purposes only and do not constitute a limitation on the connections between the software architecture layers of an electronic device.

[0103] For example, the card display method provided in this application embodiment can be implemented through the interaction between various managers or modules in the application architecture layer; for example, after the application layer detects a 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 be referred to later. Figure 8 Related descriptions.

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

[0105] It should be noted that, Figure 8 For the functions of each manager or data adapter, please refer to [link / reference]. Figure 7 The relevant descriptions in the document will not be repeated here.

[0106] S201, The page manager detected an upward swipe operation on the topmost card in the card set.

[0107] For example, such as Figure 3 As shown in (d), the page manager of the negative one screen detects an upward swipe operation on card 0, which is the topmost card in the card set; the swipe distance of the upward swipe operation is greater than a preset distance, for example, the preset distance can be the height of a single card * 2 / 3.

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

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

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

[0111] For example, 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 can display complete card content information in a display interface; such as Figure 4 As shown in (a), the maximum number of cards that can be displayed with complete card content information in the display interface is 4; the second preset number is used to characterize the maximum number of cards that can be stacked in the top display area of ​​the display screen; the third preset number is used to characterize the maximum number of cards that can be stacked in the bottom display area of ​​the display screen.

[0112] In one example, the first preset quantity and the second preset quantity can be equal.

[0113] Alternatively, multiple cards in a card set can have the same card size.

[0114] For example, card identifiers are used to identify different cards in a card set; the order of card identifiers is used to characterize the display order of multiple cards in the card set; the content information of the cards includes text information or image information in the cards.

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

[0116] It should be noted that the above example uses consecutively numbered identification cards, and this application does not limit the implementation method of marking different cards in the card set.

[0117] For example, such as Figure 4 The weather card shown in (a) contains information such as the current temperature "30℃", "high 31℃", "low 23℃", "sunny", "12:30℃", "13:28℃", "14:27℃", "15:26℃", "16:21℃", and "17:20℃".

[0118] For example, the card identifier, the order of the card identifiers, and the content information of the card can 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 Identification

[0126] String id;

[0127] / / Card content

[0128] HnStackViewItemView mManualCardView;

[0129] };

[0130] S203, A sliding operation was detected.

[0131] For example, the page manager detects a swipe operation on a card.

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

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

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

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

[0136] In one example, swiping up is a positive swipe, and swiping down is a negative swipe. Based on the swipe distances periodically reported by the page manager, the layout manager can obtain the cumulative total swipe distance. For example, if the sampling period is 20ms, a touch operation is detected at 0ms, and the reported swipe distance is 0 pixels; an up swipe is detected at 20ms, and the reported up swipe distance is 15 pixels; an up swipe is detected at 40ms, and the reported up swipe distance is 10 pixels. Then the cumulative total swipe distance h = 15 + 10 = 25 pixels.

[0137] In one example, swiping up is a positive swipe, and swiping down is a negative swipe. Based on the swipe distances periodically reported by the page manager, the layout manager can obtain the cumulative total swipe distance. For example, if the sampling period is 20ms, a touch operation is detected at 0ms, and the reported swipe distance is 0 pixels; an up swipe is detected at 20ms, and the reported up swipe distance is 15 pixels; a down swipe is detected at 40ms, and the reported down swipe distance is 5 pixels; then the cumulative total swipe distance h = 15 + (-5) = 10 pixels.

[0138] It should be understood that the sliding distance can refer to the sliding distance reported in a single sampling period, while the cumulative total sliding distance h is the sum of the sliding distances reported multiple times before the current moment when no hand-raising operation was detected.

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

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

[0141] For example, when calculating the position information of each card in the card set, the layout manager can first determine the identifier (e.g., identifier n) and 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 stacked layers in the top stacked area and / or the number of stacked layers in the bottom stacked area can be obtained; based on the preset stacked card interval and the current number of stacked layers in the top stacked area and / or the number of stacked layers in the bottom stacked area, the position information of the cards in the current top stacked area and / or bottom stacked area of ​​the display screen can be obtained.

[0142] For example, the identifier (e.g., identifier n) of the first fully visible card is determined based on the cumulative 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 of the multiple cards displayed on the screen can be obtained.

[0143] For example, such as Figure 9 As shown in (a), the identifier of the first fully visible card is n based on the cumulative total sliding distance h. The number of cards includes a first preset number and a second preset number. The first preset number is the maximum number of cards that can display complete card content information in a display interface (e.g., 4 cards). The second preset number is the maximum number of cards that can be stacked in the stacking area (e.g., 3 cards). Based on the identifier n of the first fully visible card, the first preset number, and the second preset number, the identifiers of the cards displayed in the current display interface can be obtained as n-3, n-2, n-1, n, n+1, n+2, n+3, n+4 (e.g., m), n+4+1 (e.g., m+1), n+4+2 (e.g., m+2), and n+4+3 (e.g., m+3).

[0144] For example, the card identifier of each card among the multiple cards displayed on the screen can be obtained first, and then the position information of each card can be calculated separately; or, a card identifier can be obtained, the position information of that card can be calculated, and then the next card identifier can be obtained and the position information of the next card can be calculated; this application does not limit this in any way.

[0145] The following example illustrates the calculation process for the identifier of the first fully visible card.

[0146] For example, such as Figure 9 As shown in (a), the cards displayed on the screen are arranged in the following order from top to bottom: card n-3, card n-2, card n-1 (e.g., cards located in the top stacked area of ​​the screen), card n (e.g., the first fully visible card), card n+1, card n+2, card n+3, etc. up to card m (e.g., other fully visible cards), card m+1, card m+2, card m+3 (e.g., cards located in the bottom stacked area of ​​the screen); wherein the stacking interval of the cards located in the top stacked area of ​​the screen, or the cards located in the bottom stacked area of ​​the screen, is h1; the height of a single card is h2; the interval between visible cards is h3; and h1 is less than h2.

[0147] For example, h1 and h3 can be equal, or h3 can be greater than h1.

[0148] For example, Where h represents the total cumulative sliding distance detected by the sliding operation; h2 represents the height of a single card; and h3 represents the interval between visible cards. This indicates the rounding up operation.

[0149] For example, such as Figure 3 As shown in (c), no sliding operation was detected, the cumulative sliding distance h = 0; the identifier of the first fully visible card = 0.

[0150] In one example, a single card is 4 pixels high, and the visible card spacing is 1 pixel; the cumulative total sliding distance is 5 pixels.

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

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

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

[0154] Where a represents the sliding coefficient; h represents the cumulative sliding distance; h2 represents the height of a single card; h3 represents the visible card interval; and % represents the modulo operation.

[0155] For example, the sliding coefficient 'a' can range from 0% to 100%; the sliding coefficient 'a' can be dimensionless.

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

[0157] The following example illustrates the calculation process for the location information of the first fully visible card.

[0158] For example, the position of the first fully visible card = number of stacked layers in the top stacked area * card spacing + (height of a single card + spacing between visible cards) * (1 - sliding coefficient) = K1 * h1 + (h2 + h3) * (1 - a); where K1 represents the number of stacked layers in the top stacked area; h1 represents the card spacing; h2 represents the height of a single card; h3 represents the spacing between visible cards; and a represents the sliding coefficient.

[0159] In one example, K1 is related to the cumulative 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; this can be understood as the maximum stacking level of the top stacking area being 3.

[0160] For example, with Figure 9 The position of the first fully visible card shown in (a) is illustrated as an example. The number of stacked layers K1 = 3; the position of the first fully visible card = 3*h1 + (h2 + h3)*(1-a).

[0161] For example, before the cards are moved, the first fully visible card is card n; in response to the user's swipe up operation, multiple cards move upwards, and card n+1 covers at least a portion of card n, at which point the first fully visible card is card n+1; before the cards are moved, the sliding coefficient a is 0% for card n+1; when card n+1 moves to the position of card n, the sliding coefficient a is 100% for card n+1.

[0162] The following example illustrates the calculation process for the location information of other fully visible cards.

[0163] For example, if the card identifier is a consecutive number, then 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 interval between visible cards.

[0164] For example, for all fully visible cards except the first fully visible card, the distance between each of the other fully visible cards is fixed; for example, the interval between card n+1 and card n+2 can be a fixed interval h3.

[0165] The following example illustrates the calculation process for the position information of cards located in the stacked area at the top of the display screen.

[0166] For example, if the card identifiers are consecutive numbers, the position of the card in the top stack area = K1*h1-(identifier of the first fully visible card-identifier of this card-1+a)*h1; where K1 represents the number of stacking layers in the top stack area; h1 represents the stacking card interval; and a represents the sliding coefficient.

[0167] The following example illustrates the calculation process for the position information of cards located in the stacked area at the bottom of the display screen.

[0168] For example, such as Figure 9 As shown, if the card identifiers are consecutive numbers, the position of the card in the bottom stack area = the position of the last fully visible card (e.g., card m) + (h2 + h3) * a + (the identifier of this card - the card identifier of the last fully visible card - a) * h1; where h1 represents the stack 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 Figure 9 The derivation principle of the calculation process for the position information of each card on the above display screen is illustrated with an example.

[0170] For example, when displaying the animation effect of a card, the card's position information can be calculated based on the distance between the top-left corner vertices of the card (e.g., if the card has rounded corners, the top-left corner vertex is the top-left corner vertex of the card's smallest bounding rectangle), with the top of the display screen as the initial position, swiping upwards for a positive swipe and swiping downwards for a negative swipe; for example, as... Figure 9 As shown in (b), before the card's position changes, the distance between the top-left vertex A1 of card n and the top-left vertex A2 of card n+1 is h2+h3, and an upward sliding operation is detected; Figure 9 As shown in (c), in response to an upward swipe 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 of card n+1 is a dynamic process, and the distance moved is related to the sliding coefficient a, after card n+1 moves, the distance between the top left vertex A1' of card n' and the top left vertex A2' of card n+1' is (h2+h3)*(1-a). Therefore, the interval between the top left vertex of the first fully visible card and its initial position 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, as Figure 9 As shown in (a) of the diagram, K1 = 3. (As...) Figure 9 As shown in (d), before the card's position changes, the distance between the top-left vertex A1 of card n and the top-left vertex A3 of card n-1 is h1, and an upward sliding operation is detected; Figure 9 As shown in (e), in response to an upward swipe 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 of card n is a dynamic process, and the distance moved is related to the sliding coefficient a, after card n moves, the distance between the top left vertex A1' of card n' and the top left vertex A3' of card n-1' is a*h1. Figure 9 As shown in (f), before the card's position changes, the distance between the top-left vertex A4 of card m and the top-left vertex A5 of card m+1 is h1, and an upward sliding operation is detected; Figure 9 As shown in (g), in response to the swipe 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 of card m+1 is a dynamic process and the distance moved is related to the sliding coefficient a, after card m+1 moves, the distance between the upper left vertex A4' of card m' and the upper left vertex A5' of card m+1' is (1-a)*h1.

[0171] In one example, such as Figure 9 As shown in (a), the number of stacked layers in the top stacked area of ​​the display can be equal to the number of stacked layers in the bottom stacked area of ​​the display.

[0172] In the embodiments of this 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; and calculate the position information of each card in the card set based on the cumulative total sliding distance. When multiple cards in the card set are displayed on an electronic device, an animation effect of cards being stacked simultaneously at the top and bottom of the display screen can be achieved, allowing the user to efficiently obtain information from one or more cards and improving the user experience. S206, the layout manager sends the card identifier, the order of the card identifier, the content information of the card, and the position information of the card to the View framework module.

[0173] Optionally, the View framework module has a location information interface, through which the View framework module can receive the location information of the card.

[0174] Optionally, the View framework module can receive card identifiers, card identifier ordering, and card content information in any existing manner, and this application embodiment does not impose any limitations on this.

[0175] S207 The View framework module draws the card display interface of the current frame based on the card identifier, the order of the card identifier, the content information of the card, and the position information of the card.

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

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

[0178] For example, the View framework module can draw card animation effects according to any existing algorithm; in the solution of this application, the View framework module can obtain the position information of the card to realize the animation effect of the card being stacked up and down on the display screen at the same time.

[0179] In the embodiments of this 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 based on the card identifier, the sorting of the card identifiers, the content information of the card, and the position information of the 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 on an electronic device, the animation effect of cards being stacked at the top and bottom of the display screen can be realized, so that the user can efficiently obtain the information of one or more cards and improve the user experience.

[0180] Implementation Method Two

[0181] In one implementation, when multiple cards from a card set are unfolded and displayed on an electronic device, an animation effect can be achieved where the cards are simultaneously stacked at the top and bottom of the screen. Furthermore, the cards in the card set can undergo angle distortion during the transition from a stacked state to an unfolded state. For example, when the electronic device detects a click operation, i.e., at 0ms, the card is in a 2D state (i.e., the card's angle has not changed). Within a preset duration of the click operation, the card transitions from a 2D state to a 3D state. This can be understood as the card undergoing angle distortion during display. If the click operation exceeds the preset duration, the card fully distorts into a 3D state.

[0182] For example, Figure 10 This is a schematic diagram of a display card interface provided in an embodiment of this application; as shown... Figure 10 The interface shown in (a) can be the display interface of the negative one screen of an electronic device, such as... Figure 10 As shown in (a), the display interface on the negative one screen includes card 00 and today's steps; card 00 is displayed as the top card, and multiple cards can be stacked below card 00; as shown in (a). Figure 10 As shown in (b), an upward swipe operation on card 00 was detected; Figure 10 As shown in (c), in response to an upward sliding operation on card 00, cards 00, 01, 02, 03, and 04 are displayed in their unfolded state; all cards are distorted at a certain angle, and card 04 is located below card 03; as shown in (c). Figure 3 As shown in (d), an upward swipe operation on card 01 was detected; as Figure 11 As shown in (a), in response to an upward sliding operation on card 01, cards 00, 01, 02, 03, 04, and 05 are displayed in their unfolded state; wherein card 00 is located below card 01, and card 05 is located below card 04; as shown in (a), cards 00, 01, 02, 03, 04, and 05 are displayed in their unfolded state. Figure 11 As shown in (b), an upward swipe operation on card 02 was detected; Figure 11 As described in (c), in response to an upward sliding operation on card 02, cards 01, 02, 03, 04, and 05 are displayed in an unfolded state; wherein card 01 is located below card 02; as Figure 11 As shown in (d), an upward swipe operation on card 05 was detected; as Figure 5 As shown, in response to the upward sliding operation applied to 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 follows: Figure 10 The first card that is fully displayed in the display interface of (d) is card 02.

[0183] It should be noted that when the sliding distance of the upward swipe operation on card 00 is detected to be greater than a preset distance (e.g., 2 / 3 of the height of a single card), the following display is shown in response to the upward swipe operation on card 00: Figure 9 The interface shown in (c) displays multiple cards in an expanded state.

[0184] In embodiments of this application, when multiple cards in an unfolded state are displayed on the screen of an electronic device, a stacked card effect can be displayed at the top of the screen, such as... Figure 11 Cards 00 and 01 are shown in (a) and a stacked card effect can be displayed at the bottom of the screen, as shown. Figure 11 Cards 04 and 05 are shown in (a) of this application. The method for displaying cards provided in this application can, on the one hand, avoid users from frequently flipping through multiple stacked cards, making the operation simple; it can display the information of multiple cards on the display screen at the same time, improving the user experience; on the other hand, when displaying multiple cards, each card will produce a certain degree of angular distortion; in the embodiments of this 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 electronic devices to a certain extent.

[0185] Figure 12 This is a schematic diagram of a software system for another electronic device provided in an embodiment of this application.

[0186] like Figure 12 As shown, the electronic device employs a layered software system architecture, which is divided into several layers, each with a clear role and function. Layers communicate with each other through software interfaces. In some embodiments, the software system can be divided into four layers, from top to bottom: the application layer, the application framework layer, the Android Runtime and system libraries, and the kernel layer.

[0187] For example, the application layer may include a page manager in an electronic device; the page manager may be used to manage the position information of different components on the page.

[0188] For example, different pages in an electronic device can correspond to different page managers; for instance, the negative one screen page manager can be used to manage the position information of different components in the negative one screen; the desktop page manager can be used to manage the position information of different components on the desktop.

[0189] For example, the application framework layer provides an application programming interface (API) and programming framework for applications in the application layer. The application framework layer may include some predefined functions.

[0190] In one example, in an embodiment of this 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; 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 changes, and card angle changes; 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 card identifiers, card content information, and card sorting in the card set; the state change animation manager is used to manage the transition animations 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 stacked state, expanded state, shrunken state, and stretched state.

[0191] Optionally, the View framework module includes a location information interface, through which the card's location information is transmitted.

[0192] For example, 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. The surface manager manages the display subsystem and provides fusion of 2D and 3D layers for multiple applications. The media library supports playback and recording of various audio and video formats, as well as still image files. The media library can support various audio and video encoding formats, such as MPEG4, H.264, Moving Picture Experts Group AudioLayer III (MP3), Advanced Audio Coding (AAC), Adaptive Multi-rate (AMR), Joint Photographic Experts Group (JPG), and Portable Network Graphics (PNG). The 3D graphics processing library can be used to implement 3D graphics drawing, image rendering, compositing, and layer processing. The 2D graphics engine is a drawing engine for 2D graphics.

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

[0194] Optionally, Figure 12 The connections between the layers shown are for illustrative purposes only and do not constitute a limitation on the connections between the software architecture layers of an electronic device.

[0195] For example, the card display method provided in this application embodiment can be implemented through the interaction between various managers or modules in the application architecture layer; for example, after the application layer detects a 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; the layout manager can send card identifier and card position information to the angle manager; optionally, the data interaction process between various managers in the card set control manager can be referred to later. Figure 13 Related descriptions.

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

[0197] S401, The page manager detected an upward swipe operation on the topmost card in the card set.

[0198] For example, such as Figure 3 As shown in (d), the page manager of the negative one screen detects an upward swipe operation on card 0, which is the topmost card in the card set; the swipe distance of the upward swipe operation is greater than a preset distance, for example, the preset distance can be the height of a single card * 2 / 3.

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

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

[0201] In one implementation, when a user wants to view one or more cards in a stacked card set, the page manager detects an upward swipe operation on the topmost card in the card set. In response to the swipe operation on the topmost card, the card set is adjusted from a stacked state to an expanded state, and multiple cards can be displayed on the screen. If the user wants to browse information in multiple cards, the page manager can detect the user's swipe operation on the screen. If the user stops browsing information in multiple cards on the screen, the page manager can detect a release event on the screen.

[0202] S402. In response to the swipe-up operation, the page manager sends the card size, number of cards, card identifier, card identifier sorting, and card content information to the layout manager.

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

[0204] S403, The page manager detected a down event.

[0205] For example, multiple cards are displayed in an expanded state on the screen, and the page manager detects a touch operation on the expanded cards. For instance, the down event could be an event that detects a user tapping an expanded card; or, the down event could be an event that detects a user long-pressing an expanded card, etc.

[0206] For example, such as Figure 12 As shown, if the page manager detects a touch event, it 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 indicate that a down event has been detected acting on the expanded card, and the angle manager is triggered to update the timer state through this information.

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

[0208] For example, the information from the down event is used to indicate to the page manager that a user's down event has been detected.

[0209] S405, The layout manager sends a down event message to the angle manager.

[0210] S406, The angle manager updates the timer state and calculates the degree of angle change a1.

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

[0212] S407, The page manager detected a swipe event.

[0213] For example, multiple cards in an expanded state are displayed on the screen, and the page manager detects a swipe event on the expanded cards.

[0214] In one example, the swipe 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 descriptions of S206 will not be repeated here.

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

[0219] Optionally, the layout manager calculates the position information of each card in the card set, which can be found in [reference needed]. Figure 8 S205 and Figure 9 The relevant descriptions will not be repeated here.

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

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

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

[0223] Optionally, the View framework module has a location information interface, through which the View framework module can receive the location information of the card.

[0224] Optionally, the View framework module can receive card identifiers, card identifier ordering, and card content information in any existing manner, and this application embodiment does not impose any limitations on this.

[0225] S411, The layout manager sends the card's position information and card identifier to the angle manager.

[0226] For example, when the angle manager calculates the angle information of each card, it can periodically obtain the card's position information and card identifier; therefore, the angle manager can obtain the position information and card identifier of the card from the layout manager.

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

[0228] For example, in the embodiments of this application, the current angle A of the card is positively correlated with the maximum distortion angle and the degree of angle change a1 of the card; the maximum distortion angle of the card is positively correlated with the center point interval, which is the interval between the center position of the card and the center positions of multiple cards displayed on the display screen.

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

[0230] The following example illustrates the calculation process for the card's current angle A.

[0231] For example, the current angle A of card n = the maximum distortion angle corresponding to the current position of card n * a1; where 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 of the angle of card n at the current moment from the initial angle to the maximum distortion angle.

[0232] The following example illustrates the calculation process for the maximum distortion angle of the card.

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

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

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

[0236] Optionally, the above example uses a preset angle of 15 degrees; the preset angle can be a pre-configured angle, and the preset angle can also be 10 degrees, 11 degrees, 12 degrees, 13 degrees, 14 degrees or 16 degrees, etc., and this application does not limit it in any way.

[0237] For example, within a preset duration for detecting a down event on an unfolded card, a1 ranges from 0% to 100%; at the moment a down event is detected, a1 is 0%; after a preset duration following the detection of the down event, a1 is 100%; wherein, the preset duration can be 200ms, that is, at the moment a down event is detected, a1 is 0%; 200ms after the detection of the down event, a1 is 100%; that is, after 200ms, the card is fully tilted; within 0 to 200ms, a1 is a variable value.

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

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

[0240] For example, after calculating the current angle A of each card in the card set, the angle manager can send the current angle A corresponding to each card identifier to the layout manager.

[0241] For example, the display shows cards 0, 1, 2, and 3 in top-to-bottom order; 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, which may include: identifier 0 - 30 degrees, identifier 1 - 15 degrees, identifier 2 - 15 degrees, and identifier 3 - 30 degrees. Specifically, for card 0, the current angle A is 30 degrees, which represents that card 0 rotates 30 degrees inwards from the bottom edge of card 0 as the rotation axis; for card 1, the current angle A is 15 degrees, which represents that card 1 rotates 15 degrees inwards from the bottom edge of card 1 as the rotation axis; for card 2, the current angle A is 15 degrees, which represents that card 2 rotates 15 degrees inwards from the top edge of card 2 as the rotation axis; and for card 3, the current angle A is 30 degrees, which represents that card 3 rotates 30 degrees inwards from the top edge of card 3 as the rotation axis.

[0242] It should be noted that for cards above the center of multiple cards displayed on the screen, the current angle A represents the angle of rotation inwards from the bottom edge of the card as the rotation axis; for cards below the center of multiple cards displayed on the screen, the current angle A represents the angle of rotation inwards from 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 based on the card identifier, the order of the card identifier, 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 for the current frame, the View architecture module can trigger the display screen of the electronic device to display the card display interface for the current frame.

[0245] For example, such as Figure 12 As shown, the animation effect architecture module can control the View architecture module to draw the card display interface of the current frame based on the card identifier of each card in the card set, 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; the View architecture module can trigger the electronic device to display multiple frames of the card display interface, that is, to display the animation effect of the card set; in the solution of this application, the View framework module can obtain the position information of the card to realize the animation effect of the cards stacking up and down on the display screen; in addition, the View architecture module can obtain the current angle A of each card and realize the effect of the card angle changing based on the current angle A of each card.

[0246] S415, The page manager detected an up event.

[0247] For example, multiple cards in an expanded state are displayed on the screen, and the page manager detects an up event on the expanded cards; for example, it detects that the user's finger has left the card. S416, the page manager sends the up event information to the layout manager.

[0248] The information in the up event is used to indicate that the page manager has detected the up event.

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

[0250] S418, The layout manager sends the card's position information and card identifier to the angle manager.

[0251] For example, when the angle manager calculates the angle information of each card, it can periodically obtain the card's position information and card identifier; therefore, the angle manager can obtain the position information and card identifier of the card from the layout manager.

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

[0253] For example, the degree of angle change a2 represents the degree of angle change of the card at the current moment from the maximum distortion angle to the initial angle; for example, within a preset time period after the up event is detected, the degree of angle change a2 varies from 100% to 0%.

[0254] Optionally, the implementation of S419 can be found in 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 based on the degree of angle change a2 and the card's position information. That is, the degree of angle change a1 in S412 can be replaced with the degree of angle change a2 to obtain the current angle B of each card. See 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] For example, after calculating the current angle B of each card in the card set, the angle manager can send the current angle B corresponding to each card identifier to the layout manager.

[0257] Alternatively, see the relevant description in S413, which will not be repeated here.

[0258] S421, the View architecture module draws the card display interface of the current frame based on the card identifier, the order of the card identifier, 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 for the current frame, the View architecture module can trigger the display screen of the electronic device to display the card display interface for the current frame.

[0260] For example, such as Figure 12 As shown, the animation effect architecture module can control the View architecture module to draw the card display interface of the current frame based on the card identifier of each card in the card set, 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; the View architecture module can trigger the electronic device to display multiple frames of the card display interface, that is, to display the animation effect of the card set; in the solution of this application, the View framework module can obtain the position information of the card to realize the animation effect of the cards stacking up and down on the display screen; in addition, the View architecture module can obtain the current angle B of each card and realize the effect of the card angle changing based on the current angle B of each card.

[0261] In the embodiments of this application, on the one hand, when multiple cards in a card set are unfolded and displayed on an electronic device, an animation effect can be achieved in which the cards are stacked simultaneously at the top and bottom of the display screen, enabling users to efficiently obtain information from one or more cards and improving the user experience; on the other hand, in the embodiments of this application, an angle manager can be used to manage the angle information of multiple cards in a card set, which can save the resources of the electronic device to a certain extent.

[0262] For example, the above Figure 13 The method for displaying cards shown uses an angle manager to manage the angle information of multiple cards in a card set. Optionally, in one implementation, the card set control manager may include multiple angle managers, with one angle manager managing the angle information of a single card in the card set. The implementation for calculating the current angle of a card can be found in [reference needed]. Figure 13 The relevant descriptions in the document will not be repeated here.

[0263] Figure 14 This is a schematic flowchart illustrating a method for displaying a card according to an embodiment of this application. The method can be... Figure 7 or Figure 12 The software architecture of the electronic device shown is executed; the method includes S510 to S550, which are described in detail below.

[0264] S510, Display the first interface of the first application.

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

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

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

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

[0269] The second interface includes multiple fully visible first cards and multiple stacked second cards, where stacking refers to displaying only a portion of the card content information.

[0270] For example, such as Figure 3 As shown in (b), a first operation (e.g., an up swipe) is detected acting on the card display area; as Figure 3 As shown in (c), in response to a first operation applied to the card display area, a second interface is displayed by expanding multiple cards in the card display area.

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

[0272] S530: Respond to the sliding operation applied to the second interface and obtain the distance information of the sliding operation.

[0273] For example, such as Figure 8 S205 or Figure 13 As shown in S409, the distance information of the sliding operation can refer to the cumulative total sliding distance of the sliding operation; see the relevant descriptions in S205 or S409, which will not be repeated here.

[0274] S540. Based on the distance information of the sliding operation, determine the position information of each card among the multiple fully visible third cards and the multiple stacked fourth cards.

[0275] Among them, multiple third cards are the same as or different from multiple first cards, and multiple second cards are the same as or different from multiple fourth cards.

[0276] S550: Based on the position information of each card, multiple third cards are fully visible in the third interface, and multiple fourth cards are stacked and displayed.

[0277] In one implementation, based on the distance information of the swipe operation, the position information of each card in the multiple fully visible third cards and the multiple stacked fourth cards is determined, including:

[0278] Based on the distance information of the sliding operation, a sliding coefficient is obtained. The sliding coefficient is used to characterize the ratio between the first value and the first distance information. The first value is used to characterize the remainder obtained by performing a modulo operation on the distance information of the sliding operation and the first distance information. The first distance information is used to characterize the preset top edge spacing between two adjacent fully visible cards.

[0279] Based on the distance information and sliding coefficient of the sliding operation, determine the position information of each card in the multiple fully visible third cards and the multiple stacked fourth cards.

[0280] For example, see Figure 8 The description of S205 in the text refers to the slip coefficient 'a' in S205; see [link / reference]. Figure 9 The relevant description, the first distance information can refer to, for example Figure 9 The interval between the top-left vertex A1 and the top-left vertex A2 shown in (b); or; as shown in Figure 9 The interval between the top-left vertex A1' and the top-left vertex A2' shown in (c); or, as shown in Figure 9 The interval between the top-left vertex A3 and the top-left vertex A1, as shown in (d); or; as Figure 9 The interval between the top-left vertex A3' and the top-left vertex A1' shown in (e); or, as Figure 9 The interval between the top-left vertex A4 and the top-left vertex A5 shown in (f); or; as Figure 9 The interval between the top left vertex A4' and the top left vertex A5' is shown in (g); it will not be described again here.

[0281] In one implementation, multiple fully visible third cards are arranged vertically, and the sliding coefficient is obtained based on the distance information of the sliding operation, including:

[0282] The sliding coefficient is obtained based on 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 characterize the preset interval between two adjacent fully visible cards.

[0284] For example, such as Figure 4 As shown in (a) above, multiple third cards are arranged vertically; see also Figure 8 In the relevant description of S205, the card height can refer to the height of a single card, h2; the first interval information can refer to the visible card interval as h3, which will not be elaborated here.

[0285] In one implementation, based on the distance information of the swipe operation, the position information of each card in the multiple fully visible third cards and the multiple stacked fourth cards is determined, including:

[0286] Based on the distance information of the sliding operation, the first distance information is rounded up to obtain the identifier of the first fully visible third card among multiple fully visible third cards;

[0287] Based on the distance information of the swipe operation, the identifier of the first fully visible third card, and the first preset threshold, the first stacking number is obtained. The first stacking number is used to characterize the number of multiple fourth cards stacked and displayed in the first display area, which is the top area of ​​the third interface.

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

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

[0290] In one implementation, the position information of the first fully visible third card is obtained based on the first stack quantity, the first distance information, the sliding coefficient, and the second interval information, including:

[0291] The position information of the first fully visible third card can be obtained using the following formula:

[0292] The position information of the first fully visible third card = first stack quantity * second interval information + 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] One implementation also includes:

[0295] Based on the position information of the first fully visible third card and the first distance information, the position information of each third card other than the first fully visible third card is obtained.

[0296] For example, such as Figure 4 As shown in (a), the first fully visible card can refer to card 1; among the multiple third cards, the third cards other than the first fully visible third card can refer to card 2, card 3 and card 4.

[0297] In one implementation, based on the position information of the first fully visible third card and the first distance information, the position information of each of the multiple third cards, excluding the first fully visible third card, is obtained, including:

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

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

[0300] Card A is any third card among all third cards.

[0301] For example, see Figure 8 S205 and Figure 9 In the relevant description, card A can refer to any other fully visible card.

[0302] In one implementation, the stacked display of multiple fourth cards includes multiple fourth cards stacked in a second display area, which is the bottom area of ​​the third interface, and also includes:

[0303] Based on the position information of the first fully visible third card, the first distance information, the sliding coefficient, and the second interval information, the position information of multiple fourth cards stacked and displayed in the second display area is obtained.

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

[0305] In one implementation, based on the position information of the first fully visible third card, first distance information, sliding coefficient, and second interval information, a plurality of fourth cards stacked and displayed in the second display area are obtained, including:

[0306] The position information of the multiple fourth cards stacked and displayed in the second display area can be obtained using the following formula:

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

[0308] Card B is any one of the multiple fourth cards stacked and displayed in the second display area.

[0309] For example, see Figure 8 S205 and Figure 9 According to the relevant description, card B may refer to the card in the stacked area at the bottom of the display screen.

[0310] One implementation also includes:

[0311] Based on the first stacking quantity, the second interval information, and the sliding coefficient, the position information of the multiple fourth cards stacked and displayed in the first display area is obtained.

[0312] In one implementation, the position information of multiple fourth cards stacked and displayed in the first display area is obtained based on the first stacking quantity, the second interval information, and the sliding coefficient, including:

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

[0314] The position information of card C = the number of cards in the first stack * the second interval information - (the identifier of the first fully visible third card - the identifier of card C - 1 + the sliding coefficient) * the second interval information;

[0315] Card C is any one of the multiple fourth cards stacked and displayed in the first display area.

[0316] For example, see Figure 8 S205 and Figure 9 According to the relevant description, card C may refer to the card in the stacked area at the top of the display screen.

[0317] One implementation also includes:

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

[0319] The current angle of each piece is obtained based on the maximum distortion angle of each piece and the current first angle coefficient.

[0320] For example, see Figure 13 The relevant descriptions state that the current first angle coefficient can refer to the degree of angle change a1 in S406; the current angle of each piece can 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, the first angle coefficient is 0 when the down event in the swipe operation is detected; and the first angle coefficient is 1 after a first preset time following the detection of the down event in the swipe operation.

[0324] One implementation also includes:

[0325] Responding to the up event in the sliding operation on the second interface, the current second angle coefficient of each card is obtained. The current second angle coefficient of each card is used to characterize the degree of change of each card from the maximum distortion angle to the preset initial angle.

[0326] The current angle of each piece is obtained based on the current maximum distortion angle of each piece and the current second angle coefficient.

[0327] For example, see Figure 13 The relevant description states that the current second angle coefficient can refer to the degree of angle change a2 in S419; the current angle of each piece can refer to the current angle B in S419.

[0328] In one implementation, the second angle coefficient is 1 at the moment the up event in the sliding operation is detected; and the second angle coefficient is 0 after a second preset duration following the detection of the up event in the sliding operation.

[0329] In the embodiments of this application, in response to a sliding operation applied to the second interface, the electronic device can acquire 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 card among multiple fully visible third cards and multiple stacked fourth cards; based on the position information of each card, the multiple third cards are fully visible on the third interface, and the multiple fourth cards are stacked; in the solution of this application, the electronic device can calculate the position information of each card among multiple fully visible third cards and multiple stacked fourth cards based on the detected sliding operation applied to the second interface, so that the card position changes with the change of the finger position in the sliding operation; in addition, multiple fourth cards can be stacked on the display screen, so that the user can efficiently obtain information of one or more cards, improving the user experience.

[0330] It should be understood that the above examples are provided to help those skilled in the art understand the embodiments of this application, and are not intended to limit the embodiments of this application to the specific values ​​or 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 this application.

[0331] Figure 15 A hardware system for an electronic device applicable to this application is shown.

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

[0333] For example, 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, a headphone jack 170D, a sensor module 180, buttons 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, a barometric pressure sensor 180C, a magnetic sensor 180D, an accelerometer sensor 180E, a distance sensor 180F, a proximity 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, Figure 15 The structure shown does not constitute a specific limitation on the electronic device 100. In other embodiments of this application, the electronic device 100 may include... Figure 15 The components shown may include more or fewer components, or the electronic device 100 may include... Figure 15 The components shown may be a combination of certain components, or the electronic device 100 may include... Figure 15 Sub-components of some of the components shown. Figure 15 The components shown can be implemented in hardware, software, or a combination of software and hardware.

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

[0336] For example, the controller can generate operation control signals based on the instruction opcode and timing signals to complete the control of fetching and executing instructions.

[0337] For example, the processor 110 may also include a memory for storing instructions and data. In some embodiments, the memory in the processor 110 is a cache memory. This memory can store instructions or data that the processor 110 has just used or that are used repeatedly. If the processor 110 needs to use the instruction or data again, it can retrieve it directly from the memory. This avoids repeated accesses, reduces the waiting time of the processor 110, and thus improves the efficiency of the system.

[0338] For example, in an embodiment of this application, the processor 110 may perform the following actions: displaying a first interface of a first application, wherein the first distance information first interface includes a card display area, the first distance information card display area includes multiple cards, and the first distance information card display area displays the topmost card among the multiple cards of the first distance information; responding 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, wherein the first distance information second interface includes multiple fully visible first cards and multiple stacked second cards, wherein the first distance information stacked display refers to displaying partial card content information in the cards; responding to a sliding operation applied to the first distance information second interface, acquiring distance information of the first distance information sliding operation; determining the position information of each card among the multiple fully visible third cards and the multiple stacked fourth cards according to the distance information of the first distance information sliding operation, 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; and displaying the multiple third cards of the first distance information in a fully visible manner and stacking the multiple fourth cards of the first distance information in the third interface according to the position information of each card of the first distance information.

[0339] Figure 15 The connection relationships between the modules shown are merely illustrative and do not constitute a limitation on the connection relationships between the modules of the electronic device 100. Optionally, the modules of the electronic device 100 may also adopt a combination of various connection methods described in the above embodiments.

[0340] The wireless communication function of electronic device 100 can be realized through devices such as antenna 1, antenna 2, mobile communication module 150, wireless communication module 160, modem processor and 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 one or more communication frequency bands. Different antennas can also be multiplexed to improve antenna utilization. For example, antenna 1 can be multiplexed as a diversity antenna for a wireless local area network. In some other embodiments, the antennas can be used in conjunction with tuning switches.

[0342] Electronic device 100 can implement display functions through a GPU, a display screen 194, and an application processor. The GPU is a microprocessor for image processing, connected to the display screen 194 and the application processor. The GPU is used to perform mathematical and geometric calculations and for graphics rendering. Processor 110 may include one or more GPUs, which execute program instructions to generate or modify display information.

[0343] For example, motor 191 can generate vibration. Motor 191 can be used for incoming call notifications or for haptic feedback. Motor 191 can produce different vibration feedback effects for touch operations applied to different applications. Motor 191 can also produce different vibration feedback effects for touch operations applied to different areas of display screen 194. Different application scenarios (e.g., time reminders, receiving messages, alarm clocks, and games) can correspond to different vibration feedback effects. Touch vibration feedback effects can also be customized.

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

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

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

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

[0348] For example, the gyroscope sensor 180B can be used to determine the motion attitude of the electronic device 100. In some embodiments, the gyroscope sensor 180B can determine the angular velocity of the electronic device 100 around three axes (i.e., the x-axis, y-axis, and z-axis). The gyroscope sensor 180B can be used for image stabilization. For example, when the shutter is pressed, the gyroscope sensor 180B detects the angle of the shake of the electronic device 100, calculates the distance that the lens module needs to compensate based on the angle, and allows the lens to counteract the shake of the electronic device 100 by moving in the opposite direction, thus achieving image stabilization. The gyroscope sensor 180B can also be used in scenarios such as navigation and motion-sensing games.

[0349] For example, in an embodiment of this application, the gyroscope sensor 180B can be used to collect jitter information, which can be used to represent the pose changes of the electronic device during the shooting process.

[0350] For example, the accelerometer 180E can detect the magnitude of the acceleration of the electronic device 100 in various directions (typically 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 accelerometer 180E can also be used to identify the attitude of the electronic device 100, serving as input parameters for applications such as screen orientation switching and pedometers.

[0351] For example, distance sensor 180F is used to measure distance. Electronic device 100 can measure distance via infrared or laser. In some embodiments, such as in a shooting scenario, electronic device 100 can utilize distance sensor 180F for distance measurement to achieve fast focusing.

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

[0353] Optionally, this application also provides a computer program product that, when executed by a processor, implements the method of any of the method embodiments in this application.

[0354] Optionally, the computer program product can be stored in memory, for example, as a program that is ultimately converted into an executable object file that can be executed by a processor after processes such as preprocessing, compilation, assembly, and linking.

[0355] Optionally, this application also provides a computer-readable storage medium storing a computer program thereon, which, when executed by a computer, implements the method of any of the method embodiments in this application. The computer program may be a high-level language program or an executable object program.

[0356] The computer-readable storage medium is, for example, memory. Memory can be volatile or non-volatile, or it can include both volatile and non-volatile memory. Non-volatile memory can be read-only memory (ROM), programmable read-only memory (PROM), erasable programmable read-only memory (EPROM), electrically erasable programmable read-only memory (EEPROM), or flash memory. Volatile memory can be random access memory (RAM), which serves as an external cache. By way of example, but not limitation, many forms of RAM are available, such as static random access memory (SRAM), dynamic random access memory (DRAM), synchronous dynamic random access memory (SDRAM), double data rate synchronous dynamic random access memory (DDR SDRAM), enhanced synchronous dynamic random access memory (ESDRAM), synchronous linked dynamic random access memory (SLDRAM), and direct rambus RAM (DR RAM).

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

[0358] In the several embodiments provided in this application, the systems, apparatuses, and methods disclosed can be implemented in other ways. For example, some features of the method embodiments described above can be ignored or not performed. The apparatus embodiments described above are merely illustrative; the division of units is only a logical functional division, and in actual implementation, there may be other division methods. Multiple units or components can be combined or integrated into another system. Furthermore, the coupling between units or components can be direct coupling or indirect coupling, including electrical, mechanical, or other forms of connection.

[0359] It should be understood that in the various embodiments of this application, the sequence number of each process does not imply 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 this application.

[0360] Furthermore, the terms "system" and "network" are often used interchangeably in this paper. The term "and / or" in this paper merely describes the relationship between related objects, indicating that three relationships can exist. For example, A and / or B can represent: A existing alone, A and B existing simultaneously, or B existing alone. Additionally, the character " / " in this paper generally indicates that the preceding and following related objects have an "or" relationship.

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

Claims

1. A method for displaying a card, characterized in that, include: The first interface of the first application is displayed. The first interface includes a card display area, which includes multiple cards. The card display area displays the topmost card among the multiple 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. The second interface includes a plurality of fully visible first cards and a plurality of stacked second cards, wherein the stacked display refers to displaying partial card content information. In response to a sliding operation applied to the second interface, the distance information of the sliding operation is obtained; Based on 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; Based on the position information of each card, the plurality of third cards are displayed in full visibility on the third interface, and the plurality of fourth cards are stacked and displayed. The step of determining the position information of each card among the multiple fully visible third cards and the multiple stacked fourth cards based on the distance information of the sliding operation includes: Based on the distance information of the sliding operation, a sliding coefficient is obtained, wherein the sliding coefficient is used to characterize the ratio between a first value and a first distance information, the first value is used to characterize the 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 characterize the preset top edge spacing between two adjacent fully visible cards. Based on 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 stacked fourth cards is determined.

2. The method as described in claim 1, characterized in that, The step of obtaining the sliding coefficient based on the distance information of the sliding operation includes: The sliding coefficient is obtained based on the distance information of the sliding operation, the preset card height information, and the first interval information. The first interval information is used to characterize the preset interval between two adjacent fully visible cards.

3. The method as described in claim 2, characterized in that, The plurality of third cards are arranged vertically, and the determination of the position information of each card among the plurality of fully visible third cards and the plurality of stacked fourth cards based on the distance information of the sliding operation includes: The first distance information is rounded up based on the distance information of the sliding operation to obtain the identifier of the first fully visible third card among the multiple fully visible third cards. Based on the distance information of the sliding operation, the identifier of the first fully visible third card, and the first preset threshold, a first stacking number is obtained. The first stacking number is used to characterize the number of cards of the multiple fourth cards displayed in the stack in the first display area, where the first display area is the top area of ​​the third interface. Based on the first stack quantity, the first distance information, the sliding coefficient, and the second interval information, the position information of the first fully visible third card is obtained. The second interval information is used to characterize the preset interval between two adjacent cards displayed in the stack.

4. The method as described in claim 3, characterized in that, The step of obtaining the position information of the first fully visible third card based on the first stack quantity, the first distance information, the sliding coefficient, and the second interval information includes: The location information of the first fully visible third card is obtained according to the following formula: The location information of the first fully visible third card = the first stack quantity Second interval information + first distance information (1 - the aforementioned sliding coefficient); Wherein, the first distance information is the sum of the preset card height information and the first interval information.

5. The method as described in claim 3 or 4, characterized in that, Also includes: Based on the position information of the first fully visible third card and the first distance information, the position information of each of the plurality of third cards, excluding the first fully visible third card, is obtained.

6. The method as described in claim 5, characterized in that, The step of obtaining the position information of each of the plurality of third cards, excluding the first fully visible third card, based on the position information of the first fully visible third card and the first distance information, includes: The position information of each third card is obtained according to the following formula: Location information of card A = (Identifier of card A - Identifier of the first fully visible third card) The first distance information plus the location information of the first fully visible third card; Wherein, card A is any one of the third cards.

7. The method as described in claim 5, characterized in that, The stacked fourth cards include multiple fourth cards stacked in a second display area, which is the bottom area of ​​the third interface, and also include: Based on 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.

8. The method as described in claim 7, characterized in that, The process of obtaining multiple fourth cards stacked and displayed in the second display area based on 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 includes: The position information of the multiple fourth cards stacked and displayed in the second display area can be obtained using the following formula: The location information of card B = the location information of the last fully visible third card + the first distance information The sliding coefficient + (the identifier of card B - the identifier of the last fully visible third card - the sliding coefficient) The second interval information; Wherein, card B is any one of the multiple fourth cards stacked and displayed in the second display area.

9. The method as described in claim 3 or 4, characterized in that, Also includes: Based on the first stacking quantity, the second interval information, and the sliding coefficient, the position information of the multiple fourth cards stacked and displayed in the first display area is obtained.

10. The method as described in claim 9, characterized in that, The step of obtaining the position information of the multiple fourth cards stacked and displayed in the first display area based on the first stacking quantity, the second interval information, and the sliding coefficient includes: The position information of the multiple fourth cards stacked 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 identifier of the first fully visible third card - the identifier of card C - 1 + the sliding coefficient) The second interval information; Wherein, card C is any one of the multiple fourth cards stacked and displayed in the first display area.

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

12. The method as described in claim 11, characterized in that, The current angle of each card is obtained using the following formula: The current angle of card D = the maximum distortion angle of card D. The first angle coefficient of card D.

13. The method as described in claim 11, characterized in that, At the moment when the down event in the sliding operation is detected, the first angle coefficient is 0; after a first preset time after the down event in the sliding operation is detected, the first angle coefficient is 1.

14. The method as described in claim 11, characterized in that, Also includes: In response to the up event in the sliding operation applied to the second interface, the current second angle coefficient of each card is obtained. The current second angle coefficient of each card is used to characterize the degree of change of each card from the maximum distortion angle to the preset initial angle. The current angle of each card is obtained based on the maximum distortion angle of each card and the current second angle coefficient.

15. The method as described in claim 14, characterized in that, At the moment the up event in the sliding operation is detected, the second angle coefficient is 1; after a second preset time following the detection of the up event in the sliding operation, the second angle coefficient is 0.

16. An electronic device, characterized in that, include: One or more processors and memory; The memory is coupled to the one or more processors, the memory being used to store computer program code, the computer program code including computer instructions, the one or more processors invoking the computer instructions to cause the electronic device to perform the display card method as described in any one of claims 1 to 15.

17. A chip system, characterized in that, The chip system is applied to an electronic device, the chip system including one or more processors, the processors being configured to invoke computer instructions to cause the electronic device to perform the display card method as described in any one of claims 1 to 15.

18. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores a computer program that, when executed by an electronic device, causes the electronic device to perform the method of the display card according to any one of claims 1 to 15.

Images