An iphone uipickerview that rotates horizontally?

Question

I've only seen it in a VERY few iPhone apps... but it looks like a picker that rotates left/right (instead of top/bottom).

They usually put it on 1 line of a tableView... to allow the user to quickly pick between a small number of choices (like 3-10).

How is that coded?

Answer 1

Try a paged scrollview that has the items you want on one per page, and perhaps overlay an image above it if you want nicer graphics for your control, and only allow for horizontal scrolling (don't make the contentSize of the scrollview taller than the size of the actual view, and disable vertical scroll bouncing on the control).

Answer 2

You will have to create picker programitcally, so that you can create your own sized picker with CGRectMake(x, y, width, height) then, you will have to rotate it, but rotating it will also rotate in the Picker's dataSources methods, you will have to rotate the view inverse of picker's rotation, I am including code hopfully it will help

.....
...
...
NSArray *arr =  [NSArray arrayWithObjects:@"1 mi", @"2 mi", @"5 mi", @"10 mi", @"15 mi", @"20 mi", @"25 mi", 
                 @"30 mi", @"35 mi", @"40 mi", @"45 mi", @"50 mi", @"75 mi", @"99 mi", nil];

    radiusDefaults = [[NSMutableArray alloc] initWithArray:arr] ;

    radiusPicker = [[UIPickerView alloc] initWithFrame:CGRectMake(0, 0, 100, 150)];
    radiusPicker.delegate = self;
    radiusPicker.dataSource = self;
    radiusPicker.showsSelectionIndicator = NO;  

    //Resize the picker, rotate it so that it is horizontal and set its position
    CGAffineTransform rotate = CGAffineTransformMakeRotation(-1.57);  
    rotate = CGAffineTransformScale(rotate, .1, .5);
    CGAffineTransform t0 = CGAffineTransformMakeTranslation(-61, 0);
    radiusPicker.transform = CGAffineTransformConcat(rotate,t0);

//  [theNavigationBar.topItem setTitleView:radiusPicker] ;
    UIView *pickerWrapper = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 215)];
    [self.view addSubview:radiusPicker];
    [radiusPicker selectRow:6 inComponent:0 animated:NO];
    [radiusPicker release];

.....
.......
....

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


        UIView *viewForRow = [[[UIView alloc] initWithFrame:CGRectMake(0, 0, 70, 400)] autorelease];

        UILabel *label;

        UIFont *font = [ UIFont fontWithName:@"ArialRoundedMTBold"  size:22];


        label = [[[UILabel alloc] initWithFrame:CGRectMake(0, 20, 70, 350)] autorelease];

        [label setText:[NSString stringWithFormat:@"%@", [radiusDefaults objectAtIndex:row]]];
        label.textAlignment = UITextAlignmentCenter;
        label.textColor = [UIColor blueColor];
        label.font = font;
        label.backgroundColor = [UIColor clearColor];
        //    label.opaque = NO;
        [viewForRow addSubview:label];

        CGAffineTransform rotate = CGAffineTransformMakeRotation(1.57);
        rotate = CGAffineTransformScale(rotate, 1, 6.5);
        [viewForRow setTransform:rotate]; 
        return viewForRow;
    }

Answer 3

Have you ever considered taking a table view and rotating it?

Didn't think so. Go try that. :)

Answer 4

@Madhup's code lead me in the general direction I wanted when I searched for the horizontal UIPickerView but I then realized the question asked wasn't really addressed so for anyone who was looking for a more suitable answer to the left-to-right rotation. The code in the answers I'd read were all to enable left-to-right swiping, causing the picker to push the labels/rows with higher values to the left of the view. Any ways here's my contribution:

In the viewDidLoad method:

    yourPickerView.frame = frame;
    yourPickerView.transform = CGAffineTransformMakeRotation(4.71238898); //Instead of rotating clockwise 90° we're rotating 90° counterclockwise. 4.71238898 being ≈270° in radians.
    [self.view addSubview:self.picker];
    self.yourPickerView.delegate = self;
    self.yourPickerView.dataSource = self;
    self.yourPickerView.showsSelectionIndicator = YES;
    self.yourPickerView.userInteractionEnabled = YES;

The pickerView's method:

  -(UIView *)pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(UIView *)view{
      UILabel *label = [[[UILabel alloc] initWithFrame:CGRectMake(0, 0, 20, 20)] autorelease];
    yourLabel.transform = CGAffineTransformMakeRotation(1.57079633); //Instead of rotating counterclockwise 90° we're rotating 90° clockwise 1.57079633 being ≈90° in radians.
    yourLabel.font = [UIFont fontWithName:@"System-Bold" size:18]; //Your font here.
    yourLabel.text = @"yourLabel's text"; //or like me [NSString stringWithFormat:@"%@, [yourArray objectAtIndex:row]]
    yourLabel.backgroundColor = [UIColor clearColor];
    return label;
  }

Answer 5

You can do this by taking a regular UIPickerView, adjusting its width (via setFrame:), and then applying an NSAffineTransform to rotate it 90º. You'll then need to rotate each item in the picker 90º the other way.

It's a little tedious to do it properly, but it can be done.

Answer 6

Here you will find source code for Picker which is horizontally aligned.