CN114610190A - Interface editing method and device, electronic equipment and readable medium - Google Patents

Interface editing method and device, electronic equipment and readable medium Download PDF

Info

Publication number
CN114610190A
CN114610190A CN202210249588.9A CN202210249588A CN114610190A CN 114610190 A CN114610190 A CN 114610190A CN 202210249588 A CN202210249588 A CN 202210249588A CN 114610190 A CN114610190 A CN 114610190A
Authority
CN
China
Prior art keywords
component
container
functional component
placeholder
dragging
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Granted
Application number
CN202210249588.9A
Other languages
Chinese (zh)
Other versions
CN114610190B (en
Inventor
钟冬
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Futuo Network Technology Shenzhen Co ltd
Original Assignee
Futuo Network Technology Shenzhen Co ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Futuo Network Technology Shenzhen Co ltd filed Critical Futuo Network Technology Shenzhen Co ltd
Priority to CN202210249588.9A priority Critical patent/CN114610190B/en
Publication of CN114610190A publication Critical patent/CN114610190A/en
Priority to PCT/CN2022/140760 priority patent/WO2023173868A1/en
Application granted granted Critical
Publication of CN114610190B publication Critical patent/CN114610190B/en
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G06F3/04817Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance using icons
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/0486Drag-and-drop
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00Arrangements for program control, e.g. control units
    • G06F9/06Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44Arrangements for executing specific programs
    • G06F9/451Execution arrangements for user interfaces

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Software Systems (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

The application provides an interface editing method, an interface editing device, electronic equipment and a readable medium. The method comprises the following steps: acquiring an application starting instruction and displaying an application interface according to the application starting instruction, wherein the application interface comprises a functional component; triggering operation feedback when detecting long-time pressing operation executed on the functional component; when detecting that the functional component is dragged in the application interface, the functional component moves along with the dragging track; and when the dragging stop is detected and the functional component meets the component moving condition, displaying the functional component at the position where the dragging stop. The method can directly display the result when the dragging is finished in the editing process of the navigation bar, the operation steps are fewer, the editing result is more visual, the operation efficiency of the user-defined operation is improved, and further the efficiency of information display and operation application is improved.

Description

Interface editing method and device, electronic equipment and readable medium
Technical Field
The present application relates to the field of computer technologies, and in particular, to an interface editing method and apparatus, an electronic device, and a readable medium.
Background
With the development of computer technology, especially internet technology and mobile terminal technology, various applications are increasing. Various types of navigation bars are often provided for users in applications and allow users to customize the functionality of the navigation bar.
Currently, customization of the navigation bar is typically through switches to edit the display and function of various options within the navigation bar.
However, when the navigation bar is edited in the above process, the navigation bar needs to be edited and stored to see the final result of the editing, the operation process is complicated and the editing process is not intuitive, which affects the operation efficiency of the user-defined process and the efficiency of information display and operation application.
Disclosure of Invention
Based on the technical problems, the application provides an interface editing method, an interface editing device, an electronic device and a readable medium, so that the result can be directly displayed when the dragging is completed in the editing process of the navigation bar, the operation steps are fewer, the editing result is more visual, the operation efficiency of the user-defined operation is improved, and further the efficiency of information display and operation application is improved.
Other features and advantages of the present application will be apparent from the following detailed description, or may be learned by practice of the application.
According to an aspect of an embodiment of the present application, there is provided an interface editing method, including:
acquiring an application starting instruction and displaying an application interface according to the application starting instruction, wherein the application interface comprises a functional component;
triggering operation feedback when detecting long-time pressing operation executed on the functional component;
when the functional component is detected to be dragged in the application interface, the functional component moves along a dragging track;
when the dragging stop is detected and the functional component meets the component moving condition, the functional component is displayed at the position where the dragging stop.
In some embodiments of the present application, based on the above technical solution, the application interface includes a first container and a second container; when the long press operation executed on the functional component is detected, triggering operation feedback, including:
acquiring coordinate information corresponding to the touch point of the long press operation and determining a container where the touch point is located according to the coordinate information;
if the touch point is in the first container, traversing each component in the first container and determining the functional component targeted by the long press operation according to the coordinate information;
deleting the functional component and recording the starting position of the functional component;
displaying the placeholder component at the starting position and triggering operation feedback.
In some embodiments of the application, based on the above technical solution, when it is detected that the functional component is dragged in the application interface, the moving of the functional component along a dragging track includes:
when a dragging operation in the application interface is detected, the occupancy component moves along a dragging track;
in the moving process of the placeholder component, if the placeholder component overlaps with other components in the first container or the second container, updating the positions of the other components so as to make the other components free the placeholder component.
In some embodiments of the present application, based on the above technical solution, when the dragging stop is detected and the functional component satisfies the component moving condition, presenting the functional component at a position where the dragging stop is detected includes:
when the dragging stop is detected, determining a container where the placeholder component is located;
determining that the functional component satisfies a component movement condition if the placeholder component is in the second container and the number of components in the second container is below the upper limit of the number of components in the second container;
hiding the placeholder component and adding the functional component at a location in the second container where dragging stopped;
and updating the layout of the components in the second container according to the positions of the functional components.
In some embodiments of the application, based on the above technical solution, after determining the container in which the placeholder component is located when the dragging is detected to stop, the method further includes:
when the dragging stop is detected, if the placeholder component is not in any container or the number of components in the container where the placeholder component is located is equal to or larger than the component accommodating threshold value of the container where the placeholder component is located, the placeholder component moves back to the initial position;
hiding the placeholder component and adding the functional component at the starting location.
In some embodiments of the present application, based on the above technical solutions, the method further includes:
when the long press operation is detected to be interrupted, the placeholder component moves back to the starting position;
hiding the placeholder component and adding the functional component at the starting position.
In some embodiments of the present application, based on the above technical solution, the first container further includes an association component, and an association relationship exists between the association component and the second container; the method further comprises the following steps:
when the dragging stop is detected, if the placeholder component and the association component are overlapped, the placeholder component is moved into the second container according to the association relation between the association component and the second container;
hiding the placeholder component and adding the functional component in the second container.
According to an aspect of an embodiment of the present application, there is provided an interface editing apparatus including:
the interface display module is used for acquiring an application starting instruction and displaying an application interface according to the application starting instruction, wherein the application interface comprises a functional component;
the feedback triggering module is used for triggering operation feedback when detecting the long-time pressing operation executed on the functional component;
the component moving module is used for moving the functional component along a dragging track when the functional component is detected to be dragged in the application interface;
and the component display module is used for displaying the functional component at the position where the dragging is stopped when the dragging stop is detected and the functional component meets the component moving condition.
According to an aspect of an embodiment of the present application, there is provided an electronic apparatus including: a processor; and a memory for storing executable instructions for the processor; wherein the processor is configured to execute the interface editing method as in the above technical solution via executing the executable instructions.
According to an aspect of the embodiments of the present application, there is provided a computer-readable storage medium on which a computer program is stored, the computer program, when executed by a processor, implementing an interface editing method as in the above technical solution.
In the embodiment of the application, the application interface is displayed according to the application starting instruction, operation feedback is triggered when long-time pressing operation on the functional component is detected, the functional component moves along a dragging track in the application interface, and the functional component is displayed at the position where dragging stops when dragging stops and meets the component moving condition. By the mode, the result can be directly displayed in the editing process of the navigation bar when the dragging is completed, the operation steps are fewer, the editing result is more visual, the operation efficiency of the user-defined operation is improved, and the efficiency of information display and operation application is further improved.
It is to be understood that both the foregoing general description and the following detailed description are exemplary and explanatory only and are not restrictive of the application.
Drawings
The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the present application and together with the description, serve to explain the principles of the application. It is obvious that the drawings in the following description are only some embodiments of the application, and that for a person skilled in the art, other drawings can be derived from them without inventive effort.
In the drawings:
FIG. 1 is a schematic illustration of an implementation environment in an embodiment of the present application;
FIG. 2 is a schematic interface diagram of a navigation bar customization process in an embodiment of the present application;
FIG. 3 is a schematic interface diagram of a navigation bar customization process in an embodiment of the present application;
FIG. 4 is a schematic interface diagram of a navigation bar customization process in an embodiment of the present application;
FIG. 5 is a schematic flow chart diagram illustrating an interface editing method according to an embodiment of the present application;
FIG. 6 is a schematic diagram of a specific implementation procedure in an embodiment of the present application;
fig. 7 is a block diagram schematically showing the components of an interface editing apparatus in the embodiment of the present application;
FIG. 8 illustrates a schematic structural diagram of a computer system suitable for use in implementing the electronic device of an embodiment of the present application.
Detailed Description
Example embodiments will now be described more fully with reference to the accompanying drawings. Example embodiments may, however, be embodied in many different forms and should not be construed as limited to the examples set forth herein; rather, these embodiments are provided so that this disclosure will be thorough and complete, and will fully convey the concept of example embodiments to those skilled in the art.
Furthermore, the described features, structures, or characteristics may be combined in any suitable manner in one or more embodiments. In the following description, numerous specific details are provided to give a thorough understanding of embodiments of the application. One skilled in the relevant art will recognize, however, that the subject matter of the present application can be practiced without one or more of the specific details, or with other methods, components, devices, steps, and so forth. In other instances, well-known methods, devices, implementations, or operations have not been shown or described in detail to avoid obscuring aspects of the application.
The block diagrams shown in the figures are functional entities only and do not necessarily correspond to physically separate entities. I.e. these functional entities may be implemented in the form of software, or in one or more hardware modules or integrated circuits, or in different networks and/or processor means and/or microcontroller means.
The flow charts shown in the drawings are merely illustrative and do not necessarily include all of the contents and operations/steps, nor do they necessarily have to be performed in the order described. For example, some operations/steps may be decomposed, and some operations/steps may be combined or partially combined, so that the actual execution sequence may be changed according to the actual situation.
It should be understood that the interface editing method in the present application may be applied to various application programs or software products, and may be specifically applied to a client on a mobile terminal. For example, in financial management software, a navigation bar is usually displayed in such software to facilitate a user to access each function module. The user can customize the navigation bar. When the user defines the navigation bar, the client displays a plurality of container areas capable of being edited, the position and the sequence of the functional components included in each container can be adjusted through the dragging operation, the components can be dragged to different containers to adjust the number and the content of the functional components included in each container, and therefore the user can edit the content of the navigation bar in a simpler and more intuitive mode. It can be understood that the embodiments of the present invention can be applied to various scenarios, including the editing process of various editable pages in a software product, such as a main page, a navigation page, or a function page.
The technical solutions provided in the present application are described in detail below with reference to specific embodiments. Referring to fig. 1, fig. 1 is a schematic diagram of an implementation environment in an embodiment of the present application. The implementation environment includes a server 110 and a terminal device 120, and the server 110 and the terminal device 120 communicate with each other through a wired or wireless network. The terminal device 120 is deployed with a client implementing the scheme of the present application, and the server 110 provides a background service for the client on the terminal device 120. In the process of actual application, the user uses the terminal device 120 to edit the page or the navigation bar, and the terminal device 120 executes the scheme of the application, presents the result of the interface editing process to the user, and sends the editing result to the server 110 for storage, so as to directly present the editing result when the application is opened next time.
The server 110 may be an independent physical server, a server cluster or a distributed system formed by a plurality of physical servers, or a cloud server providing basic cloud computing services such as cloud service, a cloud database, cloud computing, a cloud function, cloud storage, web service, cloud communication, middleware service, domain name service, security service, CDN (Content Delivery Network), big data, and an artificial intelligence platform, which is not limited herein.
The terminal device 120 may be, but is not limited to, a mobile phone, a computer, an intelligent voice interaction device, an intelligent appliance, a vehicle-mounted terminal, an aircraft, and the like. The terminal device 120 and the server 110 may be directly or indirectly connected through wired or wireless communication, and the application is not limited herein. The number of terminal devices 120 and servers 110 is also not limited.
Referring to fig. 2 to 4, fig. 2 to 4 are schematic interface diagrams of a navigation bar customization process in an embodiment of the present application. As shown in FIG. 2, when the user enters the navigation bar customization function, the client may present a navigation bar area that the user can edit. These areas correspond to different containers, for example, two containers are shown in FIG. 2, corresponding to two editable areas, respectively. Each container includes one or more components, and a user can press the components long to determine which components are desired to be edited. In one embodiment, the components included in the container are divided into editable components and non-editable components, where the editable components are identified for distinction, e.g., the editable components show a jittered state in a custom page, and the non-editable components are stationary without jittering. A user selects a component by long pressing, and upon selection, the non-selected component stops dithering and becomes inoperable. In one embodiment, the terminal device prompts the user at the beginning of the long press on the selected component or after the long press on the selected component is successful, for example, by vibrating or by sound effect. As shown in fig. 3, after the selection is successful, the user may drag the selected component, during the dragging process, the component may change its display form/size according to the different containers, and when other components contact, there is a squeezing effect of squeezing other components apart, so as to leave an insertion position for the placeholder component under dragging, and at this time, the user releases his hand to indicate that the placeholder component under dragging is inserted into the insertion position. As shown in fig. 4, there is a specific associated component in the bottom container, and when the component is dragged onto the associated component and released, the component moves to the associated container above for display. It will be appreciated that there is an upper limit to the number of components that can be contained in each container. For example, the bottom container in fig. 4 can be set to contain a maximum of 6 modules, and if the bottom container is dragged to the 7 th module, the jamming effect will not occur, and the modules will return to their original positions after the hands are loosened.
The technical solutions provided in the present application are described in detail below with reference to specific embodiments. Referring to fig. 5, fig. 5 is a schematic flowchart illustrating an interface editing method according to an embodiment of the present application. As shown in fig. 5, the interface editing method at least includes steps S510 to S540, which are described in detail as follows:
step S510, an application starting instruction is obtained, and an application interface is displayed according to the application starting instruction, wherein the application interface comprises a functional component.
Specifically, the application start instruction may be a start instruction for starting the application itself. For example, the user clicks a client icon on the terminal to launch the corresponding program. In such cases, the application may not provide a specialized custom page, and the user may trigger editing of the exposed functional component by long pressing on the page of the application. The application launch instruction may also refer to a launch instruction that launches a custom edit page function. In such a case, the user may enter, via the launch instruction, an interface dedicated to custom editing in which the page content that can be edited is shown for editing by the user. The function component refers to page elements in the interface, such as page icons, links, or interaction areas and fields, which can be used to access specific functions or open specific pages.
And step S520, when the long press operation executed on the functional component is detected, triggering operation feedback.
The client detects the operation of the user, and when the long-press operation executed on the functional component is detected, the client performs operation feedback to the user. The operational feedback may be presented by shaking or playing audio, etc., or may be presented visually, for example, by dithering the functional components. The long press operation generally refers to a touch or click operation with a duration exceeding a certain threshold, and the threshold for determining the long press may depend on specific requirements, for example, a click or touch operation lasting for more than 0.5 seconds or 1 second may be regarded as the long press operation.
In step S530, when it is detected that the functional component is dragged in the application interface, the functional component moves along a dragging track.
Specifically, after the user performs the long-press operation triggering operation feedback, the functional component may be dragged in the application interface, and the functional component may move according to the dragging track. In the process of dragging, the functional component can move in the whole application interface along with the dragging track without being limited to the display area where the functional component is originally located. It is understood that the process of dragging the functional component and the long-press process in the previous step may be a continuous process, that is, the dragging process is directly started after the user selects the functional component to be edited by the long-press operation. For example, in a terminal that operates through a touch screen, a user directly starts a slide drag operation after long-pressing the screen without releasing a touch point. In another embodiment, the drag process and the long press process may also be separate processes. For example, the user selects the function module by long-pressing the mouse button, and at this time, the function module will still move along the track of the mouse pointer by releasing the mouse button until the user clicks the mouse again to determine the position of the function module after the movement.
And S540, when the dragging stop is detected and the functional component meets the component moving condition, displaying the functional component at the position where the dragging stop.
Specifically, when the dragging is stopped, the client checks whether the current state of the functional component meets the component moving condition, and if so, the client determines that the editing process is successful, so that the functional component is displayed at the position where the dragging is stopped. The component movement condition may specifically include a plurality of rules, for example, a condition such as whether the position where the functional component is located can be used for presenting the component, whether there is a conflict with the presentation of other components, whether the dragging process is completed correctly, or whether there is an exception in the editing process. It can be understood that the client determines whether the dragging is stopped according to the corresponding operation event, for example, for touch input, it may determine whether the input signal is terminated, that is, whether the user releases his hand, and for mouse input, it may determine whether the mouse button is released or the click operation of the release component is triggered.
In the embodiment of the application, the application interface is displayed according to the application starting instruction, operation feedback is triggered when long-time pressing operation on the functional component is detected, the functional component moves along a dragging track in the application interface, and the functional component is displayed at the position where dragging stops when dragging stops and meets the component moving condition. By the mode, the result can be directly displayed in the editing process of the navigation bar when the dragging is completed, the operation steps are fewer, the editing result is more visual, the operation efficiency of the user-defined operation is improved, and the efficiency of information display and operation application is improved.
In addition, in this embodiment, information such as the use frequency of each functional component may be monitored to determine the application heat of the functional component, and then a target position is recommended based on the application heat, and when it is detected that the functional component is dragged, the recommended target position is displayed in the interface in the form of a dashed line frame or the like to adjust the position of the functional component.
Optional ways of calculating the application heat degree in this embodiment may be:
acquiring the click times of the functional components in a preset period and the display duration of the application interfaces corresponding to the functional components;
according to the preset period Per, the click times Hit _ num and the display duration Hit _ dur, calculating the application heat Der as follows:
Figure BDA0003545221770000081
where α and β are used to represent preset heat factors, the preset period in this embodiment may be a week, a month, a day, or the like. In this embodiment, the browsing parameters in the unit time are calculated and obtained as the application heat, and the unit time may be hours or days. The utilization rate of the functional components is measured and evaluated through the application heat, and the positions of the functional components are suggested and adjusted based on the utilization rate, so that the utilization rate and the application efficiency of product functions are improved.
In one embodiment of the present application, the application interface includes a first container and a second container; in step S520, the triggering operation feedback when the long press operation performed on the functional component is detected includes:
acquiring coordinate information corresponding to the touch point of the long press operation and determining a container where the touch point is located according to the coordinate information;
if the touch point is in the first container, traversing each component in the first container and determining the functional component targeted by the long press operation according to the coordinate information;
deleting the functional component and recording the starting position of the functional component;
displaying the placeholder component at the starting position and triggering operation feedback.
The first container and the second container each correspond to a portion of a display area in an application interface. Each container may contain a number of components. The coordinate information corresponding to the touch point is coordinate information in the whole application interface or the display, and the position of the touch point which is operated according to the length can be determined in the first container according to the coordinate information. Specifically, if the touch point is located in the first container, each component in the first container may be traversed according to the converted position, and the functional component targeted by the operation is determined according to the coordinate information. It will be appreciated that if the touch point is located within the second container, the components in the second container may be detected to determine the functional component. After determining the functional component, the functional component may be deleted from the current page and the starting position of the functional component is recorded, and then the placeholder component is exposed at the starting position and operation feedback is triggered. Specifically, placeholder components typically have the same or similar appearance as functional components. Placeholder components are added to a common container for all interactable containers and are at the top of the container hierarchy, hidden from display by default.
In an embodiment of the application, in step S530, when it is detected that the functional component is dragged in the application interface, the moving of the functional component along a dragging track includes:
when a dragging operation in the application interface is detected, the occupying component moves along a dragging track;
in the moving process of the placeholder component, if the placeholder component overlaps with other components in the first container or the second container, updating the positions of the other components so as to make the other components free the placeholder component.
Specifically, in the process that the occupying component moves along with the dragging track, other components are occupied. If overlap or un-overlap between the placeholder component and components in any container is detected, the client will move the components in contact with the placeholder component away to free up a place for the placeholder component. Specifically, as the placeholder component moves, the placeholder component position and size is continually updated. Meanwhile, the moving process judges whether the space between the occupied component and the component in the container has intersection, and if the space has intersection with the space on the upper side or the left side, the position of the component and the previous component is updated; if the distance intersects the distance on the lower side or the right side, the position of the next component of the component and the components behind the next component of the component is updated, and the position is left for the occupied component. The moving process can be displayed in an animation mode, so that the crowding effect is achieved.
In an embodiment of the application, the step S540, when the dragging stop is detected and the functional component satisfies the component moving condition, of presenting the functional component at the position where the dragging stop is detected, includes:
when the dragging stop is detected, determining a container where the placeholder component is located;
determining that the functional component satisfies a component movement condition if the placeholder component is in the second container and the number of components in the second container is below the upper limit of the number of components in the second container;
hiding the placeholder component and adding the functional component at a location in the second container where dragging stopped;
and updating the layout of the components in the second container according to the positions of the functional components.
Specifically, when the client detects that the touch operation of the user is finished, it is determined that the dragging stop is detected. At the moment, the container where the placeholder component is located is determined according to the position of the placeholder. If the placeholder component is in the second container, the number of components currently held by the second container is determined. If the number is below the upper limit of the number of components of the second container, it may be determined that the functional component satisfies the component movement condition. For example, the number of components of the second container is limited to 6, and if the current number of components in the second container is less than 6, new components can be added, otherwise, new components cannot be moved to the second container. In the event that the component movement condition is satisfied, the placeholder component is hidden from the application interface and the functional component is added at the position where dragging stopped in the second container. Specifically, the current location of the placeholder component may be recorded prior to hiding the placeholder component for subsequent addition of functional components. In addition, the way of hiding the placeholder component can also be replaced by the way of deleting the placeholder component. Subsequently, the layout of the components in the second container is updated according to the locations of the functional components. Specifically, the layout includes a list of new components and location information. The components in each container are exposed according to the layout when the application interface is loaded.
It will be appreciated that the above-described process may be applied to the first container, and the process is similar, except that the moving process occurs inside the first container, rather than moving from the first container to the second container, and will not be described in detail.
In an embodiment of the application, after determining the container in which the placeholder component is located when the dragging is stopped, the method further includes:
when the dragging stop is detected, if the placeholder component is not in any container or the number of components in the container where the placeholder component is located is equal to or larger than the component accommodating threshold value of the container where the placeholder component is located, the placeholder component moves back to the initial position;
hiding the placeholder component and adding the functional component at the starting location.
Specifically, if the placeholder component is not in any of the containers, such as in a position above or below all of the containers as shown in FIG. 2, or the number of components in the container in which the placeholder component is located is equal to or greater than the component accommodation threshold of the container in which the placeholder component is located, the placeholder component may move back to the previously recorded starting position of the functional component. Subsequently, the placeholder component is hidden and the functional component is added at the starting location. It will be appreciated that adding a functional component back to the starting position will also update the position of other components in the container, thereby leaving display space for the functional component.
In one embodiment of the present application, the method further comprises:
when the long press operation is detected to be interrupted, the placeholder component moves back to the starting position;
hiding the placeholder component and adding the functional component at the starting position.
Specifically, the interruption of the long press operation refers to a case where the long press operation does not end normally. For example, a finger removal off-screen or other higher priority event interrupts a long press operation. At this point, the placeholder assembly may move back to the starting position. Subsequently, the placeholder component is hidden and the functional component is added at the starting position
In one embodiment of the present application, the first container further comprises an association component, and an association relationship exists between the association component and the second container; the method further comprises the following steps:
when the dragging stop is detected, if the placeholder component and the association component are overlapped, the placeholder component is moved into the second container according to the association relation between the association component and the second container;
hiding the placeholder component and adding the functional component in the second container.
Specifically, when the drag stop is detected, it is detected whether an overlap exists between the placeholder component and the association component. It will be appreciated that during the movement of the placeholder component, the association component will not move directly to yield if it overlaps or disassembles the association component. The client records the contact time of the placeholder component and the association component, and the association component is moved when the contact time exceeds a certain time. If the placeholder component and the association component are overlapped, the placeholder component is moved to the second container according to the association relation between the association component and the second container, and then the placeholder component is hidden and the functional component is added in the second container. In particular, the add function component location may be the end of the arrangement of components in the second container, i.e. the next location of the last component. It is understood that in this process, the client may still determine whether the number of components in the second container exceeds the component accommodation threshold of the second container, and if the number of components equals or exceeds the component accommodation threshold, the functional component may not be added to the second container, but may move back to the starting position.
Referring to fig. 6, fig. 6 is a schematic diagram of an embodiment of the present application. As shown in fig. 6, in step 601, the user enters a long-press gesture processing flow through a long-press operation. In step 602, the touch point of the gesture is converted to a custom navigation page. According to the position of the touch point after conversion, in step 603, all containers in the found page are traversed to find the container where the touch point is located. If the touch point is not in any container, the process ends and the long-press gesture processing flow exits in step 611. Otherwise, in step 604, different operations are performed in different containers according to the gesture status. In the start state, step 605 is entered to determine whether the touch point hits the draggable component. If so, the initial position of the current component is recorded and the components are removed and placeholder components are displayed in step 606, the changed state is entered, and then the process returns to step 604. While changing or ending the state, step 604 branches to step 607 to determine whether the placeholder elements are displayed. If so, then step 608 is entered, where the gesture status is determined and distributed. If it is a changed state, then in step 609, the position of the inserted placeholder component is computed and a crowd animation is displayed. If it is the end state, then in step 610, the starting location where the functional component needs to be inserted is calculated and the functional component is inserted. Subsequently, in step 611, the long press gesture processing flow exits.
It should be noted that although the various steps of the methods in this application are depicted in the drawings in a particular order, this does not require or imply that these steps must be performed in this particular order, or that all of the shown steps must be performed, to achieve desirable results. Additionally or alternatively, certain steps may be omitted, multiple steps combined into one step execution, and/or one step broken down into multiple step executions, etc.
The following describes an implementation of the apparatus of the present application, which may be used to execute the interface editing method in the above embodiments of the present application. Fig. 7 schematically shows a block diagram of the interface editing apparatus in the embodiment of the present application. As shown in fig. 7, the interface editing apparatus 700 may mainly include:
an interface display module 710, configured to obtain an application start instruction and display an application interface according to the application start instruction, where the application interface includes a functional component;
a feedback triggering module 720, configured to trigger operation feedback when a long press operation performed on the functional component is detected;
the component moving module 730 is configured to, when it is detected that the functional component is dragged in the application interface, move the functional component along a dragging track;
a component displaying module 740 for displaying the functional component at a position where the dragging is stopped when the dragging is detected to be stopped and the functional component satisfies the component moving condition.
In an embodiment of the present application, based on the above technical solution, the application interface includes a first container and a second container; the feedback triggering module 720 includes:
the coordinate acquisition unit is used for acquiring coordinate information corresponding to the touch point of the long press operation and determining a container where the touch point is located according to the coordinate information;
the component traversing unit is used for traversing each component in the first container and determining the functional component aimed by the long press operation according to the coordinate information if the touch point is in the first container;
the position recording unit is used for deleting the functional component and recording the initial position of the functional component;
and the operation feedback unit is used for displaying the occupancy component at the starting position and triggering operation feedback.
In an embodiment of the present application, based on the above technical solution, the component moving module 730 includes:
the component pushing unit is used for moving the occupied component along with a dragging track when the dragging operation in the application interface is detected;
and a position updating unit, which is used for updating positions of other components if the placeholder component overlaps with the other components in the first container or the second container in the moving process of the placeholder component every day, so that the other components are free of positions for the placeholder component.
In an embodiment of the present application, based on the above technical solution, the component display module 740 includes:
the container determining unit is used for determining the container where the placeholder component is located when the dragging stop is detected;
a condition confirmation unit, configured to determine that the functional component satisfies a component movement condition if the placeholder component is in the second container and the number of components in the second container is lower than the upper limit of the number of components in the second container;
a first component hiding unit for hiding the placeholder component and adding the functional component at a position where dragging stops in the second container;
and the first layout updating unit is used for updating the layout of the components in the second container according to the positions of the functional components.
In an embodiment of the present application, based on the above technical solution, the interface editing apparatus 700 further includes:
the first component moving-back unit is used for moving the placeholder component back to the initial position if the placeholder component is not located in any container or the number of components in the container where the placeholder component is located is equal to or larger than the component accommodating threshold value of the container where the placeholder component is located when the dragging stopping is detected;
a second component hiding unit to hide the placeholder component and add the functional component at the starting position.
In an embodiment of the present application, based on the above technical solution, the interface editing apparatus 700 further includes:
the second component moving-back unit is used for moving the placeholder component back to the starting position when the long press operation is detected to be interrupted;
a third component hiding unit for hiding the placeholder component and adding the functional component at the starting position.
In an embodiment of the present application, based on the above technical solution, the first container further includes an association component, and an association relationship exists between the association component and the second container; the interface editing apparatus 700 further includes:
the association moving unit is used for moving the placeholder component into the second container according to the association relation between the association component and the second container if the placeholder component and the association component are overlapped when the dragging stop is detected;
a placeholder component hiding unit for hiding the placeholder component and adding the functional component in the second container.
It should be noted that the apparatus provided in the foregoing embodiment and the method provided in the foregoing embodiment belong to the same concept, and the specific manner in which each module performs the operation has been described in detail in the method embodiment, and is not described again here.
FIG. 8 illustrates a schematic structural diagram of a computer system suitable for use in implementing the electronic device of an embodiment of the present application.
It should be noted that the computer system 800 of the electronic device shown in fig. 8 is only an example, and should not bring any limitation to the functions and the application scope of the embodiments of the present application.
As shown in fig. 8, a computer system 800 includes a Central Processing Unit (CPU)801 that can perform various appropriate actions and processes according to a program stored in a Read-Only Memory (ROM) 802 or a program loaded from a storage section 808 into a Random Access Memory (RAM) 803. In the RAM 803, various programs and data necessary for system operation are also stored. The CPU 801, ROM 802, and RAM 803 are connected to each other via a bus 804. An Input/Output (I/O) interface 805 is also connected to bus 804.
The following components are connected to the I/O interface 805: an input portion 806 including a keyboard, a mouse, and the like; an output section 807 including a Cathode Ray Tube (CRT), a Liquid Crystal Display (LCD), and a speaker; a storage section 808 including a hard disk and the like; and a communication section 809 including a Network interface card such as a LAN (Local Area Network) card, a modem, or the like. The communication section 809 performs communication processing via a network such as the internet. A drive 810 is also connected to the I/O interface 805 as necessary. A removable medium 811 such as a magnetic disk, an optical disk, a magneto-optical disk, a semiconductor memory, or the like is mounted on the drive 810 as necessary, so that a computer program read out therefrom is mounted on the storage section 808 as necessary.
In particular, the processes described in the various method flowcharts may be implemented as computer software programs, according to embodiments of the present application. For example, embodiments of the present application include a computer program product comprising a computer program embodied on a computer readable medium, the computer program comprising program code for performing the method illustrated by the flow chart. In such an embodiment, the computer program may be downloaded and installed from a network through the communication section 809 and/or installed from the removable medium 811. When the computer program is executed by the Central Processing Unit (CPU)801, various functions defined in the system of the present application are executed.
It should be noted that the computer readable medium shown in the embodiments of the present application may be a computer readable signal medium or a computer readable storage medium or any combination of the two. A computer readable storage medium may be, for example, but not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination of the foregoing. More specific examples of the computer readable storage medium may include, but are not limited to: an electrical connection having one or more wires, a portable computer diskette, a hard disk, a Random Access Memory (RAM), a Read-Only Memory (ROM), an Erasable Programmable Read-Only Memory (EPROM), a flash Memory, an optical fiber, a portable Compact Disc Read-Only Memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing. In the present application, a computer readable storage medium may be any tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device. In this application, however, a computer readable signal medium may include a propagated data signal with computer readable program code embodied therein, for example, in baseband or as part of a carrier wave. Such a propagated data signal may take many forms, including, but not limited to, electro-magnetic, optical, or any suitable combination thereof. A computer readable signal medium may also be any computer readable medium that is not a computer readable storage medium and that can communicate, propagate, or transport a program for use by or in connection with an instruction execution system, apparatus, or device. Program code embodied on a computer readable medium may be transmitted using any appropriate medium, including but not limited to: wireless, wired, etc., or any suitable combination of the foregoing.
The flowchart and block diagrams in the figures illustrate the architecture, functionality, and operation of possible implementations of systems, methods and computer program products according to various embodiments of the present application. In this regard, each block in the flowchart or block diagrams may represent a module, segment, or portion of code, which comprises one or more executable instructions for implementing the specified logical function(s). It should also be noted that, in some alternative implementations, the functions noted in the block may occur out of the order noted in the figures. For example, two blocks shown in succession may, in fact, be executed substantially concurrently, or the blocks may sometimes be executed in the reverse order, depending upon the functionality involved. It will also be noted that each block of the block diagrams or flowchart illustration, and combinations of blocks in the block diagrams or flowchart illustration, can be implemented by special purpose hardware-based systems which perform the specified functions or acts, or combinations of special purpose hardware and computer instructions.
It should be noted that although in the above detailed description several modules or units of the device for action execution are mentioned, such a division is not mandatory. Indeed, the features and functions of two or more modules or units described above may be embodied in one module or unit according to embodiments of the application. Conversely, the features and functions of one module or unit described above may be further divided into embodiments by a plurality of modules or units.
Through the above description of the embodiments, those skilled in the art will readily understand that the exemplary embodiments described herein may be implemented by software, or by software in combination with necessary hardware. Therefore, the technical solution according to the embodiments of the present application can be embodied in the form of a software product, which can be stored in a non-volatile storage medium (which can be a CD-ROM, a usb disk, a removable hard disk, etc.) or on a network, and includes several instructions to enable a computing device (which can be a personal computer, a server, a touch terminal, or a network device, etc.) to execute the method according to the embodiments of the present application.
Other embodiments of the present application will be apparent to those skilled in the art from consideration of the specification and practice of the invention disclosed herein. This application is intended to cover any variations, uses, or adaptations of the invention following, in general, the principles of the application and including such departures from the present disclosure as come within known or customary practice within the art to which the invention pertains.
It will be understood that the present application is not limited to the precise arrangements described above and shown in the drawings and that various modifications and changes may be made without departing from the scope thereof. The scope of the application is limited only by the appended claims.

Claims (10)

1. An interface editing method, comprising:
acquiring an application starting instruction and displaying an application interface according to the application starting instruction, wherein the application interface comprises a functional component;
triggering operation feedback when detecting long-time pressing operation executed on the functional component;
when the functional component is detected to be dragged in the application interface, the functional component moves along a dragging track;
when the dragging stop is detected and the functional component meets the component moving condition, the functional component is displayed at the position where the dragging stop.
2. The method of claim 1, wherein the application interface comprises a first container and a second container; when the long press operation executed on the functional component is detected, triggering operation feedback, including:
acquiring coordinate information corresponding to the touch point of the long press operation and determining a container where the touch point is located according to the coordinate information;
if the touch point is in the first container, traversing each component in the first container and determining the functional component targeted by the long press operation according to the coordinate information;
deleting the functional component and recording the starting position of the functional component;
displaying the placeholder component at the starting position and triggering operation feedback.
3. The method according to claim 2, wherein when the functional component is detected to be dragged in the application interface, the functional component moves along a dragging track, and the method comprises the following steps:
when a dragging operation in the application interface is detected, the occupying component moves along a dragging track;
in the moving process of the placeholder component, if the placeholder component overlaps with other components in the first container or the second container, updating the positions of the other components so as to make the other components free the placeholder component.
4. The method according to claim 2, wherein when the dragging stop is detected and the functional component meets the component moving condition, the presenting the functional component at the position of the dragging stop comprises:
when the dragging stop is detected, determining a container where the placeholder component is located;
determining that the functional component satisfies a component movement condition if the placeholder component is in the second container and the number of components in the second container is below the upper limit of the number of components in the second container;
hiding the placeholder component and adding the functional component at a location in the second container where dragging stopped;
and updating the layout of the components in the second container according to the positions of the functional components.
5. The method of claim 4, wherein after determining the container in which the placeholder component is located when the drag stop is detected, the method further comprises:
when the dragging stop is detected, if the placeholder component is not in any container or the number of components in the container where the placeholder component is located is equal to or larger than the component accommodating threshold value of the container where the placeholder component is located, the placeholder component moves back to the initial position;
hiding the placeholder component and adding the functional component at the starting location.
6. The method of claim 4, further comprising:
when the long press operation is detected to be interrupted, the placeholder component moves back to the starting position;
hiding the placeholder component and adding the functional component at the starting position.
7. The method according to claim 2, wherein the first container further comprises an association component, and an association relationship exists between the association component and the second container; the method further comprises the following steps:
when the dragging stop is detected, if the placeholder component and the association component are overlapped, the placeholder component is moved into the second container according to the association relation between the association component and the second container;
hiding the placeholder component and adding the functional component in the second container.
8. An interface editing apparatus, comprising:
the interface display module is used for acquiring an application starting instruction and displaying an application interface according to the application starting instruction, wherein the application interface comprises a functional component;
the feedback triggering module is used for triggering operation feedback when detecting the long-time pressing operation executed on the functional component;
the component moving module is used for moving the functional component along a dragging track when the functional component is detected to be dragged in the application interface;
and the component display module is used for displaying the functional component at the position where the dragging is stopped when the dragging stop is detected and the functional component meets the component moving condition.
9. An electronic device, comprising:
a processor;
a memory for storing executable instructions of the processor;
wherein the processor is configured to perform the interface editing method of any one of claims 1 to 7 via execution of the executable instructions.
10. A computer-readable medium, on which a computer program is stored, which, when being executed by a processor, carries out the interface editing method according to any one of claims 1 to 7.
CN202210249588.9A 2022-03-14 2022-03-14 Interface editing method, device, electronic equipment and readable medium Active CN114610190B (en)

Priority Applications (2)

Application Number Priority Date Filing Date Title
CN202210249588.9A CN114610190B (en) 2022-03-14 2022-03-14 Interface editing method, device, electronic equipment and readable medium
PCT/CN2022/140760 WO2023173868A1 (en) 2022-03-14 2022-12-21 Interface editing method and apparatus, electronic device, and readable medium

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202210249588.9A CN114610190B (en) 2022-03-14 2022-03-14 Interface editing method, device, electronic equipment and readable medium

Publications (2)

Publication Number Publication Date
CN114610190A true CN114610190A (en) 2022-06-10
CN114610190B CN114610190B (en) 2024-05-31

Family

ID=81863462

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202210249588.9A Active CN114610190B (en) 2022-03-14 2022-03-14 Interface editing method, device, electronic equipment and readable medium

Country Status (2)

Country Link
CN (1) CN114610190B (en)
WO (1) WO2023173868A1 (en)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2023173868A1 (en) * 2022-03-14 2023-09-21 富途网络科技(深圳)有限公司 Interface editing method and apparatus, electronic device, and readable medium

Citations (13)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20120131483A1 (en) * 2010-11-22 2012-05-24 International Business Machines Corporation Drag-and-drop actions for web applications using an overlay and a set of placeholder elements
CN103677490A (en) * 2012-08-31 2014-03-26 腾讯科技(深圳)有限公司 Desktop management method and device
CN107015721A (en) * 2016-10-20 2017-08-04 阿里巴巴集团控股有限公司 The management method and device of a kind of application interface
CN108733274A (en) * 2018-04-25 2018-11-02 维沃移动通信有限公司 A kind of icon display method and terminal device
CN110286899A (en) * 2019-06-28 2019-09-27 北京字节跳动网络技术有限公司 Edit methods and device, the storage medium of application program display interface
CN111124583A (en) * 2019-12-25 2020-05-08 上海传英信息技术有限公司 Function interface editing method, mobile terminal and readable storage medium
CN111142727A (en) * 2019-12-26 2020-05-12 上海传英信息技术有限公司 Application icon management method, mobile terminal and readable storage medium
CN111506244A (en) * 2020-04-24 2020-08-07 东莞市精驰软件有限公司 Control dragging display method and system, intelligent terminal and storage medium
CN111813700A (en) * 2020-09-03 2020-10-23 武汉中科通达高新技术股份有限公司 Monitoring data display method and device
CN113244618A (en) * 2021-06-21 2021-08-13 腾讯科技(深圳)有限公司 Car logo replacing method and device applied to map client and electronic equipment
CN113590612A (en) * 2021-07-13 2021-11-02 华中科技大学 Construction method and operation method of DRAM-NVM (dynamic random Access memory-non volatile memory) hybrid index structure
CN113791760A (en) * 2021-09-16 2021-12-14 杭州安恒信息安全技术有限公司 Commercial intelligent instrument panel generation method and device, electronic equipment and storage medium
CN114115681A (en) * 2021-12-02 2022-03-01 北京百度网讯科技有限公司 Page generation method and device, electronic equipment and medium

Family Cites Families (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN104516880A (en) * 2013-09-26 2015-04-15 Sap欧洲公司 Block-based graphics layout
CN114610190B (en) * 2022-03-14 2024-05-31 富途网络科技(深圳)有限公司 Interface editing method, device, electronic equipment and readable medium

Patent Citations (13)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20120131483A1 (en) * 2010-11-22 2012-05-24 International Business Machines Corporation Drag-and-drop actions for web applications using an overlay and a set of placeholder elements
CN103677490A (en) * 2012-08-31 2014-03-26 腾讯科技(深圳)有限公司 Desktop management method and device
CN107015721A (en) * 2016-10-20 2017-08-04 阿里巴巴集团控股有限公司 The management method and device of a kind of application interface
CN108733274A (en) * 2018-04-25 2018-11-02 维沃移动通信有限公司 A kind of icon display method and terminal device
CN110286899A (en) * 2019-06-28 2019-09-27 北京字节跳动网络技术有限公司 Edit methods and device, the storage medium of application program display interface
CN111124583A (en) * 2019-12-25 2020-05-08 上海传英信息技术有限公司 Function interface editing method, mobile terminal and readable storage medium
CN111142727A (en) * 2019-12-26 2020-05-12 上海传英信息技术有限公司 Application icon management method, mobile terminal and readable storage medium
CN111506244A (en) * 2020-04-24 2020-08-07 东莞市精驰软件有限公司 Control dragging display method and system, intelligent terminal and storage medium
CN111813700A (en) * 2020-09-03 2020-10-23 武汉中科通达高新技术股份有限公司 Monitoring data display method and device
CN113244618A (en) * 2021-06-21 2021-08-13 腾讯科技(深圳)有限公司 Car logo replacing method and device applied to map client and electronic equipment
CN113590612A (en) * 2021-07-13 2021-11-02 华中科技大学 Construction method and operation method of DRAM-NVM (dynamic random Access memory-non volatile memory) hybrid index structure
CN113791760A (en) * 2021-09-16 2021-12-14 杭州安恒信息安全技术有限公司 Commercial intelligent instrument panel generation method and device, electronic equipment and storage medium
CN114115681A (en) * 2021-12-02 2022-03-01 北京百度网讯科技有限公司 Page generation method and device, electronic equipment and medium

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2023173868A1 (en) * 2022-03-14 2023-09-21 富途网络科技(深圳)有限公司 Interface editing method and apparatus, electronic device, and readable medium

Also Published As

Publication number Publication date
WO2023173868A1 (en) 2023-09-21
CN114610190B (en) 2024-05-31

Similar Documents

Publication Publication Date Title
US10762277B2 (en) Optimization schemes for controlling user interfaces through gesture or touch
US11816305B2 (en) Interface display method and apparatus, and storage medium
US10775971B2 (en) Pinch gestures in a tile-based user interface
KR101740495B1 (en) Method for displaying an icon, device, program and recording medium therof
NL2007908B1 (en) Temporal task-based tab management.
US20160188363A1 (en) Method, apparatus, and device for managing tasks in multi-task interface
EP2919496A1 (en) Method for realizing downloading of mobile terminal application program and mobile terminal
TW201723822A (en) Implementing application jumps
KR20140126687A (en) Organizing graphical representations on computing devices
CN105607905B (en) Display method and device of application icons on toolbar and electronic equipment
CN105144116B (en) Estimate the remaining time of operation
CN110333918B (en) Method and equipment for managing boarder programs
CN107066188B (en) A kind of method and terminal sending screenshot picture
EP3227777A1 (en) Application launching and switching interface
CN108965389A (en) Method for showing information
CN106663015A (en) Resuming session states
CN106170790B (en) Picture library user interface is serviced to present
CN114610190B (en) Interface editing method, device, electronic equipment and readable medium
CN105279431A (en) Method, device, and system for recording operation information in mobile device
CN112073301A (en) Method, device and computer readable medium for deleting chat group members
US20070286030A1 (en) Timing system and method
CN103365641B (en) A kind of method for designing of GUI developing instrument and system
CN111200639B (en) Information pushing method and device based on user operation behavior and electronic equipment
CN111766989A (en) Interface switching method and device
US20070226706A1 (en) Method and system for generating multiple path application simulations

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant