在 UILabel 中将文本垂直对齐到顶部 [英] Vertically align text to top within a UILabel

问题描述

我有一个 UILabel，其中有两行文本的空间.有时，当文本太短时，此文本会显示在标签的垂直中心.

I have a UILabel with space for two lines of text. Sometimes, when the text is too short, this text is displayed in the vertical center of the label.

如何垂直对齐文本以使其始终位于 UILabel 的顶部?

How do I vertically align the text to always be at the top of the UILabel?

推荐答案

没有办法在 UILabel 上设置垂直对齐，但你可以通过改变标签的框架来获得相同的效果.我已将标签设为橙色，以便您可以清楚地看到发生了什么.

There's no way to set the vertical-align on a UILabel, but you can get the same effect by changing the label's frame. I've made my labels orange so you can see clearly what's happening.

这是一种快速简便的方法:

Here's the quick and easy way to do this:

    [myLabel sizeToFit];

如果您的标签文本较长且将超过一行，请将 numberOfLines 设置为 0(此处为零表示无限行数).

If you have a label with longer text that will make more than one line, set numberOfLines to 0 (zero here means an unlimited number of lines).

    myLabel.numberOfLines = 0;
    [myLabel sizeToFit];

更长的版本

我将在代码中制作我的标签，以便您可以看到发生了什么.您也可以在 Interface Builder 中设置大部分内容.我的设置是一个基于视图的应用程序，带有我在 Photoshop 中制作的背景图像以显示边距(20 点).标签是有吸引力的橙色，因此您可以看到尺寸的变化.

I'll make my label in code so that you can see what's going on. You can set up most of this in Interface Builder too. My setup is a View-Based App with a background image I made in Photoshop to show margins (20 points). The label is an attractive orange color so you can see what's going on with the dimensions.

- (void)viewDidLoad
{
    [super viewDidLoad];

    // 20 point top and left margin. Sized to leave 20 pt at right.
    CGRect labelFrame = CGRectMake(20, 20, 280, 150);
    UILabel *myLabel = [[UILabel alloc] initWithFrame:labelFrame];
    [myLabel setBackgroundColor:[UIColor orangeColor]];

    NSString *labelText = @"I am the very model of a modern Major-General, I've information vegetable, animal, and mineral";
    [myLabel setText:labelText];

    // Tell the label to use an unlimited number of lines
    [myLabel setNumberOfLines:0];
    [myLabel sizeToFit];

    [self.view addSubview:myLabel];
}

使用 sizeToFit 的一些限制会在文本居中或右对齐时发挥作用.这是发生的事情:

Some limitations of using sizeToFit come into play with center- or right-aligned text. Here's what happens:

    // myLabel.textAlignment = NSTextAlignmentRight;
    myLabel.textAlignment = NSTextAlignmentCenter;

    [myLabel setNumberOfLines:0];
    [myLabel sizeToFit];

标签的大小仍然固定在左上角.您可以将原始标签的宽度保存在一个变量中并在 sizeToFit 之后设置它，或者给它一个固定的宽度来解决这些问题:

The label is still sized with a fixed top-left corner. You can save the original label's width in a variable and set it after sizeToFit, or give it a fixed width to counter these problems:

    myLabel.textAlignment = NSTextAlignmentCenter;

    [myLabel setNumberOfLines:0];
    [myLabel sizeToFit];

    CGRect myFrame = myLabel.frame;
    // Resize the frame's width to 280 (320 - margins)
    // width could also be myOriginalLabelFrame.size.width
    myFrame = CGRectMake(myFrame.origin.x, myFrame.origin.y, 280, myFrame.size.height);
    myLabel.frame = myFrame;

请注意，sizeToFit 将遵守初始标签的最小宽度.如果您从一个 100 宽的标签开始并在其上调用 sizeToFit，它将返回一个(可能非常高)100(或稍小)宽度的标签.在调整大小之前，您可能希望将标签设置为所需的最小宽度.

Note that sizeToFit will respect your initial label's minimum width. If you start with a label 100 wide and call sizeToFit on it, it will give you back a (possibly very tall) label with 100 (or a little less) width. You might want to set your label to the minimum width you want before resizing.

其他一些注意事项:

是否遵守 lineBreakMode 取决于它的设置方式.NSLineBreakByTruncatingTail(默认值)在 sizeToFit 之后被忽略，其他两种截断模式(头部和中间)也是如此.NSLineBreakByClipping 也被忽略.NSLineBreakByCharWrapping 照常工作.框架宽度仍然变窄以适应最右边的字母.

Whether lineBreakMode is respected depends on how it's set. NSLineBreakByTruncatingTail (the default) is ignored after sizeToFit, as are the other two truncation modes (head and middle). NSLineBreakByClipping is also ignored. NSLineBreakByCharWrapping works as usual. The frame width is still narrowed to fit to the rightmost letter.

Mark Amery 在评论中修复了使用自动布局的 NIB 和故事板:强>

Mark Amery gave a fix for NIBs and Storyboards using Auto Layout in the comments:

如果您的标签作为使用自动布局的 ViewController 的 view 的子视图包含在笔尖或故事板中，则将您的 sizeToFit 调用放入 viewDidLoad 不起作用，因为在调用 viewDidLoad 之后自动布局会调整子视图的大小和位置，并且会立即撤消 sizeToFit 调用的效果.但是，从 viewDidLayoutSubviews 中调用 sizeToFit 会 工作.

If your label is included in a nib or storyboard as a subview of the view of a ViewController that uses autolayout, then putting your sizeToFit call into viewDidLoad won't work, because autolayout sizes and positions the subviews after viewDidLoad is called and will immediately undo the effects of your sizeToFit call. However, calling sizeToFit from within viewDidLayoutSubviews will work.

<小时>我的原始答案(供后代/参考):

这里使用 NSString 方法 sizeWithFont:constrainedToSize:lineBreakMode: 来计算适合字符串所需的框架高度，然后设置原点和宽度.

This uses the NSString method sizeWithFont:constrainedToSize:lineBreakMode: to calculate the frame height needed to fit a string, then sets the origin and width.

使用要插入的文本调整标签框架的大小.这样你就可以容纳任意数量的行.

Resize the frame for the label using the text you want to insert. That way you can accommodate any number of lines.

CGSize maximumSize = CGSizeMake(300, 9999);
NSString *dateString = @"The date today is January 1st, 1999";
UIFont *dateFont = [UIFont fontWithName:@"Helvetica" size:14];
CGSize dateStringSize = [dateString sizeWithFont:dateFont 
        constrainedToSize:maximumSize 
        lineBreakMode:self.dateLabel.lineBreakMode];

CGRect dateFrame = CGRectMake(10, 10, 300, dateStringSize.height);

self.dateLabel.frame = dateFrame;

这篇关于在 UILabel 中将文本垂直对齐到顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！