An iphone uipickerview that rotates horizontally?

问题

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?

回答1:

Continuing the answer by Dave DeLong I got it working like this......

In viewDidLoad i did this...

 CGRect frame = horizontalPickerView.frame;
        frame.size.width = 50;
        frame.size.height = 216;
        frame.origin.x=90;
        frame.origin.y = 200;
        horizontalPickerView.frame = frame;

        horizontalPickerView.transform = CGAffineTransformMakeRotation(3.14159/2); 






- (UIView *)pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(UIView *)view{
        UILabel *lbl = [[[UILabel alloc] initWithFrame:CGRectMake(0, 0, 30, 20)] autorelease];
        lbl.transform = CGAffineTransformMakeRotation(-3.14159/2);
        lbl.text = @"hi";
        return lbl;
    }

Hope this helps

回答2:

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

回答3:

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.

回答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;
  }

回答5:

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).

回答6:

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;
    }

回答7:

Try this-> Create Plain UIVew of size of UIPickerview, add picker on it. set numberOfComponentsInPickerView = 1. set componant width. Then add small sub views on it to Hide rest of picker. Only rotating wheel of componant should visible. Transform plain view to rotate it through 90 degree.

Make sure to apply tranform in:

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

{

    UILabel *lbl = nil;
    if(view)
    {
        lbl = (UILabel *) [view viewWithTag:11];
    }
    else
    {
        view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 32, 32)];
        lbl = [[UILabel alloc] initWithFrame:CGRectMake(1, 0, 30, 30)];
        lbl.tag = 11;
        lbl.backgroundColor = [UIColor clearColor];
        lbl.textAlignment = UITextAlignmentCenter;
        lbl.font = [UIFont fontWithName:@"Helvetica-Bold" size:18];
        lbl.transform = CGAffineTransformRotate(lbl.transform, M_PI +M_PI/2);
        [view addSubview:lbl];
        [lbl release];
    }


    lbl.text =  [dataSourceArray objectAtIndex:row];


    return view;
}

Now you can add palin view as a subview for horizontal picker on any view.