ios - top - uilabel向上对齐




將文本垂直對齊到UILabel中的頂部 (20)

  1. 設置新文本： 

    myLabel.text = @"Some Text"

  2. 將maximum number行maximum number設置為0（自動）： 

    myLabel.numberOfLines = 0

  3. 將標籤的框架設置為最大尺寸： 

    myLabel.frame = CGRectMake(20,20,200,800)

  4. 調用sizeToFit來減小幀大小，使內容適合： 

    [myLabel sizeToFit]

現在，標籤框架的高度和寬度足以適合您的文字。 左上角應保持不變。 我只用左上對齊的文本測試了這個。 對於其他對齊，您可能必須在之後修改框架。

此外，我的標籤啟用了自動換行。

我有一個UILabel有兩行文字空間。 有時，當文本太短時，此文本顯示在標籤的垂直中心。

如何將文本垂直對齊以始終位於UILabel的頂部？

FXLabel（在github上）通過將label.contentMode設置為UIViewContentModeTop 。 這個組件不是由我製作的，但它是我經常使用的組件，具有大量功能，並且似乎運行良好。

創建UILabel的子類。 奇蹟般有效： 

// TopLeftLabel.h

#import <Foundation/Foundation.h>

@interface TopLeftLabel : UILabel 
{
}

@end

// TopLeftLabel.m

#import "TopLeftLabel.h"

@implementation TopLeftLabel

- (id)initWithFrame:(CGRect)frame 
{
    return [super initWithFrame:frame];
}

- (CGRect)textRectForBounds:(CGRect)bounds limitedToNumberOfLines:(NSInteger)numberOfLines 
{
    CGRect textRect = [super textRectForBounds:bounds limitedToNumberOfLines:numberOfLines];    
    textRect.origin.y = bounds.origin.y;
    return textRect;
}

-(void)drawTextInRect:(CGRect)requestedRect 
{
    CGRect actualRect = [self textRectForBounds:requestedRect limitedToNumberOfLines:self.numberOfLines];
    [super drawTextInRect:actualRect];
}

@end

如here所討論的。

創建一個新類

LabelTopAlign

.h文件 

#import <UIKit/UIKit.h>


@interface KwLabelTopAlign : UILabel {

}

@end

.m文件 

#import "KwLabelTopAlign.h"


@implementation KwLabelTopAlign

- (void)drawTextInRect:(CGRect)rect {
    int lineHeight = [@"IglL" sizeWithFont:self.font constrainedToSize:CGSizeMake(rect.size.width, 9999.0f)].height;
    if(rect.size.height >= lineHeight) {
        int textHeight = [self.text sizeWithFont:self.font constrainedToSize:CGSizeMake(rect.size.width, rect.size.height)].height;
        int yMax = textHeight;
        if (self.numberOfLines > 0) {
            yMax = MIN(lineHeight*self.numberOfLines, yMax);    
        }

        [super drawTextInRect:CGRectMake(rect.origin.x, rect.origin.y, rect.size.width, yMax)];
    }
}

@end

編輯

這是一個更簡單的實現，它做了同樣的事情： 

#import "KwLabelTopAlign.h"

@implementation KwLabelTopAlign

- (void)drawTextInRect:(CGRect)rect
{
    CGFloat height = [self.text sizeWithFont:self.font
                            constrainedToSize:rect.size
                                lineBreakMode:self.lineBreakMode].height;
    if (self.numberOfLines != 0) {
        height = MIN(height, self.font.lineHeight * self.numberOfLines);
    }
    rect.size.height = MIN(rect.size.height, height);
    [super drawTextInRect:rect];
}

@end

在迅速，

let myLabel : UILabel!

使您的標籤文本適合屏幕，它位於頂部

myLabel.sizeToFit()

使標籤字體適合屏幕寬度或特定寬度尺寸。

myLabel.adjustsFontSizeToFitWidth = YES

和一些標籤的textAlignment：

myLabel.textAlignment = .center

myLabel.textAlignment = .left

myLabel.textAlignment = .right

myLabel.textAlignment = .Natural

myLabel.textAlignment = .Justified

如果您可以選擇創建自己的自定義視圖，則可以執行以下操作： 

- (void)drawRect:(CGRect)rect
{
    CGRect bounds = self.bounds;
    [self.textColor set];
    [self.text drawInRect:bounds
                 withFont:self.font
            lineBreakMode:UILineBreakModeTailTruncation
                alignment:self.textAlignment];
}

對於自適應UI（iOS8或之後），UILabel的垂直對齊將通過更改屬性noOfLines = noOfLines從StoryBoard設置。

約束

  1. 調整UILabel LefMargin，RightMargin和Top Margin約束。

  2. 更改Content Compression Resistance Priority For Vertical = 1000`使垂直>水平。

編輯： 

noOfLines=0

並且以下約束足以實現期望的結果。

對於閱讀此內容的任何人，因為標籤內的文字不是垂直居中的，請記住某些字體類型的設計不同。 例如，如果您創建一個zapfino大小為16的標籤，您將看到文本沒有完全垂直居中。

但是，使用helvetica會使文本垂直居中。

您可以使用TTTAttributedLabel ，它支持垂直對齊。 

@property (nonatomic) TTTAttributedLabel* label;
<...>

//view's or viewController's init method
_label.verticalAlignment = TTTAttributedLabelVerticalAlignmentTop;

您可以使用具有垂直對齊選項的UITextField代替UILabel ： 

textField.contentVerticalAlignment = UIControlContentVerticalAlignmentCenter;
textField.userInteractionEnabled = NO; // Don't allow interaction

我寫了一個util函數來實現這個目的。 你可以看看： 

// adjust the height of a multi-line label to make it align vertical with top
+ (void) alignLabelWithTop:(UILabel *)label {
  CGSize maxSize = CGSizeMake(label.frame.size.width, 999);
  label.adjustsFontSizeToFitWidth = NO;

  // get actual height
  CGSize actualSize = [label.text sizeWithFont:label.font constrainedToSize:maxSize lineBreakMode:label.lineBreakMode];
  CGRect rect = label.frame;
  rect.size.height = actualSize.height;
  label.frame = rect;
}

。如何使用？ （如果lblHello是由Interface builder創建的，那麼我跳過一些UILabel屬性的詳細信息） 

lblHello.text = @"Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World!";
lblHello.numberOfLines = 5;
[Utils alignLabelWithTop:lblHello];

我還在我的博客上寫了一篇文章： http://fstoke.me/blog/?p=2819 ： http://fstoke.me/blog/?p=2819

我已經使用了很多上面的方法，只想添加一個我用過的快速方法： 

myLabel.text = [NSString stringWithFormat:@"%@\n\n\n\n\n\n\n\n\n",@"My label text string"];

確保字符串中的換行符數將導致任何文本填充可用的垂直空間，並將UILabel設置為截斷任何溢出的文本。

因為有時候足夠好就足夠了 。

我很長時間都在努力解決這個問題，我想分享我的解決方案。

這將為您提供一個UILabel ，它將文本自動收縮到0.5刻度並垂直居中文本。 Storyboard / IB中也提供了這些選項。 

[labelObject setMinimumScaleFactor:0.5];
[labelObject setBaselineAdjustment:UIBaselineAdjustmentAlignCenters];

我發現這個問題的答案現在有點過時了，所以在那里為自動佈局粉絲添加這個。

自動佈局使這個問題變得非常簡單。 假設我們將標籤添加到UIView *view ，以下代碼將完成此操作： 

UILabel *label = [[UILabel alloc] initWithFrame:CGRectZero];
[label setText:@"Some text here"];
[label setTranslatesAutoresizingMaskIntoConstraints:NO];
[view addSubview:label];

[view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[label]|" options:0 metrics:nil views:@{@"label": label}]];
[view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[label]" options:0 metrics:nil views:@{@"label": label}]];

標籤的高度將自動計算（使用它的intrinsicContentSize ），標籤將在view頂部水平邊緣到邊緣定位。

我花了一些時間來閱讀代碼以及介紹頁面中的代碼，發現它們都試圖修改標籤的幀大小，這樣就不會出現默認的中心垂直對齊。

但是，在某些情況下，我們確實希望標籤佔據所有這些空間，即使標籤確實有這麼多文本（例如，多行具有相同的高度）。

在這裡，我使用另一種方​​法來解決它，只需將換行符填充到標籤的末尾（請注意我實際上繼承了UILabel ，但這不是必需的）： 

CGSize fontSize = [self.text sizeWithFont:self.font];

finalHeight = fontSize.height * self.numberOfLines;
finalWidth = size.width;    //expected width of label

CGSize theStringSize = [self.text sizeWithFont:self.font constrainedToSize:CGSizeMake(finalWidth, finalHeight) lineBreakMode:self.lineBreakMode];

int newLinesToPad = (finalHeight  - theStringSize.height) / fontSize.height;

for(int i = 0; i < newLinesToPad; i++)
{
    self.text = [self.text stringByAppendingString:@"\n "];
}

更快（更臟）的方法是將UILabel的換行模式設置為“Clip”並添加固定數量的換行符。 

myLabel.lineBreakMode = UILineBreakModeClip;
myLabel.text = [displayString stringByAppendingString:"\n\n\n\n"];

此解決方案不適用於所有人 - 特別是，如果您仍希望在字符串末尾顯示“...”，如果它超出您顯示的行數，則需要使用其中一個更長的代碼 - 但在很多情況下，這將為您提供所需的。

為了防止對任何人有任何幫助，我遇到了同樣的問題但只能通過從使用UILabel切換到使用UITextView來解決問題。 我很欣賞這並不適合所有人，因為功能有點不同。

如果您切換到使用UITextView ，您可以關閉所有滾動視圖屬性以及啟用用戶交互...這將強制它更像標籤。

無法在UILabel上設置垂直對齊，但您可以通過更改標籤的框架來獲得相同的效果。 我把標籤變成橙色，這樣你就可以清楚地看到發生了什麼。

這是快速簡便的方法： 

    [myLabel sizeToFit];

如果您的文本較長的標籤將生成多行，請將numberOfLines設置為0 （此處為零表示無限數量的行）。 

    myLabel.numberOfLines = 0;
    [myLabel sizeToFit];

版本更長

我將在代碼中製作我的標籤，以便您可以看到正在發生的事情。 您也可以在Interface Builder中設置大部分內容。 我的設置是一個基於視圖的應用程序，帶有我在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後忽略NSLineBreakByTruncatingTail （默認值），其他兩種截斷模式（head和middle）也是如此。 NSLineBreakByClipping也被忽略。 NSLineBreakByCharWrapping像往常一樣工作。 框架寬度仍然縮小以適合最右邊的字母。

Mark Amery在評論中使用自動佈局修復了NIB和故事板：

如果您的標籤作為使用autolayout的ViewController視圖的子視圖包含在nib或storyboard中，那麼將sizeToFit調用放入viewDidLoad將不起作用，因為autolayout會在調用viewDidLoad之後調整子視圖的大小和位置並立即撤消你的sizeToFit調用的效果。 但是，從viewDidLayoutSubviews調用sizeToFit 將起作用。

我的原始答案（後代/參考）：

這使用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;

只要您沒有執行任何復雜的任務，您就可以使用UITextView而不是UILabels。

禁用滾動。

如果您希望文本完全顯示只是用戶sizeToFit和sizeThatFits:方法

在UILabel中，垂直文本對齊是不可能的。但是，您可以使用sizeWithFont:方法動態更改標籤的高度NSString，並根據需要設置其x和y。

你可以用UITextField。它支持contentVerticalAlignment peoperty，因為它是它的子類UIControl。您必須將其設置userInteractionEnabled為NO以防止用戶在其上鍵入文本。




uilabel向上对齐   top   align   ios   cocoa-touch   uikit   uilabel   text-alignment  


text-alignment