CN111448534B - Terminal device, graphical user interface thereof and control method of graphical user interface - Google Patents
Terminal device, graphical user interface thereof and control method of graphical user interface Download PDFInfo
- Publication number
- CN111448534B CN111448534B CN201780097425.0A CN201780097425A CN111448534B CN 111448534 B CN111448534 B CN 111448534B CN 201780097425 A CN201780097425 A CN 201780097425A CN 111448534 B CN111448534 B CN 111448534B
- Authority
- CN
- China
- Prior art keywords
- user interface
- graphical user
- icon
- display
- area
- 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
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
A terminal device and a graphical user interface and a control method thereof, wherein the terminal device (100) comprises a flexible touch display screen (30) and a rotation sensor (40), the flexible touch display screen (30) displays the graphical user interface, the graphical user interface is provided with a plurality of icons, and each icon is displayed through a corresponding display attribute; the terminal device (100) further comprises a memory (20) and a processor (10), and the processor (10) realizes the following when executing the computer program stored in the memory (20): acquiring a real-time rotation angle and a rotation direction (1101) sensed by a rotation sensor (40); controlling the second coordinate system to rotate according to the rotation angle and the rotation direction, keeping the layout of the graphical user interface in the second coordinate system unchanged, and controlling the layout and the direction of the icons in the first coordinate system unchanged (1102); and in the process that the graphical user interface rotates along with the second coordinate system, determining the real-time display position of each icon on the rotating graphical user interface, and adjusting the display attribute of the icon according to the real-time display position (1103). The method can adjust the icon display attribute in real time according to the rotation angle, and the user experience is good.
Description
Technical Field
The present application relates to the field of graphical user interface control, and in particular, to a terminal device based on a flexible touch display screen, a graphical user interface thereof, and a graphical user interface control method.
Background
The flexible touch display screen is used as a new generation display screen behind the liquid crystal display screen, is made of soft materials, can be deformed and bent, and brings novel use experience to users. However, a graphical user interface control method based on a flexible touch display screen is still lacking at present.
Disclosure of Invention
The embodiment of the application discloses terminal equipment based on a flexible touch display screen, a graphical user interface of the terminal equipment and a control method of the graphical user interface, and aims to solve the problems.
The terminal device comprises a flexible touch display screen and a rotary sensor, wherein the rotary sensor senses a real-time rotation angle and a real-time rotation direction of the flexible touch display screen, the flexible touch display screen displays a graphical user interface, the graphical user interface displays a plurality of icons, and each icon is displayed through a corresponding display attribute; the terminal device further comprises a memory, a processor and a computer program stored in the memory and executable on the processor, the processor implementing, when executing the computer program: acquiring the rotation angle and the rotation direction sensed by the rotation sensor; controlling a user interface coordinate system to rotate by the rotation angle according to the rotation direction, controlling the graphical user interface to rotate along with the user interface coordinate system to keep the layout of the graphical user interface in the user interface coordinate system unchanged, and controlling all icons of the graphical user interface to be unchanged relative to the coordinates of the icon coordinate system and the display direction of the content on each icon; and in the process that the graphical user interface rotates along with the user interface coordinate system, determining the real-time display position of each icon on the rotating graphical user interface, and adjusting the display attribute of the icon according to the real-time display position.
The terminal device comprises a rotary sensor, wherein the rotary sensor senses a real-time rotation angle and a real-time rotation direction of the flexible touch display screen, the flexible touch display screen displays the graphical user interface, the graphical user interface displays a plurality of icons, and each icon is displayed through a corresponding display attribute; the graphical user interface is controlled by the processor of the terminal device and implements: when the rotation sensor senses that the flexible touch display screen rotates, the user interface coordinate system of the graphical user interface rotates by the rotation angle according to the rotation angle and the rotation direction sensed by the rotation sensor, the graphical user interface is controlled to rotate along with the user interface coordinate system, the layout of the graphical user interface in the user interface coordinate system is kept unchanged, and the coordinates of all icons of the graphical user interface relative to the icon coordinate system and the display direction of the content on each icon are controlled to be unchanged; in the process that the graphical user interface rotates along with the user interface coordinate system, the display attribute of each icon of the graphical user interface is adjusted according to the real-time display position on the rotating graphical user interface.
A graphical user interface adjusting method is applied to terminal equipment with a flexible touch display screen, the terminal equipment comprises a rotation sensor, the rotation sensor senses a real-time rotation angle and a real-time rotation direction of the flexible touch display screen, the flexible touch display screen displays a graphical user interface, the graphical user interface displays a plurality of icons, and each icon is displayed through a corresponding display attribute; the graphical user interface adjusting method comprises the following steps: acquiring the rotation angle and the rotation direction sensed by the rotation sensor; controlling a user interface coordinate system to rotate by the rotation angle according to the rotation direction, controlling the graphical user interface to rotate along with the user interface coordinate system to keep the layout of the graphical user interface in the user interface coordinate system unchanged, and controlling all icons of the graphical user interface to be unchanged relative to the coordinates of the icon coordinate system and the display direction of the content on each icon; and in the process that the graphical user interface rotates along with the user interface coordinate system, determining the real-time display position of each icon on the rotating graphical user interface, and adjusting the display attribute of the icon according to the real-time display position.
The flexible touch display screen of the terminal equipment displays a graphical user interface, the graphical user interface is provided with a plurality of icons, and each icon is displayed through a corresponding display attribute. The processor thereby acquiring a real-time rotation angle and rotation direction sensed by the rotation sensor; and controlling the user interface coordinate system to rotate around the rotation angle and the rotation direction, keeping the layout of the graphical user interface in the user interface coordinate system unchanged, and controlling the coordinates of all the icons in the icon coordinate system and the display direction of the content on each icon unchanged. And in the process that the graphical user interface rotates along with the user interface coordinate system, determining the real-time display position of each icon on the rotating graphical user interface, and adjusting the display attribute of each icon according to the real-time display position, so that more dynamic interactive experience is achieved.
Drawings
In order to more clearly illustrate the technical solutions in the embodiments of the present application, the drawings needed to be used in the embodiments will be briefly described below, and it is obvious that the drawings in the following description are only some embodiments of the present application, and it is obvious for those skilled in the art to obtain other drawings without creative efforts.
Fig. 1 is a block diagram schematically illustrating modules of a terminal device in an embodiment of the present application.
Fig. 2 is a schematic front view of the terminal device after being fully unfolded in an embodiment of the present application.
Fig. 3 is a schematic perspective view of a folding process of a terminal device in an embodiment of the present application.
Fig. 4 is a perspective view of the terminal device in an embodiment of the present application after being completely folded.
Fig. 5 is a side view of the terminal device in an embodiment of the present application after being completely folded.
Fig. 6 is a rear schematic view of the terminal device in an embodiment of the present application after being completely folded.
Fig. 7 is a schematic diagram of a first rotation state of the terminal device in a fully folded state according to an embodiment of the present application.
Fig. 8 is a schematic diagram of a second rotation state of the terminal device in a fully folded state according to an embodiment of the present application.
Fig. 9 is a schematic diagram of a third rotation state of the terminal device in a fully folded state in an embodiment of the present application.
Fig. 10 is a diagram illustrating a fourth rotation state of the terminal device in a fully folded state according to an embodiment of the present application.
Fig. 11 is a flowchart of a gui control method of a terminal device in an embodiment of the present application.
Detailed Description
The technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the drawings in the embodiments of the present application, and it is obvious that the described embodiments are only a part of the embodiments of the present application, and not all of the embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present application.
Referring to fig. 1, a block diagram of a terminal device 100 according to an embodiment of the present application is shown. The terminal device 100 may be, but is not limited to, a mobile phone, a tablet computer, an electronic reader, a wearable electronic device, and the like, and is not limited herein. The terminal device 100 includes, but is not limited to, a processor 10, and a memory 20, a flexible touch display 30 and a rotation sensor 40 electrically connected to the processor 10, respectively. It should be understood by those skilled in the art that fig. 1 is only an example of the terminal device 100 and does not constitute a limitation to the terminal device 100, and the terminal device 100 may include more or less components than those shown in fig. 1, or combine some components, or different components, for example, the terminal device 100 may further include an input and output device, a network access device, a data bus, etc.
The Processor 10 may be a Central Processing Unit (CPU), other general purpose Processor, a Digital Signal Processor (DSP), an Application Specific Integrated Circuit (ASIC), an off-the-shelf Programmable Gate Array (FPGA) or other Programmable logic device, discrete Gate or transistor logic device, discrete hardware component, etc. A general-purpose processor may be a microprocessor or the processor may be any conventional processor or the like, the processor being the control center of the terminal device 100 and connecting the various parts of the whole terminal device 100 with various interfaces and lines.
The memory 20 may be used to store the computer programs and/or modules, and the processor 10 implements various functions of the terminal device 100 by running or executing the computer programs and/or modules stored in the memory 20 and calling data stored in the memory 20. The memory 20 may mainly include a program storage area and a data storage area, wherein the program storage area may store an operating system, application programs (such as a sound playing function, an image playing function, etc.) required by a plurality of functions, and the like; the storage data area may store data (such as audio data, a phonebook, etc.) created according to the use of the cellular phone, and the like. In addition, the memory 20 may include a high speed random access memory, and may also include a non-volatile memory, such as a hard disk, a memory, a plug-in hard disk, a Smart Media Card (SMC), a Secure Digital (SD) Card, a Flash memory Card (Flash Card), a plurality of magnetic disk storage devices, a Flash memory device, or other volatile solid state storage devices.
Referring to fig. 2, the flexible touch display screen 30 has a folding area 31. The flexible touch display screen 30 can be folded along a fold line 37 within the fold region 31. It is understood that, in the present embodiment, there are two folding regions 31. The two folding areas 31 are disposed on both sides of the touch display screen 30. Referring to fig. 3, the flexible touch display screen 30 is divided into a main screen 33 and two auxiliary screens 35 along the folding area 31. The two auxiliary screens 35 are respectively located on both sides of the main screen 33. Referring to fig. 4, when the two auxiliary screens 35 are completely folded along the corresponding folding regions 31, the two auxiliary screens 35 are located on the back of the main screen 33. It is understood that the position of the folding area 31 can be set according to actual needs, but needs to be set before factory shipment. The two auxiliary screens 35 respectively correspond to the folding area 31, and when the folding area 31 is folded to a completely folded state, the folding area 31 is in a semicircular shape. It is understood that in other embodiments, the fold region 31 may take other suitable shapes. The number of the folding areas 31 may be one or more, and the flexible touch display screen 30 is divided into a main screen 33 and one or more auxiliary screens 35. And are not limited herein.
Referring to fig. 3 and fig. 4, in the present embodiment, in the folded state of the flexible touch display screen 30, the two auxiliary screens 35 cannot respond to the touch operation of the user thereon, and only the main screen 33 responds to the touch operation of the user thereon. It is understood that in other embodiments, the two auxiliary screens 35 can also respond to the touch operation of the user on the flexible touch display screen 30 in the folded state. It can be understood that the "folded state" means that the folding angle of the auxiliary screen 35 relative to the main screen 33 is greater than 0 degree, wherein when the folding angle is 0 degree, the auxiliary screen 35 and the main screen 33 are completely unfolded, when the folding angle is 180 degrees, the auxiliary screen 35 completely covers the main screen 33, and when the folding angle is in an interval greater than 0 degree and less than 180 degrees, the folding angle all belongs to the folded state. Wherein the folding angle can be obtained according to an angle sensor (not shown) disposed at the folding area 31.
Referring again to fig. 1 and 2, the processor 10 controls the flexible touch display 30 to display a graphical user interface 50 by running or executing computer programs and/or modules stored in the memory 20. The graphic user interface 50 is a window through which a user performs various interactions with the terminal device 100. The graphical user interface 50 has a plurality of icons 51 thereon. Specifically, referring to fig. 3, fig. 4, fig. 5, and fig. 6, an area of the gui 50 corresponding to the main screen 33 is a main screen area 501, an area of the gui 50 corresponding to each auxiliary screen 35 is an auxiliary screen area 503, and an area of the gui 50 corresponding to each folding area 31 is a folding area 505. Preferably, referring again to FIG. 2, the graphical user interface 50 has a display band 53. The display band 53 penetrates the gui 50 along a length direction of the gui 50, and a width of the display band 53 is smaller than a width of the gui 50. Further preferably, for better visual experience, the display band 53 is disposed at an approximately middle upper position of the graphical user interface 50 in a width direction of the graphical user interface 50. In particular, said plurality of icons 51 is arranged within said display band 53 and, in any case, said plurality of icons 51 is located within said display band 53. The plurality of icons 51 are circular in shape with different sizes, respectively. It is understood that in other embodiments, the icons 51 can be in other suitable shapes, such as oval, polygon, square, etc., which are not limited herein and can be set according to actual needs. Among the plurality of icons 51, the icons 51 having a smaller size are clustered around the icon 51 having a larger size, and the "smaller size" means that the area of the icon is smaller than that of the icon having a larger size. The plurality of icons 51 are disposed substantially uniformly spaced within the display band 53. The plurality of icons 51 are display icons of application programs installed in the terminal device 100, and a user clicks any one of the icons 51 through the flexible touch display screen 30 to start the application program corresponding to the icon 51. The plurality of icons 51 may be various application icons, such as communication application icons, which may include but are not limited to a call application icon, a short message application icon, and an instant message application icon, which may include but is not limited to: a QQ application icon, a WeChat application icon, a microblog application icon, and the like.
Each icon 51 is displayed by a corresponding display attribute. The display attributes include, but are not limited to, at least one of display size, transparency, and icon arrangement density. The "display size" refers to the display area of the icon 51 displayed on the gui 50, and includes a fixed size and a relative size after zooming from the fixed size, wherein the relative size can be larger or smaller than the fixed size, depending on whether the zoomed size is zoomed or scaled relative to the fixed size and the ratio of the zoomed size and the zoomed/zoomed size. For example, a relative size of a magnification ratio of 20% is smaller than a relative size of a magnification ratio of 50%. The "transparency" refers to the transparency of the icon 51 displayed on the gui 50, wherein a transparency of 0% indicates that the icon 51 is not transparent, and a transparency of 100% indicates that the icon 51 is completely transparent. The "icon arrangement density" refers to the number of icons arranged in a unit area in a certain area on the gui 50, and includes the icon arrangement density in the main screen area 501 and the icon arrangement density in the auxiliary screen area 503.
The display attributes include a first display attribute and a second display attribute. The first display attribute and the second display attribute respectively include but are not limited to at least one of display size, transparency and icon arrangement density. The processor 10 controls the icons 51 located in the home screen area 501 of the graphical user interface 50 to be displayed with the first display attribute. The processor 10 controls the icon 51 located in the secondary screen area 503 of the gui 50 to be displayed with the second display attribute. Wherein the first display attribute is maintained at a substantially constant value. The second display attribute varies as the secondary screen 35 is folded toward the primary screen 33. When the main screen 33 and the auxiliary screen 35 are completely folded, the difference between the first display attribute and the second display attribute is the largest and is greater than a preset value. The specific differences are as follows: the display size, transparency, and icon arrangement density are different. The first display attribute is large in display size, small in transparency and small in icon arrangement density. The second display attribute has small display size, large transparency and large icon arrangement density. In the process of unfolding the flexible touch display screen 30, the attribute value of the second display attribute approaches to the attribute value of the first display attribute. When the flexible touch display screen 30 is completely unfolded, the attribute values of the first display attribute and the second display attribute are completely the same.
Referring also to fig. 7, the flexible touch display 30 is in a fully folded state. The main screen 33 includes two opposite long sides and two opposite short sides. In a normal holding state, when the two long sides are located at the left and right sides of the main screen 33, the main screen 33 is in a vertical screen state, as shown in fig. 7; when the two long sides are located at the upper and lower sides of the main screen 33, the main screen 33 is in a landscape state, as shown in fig. 10. For convenience of description, an icon coordinate system 200 and a user interface coordinate system 300 are defined. The icon coordinate system 200 takes the central point of the display band 53 as the origin of coordinates, and extends rightward from the central point to form the X-axis of the icon coordinate system 200 and extends upward to form the Y-axis of the icon coordinate system 200. The user interface coordinate system 300 uses the lower left corner of the flexible touch display screen 30 as the origin of coordinates, and extends from the origin of coordinates to the horizontal side to form the X-axis and extends to the vertical side to form the Y-axis.
When the terminal device 100 is rotated in a predetermined direction, the rotation sensor 40 senses a real-time rotation angle and a rotation direction of the flexible terminal device 100. Alternatively, the rotation sensor 40 senses the rotation speed of the terminal device 100. Specifically, in the present embodiment, the rotation sensor 40 is a gyroscope. It is understood that in other embodiments, the rotation sensor 40 is other suitable measuring device capable of measuring the rotation angle, the rotation direction and the rotation speed.
The processor 10 obtains the rotation angle and the rotation direction sensed by the rotation sensor 40, and controls the user interface coordinate system 300 to rotate around the coordinate origin thereof by the rotation angle according to the rotation angle and the rotation direction, and controls the gui 50 to rotate along with the user interface coordinate system 300 while maintaining the layout of the gui 50 in the user interface coordinate system 300. The layout refers to coordinate values of points on the boundary of the graphical user interface 50 in the user interface coordinate system 300. Optionally, the processor 10 obtains the rotational speed and controls the rotational speed of the user interface coordinate system 300 about its origin of coordinates. With the rotation of the terminal device 100, the flexible touch display screen 30 may rotate from the vertical screen state to the horizontal screen state, or from the horizontal screen state to the vertical screen state. When the flexible touch display screen 30 rotates from the vertical screen state to the horizontal screen state, the processor 10 controls the graphical user interface 50 to switch from the vertical screen display to the horizontal screen display. When the flexible touch display screen 30 rotates from the landscape screen state to the portrait screen state, the processor 10 controls the graphical user interface 50 to switch from the landscape screen display to the portrait screen display.
In the process of controlling the user interface coordinate system 300 to rotate, the processor 10 controls the icon coordinate system 200 not to rotate, and controls the coordinates of the display band 53 and all the icons 51 of the graphical user interface 50 in the icon coordinate system 200 and the display direction of the content on each icon to be unchanged.
The processor 10 controls the user interface coordinate system 300 to rotate by the rotation angle around its origin of coordinates according to the rotation direction, and controls the graphical user interface 50 to follow the rotation of the user interface coordinate system 300 while keeping the layout of the graphical user interface 50 within the user interface coordinate system 300 unchanged. In addition, the processor 10 determines a real-time display position of each icon 51 on the gui 50 on the rotated gui 50 when the gui 50 is rotated, and adjusts a display attribute of each icon 51 according to the real-time display position.
As shown in fig. 7, when the flexible touch display screen 30 is in a fully folded state and in a vertical screen state, the icons 51 on the graphical user interface 50 are distributed on the main screen area 501, the auxiliary screen area 503, and the folding area 505, respectively.
Referring to fig. 8, 9 and 10, coordinates of the display band 53 in the icon coordinate system 200 remain unchanged during the rotation of the gui 50, an overlapping area between the main screen area 501 and the display band 53 increases during the gradual rotation of the flexible touch display screen 30 from the portrait screen state to the landscape screen state, and an overlapping area between the main screen area 501 and the display band 53 is the largest when the flexible touch display screen 30 is in the landscape screen state. When the flexible display screen 30 is in the vertical screen state, the overlapping area of the main screen area 501 and the display band 53 is the lowest. Since the icons on the gui 50 are all displayed in the display band 53, when the flexible touch display screen 30 gradually rotates from the vertical screen state to the horizontal screen state, the icons 51 originally located on the auxiliary screen area 503 and the folding area 505 gradually enter the main screen area 501 along with the increase of the overlapping area between the main screen area 501 and the display band 53. When the flexible touch display screen 30 is in the landscape state, all the icons 51 on the gui 50 are displayed on the main screen area 503.
Specifically, the processor 10 determines in advance that the icon 51 in the home screen area 501, whose real-time display position is still in the home screen area 501 after the graphical user interface 50 is rotated by a predetermined angle, is a first target icon, for example, an E icon, and controls the first target icon to be displayed according to the first display attribute. The predetermined angle may be 5 degrees, 10 degrees, etc., and may be set according to actual needs, which is not limited herein.
Specifically, the processor 10 determines that the icon 51 whose real-time display position will not be in the secondary screen area 503 after the graphical user interface 50 is rotated by a predetermined angle within the secondary screen area 503 is a second target icon, such as the B icon. During the continued rotation of the graphical user interface 50, the processor 10 controls the second target icon to flow from the secondary screen area 503 to the collapse area 505 or to flow to the primary screen area 501 via the collapse area 505. When the second target icon flows from the secondary screen area 503 to the folding area 505, the processor 10 adjusts the display attribute of the second target icon according to the real-time display position of the second target icon. When the second target icon continues to flow from the folding area 505 to the home screen area 501, the processor 10 adjusts the display attribute in real time according to the change of the real-time display position of the second target icon in the process of flowing to the home screen area 501, so that the attribute value approaches the first display attribute, until the display attribute of the second target icon is consistent with the first display attribute when the second target icon flows to the home screen area 501.
When the flexible touch display screen 30 is rotated from the landscape screen state to the portrait screen state, the icons 51 on the gui 50 flow from the main screen area 501 to the main screen area 501, the auxiliary screen area 503 and the folding area 505, respectively.
Specifically, the processor 10 determines that the icon 51 within the home screen area 501 whose real-time display position will not be in the home screen area 501 after the graphical user interface 50 is rotated by a predetermined angle is a third target icon, such as icon B. During the continued rotation of the graphical user interface 50, the processor 10 controls the third target icon to flow from the main screen area 501 to the collapse area 505 or to flow via the collapse area 505 to the secondary screen area 503. When the third target icon flows from the main screen area 501 to the folding area 505, the processor 10 adjusts its display attribute according to the real-time display position of the third target icon. When the third target icon continues to flow from the folding area 505 to the secondary screen area 503, the processor 10 adjusts the display attribute in real time according to the change of the real-time display position of the third target icon in the process of flowing to the secondary screen area 503, so that the attribute value approaches the second display attribute, until the display attribute of the third target icon is consistent with the second display attribute when the third target icon flows to the secondary screen area 503.
It is understood that the flowing to the folding region 505 may be that the circumferential edge of the icon 51 coincides with a certain point in the folding region 505, or that the center of the icon 51 coincides with a certain point in the folding region 505, which may be specifically set according to actual needs, and is not limited herein.
It is understood that in other embodiments, when the flexible touch display 30 rotates in the fully unfolded state, the flow process and display properties of the icons 51 on the gui 50 are the same as the above-mentioned change process of the flexible touch display 30 in the folded state.
Please refer to fig. 11, which is a flowchart illustrating a gui control method according to an embodiment of the present application. The gui control method is applied to the terminal device 100 described above, and the execution sequence is not limited to the sequence shown in fig. 11. The terminal device 100 includes a processor 10, a flexible touch display 30 and a rotation sensor 40, where the processor 10 controls the flexible touch display 30 to display a graphical user interface 50, a plurality of icons 51 are displayed on the graphical user interface 50, and each icon 51 is displayed according to a corresponding display attribute. The display attributes include, but are not limited to, at least one of display size, transparency, and icon arrangement density. The rotation sensor 40 senses a real-time rotation angle and a rotation direction of the flexible touch display screen. Optionally, the rotation sensor 40 senses a rotation speed of the flexible touch display screen. The method comprises the following steps:
Specifically, the processor 10 controls the user interface coordinate system 300 to rotate by the rotation angle around the coordinate origin thereof according to the rotation angle and the rotation direction, keeps the layout of the graphical user interface 50 in the user interface coordinate system 300 unchanged, and controls the coordinates of the display band 53 and the icons 51 with respect to the icon coordinate system 200 and the display direction of the content on each icon unchanged.
Specifically, the processor 10 determines that the icon 51 in the home screen area 501, whose real-time display position is still in the home screen area 501 after the graphical user interface 50 is rotated by a predetermined angle, is a first target icon, for example, an E icon, and controls the first target icon to be displayed according to the first display attribute.
Specifically, the processor 10 determines that the icon 51 whose real-time display position will not be in the secondary screen area 503 after the graphical user interface 50 is rotated by a predetermined angle within the secondary screen area 503 is a second target icon, such as the B icon. During the continued rotation of the graphical user interface 50, the processor 10 controls the second target icon to flow from the secondary screen area 503 to the collapse area 505 or to flow to the primary screen area 501 via the collapse area 505. When the second target icon flows from the secondary screen area 503 to the folding area 505, the processor 10 adjusts the display attribute of the second target icon according to the real-time display position of the second target icon. When the second target icon continues to flow from the folding area 505 to the home screen area 501, the processor 10 adjusts the display attribute in real time to make the attribute value approach the first display attribute when the real-time display position of the second target icon changes in the process of flowing to the home screen area 501, until the display attribute of the second target icon is consistent with the first display attribute when the second target icon flows to the home screen area 501.
Specifically, the processor 10 determines that the icon 51 within the home screen area 501 whose real-time display position will not be in the home screen area 501 after the graphical user interface 50 is rotated by a predetermined angle is a third target icon, such as icon B. During the continued rotation of the graphical user interface 50, the processor 10 controls the third target icon to flow from the main screen area 501 to the collapse area 505 or to flow via the collapse area 505 to the secondary screen area 503. When the third target icon flows from the main screen area 501 to the folding area 505, the processor 10 adjusts its display attribute according to the real-time display position of the third target icon. When the third target icon continues to flow from the folding area 505 to the secondary screen area 503, the processor 10 adjusts the display attribute in real time according to the change of the real-time display position of the third target icon in the process of flowing to the secondary screen area 503, so that the attribute value approaches the second display attribute, until the display attribute of the third target icon is consistent with the second display attribute when the third target icon flows to the secondary screen area 503.
In some embodiments, the present application further provides a computer-readable storage medium, in which program instructions are stored, and the program instructions are used by the processor 10 to execute any method step of fig. 11 after being called and executed, so as to obtain the real-time rotation angle and rotation direction sensed by the rotation sensor 40; and controlling the user interface coordinate system 300 to rotate around and keep the layout of the graphical user interface 50 in the user interface coordinate system 300 unchanged according to the rotation angle and the rotation direction, and controlling the coordinates of all the icons 51 in the icon coordinate system 200 and the display direction of the content on each icon unchanged. In the process that the gui 50 rotates along with the ui coordinate system 300, a real-time display position of each icon 51 on the rotated gui 50 is determined, and a display attribute of each icon 51 is adjusted according to the real-time display position. In some embodiments, the computer storage medium is the memory 20, and may be any storage device capable of storing information, such as a memory card, a solid-state memory, a micro hard disk, an optical disk, and the like.
The flexible touch display screen 30 of the terminal device 100 of the present application displays a graphical user interface 50, the graphical user interface 50 has a plurality of icons 51 thereon, and each icon 51 is displayed by a corresponding display attribute. The processor 10 thus obtains the real-time rotation angle and rotation direction sensed by the rotation sensor 40; and controlling the user interface coordinate system 300 to rotate around and keep the layout of the graphical user interface 50 in the user interface coordinate system 300 unchanged according to the rotation angle and the rotation direction, and controlling the coordinates of all the icons 51 in the icon coordinate system 200 and the display direction of the content on each icon unchanged. In the process that the gui 50 rotates along with the ui coordinate system 300, a real-time display position of each icon 51 on the rotated gui 50 is determined, and a display attribute of each icon 51 is adjusted according to the real-time display position. Therefore, when the icon 51 is close to the edge of the folding area 505 on the main screen area 501, the icon 51 becomes smaller and denser and becomes transparent, and when the icon 51 is close to the edge of the folding area 505 on the auxiliary screen area 503, the icon 51 becomes larger and thinner and becomes opaque, so that a more dynamic interactive experience is provided for a user.
It should be noted that, for simplicity of description, the above-mentioned embodiments of the method are described as a series of acts or combinations, but those skilled in the art should understand that the present application is not limited by the order of acts described, as some steps may be performed in other orders or simultaneously according to the present application. Further, those skilled in the art should also appreciate that the embodiments described in the specification are preferred embodiments and that the acts and modules referred to are not necessarily required in this application.
In the above embodiments, the descriptions of the respective embodiments have respective emphasis, and for parts that are not described in detail in a certain embodiment, reference may be made to related descriptions of other embodiments.
The steps in the method of the embodiment of the application can be sequentially adjusted, combined and deleted according to actual needs.
It will be understood by those skilled in the art that all or part of the processes of the methods of the embodiments described above can be implemented by a computer program, which can be stored in a computer-readable storage medium, and when executed, can include the processes of the embodiments of the methods described above. The storage medium may be a magnetic disk, an optical disk, a Read-Only Memory (ROM), a Random Access Memory (RAM), or the like.
The foregoing detailed description of the embodiments of the present application has been presented to illustrate the principles and embodiments of the present application, and the above description of the embodiments is only provided to help understand the method and the core concept of the present application; meanwhile, for a person skilled in the art, according to the idea of the present application, there may be variations in the specific embodiments and the application scope, and in summary, the content of the present specification should not be construed as a limitation to the present application.
Claims (12)
1. A terminal device comprises a flexible touch display screen and a rotation sensor, wherein the rotation sensor senses a real-time rotation angle and a real-time rotation direction of the terminal device, the flexible touch display screen displays a graphical user interface, the graphical user interface displays a plurality of icons, and each icon is displayed through a corresponding display attribute; the terminal device is characterized in that the flexible touch display screen is provided with a folding area, the folding area divides the flexible touch display screen into a main screen and an auxiliary screen, an area of the graphical user interface corresponding to the main screen is a main screen area, an area of the graphical user interface corresponding to the auxiliary screen is an auxiliary screen area, an area of the graphical user interface corresponding to the folding area is a folding area, the display attributes comprise a first display attribute and a second display attribute, the terminal device further comprises a memory, a processor and a computer program which is stored in the memory and can run on the processor, and the processor executes the computer program to realize:
controlling the icons in the main screen area to be displayed by adopting the first display attribute, and controlling the icons in the auxiliary screen area to be displayed by adopting the second display attribute by the processor;
acquiring the rotation angle and the rotation direction sensed by the rotation sensor;
controlling a user interface coordinate system to rotate by the rotation angle according to the rotation direction, controlling the graphical user interface to rotate along with the user interface coordinate system to keep the layout of the graphical user interface in the user interface coordinate system unchanged, and controlling all icons of the graphical user interface to be unchanged relative to the coordinates of the icon coordinate system and the display direction of the content on each icon;
in the process that the graphical user interface rotates along with the user interface coordinate system, determining the real-time display position of each icon on the rotating graphical user interface, and adjusting the display attribute of the icon according to the real-time display position;
determining that the icon which is displayed in the auxiliary screen area before rotation and is not positioned in the auxiliary screen area after rotation by a preset angle is a second target icon, and when the second target icon flows from the auxiliary screen area to the folding area and/or the main screen area, adjusting the display attribute according to the real-time display position of the second target icon to enable the display attribute value to approach the first display attribute until the second target icon flows to the main screen area, wherein the display attribute of the second target icon is consistent with the first display attribute.
2. The terminal device of claim 1, wherein the processor, when executing the computer program, implements: and determining that the icon which is in the main screen area and the real-time display position of the graphical user interface is still in the main screen area after the graphical user interface rotates by a preset angle is a first target icon, and controlling the first target icon to be displayed according to the first display attribute.
3. The terminal device of claim 1, wherein the processor, when executing the computer program, implements: determining that the icon which is in the main screen area and is not in the main screen area at the real-time display position after the graphical user interface rotates by the preset angle is a third target icon, and controlling the third target icon to flow from the main screen area to the folding area, and adjusting the display attribute of the third target icon according to the real-time display position of the third target icon.
4. The terminal device of claim 3, wherein the processor, when executing the computer program, implements: and adjusting the display attribute of the third target icon in real time according to the change of the real-time display position of the third target icon in the process of flowing the third target icon to the auxiliary screen area, so that the attribute value approaches the second display attribute, and the display attribute of the third target icon is consistent with the second display attribute until the third target icon flows to the auxiliary screen area.
5. A graphical user interface on a terminal device with a flexible touch display screen, the terminal device comprising a rotation sensor, the rotation sensor sensing a real-time rotation angle and a real-time rotation direction of the flexible touch display screen, the flexible touch display screen displaying the graphical user interface, the graphical user interface displaying a plurality of icons, each icon being displayed by a corresponding display attribute; the flexible touch display screen is characterized by comprising a folding area, wherein the folding area divides the flexible touch display screen into a main screen and an auxiliary screen, an area of the graphic user interface corresponding to the main screen is a main screen area, an area of the graphic user interface corresponding to the auxiliary screen is an auxiliary screen area, an area of the graphic user interface corresponding to the folding area is a folding area, the display attributes comprise a first display attribute and a second display attribute, and the graphic user interface is controlled and realized by a processor of the terminal device:
controlling the icons in the main screen area to be displayed by adopting the first display attribute, and controlling the icons in the auxiliary screen area to be displayed by adopting the second display attribute;
when the rotation sensor senses that the flexible touch display screen rotates, the user interface coordinate system of the graphical user interface rotates by the rotation angle according to the rotation angle and the rotation direction sensed by the rotation sensor, the graphical user interface is controlled to rotate along with the user interface coordinate system, the layout of the graphical user interface in the user interface coordinate system is kept unchanged, and the coordinates of all icons of the graphical user interface relative to the icon coordinate system and the display direction of the content on each icon are controlled to be unchanged;
in the process that the graphical user interface rotates along with the user interface coordinate system, the display attribute of each icon of the graphical user interface is adjusted according to the real-time display position on the rotating graphical user interface;
determining that the icon which is displayed in the auxiliary screen area before rotation and is not positioned in the auxiliary screen area after rotation by a preset angle is a second target icon, and when the second target icon flows from the auxiliary screen area to the folding area and/or the main screen area, adjusting the display attribute according to the real-time display position of the second target icon to enable the display attribute value to approach the first display attribute until the second target icon flows to the main screen area, wherein the display attribute of the second target icon is consistent with the first display attribute.
6. The graphical user interface of claim 5, controlled by a processor of the terminal device and implementing: and determining the icon which is in the main screen area and the real-time display position of the graphical user interface is still in the main screen area after the graphical user interface rotates by a preset angle as a first target icon, and controlling the first target icon to be displayed according to the first display attribute.
7. A graphical user interface as recited in claim 5, wherein said graphical user interface is controlled by a processor of said terminal device and implements: determining that the icon which is in the main screen area and is not in the main screen area at the real-time display position after the graphical user interface rotates by the preset angle is a third target icon, and controlling the third target icon to flow from the main screen area to the folding area, and adjusting the display attribute of the third target icon according to the real-time display position of the third target icon.
8. A graphical user interface as recited in claim 7, wherein said graphical user interface is controlled by a processor of said terminal device and implements: and adjusting the display attribute of the third target icon in real time according to the change of the real-time display position of the third target icon in the process of flowing the third target icon to the auxiliary screen area, so that the attribute value approaches the second display attribute, and the display attribute of the third target icon is consistent with the second display attribute until the third target icon flows to the auxiliary screen area.
9. A graphical user interface adjusting method is applied to terminal equipment with a flexible touch display screen, the terminal equipment comprises a rotation sensor, the rotation sensor senses a real-time rotation angle and a real-time rotation direction of the flexible touch display screen, the flexible touch display screen displays a graphical user interface, the graphical user interface displays a plurality of icons, and each icon is displayed through a corresponding display attribute; the method is characterized in that the flexible touch display screen is provided with a folding area, the folding area divides the flexible touch display screen into a main screen and an auxiliary screen, an area of the graphical user interface corresponding to the main screen is a main screen area, an area of the graphical user interface corresponding to the auxiliary screen is an auxiliary screen area, an area of the graphical user interface corresponding to the folding area is a folding area, the display attributes comprise a first display attribute and a second display attribute, and the graphical user interface adjusting method comprises the following steps:
controlling the icons in the main screen area to be displayed by adopting the first display attribute, and controlling the icons in the auxiliary screen area to be displayed by adopting the second display attribute;
acquiring the rotation angle and the rotation direction sensed by the rotation sensor;
controlling a user interface coordinate system to rotate by the rotation angle according to the rotation direction, controlling the graphical user interface to rotate along with the user interface coordinate system to keep the layout of the graphical user interface in the user interface coordinate system unchanged, and controlling the layout of all icons of the graphical user interface relative to the icon coordinate system and the display direction of the content on each icon to be unchanged;
in the process that the graphical user interface rotates along with the user interface coordinate system, determining the real-time display position of each icon on the rotating graphical user interface, and adjusting the display attribute of the icon according to the real-time display position;
determining that the icon which is displayed in the auxiliary screen area before rotation and is not positioned in the auxiliary screen area after rotation by a preset angle is a second target icon, and when the second target icon flows from the auxiliary screen area to the folding area and/or the main screen area, adjusting the display attribute according to the real-time display position of the second target icon to enable the display attribute value to approach the first display attribute until the second target icon flows to the main screen area, wherein the display attribute of the second target icon is consistent with the first display attribute.
10. A graphical user interface adjustment method according to claim 9, characterized in that it comprises: and determining the icon which is in the main screen area and the real-time display position of the graphical user interface is still in the main screen area after the graphical user interface rotates by a preset angle as a first target icon, and controlling the first target icon to be displayed according to the first display attribute.
11. A graphical user interface adjustment method according to claim 9, characterized in that it comprises: determining that the icon which is in the main screen area and is not in the main screen area at the real-time display position after the graphical user interface rotates by the preset angle is a third target icon, and controlling the third target icon to flow from the main screen area to the folding area, and adjusting the display attribute of the third target icon according to the real-time display position of the third target icon.
12. A graphical user interface adjustment method according to claim 11, characterized in that the graphical user interface adjustment method comprises: and adjusting the display attribute of the third target icon in real time according to the change of the real-time display position of the third target icon in the process of flowing the third target icon to the auxiliary screen area, so that the attribute value approaches the second display attribute, and the display attribute of the third target icon is consistent with the second display attribute until the third target icon flows to the auxiliary screen area.
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| PCT/CN2017/119142 WO2019127158A1 (en) | 2017-12-27 | 2017-12-27 | Terminal device, graphical user interface thereof, and control method for graphical user interface |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN111448534A CN111448534A (en) | 2020-07-24 |
| CN111448534B true CN111448534B (en) | 2022-03-29 |
Family
ID=67062831
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201780097425.0A Active CN111448534B (en) | 2017-12-27 | 2017-12-27 | Terminal device, graphical user interface thereof and control method of graphical user interface |
Country Status (2)
| Country | Link |
|---|---|
| CN (1) | CN111448534B (en) |
| WO (1) | WO2019127158A1 (en) |
Families Citing this family (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113383291A (en) * | 2019-08-15 | 2021-09-10 | 深圳市柔宇科技股份有限公司 | Screen control method, flexible electronic device and computer readable storage medium |
| CN115167616B (en) * | 2022-06-07 | 2023-05-30 | 荣耀终端有限公司 | Display control method and device |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101369210A (en) * | 2008-08-22 | 2009-02-18 | 深圳华为通信技术有限公司 | Method and device for regulating user interface element |
| CN104823134A (en) * | 2012-10-05 | 2015-08-05 | 三星电子株式会社 | Flexible display apparatus and flexible display apparatus controlling method |
| CN105739813A (en) * | 2014-12-29 | 2016-07-06 | 三星电子株式会社 | User terminal device and control method thereof |
| CN105843464A (en) * | 2014-09-18 | 2016-08-10 | Lg电子株式会社 | Mobile terminal and method for controlling the same |
Family Cites Families (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20150253884A1 (en) * | 2014-03-04 | 2015-09-10 | Sung Jae Hwang | Determination of bezel area on flexible display |
| KR20160013748A (en) * | 2014-07-28 | 2016-02-05 | 엘지전자 주식회사 | Protable electronic device and control method thereof |
-
2017
- 2017-12-27 WO PCT/CN2017/119142 patent/WO2019127158A1/en active Application Filing
- 2017-12-27 CN CN201780097425.0A patent/CN111448534B/en active Active
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101369210A (en) * | 2008-08-22 | 2009-02-18 | 深圳华为通信技术有限公司 | Method and device for regulating user interface element |
| CN104823134A (en) * | 2012-10-05 | 2015-08-05 | 三星电子株式会社 | Flexible display apparatus and flexible display apparatus controlling method |
| CN105843464A (en) * | 2014-09-18 | 2016-08-10 | Lg电子株式会社 | Mobile terminal and method for controlling the same |
| CN105739813A (en) * | 2014-12-29 | 2016-07-06 | 三星电子株式会社 | User terminal device and control method thereof |
Also Published As
| Publication number | Publication date |
|---|---|
| CN111448534A (en) | 2020-07-24 |
| WO2019127158A1 (en) | 2019-07-04 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN107728901B (en) | Interface display method and device and terminal | |
| US10331394B1 (en) | Manipulating shared screen content | |
| US11138912B2 (en) | Dynamic screen modes on a bendable computing device | |
| US20150227166A1 (en) | User terminal device and displaying method thereof | |
| JP2019511029A (en) | Display method and terminal | |
| KR101975049B1 (en) | Method and apparatus for setting background of ui control, and terminal | |
| US20150063785A1 (en) | Method of overlappingly displaying visual object on video, storage medium, and electronic device | |
| US20190012821A1 (en) | Displaying images associated with apps based on app processing task progress statuses | |
| CN110209326B (en) | Screenshot method and device, folding screen device and storage medium | |
| CN107357501B (en) | Desktop wallpaper updating method and device and terminal | |
| US20230325062A1 (en) | Method for adjusting interface display state, and electronic device | |
| WO2020061783A1 (en) | Bendable electronic device and interface adaptation method thereof | |
| AU2021225277B2 (en) | Image cropping method and apparatus, and device and storage medium | |
| CN111448534B (en) | Terminal device, graphical user interface thereof and control method of graphical user interface | |
| WO2018226989A1 (en) | Displaying images associated with apps based on app processing task progress statuses | |
| EP3358453A1 (en) | Display device | |
| WO2024088317A1 (en) | Application interface display method and apparatus, electronic device, and storage medium | |
| WO2024021813A1 (en) | Screenshot taking method and apparatus, electronic device and storage medium | |
| CN109766530B (en) | Method and device for generating chart frame, storage medium and electronic equipment | |
| CN111124246B (en) | Interface interaction method, equipment and storage medium | |
| US9530183B1 (en) | Elastic navigation for fixed layout content | |
| CN109085974B (en) | Screen control method, system and terminal equipment | |
| CN111433724A (en) | Terminal device, graphical user interface thereof and control method of graphical user interface | |
| CN111433721A (en) | Terminal device, graphical user interface thereof and control method of graphical user interface | |
| WO2020097799A1 (en) | Terminal device and touch response control method therefor |
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 | ||
| CB02 | Change of applicant information |
Address after: Building 43, Dayun software Town, No. 8288 Longgang Avenue, Henggang street, Longgang District, Shenzhen City, Guangdong Province Applicant after: Shenzhen Ruoyu Technology Co.,Ltd. Address before: Building 43, Dayun software Town, No. 8288 Longgang Avenue, Henggang street, Longgang District, Shenzhen City, Guangdong Province Applicant before: SHENZHEN ROYOLE TECHNOLOGIES Co.,Ltd. |
|
| CB02 | Change of applicant information | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |