Dragging window display method and related device

Abstract

The embodiment of the invention provides a display method of a dragged window and a related device, which are applied to electronic equipment. Attribute parameters of the dragged window are preset in the electronic equipment, such as the number of shadow layers of the dragged window and transparency and coverage corresponding to each layer of shadow. The electronic equipment displays a first user interface of a first application, the first user interface comprises a first application window of the first application, the first application window comprises a first object, and the first object comprises text content, a first part responding to first user operation, a selected second object and attribute parameters of the second object. The second object is part or all of the content in the first object, and the electronic equipment determines the drag window according to the attribute parameter of the first object. By means of the method and device, the visual effect presented by the dragged window can be improved, and the user experience is improved.

Description

Technical Field

[0001] The present application relates to the field of terminal technology, and in particular to a method for displaying a dragged window and a related device. Background Art

[0002] In order to better meet the needs of users, electronic devices can provide users with a dragging function for displayed objects. For example, dragging refers to an operation in which a user long presses an object (such as text, pictures, files, etc.) displayed on an electronic device and then moves a finger to drag it to another location. However, in the process of dragging the above objects, the dragging effect currently presented is not good and the visual effect is poor. Summary of the invention

[0003] A method for displaying a drag window and a related device provided in an embodiment of the present application are applied in the field of terminal technology. Through the present application, the visual effect presented by the drag window can be improved and the user experience can be enhanced.

[0004] In a first aspect, the present application provides a method for displaying a drag window, which is applied to an electronic device, and the method includes:

[0005] The electronic device displays a first user interface, the first user interface includes a first application window of a first application, the first application window includes a first object, and the first object includes text content;

[0006] In response to the first part of the first user operation, a second object is selected, and attribute parameters of the second object are obtained, wherein the second object is part or all of the content in the first object;

[0007] determining a drag window according to the attribute parameters of the second object, wherein an outline of the drag window matches an outer edge of an area occupied by the second object on the first user interface;

[0008] In response to a second part of the first user operation, the drag window is displayed, and the selected second object is displayed in the drag window, wherein the drag window moves following the second part of the first user operation.

[0009] In the present application, the drag window is determined according to the attribute parameters of the second object, so the second object displayed in the drag window can retain the characteristics of the second object in the first application window, for example, the outline of the drag window matches the outer edge of the area occupied by the second object on the first user interface. In this way, the displayed drag window can better match the layout of the second object in the second user interface, can provide better visual effects, and improve user experience.

[0010] In a possible implementation manner of the first aspect, determining the drag window according to the attribute parameters of the second object includes:

[0011] Acquire the layout of the second object from the attribute parameters of the second object, where the layout of the second object includes the maximum height and maximum width of the second object, the line height and line width of the text content, the horizontal coordinate information of the starting character of the first line and the horizontal coordinate information of the ending character of the last line;

[0012] determining a first rectangle according to a maximum height and a maximum width of the second object;

[0013] Determine the upper left part according to the line height of the text content and the horizontal coordinate information of the starting character of the first line;

[0014] Determine the lower right part according to the line height of the text content, the maximum width and the horizontal coordinate information of the last line termination character;

[0015] The drag window is obtained by removing the upper left portion and the lower right portion from the first rectangle.

[0016] It can be seen that the drag backplane determined in the present application is determined according to the layout of the second object in the first user interface. Therefore, the determined drag backplane can be presented as the original layout of the second object, presenting a better visual experience.

[0017] In a possible implementation of the first aspect, the outline of the dragged window further includes an outline shadow, which can provide a better visual effect.

[0018] In a possible implementation of the first aspect, the outline shadow includes a first shadow layer, a second shadow layer, and a third shadow layer. The shadow effect of the outline shadow is formed by superimposing three shadow layers, which is visually closer to shadows in real life, so that dragging the window can provide a higher visual effect.

[0019] In a possible implementation of the first aspect, the outline shadow includes shadow coverage and shadow transparency corresponding to the first shadow layer, the second shadow layer, and the third shadow layer, respectively, wherein the coverage and shadow transparency of each shadow layer are different. It can be seen that the shadow parameters of each shadow layer are different, which can provide a more realistic effect in visual presentation.

[0020] In a possible implementation of the first aspect, when the system color of the electronic device is a dark mode, the color of the dragged window is a color corresponding to the dark mode;

[0021] When the system color of the electronic device is in light color mode, the color of the drag window is the color corresponding to the light color mode. It can be seen that the drag window can better match the system settings and provide a better experience for the user.

[0022] In a possible implementation of the first aspect, the first user interface further includes a second application window of a second application, and the step of displaying the drag window in response to the second part of the first user operation and displaying the selected second object in the drag window includes:

[0023] In response to a second part of the first user operation, dragging the drag window to a second application window of the second application, and displaying the drag window in the second application window;

[0024] In response to a drop operation on the drag window, the second object is displayed in a second application window of the second application.

[0025] In this application, the drag window can be dragged to other applications or other devices to improve user convenience.

[0026] In a possible implementation of the first aspect, the second application window is a floating window, and the size of the drag window displayed in the second application window is determined according to the size of the floating window. It can be seen that the size of the drag window can be changed according to the size of the application window, so as to adapt to different scenarios and have a wider range of application scenarios.

[0027] In a possible implementation of the first aspect, the first object further includes non-text content. The application range of the drag window is improved.

[0028] In a possible implementation manner of the first aspect, determining the drag window according to the attribute parameters of the second object includes:

[0029] determining a drawing method of the drag window according to the attribute parameters of the second object;

[0030] The drag window is determined by the drawing method and preset drag window attribute parameters.

[0031] It can be seen that the drag window of the present application is determined based on the attribute parameters of the second object, so that the determined drag window is more consistent with the original layout of the second object. In addition, there are preset drag window attributes in the electronic device, which can provide other effects (such as shadow effects) to the drag window, so that the presented drag window can provide a better visual effect to the user.

[0032] In a possible implementation of the first aspect, determining the drawing mode of the drag window according to the attribute parameters of the second object includes:

[0033] When the second object is the text content, obtaining an Editor object of the text content;

[0034] A first Textview of the text content is constructed through the Editor object, wherein the first Textview includes attribute parameters of the second object, and the attribute parameters are used to describe the layout of the second object in the first user interface.

[0035] The format of the first textview is different from that of the second object in the first user interface, specifically HnDragTextview, which is a derived class of textview and also supports text content reporting. Compared with other textviews, the text layout and format in HnDragTextview are consistent with the selected text (i.e., the text content contained in the second object).

[0036] In a possible implementation of the first aspect, determining the drag window by using the drawing mode and preset drag window attribute parameters includes:

[0037] Determine the size of the drag window and the layout of the text content in the drag window according to the first TextView of the text content;

[0038] The outline shadow of the drag window is determined according to the preset attribute parameters of the drag window.

[0039] It can be seen that the text layout and format of the text content contained in the drag window determined by the first Textview are consistent with those in the second object.

[0040] In a possible implementation of the first aspect, determining the drawing mode of the drag window according to the attribute parameters of the second object includes:

[0041] In the case where the second object is non-text content, an inner class of the non-text content is determined according to attribute parameters of the second object, and the inner class is a derived class of view view.

[0042] Among them, the non-text content corresponds to an inner class of a view, for example, the inner class can be the HnDragShadowbuilder class, which is a derived class based on View.Shadowbuilder and can override the constructor, onDrawShadow() method, and onProvideShadowMetrics() method. Compared with other subclasses of view, the HnDragShadowbuilder class adds shadow effects and stacking effects.

[0043] In a possible implementation of the first aspect, determining the drag window by using the drawing mode and preset drag window attribute parameters includes:

[0044] Determining the non-text content displayed in the drag window according to the internal class of the non-text content;

[0045] The outline shadow of the drag window is determined according to the preset attribute parameters of the drag window.

[0046] It can be seen that the inner class of non-text content can provide shadow effect and stacking effect for the drag window, thereby providing a better visual effect.

[0047] In a possible implementation of the first aspect, when the second object includes N non-text contents, the drag window further includes a stacking form and a superscript;

[0048] The corner mark is used to indicate the amount of the non-text content displayed in the drag window;

[0049] The stacking form is determined by the rotation angle and position deviation of the M non-text contents displayed in the drag window;

[0050] The outline shadow of the drag window includes the outline shadows of the M non-text contents;

[0051] Among them, the M non-text contents are the non-texts among the N non-texts displayed in the drag window of the non-text, N is a positive integer greater than or equal to 1, and M is a positive integer greater than 1 and less than or equal to N.

[0052] It can be seen that the drag window can provide more information, and the corner mark can help the user to know the number of the second object from the drag window.

[0053] In a possible implementation of the first aspect, in the process of moving the drag window to the second area, the corner mark is also used to indicate the state of the drag window, and the state of the drag window is used to indicate that the second area can accept the drag window or the second area cannot accept the drag window.

[0054] It can be seen that the corner mark in the drag window can be used to prompt the user of the acceptance status of the drag window when the drag window is dragged, so that the user can make corresponding processing on the drag window.

[0055] In a second aspect, an embodiment of the present application provides an electronic device, the electronic device comprising: one or more processors; a memory; wherein the memory is coupled to the one or more processors, the memory is used to store computer program code, the computer program code comprises computer instructions, and the one or more processors call the computer instructions to enable the electronic device to execute the method for displaying a drag window described in the first aspect or any possible implementation of the first aspect.

[0056] In a third aspect, the present application provides a chip or a chip system, which includes at least one processor and a communication interface, the communication interface and the at least one processor are interconnected through a line, and the at least one processor is used to run a computer program or instruction to execute the display method of the drag window described in the first aspect or any possible implementation of the first aspect. Among them, the communication interface in the chip can be an input / output interface, a pin or a circuit, etc.

[0057] In a possible implementation, the chip or chip system described above in the embodiment of the present application further includes at least one memory, in which instructions are stored. The memory may be a storage unit inside the chip, such as a register, a cache, etc., or a storage unit of the chip (e.g., a read-only memory, a random access memory, etc.).

[0058] In a fourth aspect, an embodiment of the present application provides a computer storage medium, which stores a computer program. When the computer program is executed by a processor, the computer executes the method for displaying a drag window as described in the first aspect or any possible implementation of the first aspect.

[0059] In a fifth aspect, an embodiment of the present application provides a computer program product, which, when executed on a communication device, enables the communication device to execute a method for displaying a drag window as described in the first aspect or any possible implementation of the first aspect.

[0060] It should be understood that the description of technical features, technical solutions, beneficial effects or similar language in this application does not imply that all features and advantages can be realized in any single embodiment. On the contrary, it is understood that the description of features or beneficial effects means that specific technical features, technical solutions or beneficial effects are included in at least one embodiment. Therefore, the description of technical features, technical solutions or beneficial effects in this specification does not necessarily refer to the same embodiment. Furthermore, the technical features, technical solutions and beneficial effects described in the present embodiment can also be combined in any appropriate manner. Those skilled in the art will understand that the embodiment can be realized without one or more specific technical features, technical solutions or beneficial effects of a specific embodiment. In other embodiments, additional technical features and beneficial effects can also be identified in a specific embodiment that does not embody all embodiments. BRIEF DESCRIPTION OF THE DRAWINGS

[0061] The following is an introduction to the drawings used in the embodiments of the present application.

[0062] Figure 1 A schematic diagram of the hardware structure of an electronic device 100 is exemplarily shown;

[0063] Figure 2 A schematic diagram of a software architecture of an electronic device 100 is exemplarily shown;

[0064] FIG. 3A to FIG. 3D The UI of a drag window displaying target text is exemplarily shown;

[0065] 4A to 4D The style of the drag window 317 of the displayed target text is exemplarily shown;

[0066] Figures 5 to 7 The UI for moving the dragged window to another location is exemplified;

[0067] FIG. 8A to FIG. 8D The following example shows a UI of a drag window displaying a target image;

[0068] Fig. 8E The style of the drag window 816 of the displayed target image is exemplarily shown;

[0069] Fig.8F It is the style UI of the corner mark provided in the embodiment of the present application;

[0070] FIG. 9A to FIG. 9B The following example shows a UI showing a drag window of a target file;

[0071] Fig.10 The module interaction flow chart of a drag window displaying a target text provided by an embodiment of the present application is exemplarily shown;

[0072] Fig.11 The module interaction flow chart of a drag window displaying a target image provided by an embodiment of the present application is exemplarily shown;

[0073] Fig.12 The module interaction flow chart of a drag window displaying a target file provided by an embodiment of the present application is exemplarily shown;

[0074] Fig.13 It is a flowchart of a method for displaying a drag window provided in an embodiment of the present application. DETAILED DESCRIPTION

[0075] The terms used in the following embodiments of the present application are only for the purpose of describing specific embodiments, and are not intended to be used as limitations to the present application. As used in the specification and appended claims of the present application, the singular expressions "one", "a kind of", "said", "above", "the" and "this" are intended to also include plural expressions, unless there is a clear indication to the contrary in the context. It should also be understood that the term "and / or" used in the present application refers to and includes any or all possible combinations of one or more listed items.

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

[0077] In order to clearly describe the technical solutions of the embodiments of the present application, some of the terms and technologies involved in the embodiments of the present application are briefly introduced:

[0078] 1. Touch events

[0079] A touch event refers to an event generated by an electronic device when a finger touches the display screen of the electronic device. Touch types include down, move, and up. The touch position may be the coordinates of the point where the finger contacts the display screen. The sampling point may represent the timestamp of the touch operation. Touch events include down events, move events, or up events. If the touch type of a touch event is down, the touch event may be called a down event. If the touch type of a touch event is move, the touch event may be called a move event. If the touch type of a touch event is up, the touch event may be called a lift event.

[0080] It is understandable that the display screen of the electronic device may be a touch screen.

[0081] The touch in this application may include, but is not limited to, single-click, double-click, long press, single-finger long press, multi-finger long press, single-finger sliding, multi-finger sliding, knuckle sliding, and other forms. Among them, the touch in the form of sliding can be simply referred to as sliding, and sliding is, for example, but not limited to sliding left and right, sliding up and down, sliding to a first specific position, etc. This application does not limit the trajectory of the sliding operation. In one embodiment, the touch can act on a second specific position on the electronic device. The above-mentioned specific position may be located on the display screen (also referred to as the screen) of the electronic device, such as the location of controls such as icons or the edge of the display screen, or the specific position may also be located at other locations such as the side and back of the electronic device. Among them, the above-mentioned specific position is preset by the electronic device, or the specific position is determined by the electronic device in response to a user operation.

[0082] 2. Falling events

[0083] A drop event is an event generated by an electronic device when a finger touches the display screen of the electronic device for the first time. A drop event includes a touch type down, a touch position, and a sampling point. The sampling point of a drop event can be the time point when the finger first touches the display screen.

[0084] 3. Mobile events

[0085] A move event is an event generated when a finger touches the display screen of an electronic device and the electronic device collects the touch position at a fixed sampling frequency while the finger does not leave the display screen. A move event includes the touch type move, the touch position, and the sampling point. When the finger does not leave the display screen, the electronic device generates and transmits a move event each time it collects the touch position at a fixed sampling frequency.

[0086] It is understandable that after a finger touches the display screen for the first time, the finger presses the display screen for a long time, or the finger moves on the display screen, the electronic device will continue to generate and transmit movement events at a fixed sampling frequency.

[0087] Exemplarily, the event processing framework of the electronic device can generate a drop event and a move event in the process of a finger long pressing the display screen, and each time an event is generated, an event is passed to the module that needs the event. When receiving the move event, the module that needs the event can determine whether the operation of the finger on the display screen is a long press operation or a move operation based on the first threshold and the distance between the touch position of the move event and the touch position of the drop event. The distance between the touch position of the move event and the touch position of the drop event can be called an offset. Exemplarily, if the offset does not exceed the first threshold, the electronic device can determine that the operation of the finger on the display screen is a long press operation. If the offset exceeds the first threshold, the electronic device can determine that the operation of the finger on the display screen is a move operation.

[0088] The moving operation in this application belongs to the touch operation. The moving operation acting on / targeting a certain control can be an operation of keeping touching the control and moving it, such as but not limited to single-finger dragging, multi-finger dragging, knuckle dragging, etc. Similar to the touch operation, the moving operation is such as but not limited to dragging left and right, dragging up and down, dragging to a specific position, etc. This application does not limit the trajectory of the moving operation.

[0089] 4. Raise event

[0090] A lift event refers to an event generated by an electronic device when a finger is lifted from the display screen of an electronic device, that is, when the finger leaves the display screen. A lift event includes a touch type up, a touch position, and a sampling point. The sampling point of a lift event can be the first sampling point where the electronic device does not capture the touch position after the finger is lifted. The touch position in a lift event can be the touch position of the last move event before the finger is lifted. The touch position in a lift event can represent the finger lift position.

[0091] The embodiment of the present application provides a method for displaying a drag window, which is applied to an electronic device. The electronic device is preset with attribute parameters of the drag window, for example, the number of shadow layers of the drag window, the transparency and coverage corresponding to each shadow layer. The electronic device displays a first user interface of a first application, and the first user interface includes a first object. When receiving a first user operation (such as a long press and / or a move operation) acting on the first object, the attribute parameters of the first object and the attribute parameters of the preset drag window can be obtained. The electronic device draws and renders the drag window of the first object according to the attribute parameters of the first object and the attribute parameters of the drag window. Among them, the drag window is used to display the first object. In one implementation, the drag window is used to display the layout of the first object in the first user interface. Among them, the drag window contains multiple layers of shadows, which are visually closer to the shadows in life and provide a good look and feel to the user. In addition, the drag window of the first object is generated according to the attribute parameters of the first object, which is more in line with the original style of the first object and improves the visual effect.

[0092] In a possible implementation, the electronic device receives a second user operation on a drag window of a first object and may move the drag window of the first object to a position corresponding to the second user operation, for example, from a first user interface to a second user interface.

[0093] In one implementation, the first object includes, but is not limited to: text, picture, file, folder, music, video (eg, a picture or video being displayed), and the like.

[0094] When the first object is text, the attribute parameters corresponding to the text include but are not limited to: system context (context), text (textview), the starting position (start) and the ending position (end) of the selected text content in the text.

[0095] When the first object is a picture, music, video, file or folder, the attribute parameters include but are not limited to: system context, view corresponding to the target picture, music, video, file or folder, drag quantity, and type of the target picture, music, video, file or folder.

[0096] The drag window in the embodiment of the present application corresponds to the window of the first object in the application, which can also be called an application window. The application window can be an application activity (Activity) or a view (View) included in the application activity. For the convenience of explanation, the application activity will be referred to as activity in the following description. Among them, an application of an electronic device can include at least one Activity, and an Activity can include at least one View. In one embodiment, Activity is an interface for interaction between a user and an application. Activity is for an application to draw an interface in it. Activity can fill the screen (expressed as full-screen display), or it can be smaller than the screen and float on other Activities (expressed as floating windows, small windows, for example). In one embodiment, an Activity is something that a user can interact with intuitively, which can be expressed as a user interface, and can be understood as an Activity corresponding to a user interface (which can include at least one control). In one embodiment, View is an abstraction of a control of a user interface, and a View can be a control or a group of controls composed of multiple controls.

[0097] In the embodiments of the present application, the electronic device may be a device equipped with a display screen, and may be, but is not limited to, 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 TVs and smart screens, wearable devices such as smart bracelets, smart watches, and smart glasses, extended reality (XR) devices such as augmented reality (AR), virtual reality (VR), and mixed reality (MR), vehicle-mounted devices or smart city devices. The embodiments of the present application do not impose any special restrictions on the specific types of electronic devices.

[0098] It should be understood that the method for drawing a drag window provided in an embodiment of the present application can be applied to a single electronic device or to multiple electronic devices, such as a multi-screen collaborative scenario. Exemplarily, it can be applied to the display of drag windows between different windows on a mobile phone, or the mobile phone can be projected onto a laptop computer, and then applied to the display of drag windows between the projection window and the local window on the laptop computer. Among them, different windows on the mobile phone can correspond to different applications, or they can be different windows of the same application.

[0099] Next, the electronic device in the embodiment of the present application is exemplarily introduced.

[0100] Figure 1 A schematic diagram of the hardware structure of an electronic device 100 is exemplarily shown.

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

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

[0103] The controller can generate operation control signals according to the instruction operation code and timing signal to complete the control of instruction fetching and execution.

[0104] The processor 110 may also be provided with a memory for storing instructions and data. In one embodiment, 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.

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

[0106] 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 the antennas. For example, antenna 1 can be reused as a diversity antenna for a wireless local area network. In another embodiment, the antenna can be used in combination with a tuning switch.

[0107] The mobile communication module 150 can provide wireless communication solutions including second generation (2G) / third generation (3G) / fourth generation (4G) / fifth generation (5G) / sixth generation (6G) applied to the electronic device 100. The mobile communication module 150 may include at least one filter, switch, power amplifier, 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 one embodiment, at least some of the functional modules of the mobile communication module 150 can be set in the processor 110. In one embodiment, 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.

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

[0109] In one embodiment, 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).

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

[0111] The display screen 194 is used to display pictures, videos, etc. The display screen 194 includes a display panel. The display panel can be a liquid crystal display (LCD), 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 one embodiment, the electronic device 100 may include 1 or N display screens 194, where N is a positive integer greater than 1.

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

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

[0114] The internal memory 121 can be used to store computer executable program codes, which include instructions. 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, a picture 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. The processor 110 executes various functional applications and data processing of the electronic device 100 by running instructions stored in the internal memory 121, and / or instructions stored in a memory provided in the processor.

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

[0116] The pressure sensor 180A is used to sense the pressure signal and can convert the pressure signal into an electrical signal. In one embodiment, the pressure sensor 180A can be set on the display screen 194. There are many types of pressure sensors 180A, such as resistive pressure sensors, inductive pressure sensors, capacitive pressure sensors, etc. The capacitive pressure sensor can be a parallel plate including at least two conductive materials. When a force acts on the pressure sensor 180A, the capacitance between the electrodes changes. The electronic device 100 determines the intensity of the pressure according to the change in capacitance. When a touch operation acts on the display screen 194, the electronic device 100 detects the touch operation intensity according to the pressure sensor 180A. The electronic device 100 can also calculate the touch position according to the detection signal of the pressure sensor 180A. In one embodiment, touch operations acting on the same touch position but with different touch operation intensities can correspond to different operation instructions. For example: when a touch operation with a touch operation intensity less than the first pressure threshold acts on the short message application icon, an instruction to view the short message is executed. When a touch operation with a touch operation intensity greater than or equal to the first pressure threshold acts on the short message application icon, an instruction to create a new short message is executed.

[0117] The touch sensor 180K is also called a "touch control device". The touch sensor 180K can be arranged on the display screen 194, and the touch sensor 180K and the display screen 194 form a touch screen, also called a "touch control 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. In one embodiment, when the touch operation event detected by the touch sensor includes a long press event and / or a move event, a visual output related to the touch operation can be provided through the display screen 194, such as displaying a drag window of the first object. In another embodiment, the touch sensor 180K can also be arranged on the surface of the electronic device 100, which is different from the position of the display screen 194.

[0118] Bone conduction sensor 180M can obtain vibration signals.

[0119] The key 190 includes a power key, a volume key, etc. The key 190 may be a mechanical key or a touch key. The electronic device 100 may receive key input and generate key signal input related to user settings and function control of the electronic device 100.

[0120] Motor 191 can generate vibration prompts.

[0121] Indicator 192 may be an indicator light, which may be used to indicate charging status, power changes, messages, missed calls, notifications, etc.

[0122] The SIM card interface 195 is used to connect a SIM card.

[0123] The software system of the electronic device 100 can adopt a layered architecture, an event-driven architecture, a micro-core architecture, a micro-service architecture, or a cloud architecture. For example, the software system of the layered architecture can be an Android system, or a Harmony operating system (OS), or other software systems, or a system constructed by the above-mentioned multiple software systems. The embodiment of the present application takes the Android system of the layered architecture as an example to illustrate the software structure of the electronic device 100.

[0124] Figure 2 A schematic diagram of a software architecture of an electronic device 100 is exemplarily shown.

[0125] The layered architecture divides the software into several layers, each with clear roles and division of labor. The layers communicate with each other through software interfaces. In one embodiment, the Android system is divided into four layers, from top to bottom: the application layer, the application framework layer, the Android runtime and system library, and the kernel layer.

[0126] The application layer can include a series of application packages.

[0127] like Figure 2 As shown, the application package may include applications such as gallery, information, files, memo, browser, video, call, navigation, Bluetooth, etc. The application in this application may also be replaced by other software such as mini-programs and atomic services.

[0128] The above application includes a first object, such as pictures, videos, texts, files, etc. Further, pictures and / or videos may be pictures and / or videos in a gallery, a file, or other applications that support picture and / or video selection, texts may be texts in messages, memos, files, browsers, or other applications that support text selection or text editing, and files may be files in a file application or other applications that support file selection, etc.

[0129] The application framework layer provides an application programming interface (API) and a programming framework for the applications in the application layer. The application framework layer includes some predefined functions.

[0130] like Figure 2 As shown, the application framework layer may include a window manager (WM), content providers (content providers), a view system (view system), a resource manager (resource manager), an input (input) module, a notification manager (notification manager), etc.

[0131] The window manager is used to manage window programs. The window manager can obtain the display size and display appearance, determine whether the display appearance mode is dark mode or light mode, whether it is split screen, whether there is a floating window, status bar, lock screen, capture screen, etc.

[0132] In one example, the window manager can be used to load attribute parameters for the drag window of the first object, such as the number of shadow layers, the color corresponding to each shadow layer, the transparency and coverage, etc. In one implementation, the window manager may include multiple sub-modules, one first object may correspond to one sub-module (it can also be understood that one first object corresponds to one process), and the attribute parameters of the drag window of each first object can be loaded by the corresponding sub-module. For example, if the first object is text or a file, the sub-module corresponding to the text or file can load attribute parameters such as backboard shape, backboard color and backboard transparency for the drag window of the text or file. In one embodiment, the window manager can also generate the drag window of the first object according to the attribute parameters of the first object and the preset attribute parameters of the drag window.

[0133] Content providers are used to store and retrieve data and make it accessible to the window manager. The data may include files, folders, text, videos, pictures, audio, calls made and received, browsing history and bookmarks, phone books, etc.

[0134] The view system includes visual controls, such as text controls for displaying text, image controls for displaying images, etc. The view system can be used to build applications. A display interface can be composed of one or more views. For example, a display interface including a text notification icon can include a view for displaying text and a view for displaying images.

[0135] The resource manager provides various resources for applications, such as localized strings, icons, images, layout files, video files, and so on.

[0136] The input module is used to obtain the original input event corresponding to the touch operation from the kernel layer (including touch coordinates, timestamp of the touch operation and other information) and identify the control corresponding to the input event.

[0137] The notification manager enables applications to display notification information in the status bar, which can be used to convey notification-type messages and can disappear automatically after a short stay without user interaction. For example, the notification manager is used to notify download completion, message reminders, etc. The notification manager can also be a notification that appears in the top status bar of the system in the form of a chart or scroll bar text, such as a notification of an application running in the background, or a notification that appears on the screen in the form of a dialog window. For example, a text message is prompted in the status bar, a prompt sound is emitted, the electronic device 100 vibrates, an indicator light flashes, etc.

[0138] Android Runtime includes core libraries and virtual machines. Android runtime is responsible for scheduling and management of the Android system.

[0139] The core library consists of two parts: one part is the function that needs to be called by the Java language, and the other part is the Android core library.

[0140] The application layer and the application framework layer run in a virtual machine. The virtual machine executes the Java files of the application layer and the application framework layer as binary files. The virtual machine is used to perform functions such as object life cycle management, stack management, thread management, security and exception management, and garbage collection.

[0141] The system library may include multiple functional modules, such as surface manager, media library, 3D graphics processing library (such as OpenGL ES), 2D graphics engine (such as SGL), rendering module, etc.

[0142] The surface manager is used to manage the display subsystem and provide the fusion of 2D and 3D layers for multiple applications.

[0143] The media library supports playback and recording of a variety of commonly used audio and video formats, as well as static image files, etc. The media library can support a variety of audio and video encoding formats, such as: MPEG4, H.264, MP3, AAC, AMR, JPG, PNG, etc.

[0144] The 3D graphics processing library is used to implement 3D graphics drawing, image rendering, synthesis, and layer processing.

[0145] A 2D graphics engine is a drawing engine for 2D drawings.

[0146] The rendering module can be used to draw and render images on the drag window of the first object. For example, when the first object is text or a file, the shadow and back panel of the drag window of the text or file are drawn and rendered. For example, when the first object is a picture, the shadow of the drag window of the picture is drawn and rendered.

[0147] The kernel layer is the layer between hardware and software. The kernel layer contains at least display driver, camera driver, audio driver, and sensor driver.

[0148] The following is an example of the workflow of the software and hardware of the electronic device 100 by combining the display of the drag window scenario.

[0149] Assume that the display screen 194 displays the window of the information application. When the touch sensor 180K receives a touch operation, the corresponding hardware interrupt is sent to the kernel layer. The kernel layer processes the touch operation into an original input event (including touch coordinates, timestamp of the touch operation and other information). The original input event is stored in the kernel layer. The application framework layer obtains the original input event from the kernel layer and identifies the object corresponding to the input event. Taking the touch operation as a drag operation, and the object corresponding to the drag operation is the edit text selected in the input box of the information application as an example, the information application calls the interface of the application framework layer, calls the window manager, and the window manager generates a drag window of the selected edit text, and then controls the display driver by calling the kernel layer, and displays the above drag window through the display screen 194. Among them, the drag operation can be understood as an operation of sliding after long pressing. In one implementation, the long pressing operation can trigger the display of the drag window, and the sliding operation can move the drag window to other locations.

[0150] The following describes an application scenario involved in an embodiment of the present application and an example of a user interface in the scenario.

[0151] Scenario 1: When the electronic device 100 displays the first user interface of the first application (for example, a messaging application), an input event for triggering a drag window for displaying a target text is received. At this time, the electronic device 100 may display the drag window for the target text.

[0152] FIG. 3A to FIG. 3D The following example shows a UI of a drag window displaying a target text.

[0153] Figure 3AThe first user interface 310 for displaying the first application (for example, information application) of the electronic device 100 is exemplarily shown. The first user interface 310 includes: a status bar 311, a chat window 312 and an input method window 313. Among them: the status bar 311 may include one or more signal strength indicators of a mobile communication signal (also referred to as a cellular signal), a wireless high fidelity (Wi-Fi) signal strength indicator, a battery status indicator, a time indicator, etc. The input method window 313 may be a human-computer interaction window provided by software for implementing character input (also referred to as input method software), and the user can display various characters in the chat window 312 through the input method window 313. The chat window 312 may include a text input box 312A, etc. The text input box 312A displays input text 312B (including multiple characters) and a selected word 312E. It can be understood that after selecting the word 312E, the text input box 312A displays a start indicator 312C and an end indicator 312D related to the word 312E. In some examples, input text 312B is input by a user through input method window 313 and displayed in electronic device 100 , for example, the user types characters included in input text 312B in input method window 313 so that input text 312B is displayed in text input box 312A of electronic device 100 .

[0154] like Figure 3A As shown, the electronic device 100 receives a user input 3121 corresponding to the word 312E. Further, the user input 3121 is detected as a finger gesture (e.g., a double-click gesture or a hold gesture) at a position on the display screen corresponding to the word 312E via the touch sensor 180K. In some examples, the user input 3121 can be input in other forms, including, for example, through an input device (such as a mouse, keyboard, etc.) connected to the electronic device. In some examples, the electronic device 100 determines that the user input 3121 corresponds to the selection of the word 312E by detecting that the user input 3121 includes multiple user inputs (e.g., two) at a position corresponding to the word 312E (including multiple characters) on the display screen, or a single user input maintained at the position for a time exceeding a threshold. In response to detecting the user input 3121, the electronic device 100 selects the word 312E. In one implementation, the electronic device 100 can show an animation performed in response to detecting the user input 3121 so that the word 312E appears to be selected.

[0155] like Figure 3AAs shown, the electronic device 100 selects word 312E in response to the detected user input 3121, and displays the start indicator 312C and the end indicator 312D. The start indicator 312C and the end indicator 312D respectively indicate the start and end of the selection area (including the word 312E at this time), and provide visual indications. Among them, the user can touch the display screen to modify the size of the selection area and the selected content. For example, different characters can be selected by moving the user input 3121, thereby determining the selection area (including the selected characters). That is, the electronic device 100 can determine the selected content (that is, the target text) according to the position of the user input 3121, thereby determining the selection area. In other words, the target text selected by the user is included in the selection area.

[0156] like Figure 3B As shown, Figure 3B User input 3121 in has been compared to Figure 3A The position of the user input 3121 in the selection area 314 is moved horizontally to the right and vertically downward. In one example, during the process of moving the user input 3121, the start indicator 312C remains stationary, and the end indicator 312D moves along with the movement of the user input 3121. Therefore, when the movement of the user input 3121 ends, the start indicator 312C and the end indicator 312D respectively indicate the start and end of the changed selection area 314. For specific examples, see Figure 3B .from Figure 3B It can be seen that the target text in the selection area 314 includes the characters in the first line excluding the first three characters, the second to fourth lines, and the first six characters in the fifth line of the input text 312B.

[0157] like Figure 3C As shown, the electronic device 100 receives a user input 315 acting on the selection area 314, and the user input 315 can be used to trigger the dragging of the selection area 314. Exemplarily, the user input 315 is detected as a long press and then drag operation via the touch sensor 180K. It can be understood that the long press and then drag operation refers to the operation of not lifting the finger (up) after long pressing to select the selection area 314 and continuing to drag the selection area 314 to move (move). In one example, in response to the detected user input 315 corresponding to the selection area 314, the electronic device 100 can display a long press feedback ( Figure 3C (not shown). It is understandable that the long press feedback may be visual feedback or tactile feedback.

[0158] like Figure 3D As shown, the electronic device 100 responds to the Figure 3CThe user input 315 of the selection area 314 shown may display a shadow 316 and a drag window 317. The drag window 317 includes the target text (the text in the selection area 314), a drag back panel 3171, and an outline shadow 3172 ( Figure 3D Not shown, please refer to Figure 4C ). Among them, the outline shadow 3172 is the outer outline shadow of the drag backboard 3171, which is used to construct a shadow effect. The outer outline of the drag backboard 3171 is determined according to the style of the target text and matches the outer edge of the area occupied by the target text in the upper selection area 314.

[0159] In one example, the electronic device 100 may display a Figure 3C The animation performed by the user input 315 of the selection area 314 shown makes the target text in the selection area 314 appear to be fixed by the shadow 316, and the drag window 317 of the target text is displayed. For example, the animation may include Figure 3C The start indicator 312C and the end indicator 312D shown disappear, and the shadow 316 covers the Figure 3C The target text is determined by the start indicator 312C and the end indicator 312D shown, and a drag window 317 of the target text is displayed above the shadow 316 .

[0160] Next, 4A to 4D The style of the drag window 317 of the displayed target text is exemplarily shown.

[0161] from Figure 4A It can be seen that the text style of the target text covered by the shadow 316 includes 5 lines of text. Among them, the column where the first character of the first line of text is located is not in the same position as the column where the first character of the second line of text, the third line of text, the fourth line of text and the fifth line of text is located. The column where the last character of the fifth line of text is located is not in the same position as the column where the last character of the first line of text, the second line of text, the third line of text, the fourth line of text and the fifth line of text is located. It can be understood that due to the different columns occupied by the characters contained in some texts (such as the first and fifth lines) in the target text, some texts are of different lengths (such as the lengths of the first and fifth lines are inconsistent), so the target text can belong to irregular text. For irregular text, the shape of the generated drag window is also irregular.

[0162] from Figure 4AIt can also be seen that the text style of the target text in the drag window 317 is consistent with the text style of the target text covered by the shadow 316, that is, the text style of the target text in the drag window 317 also includes 5 lines of text, the column where the first character of the first line of text is located is not in the same position as the column where the first character of the second to fifth lines of text is located, and the column where the last character of the fifth line of text is located is not in the same position as the column where the last character of the first to fourth lines of text is located. Therefore, the outer contour of the drag backboard 3171 of the drag window 317 is consistent with the original outer contour of the target text (that is, the outer contour of the shadow 316 covering the target text). It can be understood that the outer contour of the drag backboard 3171 is generated according to the text style of the target text.

[0163] Figure 4B The example shows the style of dragging the back panel of the dragged window.

[0164] from Figure 4B It can be seen that the outer edge or the corner of the outline of the drag back panel 3171 is rounded or arc-shaped, giving it a rounded or smooth feel. The outer edge or the corner of the outline of the drag back panel 3171 includes an outer corner 4011 and an inner corner 4012. The size of the outer corner 4011 can be 12dp, and the inner corner 4012 can be a small rounded corner with a size of 4dp. Figure 4B The outer corner 4011 and the inner corner 4012 are just examples, and do not mean that the outer contour of the drag back panel 3171 has only one outer corner 4011 and one inner corner 4012.

[0165] from Figure 4B It can also be seen that the size (including height and width) of the drag back panel 3171 is determined by the size (including height and width) of the target text, the first length, and the second length. For example, the first length is represented by the distance between the text and the top or bottom of the drag back panel 3171, and the second length is represented by the distance between the text and the left or right side of the drag back panel 3171.

[0166] In one example, the height of the drag back panel 3171 is determined by the height of the target text and the first length, and further, the height of the drag back panel 3171 is the height of the target text plus the first length on the upper and lower sides of the target text. The width of the drag back panel 3171 is determined by the width of the target text and the second length, and further, the width of the drag back panel 3171 is the width of the target text plus the second length on the left and right sides of the target text.

[0167] How to determine the size of the drag back panel 3171 is described by taking the maximum height and maximum width of the target text as an example.

[0168] For example, if Figure 4B As shown, the maximum height 4021 of the drag backboard 3171 is determined by the maximum height 4031 of the target text and the first length. Further, the maximum height 4021 of the drag backboard 3171 is determined by adding the first length to the upper and lower sides of the target text based on the maximum height 4031 of the target text. Wherein, the maximum height 4031 of the target text is determined by the position of the first line of text and the position of the last line of text (i.e., the fifth line of text). The maximum width 4022 of the drag backboard 3171 is determined by the maximum width 4032 of the target text and the second length. Further, the maximum width 4022 of the drag backboard 3171 is determined by adding the second length to the left and right sides of the target text based on the maximum width 4032 of the target text. Wherein, the maximum width 4032 of the target text is determined by the position of the first column of text and the position of the last column of text (i.e., the 23rd column of text).

[0169] Therefore, after determining the maximum height 4021 and the maximum width 4022, the electronic device 100 can determine a large rectangle (eg, Figure 4C As shown in the first rectangle 404). Since the target text is irregular text, that is, the first line and the last line of the target text are not aligned at both ends, the determined large rectangle includes the drag backboard 3171. After removing the redundant part of the large rectangle, the size of the drag backboard 3171 can be determined.

[0170] For example, Figure 4C As shown, the electronic device 100 can determine the size of the first rectangle 404 according to the maximum height 4021 and the maximum width 4022 of the drag back panel 3171 .

[0171] The electronic device 100 can determine the width of the upper left part 405 according to the position (for example, the horizontal coordinate information) of the first line starting character 4051 of the target text (i.e., the first character of the first line of text). For example, the width of the upper left part 405 = the length corresponding to the X-axis coordinate of the first character 4051. The electronic device 100 can determine the number of lines of the target text contained in the upper left part 405 according to the content of the target text that is not justified in the first line starting character 4051, and determine the height of the upper left part 405 according to the line height corresponding to the number of lines. Alternatively, the electronic device 100 can determine the height of the upper left part 405 according to the position of the second character 4052 and the maximum height of the target text. Among them, the electronic device 100 can determine that because the second character 4052 is the first character of the characters in the target text that are justified in the first line, for example, the height of the upper left part 405 = the maximum height of the target text - the length corresponding to the Y-axis coordinate of the second character 4052. Therefore, the electronic device 100 can determine the upper left part 405 according to the width and height of the upper left part 405.

[0172] The electronic device 100 can select the target text based on the position (for example, the horizontal coordinate information) of the end-of-line termination character 4061 of the target text (that is, the last character of the last line of text) and the maximum width ( Figure 4B The width of the lower right part 406 is determined based on the maximum width 4032 shown in the figure. For example, the width of the lower right part 406 = the maximum width of the target text - the length corresponding to the X-axis coordinate of the end line termination character 4061. The electronic device 100 can determine the number of lines of the target text contained in the lower right part 406 according to the content of the target text related to the end line termination character 4061 that is not justified, and determine the height of the lower right part 406 according to the line height corresponding to the number of lines. Alternatively, the electronic device 100 determines the height of the lower right part 406 according to the position of the third character 4062 of the target text (for example, the Y-axis coordinate). Among them, the third character 4062 is the last character of the characters in the target text that are justified. For example, the height of the lower right part 406 = the length corresponding to the Y-axis coordinate of the third character 4062. Therefore, the electronic device 100 can determine the size of the lower right part 406 according to the width and height of the lower right part 406.

[0173] from Figure 4C It can be seen that the drag back panel 3171 can be obtained by removing the upper left portion 405 and the lower right portion 406 from the first rectangle 404 .

[0174] In one implementation, the units of width and height can be length units, such as millimeters, centimeters, etc., or pixels, such as dots per inch (DPI), or density-independent pixels (dp), for example, the size of the first width is 12dp and the size of the second width is 4dp. It should be noted that the density-independent pixel (dp) is a virtual pixel unit used when defining UI layout, which is used to identify layout dimensions or positions in a density-independent manner. For example, a density-independent pixel is equal to a physical pixel on a 160dpi screen. At runtime, the system transparently handles any scaling of the dp unit as needed based on the actual density of the screen in use.

[0175] Exemplarily, the maximum height of the drag back panel 3171 cannot exceed the height threshold (for example, 394dp), and the maximum width is determined according to the maximum width of the target text. Therefore, the target text in the drag window is displayed from top to bottom, and the content whose height exceeds the height threshold of the drag back panel 3171 will not be displayed. If the content exceeding the height is not fully displayed (for example, only half is displayed), it will not be displayed either. Therefore, the height of the drag back panel 3171 is determined according to the height of the text content that can be fully displayed.

[0176] In one implementation, the color of the drag back panel 3171 is determined by the color mode set by the system. For example, when the system color of the electronic device 100 is a dark mode, the color of the drag back panel 3171 is the color corresponding to the dark mode, such as black. When the system color of the electronic device 100 is a light mode, the color of the drag back panel 3171 is the color corresponding to the light mode, such as white.

[0177] Figure 4D The pattern of the outline shadow of the dragged window is exemplarily shown.

[0178] In one example, from Figure 4D It can be seen that the multi-layer shadows of the outline shadow 3172 can specifically be three-layer shadows, that is, the shadow effect presented by the outline shadow 3172 is determined by the first layer of shadow, the second layer of shadow and the third layer of shadow.

[0179] In one example, the transparency of the first layer of shadow, the second layer of shadow, and the third layer of shadow can be different, and the coverage range (for example, radius) of the shadow spreading outward is also different. For example, the transparency of the first layer of shadow can be 20%, offset 1dp in the y-axis direction, and the coverage radius is 5dp. The transparency of the second layer of shadow can be 5%, and the coverage radius is 12dp. The transparency of the third layer of shadow can be 15%, and the coverage radius is 33dp.

[0180] It can be understood that the transparency of the first shadow layer, the second shadow layer and the third shadow layer refers to the color transparency of the first shadow layer, the second shadow layer and the third shadow layer. When the color mode of the application software (such as the information application) that triggers the drag window is dark mode, the color transparency is the transparency of the color corresponding to the dark mode; when the color mode of the application software (such as the information application) that triggers the drag window is light mode, the color transparency is the transparency of the color corresponding to the light mode.

[0181] Figures 5 to 7 The UI for moving the dragged window to another location is exemplarily shown.

[0182] Figure 5 (a)- Figure 5 (c) exemplarily shows a UI for moving a drag window from a first user interface of a first application to a second user interface of the first application.

[0183] It is understood that a hotspot may be set on the display screen of the electronic device 100. For example, the hotspot may be Figure 5 The hot zone 50 shown in (a) is not visible. The hot zone can be represented as a preset area. When the user touches the hot zone, the second application can be pulled up. The second application can be used to provide an entry for the transfer of the draggable object. Figure 5 The contents of the interface shown in (a) can be referred to Figure 3D The contents of the interface shown will not be described in detail here.

[0184] The user can move the finger so that the drag window 317 moves with the finger. When the finger moves to the hot zone 50 of the display screen of the electronic device 100, the electronic device 100 can display the following information: Figure 5 The interface shown in (b).

[0185] like Figure 5 The interface shown in (b) includes a drag window 317, a page window of a first application (such as a message application), and a sidebar 51. The sidebar 51 includes one or more application icons, such as a memo icon 511. The drag window 317 is above the page window, and an interface can be displayed above the page window.

[0186] The sidebar 51 may represent a window of the second application, and the window of the second application includes multiple sub-service icons. The sub-service may be any application on the electronic device, or any service provided by the application. The sub-service icons may be displayed in a flowing manner in the sidebar 51. The user may drag the drag window 317 onto the sub-service icon corresponding to the second application, so that the second application may receive the target text content in the drag window 317.

[0187] For example, taking the second application as the memo icon 511 as an example, in Figure 5 In the user interface shown in (b), the user can move the drag window 317 to the top of the memo icon 511 by moving the finger to display Figure 5 The interface shown in (c). Figure 5 The interface shown in (c) is similar to Figure 5 The difference between the interface shown in (b) is that Figure 5 In the interface shown in (c), the drag window 317 is located above the memo icon 511 in the sidebar 51.

[0188] When the memo application is launched, the electronic device may display the following Figure 5 The interface shown in (d). Figure 5 (d) is an interface of the memo application. The user lifts his finger, and the content of the target text in the drag window 317 can be displayed in the memo window 512, and the drag window 317 disappears.

[0189] Understandably, Figure 3A-3D , Figure 5 The illustrated implementation can achieve: dragging the target text in the first user interface of the first application to the second user interface of the first application, and during the entire dragging process, the style of the target text in the dragging window is consistent with the style of the original target text, avoiding incomplete text display and poor visual effects, and improving the user experience.

[0190] Not limited to the above implementation, in another implementation, the target text in the first application can also be dragged to the user interface of the second application. For specific examples, see the following: Fig. 6A , Figure 6B .

[0191] Figure 6A-6C The example shows that the drag window is displayed in a floating window of a first application (such as a message application), and the drag window is moved from the first application to a UI of a second application (such as a memo application).

[0192] like Fig. 6A As shown, the electronic device can display a user interface 610, which includes a window 613 of a memo application (displayed in full screen in the user interface 610) and a window 611 of a message application (displayed as a floating window in the user interface 610). The window 611 of the message application is displayed on the upper layer of the window 613 of the memo application.

[0193] The window 611 of the information application may include: a drag window 317 of the target text, wherein the description of how to display the drag window 317 of the target text can be referred to Figure 3A-3DThe relevant description in will not be repeated here.

[0194] In one example, the window 611 of the information application is compared to Figure 3A-3D For the first user interface 310 of the information application shown, there is a zoom ratio. That is, Figure 3A-3D The first user interface 310 is shown in full screen. Fig. 6A The window 611 of the information application shown is zoomed. Therefore, the font size of the target text displayed in the window 611 of the information application is determined according to the zoom ratio. The drag window 317 is the drag window of the target text, and the size of the drag window 317 is determined according to the attribute parameters of the target text. In the case where the font of the target text is zoomed, Fig. 6A The drag window 317 shown is also displayed in zoom. Exemplarily, the electronic device can determine the drag window 317 to be displayed in zoom according to the attribute parameters and zoom ratio of the target text in the full-screen display interface.

[0195] In one example, if Fig. 6A Therefore, the window 611 of the information application also includes a zoom control 612. The electronic device can reduce or enlarge the window 611 in response to the user operation corresponding to the zoom control 612. As the window 611 is reduced or enlarged, the drag window 317 in the window 611 can also be reduced or enlarged.

[0196] In response to the user input 315 acting on the drag window 317, the electronic device 100 may display the drag window 317 at the location of the user input 315. For example, Figure 6B As shown, the user can move the drag window 317 from the window 611 of the information application to the window 613 of the memo by moving the finger. For the description of moving the drag window 317, please refer to Figure 5 In one example, the user lifts his finger, such as Figure 6C As shown, the content of the target text in the drag window 317 is displayed in the window 613 of the memo application, and the drag window 317 disappears ( Figure 6C not shown).

[0197] Figure 6D-6F The example shows that the drag window is displayed in the split-screen interface of the first application (such as the information application), and the drag window is moved from the first application to the UI of the second application (such as the memo application).

[0198] For example, Fig.6DAs shown, the electronic device can display a user interface 620, which includes a split screen window 631 of a memo application (displayed in the upper half screen form in the user interface 610), and a split screen window 621 of a message application (displayed in the lower half screen form in the user interface 610).

[0199] The split screen window 621 of the information application may include: a drag window 317 of the target text, wherein the description of how to display the drag window 317 of the target text can be referred to Figure 3A-3D The relevant description in will not be repeated here.

[0200] In response to the user input 315 acting on the drag window 317, the electronic device 100 may display the drag window 317 at the location of the user input 315. For example, Fig. 6E As shown, the user can move the drag window 317 from the split screen window 621 of the information application to the split screen window 631 of the memo by moving the finger. For the description of moving the drag window 317, please refer to Figure 5 In one example, the user lifts his finger, such as Fig. 6F As shown, the content of the target text in the drag window 317 may be displayed in the window 631 of the memo application, and the drag window 317 disappears.

[0201] Not limited to the above implementation, in another implementation, the target text in the electronic device 100 can also be dragged to the user interface of another device. For specific examples, see the following: Figure 7 .

[0202] Figure 7 The UI for moving the dragged window from the electronic device 100 to the first device 200 is exemplarily shown.

[0203] like Figure 7 As shown, the electronic device 100 can establish a first connection with the first device 200, and the first connection can be implemented in a wired manner, such as a high definition multimedia interface (HDMI), a universal serial bus (USB), a coaxial cable, an optical fiber, etc. The first connection can also be implemented in a wireless manner, such as Bluetooth, wireless fidelity (Wi-Fi), near field communication (NFC), ultra wide band (UWB), etc.

[0204] Exemplarily, the electronic device 100 and the first device 200 may be under the same Wi-Fi, establish a wireless connection via Bluetooth, and have the same device account logged in to the electronic device 100 and the first device 200. Therefore, the electronic device 100 may send media data to the first device 200, and the first device 200 may display the media data. The media data may include, but is not limited to, images, text, video, audio, and other data.

[0205] like Figure 7 As shown, the electronic device 100 responds to the user input 315 acting on the drag window 317 and can display the drag window 317 at the location of the user input 315. Further, the user can share the drag window 317 with the attached devices of the electronic device 100 by moving the finger. The nearby devices can be: devices that can be discovered, connected or connected by the electronic device 100 through wired or wireless means, such as Figure 7 A first device 200 is shown.

[0206] Exemplarily, after the first device 200 receives the drag window 317 sent by the electronic device 100, if the application running on the first device 200 can receive the drag window 317, the first device 200 displays the target text in the drag window 317 in the user interface of the application. Figure 7 It can be seen that the first device 200 displays the user interface 70 of the memo application, and the user interface 70 of the memo application can receive the content of the drag window. Therefore, when the first device 200 receives the content shared from the electronic device 100, the content of the target text in the drag window 317 can be displayed on the user interface 70.

[0207] Scenario 2: When the electronic device 100 displays the first user interface of the first application (for example, a gallery application), an input event for triggering a drag window to display a target image is received. At this time, the electronic device 100 may display the drag window of the target image.

[0208] FIG. 8A to FIG. 8D The following example shows a UI of a drag window displaying a target image.

[0209] Fig. 8A The first user interface 810 for displaying the first application (such as a gallery application) of the electronic device 100 is exemplarily shown. The first user interface 810 includes: a status bar 311 and a picture display window 812. For an introduction to the status bar 311, please refer to Figure 3AThe picture display window 812 includes a return control 8122, a selection control 8121, and one or more thumbnail pictures. The return control 8122 is used to return to the upper interface of the first user interface 810, and the selection control 8121 is used to select a target picture from one or more thumbnail pictures.

[0210] The electronic device 100 can unlock one or more thumbnail images in response to user input (e.g., touch operation) to the selection control 8121. After unlocking, the electronic device 100 can receive a selection operation on any thumbnail image, and in response to the selection operation, the thumbnail image is selected. For example, the electronic device 100 can display the following information: Figure 8B The interface shown.

[0211] exist Figure 8B In the interface shown, a selected mark 814 is displayed on the first thumbnail 8131, the second thumbnail 8132, the third thumbnail 8133 and the fourth thumbnail 8134, indicating that these thumbnails are selected. The electronic device 100 can receive a user input 315 acting on any one of the selected thumbnails (for example, the third thumbnail 8133). The user input 315 is used to trigger the dragging of the selected thumbnail. For a detailed description of the user input 315, please refer to the above Figure 3C , I will not go into details here.

[0212] like Figure 8C As shown, the electronic device 100 can display a drag window 816 of a target image (i.e., the selected thumbnail, including the first thumbnail 8131, the second thumbnail 8132, the third thumbnail 8133, and the fourth thumbnail 8134) in response to the user input 315 acting on the third thumbnail 8133. The drag window 816 includes a drag image 8161 and a corner mark 8162. The drag image 8161 includes a target image and an outline shadow (not shown in the figure) in a stacked state, wherein the outline shadow is an outer outline shadow of the target image, including multiple layers of shadows, and the multiple layers of shadows are used to construct a shadow effect. The corner mark 8162 is used to display the number and / or status of the target image. Since there are four selected thumbnails, the number of target images is 4, and the number displayed by the corner mark 8162 is 4.

[0213] In one example, the electronic device 100 may show an animation performed in response to user input 315 acting on the third thumbnail 8133, which may include: the first thumbnail 8131, the second thumbnail 8132 and the fourth thumbnail 8134 converge toward the location of the third thumbnail 8133, and a drag window 816 of the target image is displayed above the third thumbnail 8133.

[0214] like Fig.8DAs shown, the electronic device 100 responds to the user input 315 acting on the drag window 816, and can display the drag window 816 at the location of the user input 315. Exemplarily, the user input 315 is a touch operation. When the user's finger keeps touching the drag window 816, the user can move the finger to make the drag window 816 move with the movement of the finger. In the process of the drag window 816 moving with the movement of the user input 315, the electronic device 100 can change the transparency of the first thumbnail 8131, the second thumbnail 8132, the third thumbnail 8133 and the fourth thumbnail 8134, for example, to 38%. Among them, the description of "user input" can be referred to. Figure 5 The relevant description in will not be repeated here.

[0215] In one example, while the drag window 816 is moving, the electronic device can change the color transparency of the drag window 816. For example, if the color mode set by the system is dark mode, the transparency of the drag window 816 is 85%; if the color mode set by the system is light mode, the transparency of the drag window 816 is 95%.

[0216] Next, Fig. 8E The style of the drag window 816 of the displayed target image is exemplarily shown.

[0217] from Fig. 8E It can be seen that the third thumbnail 8133 in the drag image 8161 is displayed at the top of the drag window 816, and two of the first thumbnail 8131, the second thumbnail 8132 and the fourth thumbnail 8134 are respectively displayed below the third thumbnail 8133. Regarding the arrangement order between the first thumbnail 8131, the second thumbnail 8132 and the fourth thumbnail 8134 in the drag window 816, this application does not impose any restrictions. For example, the arrangement order between the first thumbnail 8131, the second thumbnail 8132 and the fourth thumbnail 8134 can be arranged according to the interval distance from the third thumbnail 8133, and the one with the farthest distance is at the bottom; the arrangement order between the first thumbnail 8131, the second thumbnail 8132 and the fourth thumbnail 8134 can also be arranged according to the time selected by the user, and the first selected one is at the bottom.

[0218] In one example, the electronic device 100 first enlarges the selected thumbnail in the picture display window 812 according to a preset ratio (for example, 10%), and then displays the enlarged thumbnail image in the drag window 816. Therefore, the size of the thumbnail displayed in the drag window 816 is larger than that of the thumbnail displayed in the drag window 816. Fig. 8A The thumbnails in the picture display window 812 are shown to be larger in size.

[0219] from Fig. 8EIt can also be seen that the electronic device 100 can stack the top multiple (for example, three) thumbnails displayed in the drag window 816 in a regular or random combination within a preset range and at a preset angle, thereby presenting a realistic sense of stacking. In one example, the preset range can be 110*110dp, and the preset angle can be -4° to 4°. It can be understood that for different drag windows, the random combination of thumbnails displayed in the drag window is different.

[0220] from Fig. 8E It can also be seen that the outline shadow 8164 (the shadow is not shown, please refer to Figure 4D ) is the shadow of the outer contour of the thumbnails displayed in the drag window 816, specifically, the shadow of the outer contour of the top multiple (for example, three) thumbnails displayed in the drag window 816. In one example, the contour shadow 8164 of the top two thumbnails of the three thumbnails includes a first shadow layer and a second shadow layer, and the contour shadow 8164 of the bottom thumbnail of the three thumbnails includes a first shadow layer, a second shadow layer, and a third shadow layer.

[0221] In one example, the transparency of the first shadow and the second shadow of the top two thumbnails can be different, and the shadow coverage radius is also different. For example, the transparency of the first shadow can be 5%, and the coverage radius is 12dp; the transparency of the second shadow can be 20%, offset 1dp in the y-axis direction, and the coverage radius is 5dp.

[0222] In one example, the transparency of the first shadow, the second shadow, and the third shadow of the bottom thumbnail can be different, and the shadow coverage radius is also different. For example, the transparency of the first shadow can be 10%, and the coverage radius is 60dp; the transparency of the second shadow can be 10%, and the coverage radius is 16dp; the transparency of the third shadow can be 15%, offset 1dp in the y-axis direction, and the coverage radius is 3dp.

[0223] In one example, the styles of the corner marks include status corner marks, numeric corner marks, and status plus numeric corner marks, which are circular or elliptical in shape, and the outer contour includes a first layer of shadow and a second layer of shadow. The transparency of the first layer of shadow can be 10%, offset 2dp in the y-axis direction, and the coverage radius is 3dp, and the extension is -1dp. The transparency of the second layer of shadow can be 25%, offset 1dp in the y-axis direction, and the coverage radius is 5dp. Fig. 8E The corner mark 8162 of the drag window 816 shown is a circular digital corner mark with a shape of 24*24dp.

[0224] See also Fig.8F , Fig.8FThis is a style UI of a corner mark provided in an embodiment of the present application. Different corner marks are applied in different scenarios.

[0225] from Fig.8F It can be seen that the status badges include acceptable badges and unacceptable badges. The acceptable badges include an acceptable mark 8171, and the unacceptable badges include an unacceptable mark 8172. Among them, the status badge appears in the moving scene of the drag window of a single picture, and is used to display the status of a single picture. For example, if the user selects a picture to move, then during the movement process, if the finger moves to an application that can receive the above picture, the electronic device can set the badge of the drag window of the picture to an acceptable badge, indicating that the area where the current finger is located can receive the moved content. If the finger moves to an application that cannot receive this picture, the electronic device can set the badge of the drag window of the picture to an unacceptable badge, indicating that the area where the current finger is located cannot receive the moved content.

[0226] from Fig.8F It can be seen that the number of pictures to be moved can be displayed in the digital corner mark, so the digital corner mark appears in the scene where the target picture to be moved includes multiple pictures. After the user selects multiple pictures, when the drag window of the multiple pictures starts to move, the electronic device can set the corner mark of the drag window of the multiple pictures to the digital corner mark.

[0227] from Fig.8F It can be seen that the number plus status superscript is a combination of the number superscript and the status superscript, which is used to display the number and status of the pictures that need to be moved.

[0228] In scenario 2, the electronic device may move the drag window of the target image from the first user interface of the first application (for example, the gallery application) to the second user interface of the first application. Figure 5 The electronic device can also move the drag window of the target image from the first application to the second application. Fig. 6A , Figure 6B The electronic device can also move the drag window of the target image to other electronic devices. Figure 7 For the description of the drag window for moving the target image, please refer to the description of scenario 1, which will not be repeated here.

[0229] Scenario three: when the electronic device 100 displays the first user interface of the first application (for example, a file application), an input event for triggering display of a drag window of a target file is received. At this time, the electronic device 100 may display the drag window of the target file.

[0230] FIG. 9A to FIG. 9BThe following example shows a UI that displays a drag window of a target file.

[0231] For files, they can be displayed in the first user interface of the file application in the form of a grid state and a list state. Fig. 9A As shown in the figure, the grid mode displays the files in a grid format, with each file displayed in an independent grid. The grid mode usually displays the thumbnails of the files. Fig. 9B As shown in the figure, the list state is to display the files in the form of lines, and each file is displayed as a line record. The list state usually displays detailed information such as the file name, size, date, etc. Therefore, the target file can be a grid state file or a list state file.

[0232] from Fig. 9A It can be seen that for the grid-like file, because the thumbnail of the file is displayed, the drag window 911 of the grid-like file includes the thumbnail of the current file, and the thumbnail has an outer contour shadow.

[0233] Among them, the outer contour shadow includes the first layer of shadow, the second layer of shadow and the third layer of shadow. In one example, the transparency of the first layer of shadow, the second layer of shadow and the third layer of shadow can be different, and the radius covered by the shadow is also different. For example, the transparency of the first layer of shadow can be 20%, offset by 1dp in the y-axis direction, and the coverage radius is 5dp; the transparency of the second layer of shadow can be 5%, and the coverage radius is 12dp; the transparency of the second layer of shadow can be 15%, and the coverage radius is 33dp. It should be noted that for other descriptions of the drag window of the grid-state file, please refer to the description of the "drag window of the target image" in Figure Scene 2, which will not be repeated here.

[0234] from Fig. 9B It can be seen that for the list-state file, the drag window 912 of the list-state file includes detailed information of the file, a drag back panel and an outline shadow. Among them, the size of the drag back panel is the size displayed in the user interface of the current list-state file in the file application. For other descriptions of the drag back panel and outline shadow of the drag window 912 of the list-state file, please refer to the description of "drag back panel" and "outline shadow" in scenario 1, which will not be repeated here.

[0235] It should be noted that the description of "the color of the drag window of the target file" can be referred to the above description, which will not be repeated here. The description of "the drag window of the target file is moving" can be referred to the description of "the drag window 816 is moving" in scenario 2, which will not be repeated here.

[0236] In scenario three, the electronic device may move the drag window of the target file from the first user interface of the first application (for example, the file application) to the second user interface of the first application. Figure 5 The electronic device can also move the drag window of the target file from the first application to the second application. Fig. 6A , Figure 6B The electronic device can also move the drag window of the target file to other electronic devices. Figure 7 For the description of moving the drag window of the target file, please refer to the description of scenario 1, which will not be repeated here.

[0237] It should be noted that, when the first object is a folder, music or video, the process of displaying the drag window is similar to that in scenario three, and will not be repeated here.

[0238] For scenario one, Fig.10 The module interaction flow chart of a drag window displaying target text provided by an embodiment of the present application is exemplified.

[0239] In the dragging scenario of scenario one, the format of the text in the first application may be a preset format, such as a textview format.

[0240] Text in textview format can actively report the text content in the text. Text in other view formats cannot actively report the text content in the text. The format of the text can be set by the developer of the first application.

[0241] like Fig.10 As shown, the method for displaying the target text drag window provided in the embodiment of the present application includes the following steps:

[0242] Step S1000: display a first user interface of a first application.

[0243] Exemplarily, the user can click on the display screen of the electronic device to open the first user interface of the first application (for example, a messaging application). Therefore, the electronic device displays the first user interface of the first application in response to the user operation on the first application.

[0244] Step S1001: A first application loads view content of a first user interface through a view system.

[0245] For example, the first application loads the content of each view in the first user interface through the view framework in the view system, such as the content of the first object (text). In this way, the electronic device can easily display each control and the content of each control in the first user interface. Figure 3A A first user interface 310 is shown.

[0246] Step S1002: The view system transmits the root layout of the first user interface to the content provider.

[0247] Exemplarily, when the view system obtains the content of each view in the first user interface, it can generate a root layout of the first user interface, and the root layout can include DecorView.

[0248] It can be understood that when a user opens an interface, the view system transmits the root layout of the interface opened by the user to the content provider.

[0249] The content provider obtains the root layout of the first user interface, so as to facilitate the subsequent search for the required text control from the root layout. It can be understood that the text control belongs to a view.

[0250] Step S1003: The input module detects a long press and then drag event on the target text.

[0251] For example, the target text may be any text in the first user interface, or may be text selected in the first user interface, for example Figure 3C In the interface shown, the target text in the selection area 314 is selected. The long press and drag event of the target text can be an electronic device based on user input (for example, Figure 3C The touch event generated by the user input 315 shown in the figure, wherein the touch event may include a drop event and a move event. For example, when the user long presses the target text with a finger and does not lift the finger to move, the input module can sequentially obtain a drop event and at least one move event.

[0252] Step S1004: The input module transmits a long press and drag event of the target text to the view system.

[0253] It can be understood that the input module can pass each touch event obtained to the view system in sequence. For example, when the user long presses the target text with his finger and does not lift the finger to move, the input module can first pass the obtained drop event to the view system, and then pass each obtained movement event in sequence according to the acquisition time.

[0254] Step S1005: The view system transmits the position of the target text corresponding to the long press and drag event to the window manager.

[0255] Exemplarily, the view system obtains the starting position of the target text before dragging and the ending position after dragging according to the touch event (including the drag event), and then transmits the starting position and the ending position of the target text to the window manager.

[0256] Step S1006: The window manager constructs a first textview of the target text, and determines a drag window of the target text based on the first textview.

[0257] In one implementation, the window manager responds to the touch time of the target text and sets a timer, and the duration of the timer is the sum of the system long press duration and the first extension duration of the electronic device, that is, the duration of the timer = system long press duration + first extension duration. Among them, the system long press duration is the duration used in the native system of the electronic device to determine the long press intention. The system long press duration can be 400 milliseconds, and the first extension duration can be 50 milliseconds. Therefore, if the user long presses the target text for a period of time that reaches the timer duration, the window manager constructs the first textview of the target text.

[0258] Exemplarily, the target text corresponds to an Editor object, and the window manager can construct the first textview according to the Editor object.

[0259] The first textview has a different format from the target text in the first user interface, specifically HnDragTextview, which is a derived class of textview and also supports text content reporting. Compared with other textviews, the text layout and format in HnDragTextview are consistent with the selected text (i.e., the target text), and additional backplane and shadow effects are added.

[0260] First, the window manager (WMS) obtains the attribute parameters of the preset drag window, calls the content provider to obtain the attribute parameters of the target text, and constructs the first textview function according to the attribute parameters of the target text, and can also call the content provider to obtain the attribute parameters of the first user interface. Among them:

[0261] The attribute parameters of the target text include at least one of the following: the context of the information application and the layout of the target text (textview), the layout may include the height of the target text, the width of the target text, the text content, the number of text lines, the starting point character of each line (start), the ending point character of each line (end), the text margin, the text path, the text color and the font size. Exemplarily, the first textview function may be HnDragTextview (context, textview, start, end).

[0262] The attribute parameters of the first user interface include at least one of the following: the size and color mode of the first user interface where the target text is located.

[0263] Therefore, the content provider can pass one or more of the following attribute parameters to the window manager: the height and width of the target text, the text content, the number of text lines, the starting point character of each line, the ending point character of each line, the text margin, the text path, the text color and font size, the size and color mode of the first user interface.

[0264] Then, the window manager performs an initialization operation (such as an int operation) on the above attribute parameters, so as to determine the parameters of the first textview according to the attribute parameters of the target text and the attribute parameters of the preset drag window, and the parameters of the first textview include at least one of the following: the scale, color, outline shadow and size of the drag backplane, and the layout of the target text (including text typesetting and text style). Among them:

[0265] Exemplarily, when the window manager determines that the first user interface is in full-screen display mode according to the acquired size of the first user interface, the back panel scaling ratio in the first textview is 1.

[0266] Exemplarily, when the window manager determines that the first user interface is in floating window mode based on the acquired size of the first user interface, the scaling ratio of the back panel is determined by the floating window size, and the scaling ratio in the first textview = floating window size / full screen size.

[0267] Exemplarily, when the window manager determines that the first user interface is in split-screen mode according to the acquired size of the first user interface, the scaling ratio of the back panel in the first textview is 1.

[0268] Exemplarily, the color of the drag backplane is determined by the color mode of the first user interface. If the first user interface set by the system is in dark mode, the backplane color in the first textview is the color corresponding to the dark mode, such as black; if the first user interface set by the system is in light mode, the backplane color in the first textview is the color corresponding to the light mode, such as white.

[0269] For example, the outline shadow of the drag backplane includes three layers of shadows. The difference between each layer of shadows is mainly reflected in the transparency and coverage of the shadow. Different layers of shadows correspond to different shadow transparency and coverage. Therefore, the outline shadow in the first textview includes three layers of shadows with different transparency and coverage radius. For detailed description, please refer to Figure 4D .

[0270] Exemplarily, the preset attribute parameters of the drag window include a first length and a second length (eg Figure 4BAs shown), the size of the drag back panel in the first textview is determined according to the height and width of the target text, the first character and the last character of the target text, the first length and the second length. For a detailed description, please refer to Figure 4B and Figure 4C .

[0271] Exemplarily, the text layout in the first textview is determined according to the height and width of the target text, the text content, the number of text lines, the starting point character of each line, and the ending point character of each line.

[0272] Exemplarily, the text style in the first textview is determined according to the text color and font size. Finally, the window manager determines the drag backplane, outline shadow and characters corresponding to the target text of the first textview according to the parameters of the first textview and the preset attribute parameters of the drag window (such as the number of shadow layers, the transparency and coverage corresponding to each shadow layer), thereby constructing the first textview. It can be understood that the first textview is the target text including the drag backplane and outline shadow. Among them, the format of the target text is consistent with the format of the original text.

[0273] The window manager passes the first textview to the view system.

[0274] Step S1007: The view system displays a drag window of the target text.

[0275] Exemplarily, the view system draws and displays the drag window of the target text according to the first textview.

[0276] Step S1008: The viewing system displays the moved dragged window.

[0277] Exemplarily, the user may move the drag window with a finger, and when the view system receives a move event of the drag window, the drag window may be displayed at a position corresponding to the move event to move the drag window.

[0278] For scenario 2, Fig.11 A module interaction flow chart of a drag window displaying a target image provided by an embodiment of the present application is exemplified.

[0279] Step S1100: display a first user interface of a first application.

[0280] For example, the second application may be a gallery application. For related descriptions, refer to step Fig.10 S1000 shown.

[0281] Step S1101: A first application loads view content of a first user interface through a view system.

[0282] Exemplarily, the electronic device is convenient for displaying each control and the content of each control in the first user interface. Fig. 8A A first user interface 810 is shown.

[0283] Step S1102: The view system transmits the root layout of the first user interface to the content provider.

[0284] For related descriptions, please refer to Fig.10 Step S1002 is shown.

[0285] Step S1103: The input module detects a long press and then drag event on the target image.

[0286] For example, the target image may be any image in the first user interface, or may be an image selected in the first user interface, for example Figure 8B Therefore, the target image is dragged after being long pressed, which can be an electronic device based on user input (for example, Figure 8B The touch event generated by the user input 315 shown in the figure, wherein the touch event may include a drop event and a move event. For example, when the user long presses the target text with a finger and does not lift the finger, the input module can sequentially obtain a drop event and at least one move event.

[0287] Step S1104: The input module transmits a long press and drag event of the target image to the view system.

[0288] Exemplarily, in response to a user's long press and drag operation on a target image, an input module of the electronic device transmits the touch operation to a view system.

[0289] Step S1105: The view system transmits the target image corresponding to the long press and drag event to the window manager.

[0290] Exemplarily, the view system recognizes a long press and drag operation on the target image based on the touch event, and transmits the target image to the window manager.

[0291] Step S1106: The window manager determines the drag window of the target image.

[0292] Exemplarily, the target image corresponds to an inner class of a view, for example, the inner class may be the HnDragShadowbuilder class, which is a derived class based on View.Shadowbuilder and may override the constructor, onDrawShadow() method, and onProvideShadowMetrics() method.

[0293] Compared with other view subclasses, the HnDragShadowbuilder class adds shadow effects and stacking effects.

[0294] First, the window manager calls the content provider to obtain the attribute parameters of the target image to construct an internal class function, and can also call the content provider to obtain the attribute parameters of the first user interface.

[0295] The attribute parameters of the target image include at least one of the following: the context of the gallery application, the view of the target image, the number of target images, and the type of the target image. The view of the target image is the view on which the long press operation acts, and the types of the target images include thumbnails, normal images, super long images, and super wide images. Exemplarily, the internal class function can be HnDragShadowbuilder (Context context, View view, int count, int type).

[0296] The attribute parameter of the first user interface includes at least one of the following: the size of the first user interface where the target text is located.

[0297] Therefore, the content provider may pass one or more of the following attribute parameters to the window manager: the context of the gallery application, the view of the target image, the number of target images, the type of target images, the size and color mode of the first user interface.

[0298] The window manager determines the drag window of the target image according to the above attribute parameters.

[0299] The process of determining the drag window of the target image includes the following cases:

[0300] In case 1, when the number of target images is one, the type of target image includes a thumbnail displayed in the preview interface of the gallery or an ordinary image displayed in the details page of the image (for example, the page displayed after clicking the thumbnail), and the window manager draws the outline shadow of the target image, for example, converting the original image into a grayscale image (for example, an image that does not contain RGB color values), so that a shadow consistent with the shape of the original image can be obtained through the gray image. Then, the window manager draws the target image on the above shadow, and enlarges the target image according to a preset ratio to obtain a drag window of the target image.

[0301] In case 2, when the number of target images is one, the type of target images includes an extra-long image or an extra-wide image displayed on the details page of the gallery (for example, the page displayed after clicking a thumbnail), and the window manager truncates the extra-long image or the extra-wide image according to a preset length to obtain a truncated image. The window manager draws the outline shadow of the truncated image and converts the original image of the truncated image into a grayscale image, for example, an image that does not contain RGB color values, so that a shadow consistent with the shape of the original image can be obtained through the gray image. Finally, the window manager draws the truncated image on the above shadow to obtain a drag window of the truncated image.

[0302] Case three, if the number of target pictures is N (N is an integer greater than or equal to 2), and the type of the target picture is a thumbnail. The window manager obtains bitmap pictures of M (M is a positive integer greater than or equal to 2 and less than or equal to N) pictures from the N pictures, and then draws the outline shadows of the above M pictures in turn. Exemplarily, the blur radius of the outline shadow of each picture is different, and the final outline shadow can be obtained after M times of superposition. Next, the window manager draws the corresponding pictures on the above outline shadows in turn, and enlarges the picture according to a preset ratio to obtain the drag window of the target picture. During the drawing process, the rotation angle and position deviation of the picture are randomly increased, and finally the stacking effect of M pictures can be displayed in the drag window. Exemplarily, M=3, that is, the window manager can draw the stacking effect of three pictures.

[0303] In one implementation, the window manager may draw a corner mark on the drag window according to the attribute parameters of the target image, for example, in the upper right corner of the drag window, wherein the corner mark may be in the shape of a circle or a rounded rectangle, and the corner mark may be used to indicate the number and / or status of the target image.

[0304] In one implementation, the color of the drag window of the target image is determined by the color mode of the first user interface. If the first user interface is in dark mode, the color of the drag window is the color corresponding to the dark mode; if the first user interface is in light mode, the color of the drag window is the color corresponding to the light mode.

[0305] The window manager passes the drag window of the target image to the view system.

[0306] Step S1107: The view system displays a drag window of the target image.

[0307] Step S1108: The viewing system displays the moved dragged window.

[0308] Exemplarily, the user may move the drag window with a finger, and when the view system receives a move event of the drag window, the drag window may be displayed at a position corresponding to the move event to move the drag window.

[0309] For scenario three, Fig.12 A module interaction flow chart of a drag window for displaying a target file provided by an embodiment of the present application is exemplified.

[0310] Step S1200: display a first user interface of a first application.

[0311] For example, the second application may be a file application. For related descriptions, refer to Fig.10 Step S1000 is shown.

[0312] Step S1201: A first application loads view content of a first user interface to a view system.

[0313] Step S1202: The view system transmits the root layout of the first user interface to the content provider.

[0314] For related descriptions, please refer to Fig.10 Step S1002 is shown.

[0315] Step S1203: The input module obtains a long press and drag event of the target file.

[0316] For related descriptions, please refer to Fig.11 Step S1103 shown.

[0317] Step S1204: The input module transmits a long press and drag event of the target file to the view system.

[0318] Exemplarily, in response to a user's long press and drag operation on a target file, an input module of the electronic device transmits the touch operation to a view system.

[0319] Step S1205: The view system transmits the attribute parameters of the target file corresponding to the long press and drag event to the window manager.

[0320] Exemplarily, the view system recognizes a long press and drag operation on the target file based on the touch event, obtains the view, quantity and type of the target file, and then transmits the view, quantity and type of the target image to the window manager.

[0321] Step S1206: The window manager constructs an internal class of the target file, and determines the drag window of the target file based on the internal class.

[0322] Exemplarily, the target file corresponds to an inner class of a view, for example, the inner class may be a HnDragShadowbuilder class.

[0323] First, the window manager calls the content provider to obtain the attribute parameters of the target file to construct an internal class function, and can also call the content provider to obtain the attribute parameters of the first user interface.

[0324] The attribute parameters of the target file include at least one of the following: the context of the file application, the view of the target file, the number of target files, and the type of the target file. The view of the target file is the view on which the long press operation acts, and the type of the target file includes the thumbnail and file list of the file. Exemplarily, the internal class function can be HnDragShadowbuilder (Context context, View view, int count, int type).

[0325] The attribute parameters of the first user interface include at least one of the following: the size and color mode of the first user interface where the target text is located.

[0326] Therefore, the content provider may pass one or more of the following attribute parameters to the window manager: context of the file application, view of the target file, number of target files (count) and type of the target file (type), size and color mode of the first user interface.

[0327] The window manager draws the drag window of the target file according to the above attribute parameters.

[0328] In one implementation, when the type of the target file is a thumbnail, the steps for the window manager to draw a drag window of the target file of the thumbnail type can be referred to in Fig.11 The relevant description in will not be repeated here.

[0329] In one implementation, when the target file type is a file list, the drag window includes a drag backplane, a backplane outline, and a view of the target file. For a description of the window manager drawing a drag window for a target file of the file list type, refer to Fig.10 The relevant description in will not be repeated here.

[0330] The window manager passes the drag window of the target file to the view system.

[0331] Step S1207: The view system displays a drag window for the target file.

[0332] Step S1208: The viewing system displays the moved dragged window.

[0333] Exemplarily, the user may move the drag window with a finger, and when the view system receives a move event of the drag window, the drag window may be displayed at a position corresponding to the move event to move the drag window.

[0334] Based on the above Figure 1-Figure 12 The embodiment shown is described below. Next, a method for displaying a drag window provided by an embodiment of the present application is introduced.

[0335] See also Fig.13 , Fig.13 1 is a flow chart of a method for displaying a dragged window provided in an embodiment of the present application. The method is applied to an electronic device, and the method may include but is not limited to the following steps:

[0336] S1301, the electronic device displays a first user interface, wherein the first user interface includes a first application window of a first application, the first application window includes a first object, and the first object includes text content.

[0337] In a possible implementation manner, the first object also includes non-text content, and the non-text content includes pictures, files, and the like.

[0338] In one implementation, when the first object is text content, the first user interface is as follows: Figure 3A-3D In the first user interface 310 shown, the first application may be Figure 3A-3D In the information application shown in FIG. 1 , the first application window may be the information application window described above, and the first object may be Figure 3A-3D Input text 312B is shown.

[0339] In one implementation, when the first object is a picture, the first user interface is as follows: Figure 8A-8D In the first user interface 810, the first application may be as follows Figure 8A-8D In the gallery application shown in FIG. 1 , the first application window may be the gallery application window described above, and the first object may be Figure 8A-8D The picture in the picture display window 812 is shown.

[0340] In one implementation, when the first object is a file, the first user interface is as follows: Fig. 9A or Fig. 9B In the first user interface shown, the first application may be as follows Fig. 9A or Fig. 9B In the file application shown in FIG. 1 , the first application window may be the file application window described above, and the first object may be Fig. 9A The grid file shown in the figure or Fig. 9BThe list state file is shown in the figure.

[0341] S1302: The electronic device selects a second object in response to a first part of the first user operation, and obtains attribute parameters of the second object.

[0342] In one implementation, when the first object is text content, the first part of the first user operation can be as follows: Figure 3A or Figure 3B The user input 3121 (e.g., long press operation) shown in the figure. The second object may include Figure 3B-Figure 3D The text content in the selection area 314 is shown as the target text.

[0343] In one implementation, when the first object is a picture, the first part of the first user operation may include: Fig. 8A The user input (eg, touch operation) of the selection control 8121 and the selection operation of any thumbnail are shown. The second object may include Figure 8B-Figure 8D Shown are a first thumbnail 8131 , a second thumbnail 8132 , a third thumbnail 8133 and a fourth thumbnail 8134 .

[0344] In one implementation, when the first object is a file, the related description can refer to the picture and will not be repeated here.

[0345] The second object is part or all of the content in the first object.

[0346] S1303: The electronic device determines a drag window according to the attribute parameters of the second object.

[0347] The outline of the dragged window matches the outer edge of the area occupied by the second object on the first user interface.

[0348] In one implementation, when the first object is text content, the attribute parameters of the second object can be found in Fig.10 The drag window can be as described in step S1006 shown in FIG. Figure 3D Drag window 317 is shown.

[0349] In a possible implementation, when the first object is text content, the electronic device obtains the layout of the second object from the attribute parameters of the second object, and the layout of the second object includes the maximum height and maximum width of the second object, the line height and line width of the text content, the horizontal coordinate information of the first line's starting character, and the horizontal coordinate information of the last line's terminating character; the first rectangle is determined according to the maximum height and maximum width of the second object; the upper left portion is determined according to the line height of the text content and the horizontal coordinate information of the first line's starting character; the lower right portion is determined according to the line height, maximum width, and horizontal coordinate information of the last line's terminating character of the text content; and the upper left portion and the lower right portion are removed from the first rectangle to obtain the drag window. For detailed description of this part, please refer to Figure 4A , Figure 4B and Figure 4C .

[0350] In one implementation, when the first object is a picture, the attribute parameters of the second object can be found in Fig.11 The drag window can be as described in step S1106 shown in FIG. Fig.8D The drag window 816 is shown. In the case where the first object is a file, the attribute parameters of the second object can be found in Fig.12 The dragging window can be as follows: Fig. 9A Drag window 911 as shown or Fig. 9B Drag window 912 is shown.

[0351] In one implementation, the outline of the dragged window also includes an outline shadow, such as Figure 4D The outline shadow 3172 shown or as Fig. 8E The outline shadow shown is 8164. Further, the outline shadow includes a first layer shadow, a second layer shadow and a third layer shadow, for example Figure 4D As shown. Further, the outline shadow includes the shadow coverage and shadow transparency corresponding to the first shadow layer, the second shadow layer and the third shadow layer, respectively, wherein the coverage and shadow transparency of each shadow layer are different. For detailed description, please refer to Figure 4D or Fig. 8E .

[0352] In one implementation, when the system color of the electronic device is dark mode, the color of the dragged window is the color corresponding to the dark mode; when the system color of the electronic device is light mode, the color of the dragged window is the color corresponding to the light mode.

[0353] In a possible implementation, the electronic device determines a drawing method of the drag window according to the attribute parameters of the second object; and determines the drag window according to the drawing method and preset drag window attribute parameters.

[0354] In one implementation, when the second object is text content, an Editor object of the text content is obtained; and a first Textview of the text content is constructed through the Editor object, for example Fig.10 The first Textview shown in the figure includes attribute parameters of the second object, and the attribute parameters are used to describe the layout of the second object in the first user interface.

[0355] Further, the electronic device determines the size of the drag window and the layout of the text content in the drag window according to the first TextView of the text content; and determines the outline shadow of the drag window according to the preset attribute parameters of the drag window. Fig.10 .

[0356] In one implementation, when the second object is non-text content, the electronic device determines the internal class of the non-text content according to the attribute parameters of the second object, where the internal class is a derived class of view view, for example Fig.11 Or Fig.12 HnDragShadowbuilder shown.

[0357] Further, the electronic device determines the non-text content displayed in the drag window according to the internal class of the non-text content; and determines the outline shadow of the drag window according to the preset attribute parameters of the drag window. Fig.11 or Fig.12 .

[0358] In a possible implementation, when the second object includes N non-text contents, the drag window further includes a stacking form and a corner mark, for example Fig. 8E and Fig.8F As shown; the superscript is used to indicate the number of non-text contents displayed in the drag window; the stacking form is determined by the rotation angle and position deviation of the M non-text contents displayed in the drag window; the outline shadow of the drag window includes the outline shadows of the M non-text contents; wherein the M non-text contents are the non-texts among the N non-texts displayed in the non-text drag window, N is a positive integer greater than or equal to 1, and M is a positive integer greater than 1 and less than or equal to N.

[0359] Furthermore, in the process of moving the dragged window to the second area, the corner mark is also used to indicate the state of the dragged window, and the state of the dragged window is used to indicate whether the second area can accept the dragged window or the second area cannot accept the dragged window.

[0360] S1304: In response to the second part of the first user operation, the electronic device displays a drag window and displays the selected second object in the drag window.

[0361] The drag window moves following the second part of the first user operation.

[0362] In one implementation, when the first object is text content, the second part of the first user operation is, for example, Figure 3C or Figure 3D The user input 315 shown in FIG. 1 is a picture. In the case where the first object is non-text, the second part of the first user operation is, for example, Figure 8C or Fig.8D User input 315 in.

[0363] For the description of “the electronic device displays the drag window in response to the second part of the first user operation”, please refer to the above embodiments, for example Figure 3C , Figure 3D , Figure 5 , Fig. 6A , Figure 6B , Fig.6D , Fig. 6E or Figure 7 .

[0364] In a possible implementation, the first user interface includes a second application window of a second application, for example Figure 5 , Figure 6A-6E or Figure 7 The electronic device responds to the second part of the first user operation by dragging the drag window to the second application window of the second application and displaying the drag window in the second application window; and responds to the drop operation of the drag window by displaying the second object in the second application window of the second application. Figure 5 , Figure 6A-6E or Figure 7 .

[0365] In one implementation, the second application window is a floating window, for example Figure 6A-6C The size of the drag window displayed in the second application window is determined according to the size of the floating window.

[0366] The term "user interface (UI)" in the specification, claims 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> 、

[0367] <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>. 、 、 <video> 、 <canvas>To define the elements and attributes of a web page.

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

[0369] It should be understood that each step in the above method embodiment provided by the present application can be completed by an integrated logic circuit of hardware in a processor or by instructions in the form of software. The method steps disclosed in the embodiments of the present application can be directly embodied as being executed by a hardware processor, or by a combination of hardware and software modules in a processor.

[0370] The present application also provides an electronic device, which may include: a memory and a processor, wherein the memory may be used to store a computer program; and the processor may be used to call the computer program in the memory so that the electronic device executes the method in any one of the above embodiments.

[0371] The present application also provides a chip system, which includes at least one processor for implementing the functions involved in the method executed by the electronic device in any of the above embodiments.

[0372] In one possible design, the chip system also includes a memory, which is used to store program instructions and data, and the memory is located inside or outside the processor.

[0373] The chip system may be composed of the chip, or may include the chip and other discrete devices.

[0374] Optionally, the processor in the chip system may be one or more. The processor may be implemented by hardware or by software. When implemented by hardware, the processor may be a logic circuit, an integrated circuit, etc. When implemented by software, the processor may be a general-purpose processor implemented by reading software code stored in a memory.

[0375] Optionally, the memory in the chip system may also be one or more. The memory may be integrated with the processor or may be separately arranged with the processor, which is not limited in the embodiments of the present application. Exemplarily, the memory may be a non-transient processor, such as a read-only memory ROM, which may be integrated with the processor on the same chip or may be arranged on different chips respectively. The embodiments of the present application do not specifically limit the type of memory and the arrangement of the memory and the processor.

[0376] Exemplarily, the chip system can be a field programmable gate array (FPGA), an application specific integrated circuit (ASIC), a system on chip (SoC), a central processor unit (CPU), a network processor (NP), a digital signal processor (DSP), a microcontroller unit (MCU), a programmable logic device (PLD) or other integrated chips.

[0377] The present application also provides a computer program product, which includes: a computer program (also referred to as code, or instruction), which enables a computer to execute the method executed by the electronic device in any of the above embodiments when the computer program is executed.

[0378] The present application also provides a computer-readable storage medium, wherein the computer-readable storage medium stores a computer program (also referred to as code or instruction). When the computer program is executed, the computer executes the method executed by the electronic device in any of the above embodiments.

[0379] The various implementation modes of the present application can be combined arbitrarily to achieve different technical effects.

[0380] 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 this 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 device. 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 to another 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. 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 includes 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 Solid State Disk), etc.

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

[0382] In short, the above description is only an embodiment of the technical solution of the present invention, and is not intended to limit the protection scope of the present invention. Any modification, equivalent replacement, improvement, etc. made according to the disclosure of the present invention shall be included in the protection scope of the present invention.< / canvas> < / video> < / videoview> < / imgview> < / textview>

Claims

1. A method for displaying a drag window, characterized in that: Applied to electronic equipment, the method comprises: Displaying a first user interface, the first user interface includes a first application window of a first application, the first application window includes a first object, and the first object includes text content; In response to the first part of the first user operation, a second object is selected, and attribute parameters of the second object are obtained, wherein the second object is part or all of the content in the first object; determining a drag window according to the attribute parameters of the second object, wherein an outline of the drag window matches an outer edge of an area occupied by the second object on the first user interface; In response to a second part of the first user operation, the drag window is displayed, and the selected second object is displayed in the drag window, wherein the drag window moves following the second part of the first user operation.

2. The method according to claim 1, characterized in that: The determining the drag window according to the attribute parameters of the second object includes: Acquire the layout of the second object from the attribute parameters of the second object, where the layout of the second object includes the maximum height and maximum width of the second object, the line height and line width of the text content, the horizontal coordinate information of the starting character of the first line and the horizontal coordinate information of the ending character of the last line; determining a first rectangle according to a maximum height and a maximum width of the second object; Determine the upper left part according to the line height of the text content and the horizontal coordinate information of the starting character of the first line; Determine the lower right part according to the line height of the text content, the maximum width and the horizontal coordinate information of the last line termination character; The drag window is obtained by removing the upper left portion and the lower right portion from the first rectangle.

3. The method according to claim 1 or 2, characterized in that: The outline of the dragged window also includes an outline shadow.

4. The method according to claim 3, characterized in that: The outline shadow includes a first layer of shadow, a second layer of shadow and a third layer of shadow.

5. The method according to claim 4, characterized in that The outline shadow includes shadow coverage and shadow transparency corresponding to the first layer of shadow, the second layer of shadow and the third layer of shadow respectively, wherein the coverage and shadow transparency of each layer of shadow are different.

6. The method according to any one of claims 1 to 5, characterized in that: When the system color of the electronic device is a dark mode, the color of the dragged window is a color corresponding to the dark mode; When the system color of the electronic device is a light color mode, the color of the dragged window is a color corresponding to the light color mode.

7. The method according to any one of claims 1 to 6, characterized in that: The first user interface further includes a second application window of a second application, and the step of displaying the drag window and displaying the selected second object in the drag window in response to the second part of the first user operation includes: In response to a second part of the first user operation, dragging the drag window to a second application window of the second application, and displaying the drag window in the second application window; In response to a drop operation on the drag window, the second object is displayed in a second application window of the second application.

8. The method according to claim 7, characterized in that The second application window is a floating window, and the size of the drag window displayed in the second application window is determined according to the size of the floating window.

9. The method according to any one of claims 1 to 8, characterized in that: The first object also includes non-text content.

10. The method according to claim 9, characterized in that The determining the drag window according to the attribute parameters of the second object includes: determining a drawing method of the drag window according to the attribute parameters of the second object; The drag window is determined by the drawing method and preset drag window attribute parameters.

11. The method according to claim 10, characterized in that The determining the drawing method of the drag window according to the attribute parameters of the second object includes: When the second object is the text content, obtaining an Editor object of the text content; A first Textview of the text content is constructed through the Editor object, wherein the first Textview includes attribute parameters of the second object, and the attribute parameters are used to describe the layout of the second object in the first user interface.

12. The method according to claim 11, characterized in that The determining the drag window by the drawing method and preset drag window attribute parameters includes: Determine the size of the drag window and the layout of the text content in the drag window according to the first TextView of the text content; The outline shadow of the drag window is determined according to the preset attribute parameters of the drag window.

13. The method according to claim 10, characterized in that The determining the drawing method of the drag window according to the attribute parameters of the second object includes: In the case where the second object is non-text content, an inner class of the non-text content is determined according to attribute parameters of the second object, and the inner class is a derived class of view view.

14. The method according to claim 13, characterized in that The determining the drag window by the drawing method and preset drag window attribute parameters includes: Determining the non-text content displayed in the drag window according to the internal class of the non-text content; The outline shadow of the drag window is determined according to the preset attribute parameters of the drag window.

15. The method according to claim 13 or 14, characterized in that In the case where the second object includes N non-text contents, the drag window further includes a stacking form and a corner mark; The corner mark is used to indicate the amount of the non-text content displayed in the drag window; The stacking form is determined by the rotation angle and position deviation of the M non-text contents displayed in the drag window; The outline shadow of the drag window includes the outline shadows of the M non-text contents; Among them, the M non-text contents are the non-texts among the N non-texts displayed in the drag window of the non-text, N is a positive integer greater than or equal to 1, and M is a positive integer greater than 1 and less than or equal to N.

16. The method according to claim 15, characterized in that In the process of moving the dragged window to the second area, the corner mark is also used to indicate the state of the dragged window, and the state of the dragged window is used to indicate that the second area can accept the dragged window or the second area cannot accept the dragged window.

17. An electronic device, characterized in that: The electronic device comprises: one or more processors; a memory; wherein the memory is coupled to the one or more processors, the memory is used to store computer program code, the computer program code comprises computer instructions, and the one or more processors call the computer instructions so that the electronic device executes the method as described in any one of claims 1-16.

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

19. A computer-readable storage medium comprising instructions, characterized in that: When the instructions are executed on an electronic device, the electronic device is caused to execute the method as claimed in any one of claims 1 to 16.

Images