How We Created a Floating Menu for an iOS Application

Introduction

How much time do you spend tapping something on your smartphones? Is it something about an hour a day? We doubt that. According to the latest research, people use their phones an average of five hours a day.

As we spend so much time on our devices, we want them to work fast and effectively. No matter how many times we use our smartphones to connect to the Internet and check our email, we want it fast.

Radial menu layouts are the latest word in mobile apps technology. Being restricted to a single level makes them very efficient. One good example of using radial floating menus is social networks.

We created a floating menu that saves your time when accessing social networks as it directs you to your chats of profile immediately. Our menu is the analog to UITabBarContoller, and we named it EEMenuController. Our controller is equipped with the floating menu, which can be transformed from the bottom bar and moved to any screen location of our choice.

1. How we developed the component

EEMenuController class that inherits from NSObject serves as the singleton that ensures navigation between screens at any point of the project.   

Here is the step-by-step info how we created the controller:

• First, we needed to program the function similar to UITabBarController functional. For that, we created a bottom panel EEBottomPanelView that offers similar functions as UITabBar. Besides, we created EEContentVC for content navigation.
• Then, we implemented the transformation of the bottom bar into the floating one.
• Next, we set the margins position to prevent the floating menu from sticking to the center of the screen.
• Lastly, we created a separated pie chart menu.

2. How we developed a floating menu

A floating menu consists of two parts:

• A floating button, which can be moved and converted from the bottom panel.
• Pie menu, which expands into several sub-menus when clicked or tapped.

When creating a floating menu we have to keep two things in mind. First, the menu cannot overlap the content. Second, we cannot lose visibility of the menu items as it expands. Therefore, we set the margins of the menu within the limits of the customized space.

Related: Key components of a successful mobile product

3. Issues we had to address

• A limited number of menu items. Pie menu can only display one to five tabs. With more tabs tapping becomes hindered. At this point, we faced two issues.
• A shape of menu items. We used this article to draw the shape, but adding spaces between the items became our problem. Since the items’ shape is drawn from the cones, every next size decrease brings the angle change. So, we lose the symmetry.

We solved this problem by giving the same length value to the external and internal arcs instead of decreasing the item’s angle. In our case, it was 4 points.

1. Clickability of the items. To restrict menu clickability to items only we overrode the method pointInside: withEvent:
   - (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event {
 BOOL lReturn = NO;
 for (EEFloatingPaneTabButton *lTabButton in _tabButtonsArr) {
     if ([lTabButton pointInside:[self convertPoint:point toView:lTabButton] withEvent:event]) {
         lReturn = YES;
         break;
     }
return lReturn;
}
2. Proper display of content. When the floating menu is active then the content might be displayed all over the screen. For that, each UIViewController has to implement the protocol EEMenuContentProtocol and arrange elements properly.
3. Showing floating menu anchored to a view. The problem is that the user cannot hold the floating button forever. As soon as the user releases the button, it has to be located in the right position. To achieve it, we created an algorithm that calculates the final point of anchoring depending on the direction and speed of menu floating on the screen.  

4. How to use Menu

Our team of iOS developers created a sample project, which you can download from GitHub. For your convenience in labeling the items, we created EEMenuTab class.

Related: Mobile trends in 2016: peering into the future

5. How to customize our component

1. Select the margins of the fixed floating area.
   [EEMenuConroller.shareInstance setFloatingAreaInsets:UIEdgeInsetsMake(100.0f, 0.0f, 0.0f, 0.0f)];
2. Select color patterns
   [EEMenuConroller.shareInstance setBottomPanelColor:[UIColor colorWithWhite:0.95f alpha:1.0f]];

[EEMenuConroller.shareInstance setBottomPanelTintColor:[UIColor lightGrayColor]];

[EEMenuConroller.shareInstance setBottomPanelActiveTintColor:[UIColor colorWithRed:147.0f/255.0f green:207.0f/255.0f blue:28.0f/255.0f alpha:1.0f]];

[EEMenuConroller.shareInstance setFloatingPanelColor:[UIColor whiteColor]];

[EEMenuConroller.shareInstance setFloatingPanelTintColor:[UIColor lightGrayColor]];

[EEMenuConroller.shareInstance setFloatingPanelActiveTintColor:[UIColor colorWithRed:147.0f/255.0f green:207.0f/255.0f blue:28.0f/255.0f alpha:1.0f]];

Conclusion

To sum up, you do not have to worry about getting the floating menu anymore. Feel free to use this information to create and customize it. Also, you can get a free template here. It will save your time and grant you a trendy and effective menu.