1. 程式人生 > >IOS開發實戰:UILabel文字控制元件

IOS開發實戰:UILabel文字控制元件

一,建立UILabel文字控制元件專案

1,開啟Xcode,建立名為HelloWorldText的工程
如何建立工程:Xcode建立HelloWorld專案

2,在ViewController中的viewDidLoad方法中新增如下程式碼:

- (void)viewDidLoad {
    [super viewDidLoad];
    UILabel * label = [[UILabel alloc]initWithFrame:CGRectMake(20, 100, 280, 30)];
    label.text = @"HelloWorld";
    [self.view addSubview:label];
}
initWithFrame是UILabel類的初始化方法
該初始化方法需要傳入一個CGRect型別的結構體(繪製矩形)
CGRectMake()方法可以構造出一個CGRect型別的結構體
其中4個引數分別為x座標,y座標,高度,寬度,
決定了UILabel控制元件在螢幕上的位置和尺寸

注意:
    UI座標系中,橫向為x軸,向右增大,縱向y軸,向下增大,即原點在左上角

UILabel類中text屬性用於設定標籤上的文字,必須為NSString型別字串值
呼叫UIView類的addSubview方法後,將label控制元件新增到當前檢視上

執行工程:
這裡寫圖片描述

這裡使用的是Label文字控制元件的預設樣式

二,UILabel其他屬性

在ViewController中的viewDidLoad方法中繼續新增UILabel其他屬性:

- (void)viewDidLoad {
    [super viewDidLoad];
    UILabel * label = [[UILabel alloc]initWithFrame:CGRectMake(20, 100, 280, 30)];
    label.text = @"HelloWorld";
    // 設定背景顏色
    label.backgroundColor=[UIColor redColor];
    // 設定字號和字型
    label.font
=[UIFont systemFontOfSize:23]; // 設定字型顏色 label.textColor=[UIColor whiteColor]; // 設定對齊方式 // NSTextAlignmentLeft = 0 // 居左對齊 // NSTextAlignmentCenter = 1 // 居中對齊(預設) // NSTextAlignmentRight = 2 // 居右對齊 label.textAlignment=NSTextAlignmentCenter; // 設定陰影顏色 label.shadowColor=[UIColor greenColor]; // 設定陰影偏移量,即陰影與本體之間的偏移距離 // 需要設定一個CGSize型別的結構體 // 兩個引數分別代表橫向偏移量和縱向偏移量 label.shadowOffset=CGSizeMake(10, 10); [self.view addSubview:label]; }
backgroundColor屬性:
    設定標籤的背景顏色
font屬性:
    設定UILabel字型相關屬性
textColor屬性:
    設定UILabel字型顏色
TextAlignment屬性:
    設定UILabel控制元件中文字的對齊模式,預設居中
    對齊模式列舉如下:
        NSTextAlignmentLeft = 0   // 居左對齊
        NSTextAlignmentCenter = 1 // 居中對齊(預設)
        NSTextAlignmentRight = 2  // 居右對齊
shadowColor屬性:
    設定文字陰影顏色
shadowOffset屬性:
    設定陰影偏移量,即陰影與本體之間的偏移距離
    需要設定一個CGSize型別的結構體
    CGSize中兩個引數分別代表橫向偏移量和縱向偏移量

執行工程,檢視效果:
這裡寫圖片描述

三,UILabel多行顯示和換行模式

通過initWithFrame初始化方法建立的Label控制元件會有一個寬度
如果文字長度超過UILabel控制元件的寬度,預設不會換行,省缺號代替超出部分

1,Label預設顯示長度

增大Label控制元件高度,設定更長的文字描述:

- (void)viewDidLoad {
    [super viewDidLoad];
    UILabel * label = [[UILabel alloc]initWithFrame:CGRectMake(20, 100, 280, 100)];
    label.text = @"HelloWorld,It is a good idea,So,what do you want to know";
    label.backgroundColor=[UIColor blueColor];
    label.textColor=[UIColor whiteColor];
    [self.view addSubview:label];
}

這裡寫圖片描述

執行工程發現,UILabel預設單行顯示,超出後沒有換行,多出的文字被截斷了

2,設定顯示行數

UILabel預設單行顯示,可通過label.numberOfLines設定顯示行數
numberOfLines設定為整數值,表示支援顯示行數,設定為0,表示無限換行
直到文字結束或到達UILabel控制元件最底端為止

這裡寫圖片描述

將numberOfLines設定為0,此時文字換行顯示,沒有截斷

3,設定文字換行和截斷模式

可通過label.lineBreakMode設定文字換行和截斷模式
lineBreakMode列舉如下:
NSLineBreakByWordWrapping    // 以單詞為標準換行
NSLineBreakByCharWrapping    // 以字元為標準換行
NSLineBreakByTruncatingHead  // 頭部截斷
NSLineBreakByTruncatingTail  // 尾部截斷
NSLineBreakByTruncatingMiddle// 中間截斷

1)以單詞為標準換行:

- (void)viewDidLoad {
    [super viewDidLoad];
    UILabel * label = [[UILabel alloc]initWithFrame:CGRectMake(20, 100, 280, 100)];
    label.text = @"HelloWorld,It is a good idea, So, what do you want to know";
    label.backgroundColor=[UIColor blueColor];
    label.textColor=[UIColor whiteColor];
    label.numberOfLines=0;
    label.lineBreakMode=NSLineBreakByWordWrapping;
    [self.view addSubview:label];
}

以單詞為標準換行

以單詞為標準換行,what單詞因換行被截斷顯示

2)以字元為標準換行:

- (void)viewDidLoad {
    [super viewDidLoad];
    UILabel * label = [[UILabel alloc]initWithFrame:CGRectMake(20, 100, 280, 100)];
    label.text = @"HelloWorld,It is a good idea, So, what do you want to know";
    label.backgroundColor=[UIColor blueColor];
    label.textColor=[UIColor whiteColor];
    label.numberOfLines=0;
    label.lineBreakMode=NSLineBreakByCharWrapping;
    [self.view addSubview:label];
}

以字元為標準換行

以字元為標準換行,換行時what單詞未被截斷,換行顯示

3)頭部截斷:

- (void)viewDidLoad {
    [super viewDidLoad];
    UILabel * label = [[UILabel alloc]initWithFrame:CGRectMake(20, 100, 280, 100)];
    label.text = @"HelloWorld,It is a good idea, So, what do you want to know";
    label.backgroundColor=[UIColor blueColor];
    label.textColor=[UIColor whiteColor];
    label.lineBreakMode=NSLineBreakByTruncatingHead;
    [self.view addSubview:label];
}

這裡寫圖片描述

為了測試頭部截斷,沒有設定numberOfLines,預設單行顯示
在不能完全顯示的情況下,頭部部分被截斷顯示,省略號代替截斷部分

4)尾部截斷:

- (void)viewDidLoad {
    [super viewDidLoad];
    UILabel * label = [[UILabel alloc]initWithFrame:CGRectMake(20, 100, 280, 100)];
    label.text = @"HelloWorld,It is a good idea, So, what do you want to know";
    label.backgroundColor=[UIColor blueColor];
    label.textColor=[UIColor whiteColor];
    label.lineBreakMode=NSLineBreakByTruncatingTail;
    [self.view addSubview:label];
}
為了測試頭部截斷,沒有設定numberOfLines,預設單行顯示
在不能完全顯示的情況下,尾部部分被截斷顯示,省略號代替截斷部分

5)中間截斷:

- (void)viewDidLoad {
    [super viewDidLoad];
    UILabel * label = [[UILabel alloc]initWithFrame:CGRectMake(20, 100, 280, 100)];
    label.text = @"HelloWorld,It is a good idea, So, what do you want to know";
    label.backgroundColor=[UIColor blueColor];
    label.textColor=[UIColor whiteColor];
    label.numberOfLines=0;
    label.lineBreakMode=NSLineBreakByTruncatingMiddle;
    [self.view addSubview:label];
}

這裡寫圖片描述

為了測試頭部截斷,沒有設定numberOfLines,預設單行顯示
在不能完全顯示的情況下,中間部分被截斷顯示,省略號代替截斷部分