UIPickerView - 删除曲率并添加文本

时间:2014-09-05 18:01:54

标签: ios uipickerview uipickerviewdatasource uipickerviewdelegate

我正在尝试创建一个UIPicker,我可以选择分钟和秒。这是代码:

- (NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView
{
    return 2;
}

- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component
{
    if(component == 0)
        return 24;

    return 60;
}

- (CGFloat)pickerView:(UIPickerView *)pickerView rowHeightForComponent:(NSInteger)component
{
    return 30;
}

- (NSAttributedString *)pickerView:(UIPickerView *)pickerView attributedTitleForRow:(NSInteger)row forComponent:(NSInteger)component
{
    NSMutableParagraphStyle *paragraphStyle = [[NSMutableParagraphStyle alloc] init];
    [paragraphStyle setAlignment:NSTextAlignmentCenter];
    [paragraphStyle setTailIndent:20];

    NSString *value = [NSString stringWithFormat:@"%d", row];

    return [[NSAttributedString alloc] initWithString:value
                                           attributes:@{NSParagraphStyleAttributeName:paragraphStyle}];
}

- (CGFloat)pickerView:(UIPickerView *)pickerView widthForComponent:(NSInteger)component
{
    return 160;
}

如何摆脱恼人的曲率并制作垂直柱?

另外,如何在选择行中添加“min”和“sec”?

picker

3 个答案:

答案 0 :(得分:1)

我发现更改组件的宽度会影响UIPickerView应用于所选行的偏移或曲率效果。在您的委托实现pickerView(_ pickerView: UIPickerView, widthForComponent component: Int) -> CGFloat中,尝试返回足够大的值来显示您想要显示的信息,例如40或60,只显示一个简单数字的两个字符。要更改列/组件之间的间距,您可以添加为行数返回0的额外组件,并使用这些空组件的宽度移动并调整要显示数据的组件的位置。

答案 1 :(得分:0)

由于您将其制作成24分钟和60秒,我会用24小时日期选择器伪造它。 IMO

  

如何摆脱恼人的曲率并制作垂直柱?

你不是。否则,使用2个表视图或其他东西实现自己的。

  

另外,我怎样才能添加" min"和"秒"到选择行?

NSString *value;

if(component == 0) value = [NSString stringWithFormat:@"%d min", row];
else  value = [NSString stringWithFormat:@"%d sec", row];

答案 2 :(得分:0)

正如其他人所说,现有的API无法做到。如果你想这样做,你必须编写自己的代码才能做到这一点。我过去创建了一个水平值选择器,它很烦人,但相当直接。为此,我使用了UILabel,图片和UIScrollView

首先设置UI

  1. 取出标签并将其粘贴在滚动视图中。使用所需的值填充标签。
  2. 设置滚动视图的高度,宽度和位置,以显示您希望用户查看的内容。如果您希望用户看到所选项目,顶部为3,底部为3,则将其设置为足以在标签中显示7行。
  3. 您的图像是"选择指标"您将其叠加在滚动视图中的中心项目顶部,以向用户显示这是所选项目。
  4. 如果您想要一个漂亮的淡入淡出效果,因为您的值会结束,您可以创建一个白色(或应用程序所在的任何背景)块,该块淡化为透明并叠加在滚动视图的顶部和底部。这会在组件的边缘处创建淡入数字效果。
  5. 在大多数情况下,它显示工作......但我们需要后端代码来支持它。

    1. 创建UIScrollViewDelegate并实施scrollViewDidScroll:,当用户更改滚动视图时,它会告诉您滚动视图的内容偏移量。
    2. 编写一个方法,将滚动视图内容偏移转换为" item"被选中了。如果您知道标签中有多少行(并且您应该),并且您知道标签的高度(并且您应该)采用标签高度/线条来获得每个标签的高度" item"是。然后你取内容偏移量,除以项目高度,将它放在地板上,然后你知道你所在的那条线......同时记住内容偏移量来自滚动视图的TOP,所以加上一半的高度。 :)
    3. 所以基本功能已经完成并且有效,但它并不漂亮。

      所选项目并未以我的选择图片为中心,这只是视觉上的丑陋。但是你可以很容易地修复它。您知道列表中项目的高度,并且您知道选择了哪个项目,因此以编程方式滚动滚轮以使该项目居中。

      我遇到的另一个问题是势头。就像一个真正的轮子,我希望我的选择器具有动力,所以如果你给它一个硬翻,它会持续一段时间,但如果你给它一个轻柔的轻弹它会停止相当快。我有很长的名单,如果人们从7到70,我希望他们能够轻松地做到这一点。如果您对此感兴趣,我可以告诉您我是如何做到这一点并在我使用我的代码回到机器上时发布一些代码。