iOS 7 UIPickerView 非选中行曲率修改多个组件

Question

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

这是我所拥有的：

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

这是我迄今为止尝试过的：

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

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

似乎没有一个工作。

有什么帮助吗？

Answer 1

偏移是由于选择器指示器所在的单独的凸起平面造成的。这实际上是对这种现实生活视角（嵌套、印刷、透明的圆柱体）的相当准确的渲染。 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;
}

Answer 2

改为2个组件，尝试做4个组件，类似这个sn-p：

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

我通过使用修复了布局问题

- (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 个组件在中间添加了空间。

Answer 4

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

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