Card display method and related device

Abstract

The invention provides a card display method and a related device, an electronic device can receive a sliding operation of a user on a card pile when displaying an interface including the card pile, and the electronic device can determine and display a display effect of the card pile according to a sliding type and a sliding distance of the sliding operation. Therefore, the user can realize various display effects of the card pile through the sliding operation, and the operation complexity of the card pile is simplified.

Description

Technical Field

[0001] The present application relates to the field of computer vision technology, and in particular to a card display method and related devices. Background Art

[0002] With the continuous development of communication technology, electronic devices (such as smart phones) are becoming more and more popular and diversified. The usability and friendliness of the human-computer interaction interface between electronic devices and users are receiving more and more attention.

[0003] Currently, electronic devices can add widgets in the form of cards on the desktop, negative one screen, etc., referred to as cards. Electronic devices can also stack multiple cards together to form a card pile. However, the current operation steps for triggering the viewing of multiple cards in the card pile are relatively cumbersome. Summary of the invention

[0004] The present application provides a card display method and related devices, which can enable users to achieve various display effects of a card stack through sliding operations, thereby simplifying the complexity of operating the card stack.

[0005] In a first aspect, the present application provides a card display method, comprising: displaying a first interface, the first interface including a card stack, a first card being displayed in an area where the card stack is located; receiving a first sliding operation started by a user from the area where the card stack is located; displaying a portion of the first card and a portion of a second card in the area where the card stack is located if the sliding distance of the first sliding operation in a first direction does not reach a first distance threshold; displaying a portion of the first card, a portion of the second card, and a portion of the third card in the area where the card stack is located if the sliding distance of the first sliding operation in the first direction reaches or exceeds the first distance threshold and does not reach a second distance threshold; wherein the first distance threshold is less than the second distance threshold; when the sliding distance of the first sliding operation in the first direction reaches or exceeds the second distance threshold, displaying a second interface, the second interface including all of the first card, all of the second card, and all of the third card.

[0006] Through a card display method provided by the present application, when an electronic device displays an interface including a card stack, it can receive a first sliding operation of a user sliding on the card stack in a first direction, and the electronic device can determine and display the display effect of the card stack according to the sliding distance of the first sliding operation. In this way, the user can achieve a variety of display effects of the card stack through sliding operations, simplifying the complexity of operating the card stack.

[0007] In one possible implementation, the card queue of the card stack includes the 1st card to the Nth card arranged in a preset order, the first card is the 1st card in the card queue, 1<P<(N-1); when displaying the first interface, the method also includes: laying out the 1st card to the Pth card and the Nth card in the card queue in sequence from the top layer to the bottom layer in the area where the card stack is located.

[0008] In this way, only P+1 layers of cards need to be laid out on the card pile instead of all N cards in the card queue on the card pile. While ensuring the sliding display effect on the card pile, the complexity of drawing the card pile by the electronic device can be reduced, saving the processing resources of the electronic device.

[0009] In one possible implementation, the card queue of the card stack includes the 1st to Nth cards arranged in a preset order, the first card is the 1st card in the card queue, 1<N-1≤P; the method also includes: laying out the 1st to Nth cards in the card queue in sequence from the top layer to the bottom layer in the area where the card stack is located.

[0010] In one possible implementation, the card queue of the card stack includes the 1st card to the Nth card arranged in a preset order, the first card is the Mth card in the card queue, 1<M≤N, M+P-1≤N; the method also includes: arranging the Mth card to the (M+P-1)th card and the (M-1)th card in the card queue in sequence from the top layer to the bottom layer in the area where the card stack is located.

[0011] In this way, only P+1 layers of cards need to be laid out on the card pile instead of all N cards in the card queue on the card pile. While ensuring the sliding display effect on the card pile, the complexity of drawing the card pile by the electronic device can be reduced, saving the processing resources of the electronic device.

[0012] In one possible implementation, the card queue of the card stack includes the 1st to Nth cards arranged in a preset order, the first card is the Mth card in the card queue, 1<M≤N, M+P-1>N, 1<P<(N-1); when displaying the first interface, the method also includes: laying out the Mth to Nth cards, the 1st to (M+P-1-N)th, and the (M-1)th cards in the card queue from the top layer to the bottom layer in the area where the card stack is located.

[0013] In this way, only P+1 layers of cards need to be laid out on the card pile instead of all N cards in the card queue on the card pile. While ensuring the sliding display effect on the card pile, the complexity of drawing the card pile by the electronic device can be reduced, saving the processing resources of the electronic device.

[0014] In one possible implementation, the card queue of the card stack includes the 1st to Nth cards arranged in a preset order, the first card is the Mth card in the card queue, 1<M≤N, M+P-1>N, 1<N-1≤P; when displaying the first interface, the method also includes: laying out the Mth to Nth cards and the 1st to (M-1)th cards in the card queue from the top layer to the bottom layer in the area where the card stack is located.

[0015] In a possible implementation, the method further includes: when multiple cards are laid out in sequence from the top layer to the bottom layer in the area where the card stack is located, the first card is set to be completely opaque, and the remaining cards laid out in the area where the card stack is located are set to be completely transparent, and the remaining cards do not include the first card.

[0016] In this way, when the first card is on the top layer, the transparency of the first card is set to be completely opaque, and the cards at the bottom layer of the first card are set to be completely transparent, which does not affect the effect of displaying the first card on the top layer of the card stack.

[0017] In a possible implementation, the method further includes: if the first sliding operation ends when the sliding distance in the first direction does not reach a third distance threshold, displaying the entire first card in the area where the card stack is located, and the third distance threshold is less than the first distance threshold.

[0018] In this way, it is possible to prevent the user from changing the display of the cards on the card stack due to accidental touch.

[0019] In one possible implementation, if the sliding operation ends when the sliding distance in the first direction is less than a third distance threshold, the entire first card is displayed in the area where the card stack is located, specifically including: if the first sliding operation ends when the sliding distance in the first direction does not reach the third distance threshold, the first card rebounds in the area where the card stack is located along the opposite direction of the first direction until the entire first card is displayed in the area where the card stack is located.

[0020] In one possible implementation, the method also includes: if the first sliding operation ends when the sliding distance in the first direction reaches or exceeds a third distance threshold and does not reach the second distance threshold, the entire second card is displayed in the area where the card stack is located, and the third distance threshold is less than the first distance threshold.

[0021] In this way, the first sliding operation can trigger the card stack to switch the card displayed on the top layer.

[0022] In one possible implementation, when the sliding distance of the first sliding operation in the first direction does not reach the first distance threshold, the portion of the second card is more transparent than the portion of the first card; and / or, when the sliding distance of the first sliding operation in the first direction reaches or exceeds the first distance threshold and does not reach the second distance threshold, the portion of the second card is more transparent than the portion of the first card, and the portion of the third card is more transparent than the portion of the second card.

[0023] In this way, the hierarchical relationship between multiple stacked cards can be reflected through the different transparency of the cards.

[0024] In one possible implementation, when the sliding distance of the first sliding operation in the first direction does not reach the first distance threshold, as the sliding distance of the first sliding operation in the first direction increases, the portion of the first card displayed in the area where the card stack is located gradually decreases, and the portion of the second card displayed in the area where the card stack is located gradually increases; and / or, when the sliding distance of the first sliding operation in the first direction reaches or exceeds the first distance threshold and does not reach the second distance threshold, as the sliding distance of the first sliding operation in the first direction increases, the portion of the first card displayed in the area where the card stack is located gradually decreases, the portion of the second card displayed in the area where the card stack is located gradually increases, and the portion of the third card displayed in the area where the card stack is located gradually increases or remains unchanged.

[0025] In a possible implementation, in the second interface, the display area of ​​the first card is located in the first direction of the display area of ​​the second card, and the display area of ​​the second card is located in the first direction of the third card.

[0026] In one possible implementation, the method also includes: when displaying the first interface, receiving a second sliding operation from the user starting from the area where the card stack is located; when the sliding distance of the second sliding operation in the second direction does not reach a fourth distance threshold, displaying a portion of the fourth card and a portion of the first card in the area where the card stack is located; wherein the second direction is opposite to the first direction; when the sliding distance of the second sliding operation in the second direction reaches or exceeds the fourth distance threshold and does not reach the fifth distance threshold, displaying a portion of the fourth card, a portion of the first card, and a portion of the second card in the area where the card stack is located; wherein the fourth distance threshold is less than the fifth distance threshold; when the sliding distance of the second sliding operation in the second direction reaches or exceeds the fifth distance threshold, displaying a third interface, the third interface including all of the fourth card, all of the first card, and all of the second card.

[0027] In this way, when the electronic device displays an interface including a card stack, it can receive a second sliding operation of the user sliding on the card stack in a second direction, and the electronic device can determine and display the display effect of the card stack according to the sliding distance of the second sliding operation. In this way, the user can achieve a variety of display effects of the card stack through sliding operations, simplifying the complexity of operating the card stack.

[0028] In a possible implementation, the method further includes: when the sliding distance of the second sliding operation in the second direction reaches the fourth distance threshold, displaying the entire fourth card in the area where the card stack is located.

[0029] In a possible implementation, the method further includes: if the second sliding operation ends when the sliding distance in the second direction does not reach a sixth distance threshold, displaying the entire first card in the area where the card stack is located, and the sixth distance threshold is less than the fourth distance threshold.

[0030] In this way, it is possible to prevent the user from changing the display of the cards on the card stack due to accidental touch.

[0031] In one possible implementation, if the second sliding operation ends when the sliding distance in the second direction is less than the sixth distance threshold, the entire first card is displayed in the area where the card stack is located, specifically including: if the second sliding operation ends when the sliding distance in the second direction does not reach the sixth distance threshold, the fourth card rebounds along the first direction in the area where the card stack is located until the entire first card is displayed in the area where the card stack is located.

[0032] In one possible implementation, the method also includes: if the second sliding operation ends when the sliding distance in the second direction reaches or exceeds the sixth distance threshold and does not reach the fifth distance threshold, the entire fourth card is displayed in the area where the card stack is located, and the sixth distance threshold is less than the first distance threshold.

[0033] In this way, the first sliding operation can trigger the card stack to switch the card displayed on the top layer.

[0034] In one possible implementation, when the sliding distance of the second sliding operation in the second direction does not reach the fourth distance threshold, the portion of the first card is more transparent than the portion of the fourth card; and / or, when the sliding distance of the second sliding operation in the second direction reaches or exceeds the fourth distance threshold and does not reach the fifth distance threshold, the portion of the first card is more transparent than the portion of the fourth card, and the portion of the second card is more transparent than the portion of the first card.

[0035] In this way, the hierarchical relationship between multiple stacked cards can be reflected through the different transparency of the cards.

[0036] In one possible implementation, when the sliding distance of the second sliding operation in the second direction does not reach the fourth distance threshold, as the sliding distance of the second sliding operation in the second direction increases, the portion of the fourth card displayed in the area where the card stack is located gradually increases, and the portion of the first card displayed in the area where the card stack is located gradually decreases; and / or, when the sliding distance of the second sliding operation in the second direction reaches or exceeds the fourth distance threshold and does not reach the fifth distance threshold, as the sliding distance of the second sliding operation in the second direction increases, the portion of the fourth card displayed in the area where the card stack is located gradually decreases, the portion of the first card displayed in the area where the card stack is located gradually decreases, and the portion of the second card displayed in the area where the card stack is located gradually increases or remains unchanged.

[0037] In a possible implementation, in the third interface, the display area of ​​the fourth card is located in the first direction of the display area of ​​the first card, and the display area of ​​the first card is located in the first direction of the second card.

[0038] In a second aspect, the present application provides an electronic device comprising a display screen, one or more processors and one or more memories; wherein the display screen, the one or more memories are coupled to the one or more processors, the one or more memories are used to store computer program code, and the computer program code includes computer instructions, and when the one or more processors execute the computer instructions, the method in any possible implementation of the above-mentioned first aspect is executed.

[0039] In a third aspect, the present application provides another electronic device, comprising one or more functional modules, wherein the one or more functional modules are used to execute the method in any possible implementation of the first aspect above.

[0040] In a fourth aspect, the present application provides a chip, which is applied to an electronic device, and the chip includes a processing circuit and an interface circuit. The interface circuit is used to receive instructions and transmit them to the processing circuit, and the processing circuit is used to run the instructions to execute the method in any possible implementation of any of the above aspects.

[0041] In a fifth aspect, the present application provides a computer-readable storage medium, comprising instructions, characterized in that when the instructions are executed on an electronic device, the method in any possible implementation of the above-mentioned first aspect is executed.

[0042] In a sixth aspect, an embodiment of the present application provides a computer program product, which, when executed on a computer, enables the computer to execute a method in any possible implementation of any of the above aspects. BRIEF DESCRIPTION OF THE DRAWINGS

[0043] Figure 1 A schematic diagram of the hardware structure of an electronic device provided in an embodiment of the present application;

[0044] Figure 2A-2H A schematic diagram of an interface for a long swipe on a card stack provided by a set of swipe-up operations in an embodiment of the present application;

[0045] Figure 3A-Figure 3F A schematic diagram of an interface for a short swipe on a card stack provided by a set of swipe-up operations in an embodiment of the present application;

[0046] Figure 4A-Figure 4I A schematic diagram of an interface for a long slide on a card stack provided by a set of sliding operations according to an embodiment of the present application;

[0047] Figure 5A-5F A schematic diagram of an interface for a short slide on a card stack provided by a set of sliding operations according to an embodiment of the present application;

[0048] Figure 6 A schematic diagram of a software architecture of an electronic device provided in an embodiment of the present application;

[0049] Figure 7 A schematic diagram of a card stack initialization process provided in an embodiment of the present application;

[0050] Figure 8 A schematic diagram of an initial layout of a card stack provided in an embodiment of the present application;

[0051] Fig. 9 A schematic diagram of the display process during the sliding up of a card stack provided in an embodiment of the present application;

[0052] Figures 10A-10D A schematic diagram of changes in transparency and scaling of cards laid out on a card stack during a set of upward sliding processes provided in an embodiment of the present application;

[0053] Fig.11 A schematic diagram of the display process during the sliding down of a card stack provided in an embodiment of the present application;

[0054] Figures 12A-12D A schematic diagram of changes in transparency and scaling of cards arranged on a card stack during a set of sliding movements provided by an embodiment of the present application;

[0055] Fig.13 A flowchart of a card display method provided in an embodiment of the present application. DETAILED DESCRIPTION

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

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

[0058] The following introduces the hardware structure of an electronic device provided in an embodiment of the present application.

[0059] Figure 1 A schematic structural diagram of an electronic device 100 provided in an embodiment of the present application is shown.

[0060] It should be understood that Figure 1 The electronic device 100 shown is only an example, and the electronic device 100 may have more Figure 1 More or fewer components may be shown, two or more components may be combined, or there may be a different configuration of components. Figure 1 The various components shown in the EMBODIMENTS 2000 may be implemented in hardware, software, or a combination of hardware and software, including one or more signal processing and / or application specific integrated circuits.

[0061] The electronic device 100 may include: a processor 110, an external memory interface 120, an internal memory 121, an antenna 1, an antenna 2, a mobile communication module 150, a wireless communication module 160, an audio module 170, a speaker 170A, a receiver 170B, a microphone 170C, an earphone interface 170D, a sensor module 180, a button 190, a motor 191, an indicator 192, a camera 193, a display screen 194, and a subscriber identification module (SIM) card interface 195, etc. Among them, the sensor module 180 may include a gyroscope sensor 180B, an acceleration sensor 180E, and a touch sensor 180K, etc.

[0062] It is to be understood that the structure illustrated in the embodiment of the present invention does not constitute a specific limitation on the electronic device 100. In other embodiments of the present application, the electronic device 100 may include more or fewer components than shown in the figure, or combine some components, or separate some components, or arrange the components differently. The components shown in the figure may be implemented in hardware, software, or a combination of software and hardware.

[0063] The processor 110 may include one or more processing units, for example, the processor 110 may include an application processor (AP), a modem processor, a graphics processor (GPU), an image signal processor (ISP), a controller, a memory, a video codec, a digital signal processor (DSP), a baseband processor, and / or a neural-network processing unit (NPU), etc. Different processing units may be independent devices or integrated into one or more processors.

[0064] The controller may be the nerve center and command center of the electronic device 100. The controller may generate an operation control signal according to the instruction operation code and the timing signal to complete the control of fetching and executing instructions.

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

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

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

[0068] The mobile communication module 150 can provide solutions for wireless communications including 2G / 3G / 4G / 5G, etc., applied to the electronic device 100. The mobile communication module 150 may include at least one filter, a switch, a power amplifier, a low noise amplifier (LNA), etc. The mobile communication module 150 can receive electromagnetic waves from the antenna 1, and filter, amplify, and process the received electromagnetic waves, and transmit them to the modulation and demodulation processor for demodulation. The mobile communication module 150 can also amplify the signal modulated by the modulation and demodulation processor, and convert it into electromagnetic waves for radiation through the antenna 1. In some embodiments, at least some of the functional modules of the mobile communication module 150 can be set in the processor 110. In some embodiments, at least some of the functional modules of the mobile communication module 150 can be set in the same device as at least some of the modules of the processor 110.

[0069] The modem processor may include a modulator and a demodulator. Among them, the modulator is used to modulate the low-frequency baseband signal to be sent into a medium-high frequency signal. The demodulator is used to demodulate the received electromagnetic wave signal into a low-frequency baseband signal. The demodulator then transmits the demodulated low-frequency baseband signal to the baseband processor for processing. After the low-frequency baseband signal is processed by the baseband processor, it is passed to the application processor. The application processor outputs a sound signal through an audio device (not limited to a speaker 170A, a receiver 170B, etc.), or displays an image or video through a display screen 194. In some embodiments, the modem processor may be an independent device. In other embodiments, the modem processor may be independent of the processor 110 and be set in the same device as the mobile communication module 150 or other functional modules.

[0070] The wireless communication module 160 can provide wireless communication solutions including wireless local area networks (WLAN) (such as wireless fidelity (Wi-Fi) networks), bluetooth (BT), global navigation satellite system (GNSS), frequency modulation (FM), near field communication (NFC), infrared (IR), etc., which are applied to the electronic device 100. The wireless communication module 160 can be one or more devices integrating at least one communication processing module. The wireless communication module 160 receives electromagnetic waves via the antenna 2, modulates the frequency of the electromagnetic wave signal and performs filtering, and sends the processed signal to the processor 110. The wireless communication module 160 can also receive the signal to be sent from the processor 110, modulate the frequency of it, amplify it, and convert it into electromagnetic waves for radiation through the antenna 2.

[0071] In some embodiments, the antenna 1 of the electronic device 100 is coupled to the mobile communication module 150, and the antenna 2 is coupled to the wireless communication module 160, so that the electronic device 100 can communicate with the network and other devices through wireless communication technology. The wireless communication technology may include global system for mobile communications (GSM), general packet radio service (GPRS), code division multiple access (CDMA), wideband code division multiple access (WCDMA), time-division code division multiple access (TD-SCDMA), long term evolution (LTE), BT, GNSS, WLAN, NFC, FM, and / or IR technology. The GNSS may include a global positioning system (GPS), a global navigation satellite system (GLONASS), a Beidou navigation satellite system (BDS), a quasi-zenith satellite system (QZSS) and / or a satellite based augmentation system (SBAS).

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

[0073] The display screen 194 is used to display images, videos, etc. The display screen 194 includes a display panel. The display panel can be a liquid crystal display (LCD). The display screen panel can also be made of an organic light-emitting diode (OLED), an active-matrix organic light-emitting diode or an active-matrix organic light-emitting diode (AMOLED), a flexible light-emitting diode (FLED), miniled, microled, micro-oled, a quantum dot light emitting diode (QLED), etc. In some embodiments, the electronic device 100 may include 1 or L display screens 194, where L is a positive integer greater than 1.

[0074] The electronic device 100 can realize the shooting function through ISP, camera 193, video codec, GPU, display screen 194 and application processor.

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

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

[0077] The digital signal processor is used to process digital signals, and can process not only digital image signals but also other digital signals. For example, when the electronic device 100 is selecting a frequency point, the digital signal processor is used to perform Fourier transform on the frequency point energy.

[0078] Video codecs are used to compress or decompress digital videos. The electronic device 100 may support one or more video codecs. Thus, the electronic device 100 may play or record videos in a variety of coding formats, such as Moving Picture Experts Group (MPEG) 1, MPEG2, MPEG3, MPEG4, etc.

[0079] NPU is a neural network (NN) computing processor. By drawing on the structure of biological neural networks, such as the transmission mode between neurons in the human brain, it can quickly process input information and can also continuously self-learn. Through NPU, applications such as intelligent cognition of electronic device 100 can be realized, such as image recognition, face recognition, voice recognition, text understanding, etc.

[0080] The external memory interface 120 can be used to connect an external memory card, such as a Micro SD card, to expand the storage capacity of the electronic device 100. The external memory card communicates with the processor 110 through the external memory interface 120 to implement a data storage function, such as storing music, video and other files in the external memory card.

[0081] The internal memory 121 can be used to store computer executable program codes, which include instructions. The processor 110 executes various functional applications and data processing of the electronic device 100 by running the instructions stored in the internal memory 121. The internal memory 121 may include a program storage area and a data storage area. Among them, the program storage area may store an operating system, an application required for at least one function (such as a sound playback function, an image playback function, etc.), etc. The data storage area may store data created during the use of the electronic device 100 (such as audio data, a phone book, etc.), etc. In addition, the internal memory 121 may include a high-speed random access memory, and may also include a non-volatile memory, such as at least one disk storage device, a flash memory device, a universal flash storage (UFS), etc.

[0082] The electronic device 100 can implement audio functions such as music playing and recording through the audio module 170, the speaker 170A, the receiver 170B, the microphone 170C, the headphone jack 170D, and the application processor.

[0083] The audio module 170 is used to convert digital audio information into analog audio signal output, and is also used to convert analog audio input into digital audio signals. The audio module 170 can also be used to encode and decode audio signals. In some embodiments, the audio module 170 can be arranged in the processor 110, or some functional modules of the audio module 170 can be arranged in the processor 110.

[0084] The speaker 170A, also called a "speaker", is used to convert an audio electrical signal into a sound signal. The electronic device 100 can listen to music or listen to a hands-free call through the speaker 170A.

[0085] The receiver 170B, also called a "earpiece", is used to convert audio electrical signals into sound signals. When the electronic device 100 receives a call or voice message, the voice can be received by placing the receiver 170B close to the human ear.

[0086] Microphone 170C, also called "microphone" or "microphone", is used to convert sound signals into electrical signals. When making a call or sending a voice message, the user can speak by putting their mouth close to microphone 170C to input the sound signal into microphone 170C. The electronic device 100 can be provided with at least one microphone 170C. In other embodiments, the electronic device 100 can be provided with two microphones 170C, which can not only collect sound signals but also realize noise reduction function. In other embodiments, the electronic device 100 can also be provided with three, four or more microphones 170C to collect sound signals, reduce noise, identify the sound source, realize directional recording function, etc.

[0087] The earphone interface 170D is used to connect a wired earphone and can be a USB interface 130 or a 3.5 mm open mobile terminal platform (OMTP) standard interface or a cellular telecommunications industry association of the USA (CTIA) standard interface.

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

[0089] The acceleration sensor 180E can detect the magnitude of the acceleration of the electronic device 100 in all directions (generally three axes). When the electronic device 100 is stationary, the magnitude and direction of gravity can be detected. It can also be used to identify the posture of the electronic device and is applied to applications such as horizontal and vertical screen switching and pedometers.

[0090] The touch sensor 180K is also called a "touch panel". The touch sensor 180K can be set on the display screen 194, and the touch sensor 180K and the display screen 194 form a touch screen, also called a "touch screen". The touch sensor 180K is used to detect touch operations acting on or near it. The touch sensor can pass the detected touch operation to the application processor to determine the type of touch event. Visual output related to the touch operation can be provided through the display screen 194. In other embodiments, the touch sensor 180K can also be set on the surface of the electronic device 100, which is different from the position of the display screen 194.

[0091] The button 190 includes a power button, a volume button, etc. The button 190 may be a mechanical button. It may also be a touch button. The electronic device 100 may receive a button input and generate a key signal input related to the user settings and function control of the electronic device 100. The motor 191 may generate a vibration prompt. The SIM card interface 195 is used to connect a SIM card. The SIM card may be connected to or disconnected from the electronic device 100 by inserting the SIM card interface 195 or pulling the SIM card interface 195 out.

[0092] In the embodiment of the present application, the device type of the electronic device 100 can be a mobile phone, a tablet computer, a handheld computer, a desktop computer, a laptop computer, an ultra-mobile personal computer (UMPC), a netbook, a cellular phone, a personal digital assistant (PDA), as well as smart home devices such as smart large screens and smart speakers, wearable devices such as smart bracelets, smart watches, and smart glasses, extended reality (extended reality, XR) devices such as augmented reality (AR), virtual reality (VR), and mixed reality (MR), vehicle-mounted devices or smart city devices, and the like.

[0093] The present application provides a card display method. When the electronic device 100 displays an interface including a card stack, it can receive a user's sliding operation on the card stack. The electronic device 100 can determine and display the display effect of the card stack according to the sliding type and sliding distance of the sliding operation. In this way, the user can achieve a variety of display effects of the card stack through sliding operations, simplifying the complexity of operating the card stack.

[0094] A card display method provided in an embodiment of the present application is introduced below in conjunction with an application scenario.

[0095] In some application scenarios, the electronic device 100 may display a card stack on the first interface, and display card 1 on the top layer of the card stack. The card queue of the card stack includes N cards. The electronic device 100 may receive a swipe-up operation on the card stack by the user, and in the process of the swipe-up operation reaching a distance threshold 1 (for example, 2 / 3 of the card height) in the direction of the top of the display screen, the electronic device 100 may display a portion of card 1 and a portion of card 2 in the card stack, wherein card 2 is in the next layer of card 1. In the process of the swipe-up operation reaching a distance threshold 2 (for example, 9 / 10 of the card height) in the direction of the top of the electronic device 100 from the distance threshold 1, the electronic device 100 may display a portion of card 1, a portion of card 2, and a portion of card 3 in the card stack, wherein card 3 is in the next layer of card 2, and the distance threshold 1 is less than the distance threshold 2. When the swipe-up operation exceeds the distance threshold 2 in the direction of the top of the display screen, the electronic device 100 may switch the card stack from the stacked state to the unfolded state, and display a card stack unfolding interface, wherein the card stack unfolding interface may include multiple cards stacked in the card stack. In this way, users can achieve a variety of display effects of the card stack by swiping up, simplifying the complexity of operating the card stack.

[0096] It should be noted that the first interface displaying the card stack may be a desktop, a negative one screen interface, a control center interface, a service center interface, etc., which is not limited in the embodiments of the present application.

[0097] In the embodiment of the present application, the sliding distance may be the sliding distance from the bottom to the top of the display screen, that is, the sliding distance in the positive direction of the Y axis of the display screen, and the positive direction of the X axis of the display screen may refer to the direction from the left side to the right side of the display screen, where the X axis is perpendicular to the Y axis. The card height refers to the height of the card in the card stack in the Y axis direction of the display screen.

[0098] For example, Figure 2AAs shown, the electronic device 100 can display a desktop 210, wherein the desktop 210 displays a page with application icons, and the page includes multiple application icons (for example, a browser application icon, a stock application icon, a calculator application icon, a voice assistant application icon, a video application icon, a weather application icon, a theme application icon, a map application icon, a gallery application icon, a memo application icon, a setting application icon, an application folder icon, etc.). A page indicator is also displayed below the page with the application icons to indicate the total number of pages on the desktop and the positional relationship between the currently displayed page and other pages. For example, the desktop 210 may include three pages, and the black dot in the page indicator 211 is on the far left, which may indicate that the currently displayed page is the leftmost page of the three pages.

[0099] in, Figure 2A The electronic device 100 is identified in Figure 2A When placed in a manner, the phase positions of the top, bottom, left, and right sides are shown. These positions are used to describe the positions on the display screen of the electronic device 100, or the positions on the interface displayed by the electronic device 100. In addition, downward refers to from the top to the bottom, upward refers to from the bottom to the top, rightward refers to from the left to the right, and leftward refers to from the right to the left. The description of the positions also applies to the description of the subsequent figures.

[0100] When the page displayed on the desktop 210 is the leftmost page on the desktop, the electronic device 100 can receive a right swipe operation on the desktop 210 by the user, and in response to the right swipe operation, the electronic device 100 can display the following Figure 2B The negative one screen interface 220 is shown.

[0101] like Figure 2B As shown, the negative one screen interface 220 may include a card pile 230 in a stacked state. There are N cards in the card queue of the card pile 230, where N is an integer greater than 1. At this time, the top layer of the card pile 230 displays a card 231. Optionally, the electronic device 100 may display a card pile indicator ( Figure 2B (not shown in the figure), the card stack indicator can be used to indicate the total number of cards in the card stack, as well as the positional relationship between the card currently displayed at the top layer of the card stack 230 and other cards in the card stack 230.

[0102] The electronic device 100 can receive a swipe-up operation performed by the user on the card stack 230. The starting position of the swipe-up operation performed by the user on the card stack 230 can be the position of the card stack 230, and the trend of the swipe-up operation can be in the direction of the top of the display screen, and the swipe-up operation is not required to be roughly parallel to the left and right sides of the touch screen. For example, the swipe-up operation can start from the card stack 230 and slide toward the left side of the top of the display screen, or slide toward the right side of the top of the display screen, or slide toward the left side of the top of the display screen first and then slide toward the right side of the top of the display screen, or slide toward the right side of the top of the display screen first and then slide toward the left side of the top of the display screen. The embodiments of the present application are not limited here.

[0103] like Figure 2C As shown, when the upward sliding distance of the sliding operation reaches 1 / 2 of the card height, the electronic device 100 can display the lower part of the card 231 and the lower part of the card 232 on the card stack 230, and the lower part of the card 231 gradually decreases as the sliding distance increases, and the lower part of the card 232 gradually increases as the sliding distance increases. In the card stack 230, the card 232 is located in the lower layer of the card 231.

[0104] like Figure 2D , Figure 2E As shown, when the upward sliding distance of the sliding operation increases from 1 / 2 of the card height to 9 / 10 of the height of the card stack 230, the electronic device 100 can display the lower part of the card 231, the lower part of the card 232, and the lower part of the card 233 on the card stack 230, and the lower part of the card 231 gradually decreases as the sliding distance increases, and the lower part of the card 232 gradually increases as the sliding distance increases. In the card stack 230, the card 233 is located in the next layer of the card 232.

[0105] like Figure 2F As shown, when the upward sliding distance of the swipe-up operation exceeds 9 / 10 of the card height, the electronic device 100 can switch the card stack 230 from the stacked state to the expanded state, and display the expansion animation 240 during the switching from the stacked state to the expanded state. When the electronic device 100 displays the expansion animation 240, the first T cards and the Nth card in the card queue of the card stack 230 starting from the top card are gradually expanded. The first T cards may include card 231, card 232, card 233, and card 234. Among them, the Nth card in the card stack 230 may be card 235. T is less than N.

[0106] like Figure 2GAs shown, after the card stack 230 is fully unfolded, the electronic device 100 can display the card stack unfolding interface 250. Among them, the card stack unfolding interface 250 can include the first T cards and the Nth card in the card queue of the above-mentioned card stack 230 from the top layer to the back. For example, the card stack unfolding interface 250 may include card 231, card 232, card 233, card 234 and the lower part of card 235. Among them, card 232 can be displayed below card 231, card 233 can be displayed below card 232, card 234 can be displayed below card 234, and card 234 can cover the upper part of card 235, so that the lower part of card 235 leaks out.

[0107] The electronic device 100 may receive and respond to the user's operation on the card stack expansion interface 250, and switch to display other cards in the card queue of the card stack 230 on the card stack expansion interface 250. The electronic device 100 may also receive and respond to the user's operation on the card stack expansion interface 250, and adjust the arrangement order of the N cards in the card queue of the card stack 230. For example, arrange card 231 as the second in the card queue, and arrange card 231 as the first in the card queue.

[0108] Optionally, the card stack expansion interface 250 may also include a smart carousel control 251 and a smart recommendation control 252. The smart carousel control 251 may be used to trigger the electronic device 100 to periodically and automatically switch the card displayed on the top layer of the card stack 230. The smart recommendation control 252 may be used to trigger the electronic device 100 to automatically insert a new card into the card stack 230 according to the recommended content.

[0109] like Figure 2H As shown, when the electronic device 100 receives the user's operation to exit the above-mentioned card stack expansion interface 250 (for example, clicking on the blank area of ​​the card stack expansion interface 250), the electronic device 100 can exit the above-mentioned card stack expansion interface 250 and display the above-mentioned negative one screen interface 220, wherein the electronic device 100 can display card 231 on the top layer of the card stack 230 in the negative one screen interface 220.

[0110] In a possible implementation, when the upward sliding distance of the user's swipe-up operation on the card stack reaches a distance threshold 3 (for example, 1 / 2 of the card height), the electronic device 100 can display a portion of card 1 and a portion of card 2 on the card stack, and as the distance of the swipe-up operation increases, a smaller portion of card 1 is displayed on the card stack, and a larger portion of card 2 is displayed on the card stack. If the user's swipe-up operation on the card stack ends when the upward sliding distance is less than the distance threshold 3 (for example, 1 / 2 of the card height), the electronic device 100 can control card 1 to rebound downward in the card stack until it gradually completely covers card 2.

[0111] For example, Figure 3A , Figure 3B As shown, when the electronic device 100 detects that the upward sliding distance between the end position and the starting position of the user's sliding operation on the card stack 230 is less than 1 / 2 of the card height of the card stack 230, the electronic device 100 can control the card 231 displayed on the top layer of the card stack 230 to rebound to completely cover the card 232.

[0112] In one possible implementation, if the user's swiping operation on the card stack ends when the upward sliding distance is between distance threshold 3 (for example, 1 / 2 card height) and distance threshold 2 (for example, 9 / 10 card height), the electronic device 100 can control card 2 to be displayed on the top layer of the card stack.

[0113] For example, Figure 3C , Figure 3D As shown, when the upward sliding distance of the swipe operation performed by the user on the card stack reaches 1 / 2 of the card height, the electronic device 100 can display part of card 231 and part of card 232 on the card stack, and as the distance of the swipe operation increases, the part of card 231 displayed on the card stack 230 becomes smaller, and the part of card 232 displayed on the card stack 230 becomes larger. When the electronic device 100 detects that the upward sliding distance between the end position and the start position of the swipe operation performed by the user on the card stack 230 is between 1 / 2 and 2 / 3 of the card height, the card 232 can be switched to the top layer of the card stack 230, and the card 231 can be placed at the bottom layer of the card stack 230.

[0114] Another example is Figure 3E , Figure 3FAs shown, in the process that the upward sliding distance of the swipe operation performed by the user on the card stack increases from 2 / 3 of the card height to 9 / 10 of the card height, the electronic device 100 can display part of card 231, part of card 232, and part of card 233 on the card stack. Among them, as the distance of the swipe operation gradually increases, the part of card 231 displayed on the card stack 230 gradually decreases, and the part of card 232 displayed on the card stack 230 gradually increases. When the electronic device 100 detects that the upward sliding distance between the end position and the starting position of the swipe operation performed by the user on the card stack 230 is between 2 / 3 of the card height and 9 / 10 of the card height, the card 232 can be switched to the top layer of the card stack 230, and the card 231 can be placed at the bottom layer of the card stack 230.

[0115] In some application scenarios, the electronic device 100 may display a card stack on the first interface, and display card 1 on the top layer of the card stack. The card queue of the card stack includes N cards. The electronic device 100 may receive a sliding operation performed by a user on the card stack. When the sliding distance of the sliding operation toward the bottom of the display screen reaches a distance threshold of 4 (for example, 1 card height), the electronic device 100 may place card N on the top layer of the card stack, and display a portion of card N and a portion of card 1 on the card stack, wherein card 1 is in the next layer of card N. When the sliding distance of the sliding operation toward the bottom of the display screen reaches a distance threshold of 4 (for example, 1 card height), the electronic device 100 may display card N on the top layer of the card stack. When the sliding distance of the sliding operation toward the bottom of the display screen increases from a distance threshold of 4 (for example, the height of the card stack) to a distance threshold of 5 (for example, 4 / 3 of the card height), the electronic device 100 may display a portion of card N, a portion of card 1, and a portion of card 2 on the card stack, wherein card 2 is in the next layer of card 1 in the card stack. When the sliding distance of the slide operation toward the bottom of the display screen exceeds a distance threshold of 5 (for example, 4 / 3 of the card height), the electronic device 100 can switch the card stack from the stacked state to the unfolded state and display a card stack unfolding interface, wherein the card stack unfolding interface can include multiple cards stacked in the card stack. In this way, the user can achieve a variety of display effects of the card stack through the slide operation, simplifying the complexity of operating the card stack.

[0116] In the embodiment of the present application, the sliding distance may be the sliding distance from the top to the bottom of the display screen, that is, the sliding distance in the negative direction of the Y axis of the display screen, and the positive direction of the X axis of the display screen may refer to the direction from the left side to the right side of the display screen, where the X axis is perpendicular to the Y axis. The card height refers to the height of the card in the card stack on the Y axis of the display screen.

[0117] For example, Figure 4AAs shown, the negative one screen interface 220 may include a card pile 230 in a stacked state. Among them, the card queue of the card pile 230 includes N cards. At this time, the top layer of the card pile 230 displays a card 231. Optionally, the electronic device 100 may display a card pile indicator ( Figure 4A (not shown in the figure), the card stack indicator can be used to indicate the total number of cards in the card stack, as well as the positional relationship between the card currently displayed at the top layer of the card stack 230 and other cards in the card stack 230.

[0118] The electronic device 100 can receive a sliding operation performed by a user on the card stack 230. The starting position of the sliding operation performed by the user on the card stack 230 can be the position of the card stack 230, and the trend of the sliding operation can be in the direction toward the bottom of the display screen, and the sliding operation is not required to be roughly parallel to the left and right sides of the display screen. For example, the sliding operation can start from the card stack 230 and slide toward the left side of the bottom of the display screen, or slide toward the right side of the bottom of the display screen, or slide toward the left side of the bottom of the display screen first and then slide toward the right side of the bottom of the display screen, or slide toward the right side of the bottom of the display screen first and then slide toward the left side of the bottom of the display screen. The embodiments of the present application are not limited here.

[0119] like Figure 4B , Figure 4C As shown, when the sliding distance of the downward sliding operation reaches the height of one card, the electronic device 100 can determine the Nth card 235 in the card queue of the card stack 230 as the top card of the card stack 230. The card stack 230 displays the lower part of the card 235 and the lower part of the card 231 on the card stack 230, and the lower part of the card 231 displayed on the card stack 230 gradually decreases as the sliding distance increases, and the lower part of the card 232 displayed on the card stack 230 gradually increases as the sliding distance increases. Card 231 is the next layer of card 235.

[0120] like Figure 4D As shown, when the downward sliding distance of the sliding operation reaches the height of one card, the electronic device 100 can display all the cards 235 on the top layer of the card stack 230 .

[0121] like Figure 4E , Figure 4FAs shown, when the downward sliding distance of the sliding operation increases from 1 card height to 4 / 3 card height, the electronic device 100 can display the upper part of card 235, the upper part of card 231 and the upper part of card 232 on the card stack 230, and the upper part of card 235 displayed on the card stack 230 gradually decreases as the sliding distance increases, and the upper part of card 231 displayed on the card stack 230 gradually increases as the sliding distance increases. In the card stack 230, card 232 is located in the next layer of card 231.

[0122] like Figure 4G As shown, when the downward sliding distance of the sliding operation exceeds 4 / 3 of the card height, the electronic device 100 can switch the card stack 230 from the stacked state to the expanded state, and display the expansion animation 410 during the switching from the stacked state to the expanded state. When the electronic device 100 displays the expansion animation 410, the first T cards and the Nth card from the top card in the card queue of the card stack 230 are gradually expanded. The first T cards may include card 235, card 231, card 232, and card 233. Among them, at this time, the Nth card from the top card in the card queue of the card stack 230 may be card 234. T is less than N.

[0123] like Figure 4H As shown, after the card stack 230 is fully unfolded, the electronic device 100 may display a card stack unfolding interface 420. The card stack unfolding interface 420 may include the first T cards and the Nth card in the card queue of the card stack 230 starting from the top card. For example, the card stack unfolding interface 250 may include card 235, card 231, card 232, card 233, and the upper part of card 234. Card 231 may be displayed above card 235, card 232 may be displayed above card 231, and card 233 may cover the lower part of card 234, so that the upper part of card 234 is exposed.

[0124] Optionally, the card stack expansion interface 420 may further include a smart carousel control 421 and a smart recommendation control 422. The smart carousel control 421 may be used to trigger the electronic device 100 to periodically and automatically switch the card displayed on the top layer of the card stack 230. The smart recommendation control 422 may be used to trigger the electronic device 100 to automatically insert a new card into the card stack 230 according to the recommended content.

[0125] like Fig. 4IAs shown, when the electronic device 100 receives the user's operation to exit the above-mentioned card stack expansion interface 420 (for example, clicking on the blank area of ​​the card stack expansion interface 420), the electronic device 100 can exit the above-mentioned card stack expansion interface 420 and display the above-mentioned negative one screen interface 220, wherein the electronic device 100 can display card 235 on the top layer of the card stack 230 in the negative one screen interface 220.

[0126] In a possible implementation, when the sliding distance of the user's sliding operation on the card stack reaches a distance threshold 6 (for example, 1 / 3 of the height of the card stack), the electronic device 100 can display part of card N and part of card 1 on the card stack, and as the distance of the sliding operation increases, the part of card 1 displayed on the card stack becomes smaller and smaller, and the part of card N displayed on the card stack becomes larger and larger. If the user's sliding operation on the card stack ends when the downward sliding distance is less than the distance threshold 6 (for example, 1 / 3 of the height of the card), the electronic device 100 can control card N to rebound upward in the card stack until card N completely disappears, and the top layer of the card stack displays all of card 1. Among them, the distance threshold 6 is less than the above-mentioned distance threshold 4.

[0127] For example, Figure 5A , Figure 5B As shown, when the electronic device 100 detects that the downward sliding distance between the end position and the starting position of the user's sliding operation on the card stack 230 is less than 1 / 3 of the card height, the electronic device 100 can control the card 235 displayed on the top layer of the card stack 230 to rebound upward until the card 235 completely disappears, and display all of the card 231 on the top layer of the card stack 230.

[0128] In one possible implementation, if the user's sliding operation on the card stack ends when the downward sliding distance is between distance threshold 4 (for example, 1 / 3 of the card height) and distance threshold 5 (for example, 4 / 3 of the card height), the electronic device 100 can control the display of card N on the top layer of the card stack.

[0129] For example, Figure 5C , Figure 5DAs shown, when the sliding distance of the user's sliding operation on the card stack reaches 1 / 3 of the card height, the electronic device 100 can display part of card 235 and part of card 231 on the card stack, and as the sliding distance gradually increases, the part of card 231 displayed on the card stack 230 gradually decreases, and the part of card 235 displayed on the card stack 230 gradually increases. When the electronic device 100 detects that the downward sliding distance between the end position and the starting position of the user's sliding operation on the card stack 230 is between 1 / 3 of the height of the card stack and the height of the card stack, the card 235 can be switched to the top layer of the card stack 230, and the card 231 can be placed in the layer below the card 235.

[0130] Another example is Figure 5E , Fig. 5F As shown, during the process in which the downward sliding distance of the user's sliding operation on the card stack increases from 2 / 3 of the card height to 4 / 3 of the card height, the electronic device 100 can display part of the card 235, part of the card 231, and part of the card 232 on the card stack. As the distance of the upward sliding operation gradually increases, the part of the card 235 displayed on the card stack 230 gradually decreases, and the part of the card 231 displayed on the card stack 230 gradually increases. When the electronic device 100 detects that the downward sliding distance between the end position and the starting position of the user's sliding operation on the card stack 230 is between 1 card height and 4 / 3 of the card height, the card 235 can be rebounded upward to the top layer of the card stack 230 to display all of the card 235.

[0131] The following introduces the software architecture involved in the embodiments of the present application.

[0132] Figure 6 A schematic diagram of the software architecture of an electronic device provided in an embodiment of the present application is shown.

[0133] like Figure 6 As shown, the software architecture of the electronic device may include an application layer, a user interface kit (UIkit), and a framework layer (Framework).

[0134] Among them, the application layer may include applications (application), wherein the application may include desktop applications, negative one screen applications, service center applications, control center applications and other applications.

[0135] The application may provide the UIkit with card information of the cards in the card stack, wherein the card information includes the card's logo, original size, and the like.

[0136] The user interface kit (UIkit) may include a data adapter (HnManualStackViewAdapter), a layout manager (HnManualStackViewLayoutManager), a stack state sliding auxiliary class (HnStackViewCloseStateTouchHelper), a stack state animation auxiliary class (HnStackViewAnimator), a stack control (HnManualStackView), a stack control indicator (HnStackViewIndicator), and the like.

[0137] The framework layer may include a control (View) framework and a motion effect framework.

[0138] Among them, the capabilities provided by UIkit depend on the View framework and the motion effect framework in the framework layer. For example, the stacked sliding auxiliary class depends on the view framework to process operation events, where operation events include sliding events and lifting events. The stacked animation auxiliary class depends on the motion effect framework to obtain the motion effect engine interpolator and execute the display motion effect on the card stack. Among them, the motion effect engine interpolator is used to control the playback speed of the motion effects on the card stack.

[0139] The data adapter is used to dynamically change the identification bit of the display level and change the card queue of the card stack.

[0140] The layout manager is used to stack layout processing on the card stack.

[0141] The stacked sliding auxiliary class is used to handle sliding events and identify the sliding direction and sliding distance.

[0142] The stacked animation auxiliary class is used to present dynamic effects during sliding.

[0143] The stack control indicator can be used to display a card stack indicator next to a card stack and change the display of the card stack indicator based on the sort position of the top card in the card stack's queue.

[0144] The following is a specific combination of the above Figure 6 The software module shown introduces a card display method provided in an embodiment of the present application.

[0145] Figure 7 A schematic diagram of a card stack initialization process provided in an embodiment of the present application is shown.

[0146] like Figure 7 As shown, the initialization process may include the following steps:

[0147] S11. The stack control (HnManualStackView) initializes the card queue in the card stack.

[0148] In response to a user adding a new card to the card stack, the stack control may initialize a card queue in the card stack.

[0149] The stack control can also initialize the card queue in the card stack after the user deletes an existing card in the card queue of the card stack or the electronic device adds a new card to the card stack by itself.

[0150] In the embodiment of the present application, the stack control can also initialize the card queue in the card stack in other situations, which will not be repeated here.

[0151] The stack control can initialize the card queue in the card stack through the function "updateStackViews()".

[0152] For example, there may be N cards in the card queue, and the N cards are arranged from card 1 to card N.

[0153] S12. The stack control sends an initialization animation effect notification to the stack state animation auxiliary class (HnStackViewAnimator).

[0154] S13. The stacked animation auxiliary class executes the initialization animation effect.

[0155] For example, when a user adds a new card to a card stack, the stack control can trigger the stack animation helper class to perform the initialization animation of adding a new card.

[0156] S14. The stack control sends a card stack initialization notification to the data adapter (HnManualStackView).

[0157] S15. The data adapter sets card 1 in the card queue as the top-level card.

[0158] S16, the data adapter sends a data update notification 1 to the layout manager (HnManualStackView). The data update notification may indicate that the top card of the card stack is card 1.

[0159] The data adapter may send a data update notification 1 to the layout manager through the function "notifyDataSetChanged()".

[0160] S17. The layout manager may layout and display P cards starting from the top card and the Nth card on the card stack, and set the transparency of each layer of cards.

[0161] The layout manager can layout and display P cards starting from the top card and the Nth card in the card queue on the card stack through the function "onLayoutChildren()", and set the transparency of each layer of cards.

[0162] Among them, the top card is included in the P cards starting from the top card in the card queue, P is less than N, P and N are integers, and N is greater than 3.

[0163] For example, Figure 8 As shown, P can be 3. The layout manager can layout a total of four layers of cards in the card stack. Since there can be N cards in the card queue of the card stack, and the N cards are arranged from card 1 to card N, the top layer (current layer) card can be card 1. Therefore, the layout manager can layout card 1 at the top layer of the card stack (that is, the first layer), card 2 at the second layer of the card stack, card 3 at the third layer of the card stack, and card N at the fourth layer of the card stack. Since card 1 is at the top layer of the card stack, the layout manager can set the transparency of card 1 to 1, and the layout manager can set the transparency of card 2, card 3, and card N to 0, that is, card 1 is completely opaque, and card 2, card 3, and card N are completely transparent.

[0164] In this way, the layout manager only needs to layout (P+1) cards from the top layer to the bottom layer on the card stack, without having to layout all N cards in the card queue on the card stack. While ensuring the sliding display effect on the card stack, the complexity of drawing the card stack by the electronic device 100 can be reduced, saving the processing resources of the electronic device 100.

[0165] In the embodiment of the present application, the card queue of the card stack includes the 1st card to the Nth card arranged in a preset order. When a card is added or deleted in the card queue of the card stack, or when the top card is changed, (P+1) cards will be re-arranged from the top to the bottom in the area where the card stack is located.

[0166] Fig. 9 The display process during the swiping up of a card stack provided in an embodiment of the present application is shown.

[0167] like Fig. 9 As shown, after the card stack is initialized, the user can trigger a swipe up operation on the card stack. The display process during the swipe up operation on the card stack may include the following steps:

[0168] S21. The stack control (HnManualStackView) detects a touch event.

[0169] S22. After detecting a touch event, the stack control may send a touch notification to the stack state sliding helper class (HnStackViewCloseStateTouchHelper).

[0170] S23. The stacked sliding auxiliary class may detect a sliding up event after receiving a touch notification.

[0171] S24. The stacked state sliding auxiliary class can send a motion effect notification 1 to the stacked state animation auxiliary class (HnStackViewAnimator).

[0172] S25. The stacked sliding auxiliary class may continuously send the upward sliding distance to the stacked animation auxiliary class.

[0173] Among them, the stacked sliding auxiliary class can continuously detect the current touch position on the display screen during the sliding operation and the starting position of the sliding operation, and the sliding distance in the direction toward the top of the display screen.

[0174] In the embodiment of the present application, the sliding distance may be the sliding distance from the bottom to the top of the display screen, that is, the sliding distance in the positive direction of the Y axis of the display screen, and the positive direction of the X axis of the display screen may refer to the direction from the left side to the right side of the display screen, where the X axis is perpendicular to the Y axis. The card height refers to the height of the card on the Y axis of the display screen.

[0175] S26. After receiving the animation notification 1, the stacking state animation auxiliary class can perform an upward sliding effect, so that parts of the first two layers of cards (including parts of card 1 and card 2) are displayed on the card stack based on the upward sliding distance.

[0176] In the process of sliding up to the distance threshold 1 (for example, 2 / 3 of the card height), the stacking animation auxiliary class can display the lower part of card 1 and the lower part of card 2 on the card stack, and the lower part of card 1 gradually decreases as the sliding distance increases, and the lower part of card 2 gradually increases as the sliding distance increases. Among them, card 2 is located in the next layer of card 1.

[0177] Optionally, when sliding up to the distance threshold 1 (for example, 2 / 3 of the card height), the stacking animation auxiliary class can set the transparency of card 2 to be less than or equal to the transparency of card 1. The smaller the transparency of the card, the more transparent the card, and the greater the transparency of the card, the more opaque the card.

[0178] For example, Fig. 10A As shown, the stacking animation auxiliary class can set the transparency of card 1 to 1 and the transparency of card 2 to 0.8. Among them, the transparency of card 3 and card N remains unchanged at 0.

[0179] Optionally, when sliding up to distance threshold 1 (for example, 2 / 3 card height), the stacking animation auxiliary class can adjust the transparency of card 2 according to the sliding distance. The greater the sliding distance, the greater the transparency of card 2. For example, the transparency of card 2 gradually increases from 0 to 0.6 as the sliding distance increases.

[0180] Optionally, when sliding up to the distance threshold 1 (for example, 2 / 3 of the card height), the stacking animation auxiliary class can set the scaling ratio of card 2 to be less than or equal to the scaling ratio of card 1. The scaling ratio is the ratio of the size of the scaled card to the original size of the card. The scaling ratio can range from 0 to 1. The smaller the scaling ratio, the smaller the size of the card displayed.

[0181] For example, Fig. 10B As shown, the stacking animation auxiliary class can set the scaling ratio of card 1 to 1 and the scaling ratio of card 2 to 0.9. Among them, the scaling ratios of card 3 and card N can remain unchanged at 0.

[0182] Optionally, when sliding up to distance threshold 1 (for example, 2 / 3 of the card height), the stacking animation auxiliary class can adjust the zoom ratio of card 2 according to the sliding distance. The larger the sliding distance, the larger the zoom ratio of card 2. For example, the zoom ratio of card 2 gradually increases from 0.7 to 0.8 as the sliding distance increases.

[0183] S27: The stacked state sliding auxiliary class detects that the upward sliding reaches a distance threshold of 1 (for example, 2 / 3 of the card height).

[0184] S28. When the stacked state sliding auxiliary class detects that the sliding up reaches the distance threshold 1, the stacked state sliding auxiliary class can send an animation notification 2 to the stacked state animation auxiliary class.

[0185] S29. The stacked sliding auxiliary class can continuously send the sliding distance to the stacked animation auxiliary class.

[0186] S30. The stacking animation auxiliary class can display parts of the first three layers of cards (including parts of card 1, card 2, and card 3) in the area where the card stack is located based on the upward sliding distance.

[0187] Among them, in the process of sliding up the distance from distance threshold 1 (for example, 2 / 3 of the card height) to distance threshold 2 (for example, 9 / 10 of the card height), the stacked animation auxiliary class can display the lower part of card 1, the lower part of card 2 and the lower part of card 3 on the card stack, and the lower part of card 1 gradually decreases with the increase of the sliding distance, the lower part of card 2 gradually increases with the increase of the sliding distance, and the lower part of card 3 gradually increases or remains unchanged with the increase of the sliding distance.

[0188] Optionally, in the process of sliding up from distance threshold 1 (for example, 2 / 3 of the card height) to distance threshold 2 (for example, 9 / 10 of the card height), the stacking animation auxiliary class can set the transparency of card 3 to be less than or equal to the transparency of card 2, and set the transparency of card 2 to be less than or equal to the transparency of card 1.

[0189] For example, Fig. 10C As shown, the stacking animation auxiliary class can set the transparency of card 1 to 1, the transparency of card 2 to 0.8, and the transparency of card 3 to 0.6. Among them, the transparency of card N remains unchanged at 0.

[0190] Optionally, in the process of sliding up the distance from distance threshold 1 (for example, 2 / 3 card height) to distance threshold 2 (for example, 9 / 10 card height), the stacked animation auxiliary class can adjust the transparency of card 2 and card 3 according to the sliding up distance. The greater the sliding up distance, the greater the transparency of card 2, the greater the transparency of card 3 or the same. The transparency of card 3 is less than that of card 2. For example, the transparency of card 2 gradually increases from 0.6 to 0.8 as the sliding up distance increases, and the transparency of card 3 gradually increases from 0 to 0.6 as the sliding up distance increases.

[0191] Optionally, when the sliding distance is from distance threshold 1 (for example, 2 / 3 card height) to distance threshold 2 (for example, 9 / 10 card height), the stacking animation auxiliary class can set the scaling ratio of card 2 to be less than or equal to the scaling ratio of card 1, and the scaling ratio of card 3 to be less than or equal to the scaling ratio of card 2. The scaling ratio is the ratio of the size of the scaled card to the original size of the card. The scaling ratio can range from 0 to 1. The smaller the scaling ratio, the smaller the size of the card displayed.

[0192] For example, Fig. 10D As shown, the stacking animation auxiliary class can set the scaling ratio of card 1 to 1, the scaling ratio of card 2 to 0.9, and the scaling ratio of card 3 to 0.7. Among them, the scaling ratio of card N can remain unchanged at 0.

[0193] Optionally, in the process of sliding up the distance from distance threshold 1 (for example, 2 / 3 of the card height) to distance threshold 2 (for example, 9 / 10 of the card height), the stacked animation auxiliary class can adjust the scale of card 2 and card 3 according to the sliding up distance. The larger the sliding up distance, the larger the scale of card 2, the larger the scale of card 3, or the same, wherein the scale of card 2 is smaller than the scale of card 1, and the scale of card 3 is smaller than the scale of card 2. For example, the scale of card 2 gradually increases from 0.8 to 0.9 as the sliding up distance increases, and the scale of card 3 increases from 0.7 to 0.8 or remains at 0.7.

[0194] S31. The stacked state sliding auxiliary class detects that the upward sliding reaches a distance threshold of 2 (for example, 9 / 10 of the card height).

[0195] S32. The stacked sliding auxiliary class may send an expansion notification to the stack control when detecting that the upward sliding reaches a distance threshold 2.

[0196] The stacking state sliding auxiliary class can send an expansion notification to the stacking control through the function "openManualStack()".

[0197] S33. The stack control may trigger the card stack to switch to an expanded state after receiving an expansion notification.

[0198] After receiving the expansion notification, the stack control can trigger the expansion effect and switch to the expanded state.

[0199] When the card stack is switched to the expanded state, the card stack expansion interface can be displayed. For specific display effects, please refer to the above Figure 2A-2H The illustrated embodiments will not be described in detail here.

[0200] In a possible implementation, if the stacked state sliding assistant class detects that the sliding operation ends when the sliding distance is less than a distance threshold 3 (for example, 1 / 2 of the card height), the stacked state sliding assistant class can send a motion notification 3 to the stacked state animation assistant class. After receiving the motion notification 3, the stacked state animation assistant class can control card 1 to rebound downward until all of card 1 is displayed on the card stack, and when all of card 1 is displayed on the card stack, the transparency of card 2 is set to 0.

[0201] For specific display effects, please refer to the above Figure 3A-3B The illustrated embodiments will not be described in detail here.

[0202] In a possible implementation, if the stacked state sliding auxiliary class detects that the sliding operation ends when the sliding operation is between the distance threshold 3 (for example, 1 / 2 card height) and the distance threshold 1 (for example, 2 / 3 card height), the stacked state sliding auxiliary class can send a motion notification 4 to the stacked state animation auxiliary class. After receiving the motion notification 4, the stacked state animation auxiliary class can display a page turning motion effect A. The page turning motion effect A can be to control card 1 to slide upward out of the card stack, and gradually reduce the transparency of card 1 to 0, and gradually increase the transparency of card 2 to 1.

[0203] After executing the page turning animation A, the stacking animation auxiliary class can send a page turning notification to the data adapter (HnManualStackViewAdapter). After receiving the page turning notification, the data adapter can set card 2 in the card queue as the top card of the card stack, and notify the layout manager (HnManualStackView) that the latest top card is card 2. The layout manager can layout and display P cards starting from the latest top card and the Nth card on the card stack, and set the transparency of each layer. For example, the layout manager can layout and display card 2, card 3, card 4, and card 1 on the card stack. Among them, card 2 is at the top of the card stack, card 3 is at the second layer of the card stack, card 4 is at the third layer of the card stack, and card 1 is at the fourth layer of the card stack. The layout manager can set the transparency of card N to 1, and set the transparency of card 1, card 2, and card N-1 to 0.

[0204] For specific display effects, please refer to the above Figure 3C-Figure 3D The illustrated embodiments will not be described in detail here.

[0205] In a possible implementation, if the stacked state sliding auxiliary class detects that the sliding operation ends when sliding up to a distance between threshold 1 (e.g., 2 / 3 of the card height) and threshold 2 (e.g., 9 / 10 of the card height), the stacked state sliding auxiliary class may send a motion notification 5 to the stacked state animation auxiliary class. After receiving the motion notification 5, the stacked state animation auxiliary class may display a page turning motion B. The page turning motion B may be to control card 1 to slide upward out of the card stack, and gradually reduce the transparency of card 1 to 0, gradually increase the transparency of card 2 to 1, gradually reduce the transparency of card 3 to 0, and slide card 2 down to display the entire card 2 on the card stack.

[0206] After executing the page turning animation B, the stacking animation auxiliary class can send a page turning notification to the data adapter (HnManualStackViewAdapter). After receiving the page turning notification, the data adapter can set card 2 in the card queue as the top card of the card stack, and notify the layout manager (HnManualStackView) that the latest top card is card 2. The layout manager can layout and display P cards starting from the latest top card and the Nth card on the card stack, and set the transparency of each layer. For example, the layout manager can layout and display card 2, card 3, card 4, and card 1 on the card stack. Among them, card 2 is at the top of the card stack, card 3 is at the second layer of the card stack, card 4 is at the third layer of the card stack, and card 1 is at the fourth layer of the card stack. The layout manager can set the transparency of card N to 1, and set the transparency of card 1, card 2, and card N-1 to 0.

[0207] For specific display effects, please refer to the above Figure 3E-Figure 3F The illustrated embodiments will not be described in detail here.

[0208] Fig.11 A schematic diagram of the display process during the sliding down of a card stack provided in an embodiment of the present application is shown.

[0209] like Fig.11 As shown, after the card stack is initialized, the user can trigger a slide operation on the card stack. The display process during the slide operation of the card stack may include the following steps:

[0210] S41. The stack control (HnManualStackView) detects a touch event.

[0211] S42. After detecting a touch event, the stack control may send a touch notification to the stack state sliding helper class (HnStackViewCloseStateTouchHelper).

[0212] S43. The stacked sliding auxiliary class may detect a sliding down event after receiving a touch notification.

[0213] S44. The stacked sliding auxiliary class can send a slide down event notification to the data adapter (HnManualStackViewAdapter).

[0214] S45. The data adapter may set the card N in the card queue as the top card of the card stack.

[0215] The Nth card is the last card in the card queue of the card pile.

[0216] S46: The data adapter may send a data update notification 2 to the layout manager (HnManualStackView), wherein the data update notification 2 is used to indicate that the top card of the card stack is card N.

[0217] S47. The layout manager may layout and display P cards starting from the top card and the Nth card on the card stack.

[0218] The next card of card N in the card queue may be card 1. Since the top card of the card stack is card N, the layout manager may layout card N at the top layer of the card stack (i.e., the first layer), card 1 at the second layer of the card stack, card 2 at the third layer of the card stack, and card N-1 at the fourth layer of the card stack.

[0219] S48. After the card stack layout displays multiple cards, the layout manager may send a completion notification 1 to the data adapter.

[0220] S49. After receiving the completion notification 1, the data adapter sends a completion notification 2 to the stacked sliding auxiliary class.

[0221] S50. After receiving the completion notification 2, the stacked state sliding auxiliary class may send a motion effect notification 6 to the stacked state animation auxiliary class (HnStackViewAnimator).

[0222] S51. The stacked sliding auxiliary class can continuously send the sliding distance to the stacked animation auxiliary class.

[0223] The stacked sliding auxiliary class can continuously detect the current touch position on the display screen during the sliding operation and the starting position of the sliding operation, and the sliding distance in the direction toward the bottom of the display screen.

[0224] In the embodiment of the present application, the sliding distance may be the sliding distance from the top to the bottom of the display screen, that is, the sliding distance in the negative direction of the Y axis of the display screen, and the positive direction of the X axis of the display screen may refer to the direction from the left side to the right side of the display screen, where the X axis is perpendicular to the Y axis. The card height refers to the height of the card on the Y axis of the display screen.

[0225] S52. After receiving the animation notification 6, the stacking state animation auxiliary class can perform a downward sliding effect, so that parts of the first two layers of cards (including parts of card N and card 1) are displayed in the area where the card stack is located based on the sliding distance.

[0226] In the process of sliding down to the distance threshold of 4 (for example, 1 card height), the stacking animation auxiliary class can display the lower part of card N and the lower part of card 1 on the card stack, and the lower part of card N gradually decreases with the increase of the sliding distance, and the lower part of card 1 gradually decreases with the increase of the sliding distance. Among them, card 1 is located in the next layer of card N. When sliding down to the distance threshold of 4 (for example, 1 card height), all of card N is displayed on the card stack, and card 1 is completely covered by card N.

[0227] Optionally, when sliding down to the distance threshold 4 (for example, 1 card height), the stacking animation auxiliary class can set the transparency of card 1 to be less than or equal to the transparency of card N. The smaller the transparency of the card, the more transparent the card.

[0228] For example, Fig. 12A As shown, the stacking animation auxiliary class can set the transparency of card N to 1 and the transparency of card 1 to 0.8. Among them, the transparency of card 2 and card N-1 remains unchanged at 0.

[0229] Optionally, when sliding down to the distance threshold 4 (for example, 1 card height), the stacking animation auxiliary class can adjust the transparency of card 1 according to the sliding distance. The greater the sliding distance, the lower the transparency of card 1. For example, the transparency of card 1 gradually decreases from 1 to 0 as the sliding distance increases.

[0230] Optionally, when sliding down to the distance threshold 4 (for example, 1 card height), the stacking animation auxiliary class can set the zoom ratio of card 1 to be less than or equal to the zoom ratio of card N. The zoom ratio is the ratio of the size of the scaled card to the original size of the card, and the zoom ratio of card 1 is less than the zoom ratio of card N. The zoom ratio can range from 0 to 1, and the smaller the zoom ratio, the smaller the size of the card displayed.

[0231] For example, Fig. 12B As shown, the stacking animation auxiliary class can set the scaling ratio of card N to 1 and the scaling ratio of card 1 to 0.9. Among them, the scaling ratios of card 2 and card N-1 can remain unchanged at 0.

[0232] Optionally, when sliding down to the distance threshold 4 (for example, 1 card height), the stacking animation auxiliary class can adjust the zoom ratio of card 1 according to the sliding distance. The larger the sliding distance, the smaller the zoom ratio of card 1. For example, the zoom ratio of card 1 gradually decreases from 1 to 0.9 as the sliding distance increases.

[0233] S53: The stacked state sliding auxiliary class detects that the slide exceeds a distance threshold of 4 (for example, 1 card height).

[0234] S54: When the stacked state sliding auxiliary class detects that the sliding distance reaches a threshold value of 4 (for example, 1 card height), the animation notification 7 may be sent to the stacked state animation auxiliary class.

[0235] S55. The stacked sliding auxiliary class can continuously send the sliding distance to the stacked animation auxiliary class.

[0236] S56. After receiving the animation notification 7, the stacking state animation auxiliary class can perform a downward sliding effect so that parts of the first three layers of cards (including parts of card N, card 1, and card 2) are displayed in the area where the card stack is located based on the sliding distance.

[0237] Among them, in the process of sliding down the distance from distance threshold 4 (for example, 1 card height) to distance threshold 5 (for example, 4 / 3 card height), the stacking animation auxiliary class can display the upper part of card N, the upper part of card 1 and the upper part of card 3 on the card stack, and the upper part of card N gradually decreases with the increase of sliding distance, the upper part of card 2 gradually increases with the increase of sliding distance, and the upper part of card 3 gradually increases or remains unchanged with the increase of sliding distance.

[0238] Optionally, when the sliding distance is from the distance threshold 4 (for example, 1 card height) to the distance threshold 5 (for example, 4 / 3 card height), the stacking animation auxiliary class can set the transparency of card 2 to be less than or equal to the transparency of card 1, and set the transparency of card 1 to be less than or equal to the transparency of card N. The smaller the transparency of a card, the more transparent the card.

[0239] For example, Fig. 12C As shown, the stacking animation auxiliary class can set the transparency of card N to 1, the transparency of card 1 to 0.8, and the transparency of card 2 to 0.6. Among them, the transparency of card N-1 remains unchanged at 0.

[0240] Optionally, when the sliding distance increases from a distance threshold of 4 (e.g., 1 card height) to a distance threshold of 5 (e.g., 4 / 3 card height), the stacked animation auxiliary class can adjust the transparency of card 1 and card 2 according to the sliding distance. The greater the sliding distance, the greater the transparency of card 1, the greater the transparency of card 2, or the same. The transparency of card 2 is less than the transparency of card 3. For example, the transparency of card 1 gradually increases from 0.6 to 0.8 as the sliding distance increases, and the transparency of card 2 gradually increases from 0 to 0.6 as the sliding distance increases.

[0241] Optionally, when the sliding distance is from the distance threshold 4 (for example, 1 card height) to the distance threshold 5 (for example, 4 / 3 card height), the stacking animation auxiliary class can set the scaling ratio of card 1 to be less than or equal to the scaling ratio of card N, and the scaling ratio of card 2 to be less than or equal to the scaling ratio of card 1. The scaling ratio is the ratio of the size of the scaled card to the original size of the card. The scaling ratio can range from 0 to 1. The smaller the scaling ratio, the smaller the size of the card displayed.

[0242] For example, Fig.12D As shown, the stacking animation auxiliary class can set the scaling ratio of card N to 1, the scaling ratio of card 1 to 0.9, and the scaling ratio of card 2 to 0.7. Among them, the scaling ratio of card N-1 can remain unchanged at 0.

[0243] Optionally, when the sliding distance increases from a distance threshold of 4 (for example, 1 card height) to a distance threshold of 5 (for example, 4 / 3 card height), the stacked animation auxiliary class can adjust the scale ratios of Card 1 and Card 2 according to the sliding distance. The larger the sliding distance, the larger the scale ratio of Card 1, the larger the scale ratio of Card 2, or the same. Among them, the scale ratio of Card 1 is smaller than the scale ratio of Card N, and the scale ratio of Card 2 is smaller than the scale ratio of Card 1. For example, the scale ratio of Card 1 gradually increases from 0.8 to 0.9 as the sliding distance increases, and the scale ratio of Card 2 increases from 0.7 to 0.8 or remains at 0.7.

[0244] S57: The stacked state sliding auxiliary class detects that the slide exceeds a distance threshold of 5 (for example, 4 / 3 of the card height).

[0245] S58. The stacked sliding auxiliary class may send an expansion notification to the stack control when detecting that the upward sliding reaches a distance threshold of 5.

[0246] The stacking state sliding auxiliary class can send an expansion notification to the stacking control through the function "openManualStack()".

[0247] S59. The stack control may trigger the card stack to switch to an expanded state after receiving an expansion notification.

[0248] After receiving the expansion notification, the stack control can trigger the expansion effect and switch to the expanded state.

[0249] When the card stack is switched to the expanded state, the card stack expansion interface can be displayed. For specific display effects, please refer to the above Figure 4A-Figure 4I The illustrated embodiments will not be described in detail here.

[0250] In a possible implementation, if the stacked state sliding auxiliary class detects that the sliding operation ends when the sliding distance is less than a threshold value 6 (for example, 1 / 3 of the card height), the stacked state sliding auxiliary class can send a motion notification 7 to the stacked state animation auxiliary class. After receiving the motion notification 7, the stacked state animation auxiliary class can control card N to rebound upward to display all of card 1 on the card stack, and when displaying all of card 1 on the card stack, set the transparency of card 1 to 1. After controlling card N to rebound upward to display all of card 1 on the card stack, the stacked state animation auxiliary class can send a return notification to the data adapter. After receiving the return notification, the data adapter can set card 1 in the card queue as the top card of the card stack, and notify the layout manager (HnManualStackView) that the latest top card is card 1. The layout manager can layout and display P cards starting from the latest top card and the Nth card on the card stack, and set the transparency of each layer. For example, the layout manager can layout and display card 1, card 2, card 3, and card N on the card stack. Among them, card 1 is at the top layer of the card stack, card 2 is at the second layer of the card stack, card 3 is at the third layer of the card stack, and card N is at the fourth layer of the card stack. The layout manager can set the transparency of card 1 to 1, and set the transparency of card 2, card 3, and card N to 0.

[0251] For specific display effects, please refer to the above Figure 5A-Figure 5B The illustrated embodiments will not be described in detail here.

[0252] In a possible implementation, if the stacked state sliding auxiliary class detects that the sliding operation ends when sliding down to between the distance threshold 6 (for example, 1 / 3 of the card height) and the distance threshold 4 (for example, 1 card height), the stacked state sliding auxiliary class can send a motion effect notification 8 to the stacked state animation auxiliary class. After receiving the motion effect notification 8, the stacked state animation auxiliary class can control the card N to slide down until all of the card N is displayed on the card stack, and when all of the card N is displayed on the card stack, the transparency of the card 1 is set to 0.

[0253] For specific display effects, please refer to the above Figure 5C-5D The illustrated embodiments will not be described in detail here.

[0254] In a possible implementation, if the stacked state sliding auxiliary class detects that the sliding operation ends when sliding down to between distance threshold 4 (e.g., 1 card height) and distance threshold 5 (e.g., 4 / 3 card height), the stacked state sliding auxiliary class can send a motion effect notification 9 to the stacked state animation auxiliary class. After receiving the motion effect notification 9, the stacked state animation auxiliary class can control card N to slide upward until all of card N is displayed on the card stack, and when all of card N is displayed on the card stack, the transparency of card 1 and card 2 is set to 0.

[0255] For specific display effects, please refer to the above Figure 5E-5F The illustrated embodiments will not be described in detail here.

[0256] A card display method provided in an embodiment of the present application is introduced below.

[0257] Fig.13 A schematic flow chart of a card display method provided in an embodiment of the present application is shown.

[0258] The card display method can be applied to the electronic device 100 .

[0259] like Fig.13 As shown, the method may include the following steps:

[0260] S1301: The card stack is in a stacked state, and card 1 is displayed on the top layer of the area where the card stack is located.

[0261] The electronic device 100 can display a card stack on a first interface, wherein the first interface can be a desktop, a negative one screen interface, a control center interface, a service center interface, etc., which is not limited in the embodiment of the present application.

[0262] The card stack may include N cards. The N cards are arranged in order from card 1 to card N, and the next card of card N is card 1. At this time, the electronic device 100 may use card 1 in the card stack as the top layer (current layer) card.

[0263] S1302: Receive a sliding operation of the user on the card stack.

[0264] S1303: Determine the type of sliding operation.

[0265] S1304: If the type of the sliding operation is an upward sliding operation, the top card is kept as Card 1, and a portion of Card 1 and a portion of Card 2 are displayed in the area where the card stack is located.

[0266] For example, when sliding up to the distance threshold 3 (e.g., 1 / 2 card height), the electronic device 100 can display the lower part of card 1 and the lower part of card 2 on the card stack, and the lower part of card 1 gradually decreases as the sliding distance increases, and the lower part of card 2 gradually increases as the sliding distance increases. Among them, card 2 is arranged in the lower layer of card 1.

[0267] Optionally, when displaying part of card 1 and part of card 2 in the area where the card stack is located, the transparency of card 2 can be less than that of card 1, where the transparency value ranges from 0 to 1, and the smaller the transparency, the more transparent the card. For example, the transparency of card 1 can be 1, and the transparency of card 2 can be set to 0.8. Optionally, card 2 can also be scaled. For example, card 2 is scaled to 0.9 of its original size. In this way, by setting the transparency and scaling size of the cards, the hierarchical display effect between the cards can be reflected.

[0268] S1305: Determine whether the swiping up operation ends when the distance is less than a threshold value of 3 (for example, 1 / 2 of the card height).

[0269] In the embodiment of the present application, the sliding distance may be the distance from the bottom to the top of the display screen, that is, the distance in the positive direction of the Y axis of the display screen, and the positive direction of the X axis of the display screen may refer to the direction from the left side to the right side of the display screen, where the X axis is perpendicular to the Y axis. The card height refers to the height of the card on the Y axis of the display screen.

[0270] The electronic device 100 can detect that the user lifts his hand when the swipe up operation slides from the starting position to a certain position, and determine that the swipe up operation ends. For example, when the user lifts his hand when the swipe up operation slides from the starting position to a certain position, the electronic device 100 can detect the touch event of "ACTION_UP" and determine that the swipe up operation ends.

[0271] S1306: If the sliding operation ends when the distance is less than the threshold value 3 (for example, 1 / 2 of the card height), control the card 1 to rebound downward to display the entire card 1 on the top layer of the area where the card stack is located.

[0272] When card 1 rebounds downward to display the entire card 1 on the top layer of the card stack area, since card 1 completely covers card 2, the transparency of card 2 can be set to 0, that is, card 2 is completely transparent.

[0273] S1307. If the swipe up operation is not completed when the distance is less than the distance threshold 3 (for example, 1 / 2 card height), determine whether the swipe up operation is completed when the distance is between the distance threshold 3 (for example, 1 / 2 card height) and the distance threshold 1 (for example, 2 / 3 card height).

[0274] S1308. If the swiping up operation ends when the distance is between threshold 3 (for example, 1 / 2 card height) and threshold 1 (for example, 2 / 3 card height), a page turning effect is displayed on the card stack. When the page turning effect ends, all of Card 2 is displayed on the top layer of the area where the card stack is located.

[0275] If the sliding operation ends when the distance between threshold 3 (e.g., 1 / 2 card height) and threshold 1 (e.g., 2 / 3 card height) is reached, card 2 can be set as the top card of the card stack. At this time, card 1 is placed at the last layer of the card stack. Card 3 is placed at the next layer of card 2.

[0276] Optionally, after the page turning animation ends, the transparency of card 2 at the top of the card stack can be set to 1. Since card 2 completely covers card 3, at this time, the transparency of card 3 can be set to 0, that is, card 3 is completely transparent.

[0277] S1309: If the sliding operation exceeds distance threshold 1 (eg, 2 / 3 of the card height), a portion of card 1, a portion of card 2, and a portion of card 3 are displayed in the area where the card stack is located.

[0278] Among them, when the swiping distance is between distance threshold 1 and distance threshold 2, as the distance of the swiping operation gradually increases, the lower part of card 1 displayed in the area where the card stack is located gradually becomes smaller, the lower part of card 2 displayed in the area where the card stack is located gradually increases, and the lower part of card 3 displayed in the area where the card stack is located remains unchanged or gradually increases.

[0279] Optionally, when displaying part of card 1, part of card 2, and part of card 3 in the area where the card stack is located, the transparency of card 2 can be less than that of card 1, and the transparency of card 3 can be less than that of card 2. The transparency value ranges from 0 to 1, and the smaller the transparency, the more transparent the card. For example, the transparency of card 1 can be 1, the transparency of card 2 can be set to 0.8, and the transparency of card 3 can be 0.6. Optionally, card 2 and card 3 can also be scaled. For example, card 2 is scaled to 0.9 of the original size, and card 3 is scaled to 0.8 of the original size. In this way, by setting the transparency and scaling size of the cards, the hierarchical display effect between the cards can be reflected.

[0280] S1310: Determine whether the sliding up is ended when it reaches between distance threshold 1 (for example, 2 / 3 of the card height) and distance threshold 2 (for example, 9 / 10 of the card height).

[0281] In the embodiment of the present application, distance threshold 3 is smaller than distance threshold 1, and distance threshold 1 is smaller than distance threshold 2.

[0282] S1311. If the swiping up operation ends when the distance is between threshold 1 (for example, 2 / 3 of the card height) and threshold 2 (for example, 9 / 10 of the card height), a page turning effect is displayed on the card stack. When the page turning effect ends, all of Card 2 is displayed on the top layer of the area where the card stack is located.

[0283] If the sliding operation ends when the distance between threshold 1 (e.g., 2 / 3 of the card height) and threshold 2 (e.g., 9 / 10 of the card height) is reached, card 2 can be set as the top card of the card stack. At this time, card 1 is placed at the last layer of the card stack. Card 3 is placed at the next layer of card 2.

[0284] S1312: If the upward sliding operation exceeds a distance threshold of 2 (eg, 9 / 10 of the card height), the card stack is expanded to an expanded state, and a card stack expansion interface is displayed.

[0285] The card stack expansion interface may include all of the first T cards and part of the Nth card in the card queue of the card stack starting from the top card. In the card queue of the card stack, the next card after card N is card 1. 1<T≤N.

[0286] Since the top card is card 1 at this time, that is, the card stack expansion interface may include all of card 1 to card T, and part of card N.

[0287] Optionally, since the card stack expansion interface is triggered by the upward sliding operation, all of Cards 1 to T and part of Card N can be displayed from top to bottom in the card stack expansion interface, and the lower part of Card N can be displayed below Card T. In this way, the display order of the cards in the card stack expansion interface follows the sliding direction of the sliding operation, which improves the display effect of the cards.

[0288] For details about the card display effect in the card stack triggered by the swipe up operation, please refer to the above Figure 2A-2H , Figure 3A-Figure 3F ,as well as Fig. 9 The embodiments shown in the above description will not be described in detail here.

[0289] S1313: If the type of the sliding operation is a downward sliding operation, set card N as the top card, and display a portion of card N and a portion of card 1 in the area where the card stack is located.

[0290] For example, when sliding down to the distance threshold 6 (for example, 1 / 3 of the card height), the electronic device 100 can display the lower part of card N and the lower part of card 1 in the area where the card stack is located, and the lower part of card N gradually increases as the sliding distance increases, and the lower part of card 1 gradually decreases as the sliding distance increases. At this time, card 1 is laid out in a layer below card N.

[0291] Optionally, when displaying part of card N and part of card 1 in the area where the card stack is located, the transparency of card 1 can be less than the transparency of card N, where the transparency value ranges from 0 to 1, and the smaller the transparency, the more transparent the card. For example, the transparency of card N can be 1, and the transparency of card 1 can be set to 0.8. Optionally, card 1 can also be scaled. For example, card 1 is scaled to 0.9 of its original size. In this way, by setting the transparency and scaling size of the cards, the hierarchical display effect between the cards can be reflected.

[0292] S1314: Determine whether the slide down is less than a distance threshold of 6 (for example, 1 / 3 of the card height) and then terminate.

[0293] In the embodiment of the present application, the sliding distance may be the distance from the top to the bottom of the display screen, that is, the distance in the negative direction of the Y axis of the display screen, and the positive direction of the X axis of the display screen may refer to the direction from the left side to the right side of the display screen, where the X axis is perpendicular to the Y axis. The card height refers to the height of the card on the Y axis of the display screen.

[0294] The electronic device 100 can detect that the user lifts his hand when the slide operation slides from the starting position to a certain position, and determine that the slide operation ends. For example, when the user lifts his hand when the slide operation slides from the starting position to a certain position, the electronic device 100 can detect the "ACTION_UP" touch event and determine that the slide operation ends.

[0295] S1315: If the sliding operation ends when the distance is less than the threshold value 6 (for example, 1 / 3 of the card height), control the card N to rebound upward to display the entire card 1 on the top layer of the area where the card stack is located.

[0296] When card N rebounds upward to display all of card 1 on the top layer of the card stack, card 1 can be set as the top layer card of the card stack. At this time, card N is in the last layer of the card stack.

[0297] S1316. If the sliding operation is not completed when the distance is less than the distance threshold 6 (for example, 1 / 3 of the card height), determine whether it is completed when the distance is between the distance threshold 6 (for example, 1 / 3 of the card height) and the distance threshold 4 (for example, 1 card height).

[0298] S1317. If the sliding operation ends when sliding to between the distance threshold 6 (for example, 1 / 3 of the card height) and the distance threshold 4 (for example, 1 card height), control the card N to slide downward until the entire card N is displayed on the top layer of the area where the card stack is located.

[0299] Optionally, when card N slides downward to display the entire card N at the top layer of the card stack, the transparency of card N at the top layer of the card stack can be set to 1. Since card N completely covers card 1, at this time, the transparency of card 1 can be set to 0, that is, card 1 is completely transparent.

[0300] S1318. When the sliding operation exceeds a threshold of 4 (eg, 1 card height), a portion of card N, a portion of card 1, and a portion of card 2 are displayed in the area where the card stack is located.

[0301] When the sliding distance reaches the distance threshold 4 (for example, 1 card height), the card N just completely covers the card 1.

[0302] Among them, if the sliding operation distance is between distance threshold 4 (for example, 1 card height) and distance threshold 5 (for example, 4 / 3 card height), as the sliding operation distance gradually increases, the upper part of card N displayed on the card stack gradually decreases, the upper part of card 1 displayed on the card stack gradually increases, and the upper part of card 2 displayed on the card stack remains unchanged or gradually increases.

[0303] Optionally, when displaying part of card N, part of card 1, and part of card 2 in the area where the card stack is located, the transparency of card 1 can be less than the transparency of card N, and the transparency of card 2 can be less than the transparency of card 1. The transparency value range is 0 to 1, and the smaller the transparency, the more transparent the card. For example, the transparency of card N can be 1, the transparency of card 1 can be set to 0.8, and the transparency of card 2 can be 0.6. Optionally, card 1 and card 2 can also be scaled. For example, card 1 is scaled to 0.9 of the original size, and card 2 is scaled to 0.8 of the original size. In this way, by setting the transparency and scaling size of the cards, the hierarchical display effect between the cards can be reflected.

[0304] S1319: Determine whether the slide is between a distance threshold of 4 (eg, 1 card height) and a distance threshold of 5 (eg, 4 / 3 card height), and the process ends.

[0305] In the embodiment of the present application, distance threshold 6 is smaller than distance threshold 4, and distance threshold 4 is smaller than distance threshold 5.

[0306] S1320. If the sliding operation ends when sliding to between distance threshold 4 (e.g., 1 card height) and distance threshold 5 (e.g., 4 / 3 card height), control card N to rebound upward to display all of card N on the top layer of the area where the card stack is located.

[0307] Optionally, when card N slides upward to display the entire card N at the top layer of the card stack, the transparency of card N at the top layer of the card stack can be set to 1. Since card N completely covers card 1, at this time, the transparency of card 1 can be set to 0, that is, card 1 is completely transparent.

[0308] S1321. When the sliding distance exceeds a threshold of 5 (for example, 4 / 3 of the card height), the card stack is expanded to an expanded state, and a card stack expansion interface is displayed.

[0309] The card stack expansion interface may include all of the first T cards from the top card onwards of the N cards in the card stack and a portion of the Nth card from the top card onwards.

[0310] Since the top card is card N at this time, that is, the card stack expansion interface may include card N, all of cards 1 to N-1, and part of card N-1.

[0311] Optionally, since the card stack expansion interface is triggered by the sliding operation, card N, all of card 1 to card T-1, and part of card T-1 can be arranged and displayed from bottom to top in the card stack expansion interface, and the upper part of card T-1 can be displayed above card T-1. In this way, the display order of cards in the card stack expansion interface follows the sliding direction of the sliding operation, which improves the display effect of the cards.

[0312] For details about the card display effect in the card stack triggered by the sliding operation, please refer to the above Figure 4A-Figure 4I , Figure 5A-5F ,as well as Fig.11 The embodiments shown in the above description will not be described in detail here.

[0313] Through a card display method provided in the implementation of the present application, the electronic device 100 can receive a user's sliding operation on the card stack when displaying an interface including a card stack, and the electronic device 100 can determine and display the display effect of the card stack according to the sliding type and sliding distance of the sliding operation. In this way, the user can achieve a variety of display effects of the card stack through sliding operations, simplifying the complexity of operating the card stack.

[0314] in:

[0315] The electronic device 100 may display a first interface, the first interface including a card stack, and a first card is displayed in the area where the card stack is located. The electronic device 100 may receive a first sliding operation started by a user from the area where the card stack is located; if the sliding distance of the first sliding operation in the first direction does not reach the first distance threshold, the electronic device 100 may display part of the first card and part of the second card in the area where the card stack is located. If the sliding distance of the first sliding operation in the first direction reaches or exceeds the first distance threshold and does not reach the second distance threshold, the electronic device 100 may display part of the first card, part of the second card, and part of the third card in the area where the card stack is located; wherein the first distance threshold is less than the second distance threshold. When the sliding distance of the first sliding operation in the first direction reaches or exceeds the second distance threshold, the electronic device 100 may display a second interface, the second interface including all of the first card, all of the second card, and all of the third card.

[0316] When displaying the first interface, the electronic device 100 may receive a second sliding operation started by the user from the area where the card stack is located. When the sliding distance of the second sliding operation in the second direction does not reach the fourth distance threshold, a portion of the fourth card and a portion of the first card are displayed in the area where the card stack is located; wherein the second direction is opposite to the first direction; when the sliding distance of the second sliding operation in the second direction reaches or exceeds the fourth distance threshold and does not reach the fifth distance threshold, a portion of the fourth card, a portion of the first card, and a portion of the second card are displayed in the area where the card stack is located; wherein the fourth distance threshold is less than the fifth distance threshold; when the sliding distance of the second sliding operation in the second direction reaches or exceeds the fifth distance threshold, a third interface is displayed, and the third interface includes all of the fourth card, all of the first card, and all of the second card.

[0317] In the embodiment of the present application, the first sliding operation may be the sliding operation in the above embodiment, the first direction may be the direction from the bottom of the display screen to the top of the display screen, the first distance threshold may be the distance threshold 1 in the above embodiment (for example, 2 / 3 of the card height), the second distance threshold may be the distance threshold 2 in the above embodiment (for example, 9 / 10 of the card height), and the third distance threshold may be the distance threshold 3 in the above embodiment (for example, 1 / 2 of the card height). The second interface may be the card stack expansion interface triggered by the sliding operation on the card stack.

[0318] The second sliding operation may be the sliding operation in the above embodiment, the second direction may be the direction from the top of the display screen to the bottom of the display screen, the fourth distance threshold may be the distance threshold 4 in the above embodiment (for example, 1 card height), the fifth distance threshold may be the distance threshold 5 in the above embodiment (for example, 4 / 3 card height), and the third distance threshold may be the distance threshold 6 in the above embodiment (for example, 1 / 3 card height). The third interface may be the card stack expansion interface triggered by the sliding operation on the card stack.

[0319] In an embodiment of the present application, the card queue of the card stack includes the first card to the Nth card arranged in a preset order. When a card is added or deleted in the card queue of the card stack, or when a top-level card is changed, a plurality of cards will be re-arranged from the top to the bottom in the area where the card stack is located. For example, the electronic device may arrange a plurality of cards in the area where the card stack is located from the top to the bottom in sequence, and the first card is at the top of the area where the card stack is located.

[0320] Here, it is assumed that the top card is the Mth card in the card queue. The card stack area from the top to the bottom is arranged in the i-th layer and can be determined by the following formula:

[0321] In the case of P<N-1, when 1≤i≤P, the card in the i-th layer of the card pile area is the ((M+i-1)%N)th card in the card queue. When i is equal to (P+1), the card in the i-th layer of the card pile area is the ((M+N-1)%N)th card in the card queue. Among them, % is the modulo operation.

[0322] In the case of P≥N-1, the card arranged in the i-th layer of the area where the card pile is located is the ((M+i-1)%N)-th card in the card queue, 1≤i≤N.

[0323] Specifically, the situation of laying out multiple cards in the area where the card pile is located may be as follows:

[0324] 1. The first card is the first card in the card queue, 1<P<(N-1). The electronic device 100 can sequentially arrange the first card to the Pth card and the Nth card in the card queue from the top layer to the bottom layer in the area where the card stack is located.

[0325] For example, P is 3, N is 6, and the top card is card 1. Therefore, card 1, card 2, card 3, and card 6 can be arranged in order from the top to the bottom in the area where the card stack is located.

[0326] 2. The first card is the first card in the card queue, 1<N-1≤P. The electronic device 100 can arrange the first to Nth cards in the card queue in order from the top layer to the bottom layer in the area where the card stack is located.

[0327] For example, P is 3, N is 3, and the top card is card 1. Therefore, card 1, card 2, and card 3 can be arranged in order from the top to the bottom in the area where the card stack is located.

[0328] 3. The first card is the Mth card in the card queue, 1<M≤N, M+P-1≤N. The electronic device 100 can sequentially arrange the Mth card to the (M+P-1)th card and the (M-1)th card in the card queue from the top layer to the bottom layer in the area where the card stack is located.

[0329] For example, P is 3, N is 6, and M is 2, that is, the top card is card 2. Therefore, card 2, card 3, card 4, and card 1 can be arranged in order from the top to the bottom in the area where the card stack is located.

[0330] 4. The first card is the Mth card in the card queue, 1<M≤N, M+P-1>N, 1<P<(N-1). The electronic device 100 can arrange the Mth to Nth cards, the 1st card to the (M+P-1-N)th card, and the (M-1)th card in the card queue from the top layer to the bottom layer in the area where the card stack is located.

[0331] For example, P is 3, N is 6, and M is 4, that is, the top card is card 4. Therefore, card 4, card 5, card 6, and card 1 can be arranged in order from the top to the bottom in the area where the card stack is located.

[0332] For another example, P is 3, N is 6, and M is 5, that is, the top card is card 5. Therefore, card 5, card 6, card 1, and card 4 can be arranged in order from the top to the bottom in the area where the card stack is located.

[0333] 5. The first card is the Mth card in the card queue, 1<M≤N, M+P-1>N, 1<N-1≤P. The electronic device 100 can arrange the Mth to Nth cards and the 1st to (M-1)th cards in the card queue in order from the top layer to the bottom layer in the area where the card stack is located.

[0334] For example, P is 5, N is 6, and M is 5, that is, the top card is card 5. Therefore, card 5, card 6, card 1, card 2, card 3, and card 4 can be arranged in sequence in the area where the card stack is located.

[0335] It should be noted that when there are only two cards in the card queue of the card stack, the two cards can be laid out in the area where the card stack is located. When sliding on the card stack, a portion of each of the two cards can be displayed on the card stack. If a long slide is made on the card stack (for example, sliding up more than 9 / 10 of the card height or sliding down more than 4 / 3 of the card height), the card stack expansion interface including the two cards can be displayed.

[0336] The embodiment of the present application further provides a computer-readable storage medium, which stores a computer program. When the computer program is executed by a processor, the steps in the above-mentioned method embodiments can be implemented.

[0337] The embodiments of the present application also provide a computer program product. When the computer program product is executed on an electronic device, the electronic device can implement the steps in the above-mentioned various method embodiments.

[0338] The embodiment of the present application also provides a chip system, the chip system includes a processor, the processor is coupled to a memory, and the processor executes a computer program stored in the memory to implement the steps of any method embodiment of the present application. The chip system can be a single chip or a chip module composed of multiple chips.

[0339] The term "user interface (UI)" in the specification and drawings of this application refers to the medium interface for interaction and information exchange between an application or operating system and a user, which realizes the conversion between the internal form of information and the form acceptable to the user. The user interface of an application is source code written in a specific computer language such as Java and extensible markup language (XML). The interface source code is parsed and rendered on the terminal device, and finally presented as content that the user can recognize, such as pictures, text, buttons and other controls. Controls, also known as widgets, are the basic elements of the user interface. Typical controls include toolbars, menu bars, text boxes, buttons, scroll bars, pictures and text. The properties and contents of controls in the interface are defined by tags or nodes, such as XML through <textview> 、 <imgview> 、 <videoview>The controls contained in the interface are specified by nodes such as <head> and <body>. A node corresponds to a control or attribute in the interface. After being parsed and rendered, the node is presented as user-visible content. In addition, many applications, such as hybrid applications, usually also contain web pages in their interfaces. A web page, also known as a page, can be understood as a special control embedded in the application interface. A web page is source code written in a specific computer language, such as hypertext markup language (HTML), cascading style sheets (CSS), JavaScript (JS), etc. The web page source code can be loaded and displayed as user-recognizable content by a browser or a web page display component with similar functions to a browser. The specific content contained in a web page is also defined by tags or nodes in the web page source code. For example, HTML is defined by <body> tags or nodes in the web page source code. 、 、 <video> 、 <canvas>To define the elements and attributes of a web page.

[0340] The most common form of user interface is graphical user interface (GUI), which refers to a user interface related to computer operation that is displayed in a graphical manner. It can be an icon, window, control or other interface element displayed on the display screen of an electronic device, where a control can include icons, buttons, menus, tabs, text boxes, dialog boxes, status bars, navigation bars, widgets and other visual interface elements.

[0341] In the above embodiments, it can be implemented in whole or in part by software, hardware, firmware or any combination thereof. When implemented using software, it can be implemented in whole or in part in the form of a computer program product. The computer program product includes one or more computer instructions. When the computer program instructions are loaded and executed on a computer, the process or function described in the embodiment of the present application is generated in whole or in part. The computer can be a general-purpose computer, a special-purpose computer, a computer network, or other programmable devices. The computer instructions can be stored in a computer-readable storage medium, or transmitted from one computer-readable storage medium to another computer-readable storage medium. For example, the computer instructions can be transmitted from a website site, computer, server or data center by wired (e.g., coaxial cable, optical fiber, digital subscriber line) or wireless (e.g., infrared, wireless, microwave, etc.) mode to another website site, computer, server or data center. The computer-readable storage medium can be any available medium that a computer can access or a data storage device such as a server or data center that contains one or more available media integration. The available medium can be a magnetic medium, (e.g., a floppy disk, a hard disk, a tape), an optical medium (e.g., a DVD), or a semiconductor medium (e.g., a solid-state hard disk), etc.

[0342] Those skilled in the art can understand that to implement all or part of the processes in the above-mentioned embodiments, the processes can be completed by computer programs to instruct related hardware, and the programs can be stored in computer-readable storage media. When the programs are executed, they can include the processes of the above-mentioned method embodiments. The aforementioned storage media include: ROM or random access memory RAM, magnetic disk or optical disk and other media that can store program codes.

[0343] As described above, the above embodiments are only used to illustrate the technical solutions of the present application, rather than to limit them. Although the present application has been described in detail with reference to the aforementioned embodiments, those skilled in the art should understand that they can still modify the technical solutions described in the aforementioned embodiments, or make equivalent replacements for some of the technical features therein. However, these modifications or replacements do not cause the essence of the corresponding technical solutions to deviate from the scope of the technical solutions of the embodiments of the present application.< / canvas> < / video> < / videoview> < / imgview> < / textview>

Claims

1. A card display method, characterized in that: include: Displaying a first interface, wherein the first interface includes a card stack, and a first card is displayed in an area where the card stack is located; receiving a first sliding operation from the area where the card stack is located; When the sliding distance of the first sliding operation in the first direction does not reach a first distance threshold, displaying a portion of the first card and a portion of the second card in the area where the card stack is located; When the sliding distance of the first sliding operation in the first direction reaches or exceeds the first distance threshold and does not reach the second distance threshold, a portion of the first card, a portion of the second card, and a portion of the third card are displayed in the area where the card stack is located; wherein the first distance threshold is less than the second distance threshold; When the sliding distance of the first sliding operation in the first direction reaches or exceeds the second distance threshold, a second interface is displayed, where the second interface includes all of the first card, all of the second card, and all of the third card.

2. The method according to claim 1, characterized in that The card queue of the card stack includes the first card to the Nth card arranged in a preset order, the first card is the first card in the card queue, 1<P<(N-1); The method further comprises: The first card to the Pth card and the Nth card in the card queue are arranged in sequence from the top layer to the bottom layer in the area where the card stack is located.

3. The method according to claim 1, characterized in that: The card queue of the card stack includes the first card to the Nth card arranged in a preset order, the first card is the first card in the card queue, 1<N-1≤P; The method further comprises: The first to Nth cards in the card queue are arranged in sequence from the top layer to the bottom layer in the area where the card stack is located.

4. The method according to claim 1, characterized in that: The card queue of the card stack includes the 1st card to the Nth card arranged in a preset order, the first card is the Mth card in the card queue, 1<M≤N, M+P-1≤N; The method further comprises: The Mth card to the (M+P-1)th card and the (M-1)th card in the card queue are arranged in sequence from the top layer to the bottom layer in the area where the card pile is located.

5. The method according to claim 1, characterized in that The card queue of the card stack includes the 1st card to the Nth card arranged in a preset order, the first card is the Mth card in the card queue, 1<M≤N, M+P-1>N, 1<P<(N-1); The method further comprises: In the area where the card pile is located, the Mth to Nth cards, the 1st card to the (M+P-1-N)th card, and the (M-1)th card in the card queue are arranged in sequence from the top layer to the bottom layer.

6. The method according to claim 1, characterized in that The card queue of the card stack includes the 1st card to the Nth card arranged in a preset order, the first card is the Mth card in the card queue, 1<M≤N, M+P-1>N, 1<N-1≤P; The method further comprises: The Mth to Nth cards, and the 1st to (M-1)th cards in the card queue are arranged in sequence from the top layer to the bottom layer in the area where the card pile is located.

7. The method according to any one of claims 2 to 6, characterized in that: The method further comprises: When multiple cards are arranged in sequence from the top layer to the bottom layer in the area where the card stack is located, the first card is set to be completely opaque, and the remaining cards arranged in the area where the card stack is located are set to be completely transparent, and the remaining cards do not include the first card.

8. The method according to any one of claims 1 to 7, characterized in that The method further comprises: If the first sliding operation ends when the sliding distance in the first direction does not reach a third distance threshold, all of the first cards are displayed in the area where the card stack is located, and the third distance threshold is less than the first distance threshold.

9. The method according to any one of claims 1 to 8, characterized in that If the sliding operation ends when the sliding distance in the first direction is less than a third distance threshold, displaying all of the first card in the area where the card stack is located specifically includes: If the sliding distance of the first sliding operation in the first direction does not reach the third distance threshold, the first card rebounds in the area where the card stack is located in the opposite direction of the first direction until the entire first card is displayed in the area where the card stack is located.

10. The method according to any one of claims 1 to 9, characterized in that The method further comprises: If the first sliding operation ends when the sliding distance in the first direction reaches or exceeds a third distance threshold and does not reach the second distance threshold, all of the second cards are displayed in the area where the card stack is located, and the third distance threshold is less than the first distance threshold.

11. The method according to any one of claims 1 to 10, characterized in that When the sliding distance of the first sliding operation in the first direction does not reach the first distance threshold, the portion of the second card is more transparent than the portion of the first card; and / or, When the sliding distance of the first sliding operation in the first direction reaches or exceeds the first distance threshold and does not reach the second distance threshold, the portion of the second card is more transparent than the portion of the first card, and the portion of the third card is more transparent than the portion of the second card.

12. The method according to any one of claims 1 to 11, characterized in that When the sliding distance of the first sliding operation in the first direction does not reach the first distance threshold, as the sliding distance of the first sliding operation in the first direction increases, the portion of the first card displayed in the area where the card stack is located gradually decreases, and the portion of the second card displayed in the area where the card stack is located gradually increases; and / or, In the case where the sliding distance of the first sliding operation in the first direction reaches or exceeds the first distance threshold and does not reach the second distance threshold, as the sliding distance of the first sliding operation in the first direction increases, the portion of the first card displayed in the area where the card stack is located gradually decreases, the portion of the second card displayed in the area where the card stack is located gradually increases, and the portion of the third card displayed in the area where the card stack is located gradually increases or remains unchanged.

13. The method according to any one of claims 1 to 12, characterized in that In the second interface, the display area of ​​the first card is located in the first direction of the display area of ​​the second card, and the display area of ​​the second card is located in the first direction of the third card.

14. The method according to any one of claims 1 to 13, characterized in that The method further comprises: When the first interface is displayed, receiving a second sliding operation from the area where the card stack is located; When the sliding distance of the second sliding operation in the second direction does not reach a fourth distance threshold, a portion of the fourth card and a portion of the first card are displayed in the area where the card stack is located; wherein the second direction is opposite to the first direction; When the sliding distance of the second sliding operation in the second direction reaches or exceeds the fourth distance threshold and does not reach the fifth distance threshold, a portion of the fourth card, a portion of the first card, and a portion of the second card are displayed in the area where the card stack is located; wherein the fourth distance threshold is less than the fifth distance threshold; When the sliding distance of the second sliding operation in the second direction reaches or exceeds the fifth distance threshold, a third interface is displayed, wherein the third interface includes all of the fourth card, all of the first card, and all of the second card.

15. The method according to claim 14, characterized in that The method further comprises: When the sliding distance of the second sliding operation in the second direction reaches the fourth distance threshold, all of the fourth card is displayed in the area where the card stack is located.

16. The method according to claim 14 or 15, characterized in that The method further comprises: If the sliding distance of the second sliding operation in the second direction does not reach a sixth distance threshold, the first card is completely displayed in the area where the card stack is located, and the sixth distance threshold is less than the fourth distance threshold.

17. The method according to claim 16, characterized in that If the sliding distance of the second sliding operation in the second direction is less than a sixth distance threshold, the first card is displayed in its entirety in the area where the card stack is located, specifically including: If the sliding distance of the second sliding operation in the second direction does not reach the sixth distance threshold, the fourth card rebounds along the first direction in the area where the card stack is located until all of the first card is displayed in the area where the card stack is located.

18. The method according to any one of claims 14 to 17, characterized in that: The method further comprises: If the second sliding operation ends when the sliding distance in the second direction reaches or exceeds the sixth distance threshold and does not reach the fifth distance threshold, the entire fourth card is displayed in the area where the card stack is located, and the sixth distance threshold is less than the first distance threshold.

19. The method according to any one of claims 14 to 18, characterized in that When the sliding distance of the second sliding operation in the second direction does not reach the fourth distance threshold, the portion of the first card is more transparent than the portion of the fourth card; and / or, When the sliding distance of the second sliding operation in the second direction reaches or exceeds the fourth distance threshold and does not reach the fifth distance threshold, the portion of the first card is more transparent than the portion of the fourth card, and the portion of the second card is more transparent than the portion of the first card.

20. The method according to any one of claims 14 to 19, characterized in that When the sliding distance of the second sliding operation in the second direction does not reach the fourth distance threshold, as the sliding distance of the second sliding operation in the second direction increases, the portion of the fourth card displayed in the area where the card stack is located gradually increases, and the portion of the first card displayed in the area where the card stack is located gradually decreases; and / or, When the sliding distance of the second sliding operation in the second direction reaches or exceeds the fourth distance threshold and does not reach the fifth distance threshold, as the sliding distance of the second sliding operation in the second direction increases, the portion of the fourth card displayed in the area where the card stack is located gradually decreases, the portion of the first card displayed in the area where the card stack is located gradually decreases, and the portion of the second card displayed in the area where the card is located gradually increases or remains unchanged.

21. The method according to any one of claims 14 to 20, characterized in that In the third interface, the display area of ​​the fourth card is located in the first direction of the display area of ​​the first card, and the display area of ​​the first card is located in the first direction of the second card.

22. An electronic device, characterized in that: It includes a display screen, one or more processors and one or more memories; wherein the display screen, the one or more memories are coupled to the one or more processors, the one or more memories are used to store computer program codes, and the computer program codes include computer instructions, and when the one or more processors execute the computer instructions, the electronic device executes the method as described in any one of claims 1-21.

23. An electronic device, characterized in that: The method comprises one or more functional modules, wherein the one or more functional modules are used to execute the method according to any one of claims 1 to 21.

24. A chip, characterized in that: The chip is applied to an electronic device, and the chip comprises a processor and an interface circuit, wherein the interface circuit is used to receive instructions and transmit them to a processing circuit, and the processor is used to execute instructions, so that the chip executes the method as described in any one of claims 1-21.

25. A computer-readable storage medium, characterized in that: The method comprises instructions, which, when executed on an electronic device, cause the electronic device to execute the method as claimed in any one of claims 1 to 21.

Images