How to make an assistive menu for your own iPhone app ?

 

A custom assistive menu

A custom assistive menu

 

The assistive menu on iDevices is a cool feature that nobody misses out. Every iPhone user is using it. Together with the stability of iOS, the assistive menu is highly efficient for quick navigations across iOS.
Now imagine if you could make an assistive menu exclusively for your app. Sounds interesting? Well, this is what we have done at OpenXcell for one of our clients. Since, the navigation went more complicated than we thought, we created a custom assistive menu for the app itself.

You won’t come across an assistive menu made exclusively for an app that easily. So. here is an opportunity to learn the trick and apply to your app/game.

Design and Animation:

What you see here is a basic working assistive menu. It is comprised of a couple of concentric areas that employ effects to appear three-dimensional in nature. The region at the centre points towards the direction where the swipes are made. The direction and magnitude of the swipe also ascertain the 3D effect demonstrated by the outer area.

You can also make your assistive menu pop out options that you want your users to access frequently. The animations can be vivid based on your choice and menu options.

How to make one?

With the reference of iPhone assistive touch, we want something like within the entire app for displaying the menu. Hence, we create a global view and add it  to the UINavigationController’s view.

NSArray *arr = [[NSBundle mainBundle] loadNibNamed:@"BouncyView" owner:self options:nil];

  BouncyView *bouncy = [arr objectAtIndex:0];

   [self.navigationController.view addSubview:bouncy];

Now, we add the inner circle which we are calling the bouncy. To do that, let us add the Pan Gesture to the view. Also, we restrict this component to ‘panned only’ in the screen.

CGRect rect = [self frame];

    rect.origin.x += translation.x;

    rect.origin.y += translation.y;

    

    if (CGRectContainsRect(CGRectMake(self.superview.bounds), rect))

    {

        self.frame = rect;

    }

Now, we need to move the orange background along with the bouncy view. The orange BG moves first within the bouncy view.  To do that we need to get the distance of the yellow view to the boundary (superview).

 CGFloat distance = [self distanceBetweenPoints:recognizerPoint:viewOuter.center];

    if (distance < 20)

    {

        [viewInner setCenter:recognizerPoint];

    }

Hence, if the distance is less than 20, then the yellow view moves alone within the view, and if it’s more than 20 than the entire view moves within the screen.

Keeping it right or left-

One of the key things about an assistive menu is, it should not interfere with the touch commands. This means that irrespective of the position it is dragged, it should end up either at the right or left side of the screen. This requires fulfilling some conditions.

 if (self.center.x < self.superview.bounds.size.width/2)

        {

            [self setCenter:CGPointMake(self.frame.size.width/2, self.center.y)];

        }else{

            [self setCenter:CGPointMake(self.superview.bounds.size.width-(self.frame.size.width/2), self.center.y)];

        }

Now you are almost done. Open the simulator and check if it works or not.

Applications-

  1. Quick navigation across the app
  2. Gives uniqueness to your app as a catchy visual element
  3. Can increase app engagement as people would tend to play with it
  4. Allows creation and easy access within complicated apps
  5. You can set pages on the assistive menu that are frequently used to increase engagement

Hope you had a fruitful time learning this tutorial. Expect more from our iPhone app development team. We’ll be back with a tutorial on chain payments very soon.

Follow us on @openxcell to get instant updates.

Arup Dey

Arup Dey

I am passionate about Games, Content Marketing, NLE apps and Videos. In my free time I Read, Eat and Code. I see life around me as interconnected subsets of small events. Helps me learn a lot!