How to make UIPickerView with 3 visible rows?

Question

How to make uipickerview with only 3 visible rows? Like this:

Answer 1

You have to add UIDatePicker Programmatically to display three rows. Adjust the picker size according to your need.

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

Answer 2

I noticed that most of the responses mentioned either UIDatePicker or the number of Components , neither of which seem right since the question specifically asks about UIPickerView and the number of Rows Visible .

I found a solution by implementing:

- (CGFloat)pickerView:(UIPickerView *)pickerView rowHeightForComponent:(NSInteger)component
{
    return (80.0);
}

This allows you to make the height of the row larger (or smaller) so that fewer (or more) rows appear in the control, although the vertical size of the control is the same.

I do believe that the size of the control can be changed to avoid all the excess spacing, but I haven't addressed that issue yet.

---

Row Height 25.0

---

Row Height 80.0

Answer 3

In addition to @GRW's answer. So, you cant set arbitrary height to a picker view; but you Can: change row height to have 3 visible rows; AND apply affine transform to scale down the whole picker view.

To maintain the aspect ratio:

• you must scale not only y , but x too with the same scale factor;
• divide -pickerView:widthForComponent: by the scale factor;
• divide -pickerView:rowHeightForComponent: by the scale factor;
• if you have labels / text in components' rows, the font size must by divided by the factor as well.

 // consider CGFloat _scaleFactor = 0.5; - (void)viewDidLoad { [super viewDidLoad]; self.pickerView.transform = CGAffineTransformMakeScale(_scaleFactor, _scaleFactor); } - (CGFloat)pickerView:(UIPickerView *)pickerView rowHeightForComponent:(NSInteger)component { return desiredHeight / _scaleFactor; } - (CGFloat)pickerView:(UIPickerView *)pickerView widthForComponent:(NSInteger)component; { return desiredWidth / _scaleFactor; } - (CGFloat)pickerView:(UIPickerView *)pickerView rowHeightForComponent:(NSInteger)component { return desiredHeight / _scaleFactor; } - (UIView *)pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(UIView *)view { UILabel *label = (UILabel *)view; if (!label) { label = [[UILabel alloc] init]; CGFloat desiredFontSize; label.font = [UIFont systemFontOfSize:(desiredFontSize / _scaleFactor)]; } // set text from data source return label; } 

The difference versus blocking out not-to-be-visible rows is quite subtle; however, in my opinion the scaled picker on the right looks way more natural... In fact, that makes a big difference.

(scale factor used is 0.5)

Answer 4

Try following code -

#pragma mark - picker datasource methods
    -(NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView
    {
        return 1;
    }

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

    #pragma mark - picker delegate
    -(NSString *) pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component
    {
        return [YourArray objectAtIndex:row];//your array that contains data

    }

Answer 5

Please try below code :

//Method to define how many columns/dials to show
- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView
{
    return 3;
}


// Method to define the numberOfRows in a component using the array.
- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent :(NSInteger)component 
{ 
    if (component==0)
    {
        return [arrFirst count];
    }
    else if (component==1)
    {
        return [arrSecond count];
    }
    else
    {
        return [arrThird count];
    }

}


// Method to show the title of row for a component.
- (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component
{

    switch (component) 
    {
        case 0:
            return [arrFirst objectAtIndex:row];
            break;
        case 1:
            return [arrSecond objectAtIndex:row];
            break;
        case 2:
            return [arrThird objectAtIndex:row];
            break;    
    }
    return nil;
}

Thanks, Do let me know if you have any problems.