从标签栏弹出的图标

我很好奇从正确的方式使图标从标签栏弹出。例如，Food Spotting应用程序（请参阅下文）。如果点击它，有三个图标从中心标签栏项目弹出。从标签栏弹出的图标

有没有一种标准的方式去做这样的事情？谢谢！

enter image description here

2013-03-14 Brandon

可能有一些opsource项目可能会这样做，但我的猜测是你必须建立这个你自己。 – rckoenes 2013-03-14 11:38:39

以为我可能 - 要做到这一点，我需要类似以下的东西吗？ 1）确认点击了中间的tabbar项目，2）点击该tabbar项目时出现的图像，3）附加到每个图像的动作...类似的东西？ – Brandon 2013-03-14 11:43:44

这听起来像它可以工作，我只需在中央选项卡上放置一个“UIButton”来检测水龙头。并使用['CABasicAnimation']（https://developer.apple.com/library/mac/#documentation/GraphicsImaging/Reference/CABasicAnimation_class/Introduction/Introduction。html）来动画另一个按钮。 – rckoenes 2013-03-14 11:47:20

我认为一般的共识是，第一步，你应该放置在中心标签栏按钮的UIButton。代码gazzola链接到似乎对此有帮助。下一步是获取中心按钮触摸的句柄，并将新按钮从其中移出。

以下代码显示了如何创建新按钮并以类似于Food Spotting应用程序的方式为它们设置动画。

假设你有定义两个属性：

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

第一个是一个出口中心按钮，和用于确定所述按钮表示第二布尔值。

- (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]; 
}

在viewDidAppear中，我只是设置了按钮，这些按钮都可以在故事板上完成。

以下方法将绑定到展开按钮的touchUpInside事件。

- (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; 
     }]; 
    } 
}

这会将按钮放射状或半圆形地动画化，并随着它们的移动而增长。请注意，你应该找出你想要的按钮的动画，并相应地调整数字。显然，按钮应该被赋予一个图像，而不仅仅是背景颜色。

此代码不会添加Food Spotting具有的反弹动画，其中按钮会通过它们的目标并反冲回去。要补充一点，只需将动画中的按钮帧更改为您想要按钮最远的按钮帧，然后在完成块中添加另一个动画，以将它们移至其最终目标。

我会张贴最终结果的图片，但我没有足够的声望。

来源

2013-05-20 18:43:57 btking

看看这个code它帮助向您显示半圆形方式

来源

2013-03-14 12:28:27 Dhara

有展示如何制作中心的TabBar按钮，在这里一个例子（git code）。这是你需要的一个不错的开始，他们应该检查由Dhara和 Rushabh发布的代码。

祝你好运。

来源

2013-03-14 12:51:33 gazzola

从标签栏弹出的图标

回答

相关问题