为什么我的 UILabel 不居中？

Question

I'm trying to center my UILabel horizontally. This is what it ends up looking like (notice its no center).

    ReflectionView *aReflectionView = [[ReflectionView alloc]initWithFrame:CGRectMake(((self.view.bounds.size.width / 2) - 150), 40, 300, 90)];
    UILabel *aLabel = [[UILabel alloc]initWithFrame:CGRectMake(((self.view.bounds.size.width / 2) - 150), 0, 300, 90)];
    aLabel.textAlignment = UITextAlignmentCenter;
    aLabel.text = @"1 lbs";
    self.weightLabel = aLabel;
    [aReflectionView addSubview:self.weightLabel];
    self.weightReflectionView = aReflectionView;
    [self.view addSubview:self.weightReflectionView ];
    [self.weightReflectionView  updateReflection];

Answer 1

The textAlignment property will align text within the frame of the UILabel , not outside of it. My ASCII skills are a little rusty, but here's what I mean. Consider the labels below, where the | indicates the left/right edge of the label.

|173 lbs    | => left aligned
|    173 lbs| => right aligned
|  173 lbs  | => center aligned (not exactly centered in terms of its superview)

Now consider the same label contained within another view, where the outer [] represent the edges of the containing view, and the inner | represents the edges of the contained label. Notice how the inner label is not exactly centered within its superview, and is slightly pushed to the right (2 spaces away from the left, and 1 space closer to the right).

[  |173 lbs    | ] => left aligned
[  |    173 lbs| ] => right aligned
[  |  173 lbs  | ] => center aligned

If you want the label to be center aligned within the superview or the screen at all times, you would want to make sure the width of the label matches its container, and then set textAlignment to center. Here's how:

[|173 lbs      |] => left aligned
[|      173 lbs|] => right aligned
[|   173 lbs   |] => center aligned (perfectly aligned)

This is a common case where you want the subview to match the exact size of the superview. You can use the bounds property to easily do that.

ReflectionView *aReflectionView = [[ReflectionView alloc] initWithFrame:..];
// Use the bounds of the superview to set the subview's frame.
UILabel *aLabel = [[UILabel alloc] initWithFrame:aReflectionView.bounds];

As a UI debugging tip, try changing the background of the problematic view (label) to show exactly what area it is taking, which usually helps solving many such problems.

Answer 2

Just for debugging purposes, try setting the backgroundColor of aLabel and aReflectionView to see where they're being placed.

aLabel.backgroundColor = [UIColor redColor];
aReflectionView.backgroundColor = [UIColor blueColor];

You should see that the aReflectionView is properly centered within its superview, but the aLabel , contained within it, is not. Why not? Because of this line:

UILabel *aLabel = [[UILabel alloc]initWithFrame:CGRectMake(((self.view.bounds.size.width / 2) - 150), 0, 300, 90)];

Since aLabel is contained within aReflectionView , it should be centered within the aReflectionView bounds, not the bounds of self.view . Scroll right to see the change:

UILabel *aLabel = [[UILabel alloc]initWithFrame:CGRectMake(((aReflectionView.bounds.size.width / 2) - 150), 0, 300, 90)];

For your purposes, it may be better to make aLabel simply fill aReflectionView :

UILabel *aLabel = [[UILabel alloc]initWithFrame:aReflectionView.bounds];

Answer 3

The problem is not the alignment of the text in the UILabel, but rather the alignment of the UILabel itself. Specifically, you're creating the UILabel to be center aligned according to the width of the self.view (notably the width), but you're adding it to the aReflectionView (which is narrower, offset from the left edge of the self.view, and is already centered on the screen). The.net effect in this case, is that you're getting the offset from the left edge of the self.view twice, once in the x coordinate of the aReflectionView and then again in the x coordinate of the aLabel which you've put in the aReflectionView, which is clearly not your intent. The easiest fix is probably something like:

UILabel *aLabel = [[UILabel alloc] initWithFrame:CGRectMake(((aReflectionView.bounds.size.width / 2) - 150), 0, 300, 90)];

Bottom line, center the label on the view you're putting it on.

Answer 4

For those Googling, I have an answer for them. Problem was, I had some escape characters to designate a new line within the code like so:

self.emptyLabel.text = @"No likes yet! \n\
\
\n(Like some cards to save them here)";

That caused the text to be aligned off-center. Simply remove them like so:

self.emptyLabel.text = @"No likes yet! \n\n(Like some cards to save them here)";