按下按钮后如何动画显示 UIPickerView?

Posted

技术标签:

【中文标题】按下按钮后如何动画显示 UIPickerView?【英文标题】:How can I animate displaying UIPickerView after pressing button? 【发布时间】:2011-10-28 03:05:13 【问题描述】:

我想在按下按钮后为我的 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

【问题讨论】:

【参考方案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];

它的作用是使选择器视图在第一次单击时从屏幕顶部下降并让选择器视图消失,您只需再次单击按钮即可。从下一次单击中,选择器视图会出现并消失。 .希望它有所帮助和工作:)

【讨论】:

@androniennn 很高兴我的回答奏效了,感谢您的补充 :)【参考方案2】:

你可以创建一个viewcontroller,然后在controller里面添加UIPickerView,然后使用:

[self presentModalViewController:viewControllerWithPickerView Animation:YES];

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

【讨论】:

当我加载带有pickerview的modalviewcontroller时,是否有任何解决方法可以使视图变暗? 您可以使用黑色背景和 alpha 为 0.5 的隐藏 UIView 并收听您的 UIPickerView 动画,当它完成时您会显示该 UIView。这个 UIView 应该放在除了 UIPickerView 之外的所有东西之上。【参考方案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 的隐藏和显示功能。

【讨论】:

【参考方案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
    )

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

【讨论】:

【参考方案5】:

当您按下按钮时,执行操作 [self.view addSubVuew:yourPickerView]; .没用吗?

【讨论】:

事实并非如此。当我按下按钮时,它只会显示 PickerView,因为它默认隐藏在 viewDidLoad 中。在 PickerView 上选择一行后它会再次隐藏。【参考方案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 
   
    




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

祝你好运?

【讨论】:

以上是关于按下按钮后如何动画显示 UIPickerView?的主要内容,如果未能解决你的问题,请参考以下文章

如何根据按钮按下重新加载/刷新 UIPickerView(带有新数据数组)?

如何在 UIPickerView 上添加 UIToolbar? (iPhone/iPad)

显示和隐藏 UIPickerview 时出错

按下按钮后做扩大(扩散)动画

如何在 iPhone 中隐藏/显示带有动画的 UIView

UIStackView 显示/隐藏动画