1. ホーム
  2. ios

[解決済み] UILabel 内のテキストを縦に上部に揃える

2022-02-14 20:17:08

質問

を持っています。 UILabel に、2行のテキストを入れるスペースがあります。テキストが短すぎる場合、このテキストがラベルの垂直中央に表示されることがあります。

の上部に常にテキストが来るようにするには、どのように縦方向へ整列させればよいのでしょうか。 UILabel ?

解決方法は?

にvertical-alignを設定する方法はありません。 UILabel しかし、ラベルのフレームを変更することで同じ効果を得ることができます。何が起こっているのかがはっきりわかるように、ラベルをオレンジ色にしてみました。

ここで、簡単にできる方法を紹介します。

    [myLabel sizeToFit];

<イグ


ラベルのテキストが長くなり、2行以上になる場合は numberOfLines から 0 (ここでいうゼロは行数無制限を意味します)。

    myLabel.numberOfLines = 0;
    [myLabel sizeToFit];

<イグ


ロングバージョン

何が起こっているのかわかるように、ラベルをコードで作ってみる。Interface Builderでもほとんど設定できます。私の設定は、View-Based Appで、Photoshopで作った背景画像で余白(20ポイント)を表現しています。ラベルは魅力的なオレンジ色で、寸法がどうなっているのかがわかるようになっています。

- (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 は、中央揃えや右揃えのテキストに適用されます。以下がその内容です。

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

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

<イグ


注意点 sizeToFit は、初期ラベルの最小幅を尊重します。もし、幅100のラベルから始めて sizeToFit のラベルを作成すると、幅100(またはそれ以下)の(おそらく非常に高い)ラベルが返されます。ラベルのサイズを変更する前に、必要な最小幅を設定することをお勧めします。

その他、いくつか注意すべき点があります。

について lineBreakMode が尊重されるかどうかは、その設定方法によって異なります。 NSLineBreakByTruncatingTail (デフォルト) の後に無視されます。 sizeToFit 他の2つの切り捨てモード(headとmiddle)と同様です。 NSLineBreakByClipping も無視されます。 NSLineBreakByCharWrapping は通常通り動作します。枠の幅は右端の文字に合うように狭められたままです。


マーク・エイメリー は、オートレイアウトを使用した NIB と Storyboards に関する修正をコメントで提供しました。

ラベルがnibやstoryboardのサブビューとして含まれている場合、そのラベルは view オートレイアウトを使用しているViewControllerの sizeToFit の呼び出しは viewDidLoad の後に、オートレイアウトがサブビューのサイズと位置を決めるので、うまくいきません。 viewDidLoad を呼び出すと、その効果をすぐに取り消してしまいます。 sizeToFit を呼び出します。しかし sizeToFit の中から viewDidLayoutSubviews 意志 を働かせます。


私のオリジナル回答(後世のため/参考のため)。

これは NSString メソッド sizeWithFont:constrainedToSize:lineBreakMode: を使用して、文字列を収めるのに必要なフレームの高さを計算し、原点と幅を設定します。

挿入したいテキストを使用して、ラベル用のフレームのサイズを変更します。そうすれば、何行でも対応できます。

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;