Bottom pop-up UIPicker?

Question

Is the UIPicker that pops up from the bottom of the screen when an action is called just a basic UIPickerView that is coordinated in a certain way? (Like a UIActionSheet?) How would I implement that?

Answer 1

Put a UIPickerView in a new UIViewController class (let's call it PopupUIPicker) and then display that View Controller via:

PopupUIPicker *pickerController = [[[PopupUIPicker alloc] init] autorelease];
[currentViewController presentModalViewController:pickerController animated:YES];

Where currentViewController is the View Controller you want to display it on. To dismiss it:

[currentViewController dismissModalViewControllerAnimated:YES];

The default animation is to slide up from the bottom. You can change it like:

pickerController.modalTransitionStyle = UIModalTransitionStylePartialCurl;

Answer 2

What do you mean by "the UIPicker that pops up from the bottom of the screen when an action is called"?

If you want to do roughly what the Facebook app does, look up Three20 which is their open-source UI library (no guarantee that the component they use is there; I haven't checked).

Answer 3

Here's animation code, that I use:

- (void)animateDatePicker:(BOOL)show {
    CGRect screenRect = self.frame;
    CGSize pickerSize = [self.datePickerView sizeThatFits:CGSizeZero];
    CGRect startRect = CGRectMake(0.0,
                                  screenRect.origin.y + screenRect.size.height,
                                  pickerSize.width, pickerSize.height);

    CGRect pickerRect = CGRectMake(0.0,
                                   screenRect.origin.y + screenRect.size.height - pickerSize.height,
                                   pickerSize.width,
                                   pickerSize.height);

    self.datePickerView.frame = pickerRect;
    self.backgroundColor = UIColorMakeRGBA( 64, 64, 64, 0.7f - (int)show * 0.7f );

    if ( show ) {
        self.datePickerView.frame = startRect;
        [self.parentViewController addSubviewToWindow:self];
    }

    [UIView beginAnimations:nil context:nil];
    [UIView setAnimationDuration:0.3f];
    [UIView setAnimationDelegate:self];

    self.backgroundColor = UIColorMakeRGBA( 64, 64, 64, 0.0f + (int)show * 0.7f );

    if ( show ) {
        self.datePickerView.frame = pickerRect;
    } else {
        [UIView setAnimationDidStopSelector:@selector(slideDownDidStop)];
        self.datePickerView.frame = startRect;
    }

    [UIView commitAnimations];  
}

datePickerView is a view, that contains DatePicker:

self.datePickerView = [[UIView alloc] initWithFrame:CGRectMake(0.0, 174.0, 320.0, 286.0)];
self.datePicker = [[UIDatePicker alloc] initWithFrame:CGRectMake(0.0, 70.0, 320.0, 216.0)];
[self.datePicker setDatePickerMode:UIDatePickerModeDate];
[self.datePicker addTarget:self action:@selector(pickerValueChanged:) forControlEvents:UIControlEventValueChanged];
[self.datePickerView addSubview:self.datePicker];

parentViewController should implement addSubviewToWindow method:

- (void)addSubviewToWindow:(UIView *)addView {
    [self.view addSubview:addView];
}

UIColorMakeRGBA:

#define UIColorMakeRGBA(nRed, nGreen, nBlue, nAlpha) [UIColor colorWithRed:(nRed)/255.0f green:(nGreen)/255.0f blue:(nBlue)/255.0f alpha:nAlpha]

slideDownDidStop is a method, that will be called after datePicker slide down successfully.

So, just to summarize - you have MyViewController, that have

MyDatePickerView *myDatePicker;

field.

MyDatePickerView is a custom class, that have UIDatePicker *datePicker field, MyViewController *parentViewController and animateDatePicker method.

When you perform some action on MyViewController (for example, UIControlEventTouchUpInside for some button), you should invoke

[myDatePicker animateDatePicker:YES];

Please let me know if you have questions.

UPDATE: Here's a small example.

Answer 4

I have the same issue as as Rob... I can make the UIPicker popup... but it fills the whole screen... i want just the picker to popup... Matt says you don't have to make the view take up the entire frame ... resizing the view along does not work... How do you make just the picker pop up? i was to still see the part of the parent view... much like safari on iphone handles dropdowns.