ios - UILabelを垂直に揃えます

Question

アプリのUILabelビューでテキストを垂直方向に揃えようとしています。問題は、テキストを上に垂直に配置し、ラベルのサイズを280x150にしたいことです。私はこれら2つのことのうちの1つしか達成できません。行を削除すると

[myLabel sizeToFit];

その後、テキストの配置は問題ありませんが、サイズがめちゃくちゃになります。しかし、上記の行を追加すると、配置が乱れますが、サイズは問題ありません。この問題を解決するにはどうすればよいですか。

以下のコードを追加しました-

CGRect labelFrame = CGRectMake(22, 50, 280, 150);
UILabel *myLabel = [[UILabel alloc] initWithFrame:labelFrame];
[myLabel setText:finalRecipe];
[myLabel setBackgroundColor: [UIColor lightGrayColor]];
[myLabel setNumberOfLines:0];
[myLabel sizeToFit];
[self.view addSubview:myLabel];

score 19 · Accepted Answer

これには使用UILabelしないでください。と一緒に使用UIButtonするとUserInteractionEnabled = NO;、その中のテキストを垂直または水平に揃えるオプションがあります。

どうぞ：

迅速：

btnDetail.titleLabel?.numberOfLines = 5
btnDetail.titleLabel?.lineBreakMode = .byCharWrapping
btnDetail.contentVerticalAlignment = .top
btnDetail.contentHorizontalAlignment = .left
btnDetail.isUserInteractionEnabled = false
btnDetail.autoresizesSubviews = true
btnDetail.autoresizingMask = .flexibleWidth

Obj-C

[btnDetail.titleLabel setNumberOfLines:5];
[btnDetail.titleLabel setLineBreakMode:NSLineBreakByCharWrapping];
[btnDetail setContentVerticalAlignment:UIControlContentVerticalAlignmentTop];
[btnDetail setContentHorizontalAlignment:UIControlContentHorizontalAlignmentLeft];
[btnDetail setUserInteractionEnabled:NO];
btnDetail.autoresizesSubviews = YES;
btnDetail.autoresizingMask = UIViewAutoresizingFlexibleWidth;

score 13 · Accepted Answer

私はFXLabelの作者であり、マニッシュは知りませんが、彼が助けようとしていたと思います（彼が私を宣伝していた場合、私は確かに彼に頼みませんでした、そして私は彼に支払いをしていません-ごめんなさいマニッシュ！）。

FXLabelの機能の1つは、Interface Builderで設定されているように、ラベルのUIContentModeプロパティを尊重することです。これは、label.contentMode=UIViewContentModeTop;を設定できることを意味します。テキストをラベルビューの上部に揃えます（通常のUILabelでは機能しません）。関連する例は次のとおりです。

https://github.com/nicklockwood/FXLabel/tree/master/Examples/Text%20Alignment

FXLabelはUILabelのドロップインサブクラスであるため、提起されている質問に対するかなり良い解決策だと思います。ただし、投稿者がサードパーティのライブラリ（理解できる）を使用せずに問題を解決したい場合は、次のコードを使用してください。

CGRect labelFrame = CGRectMake(22, 50, 280, 150);
UILabel *myLabel = [[UILabel alloc] initWithFrame:labelFrame];
[myLabel setText:finalRecipe];
[myLabel setBackgroundColor: [UIColor lightGrayColor]];
[myLabel setNumberOfLines:0];

CGFloat fontSize = 0.0f;
labelFrame.size = [myLabel.text sizeWithFont:myLabel.font
                                minFontSize:myLabel.minimumFontSize
                             actualFontSize:&fontSize
                                   forWidth:labelFrame.width
                            lineBreakMode:myLabel.lineBreakMode];

myLabel.frame = labelFrame;
[self.view addSubview:myLabel];

注:(これはテストされていないため、タイプミスがある場合はお詫びします）

score 12 · Accepted Answer

UILabelをサブクラス化する必要があります。これを試して：

- (void)drawTextInRect:(CGRect)rect
{
    CGSize sizeThatFits = [self sizeThatFits:rect.size];
    rect.size.height = MIN(rect.size.height, sizeThatFits.height);

    [super drawTextInRect:rect];
}

お気づきのとおり、UILabelはテキストをその境界内で垂直方向に中央揃えにします。ここでは-sizeThatFits、テキストブロックサイズを要求し、それを使用してUILabelに渡される描画長方形を制約し、テキストがラベル境界の上部から描画されるようにします。

次のように、無視された（ため息）contentModeプロパティをサポートすることもできます。

- (void)drawTextInRect:(CGRect)rect
{
    CGSize sizeThatFits = [self sizeThatFits:rect.size];

    if (self.contentMode == UIViewContentModeTop) {
        rect.size.height = MIN(rect.size.height, sizeThatFits.height);
    }
    else if (self.contentMode == UIViewContentModeBottom) {
        rect.origin.y = MAX(0, rect.size.height - sizeThatFits.height);
        rect.size.height = MIN(rect.size.height, sizeThatFits.height);
    }

    [super drawTextInRect:rect];
}

ここには他にもたくさんの解決策と議論があります： UILabel内でテキストを上に垂直に揃えます

score 11 · Accepted Answer

Swiftでは、サブクラス化UILabel、オーバーライドdrawTextInRect、および準拠のJRCのソリューションは次のUIViewContentModeようになります。

class AlignableUILabel: UILabel {

    override func drawText(in rect: CGRect) {

        var newRect = CGRect(x: rect.origin.x,y: rect.origin.y,width: rect.width, height: rect.height)
        let fittingSize = sizeThatFits(rect.size)

        if contentMode == UIViewContentMode.top {
            newRect.size.height = min(newRect.size.height, fittingSize.height)
        } else if contentMode == UIViewContentMode.bottom {
            newRect.origin.y = max(0, newRect.size.height - fittingSize.height)
        }

        super.drawText(in: newRect)
    }

}

実装は単純に次の問題です。

yourLabel.contentMode = UIViewContentMode.top

私にとって、それは魅力のように機能しました。

score 1 · Accepted Answer

サブクラス化せずに、ボタンを使用したり、独自のボタンを使用したりする方法があります。

行数を0に設定してから、sizeToFitを呼び出します。

[label setNumberOfLines:0];
[label sizeToFit];

他の誰かがリンクしていると思うので、ここで詳細を確認してください：UILabel内でテキストを垂直方向に上に揃えます

score 1 · Accepted Answer

あなたはインターフェースビルダーの制約でそれを作ることができます。

必要な行数を入力してください
3行に十分な高さの制約を作成し、リレーションセクションに「LessThanorEqual」と入力します。

これがお役に立てば幸いです。

score 1 · Accepted Answer

上記の推奨行数を0に設定し、改行をワードラップに設定することに加えて、高さの制約を指定しないようにしてください。表示されたテキストによって必要に応じて新しい行が自動的に追加され、テキストは常にラベルの上部に垂直に配置されます。

score 0 · Accepted Answer

カテゴリを実装することで、あなたが望むことをしました：

.h

@interface UILabel (VerticalAlign)
- (void)alignTop;
- (void)alignBottom;
@end

.m

@implementation UILabel (VerticalAlign)

#pragma mark
#pragma mark - Align Methods

- (void)alignTop
{
    [self setFrame:[self newLabelFrame:UIControlContentVerticalAlignmentTop]];
}

- (void)alignBottom
{
    [self setFrame:[self newLabelFrame:UIControlContentVerticalAlignmentBottom]];
}

#pragma mark
#pragma mark - Helper Methods

- (CGRect)newLabelFrame:(UIControlContentVerticalAlignment)alignment
{
    CGRect labelRect = self.frame;

    NSStringDrawingOptions options = NSStringDrawingUsesLineFragmentOrigin | NSStringDrawingTruncatesLastVisibleLine | NSStringDrawingUsesFontLeading;

    CGRect textRect = [self.text boundingRectWithSize:CGSizeMake(227.f, CGFLOAT_MAX)
                                              options:options
                                           attributes:@{NSFontAttributeName:self.font}
                                              context:nil];

    CGFloat textOffset = labelRect.size.height - textRect.size.height;

    UIEdgeInsets contentInsets;
    if (alignment == UIControlContentVerticalAlignmentTop)
    {
        if (textOffset < (labelRect.size.height/2.f))
        {
            contentInsets = UIEdgeInsetsMake(-textOffset, 0.f, 0.f, 0.f);
        }
        else
        {
            contentInsets = UIEdgeInsetsMake(0.f, 0.f, textOffset, 0.f);
        }
    }
    else
    {
        if (textOffset < (labelRect.size.height/2.f))
        {
            contentInsets = UIEdgeInsetsMake(0.f, 0.f, -textOffset, 0.f);
        }
        else
        {
            contentInsets = UIEdgeInsetsMake(textOffset, 0.f, 0.f, 0.f);
        }
    }

    return UIEdgeInsetsInsetRect(labelRect, contentInsets);
}

@end

「NumberOfLines」を0に設定する必要があることに注意してください。この例は、複数行オプションで機能します。

上記のカテゴリを実装した後、次の操作を実行できます。

[myLabel setText:finalRecipe];
[myLabel alignTop];

乾杯！

score 0 · Accepted Answer

素敵なハック...迅速な4.2/5の私の2セント：

self.optTextMessage.numberOfLines =  0
self.optTitle.lineBreakMode  = .byWordWrapping

提案されているように\n..を追加します。

score -2 · Accepted Answer

あなたは次のようにそれを行うことができます.......

ラベルのnumberOfLinesプロパティをIBから0に設定します
ラベルlineBreakModeをUILineBreakModeWordWrap（非常に重要）として設定します

これで、ラベルに設定したものは何でも、それにいくつかの@"\n"を追加するだけです.....例-

[yourTextLabel setText:@"myLabel\n\n\n\n\n"];

ios - UILabelを垂直に揃えます

10 に答える 10

迅速：

Obj-C

Related

Reference