ios - top - uilabel向上对齐
將文本垂直對齊到UILabel中的頂部 (20)
設置新文本:
myLabel.text = @"Some Text"
將
maximum number
行maximum number
設置為0(自動):myLabel.numberOfLines = 0
將標籤的框架設置為最大尺寸:
myLabel.frame = CGRectMake(20,20,200,800)
調用
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];
}
對於閱讀此內容的任何人,因為標籤內的文字不是垂直居中的,請記住某些字體類型的設計不同。 例如,如果您創建一個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
上設置垂直對齊,但您可以通過更改標籤的框架來獲得相同的效果。 我把標籤變成橙色,這樣你就可以清楚地看到發生了什麼。
這是快速簡便的方法:
[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以防止用戶在其上鍵入文本。