How do you shrink a UIPickerView on the iPhone?

Question

I would like to reduce the height of a UIPickerView in my iPhone app, so that it shows only one row and one column. The height of the picker view should be equal to the height of a row.

I'm using Interface Builder to construct the UIPickerView, but I can't find an easy way to re-size this control.

How do you shrink a UIPickerView?

Answer 1

Actually, you can slightly shrink the whole UIPickerView by applying an affine transform to an enclosing view. For example:

CGSize pickerSize = [pickerView sizeThatFits:CGSizeZero];

pickerTransformView = [[UIView alloc] initWithFrame:CGRectMake(0.0f, 0.0f, pickerSize.width, pickerSize.height)];
pickerTransformView.transform = CGAffineTransformMakeScale(0.75f, 0.75f);

[pickerTransformView addSubview:pickerView];
[self.view addSubview:pickerTransformView];
[pickerTransformView release];

will scale a picker to 75% of its original size by placing it within a containing view and applying a scaling transform to that view. Applying a transform directly to the UIPickerView leads to undesirable drawing artifacts.

However, the kind of resizing you're looking for would be best served by creating a custom control.

Answer 2

It is possible and easy!

Just open the nib file as plain text, then find the picker view and adjust the measures:

<object class="IBUIPickerView" id="783900772">
<reference key="NSNextResponder" ref="191373211"/>
<int key="NSvFlags">292</int>
<string key="NSFrame">{{85, 68}, {150, 116}}</string>

That's all!

Answer 3

Create a simple UIView in Interface Builder. Set desired position and size, add constraints. Check "Clip SubViews" checkbox. Then drag & drop Picker View inside this view as a subview. Add constraints for picker to align horizontally and vertically inside container. Should do the job.

Answer 4

The answer of user2248258 actually works if you use storyboards and/or autolayout. There I would like to add screenshots as Nilambar suggested.

1. place a pickerview in another container view with the size you want it

   

2. check clipSubviews for the container view

   

3. align the picker centered horizontally and vertically in that container view, also give it zero constraints for the trailing and leading place

   

This way the picker view gets clipped off to the correct size (won't be resized).

Result:

Answer 5

As far as I know, it will be messed up if you shrink it.

a) UITableView+UIPickerView
I recommend you use the "a row in UITableView+UIPickerView to do this. You can use a row in tableView like the dropDownList in Windows, when you tap on this row will show the pickerView (hidden at first).

b) If you have a long lists of data in tableView and only one of the items needs to pick data, you should scroll the view using the following method (make sure to calculate the original position of pickerView as it will be moved up/down together):

-(void)setViewMove:(BOOL)moveUP offset:(CGFloat)offset
{
    [UIView beginAnimations:nil context:NULL];
    [UIView setAnimationDuration:0.3];
    CGRect rect = self.view.frame;

    if(moveUP)
    {
        rect.origin.y-=offset;
        rect.size.height+=offset;
    }
    else    //move down
    {
        rect.origin.y+=offset;
        rect.size.height-=offset;
    }
    self.view.frame = rect;
    [UIView commitAnimations];
}

c) You can also add another view for the picker and go back to this view when you have selected something.

My conclusion is:
If you have only few lines in tableView, use a.
If you have lots of lines in tableView but only one of them needs picker, use b.
If you have lots of lines in tableView and lots of them need picker, use c.