UiPickerView with custom fixed label and autolayout

Question

I need to implement a UIPickerView to choose hours, minutes and seconds. I need to have a label, next to each component that stay fixed when the picker spin. For example you can look at the timer section of the Apple Clock app. I put an image for reference

of course I need a picker with 3 components but the problem is the same. I found a lot of solution to add a label as a subview and position it using some frames and manual adjustment but a can' t make it work with AutoLayout and i don' t find a solution on the web. Anyone has solved this problem? thanks

Answer 1

Swift 4.2

After create pickerView add next code:

// 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)

Answer 2

I thought others could benefit from my additional answer.

For i components, the following should be in your pickerView initialization method (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]];