UIPickerView - 为多行行使用自定义视图 - 需要布局建议 [英] UIPickerView - using custom views for multi-line rows - need layout advice

问题描述

我有一个UIPickerView，它会显示用户的项目列表。我希望每个项目都显示为多行文本，每行使用不同的字体大小。粗略的模型如下所示。这将允许显示比默认UIPickerView的单行更多的文本。

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指出我要使用pickerView：viewForRow：forComponent：在UIPickerView的委托中重用View。这似乎是要走的路，因为它会让我为各行提供我自己的自定义视图。

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.

我的想法是创建一个有2个UILabel的UIView子视图，每行一个文本。这样我可以为每一行应用不同的字体。我尝试了以下，但布局似乎没有工作。我需要将这些线条放在另一条线之上。以下是我尝试通过面具将第二行浮动到底部。

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

这会产生以下结果。有关获取两个UILabel视图的建议，以便它们堆叠在一起，产生所需的多行结果？

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?

推荐答案

你需要设置两个标签的框架和字体。

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

根据需要调整标签的高度。根据需要调整 y l2 的来源。

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

这篇关于UIPickerView - 为多行行使用自定义视图 - 需要布局建议的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！