CN104793876B - Application interface button display method and device - Google Patents
Application interface button display method and device Download PDFInfo
- Publication number
- CN104793876B CN104793876B CN201410028424.9A CN201410028424A CN104793876B CN 104793876 B CN104793876 B CN 104793876B CN 201410028424 A CN201410028424 A CN 201410028424A CN 104793876 B CN104793876 B CN 104793876B
- Authority
- CN
- China
- Prior art keywords
- button
- arc
- collection container
- application interface
- buttons
- 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.)
- Active
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input 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/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0481—Interaction 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
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input 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/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0481—Interaction 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/0482—Interaction with lists of selectable items, e.g. menus
Landscapes
- Engineering & Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The invention relates to a method and a device for displaying application interface buttons, wherein the method comprises the following steps: receiving a button display instruction triggered by the outside on an application interface; acquiring a preset telescopic button set container according to a button display instruction; and expanding the button set container on the application interface in an arc-shaped area, and displaying each button in the button set container in the arc-shaped area. According to the invention, the button collection container is expanded on the application interface in an arc-shaped area, and all buttons are distributed in the arc-shaped area for display, and when the buttons are required to be used, the button collection container is expanded, and the buttons are displayed; when the button is not needed to be used, the button collection container can be folded and retracted, the button is not visible, transverse and longitudinal expansion spans can be effectively reduced due to the fact that the arc-shaped area is opposite to the bar-shaped area, the phenomenon that other elements on an application interface are shielded is not prone to being caused, and occupation of screen space is reduced.
Description
Technical Field
The invention relates to the technical field of interface display, in particular to a method and a device for displaying application interface buttons.
Background
The buttons in the mobile terminal application are the most common and the most common man-machine interaction controls, and programs can perform various operations such as UI refreshing, page switching, data pulling and the like after intercepting click events of the buttons, but for the mobile phone terminal, due to the fact that the size of a screen is limited, more contents need to be displayed on the same page as much as possible, if more buttons are provided, the display of main contents is affected, and the more the space occupied by the buttons is, the more the page layout is complex.
In order to avoid the buttons occupying too much screen space in current applications, multiple buttons are often integrated together and presented in a pop-up form, with the collection of buttons being collapsed into a small area of the screen when not in use. However, for some game applications, because there are many interface elements, there is little space left for the buttons to expand and contract, and if there are too many buttons, a long screen space is needed after all the buttons are displayed, and other interface elements are blocked.
Disclosure of Invention
The embodiment of the invention provides a method and a device for displaying buttons of an application interface, aiming at reducing the screen space occupied by the buttons.
The embodiment of the invention provides an application interface button display method, which comprises the following steps:
receiving a button display instruction triggered by the outside on an application interface;
acquiring a preset telescopic button set container according to the button display instruction;
expanding the button set container on the application interface in an arc-shaped area, and displaying each button in the button set container in the arc-shaped area.
The embodiment of the present invention further provides an application interface button display device, including:
the receiving module is used for receiving a button display instruction triggered by the outside on the application interface;
the acquisition module is used for acquiring a preset telescopic button set container according to the button display instruction;
and the expansion display module is used for expanding the button collection container on the application interface in an arc-shaped area and displaying each button in the button collection container in the arc-shaped area.
According to the application interface button display method and device provided by the embodiment of the invention, the button collection container is unfolded on the application interface in the arc-shaped area, the buttons are distributed in the arc-shaped area for display, and when the buttons are needed to be used, the button collection container is unfolded, and the buttons are displayed; when the button is not needed to be used, the button collection container can be folded and retracted, the button is not visible, transverse and longitudinal expansion spans can be effectively reduced due to the fact that the arc-shaped area is opposite to the bar-shaped area, the phenomenon that other elements on an application interface are shielded is not prone to being caused, and occupation of screen space is reduced.
Drawings
FIG. 1 is a flowchart illustrating a first embodiment of a method for displaying buttons on an application interface according to the present invention;
FIG. 2a is a diagram of a fan button collection container outside of a clipping region of an on-screen canvas in an embodiment of the present invention;
FIG. 2b is a schematic diagram of the fan button manifold container in an expanded state according to an embodiment of the present invention;
FIG. 2c is a schematic view of a fan button assembly container in a collapsed state according to an embodiment of the present invention;
FIG. 2d is a diagram illustrating an embodiment of setting a trigger button on an application interface;
FIG. 2e is a diagram of an embodiment of the present invention in which a container of the set of toggle button expand buttons is clicked on an application interface;
FIG. 2f is a schematic diagram illustrating the effect of the button rotating in the opposite direction by a set angle according to the embodiment of the present invention;
FIG. 2g is a schematic diagram illustrating the correction of the rotation angle of the button according to the embodiment of the present invention;
FIG. 3 is a flowchart illustrating a second embodiment of a method for displaying buttons on an application interface according to the present invention;
FIG. 4 is a flowchart illustrating a third exemplary embodiment of a method for displaying buttons on an application interface according to the present invention;
FIG. 5 is a diagram illustrating a screen display after the button collection container is folded according to an embodiment of the present invention;
FIG. 6 is a functional block diagram of a first embodiment of an API button display apparatus according to the present invention;
FIG. 7 is a functional block diagram of a second embodiment of an API button display apparatus according to the present invention;
fig. 8 is a functional block diagram of a third embodiment of the ui button display device according to the present invention.
In order to make the technical solution of the present invention clearer and clearer, the following detailed description is made with reference to the accompanying drawings.
Detailed Description
It should be understood that the specific embodiments described herein are merely illustrative of the invention and are not intended to limit the invention.
As shown in fig. 1, a first embodiment of the present invention provides an application interface button display method, including:
step S101, receiving a button display instruction triggered by the outside on an application interface;
step S102, acquiring a preset telescopic button set container according to the button display instruction;
the application interface of the embodiment can be various terminal application interfaces, in particular to application interfaces on terminals with smaller screens, such as mobile terminals.
Due to the limited size of the terminal screen, if the number of various buttons displayed in the application interface is large as a control for human-computer interaction, the display of main contents in the application can be influenced.
In view of this, the embodiments of the present invention place each button set in a scalable container (i.e., the button set container referred to in this embodiment), when a button needs to be used, the button set container is expanded, the button is visible and clickable, when the button does not need to be used, the button set container is contracted, and the button is invisible and clickable. That is, the button assembly container has two states of being unfolded and folded, the shape of the unfolded state of the button assembly container can be shown with reference to fig. 2a and 2b, and the shape of the folded state of the button assembly container can be shown with reference to fig. 2 c.
In addition, in order to reduce the occupation of screen space, the present embodiment provides that the shape of the retractable button assembly container after being unfolded is an arc shape, such as a fan shape, as shown in fig. 2a and 2 b. Because the relative bar region of arc region, can effectively reduce horizontal and vertical expansion span, it is few to screen space occupation, is difficult for causing the sheltering from to other elements on the application interface.
Specifically, when the user needs to display a button, a button display instruction may be triggered on the application interface. Therefore, a special trigger key can be set on the application interface, as shown by the triangular key in fig. 2d, when the user clicks the key, the terminal can obtain the telescopic button collection container according to the key instruction of the user, and can expand the button collection container as shown in fig. 2 e.
Step S103, expanding the button set container on the application interface in an arc-shaped area, and displaying each button in the button set container in the arc-shaped area.
When the button collection container is expanded on the application interface to display the buttons in the button collection container, the following method may be specifically adopted:
rotating the button set container from the boundary of the application interface into a display area of the application interface at a set angle, and expanding in an arc area in the display area.
The display area of the application interface is a visible clipping area of a canvas on a display screen of the application interface. Taking the fan-shaped button set container as an example, the button set container is outside the clipping area of the canvas on the display screen of the application interface and is invisible before rotating into the clipping area of the application interface, as shown in fig. 2a, M, N is two button controls placed on the fan-shaped button set container at initialization, the area inside the dotted line frame is represented outside the clipping area of the canvas on the screen, so the fan-shaped button set container is invisible and the two button controls M, N are invisible; after rotating the fan-shaped button collection container by the set angle, the button collection container is rotated into the clipping area of the application interface, as shown in fig. 2b, and the fan-shaped button collection container is visible within the clipping area.
In the above process, when the fan-shaped button assembly container is in the unfolded state, the buttons distributed in the fan-shaped area can be displayed and clicked, and the fan-shaped button assembly container has a transition animation from the folded state to the unfolded state.
Further, it is also possible to set as necessary: and prohibiting a button clicking event in the unfolding animation process, and allowing a button clicking operation after the fan-shaped button collection container is completely unfolded.
When each button in the button set container is displayed, a corresponding display process needs to be adopted according to the initial placement condition of the button in the button set container.
The position of each button placed in the button set container may be initialized when the button set container is initialized or before the button set container is expanded.
As a placement manner, the buttons in the button set container may be arranged in the button set container in advance at the time of initialization.
As another placement mode, the buttons in the button set container may be placed in the button set container in an overlapping manner in advance at the time of initialization.
In addition, the buttons can be placed in the button collection container in an upright or inverted manner at the time of initialization.
In the case of upright placement, since the initialization button can only be based on the initialization state of the fan-shaped button assembly container, the initialization position of the button is as shown in fig. 2a, the button assembly container is unfolded after rotation, the button also rotates along with the button assembly container, which causes the button to be not corresponding to the observation angle of human eyes after the button assembly container is unfolded, as shown in fig. 2b, so that the button needs to rotate in the opposite direction, the rotation angle of the button M, N is- α if the rotation angle of the button assembly container is α, and the rotated button assembly container can be shown in fig. 2f, wherein the rotation in the opposite direction of the button M, N can be rotation about the center of the rectangular region of the button, or rotation about a fulcrum set on the button assembly container, such as the midpoint of a connecting line between the buttons M, N, and the rotated button can be displayed in a set arc region.
Therefore, in the case where the buttons are arranged in the button set container in advance, the display process of each button is as follows:
and rotating the buttons arranged in the button collection container by a set angle according to the rotation direction opposite to the button collection container, and then displaying the rotated buttons in the arc-shaped area.
For the case where buttons are placed in the button set container in advance in an overlapping manner, the display process of each button is as follows:
sequentially unfolding all the buttons in the button collection container, and then rotating all the unfolded buttons by the set angle according to the rotating direction opposite to that of the button collection container; and displaying each rotated button in the arc-shaped area.
Furthermore, in order to make the distribution of the buttons and the arc of the button collection container present the same trend, rather than being placed in a horizontal state, when displaying the rotated buttons in the arc area, the rotation angle of each button needs to be corrected, so that the distribution of each button in the arc area is consistent with the arc trend of the arc area; and then, displaying each button after angle correction in the arc-shaped area.
The correction principle of the rotation angle is as follows:
as shown in fig. 2g, L2 is defined as the tangent line at the intersection point of the straight line drawn from the center of the fan through the center of the rectangular area of the button M and the circular arc, L1 is the straight line parallel to L2, the straight line L1 passes through the center of the rectangular area of the button M, the angle β is the included angle between L1 and the horizontal straight line passing through the center of the rectangular area of the button M, the button M is rotated β degrees counterclockwise, the central horizontal axis of M is parallel to the tangent line L2 of the circular arc, the button N needs to be rotated β degrees clockwise, and β is related to the distribution of the buttons in the fan area.
Therefore, the buttons are corrected by the rotation angle, the buttons can be distributed in the same trend as the arc of the sector instead of being placed in a horizontal state, and the display effect of the buttons is improved.
In addition, as an embodiment, the button set container may be expanded in a transparent manner on the application interface, that is, only each button in the button set container is displayed without displaying the bottom color of the button set container.
In addition, as an embodiment, the button collection container may also be expanded in an arc-shaped area at a corner of the application interface, as shown in fig. 2e, so as to reduce the occupation of screen space.
According to the scheme, the button collection container is expanded on the application interface in the arc-shaped area, the buttons are distributed in the arc-shaped area to be displayed, and when the buttons are required to be used, the button collection container is expanded, and the buttons are displayed; when the button is not needed to be used, the button collection container can be folded and retracted, the button is not visible, transverse and longitudinal expansion spans can be effectively reduced due to the fact that the arc-shaped area is opposite to the bar-shaped area, the phenomenon that other elements on an application interface are shielded is not prone to being caused, and occupation of screen space is reduced.
As shown in fig. 3, a second embodiment of the present invention provides an application interface button display method, which, on the basis of the first embodiment, after the step S103, may further include:
step S104, receiving a click command of an external trigger to a button in a button collection container on the arc-shaped area;
and step S105, performing business operation of the corresponding button according to the button clicking instruction.
The present embodiment is different from the first embodiment in that the present embodiment further includes a scheme in which the user clicks a button in the arc-shaped area.
It is possible to set as desired: and prohibiting a button clicking event in the unfolding animation process, and allowing a button clicking operation after the fan-shaped button collection container is completely unfolded. The user can click the corresponding button to perform the corresponding business operation according to the requirement.
According to the scheme, the button collection container is expanded on the application interface in the arc-shaped area, the buttons are distributed in the arc-shaped area to be displayed, and when the buttons are required to be used, the button collection container is expanded, and the buttons are displayed; when the button is not needed to be used, the button collection container can be folded and retracted, the button is not visible, transverse and longitudinal expansion spans can be effectively reduced due to the fact that the arc-shaped area is opposite to the bar-shaped area, the phenomenon that other elements on an application interface are shielded is not prone to being caused, and occupation of screen space is reduced. After the button collection container is unfolded, a user can click and operate the corresponding button in the arc-shaped area to perform business operation according to needs, so that the requirements of the user are met, and convenience is provided for the user.
As shown in fig. 4, a third embodiment of the present invention provides an application interface button display method, which, after step S105, further includes:
step S106, receiving an externally triggered button retraction instruction;
and S107, folding the button collection container from one end of the arc-shaped area to the other end of the arc-shaped area and folding the button collection container outside the display area of the application interface according to the button folding instruction.
The present embodiment is different from the first embodiment described above in that the present embodiment further includes a scheme of folding the button collection container.
In particular, when a user does not need to use a button on the application interface, the button collection container can be collapsed to reduce the occupation of screen space.
Wherein the button collection container, when collapsed, can be rotated into the invisible area of the screen canvas, i.e., outside the clipping area, in the opposite direction as when expanded. The button collection container is contracted in a folded state, the boundary pictures of the sector areas are overlapped, only the picture of the boundary is left on the screen because the sector area picture and the button are rotated and then turned out of the cutting area, and the part exceeding the upper boundary can not be displayed, as shown in fig. 5, the part exceeding the upper boundary needs to be cut and can not be displayed.
According to the scheme, the button collection container is expanded on the application interface in the arc-shaped area, the buttons are distributed in the arc-shaped area to be displayed, when the buttons are required to be used, the button collection container is expanded, the buttons are displayed, and clicking operation can be performed; when the button is not needed to be used, the button collection container can be folded and retracted, the button is not visible, transverse and longitudinal expansion spans can be effectively reduced due to the fact that the arc-shaped area is opposite to the bar-shaped area, the phenomenon that other elements on an application interface are shielded is not prone to being caused, and occupation of screen space is reduced.
It should be noted that, the foregoing embodiments are exemplified by the arc-shaped button assembly container, in other embodiments, the button assembly container that stretches out and draws back in the transverse direction and the longitudinal direction may also be used to realize the display and the retraction of the button, wherein, the spans after the transverse direction and the longitudinal direction are often larger, for the game application with more screen elements, compared with the arc-shaped button assembly container, the game application is easier to block other interface elements in this case, and the arc-shaped retractable container is used to effectively reduce the stretching spans in the transverse direction and the longitudinal direction, taking the fan-shaped retractable container as an example, the buttons are uniformly distributed in the fan-shaped area, when necessary, the fan-shaped device is stretched, the button is displayed, when not necessary, the fan-shaped retractable container is retracted, the button is invisible, and therefore, the screen space occupied is greatly reduced.
As shown in fig. 6, a first embodiment of the present invention provides an application interface button display apparatus, including: a receiving module 201, an obtaining module 202 and an unfolding display module 203, wherein:
a receiving module 201, configured to receive an externally triggered button display instruction on an application interface;
an obtaining module 202, configured to obtain a preset telescopic button set container according to the button display instruction;
the unfolding display module 203 is configured to unfold the button collection container on the application interface in an arc-shaped area, and display each button in the button collection container in the arc-shaped area.
The application interface of the embodiment can be various terminal application interfaces, in particular to application interfaces on terminals with smaller screens, such as mobile terminals.
Due to the limited size of the terminal screen, if the number of various buttons displayed in the application interface is large as a control for human-computer interaction, the display of main contents in the application can be influenced.
In view of this, the embodiments of the present invention place each button set in a scalable container (i.e., the button set container referred to in this embodiment), when a button needs to be used, the button set container is expanded, the button is visible and clickable, when the button does not need to be used, the button set container is contracted, and the button is invisible and clickable. That is, the button assembly container has two states of being unfolded and folded, the shape of the unfolded state of the button assembly container can be shown with reference to fig. 2a and 2b, and the shape of the folded state of the button assembly container can be shown with reference to fig. 2 c.
In addition, in order to reduce the occupation of screen space, the present embodiment provides that the shape of the retractable button assembly container after being unfolded is an arc shape, such as a fan shape, as shown in fig. 2a and 2 b. Because the relative bar region of arc region, can effectively reduce horizontal and vertical expansion span, it is few to screen space occupation, is difficult for causing the sheltering from to other elements on the application interface.
Specifically, when the user needs to display a button, a button display instruction may be triggered on the application interface. Therefore, a dedicated trigger button may be set on the application interface, as shown in fig. 2d, as a triangle button is clicked by the user, after the user clicks the button, the terminal receives a button display instruction triggered externally on the application interface through the receiving module 201, the obtaining module 202 obtains the scalable button collection container according to the button instruction of the user, and the button collection container may be expanded as shown in fig. 2e by expanding the display module 203.
When the button collection container is expanded on the application interface to display the buttons in the button collection container, the following method may be specifically adopted:
rotating the button set container from the boundary of the application interface into a display area of the application interface at a set angle, and expanding in an arc area in the display area.
The display area of the application interface is a visible clipping area of a canvas on a display screen of the application interface. Taking the fan-shaped button set container as an example, the button set container is outside the clipping area of the canvas on the display screen of the application interface and is invisible before rotating into the clipping area of the application interface, as shown in fig. 2a, M, N is two button controls placed on the fan-shaped button set container at initialization, the area inside the dotted line frame is represented outside the clipping area of the canvas on the screen, so the fan-shaped button set container is invisible and the two button controls M, N are invisible; after rotating the fan-shaped button collection container by the set angle, the button collection container is rotated into the clipping area of the application interface, as shown in fig. 2b, and the fan-shaped button collection container is visible within the clipping area.
In the above process, when the fan-shaped button assembly container is in the unfolded state, the buttons distributed in the fan-shaped area can be displayed and clicked, and the fan-shaped button assembly container has a transition animation from the folded state to the unfolded state.
Further, it is also possible to set as necessary: and prohibiting a button clicking event in the unfolding animation process, and allowing a button clicking operation after the fan-shaped button collection container is completely unfolded.
When each button in the button set container is displayed, a corresponding display process needs to be adopted according to the initial placement condition of the button in the button set container.
The position of each button placed in the button set container may be initialized when the button set container is initialized or before the button set container is expanded.
As a placement manner, the buttons in the button set container may be arranged in the button set container in advance at the time of initialization.
As another placement mode, the buttons in the button set container may be placed in the button set container in an overlapping manner in advance at the time of initialization.
In addition, the buttons can be placed in the button collection container in an upright or inverted manner at the time of initialization.
In the case of upright placement, the initialization button can only be based on the initialization state of the fan-shaped button set container, so the initialization position of the button is as shown in fig. 2a, the button set container is unfolded after rotation, the button also rotates along with the button set container, which causes the button to be not corresponding to the observation angle of human eyes after the button set container is unfolded, as shown in fig. 2b, therefore the button needs to rotate in the opposite direction, the rotation angle of the button M, N is- α if the rotation angle of the button set container is α, and the rotated button set container can be shown in fig. 2f, wherein the rotation in the opposite direction of the button M, N can be rotation from the center of the rectangular area of the button, or rotation relative to a certain set fulcrum on the button set container, such as the midpoint of a connecting line between the buttons M, N, and the rotated button can be ensured to be displayed in a set arc area.
Therefore, in the case where the buttons are arranged in the button set container in advance, the display process of each button is as follows:
and rotating the buttons arranged in the button collection container by a set angle according to the rotation direction opposite to the button collection container, and then displaying the rotated buttons in the arc-shaped area.
For the case where buttons are placed in the button set container in advance in an overlapping manner, the display process of each button is as follows:
sequentially unfolding all the buttons in the button collection container, and then rotating all the unfolded buttons by the set angle according to the rotating direction opposite to that of the button collection container; and displaying each rotated button in the arc-shaped area.
Furthermore, in order to make the distribution of the buttons and the arc of the button collection container present the same trend, rather than being placed in a horizontal state, when displaying the rotated buttons in the arc area, the rotation angle of each button needs to be corrected, so that the distribution of each button in the arc area is consistent with the arc trend of the arc area; and then, displaying each button after angle correction in the arc-shaped area.
The correction principle of the rotation angle is as follows:
as shown in fig. 2g, L2 is defined as the tangent line at the intersection point of the straight line drawn from the center of the fan through the center of the rectangular area of the button M and the circular arc, L1 is the straight line parallel to L2, the straight line L1 passes through the center of the rectangular area of the button M, the angle β is the included angle between L1 and the horizontal straight line passing through the center of the rectangular area of the button M, the button M is rotated β degrees counterclockwise, the central horizontal axis of M is parallel to the tangent line L2 of the circular arc, the button N needs to be rotated β degrees clockwise, and β is related to the distribution of the buttons in the fan area.
Therefore, the buttons are corrected by the rotation angle, the buttons can be distributed in the same trend as the arc of the sector instead of being placed in a horizontal state, and the display effect of the buttons is improved.
In addition, as an embodiment, the button set container may be expanded in a transparent manner on the application interface, that is, only each button in the button set container is displayed without displaying the bottom color of the button set container.
In addition, as an embodiment, the button collection container may also be expanded in an arc-shaped area at a corner of the application interface, as shown in fig. 2e, so as to reduce the occupation of screen space.
According to the scheme, the button collection container is expanded on the application interface in the arc-shaped area, the buttons are distributed in the arc-shaped area to be displayed, and when the buttons are required to be used, the button collection container is expanded, and the buttons are displayed; when the button is not needed to be used, the button collection container can be folded and retracted, the button is not visible, transverse and longitudinal expansion spans can be effectively reduced due to the fact that the arc-shaped area is opposite to the bar-shaped area, the phenomenon that other elements on an application interface are shielded is not prone to being caused, and occupation of screen space is reduced.
As shown in fig. 7, a second embodiment of the present invention further provides an application interface button display device, which may further include, on the basis of the first embodiment shown in fig. 6: a business operation module 204;
in this embodiment, the receiving module 201 is further configured to receive a click instruction of an external trigger on a button in the button collection container on the arc-shaped area;
the service operation module 204 is configured to perform a service operation of the corresponding button according to the button click instruction.
The present embodiment is different from the first embodiment in that the present embodiment further includes a scheme in which the user clicks a button in the arc-shaped area.
It is possible to set as desired: and prohibiting a button clicking event in the unfolding animation process, and allowing a button clicking operation after the fan-shaped button collection container is completely unfolded. The user can click the corresponding button to perform the corresponding business operation according to the requirement.
According to the scheme, the button collection container is expanded on the application interface in the arc-shaped area, the buttons are distributed in the arc-shaped area to be displayed, and when the buttons are required to be used, the button collection container is expanded, and the buttons are displayed; when the button is not needed to be used, the button collection container can be folded and retracted, the button is not visible, transverse and longitudinal expansion spans can be effectively reduced due to the fact that the arc-shaped area is opposite to the bar-shaped area, the phenomenon that other elements on an application interface are shielded is not prone to being caused, and occupation of screen space is reduced. After the button collection container is unfolded, a user can click and operate the corresponding button in the arc-shaped area to perform business operation according to needs, so that the requirements of the user are met, and convenience is provided for the user.
As shown in fig. 8, a third embodiment of the present invention further provides an application interface button display device, which may further include, on the basis of the second embodiment shown in fig. 7: a fold away module 205;
in this embodiment, the receiving module 201 is further configured to receive an externally triggered button retraction instruction;
the folding and retracting module 205 is configured to fold and retract the button collection container from one end of the arc-shaped area to the other end of the arc-shaped area outside the display area of the application interface according to the button retracting instruction.
The present embodiment is different from the first embodiment described above in that the present embodiment further includes a scheme of folding the button collection container.
In particular, when a user does not need to use a button on the application interface, the button collection container can be collapsed to reduce the occupation of screen space.
Wherein the button collection container, when collapsed, can be rotated into the invisible area of the screen canvas, i.e., outside the clipping area, in the opposite direction as when expanded. The button collection container is contracted in a folded state, the boundary pictures of the sector areas are overlapped, only the picture of the boundary is left on the screen because the sector area picture and the button are rotated and then turned out of the cutting area, and the part exceeding the upper boundary can not be displayed, as shown in fig. 5, the part exceeding the upper boundary needs to be cut and can not be displayed.
According to the scheme, the button collection container is expanded on the application interface in the arc-shaped area, the buttons are distributed in the arc-shaped area to be displayed, when the buttons are required to be used, the button collection container is expanded, the buttons are displayed, and clicking operation can be performed; when the button is not needed to be used, the button collection container can be folded and retracted, the button is not visible, transverse and longitudinal expansion spans can be effectively reduced due to the fact that the arc-shaped area is opposite to the bar-shaped area, the phenomenon that other elements on an application interface are shielded is not prone to being caused, and occupation of screen space is reduced.
It should be noted that, the foregoing embodiments are exemplified by the arc-shaped button assembly container, in other embodiments, the button assembly container that stretches out and draws back in the transverse direction and the longitudinal direction may also be used to realize the display and the retraction of the button, wherein, the spans after the transverse direction and the longitudinal direction are often larger, for the game application with more screen elements, compared with the arc-shaped button assembly container, the game application is easier to block other interface elements in this case, and the arc-shaped retractable container is used to effectively reduce the stretching spans in the transverse direction and the longitudinal direction, taking the fan-shaped retractable container as an example, the buttons are uniformly distributed in the fan-shaped area, when necessary, the fan-shaped device is stretched, the button is displayed, when not necessary, the fan-shaped retractable container is retracted, the button is invisible, and therefore, the screen space occupied is greatly reduced.
It should also be noted that, in this document, the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or apparatus. Without further limitation, an element defined by the phrase "comprising an … …" does not exclude the presence of other like elements in a process, method, article, or apparatus that comprises the element.
The above-mentioned serial numbers of the embodiments of the present invention are merely for description and do not represent the merits of the embodiments.
Through the above description of the embodiments, those skilled in the art will clearly understand that the method of the above embodiments can be implemented by software plus a necessary general hardware platform, and certainly can also be implemented by hardware, but in many cases, the former is a better implementation manner. Based on such understanding, the technical solutions of the present invention may be embodied in the form of a software product, which is stored in a storage medium (e.g., ROM/RAM, magnetic disk, optical disk) and includes instructions for enabling a terminal device (e.g., a mobile phone, a computer, a server, or a network device) to execute the method according to the embodiments of the present invention.
The above description is only for the preferred embodiment of the present invention and is not intended to limit the scope of the present invention, and all equivalent structures or flow transformations made by the present specification and drawings, or applied directly or indirectly to other related arts, are included in the scope of the present invention.
Claims (16)
1. An application interface button display method, comprising:
receiving a button display instruction triggered by the outside on an application interface;
acquiring a preset telescopic button set container according to the button display instruction; the button set container comprises an unfolded state and a folded state; wherein, in the button collection container in the folded state, a boundary picture of an arc-shaped region of the button collection container is displayed in a visible clipping region of a canvas on the application interface display screen;
from a folding state to an unfolding state, rotating pictures and buttons of an arc-shaped area of the button collection container, which are positioned outside an invisible clipping area of a canvas on an application interface screen, into the visible clipping area of the application interface from a boundary of the application interface at a set angle, unfolding the buttons in the clipping area in the arc-shaped area, and displaying the buttons in the button collection container in the arc-shaped area; the method comprises the following steps that a button clicking event is forbidden in the process of expanding animation, and button clicking operation is allowed after a button collection container is completely expanded;
from the expansion state to fold state, will the picture in arc region and button rotation enter outside the invisible cutting region of screen canvas, and will the border picture coincidence in the arc region of button set container the visible cutting region of canvas shows on the application interface display screen the border picture.
2. The method of claim 1, wherein the buttons of the button collection container are pre-arranged in the button collection container, and wherein the step of displaying the buttons of the button collection container in the arc-shaped area comprises:
rotating the buttons arranged in the button collection container by the set angle according to the rotation direction opposite to the button collection container;
and displaying each rotated button in the arc-shaped area.
3. The method of claim 1, wherein the buttons of the button collection container are pre-overlappingly placed in the button collection container, and wherein the step of displaying the buttons of the button collection container in the arc-shaped area comprises:
sequentially unfolding all the buttons in the button set container;
rotating each unfolded button by the set angle according to the rotation direction opposite to the rotation direction of the button collection container; and displaying each rotated button in the arc-shaped area.
4. The method of claim 2 or 3, wherein the step of displaying the rotated buttons in the arc-shaped area further comprises:
correcting the rotation angle of each button to ensure that the distribution of each button in the arc-shaped area is consistent with the arc-shaped trend of the arc-shaped area;
and displaying each button after angle correction in the arc-shaped area.
5. The method of claim 1, further comprising:
receiving a click instruction of an external trigger on a button in a button collection container on the arc-shaped area;
and performing service operation of the corresponding button according to the button clicking instruction.
6. The method of claim 1, further comprising:
and unfolding the button collection container on the application interface in a transparent state.
7. The method of claim 1, further comprising:
and unfolding the button collection container in an arc-shaped area at one corner of the application interface.
8. The method of claim 1, wherein the arcuate region is sector-shaped.
9. An application interface button display apparatus, comprising:
the receiving module is used for receiving a button display instruction triggered by the outside on the application interface;
the acquisition module is used for acquiring a preset telescopic button set container according to the button display instruction; the button set container comprises an unfolded state and a folded state; wherein, in the button collection container in the folded state, a boundary picture of an arc-shaped area is displayed in a visible clipping area of a canvas on the application interface display screen;
the unfolding display module is used for rotating pictures and buttons of an arc-shaped area of the button collection container, which are positioned outside an invisible clipping area of a canvas on an application interface screen, from a folding state to an unfolding state into a visible clipping area of the application interface at a set angle from a boundary of the application interface, unfolding the buttons in the clipping area in the arc-shaped area, and displaying the buttons in the button collection container in the arc-shaped area; the method comprises the following steps that a button clicking event is forbidden in the process of expanding animation, and button clicking operation is allowed after a button collection container is completely expanded;
and the folding and packing module is used for rotating the picture and the button in the arc-shaped area to enter the outside of the invisible clipping area of the screen canvas from the unfolding state to the folding state, overlapping the boundary picture in the arc-shaped area of the button collection container, and displaying the boundary picture in the visible clipping area of the canvas on the application interface display screen.
10. The apparatus of claim 9, wherein the buttons of the button collection container are pre-arranged in the button collection container;
the unfolding display module is further used for rotating all the buttons arranged in the button collection container by the set angle according to the rotating direction opposite to that of the button collection container; and displaying each rotated button in the arc-shaped area.
11. The apparatus of claim 9, wherein each button in the button set container is pre-overlapped in the button set container;
the expansion display module is also used for sequentially expanding all the buttons in the button collection container; rotating each unfolded button by the set angle according to the rotation direction opposite to the rotation direction of the button collection container; and displaying each rotated button in the arc-shaped area.
12. The apparatus of claim 10 or 11,
the unfolding display module is also used for correcting the rotation angle of each button so that the distribution of each button in the arc-shaped area is consistent with the arc-shaped trend of the arc-shaped area; and displaying each button after angle correction in the arc-shaped area.
13. The apparatus of claim 9, further comprising: a service operation module;
the receiving module is further used for receiving a click instruction of an external trigger on a button in the button collection container on the arc-shaped area;
and the business operation module is used for carrying out business operation of the corresponding button according to the button clicking instruction.
14. The apparatus of claim 9,
the expansion display module is further used for expanding the button set container on the application interface in a transparent state.
15. The apparatus of claim 9,
the unfolding display module is further used for unfolding the button collection container in an arc-shaped area at one corner of the application interface.
16. A storage medium storing executable instructions which, when executed by a processor, implement the application interface button display method of any one of claims 1 to 8.
Priority Applications (2)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201410028424.9A CN104793876B (en) | 2014-01-21 | 2014-01-21 | Application interface button display method and device |
| PCT/CN2015/071174 WO2015110001A1 (en) | 2014-01-21 | 2015-01-21 | Method and apparatus for displaying application interface button |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201410028424.9A CN104793876B (en) | 2014-01-21 | 2014-01-21 | Application interface button display method and device |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN104793876A CN104793876A (en) | 2015-07-22 |
| CN104793876B true CN104793876B (en) | 2020-05-12 |
Family
ID=53558704
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201410028424.9A Active CN104793876B (en) | 2014-01-21 | 2014-01-21 | Application interface button display method and device |
Country Status (2)
| Country | Link |
|---|---|
| CN (1) | CN104793876B (en) |
| WO (1) | WO2015110001A1 (en) |
Families Citing this family (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105611374B (en) * | 2015-12-23 | 2019-09-17 | 北京奇虎科技有限公司 | Video playing control method and device |
| CN107977126A (en) * | 2016-10-25 | 2018-05-01 | 阿里巴巴集团控股有限公司 | A kind of function choosing-item shows method, apparatus, equipment and shows interface |
| CN107734164A (en) * | 2017-10-10 | 2018-02-23 | 广东欧珀移动通信有限公司 | Parameter setting window treating method and apparatus |
| CN109343773B (en) * | 2018-10-11 | 2021-07-09 | 广州要玩娱乐网络技术股份有限公司 | Control method and device of portable touch equipment, storage medium and terminal |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102402375A (en) * | 2010-09-15 | 2012-04-04 | 联想(北京)有限公司 | Display terminal and display method |
| CN102591577A (en) * | 2011-12-28 | 2012-07-18 | 华为技术有限公司 | Method for displaying arc-shaped menu index and relevant device |
| CN102799347A (en) * | 2012-06-05 | 2012-11-28 | 北京小米科技有限责任公司 | User interface interaction method and device for touch screen device, and touch screen device |
| CN103226446A (en) * | 2013-05-16 | 2013-07-31 | 北京奇虎科技有限公司 | Event response method for user interfacof mobile equipment and mobile equipment |
| CN103257805A (en) * | 2012-02-16 | 2013-08-21 | 腾讯科技（深圳）有限公司 | Method and device for providing shortcut panel |
Family Cites Families (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103365547A (en) * | 2012-03-28 | 2013-10-23 | 喜讯无限(北京)科技有限责任公司 | Army-knife type menu bar |
| CN103092508A (en) * | 2012-12-07 | 2013-05-08 | 北京傲游天下科技有限公司 | Touch interface implementation method and device |
-
2014
- 2014-01-21 CN CN201410028424.9A patent/CN104793876B/en active Active
-
2015
- 2015-01-21 WO PCT/CN2015/071174 patent/WO2015110001A1/en active Application Filing
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102402375A (en) * | 2010-09-15 | 2012-04-04 | 联想(北京)有限公司 | Display terminal and display method |
| CN102591577A (en) * | 2011-12-28 | 2012-07-18 | 华为技术有限公司 | Method for displaying arc-shaped menu index and relevant device |
| CN103257805A (en) * | 2012-02-16 | 2013-08-21 | 腾讯科技（深圳）有限公司 | Method and device for providing shortcut panel |
| CN102799347A (en) * | 2012-06-05 | 2012-11-28 | 北京小米科技有限责任公司 | User interface interaction method and device for touch screen device, and touch screen device |
| CN103226446A (en) * | 2013-05-16 | 2013-07-31 | 北京奇虎科技有限公司 | Event response method for user interfacof mobile equipment and mobile equipment |
Also Published As
| Publication number | Publication date |
|---|---|
| CN104793876A (en) | 2015-07-22 |
| WO2015110001A1 (en) | 2015-07-30 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN107728901B (en) | Interface display method and device and terminal | |
| CN104793876B (en) | Application interface button display method and device | |
| CN107844228B (en) | Message display method and device and terminal | |
| KR102107134B1 (en) | Method for arranging for list in flexable display an electronic device thereof | |
| EP3761161A1 (en) | Input method interface display method and device, and terminal and storage medium | |
| US20110047491A1 (en) | User interfacinig method using touch screen in mobile communication terminal | |
| CN106610821B (en) | Method for displaying picture on terminal and terminal | |
| CN107092421B (en) | Method and device for displaying control of application | |
| US20150187095A1 (en) | Method and device for implementing page mask | |
| US9529696B2 (en) | Screen bounds for view debugging | |
| TWI599944B (en) | Touch Screen Display Page Processing Method, Device and Electronic Device | |
| EP2601568A1 (en) | Advanced scrolling | |
| EP2332041A2 (en) | System and method for window resizing | |
| EP3108348A1 (en) | Graphical user interface with unfolding panel | |
| CN114924824B (en) | Visual object blurring method, visual object rendering method and computing device | |
| CN111435277A (en) | Method, device, terminal and storage medium for displaying content | |
| WO2015172553A1 (en) | Mobile terminal and wearable device | |
| CN115202773A (en) | Application interface display method and device, terminal and storage medium | |
| WO2017215542A1 (en) | Method and device for displaying image | |
| JPWO2008139551A1 (en) | Information presenting apparatus and information presenting method | |
| EP3296859A1 (en) | Image output control method, image output control program, and display device | |
| CN111448534B (en) | Terminal device, graphical user interface thereof and control method of graphical user interface | |
| CN112181257B (en) | Display method and device of mind map, terminal and storage medium | |
| CN111124246B (en) | Interface interaction method, equipment and storage medium | |
| CN108460031B (en) | Data information display method and device |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| C10 | Entry into substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |