How can I centre both vertically and horizontally in a UILabel after resizing the text to fit width (1 line label)?

Question

This is really frustrating me. I notice there are a lot of questions regarding this but I can't seem to get any of it to work. I have tried UILabel. I have tried UITextField (which works to a certain extent but some of the text doesn't get resized all the way if there is too much text). I have tried simulating the label as a UIButton. I can't get anything to produce the effect I want. I have set the background colour of my UILabel as red to give an idea of its placement. Keep in mind that I wish the frame of UILabel to stay exactly this size and place. If this is easier with UITextField or UIButton (maybe I did not do it the right way) I am not opposed to using those as solutions.

As you can see from above image, in my red UILabels, the text is getting adjusted to fit the width correctly and is being centred horizontally, however it is not getting centred vertically too (which I want). Here is my code:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *CellIdentifier = @"Cell";

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];

    if(cell == nil)
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];

    else
        [[cell.contentView subviews] makeObjectsPerformSelector:@selector(removeFromSuperview)];


    UILabel *numberLabel = [[UILabel alloc] initWithFrame:CGRectMake(30, 0, 60, 40)];
    numberLabel.font = [UIFont boldSystemFontOfSize:30];
    numberLabel.adjustsFontSizeToFitWidth = true;
    numberLabel.textAlignment = NSTextAlignmentCenter;
    [numberLabel setBackgroundColor:[UIColor redColor]];


    UILabel *nameLabel = [[UILabel alloc] initWithFrame:CGRectMake(100, 0, self.tableView.frame.size.width-numberLabel.frame.size.width-55, 40)];
    nameLabel.font = [UIFont boldSystemFontOfSize:20];
    nameLabel.adjustsFontSizeToFitWidth = true;
    nameLabel.textAlignment = NSTextAlignmentCenter;
    [nameLabel setBackgroundColor:[UIColor yellowColor]];


    if(indexPath.section == 0) // Weekday
    {
        numberLabel.text = weekdayBusesNumbers[indexPath.row];
        nameLabel.text = weekdayBusesNames[indexPath.row];
    }

    else if(indexPath.section == 1) // Saturday
    {
        numberLabel.text = saturdayBusesNumbers[indexPath.row];
        nameLabel.text = saturdayBusesNames[indexPath.row];
    }

    else if(indexPath.section == 2) // Sunday
    {
        numberLabel.text = sundayBusesNumbers[indexPath.row];
        nameLabel.text = sundayBusesNames[indexPath.row];
    }


    [cell.contentView addSubview:numberLabel];
    [cell.contentView addSubview:nameLabel];


    return cell;
}

Answer 1

You are setting the label as a one-line label (by default) and setting its height at a fixed height, thus fixing its position:

UILabel *numberLabel = [[UILabel alloc] initWithFrame:CGRectMake(30, 0, 60, 40)];

Thus, you are getting a constant baseline position for all your labels, regardless of the font size. So each letter rises up from the same baseline regardless of how tall that letter is.

Instead, use constraints. Constrain the vertical center of the label to the vertical center of the cell, give it a fixed width and a fixed left edge, and allow the cell to change its own height as its content and (therefore) its font size changes.

You can put a red rectangle behind the label, so the user won't be able to tell the difference between the label and red rectangle. Thus, the text will appear vertically centered in the red rectangle, which is the effect you are after.