Question

我很好奇从标签栏弹出图标的正确方法。例如，Food Spotting应用程序（请参见下文）。如果单击它，则会从中心选项卡栏中弹出三个图标。

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

enter image description here

Answer 1

我认为普遍的共识是，对于第一步，您应该在中心选项卡栏按钮上放置一个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所具有的反弹动画，按钮会越过目的地并退回。要添加它，只需将动画中的按钮帧更改为您希望按钮移动的最远，然后在完成块中添加另一个动画，将它们移动到最终目的地。

我会发布最终结果的图片，但我没有足够的声誉。

Answer 2

查看此code有助于以半圆形方式向您展示

Answer 3

此处有一个示例（git code），显示如何制作居中的标签栏按钮。这是你需要的一个很好的开始，你应该检查Dhara和 Rushabh。

祝你好运。

从标签栏弹出的图标

3 个答案: