UIPicker sizing in landscape mode

Question

I am trying to develop an app with a UIPicker in landscape mode, taking up (almost) the entire width of the screen (with 5 or 6 components). Can you please tell me how to set the size of UIPicker. Thank you very much for your help.

Answer 1

You can't. UIPickerView's size is constant.

UPDATE: It turns out you can resize an UIPickerView. The trick is to place it inside another (smaller) UIView, and resize that view. I haven't tried this yet.

UPDATE 2: This method does not resize the UIPickerView, but rather crops it. It might or might not be what you're looking for, but AFAIK, there's no way to truly resize an UIPickerView, and this is as close as it gets. It doesn't look that bad.

UPDATE 3 (Long overdue): As of SDK 3.0, UIPickerView is completely resizeable using initWithFrame or setFrame.

Answer 2

I'm fairly certain that the UIPicker comes in one size, which you can't change. Would be interested to hear different.

Answer 3

Apple has a Picker that they use when you do a drop-down list in Safari, in landscape mode. Any ideas on what they use?

Answer 4

You can edit the size by opening the .xib file in TextEdit and changing the size of the UIPickerView.

Answer 5

Actually, I resize my pickers for almost every app. I do not like that they take up the entire screen. Here is the method that I am using: (note that I am also rotating the picker to be horizontal)

in viewDidLoad .....

picker = [[UIPickerView alloc] initWithFrame:CGRectZero];
picker.delegate = self;
picker.dataSource = self;
picker.showsSelectionIndicator = NO;


//Resize the picker, rotate it so that it is horizontal and set its position
CGAffineTransform rotate = CGAffineTransformMakeRotation(-1.57);  
rotate = CGAffineTransformScale(rotate, .46, 2.25);
CGAffineTransform t0 = CGAffineTransformMakeTranslation(3, 22.5);
picker.transform = CGAffineTransformConcat(rotate,t0);
[self.view addSubview:picker];
[picker release];

Then, I like to add a background image for my view that covers up the grey bars (which are now on the top and bottom) of the UIPicker:

//Create the overlay to superimpose ontop of the picker //In this case, the image is the size of the screen with a transparent area the size of the //UIPickerView cut out in the middle

UIImageView *uiiv = [[UIImageView alloc] 
      initWithImage:[UIImage         imageNamed:@"problem_bg.png"]];
uiiv.userInteractionEnabled = NO;
uiiv.opaque = YES; //for performance
[self.view addSubview:uiiv];
[uiiv release];

//UIPickerView delegate method

-(UIView *) pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)rowforComponent:(NSInteger)component reusingView:(UIView *)view {

UIView *viewForRow = [[[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 280)] autorelease];
UIImageView *img = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"myimage.png"]];

img.frame = CGRectMake(0, 0, 102,280);
img.opaque = YES;
[viewForRow addSubview:img];
[img release];
UILabel *label;

UIFont *font = [ UIFont fontWithName:@"Helvetica"  size:20];

label = [[[UILabel alloc] initWithFrame:CGRectMake(10, 20, 270, 100)] autorelease];

label.text = @"I am a label";
label.textAlignment = UITextAlignmentCenter;
label.textColor = [UIColor blackColor];
label.font = font;
label.backgroundColor = [UIColor clearColor];
label.opaque = NO;
    [viewForRow addSubview:label];

CGAffineTransform rotate = CGAffineTransformMakeRotation(1.57);  
    [viewForRow setTransform:rotate]; 
return viewForRow;

}

This gives a much smaller, horizontal picker with a nice look and feel. I hope this helps someone.

Answer 6

im wondering if ne one knows is this even legal in according to apples ways of doing things on the iphone , i dont want my app to get rejected for something stupid like this, so does ne one know for sure?

Answer 7

Depth-of-field apps use horizontal pickers and they are full approved by Apple http://images.macworld.com/images/reviews/graphics/143531-dr%5Fdof%5Foriginal.jpg

The amount of work and code is obsurd, though.

I sure would like to see a framework with ONE line of code that would do them.

Answer 8

there is no such thing: "one line of code".

Answer 9

Charles - I don't suppose you would be willing to post a small project that shows how you resized the picker? I am having trouble getting your code to work properly. Any help would be appreciated.

Answer 10

No problem (I just registered). By the way I just realized that when I posted my answer, that the method (UIView *) pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent .... lost the space between row and forComponent. So make sure that you have the delegate correct or else it will not work.

Answer 11

Hi Charles, i have the same problem as "unknown", i can get the view to display 3 pickers by adding:

- (NSInteger)numberOfComponentsInPickerView:(UIPickerView*)pv
{
    return 3;
}


- (NSInteger)pickerView:(UIPickerView*)pv numberOfRowsInComponent:(NSInteger)component
{
    return 10;
}

to your example, and added:

-(UIView *) pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(UIView *)view {

    NSLog(@"row %d component %d", row, component);

which gets called fine:

[Session started at 2010-01-02 19:52:46 +0100.]
2010-01-02 19:52:47.624 Test[7936:20b] row 2 component 2
2010-01-02 19:52:47.629 Test[7936:20b] row 1 component 2
2010-01-02 19:52:47.630 Test[7936:20b] row 0 component 2
2010-01-02 19:52:47.631 Test[7936:20b] row 2 component 1
2010-01-02 19:52:47.631 Test[7936:20b] row 1 component 1
2010-01-02 19:52:47.631 Test[7936:20b] row 0 component 1
2010-01-02 19:52:47.632 Test[7936:20b] row 2 component 0
2010-01-02 19:52:47.632 Test[7936:20b] row 1 component 0

but the cells remain white, i've commented out the image stuff to no avail. i think it has something to do with the frame you use to allocate the label, but am not quite sure.

Looking forward to an working example project

Answer 12

The answer is in:

-(UIView *) pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(UIView *)view {

Since with:

- (NSString*)pickerView:(UIPickerView*)pv titleForRow:(NSInteger)row forComponent:(NSInteger)component

Makes it work (that is: sideways with scaled label) of course

Answer 13

I wrestled with the same issue of resizing the pickerview. After some research and headache here is something you can easily do: 1) forget Interface builder! I think you can so much better UI without the interface builder.
2) in your controllers overwrite the load view method.

-(void)loadView
{
        //create your view
 self.view = [[UIView alloc] initWithFrame:CGRectZero];
 // create a default sized pickerView
 pickerView = [[UIPickerView alloc] initWithFrame:CGRectZero];
 pickerView.delegate = self;
 pickerView.dataSource = self;
 pickerView.showsSelectionIndicator = YES;

        // Get its frame
 CGRect pickerFrame = pickerView.frame;

        // Set it to what ever you like, I use a default screen height times a shrink factor like 0.75 for 3/4 of its original size
 pickerFrame.size.width = screenWidth*pickerShrinkFactor;
 pickerFrame.size.height =  pickerHeight*pickerShrinkFactor;
 // You can also set the upper left corner of the picker
 pickerFrame.origin.x = 0;
 // Set the picker frame to new size and origin
        pickerView.frame = pickerFrame;
        // Add it to your view
 [self.view addSubview:pickerView];

}

Good luck