ios - top - uilabel向上对齐




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

  1. 設置新文本:

    myLabel.text = @"Some Text"
  2. maximum numbermaximum 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=2819http://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

禁用滾動。

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


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

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





text-alignment