iOS 7 UIPickerView non-selected row curvature modification multiple components

Question

I am trying to modify the UIPickerView curvature to look like the iOS 7 Timer.

Here is what I have:

Note how the 2 and 4 are offset significantly from the 3 in the selected row. Is there a way to make it more 'flat', a la Timer in iOS7, where the 2 and 4 are directly above and below the 3?

Here is what I have tried so far:

1. Play around with - (CGFloat)pickerView:(UIPickerView *)pickerView widthForComponent:(NSInteger)component

2. Use custom UIView and a custom UILabel offset within

None seem to work.

Any help?

Answer 1

The offset is due to the separate, raised plane on which the selector indicator lies. This is actually a fairly accurate rendering of such a real life perspective (of nested, printed, clear cylinders). What Apple does in the Clock app is to right align the picker labels. This ensures that the spacing between the number and its unit label remains constant. You can do the same thing.

First off, in your picker view delegate you want to implement -pickerView:attributedTitleForRow:forComponent: in lieu of -pickerView:titleForRow:forComponent:. (It looks like you’ve already done this given the white text color.) You will use the NSParagraphStyle string attribute. You will need to set two properties on the paragraph style: alignment and tail indent. The alignment should be set to NSTextRightAlignment. The tail alignment will depend on how far you want the labels to sit from the right edge of the component. If you have more than one component, you will need to set the width of the component using -pickerView:widthForComponent:. If you want to keep the curvature to a minimum, set the component width to approximately double the tail indent.

NOTE: If your picker has exactly two components, the width of each component must be less than ⅓ the width of the picker.

Here is a code example:

- (NSAttributedString *)pickerView:(UIPickerView *)pickerView attributedTitleForRow:(NSInteger)row forComponent:(NSInteger)component
{
    NSMutableParagraphStyle *paragraphStyle = [[NSMutableParagraphStyle alloc] init];
    [paragraphStyle setAlignment:NSTextAlignmentRight];
    [paragraphStyle setTailIndent:150];

    return [[NSAttributedString alloc] initWithString:@"42"
                                           attributes:@{NSParagraphStyleAttributeName:paragraphStyle}];
}

- (CGFloat)pickerView:(UIPickerView *)pickerView widthForComponent:(NSInteger)component
{
    return 300;
}

Answer 2

Instead 2 components, try to make 4 components, similar to this snippet:

- (void)viewDidLoad
{
    [super viewDidLoad];
     self.model  = @[@"1",@"2",@"3",@"4",@"5",@"6"];
}


- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView
{
    return 4;
}

- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component
{
    NSInteger numberOfRows;
    if(component == 0 || component == 2)
    {
        numberOfRows = [self.model count];
    }
    else
    {
        numberOfRows = 1;
    }
    return numberOfRows;
}
- (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component
{
    NSString* title;
    switch (component) {
        case 0:
        case 2:
            title = self.model[row];
            break;
        case 1:
            title = @"ft";
            break;
        case 3:
            title = @"in";
            break;
        default:
            break;
    }
    return title;
}

Answer 3

I fixed the layout problem by using

- (CGFloat)pickerView:(UIPickerView *)pickerView widthForComponent:(NSInteger)component{
    switch (component){
        case 0:
            return 106.0f;
        case 1:
            return 50.0f;
        case 2:
            return 106.0f;
    }
    return 0;
}

https://stackoverflow.com/a/19743682/809671

The link says layout breaks when UIPickerView component's size is greater than 106. So I made my section width 106.

I added the space in the middle by making the UIPicker have 3 components.