Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
450 views
in Technique[技术] by (71.8m points)

ios - 将文本垂直对齐到UILabel中的顶部(Vertically align text to top within a UILabel)

I have a UILabel with space for two lines of text.

(我有一个UILabel带有两行文本的空间。)

Sometimes, when the text is too short, this text is displayed in the vertical center of the label.

(有时,当文本太短时,该文本会显示在标签的垂直中心。)

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

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

用垂直居中的文本表示UILabel的图像

  ask by Stefan translate from so

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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.

(无法在UILabel上设置垂直对齐,但是您可以通过更改标签的框架来获得相同的效果。)

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];

sizeToFit挤压标签


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).

(如果您有一个带有较长文本的标签,该标签将包含多行,请将numberOfLines设置为0 (此处为零表示行数不受限制)。)

    myLabel.numberOfLines = 0;
    [myLabel sizeToFit];

带有sizeToFit的较长标签文本


Longer Version

(较长的版本)

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.

(您也可以在Interface Builder中设置大多数功能。)

My setup is a View-Based App with a background image I made in Photoshop to show margins (20 points).

(我的设置是一个基于视图的应用程序,带有在Photoshop中制作的背景图像以显示边距(20点)。)

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];
}

Some limitations of using sizeToFit come into play with center- or right-aligned text.

(使用sizeToFit一些限制会影响sizeToFit对齐或右对齐的文本。)

Here's what happens:

(这是发生了什么:)

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

    [myLabel setNumberOfLines:0];
    [myLabel 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:

(您可以将原始标签的宽度保存在一个变量中,并在sizeToFit之后进行sizeToFit ,或者给它固定的宽度以解决以下问题:)

    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;

标签对齐


Note that sizeToFit will respect your initial label's minimum width.

(请注意, sizeToFit将遵守初始标签的最小宽度。)

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.

(如果您以宽度为100的标签开始,并在其上调用sizeToFit ,它将返回宽度为100(或更小)的(可能非常高)标签。)

You might want to set your label to the minimum width you want before resizing.

(您可能需要在调整大小之前将标签设置为所需的最小宽度。)

通过调整框架宽度来校正标签对齐

Some other things to note:

(其他注意事项:)

Whether lineBreakMode is respected depends on how it's set.

(是否尊重lineBreakMode取决于其设置方式。)

NSLineBreakByTruncatingTail (the default) is ignored after sizeToFit , as are the other two truncation modes (head and middle).

(NSLineBreakByTruncatingTail (默认值)后,被忽略sizeToFit ,因为是其他两个截断模式(头和中间)。)

NSLineBreakByClipping is also ignored.

(NSLineBreakByClipping也将被忽略。)

NSLineBreakByCharWrapping works as usual.

(NSLineBreakByCharWrapping照常工作。)

The frame width is still narrowed to fit to the rightmost letter.

(框架宽度仍然变窄以适合最右边的字母。)


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

(马克·阿默里Mark Amery )在评论中使用“自动布局”修复了NIB和情节提要:)

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.

(如果您的标签被包括在笔尖或故事板作为一个子视图view一个视图控制器的使用自动版式,然后把你的sizeToFit电话到viewDidLoad是行不通的,因为自动布局大小和位置后子视图viewDidLoad被调用,将立即撤销您的sizeToFit调用的效果。)

However, calling sizeToFit from within viewDidLayoutSubviews will work.

(但是,调用sizeToFit从内部viewDidLayoutSubviews 工作。)


My Original Answer (for posterity/reference): 我的原始答案(供后代参考):)

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

(这使用NSString方法sizeWithFont:constrainedToSize:lineBreakMode:来计算适合字符串的框架高度,然后设置原点和宽度。)

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; 

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...