Center UIPickerView Text

Question

So I have a uipickerview with rows that only contain the number 0-24 and it looks a bit silly since the numbers are left aligned leaving a huge gap on the right of the pickerview.

Is there an easy way to center align text in a uipickerview?

Answer 1

Just set the width to the width of the view and the text will center automatically:

- (CGFloat)pickerView:(UIPickerView *)pickerView widthForComponent:(NSInteger)component {
    return self.view.bounds.size.width; 
}

Answer 2

Remember, the view in

- (UIView *)pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(UIView *)view

is actually a UITableViewCell, so you can work with it like:

- (UIView *)pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(UIView *)view
{
    static NSString *cellIdentifier = @"pickerViewCell";
    UITableViewCell *cell = (UITableViewCell*)view;

    if(cell==nil)
    {
        cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellIdentifier] autorelease];
        /** customize the cell **/
    }

    /** set the label **/
    cell.textLabel.text = [dataSource objectAtIndex:row];

    return cell;
}

Answer 3

Below one also working fine -

- (UIView *)pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(UIView *)view
{
    UILabel *lbl = [[UILabel alloc] initWithFrame:CGRectMake(0.0f, 0.0f, [pickerView rowSizeForComponent:component].width, [pickerView rowSizeForComponent:component].height)];
    lbl.text = [reservePickerArray objectAtIndex:row];
    lbl.adjustsFontSizeToFitWidth = YES;
    lbl.textAlignment=UITextAlignmentCenter;
    lbl.font=[UIFont systemFontOfSize:20];
    return lbl;
}

Cheers!!

Answer 4

A little easier now in iOS 6... There's a new method you can implement to return an attributed string... And you can define alignment in attributed strings.

- (NSAttributedString *)pickerView:(UIPickerView *)pickerView attributedTitleForRow:(NSInteger)row forComponent:(NSInteger)component {
    NSString *text = [NSString stringWithFormat:@"R%d C%d", row, component];
    NSMutableAttributedString *as = [[NSMutableAttributedString alloc] initWithString:text];
    NSMutableParagraphStyle *mutParaStyle=[[NSMutableParagraphStyle alloc] init];
    mutParaStyle.alignment = NSTextAlignmentCenter;
    [as addAttribute:NSParagraphStyleAttributeName value:mutParaStyle range:NSMakeRange(0,[text length])];
    return as;
}

Answer 5

- (UIView *)pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(UIView *)view
{
    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 300, 37)];
    label.text = [NSString stringWithFormat:@"something here"];
    label.textAlignment = NSTextAlignmentCenter; //Changed to NS as UI is deprecated.
    label.backgroundColor = [UIColor clearColor];
    [label autorelease];
    return label;
}

or something like this.

Answer 6

You can implement this delegate method, which returns a CGFloat

- (CGFloat)pickerView:(UIPickerView *)pickerView widthForComponent:(NSInteger)component

This is called on the picker view to determine row width.