UIPickerView - using custom views for multi-line rows - need layout advice

Question

I have a UIPickerView which will display a list of items for the user. I'd like each item to be presented as multiple lines of text using a different font size for each line. A rough mockup is shown below. This will allow presenting more text than can fit in the single line of the default UIPickerView.

bdesham pointed me towards using the pickerView:viewForRow:forComponent:reusingView in the delegate for the UIPickerView. This seems to be the way to go as it'll let me provide my own custom view for the individual rows.

My thought was to create a UIView which had 2 UILabel subviews, one for each line of text. This way I could apply a different font to each line. I tried the below, but the layout doesn't seem to be working. I need the lines to be one on top of the other. The below was my attempt at floating the second line to the bottom via the mask.

#define VIEWTAG_LINE1 1
#define VIEWTAG_LINE2 2

- (UIView*)pickerView:(UIPickerView *)thePickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(UIView *)view
{
    UIView* v;
    if (view)
        v = view;
    else
    {
        v = [[[UIView alloc] init] autorelease];

        UILabel* l1 = [[[UILabel alloc] init] autorelease];
        l1.tag = VIEWTAG_LINE1;
        [v addSubview: l1];

        UILabel* l2 = [[[UILabel alloc] init] autorelease];
        l2.tag = VIEWTAG_LINE2;
        l2.autoresizingMask = UIViewAutoresizingFlexibleTopMargin;
        [v addSubview: l2];
    }

    UILabel* l1 = (UILabel*)[v viewWithTag: VIEWTAG_LINE1];
    l1.text = [NSString stringWithFormat: @"row %d line 1", row];
    [l1 sizeToFit];

    UILabel* l2 = (UILabel*)[v viewWithTag: VIEWTAG_LINE2];
    l2.text = [NSString stringWithFormat: @"row %d line 2", row];
    [l2 sizeToFit];

    [v sizeToFit];

    return v;
}

This produces the below. Any suggestions on getting the two UILabel views so they're stacked on top of each other producing the desired multi-line result?

Answer 1

You need to set the frames and font of the two labels.

    v = [[[UIView alloc] init] autorelease];

    UILabel* l1 = [[[UILabel alloc] initWithFrame:CGRectMake(0, 0, 320, 24)] autorelease];
    li.font = [UIFont sytemFontOfSize:22]; // choose desired size
    l1.tag = VIEWTAG_LINE1;
    [v addSubview: l1];

    UILabel* l2 = [[[UILabel alloc] initWithFrame:CGRectMake(0, 24, 320, 16)] autorelease];
    l2.font = [UIFont sytemFontOfSize:14]; // choose desired size
    l2.tag = VIEWTAG_LINE2;
    [v addSubview: l2];

Adjust the labels' height as needed. Adjust the y origin of l2 as needed.

Answer 2

If anyone's having this problem with Auto Layout, set translatesAutoresizingMaskIntoConstraints to YES (which is the default value). I was setting it to NO, which was causing all the problems.