CGRectMake : How To Calculate X and Y For UIPickerView Animation?

Question

I have this UIPickerView on my Storyboard :

and here's the position based on Size Inspector :

and here's my code :

- (void)showPickerView
{
    [UIView animateWithDuration:0.5 delay:0 options:UIViewAnimationOptionBeginFromCurrentState animations:^{
        self.picker.frame = CGRectMake(0 , 288,  self.picker.frame.size.width,  self.picker.frame.size.height);
        self.picker.hidden = NO;
    }
    completion:^(BOOL finished) {
    }];
}

(after trial and error) in order to be placed correctly (bottom) on 4-inch screen, I have to set 288 as Y. I have no idea where this number come from.

because if you do some a little math here you won't get that number :

iPhone screen height = 1136px, pickerview height = 216pts = 432px

if X and Y measured from TOP-LEFT (0, 0), then for 4 inch screen I should use 1136 - 432 = 704 px / 2 = 352pts. not 288pts.

but according to Size Inspector' origin, this object measured from bottom left. so, (0,0) of X and Y now measured from BOTTOM-LEFT. you still won't get that number.

plus, even worse... when I run on 3.5 inch Simulator it's not fully shown.

how to give X and Y value for UIPickerView so it will perfectly shown for both 3.5 and 4 inch retina display screen?

thank you.

Answer 1

The size 1136px is for full screen, you have to take in consideration that the status bar has 20px and the navigation bar has 44px so for your computation is like:

1136px - 432(picker) - 40(status bar) - 88(navigation bar) = 576; 576/2 = 288px

That's why the 288px is working for you.

if you want to give proper coordinates to your picker view you have to do something like this:

        self.picker.hidden = NO;
 [UIView animateWithDuration:0.5 delay:0 options:UIViewAnimationOptionBeginFromCurrentState animations:^{
        self.picker.frame = CGRectMake(0 , 
                                      self.view.fra.size.height 
                                        -  self.picker.frame.size.height,
                                      self.picker.frame.size.width,  
                                      self.picker.frame.size.height);
    }
    completion:^(BOOL finished) {
    }];

But be careful, it's really important when you call this, make sure you call it in or after -viewDidAppear: is called. Due to the fact you want this piece of code to work perfect on both 3.5'' and 4 inch screens, the view won't be properly resized and the frame is not correct until this method is called, especially if you use storyboards with or xib that creates view controllers with views for 4 inch display.

Answer 2

Robert, UIPicker's position is measured always from top left corner, UIPicker co-ordinates are the co-ordinates of centre of uipicker.

For example if you give (0,0)it will show you quarter of pickerview i.e bottom right quarter.

As the uipicker height is fixed that is 216 you need Y c0-ordinate more than or=216/2=108. And to see full width you need X co-ordinate (picker width/2 )

Answer 3

Best approach in my opinion is to use the bounds property of the containing view, which should be the root view of the view controller.

UIPickerView height is 216 pixels, as illustrated by this post - this value is set by default when a Picker View is initialised.

So if we take the post of danypata into consideration, but don't want to manually calculate with set values for navigation bar height, status bar height, etc... we can do something like the following:

UIPickerView *pickerView = [[UIPickerView alloc] init]; // default frame is set
float pvHeight = pickerView.frame.size.height;
float y = view.bounds.size.height - pvHeight; // the root view of view controller
[UIView animateWithDuration:0.5f delay:0 options:UIViewAnimationOptionBeginFromCurrentState animations:^{
    self.picker.frame = CGRectMake(0 , y, pickerView.frame.size.width, pvHeight);
}
completion:nil];