Add header to UIPickerView

Question

I created the UIPickerView with 4 components.
Can I add the header title for each component in that UIPickerView?

Thanks for any advice

Answer 1

Swift version, based on @greentor's answer with some improvements:

var labelTexts = ["Months", "Weeks", "Days", "Hours", "Minutes"]

override func viewDidAppear(animated: Bool) {

    let labelWidth = itemPicker.frame.width / CGFloat(itemPicker.numberOfComponents)

    for index in 0..<labelTexts.count {
        let label: UILabel = UILabel.init(frame: CGRectMake(itemPicker.frame.origin.x + labelWidth * CGFloat(index), 0, labelWidth, 20))
        label.text = labelTexts[index]
        label.textAlignment = .Center
        itemPicker.addSubview(label)
    }

Note that this might work incorrectly if called in ViewWillAppear or earlier because the UIPickerView won't know its frame dimensions at that point yet.

Answer 2

One other technique I use from time to time is the make the header the first row in each column:

You need to increment the number of rows of course..

Answer 3

I show 3 components and then use a UIView to show a title (UILabel) centred above each component (you can easily amend this for more or fewer components):

-(void)labelForDays
{
    NSString *strDay = @"Days";
    float lblWidth = self.pickerDayHourMin.frame.size.width / self.pickerDayHourMin.numberOfComponents;
    float lblXposition = self.pickerDayHourMin.frame.origin.x;
    float lblYposition = (self.pickerDayHourMin.frame.origin.y);

    UILabel *lblDay = [[UILabel alloc] initWithFrame:CGRectMake(lblXposition,
                                                                lblYposition,
                                                                lblWidth,
                                                                20)];
    [lblDay setText:strDay];
    [lblDay setTextAlignment:NSTextAlignmentCenter];

    [self.view addSubview:lblDay];
}

Then a label for 2nd component

-(void)labelForHours
{
    NSString *strHours = @"Hours";
    float lblWidth = self.pickerDayHourMin.frame.size.width / self.pickerDayHourMin.numberOfComponents;
    float lblXposition = self.pickerDayHourMin.frame.origin.x;
    float lblYposition = (self.pickerDayHourMin.frame.origin.y);

    UILabel *lblHours;
    if (self.pickerDayHourMin.numberOfComponents ==3)
    {
        lblHours = [[UILabel alloc] initWithFrame:CGRectMake((lblXposition + lblWidth),
                                                                    lblYposition,
                                                                    lblWidth,
                                                                    20)];
    }


    [lblHours setText:strHours];
    [lblHours setTextAlignment:NSTextAlignmentCenter];

    [self.view addSubview:lblHours];
}

and finally a label centred above the 3rd component

-(void)labelForMinutes
{
    NSString *strMinute = @"Minutes";
    float lblWidth = self.pickerDayHourMin.frame.size.width / self.pickerDayHourMin.numberOfComponents;
    float lblXposition = self.pickerDayHourMin.frame.origin.x;
    float lblYposition = (self.pickerDayHourMin.frame.origin.y);

    UILabel *lblMinute;
    if (self.pickerDayHourMin.numberOfComponents ==3)
    {
        lblMinute = [[UILabel alloc] initWithFrame:CGRectMake((lblXposition + lblWidth + lblWidth),
                                                           lblYposition,
                                                           lblWidth,
                                                           20)];
    }


    [lblMinute setText:strMinute];
    [lblMinute setTextAlignment:NSTextAlignmentCenter];

    [self.view addSubview:lblMinute];
}

Answer 4

You can use UIlabel above the UIPicker view,that works well