How to Create an Eye-Catching Navigation By Adding Radial Menu in iOS App

0
Shares
How to Create an Eye-Catching Navigation By Adding Radial Menu in iOS App
Rate this post

radial menu

One thing that caught many devs’ eyes was the new radial menu in iMessage during WWDC 2014.

imessage-radialmenu-screencast-example

The radial menu is interesting because it’s essentially a context menu. While they’re useful, but you have to be careful when using them.

The radial menu usually used to hide actions with animation. However, they can hide important actions and when used improperly, it can make your experience worse.

But, if you use this radial menu the right way, by hiding the right actions under a button, they can make your user experience better.

In this, iPhone app tutorial, we’ll see the step-by-step process on how you can add radial menu to create an eye-catching navigation in your iPhone app.

Let’s Get Started

Go to XCode and create a new project.

soanimator1

Select project type as Single View Application and go to next.

soanimator2

Set the project name and other details.

soanimator3

After creating a new project, create a custom class of UIView.

-Right click on project’s root folder & select “New File…” option
– Select “Source” from left side.
– Select “Cocoa Touch Class” from available options.
– Select Next & give proper name & select UIView as Subclass & then click on Next & click on Create.

Method for open sharing menu

func open() {

if self.flagIsOpen == false {
var counter = 0.0
for tmpViews in self.arrButtons {
let subView: UIView = tmpViews as! UIView
subView.alpha = 0
UIView.animateWithDuration(self.animationDuration, delay: self.animationTime * counter, usingSpringWithDamping: 0.7, initialSpringVelocity: 0.4, options: .AllowUserInteraction, animations: {() -> Void in
subView.alpha = 1
subView.transform = self.getButtons(counter)
}, completion: {(finished: Bool) -> Void in
})
counter += 1
}
self.flagIsOpen = true
}

}

Method to close sharing menu

func close() {
if self.flagIsOpen == true {
var counter = 0.0
for tmpViews in self.arrButtons {
let subView: UIView = tmpViews as! UIView
UIView.animateWithDuration(self.animationDuration, delay: self.animationTime * counter, usingSpringWithDamping: 0.7, initialSpringVelocity: 0.4, options: .AllowUserInteraction, animations: {() -> Void in
subView.transform = CGAffineTransformIdentity
subView.alpha = 0
}, completion: {(finished: Bool) -> Void in
})
counter += 1
}
self.flagIsOpen = false
}
}

ViewController.swift

In viewDidLoad() we have created object of custom class SOAnimatorMenu. Then we added 3 buttons for sharing.

var sharingView = SOAnimatorMenu()
override func viewDidLoad() {
super.viewDidLoad()

sharingView = SOAnimatorMenu(frame: CGRectMake(self.view!.center.x - 25, 100, 50, 50))
sharingView.delegate = self
sharingView.mainView.backgroundColor = UIColor.whiteColor()
sharingView.addShareOptions(nil, withName: "fb")
sharingView.addShareOptions(nil, withName: "twitter")
sharingView.addShareOptions(nil, withName: "instagram")
self.view!.addSubview(sharingView)
}

This is the delegate method which will be called when any of the sharing button is clicked.

func animatorMenu(animatorMenu: SOAnimatorMenu, didSelectSharingOption name: String) {
if name == "fb" {
self.showAlert(self, messsage: "This is Facebook sharing")
}
else if name == "twitter" {
self.showAlert(self, messsage: "This is Twitter sharing")
}
else if name == "instagram" {
self.showAlert(self, messsage: "This is Instagram sharing")
}

}

And Done!

Once you successfully implement this code, you can easily add radial menu in iPhone app. Though, since radial menus need to be used carefully, you may consult with iPhone app development company to add radial menu correctly.

Get a free copy of radialmenu navigation demo from Github.

This page was last edited on July 27th, 2018, at 1:51.
 
0
Shares
 

Have an Idea for iPhone App? We Can Help!

Get your free consultation now