Icons that Popup from Tab Bar

Question

I am curious as to the proper way to make icons popup from a tab bar. For example, the Food Spotting app (please see below). Has three icons that spring up from the center tab bar item if you click on it.

Is there a standard way to go about doing something like this? Thank you!

Answer 1

I think the general consensus is that for the first step, you should place a UIButton over the center tab bar button. The code gazzola linked to seems helpful for this. The next step is to get a handle on the center button touch and animate the new buttons out of it.

The following code shows how to create the new buttons and animate them in a similar fashion to the Food Spotting app.

Assuming you have two properties defined:

@property (nonatomic, weak) IBOutlet UIButton *ourExpandButton;
@property (nonatomic, assign) BOOL buttonsExpanded;

The first being an outlet to the center button, and the second a boolean for determining if the buttons are showing.

- (void)viewDidAppear:(BOOL)animated
{
    UIButton *button1 = [UIButton buttonWithType:UIButtonTypeCustom];
    UIButton *button2 = [UIButton buttonWithType:UIButtonTypeCustom];
    UIButton *button3 = [UIButton buttonWithType:UIButtonTypeCustom];

    button1.backgroundColor = [UIColor redColor];
    button2.backgroundColor = [UIColor blueColor];
    button3.backgroundColor = [UIColor yellowColor];

    // Make the buttons 0 width and height so when we animate they seem to grow
    // Position them in the center of the button that expands them
    button1.frame = CGRectMake(self.ourExpandButton.center.x, self.ourExpandButton.center.y, 0.0, 0.0);
    button2.frame = CGRectMake(self.ourExpandButton.center.x, self.ourExpandButton.center.y, 0.0, 0.0);
    button3.frame = CGRectMake(self.ourExpandButton.center.x, self.ourExpandButton.center.y, 0.0, 0.0);

    [button1 addTarget:self action:@selector(someMethod:) forControlEvents:UIControlEventTouchUpInside];
    [button2 addTarget:self action:@selector(someMethod:) forControlEvents:UIControlEventTouchUpInside];
    [button3 addTarget:self action:@selector(someMethod:) forControlEvents:UIControlEventTouchUpInside];

    button1.tag = 101;
    button2.tag = 102;
    button3.tag = 103;

    [self.view addSubview:button1];
    [self.view addSubview:button2];
    [self.view addSubview:button3];
}

In the viewDidAppear I'm just setting up the buttons, which could all be done on the storyboard.

The following method would be tied to the touchUpInside event of the expand button.

- (IBAction)expandButtonTouched:(id)sender
{
    if (!self.buttonsExpanded) {
        [UIView animateWithDuration:0.25 animations:^{
            float screenWidth = self.view.frame.size.width;
            float screenHeight = self.view.frame.size.height;
            [[self.view viewWithTag:101] setFrame:CGRectMake((screenWidth/3 - 22.0), (screenHeight - 100), 44.0, 44.0)];
            [[self.view viewWithTag:102] setFrame:CGRectMake((screenWidth/2 - 22.0), (screenHeight - 150), 44.0, 44.0)];
            [[self.view viewWithTag:103] setFrame:CGRectMake((2*screenWidth/3 - 22.0), (screenHeight - 100), 44.0, 44.0)];
        } completion:^(BOOL finished) {
            self.buttonsExpanded = YES;
        }];
    } else {
        [UIView animateWithDuration:0.25 animations:^{
            [[self.view viewWithTag:101] setFrame:CGRectMake(self.ourExpandButton.center.x, self.ourExpandButton.center.y, 0.0, 0.0)];
            [[self.view viewWithTag:102] setFrame:CGRectMake(self.ourExpandButton.center.x, self.ourExpandButton.center.y, 0.0, 0.0)];
            [[self.view viewWithTag:103] setFrame:CGRectMake(self.ourExpandButton.center.x, self.ourExpandButton.center.y, 0.0, 0.0)];
        } completion:^(BOOL finished) {
            self.buttonsExpanded = NO;
        }];
    }
}

This animates the buttons out radially or in a semi-circle, and they grow as they move. Note that you should figure out where exactly you want the buttons to animate to and adjust the numbers accordingly. Also obviously the buttons should be given an image instead of just a background color.

This code doesn't add the bounce animation that Food Spotting has, where the buttons go past their destination and recoil back. To add that, just change the button frames in the animation to the furthest you want the buttons to go, then add another animation in the completion block that moves them to their final destinations.

I would post an image of the final result, but I don't have enough reputation.

Answer 2

查看此代码有助于半圆显示

Answer 3

There is an example here ( git code ) showing how to make centered tabbar buttons. It is a nice start for what you need, them you should check the codes posted by Dhara and Rushabh.

Good luck.