We can create animated and customisable bubble menu for iOS using LIVBubbleMenu. Here is a link from GitHub for the project https://github.com/limitlessvirtual/LIVBubbleMenu-iOS.
In the following example we are going to show bubble menu on the click of a UIButton.
First include the cocoaPod for it :-
pod 'LIVBubbleMenu'
In your Xcode project, in the Main.Storyboard drag a UIButton and create its IBAction and IBOutlet. Then in the ViewController import the LivBubbleMenu framework and also include its delegate as :-
#import <LIVBubbleMenu/LIVBubbleMenu.h>
@interface ViewController : UIViewController <LIVBubbleButtonDelegate>
In this example we are displaying images in the bubbles when the button is clicked so we take an array of images. In the ViewController.m include the following lines of code :-
@interface ViewController (){
LIVBubbleMenu *bubbleMenu;
NSArray *images;
}
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
images = [NSArray arrayWithObjects:
[UIImage imageNamed:@"backgrounds"],
[UIImage imageNamed:@"background3"],
[UIImage imageNamed:@"background2"],
[UIImage imageNamed:@"date"],
[UIImage imageNamed:@"first"],
[UIImage imageNamed:@"home"],
[UIImage imageNamed:@"index"],
nil];
}
Now in the action of the button perform the following lines of code :-
- (IBAction)btnShowBubbleMenu:(id)sender {
bubbleMenu = [[LIVBubbleMenu alloc] initWithPoint:self.btnShowBubbleMenuOutlet.center radius:200 menuItems:images inView:self.view];
bubbleMenu.delegate = self;
bubbleMenu.easyButtons = NO;
[bubbleMenu show];
}
As we have set the delegate to self, so we have to implement its delegates methods as :-
-(void)livBubbleMenu:(LIVBubbleMenu *)bubbleMenu tappedBubbleWithIndex:(NSUInteger)index { // called when bubble is selected
NSLog(@"User has selected bubble index: %tu", index);
}
-(void)livBubbleMenuDidHide:(LIVBubbleMenu *)bubbleMenu { // called on bubbles hide
NSLog(@"LIVBubbleMenu has been hidden");
}
Build the program and see the effects. The output will be as shown below:-
click on the button and see the effects
0 Comment(s)