Mobile phone navigation bar

Abstract

The invention discloses a mobile phone navigation bar which is a circular navigation bar, the circular navigation bar can slide to rotate around a circle center, the circle center is adsorbed to the lower right corner of a screen, a plurality of concentric circle lines are displayed on the circular navigation bar, the area in the center circle line is a center circle area, and the area between the outward adjacent circle lines is an annular area. A button icon is displayed in the central circle area, a circle of button icons evenly distributed around the circle center are displayed in the circular ring area, the button icons can be dragged in or out of the circular navigation bar through long pressing, and the button icons can be opened through single clicking when the circular navigation bar is static. The mobile phone navigation bar can store a large number of button icons, can be clicked and opened only by moving the thumb in a small range at the lower right corner of the screen, can be flexibly moved in the whole position, can rotate the circular navigation bar only by sliding the screen with the thumb, can be diverse and set in the display state, and is super-strong in fun and convenient to operate; and the smart phone has very good decompression performance while being used.

Description

Technical Field

[0001] The present invention relates to the technical field of mobile phone navigation bars, and in particular to a mobile phone navigation bar. Background Art

[0002] Smartphones have partially replaced computers as important information terminals for personal use, office use, and entertainment, and they carry more and more functions. However, since the advent of smartphones, both the navigation bar at the bottom of the startup screen and the navigation bar at the bottom of the application software have always maintained a "fixed" design style. Although icons can be added or deleted, there are only a few icons that can be stored in total, and generally other software APP icons cannot be stored. The overall position cannot be moved, and the display status cannot be changed. There is almost no fun to speak of, and there is no decompression function. For many years, there has been no substantial innovation and improvement in the design of the navigation bar of smartphones. Summary of the invention

[0003] The purpose of the present invention is to provide a mobile phone navigation bar to solve the problems raised in the above background technology.

[0004] In order to solve the above technical problems, the present invention provides the following technical solutions:

[0005] The present invention provides a mobile phone navigation bar, which is a circular navigation bar. The circular navigation bar can be slid to rotate around the center of the circle, and the center of the circle is adsorbed on the lower right corner of the screen. The circular navigation bar displays a plurality of concentric circle lines, the area within the center circle line is the center circle area, and the area between the adjacent circle lines outward is the circular ring area. A button icon is displayed in the center circle area, and a plurality of button icons evenly distributed around the center of the circle are displayed in the circular ring area. The button icon can be long pressed and dragged into or out of the circular navigation bar, and the button icon can be opened by single-clicking when the circular navigation bar is stationary.

[0006] The circular navigation bar can be changed in position by long pressing and dragging, and the center of the circle can be automatically adsorbed to the corners of the screen, the edge of the screen, or the center of the screen during dragging.

[0007] The button icon in the central circular area is a setting icon, and the setting icon is used to set the circular navigation bar.

[0008] The circular navigation bar can be set to two rotation modes: the entire navigation bar rotates when sliding, and only the corresponding circular area rotates when sliding.

[0009] The background of the circular navigation bar can be set with a fill color or pattern, including two fill modes: overall fill and circular area fill; the number, color, and line type of the circle lines can be set. When the outermost circle line is deleted, the button icon in the outermost circular area is automatically dragged out; there are at least two and at most four circle lines. By default, there are two in the initial state, and the color is colorless and transparent.

[0010] The rotation speed of the circular navigation bar is proportional to the sliding speed. When the circular navigation bar is rotating, touching it again will stop the rotation. The rotation speed includes five sensitivities: slow, slower, moderate, fast, and very fast. Each sensitivity has a corresponding sliding speed range. The circular navigation bar can be set to have background music when rotating.

[0011] When you click on a blank area of ​​the screen outside the circular navigation bar, the circular navigation bar collapses into a floating circle. The floating circle is the same size as the central circle area and is attached to the screen edge closest to the central circle area. The floating circle can be long pressed and dragged to change its position. The floating circle is translucent by default. When you click on the floating circle, the floating circle expands into a circular navigation bar in the lower right corner of the screen.

[0012] After the button icons in the circular area are filled, the button icon that is dragged in the latest way automatically replaces the button icon that is dragged in the earliest way in the circular area.

[0013] The circular navigation bar can be used as a bottom navigation bar of a mobile phone's startup screen or a bottom navigation bar of an application software.

[0014] Compared with the prior art, the advantages of the present invention are: it can be used for the bottom navigation bar of the startup screen or the bottom navigation bar of the application software, can store a large number of button icons, and can be clicked and opened by moving the thumb in a small range in the lower right corner of the screen, without excessively moving the thumb upward, and even without using both hands to operate; the overall position can be flexibly moved, and the circular navigation bar can be rotated by sliding the screen with the thumb, and the display status can be changed in a variety of settings, which is extremely fun and easy to operate, so that the smart phone has very good decompression while in use. The mobile phone navigation bar is no longer a single function bar, but also has a prominent entertainment nature, which significantly increases the sense of interactivity and intimacy as a navigation bar, just like playing a 360-degree rotating audio-visual game, and is a "little toy" that users can like and have fun playing. BRIEF DESCRIPTION OF THE DRAWINGS

[0015] In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the following briefly introduces the drawings required for use in the embodiments or the description of the prior art. Obviously, the drawings listed below are only some structural schematic diagrams of the present invention, not all of them.

[0016] Figure 1 The present invention is a structural schematic diagram of a mobile phone navigation bar.

[0017] Figure 2 The present invention is a structural schematic diagram of a floating circle of a mobile phone navigation bar.

[0018] Reference numerals:

[0019] Circular navigation bar 1; circle line 2; central circle area 3; ring area 4; button icon 5, floating circle 6. DETAILED DESCRIPTION

[0020] The following will be combined with the drawings in the embodiments of the present invention to clearly and completely describe the technical solutions in the embodiments of the present invention. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present invention.

[0021] In the description of the embodiments of the present invention, it should be noted that if the terms "center", "up", "down", "left", "right", "vertical", "horizontal", "inside", "outside", etc. appear, the indicated orientation or position relationship is based on the orientation or position relationship shown in the accompanying drawings, or is the orientation or position relationship in which the product of the invention is usually placed when used. It is only for the convenience of describing the present invention and simplifying the description, and does not indicate or imply that the device or element referred to must have a specific orientation, be constructed and operated in a specific orientation, and therefore cannot be understood as a limitation on the present invention.

[0022] In addition, if the terms "first", "second", "third", etc. appear, they are only used to distinguish the description and cannot be understood as indicating or implying relative importance. If the terms "horizontal", "vertical", "overhanging", etc. appear, it does not mean that the components are required to be absolutely horizontal or overhanging, but can be slightly tilted. For example, "horizontal" only means that its direction is more horizontal than "vertical", and it does not mean that the structure must be completely horizontal, but can be slightly tilted.

[0023] In the description of the embodiments of the present invention, if the terms "multiple" or "several" appear, they represent at least two.

[0024] In the description of the embodiments of the present invention, it is also necessary to explain that, unless otherwise clearly specified and limited, the terms "set", "install", "connect", and "connect" should be understood in a broad sense, for example, it can be a fixed connection, a detachable connection, or an integral connection; it can be a mechanical connection or an electrical connection; it can be a direct connection, or it can be indirectly connected through an intermediate medium, or it can be the internal connection of two components. For ordinary technicians in this field, the specific meanings of the above terms in the present invention can be understood according to specific circumstances.

[0025] This embodiment combines the attached Figure 1 to Figure 2 , a mobile phone navigation bar is described in detail.

[0026] The present embodiment provides a mobile phone navigation bar, which is a circular navigation bar 1. The circular navigation bar 1 can be slid to rotate around the center of the circle, and the center of the circle is adsorbed on the lower right corner of the screen. The circular navigation bar 1 displays a plurality of concentric circle lines 2, the area within the center circle line 2 is a center circle area 3, and the area between the adjacent circle lines 2 outward is a circular ring area 4. A button icon 5 is displayed in the center circle area 3, and a plurality of button icons 5 evenly distributed around the center of the circle are displayed in the circular ring area 4. The button icon 5 can be long pressed to be dragged in or out of the circular navigation bar 1, and the button icon 5 can be opened by single-clicking when the circular navigation bar 1 is stationary.

[0027] The button icons 5 include various button icons that come with the mobile phone system and button icons (APP) of various application software that are downloaded and installed. For example, when a circular area 4 is filled, there are 12 button icons. Transform.translate and trigonometric functions (cos, sin) are used to evenly distribute the 12 button icons on the circular track. The position of each button icon is controlled by the rotation angle. When the listening program captures the gesture sliding action, it will give the circular navigation bar an initial speed according to the sliding distance value multiplied by the rotation angle, and multiply it by 0.95 to slow down until it stops.

[0028] The circular navigation bar 1 can be changed in position by long pressing and dragging, and the center of the circle can be automatically adsorbed to the corner point of the screen, the edge line of the screen, or the center point of the screen during dragging.

[0029] The center of the circle is positioned at the lower right corner of the screen (the lower right corner of the screen coordinates) by using the Positioned widget to set the position and adjusting the right and bottom properties to determine the center position. If the center of the circle is less than 50 units from the edge of the screen, the center of the circle is automatically adsorbed to the edge of the screen. After adjusting the center position, the button icon position of the circular navigation bar needs to be recalculated to ensure that the button icon rotates around the new center of the circle.

[0030] The button icon 5 in the center circle area 3 is a setting icon, and the setting icon is used to set the circular navigation bar 1. When setting the circular navigation bar 1, click to open the setting icon in the center circle area 3 to enter the setting page to set various items.

[0031] The circular navigation bar 1 can be set to two rotation modes: the entire navigation bar 1 rotates when sliding, and only the corresponding circular area 4 rotates when sliding.

[0032] Each circular area is set with a corresponding animation controller. When sliding, only the corresponding circular area 4 rotates, and the corresponding animation controller is used to control the rotation angle. If the entire area rotates when sliding, all animation controllers can share the speed parameter.

[0033] The background of the circular navigation bar 1 can be set with a fill color or pattern, including two fill modes: overall fill and circular area 4 fill; the number, color, and line type of the circle lines 2 can be set. When the outermost circle line 2 is deleted, the button icon 5 in the outermost circular area 4 is automatically dragged out; there are at least two and at most four circle lines 2. By default, there are two in the initial state, and the color is colorless and transparent.

[0034] The rotation speed of the circular navigation bar 1 is proportional to the sliding speed. When the circular navigation bar 1 is rotated, it will stop rotating when it is touched again. The rotation speed includes five sensitivities: slow, slower, moderate, fast, and very fast. Each sensitivity has a corresponding sliding speed range. The circular navigation bar 1 can be set to have background music when rotating.

[0035] During the rotation process, sound effects are played through the just_audio package.

[0036] When a blank area of ​​the screen outside the circular navigation bar 1 is clicked, the circular navigation bar 1 collapses into a floating circle 6. The floating circle 6 is the same size as the central circular area 3 and is attached to the screen edge closest to the central circular area 3. The floating circle can be long pressed and dragged to change its position. The floating circle 6 is translucent by default. When the floating circle 6 is clicked, the floating circle 6 expands into the circular navigation bar 1 in the lower right corner of the screen.

[0037] After the button icons in the circular area 4 are filled, the button icon that is dragged in the latest way automatically replaces the button icon that is dragged in the earliest way in the circular area 4 .

[0038] When the circular area is full of button icons, for example, 12 buttons, when you drag in the 13th button icon, the first button icon is automatically hidden; when you drag in the 14th button icon, the second button icon is automatically hidden... 12 button icons remain displayed in the circular area.

[0039] Here’s how to do it:

[0040] 1. Basic concepts:

[0041] Array: A collection of multiple values, usually accessed by index. For example, storing the state and index of a button.

[0042] Components: In Flutter, visual elements (buttons, icons, etc.) are made up of components.

[0043] Trigger point: When a component or element passes a certain coordinate point, a corresponding event is triggered. For example, when a gesture slides to a certain position, a button update is triggered.

[0044] Animation controller listening: monitor the animation progress and gradually update the position or state of the button. Use AnimationController and addListener to implement animation listening and perform corresponding operations when the animation is updated.

[0045] 2. Core implementation:

[0046] Animation Controller:

[0047] Use AnimationController to create an animation controller to control the duration and execution mode of the animation.

[0048] In the addListener callback, calculate the angle of the button according to the animation value (_controller.value) and update the position of the button according to the angle.

[0049] Use _velocity to simulate a damping effect so that the button gradually slows down as it rotates.

[0050] Button position calculation:

[0051] The position of each button is calculated based on the angle using trigonometric functions (cosine and sinine). In the code, the calculated x and y represent the position of the button on the circular navigation bar.

[0052] If the button is positioned close to the leftmost edge of the circle (e.g. the x value is between -140 and -160), a specific event is triggered.

[0053] Triggering Event:

[0054] Use the checkButtonLeft function to check if a button enters the left trigger point.

[0055] The direction of the user's sliding is determined by gesture sliding (cc!.delta.dy.toDouble()), and whether to slide up or down is determined, thereby updating the display order of the buttons.

[0056] Anti-shake mechanism:

[0057] In order to avoid the button triggering events multiple times in a short period of time, use lastindex to record the index of the last triggered button and compare it with the current index. If they are the same, no processing is performed to avoid repeated updates.

[0058] 3. Display slot update:

[0059] Updating of button slots is managed via two arrays:

[0060] listse: Stores the first and last indexes of the currently displayed buttons (for example, listse[0] represents the index of the first button currently displayed, and listse[1] represents the index of the last button. If 12 buttons are displayed, listse[0] has an index of 0, and listse[1] has an index of 11).

[0061] listtemp: used to store the first and last digits of the button index that is temporarily displayed (listtemp[0] is 0, listtemp[1] is 11. If the total number of apps is 20, then the index of the temporarily displayed listtemp is in the range of 0 to 19 to avoid exceeding the total number of apps.

[0062] Each time you slide, check whether an update is triggered. If so, update the listse and listtemp arrays to ensure that the update of the first index or the last index and the displayed button index are updated, while achieving a looping effect.

[0063] 4. Button Update:

[0064] The total number of apps is stored in the liststr array (if there are 20 apps in total, the index is [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19] by default), the 12 buttons being displayed are represented by the listbutton array (if 12 buttons are displayed, the index of this array is [0,1,2,3,4,5,6,7,8,9,10,11] by default), and tempimdex is used to load the first or last index.

[0065] For example, when the first item in listse[0] (index 0) triggers the trigger point (x-axis 140-160) and the gesture slides downward, 5 things are done:

[0066] 1), tempindex = listse[1] + 1 (index value 12).

[0067] 2) Use this index value to get the index of the queue element of liststr of the total number of apps, that is, liststr[tempindex] (liststr

[12] is App 13).

[0068] 3), listbutton[listse[0]] = liststr[tempindex], updates the display corresponding to the button index of the starting point to the queue index.

[0069] 4), listse[0]+1, listse[1]+1, the first and last digits must be moved one digit in turn.

[0070] 5), the temporary index displayed by listtemp[0]+1, isttemp[1]+1 should also be moved back one position.

[0071] For example, when the tail of listse[1] (index 11) triggers the trigger point (x-axis 140-160) and the gesture slides upward, five things are done:

[0072] 1), tempindex = listse[0]-1 (index value 19, because of overflow prevention, so here is 19, that is, App 20),

[0073] 2) Use this index value to get the index of the queue element of liststr of the total number of apps, that is, liststr[tempindex](liststr[0]-1).

[0074] 3), listbutton[listse[0]] = liststr[tempindex], update the display corresponding to the button index of the starting point to the queue index,

[0075] 4), listse[0]-1, listse[0]-1, the first and last digits should be moved forward one digit,

[0076] 5), the temporary index displayed by listtemp[0]-1, isttemp[1]-1 should also be moved forward one position.

[0077] 5. Overflow handling:

[0078] When the button index exceeds the display range (for example, tempindex>19), an operation (for example, tempindex=0) is performed (for example, if tempindex<0, then tempindex=19) to ensure that the index returns to the legal range and implement cyclic display.

[0079] Listse and listtemp should also be checked (listse[0]<0 means listse[0]=11, listse[0]>11 means listse[0]=0, listtemp[0]<0, listse[1]<0 means listse[1]=11, listsitse[1]>11 means listse[1]=0,

[0080] listemp[0]<0 means listtemp[0]=19, listemp[0]>19 listtemp[0]=0, listemp[1]<0 means listtemp[1]=19, listemp[1]>19 means listtemp[1]=0).

[0081] Summary: The core of this function is to dynamically adjust the display order of buttons in the circular navigation bar through gesture sliding. The button positions are gradually updated through the animation controller, and the corresponding events are triggered through the trigger points. At the same time, anti-shake and anti-overflow mechanisms are added to ensure smooth update and loop effects of the buttons.

[0082] The circular navigation bar 1 can be used as a bottom navigation bar of a mobile phone's startup screen or a bottom navigation bar of an application software.

[0083] It can replace the traditional horizontal navigation bar at the bottom of the screen.

[0084] In specific implementation, when the circular navigation bar 1 is used as the bottom navigation bar of the mobile phone startup screen or the bottom navigation bar of the application software, when the mobile phone is turned on, the center of the circular navigation bar 1 is adsorbed at the lower right corner of the screen by the system default, such as Figure 1 As shown, a quarter circular navigation bar 1 is displayed in the lower right corner of the screen. The circular area 4 stores commonly used button icons, which can be operated only with the thumb when holding the mobile phone in the right hand.

[0085] When you need to open a button icon, you can click each button icon with your thumb, including the button icon of the application software (APP). If the button icon is not displayed, just slide the screen to the left with your thumb to rotate the circular navigation bar 1. When the required button icon appears, you can click it to open it.

[0086] When you need to have fun and relieve stress, you can just swipe the screen to the left with your thumb to make the circular navigation bar 1 rotate accordingly, thereby achieving the effect of fun and stress relief. You can use your thumb to personalize the background, circle line color, rotating background music, etc. of the circular navigation bar 1 to build your own "exclusive navigation bar" to enhance the fun effect and intimacy of play when rotating.

[0087] The circular navigation bar 1 is installed and run as follows:

[0088] 1. Make sure the development environment is set up correctly

[0089] Before running a Flutter application, you need to ensure that the development environment is correctly configured, including installing the Flutter SDK, Android Studio (or VS Code), and necessary dependencies.

[0090] Install Flutter SDK: First, you need to install the Flutter SDK, which can be downloaded and installed from the Flutter official website.

[0091] Install Android Studio or VS Code: In order to develop and test on an Android device, you need to install Android Studio. If you plan to use VS Code, you also need to install the Flutter plugin.

[0092] Install Xcode (for iOS development): If you plan to run your app on an iPhone device, you also need to install Xcode and make sure your developer certificate and configuration are set up.

[0093] 2. Create a Flutter project

[0094] If you haven't created a Flutter project yet, you can create a new project, put the code in the lib / main.dart file, and enter the code for the circular navigation bar.

[0095] 3. Connect your Android or iOS device

[0096] Android devices: You need to connect your Android device via USB and make sure that developer mode and USB debugging are enabled. You can use the command flutter devices to confirm whether the device is connected successfully.

[0097] iOS devices: For iOS, you need to connect a Mac computer and make sure the device has been configured with Xcode. You also need to enable developer mode on the device and configure the development certificate.

[0098] 4. Run the Flutter app

[0099] Running on Android devices:

[0100] Make sure your Android device is connected and can be recognized by flutter devices.

[0101] Run the following commands to compile and start the application:

[0102] bash

[0103] flutter run

[0104] Flutter will automatically build the Android app and install it on the connected Android device. If multiple devices are connected, Flutter will prompt you to select a device.

[0105] Running on iOS devices:

[0106] Make sure you have Xcode installed on your Mac and have a valid iOS development certificate configured through Xcode.

[0107] Run the following commands to compile and start the application:

[0108] bash

[0109] flutter run

[0110] Flutter will compile the app through Xcode and install it on the connected iOS device. If multiple devices are connected, Flutter will prompt you to select a device.

[0111] 5. Debugging and hot reloading

[0112] During the development process, you can use the hot reload function provided by Flutter to quickly view the modified effect:

[0113] After modifying your code, you can hot reload by pressing r (in the terminal) or by clicking the hot reload button in Android Studio or VS Code.

[0114] Hot reload quickly refreshes the application interface without restarting the application.

[0115] 6. Runtime Effects

[0116] Android devices: When you run this code, Flutter launches an app with a circular navigation menu. You can drag the circular navigation bar with gestures, and when the center of the circle is close to the edge, it will be attached to the edge of the screen.

[0117] iOS devices: Works the same as on Android devices. The app will display a circular navigation menu on iOS devices, which the user can interact with.

[0118] 7. Publish the application (optional)

[0119] If you are ready to publish your app to the App Store (iOS) or Google Play (Android):

[0120] Android: Use the command to generate an APK file for release:

[0121] iOS: Use Xcode to package the app and upload it to the App Store:

[0122] Summarize:

[0123] Install and configure the Flutter development environment.

[0124] Create and modify a Flutter project and paste the above code into lib / main.dart.

[0125] Run the app on an Android or iOS device using the flutter run command.

[0126] Use hot reload (r key) for fast development and debugging.

[0127] When publishing an app, generate a release version through the command line and upload it to the app store.

[0128] Through the above method, you can successfully run this circular navigation bar on Android or iOS phones and enjoy the cross-platform experience brought by Flutter development.

[0129] The present invention and its embodiments are described above, and such description is not restrictive, and the actual protection scope is not limited thereto. Any changes or substitutions that can be easily thought of by a person skilled in the art within the technical scope disclosed by the present invention should be included in the protection scope of the present invention. Therefore, the protection scope of the present invention shall be based on the protection scope of the claims.

Claims

1. A mobile phone navigation bar, characterized in that: The navigation bar is a circular navigation bar (1), and the circular navigation bar (1) can be slid to rotate around the center of the circle, and the center of the circle is adsorbed on the lower right corner of the screen. The circular navigation bar (1) displays a plurality of concentric circle lines (2), the area within the center circle line (2) is the center circle area (3), and the area between the adjacent circle lines (2) outward is the ring area (4), a button icon (5) is displayed in the center circle area (3), and a circle of button icons (5) evenly distributed around the center of the circle are displayed in the ring area (4), the button icon (5) can be long pressed to drag into or out of the circular navigation bar (1), and the button icon (5) can be opened by single clicking when the circular navigation bar (1) is stationary.

2. A mobile phone navigation bar according to claim 1, characterized in that: The circular navigation bar (1) can be changed in position by long pressing and dragging, and the center of the circle can be automatically adsorbed to the corner point of the screen, the edge of the screen, or the center point of the screen during dragging.

3. A mobile phone navigation bar according to claim 1 or 2, characterized in that: The button icon (5) in the central circular area (3) is a setting icon, and the setting icon is used to set the circular navigation bar (1).

4. A mobile phone navigation bar according to claim 3, characterized in that: The circular navigation bar (1) can be set to two rotation modes: the entire navigation bar rotates when sliding, and only the corresponding circular area (4) rotates when sliding.

5. A mobile phone navigation bar according to claim 3, characterized in that: The background of the circular navigation bar 1 can be set with a fill color or pattern, including two fill modes: overall fill and circular area 4 fill; the number, color, and line type of the circle lines 2 can be set. When the outermost circle line 2 is deleted, the button icon 5 in the outermost circular area 4 is automatically dragged out; there are at least two and at most four circle lines 2. By default, there are two in the initial state, and the color is colorless and transparent.

6. A mobile phone navigation bar according to claim 4, characterized in that: The rotation speed of the circular navigation bar (1) is proportional to the sliding speed. When the circular navigation bar (1) is rotated, it stops rotating when it is touched again. The rotation speed includes five sensitivities: slow, relatively slow, moderate, fast, and very fast. Each sensitivity has a corresponding sliding speed range. The circular navigation bar (1) can be set to have background music when rotating.

7. A mobile phone navigation bar according to claim 3, characterized in that: When a blank area of ​​the screen outside the circular navigation bar (1) is clicked, the circular navigation bar (1) collapses into a floating circle. The floating circle is the same size as the central circular area (3) and is attached to the screen edge closest to the central circular area (3). The floating circle can be long-pressed and dragged to change its position. The floating circle is semi-transparent by default. When the floating circle is clicked, the floating circle expands into the circular navigation bar (1) in the lower right corner of the screen.

8. A mobile phone navigation bar according to claim 1, characterized in that: When the button icons in the circular area (4) are full, the button icon that is dragged in the latest will automatically replace the button icon that is dragged in the earliest in the circular area (4).

9. A mobile phone navigation bar according to claim 1, characterized in that: The circular navigation bar (1) can be used as a navigation bar at the bottom of a mobile phone startup screen or a navigation bar at the bottom of an application software.

Images