如何在按下按钮后以动画方式显示 UIPickerView？

Question

我想在按下按钮后为 UIPickerView 制作动画。我已经将 UIPickerView 编码为隐藏在 viewDidLoad 上，并且在按下按钮后不会隐藏，但它的动画效果不像 ModalViewController 默认情况下的动画效果。我只希望我的 UIPickerView 能够像 ModalViewController 默认动画一样进行动画处理。

我已经在网站和网络上进行了研究，但我似乎无法正确完成。

这是我的代码：

#pragma mark - Picker View 

- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView
{
    return 1;
}

- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component
{
    return 4;
}

- (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component
{
    timersArray = [[NSMutableArray alloc] init];
    [timersArray addObject:@"No timer"];
    [timersArray addObject:@"15 seconds"];
    [timersArray addObject:@"30 seconds"];
    [timersArray addObject:@"60 seconds"];

    return [timersArray objectAtIndex:row];
}

- (void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component
{
    if ([[timersArray objectAtIndex:row] isEqual:@"No timer"])
    {
        timerIndication.text = @"No timer selected";
        timersPickerView.hidden = YES;
        // Animation code to dismiss picker should go here
    }
    else if ([[timersArray objectAtIndex:row] isEqual:@"15 seconds"])
    {
        timerIndication.text = @"15 seconds selected";
        timersPickerView.hidden = YES;
        // Animation code to dismiss picker should go here
    }
    else if ([[timersArray objectAtIndex:row] isEqual:@"30 seconds"])
    {
        timerIndication.text = @"30 seconds selected";
        timersPickerView.hidden = YES;
        // Animation code to dismiss picker should go here
    }
    else if ([[timersArray objectAtIndex:row] isEqual:@"60 seconds"])
    {
        timerIndication.text = @"60 seconds selected";
        timersPickerView.hidden = YES;
        // Animation code to dismiss picker should go here
    }
}

#pragma mark - Delay method

// This is where Send button should be enabled
- (IBAction)selectTimer
{
    timersPickerView.hidden = NO;
    // Animation code to present picker view should go here
}

Answer 1

您可以使用以下代码在按下按钮后对选取器视图进行动画处理：

-(IBAction)button:(id)sender
{

   [UIView beginAnimations:nil context:nil];
    [UIView setAnimationDuration:0.6];
    CGAffineTransform transfrom = CGAffineTransformMakeTranslation(0, 200);
    PickerView.transform = transfrom;
    PickerView.alpha = PickerView.alpha * (-1) + 1;
    [UIView commitAnimations];

}

不要忘记将以下代码添加到您的 viewDidLoad 方法中，

PickerView.alpha = 0;    
[self.view addSubview:PickerView];

它的作用是使选取器视图在第一次单击时从屏幕顶部掉落到使选择器视图消失，您只需再次单击该按钮即可。从下一次单击开始，选择器视图就会出现并消失。希望它有帮助并有效:)

Answer 2

您可以创建一个视图控制器，然后在控制器内添加 UIPickerView ，然后使用：

[selfpresentModalViewController:viewControllerWithPickerViewanimated:YES];

或者您可以添加未隐藏的 UIPickerView，但其 y 值大于屏幕，例如 480.0 或更大，然后使用 UIView 动画将 UIPickerView 从该位置移动到屏幕上可见的位置，这将模拟 ModalViewController 动画。

Answer 3

您可以使用以下函数来执行选择器视图的动画。

-(void)hideShowPickerView {

if (!isPickerDisplay) {
    [UIView animateWithDuration:0.25 animations:^{
        CGRect temp = self.categoryPicker.frame;
        temp.origin.y = self.view.frame.size.height - self.categoryPicker.frame.size.height;
        self.categoryPicker.frame = temp;
    } completion:^(BOOL finished) {
        NSLog(@"picker displayed");
        isPickerDisplay = YES;
    }];
}else {
    [UIView animateWithDuration:0.25 animations:^{
        CGRect temp = self.categoryPicker.frame;
        temp.origin.y = self.view.frame.size.height;
        self.categoryPicker.frame = temp;
    } completion:^(BOOL finished) {
        NSLog(@"picker hide");
        isPickerDisplay = NO;
    }];
}

将

isPickerDisplay 定义为 BOOL 并将其初始化为 ViewDidLoad ，如下所示 -

isPickerDisplay = YES;
[self hideShowPickerView];

这将管理 UIPickerView 的隐藏和显示功能。

Answer 4

Swift 3 解决方案

我同意@EshwarChaitanya，alpha 属性是可动画的，这是一个适当的用途。

override func viewDidLoad() {
    super.viewDidLoad()
    
    timersPickerView.alpha = 0
}

@IBAction func selectTimer() {
    UIView.animate(withDuration: 0.3, animations: {
        self.timersPickerView.alpha = 1
    })
}

我不确定你想如何隐藏它，所以我将它留给你。

Answer 5

当您按下按钮时，执行操作 [self.view addSubVuew:yourPickerView]; 。难道是无业无成吗？

Answer 6

Swift 5：向上滑动动画

1 - 将高度设置为 216（PickerView 标准）。

2- 设置前导和尾随到安全区域。

3- 将底部设置为“SuperViewBottom”，即-216。

4- 将第 3 行中的 IBOutlet 作为 NSLayoutConstraint 可选。

然后：

import UIKit

class ViewController: UIViewController {

 override func viewDidLoad() {

 super.viewDidLoad()

 bottom.constant = -216

}

@IBOutlet weak var bottom: NSLayoutConstraint!

-(IBAction)button:(id)sender
{
   UIView.animate(withDuration: 0.2, delay: 0.0, options: .curveEaseIn, animations:
        {
            self.bottom.constant = 0
        self.view.layoutIfNeeded()
        }) { (AnimationComplete ) in }
}

 override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
       

        UIView.animate(withDuration: 0.2, delay: 0.0, options: .curveEaseIn, animations:
        {
            self.bottom.constant = -216
        self.view.layoutIfNeeded()
        }) { (AnimationComplete ) in }
   
    }


}

它应该像苹果标准动画一样工作。

祝你好运