Question

我正在尝试将UIPickerView曲率修改为iOS 7 Timer。

以下是我所拥有的： enter image description here

注意2和4如何与所选行中的3显着偏移。有没有办法让它更“扁平”，在iOS7中是一个定时器，其中2和4直接位于3的上方和下方？

这是我到目前为止所尝试的内容：

使用- (CGFloat)pickerView:(UIPickerView *)pickerView widthForComponent:(NSInteger)component
在

似乎无效。

任何帮助？

Answer 1

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

首先，在你的选择器视图委托中你要实现 -pickerView：attributionTitleForRow：forComponent：来代替 -pickerView：titleForRow：forComponent：。（看起来你已经用白色文本颜色完成了这个。）你将使用 NSParagraphStyle 字符串属性。您需要在段落样式上设置两个属性：alignment和tail indent。对齐应设置为 NSTextRightAlignment 。尾部对齐将取决于您希望标签从组件的右边缘坐多远。如果您有多个组件，则需要使用 -pickerView：widthForComponent：设置组件的宽度。如果要将曲率保持在最小值，请将组件宽度设置为尾部缩进的大约两倍。

注意：如果您的选择器只有两个组件，则每个组件的宽度必须小于选择器宽度的1/3。

这是一个代码示例：

- (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个组件，类似于此片段：

- (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，则没有这种缩放+偏移效果。

我实现修复此问题的方法是在屏幕上显示2个UIPickerViews并相应地实现委托和数据源函数。

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

4 个答案: