How to change UIPickerView height

Question

Is it possible to change the height of UIPickerView? Some applications seem to have shorter PickerViews but setting a smaller frame doesn't seem to work and the frame is locked in Interface Builder.

Solution 1

It seems obvious that Apple doesn't particularly invite mucking with the default height of the UIPickerView, but I have found that you can achieve a change in the height of the view by taking complete control and passing a desired frame size at creation time, e.g:

smallerPicker = [[UIPickerView alloc] initWithFrame:CGRectMake(0.0, 0.0, 320.0, 120.0)];

You will discover that at various heights and widths, there are visual glitches. Obviously, these glitches would either need to be worked around somehow, or choose another size that doesn't exhibit them.

Solution 2

None of the above approaches work in iOS 4.0

The pickerView's height is no longer re-sizable. There is a message which gets dumped to console if you attempt to change the frame of a picker in 4.0:

-[UIPickerView setFrame:]: invalid height value 66.0 pinned to 162.0 

I ended up doing something quite radical to get the effect of a smaller picker which works in both OS 3.xx and OS 4.0. I left the picker to be whatever size the SDK decides it should be and instead made a cut-through transparent window on my background image through which the picker becomes visible. Then simply placed the picker behind (Z Order wise) my background UIImageView so that only a part of the picker is visible which is dictated by the transparent window in my background.

Solution 3

There are only three valid heights for UIPickerView (162.0, 180.0 and 216.0).

You can use the CGAffineTransformMakeTranslation and CGAffineTransformMakeScale functions to properly fit the picker to your convenience.

Example:

CGAffineTransform t0 = CGAffineTransformMakeTranslation (0, pickerview.bounds.size.height/2);
CGAffineTransform s0 = CGAffineTransformMakeScale       (1.0, 0.5);
CGAffineTransform t1 = CGAffineTransformMakeTranslation (0, -pickerview.bounds.size.height/2);
pickerview.transform = CGAffineTransformConcat          (t0, CGAffineTransformConcat(s0, t1));

The above code change the height of picker view to half and re-position it to the exact (Left-x1, Top-y1) position.

Solution 4

Try:

pickerview.transform = CGAffineTransformMakeScale(.5, 0.5);

Solution 5

In iOS 4.2 & 4.3 the following works:

UIDatePicker *datePicker = [[UIDatePicker alloc] init];
datePicker.frame = CGRectMake(0, 0, 320, 180);
[self addSubview:datePicker];

The following does not work:

UIDatePicker *datePicker = [[UIDatePicker alloc] initWithFrame:CGRectMake(0, 0, 320, 180)];
[self addSubview:datePicker];

I have an app that is in the app store with a 3 line date picker. I thought the height change may have been prevented because you see the text under the date picker's border, but this happens to the normal 216 height date picker too.

Which is the bug? Your guess is as good as mine.

Also there are 3 valid heights for UIDatePicker (and UIPickerView) 162.0, 180.0, and 216.0. If you set a UIPickerView height to anything else you will see the following in the console when debugging on an iOS device.

2011-09-14 10:06:56.180 DebugHarness[1717:707] -[UIPickerView setFrame:]: invalid height value 300.0 pinned to 216.0

View more solutions

Comments

[Andy Bourassa]

This works for you? All UIPickerViews I instantiate seem to be locked to a height of 215...

[danielpunkass]

It works for me. Are you specifying the shortened height in the initWithFrame method, as I described? They do tend to fight to stay a certain height, but once I initialized with a short frame, it worked. If you still can't get it to work I'll see if I can excerpt a sample.

[futureelite7]

You can resize uipickerview horizontally, but if you set it too short it will cause visual glitches.

[Mahesh Babu]

here what is VivatAwardsStruct,i am getting error here, VivatAwardsStruct undeclared

[cfischer]

Is there any third party control that allows resizing?

[bhavinb]

@Fernando - since this is no longer supported in iOS 4.xx+, you can perhaps apply the trick mentioned in my answer below. Doesn't really resize the picker but may help you get the desired UI result

[griotspeak]

This worked. 4.3. I init with frame and setframe before first appearance.

[w.donahue]

I was stuck on this for a while. It is IMPORTANT to note that you MUST init with frame or setframe before first appearance or you will get visual glitches.

[TheTiger]

it doesn't work for all heights, you just make it smaller than its default height but not larger........ any solution how to make picker view's height larger than its default ????

[Doug Gerecht]

This worked as long as I ran it on ios 7. When I run this same build on ios 6 the entire picker shows up expect for portions that are overwritten by other views. As long as you only target >= 7 then this may be viable. Ordering the views such that the picker is rendered first effectively hides the outlying portions but this is only masking it with other views.

[Lizza]

Can you explain a little bit more about how this was done? Is this only for shrinking the view, or can you make the picker larger as well? Currently developing an iOS 7 iPad app and I need to the picker to be taller, but no matter what I try I can't get it to go bigger!

[Hanny]

I know I'm late to the party here - and perhaps there are better methods that exist now to do this, but this worked for me.

[vir us]

Sucks... Is there any alternative control that is provides the same functionality and still usable?

[Borzh]

Great answer. Just a note that to change picker height you don't need to use translation: pickerview.transform = CGAffineTransformMakeScale(1.0, 0.5);

[Eric Chen]

Thanks. It seems true but is there any Apple documentation on the valid heights?

[nhenrique]

can you confirm that this actually works? On xcode it looks like it but running on the device it's showing the pickerview over that uiview

[new2ios]

It works @nhenrique, but you must not forget Clip Subviews. also the size of the UIPickerView must be taller - and you have to aim the centre of your UIPickerView to be visible inside the parent UIView

[Douglas Nassif Roma Junior]

Good idea, this was the solution for me in iOS 7.1.

[Hemang]

This isn't working, @new2ios, can you confirm this is working in iOS8 >? I'm trying to do the same thing programmatically.

[new2ios]

Sorry, @hagile, but I abandon that idea - I can not confirm. I use Storyboard (did not create UIPickerView from the code).

[Hemang]

@new2ios, Thanks for your reply. Not a problem :)

[KingWulfgar]

Voted this up because it helped me finally figure out how to animate showing/hiding a UIPickerView (with all it's many height bugs). Wrap it in a container UIView. Thank you!

[turingtested]

pickerView:rowHeightForComponent: is the delegate method to decide the height of each row - not the height of the picker view.

[Meshach]

Works great! For Swift (iOS 10) it's: statePicker.transform = CGAffineTransform(scaleX: 0.8, y: 0.8)

[DogCoffee]

need to determine how to add an inputAccessoryView to an increased sized UIPickerView.

[chaytan]

Mind sharing how?