Horizontal UIPickerView
A situation can arise when you want to have some horizontal UIPickerView in your application.
Something like what in the picture shown below
Following code will draw one like that..
-(void)loadView:{
// Write code to create self.view
// Then...
pickerViewArray = [[NSArray arrayWithObjects:
@"John Appleseed", @"Chris Armstrong", @"Serena Auroux",
@"Susan Bean", @"Luis Becerra", @"Kate Bell", @"Alain Briere",
nil] retain];
myPickerView = [[UIPickerView alloc] initWithFrame:CGRectZero];
myPickerView.delegate = self;
myPickerView.showsSelectionIndicator =YES;
myPickerView.backgroundColor = [UIColor clearColor];
CGAffineTransform rotate = CGAffineTransformMakeRotation(3.14/2);
rotate = CGAffineTransformScale(rotate, 0.25, 2.0);
[self.myPickerView setTransform:rotate];
[self.view addSubview:myPickerView];
}
// UIPickerViewDelegate
- (UIView *)pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(UIView *)view{
CGRect rect = CGRectMake(0, 0, 120, 80);
UILabel *label = [[UILabel alloc]initWithFrame:rect];
CGAffineTransform rotate = CGAffineTransformMakeRotation(3.14/2);
rotate = CGAffineTransformScale(rotate, 0.25, 2.0);
[label setTransform:rotate];
label.text = [pickerViewArray objectAtIndex:row];
label.font = [UIFont systemFontOfSize:22.0];
label.textAlignment = UITextAlignmentCenter;
label.numberOfLines = 2;
label.lineBreakMode = UILineBreakModeWordWrap;
label.backgroundColor = [UIColor clearColor];
label.clipsToBounds = YES;
return label ;
}
Courtesy: Syed Yusuf
Advertisement
Like this:
One blogger likes this post.
mike, 
rita, and 16 others are discussing. 
pramod 8:22 am on July 24, 2009 Permalink |
I would like to know , Do Appstore will have any objection for the app to be submitted if we modify the standard controls size or the way it was supposed to be used as per IPHONE HIG(Human interface guidelines)
Sujith Krishnan 8:34 am on July 24, 2009 Permalink |
I don’t think there is such kind of objection from Apple ( however i am not ruling out that).
I have tried customizing the alertviews/actionsheets (in shape, color etc..) and successfully uploaded to app store.
I think Apple don’t stand against your creativity/ideas
However its not advisable to use undocumented APIs, even though you can run the app without any error/warning. They will reject such apps.
Happy Coding . . . .
nebyate 3:25 pm on November 15, 2009 Permalink |
while creating my Horizontal picker
I got a problem with:
[self.picker setTransform:rotate];
error:
accessing unknown ‘picker’ getter method
Sujith Krishnan 6:31 am on November 16, 2009 Permalink |
@nebyate
Please check your property declaration. Check your @synthesize part as well.
Charlie 2:10 am on December 22, 2009 Permalink |
Where do I find the UIPickerViewDelegate? I do not know how to lay out the example. Do you have a full working example available?
thanks
Sujith Krishnan 5:30 am on December 22, 2009 Permalink |
Just type ‘ UIPickerViewDelegate’ and ‘Jump to definition’ .
You can find the delegate methods there.
Please make it clear what you are trying to achieve so that i can help you better. Dont forget to set pickerInstance.delegate = self
Jay 7:39 pm on December 22, 2009 Permalink |
thanks for the tip!
One thing I ran into when I tried this technique was that all my picker views were displayed upside down. On line 23 where the rotation of the label is computed, I’m pretty sure it should be :
CGAffineTransform rotate = CGAffineTransformMakeRotation(-3.14/2); // note the negative sign
this would rotate the label 90 degrees counter-clockwise relative to the rotation applied to the PickerView.
livia 4:37 pm on January 24, 2010 Permalink |
I get the names written upside down …
what am I doing wrong ?
Chris 7:42 pm on January 25, 2010 Permalink |
Hi,
i added a dataSource to to get it working:
#pragma UIPickerViewDataSource
return 1;
}
return [pickerViewArray count];
}
and in loadview:
myPickerView.dataSource = self;
What i can’t figure out is how to make the picker smaller in height (or width before the rotation) initializing with a different frame only affects the y offset. Like to put it on the top of the screen i do:
myPickerView = [[UIPickerView alloc] initWithFrame:CGRectMake(0, -68, 0, 0)];
any ideas?
regards
Chris
Lukassen 10:35 pm on January 31, 2010 Permalink |
Brilliant, I’ve been looking for a way to do this for quite some time.
I suppose if you want a picker less heigh one could transform with .5 and invert the transform on the label but I haven’t figured out that yet
Vilem 4:14 pm on June 3, 2010 Permalink |
I am quite new to iphone programming so I suppose this is stupid question, but please answer anyway, I am just learning everything
I can not get values on picker – something is wrong with the delegate, or delegate assingment. But I do not understand – the delegate method wants back UIView class, and you return UILabel? Is that right?
Ganesh Krishnan 10:56 pm on August 7, 2010 Permalink |
I am not able to get the same in a UITableViewCell. It just refuses to show if I add it as a subview. Can you point what I may be missing?
Seraphin Hochart 11:05 pm on August 13, 2010 Permalink |
I think that’s :
CGAffineTransform rotate = CGAffineTransformMakeRotation(-3.14/2);
So with a -3.14 on line 23 only (It was upside/down with the code just copied and pasted!
Great anyway, thanks!
Husyn 4:21 pm on October 16, 2010 Permalink |
Thnx for this tutorial. I’m having some problems plz help me. I copy pasted loadView code in my viewDidLoad method. Created UIPickerView *myPickerView; and NSArray *pickerViewArray in my .h file. There is no compilation error but text is not shown on picker. can you help me plz…
saurabh 9:28 pm on December 1, 2010 Permalink |
*setTransform:rotate];* does the trick .. simple and effective! nice thanks!!
faisal 1:22 pm on January 4, 2011 Permalink |
Thanks, this is very helpful, I have a problem I would appreciate if you can help, I used the above code but the text is upside down?? I tried changing all the angels no help, any idea??
faisal 1:43 pm on January 4, 2011 Permalink |
I sorted it out, it should be
3.14/2)+3.14)
Narayanan 11:13 am on May 16, 2011 Permalink |
It appears inverted to me
I am using the code as it is
Sujith Krishnan 1:54 pm on May 21, 2011 Permalink |
@Narayanan
Please see above comments. A few people already came up with the solution.
marco 8:33 am on June 21, 2011 Permalink |
can you send me the source code of the final working one?? I am confused
Sujith Krishnan 9:24 am on June 21, 2011 Permalink |
@macro
The code is only that much. loadView and the delegate are enough.
You want to write numberofRows delegate methods as well.
I dont have the full code right now, and i did this years before.
rita 12:13 am on July 1, 2011 Permalink |
Thanks for this great code. Very useful. I am copying the full source code for .h and .m files of View Controller below. I used a View-Based app template of Xcode 4 to start with.
#import
@interface MyHorizontalPickerViewViewController : UIViewController {
NSArray *pickerViewArray;
UIPickerView *myPickerView;
}
@property (nonatomic, retain) IBOutlet UIPickerView *myPickerView;
@end
#import “MyHorizontalPickerViewViewController.h”
@implementation MyHorizontalPickerViewViewController
@synthesize myPickerView;
-(NSInteger)numberOfComponentsInPickerView:(UIPickerView *)myPickerView {
return 1;
}
-(NSInteger)pickerView:(UIPickerView *)myPickerView numberOfRowsInComponent:(NSInteger)component {
return [pickerViewArray count];
}
{
[myPickerView release];
[super dealloc];
}
{
[super didReceiveMemoryWarning];
}
{
pickerViewArray = [[NSArray arrayWithObjects:
@"John Appleseed", @"Chris Armstrong", @"Serena Auroux",
@"Susan Bean", @"Luis Becerra", @"Kate Bell", @"Alain Briere",
nil] retain];
myPickerView = [[UIPickerView alloc] initWithFrame:CGRectZero];
myPickerView.delegate = self;
myPickerView.showsSelectionIndicator =YES;
myPickerView.backgroundColor = [UIColor clearColor];
CGAffineTransform rotate = CGAffineTransformMakeRotation(-3.14/2);
rotate = CGAffineTransformScale(rotate, 0.25, 2.0);
[self.myPickerView setTransform:rotate];
[self.view addSubview:myPickerView];
[super viewDidLoad];
}
CGRect rect = CGRectMake(0, 0, 120, 80);
UILabel *label = [[UILabel alloc]initWithFrame:rect];
CGAffineTransform rotate = CGAffineTransformMakeRotation(3.14/2);
rotate = CGAffineTransformScale(rotate, 0.25, 2.0);
[label setTransform:rotate];
label.text = [pickerViewArray objectAtIndex:row];
label.font = [UIFont systemFontOfSize:22.0];
label.textAlignment = UITextAlignmentCenter;
label.numberOfLines = 2;
label.lineBreakMode = UILineBreakModeWordWrap;
label.backgroundColor = [UIColor clearColor];
label.clipsToBounds = YES;
return label ;
}
{
[myPickerView release];
myPickerView = nil;
[self setMyPickerView:nil];
[super viewDidUnload];
}
@end
Sujith Krishnan 6:55 am on November 14, 2011 Permalink
Thanks for the entire code.
mike 6:03 am on November 14, 2011 Permalink |
i am not able to position the picker view correctly. it somehow appears at the center of the screen while i want it to be on the top of the view.
Sujith Krishnan 6:54 am on November 14, 2011 Permalink |
@mike
You can override the position of the view at any point.
Play with the setFrame: method to position the pickerView wherever you want.
Note that there is a combination of rotation/scaling transform for the pickerview.