Visually centering a UILabel to it's superview when the actual center looks off

Question

I have a container UIView , and a UILabel . The container view size is set, I then add text to the UILabel , call sizeToFit on the label, and add the label as a subview of the container view.

I then use the following code to center the label inside the container view:

viewCountLabel.frame = CGRectMake(viewCountContainer.frame.size.width/2 - viewCountLabel.frame.size.width/2, viewCountContainer.frame.size.height/2 - viewCountLabel.frame.size.height/2, viewCountLabel.frame.size.width, viewCountLabel.frame.size.height);

This is pretty standard code to center something to it's superview/container, and it always works pretty well.

However, right now I have a small problem. This label's text is a simple number. It could be 1, 9, 15, 22, etc.

My problem is that when I center everything, some numbers look off center even though they technically are centered perfectly.

Here's an example pic with borders for both the container and the label so you can see that they are centered perfectly:

But here's how it looks without the borders:

The 15 does not look like it's centered even though it technically is. It looks like its a little too far to the right. If I subtract 2 or 3 from the x value, it will visually appear centered, but see that's the problem.

How can you setup logic to "visually center" various values for a label like this? I feel like setting a bunch of if statements based on the text value is overkill and only applying a bandaid to the problem.

I have also tried using NSTextAlignmentCenter and that does not make a difference. I'm not sure if I'm using NSTextAlignmentCenter incorrectly, or if there's a potential problem with sizeToFit .

You'll notice that that label's blue border has extra space on all sides, but most importantly for this problem it has extra space on the left and right sides. I feel like that could be causing this issue, but I'm not sure how to fix that or if that's even the problem.

Here is my code:

// Setup view count label container
UIView *viewCountContainer = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 95, 95)];
viewCountContainer.frame = CGRectMake(self.view.frame.size.width/2 - viewCountContainer.frame.size.width/2, 87, viewCountContainer.frame.size.width, viewCountContainer.frame.size.height);


// Setup + add number label to container
UILabel *viewCountLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, self.pushModal.frame.size.width, 95)];
viewCountLabel.textAlignment = NSTextAlignmentCenter;
viewCountLabel.font = [UIFont fontWithName:@"HelveticaNeue-Light" size:72];
viewCountLabel.textColor = [UIColor colorWithRed:0.278 green:0.278 blue:0.278 alpha:1];
viewCountLabel.text = [NSString stringWithFormat:@"%d", viewCount];
[viewCountLabel sizeToFit];

// Center the label to it's super view (viewCountContainer)
viewCountLabel.frame = CGRectMake(viewCountContainer.frame.size.width/2 - viewCountLabel.frame.size.width/2, viewCountContainer.frame.size.height/2 - viewCountLabel.frame.size.height/2, viewCountLabel.frame.size.width, viewCountLabel.frame.size.height);

[viewCountContainer addSubview:viewCountLabel];
[self.view addSubview:viewCountContainer];

Answer 1

Unfortunately there is no "perfect" way to do this. I've added character spacing to the label, tried setting its width to the superview's width and centering, etc. but you'll never be able to do this dynamically and get it perfect this way.

The only way I could see this being perfect every time is if you made the UILabel first, and then programmatically drew a circle around it, and then centered the label.

That or the hard way of adding logic for every number and visually centering it that way.

Answer 2

数字可以通过使用monospacedDigitSystemFont(ofSize:weight:)和textAlignment = .center