具有自定义固定标签和自动布局的 UiPickerView

Question

我需要实现一个 UIPickerView 来选择小时、分钟和秒。我需要在选择器旋转时保持固定的每个组件旁边有一个标签。例如，您可以查看 Apple Clock 应用程序的计时器部分。我放一张图供参考

当然我需要一个有 3 个组件的选择器，但问题是一样的。我找到了很多将标签添加为子视图并使用一些框架和手动调整对其进行定位的解决方案，但无法使其与 AutoLayout 一起使用，而且我在网上找不到解决方案。有人解决了这个问题吗？谢谢

Answer 1

我在我开发的应用程序中遇到了类似的问题，并做出以下决定：

我。创建 UIPicker

二。找到显示的选择器行的中点。

三。将两个 UILabel 添加到屏幕并在 - (void)layoutSubview; 中确保标签始终位于中点旁边。

我的项目只需要纵向模式支持，但横向模式应该也能正常工作。只需选择足够宽的行宽，这样您就不会与选择器内的数据有任何重叠。这是 UIPicker 的一段代码：

#pragma mark - Picker View

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

- (NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component
{
    if(component == 0) {
        return self.hourPickerData.count;
    } else {
        return self.minutePickerData.count;
    }
}

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

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

-(UIView *)pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(UIView *)view
{
    NSString *text;

    if(component == 0) {
        text = self.hourPickerData[row];
    } else {
        text = self.minutePickerData[row];
    }

    UILabel *label = (UILabel*)view;
    if(view == nil) {
        label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 40, 30)];
        label.backgroundColor = [UIColor clearColor];
        label.text = text;
        label.textAlignment = NSTextAlignmentCenter;
        label.textColor = LYTiT_HEADER_COLOR;
        label.font = [UIFont fontWithName:LT_HELVETICA size:16];
    }

    return label;
}

Answer 2

我认为其他人可以从我的补充回答中受益。

对于i个组件，下面应该在你的pickerView初始化方法（viewDidLoad）中，

    float fontSize = 20;
    float labelWidth = self.view.frame.size.width / [self.myPickerView numberOfComponents];
    float y = (self.myPickerView.frame.size.height / 2) - (fontSize / 2);
    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(labelWidth* i, y, labelWidth, fontSize)];
    label.text = @"Label";
    label.font = [UIFont boldSystemFontOfSize:fontSize];
    label.backgroundColor = [UIColor clearColor];
    label.shadowColor = [UIColor whiteColor];
    label.shadowOffset = CGSizeMake (0,1);
    label.textAlignment = NSTextAlignmentRight;


    [self.myPickerView insertSubview:label aboveSubview:[self.myPickerView.subviews objectAtIndex:[self.myPickerView.subviews count] - 1]];

Answer 3

Swift 4.2

创建 pickerView 后添加下一个代码：

// Fixed labels
let font = UIFont.systemFont(ofSize: 20.0)
let fontSize: CGFloat = font.pointSize
let componentWidth: CGFloat = self.view.frame.width / CGFloat(agePickerView.numberOfComponents)
let y = (agePickerView.frame.size.height / 2) - (fontSize / 2)

let label1 = UILabel(frame: CGRect(x: componentWidth * 0.65, y: y, width: componentWidth * 0.4, height: fontSize))
label1.font = font
label1.textAlignment = .left
label1.text = "Years"
label1.textColor = UIColor.lightGray
agePickerView.addSubview(label1)

let label2 = UILabel(frame: CGRect(x: componentWidth * 1.65, y: y, width: componentWidth * 0.4, height: fontSize))
label2.font = font
label2.textAlignment = .left
label2.text = "Years"
label2.textColor = UIColor.lightGray
agePickerView.addSubview(label2)

let label3 = UILabel(frame: CGRect(x: componentWidth * 0.05, y: 0, width: componentWidth , height: fontSize))
label3.font = font
label3.textAlignment = .center
label3.text = "From"
label3.textColor = UIColor.lightGray
agePickerView.addSubview(label3)

let label4 = UILabel(frame: CGRect(x: componentWidth * 0.95, y: 0, width: componentWidth , height: fontSize))
label4.font = font
label4.textAlignment = .center
label4.text = "To"
label4.textColor = UIColor.lightGray
agePickerView.addSubview(label4)

具有自定义固定标签和自动布局的 UiPickerView

UiPickerView with custom fixed label and autolayout

cocoa

uipickerview