10

我正在尝试修改 UIPickerView 曲率,使其看起来像 iOS 7 计时器。

这是我所拥有的: 在此处输入图像描述

请注意 2 和 4 如何与所选行中的 3 显着偏移。有没有办法让它更“平坦”,iOS7 中的 la Timer,其中 2 和 4 直接位于 3 的上方和下方?

这是我到目前为止所尝试的:

  1. 玩弄- (CGFloat)pickerView:(UIPickerView *)pickerView widthForComponent:(NSInteger)component

  2. 使用自定义 UIView 和自定义 UILabel 偏移量

似乎没有一个工作。

有什么帮助吗?

4

4 回答 4

8

偏移是由于选择器指示器所在的单独的凸起平面造成的。这实际上是对这种现实生活视角(嵌套、印刷、透明的圆柱体)的相当准确的渲染。Apple 在时钟应用程序中所做的是右对齐选择器标签。这可确保数字与其单位标签之间的间距保持不变。你可以做同样的事情。

首先,在您的选择器视图委托中,您要实现-pickerView:attributedTitleForRow:forComponent:代替-pickerView:titleForRow:forComponent:。(看起来您已经在给定白色文本颜色的情况下完成了此操作。)您将使用NSParagraphStyle字符串属性。您需要在段落样式上设置两个属性:对齐和尾部缩进。对齐方式应设置为NSTextRightAlignment。尾部对齐将取决于您希望标签离组件右边缘多远。如果您有多个组件,则需要使用-pickerView:widthForComponent 设置组件的宽度:. 如果要将曲率保持在最小,请将组件宽度设置为尾缩进的大约两倍。

注意:如果您的选取器恰好有两个组件,则每个组件的宽度必须小于选取器宽度的 ⅓。

这是一个代码示例:

- (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;
}
于 2014-02-07T18:49:27.053 回答
2

取而代之的是 2 个组件,尝试制作 4 个组件,类似于此代码段:

- (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;
}
于 2013-11-07T01:44:20.717 回答
1

我通过使用解决了布局问题

- (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

该链接显示当 UIPickerView 组件的大小大于 106 时布局中断。所以我将部分宽度设为 106。

我通过使 UIPicker 有 3 个组件在中间添加了空间。

于 2013-11-20T23:40:28.590 回答
0

我注意到如果组件数== 1,那么就没有这种缩放+偏移效果。

我为解决此问题而实施的 hack 是在屏幕上显示 2 个 UIPickerView 并相应地实现委托和数据源功能。

于 2013-11-07T00:51:06.053 回答