自學iOS開發系列----UI（視圖編程入門：ViewController、UIImageView、UILabel）

更新完OC部分以後，公司通知我去成都參加安全支付大會，去了三天時間，回來以後把開會的內容做了彙總，剛忙完手頭的事情纔想起好幾天沒有更新過博客了。今天閒下來了，正好更新一下。
今天是第一篇UI的博客，主要講一下ViewController（控制器）、UIImageView（圖片視圖）、UILabel（標籤）。好了，廢話不多說了，進入正題。

1.控制器的生命週期（這裏就不詳細敘述了，這個自行百度即可，主要講解一下經常用到的兩個。新手不建議現在就百度查詢，可以等UI入門之後再詳細瞭解，否則門都還沒入，就可能被概念弄的一臉懵逼。我也會在UI進行到恰當的時候詳細講解一下AppDelegate和ViewController）

viewDidLoad     進行自定義數據以及動態創建其他控件（絕大多數操作在此方法中完成）
viewWillAppear  視圖將出現在屏幕之前（控制器切換的時候不一定會調用viewDidLoad方法，此時如有數據更新等其他操作可在此方法中完成）

2.控制器改變背景色
新建FirstView項目，在ViewController中編寫代碼

①ViewController.h

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController

@end

②ViewController.m

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

//進行自定義數據以及動態創建其他控件
- (void)viewDidLoad {
    [super viewDidLoad];

    /**command+R運行控制器顏色變爲紅色
    *  UIColor是一個顏色類，通過類方法創建顏色對象
    */
    self.view.backgroundColor = [UIColor redColor];

}

//當內存不足時，收到警告,此方法現階段暫時忽略
- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end

3.UIImageView
新建項目FirstImageView，並將下面的圖片導入項目（按住圖片，拖入項目即可，命名爲beautiful_girl），直接百度美女圖片也可。

①ViewController.h

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController

@end

②ViewController.m

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    UIImageView *imageView = [[UIImageView alloc] init];
    /**
     *  frame(圖片視圖大小)
     *  CGRectMake(視圖的起點X座標，視圖的起點Y座標，視圖的寬，視圖的高)
     */
    imageView.frame = CGRectMake(50, 100, 150, 200);

    /**
     * ①通常編碼中將上述兩個步驟合爲一個步驟編寫
     * UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(50, 100, 150, 200)];
    */

    //②根據圖片名稱在圖片視圖上顯示相應圖片
    imageView.image = [UIImage imageNamed:@"beautiful_girl.png"];

    //③將圖片視圖添加到控制器上
    [self.view addSubview:imageView];
}

@end

運行效果如圖：

4.UILabel
新建項目FirstLabel

①ViewController.h

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController

@end

②ViewController.m

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    //1、UILabel對象的創建,並設置UILabel的顯示位置和大小
    UILabel * label = [[UILabel alloc] initWithFrame:CGRectMake(0, 100, 200, 20)];
    //2、添加文字信息
    label.text = @"我是第一個Label";
    //3、設置標籤背景顏色
    label.backgroundColor = [UIColor yellowColor];
    //4、設置字體顏色
    label.textColor = [UIColor redColor];
    /** 
     * 5.設置字體顯示樣式
     * NSTextAlignmentCenter 居中
     * NSTextAlignmentRight  居右
     * NSTextAlignmentLeft   居左
     */
    label.textAlignment = NSTextAlignmentCenter;
    //6、設置字體大小）
    label.font = [UIFont systemFontOfSize:17];
    //7、把label加到self.view上面
    [self.view addSubview:label];


    UILabel * label2 = [[UILabel alloc] initWithFrame:CGRectMake(0, 150, 200, 20)];
    label2.backgroundColor = [UIColor blackColor];
    label2.text = @"我是第二個Label";
    label2.textColor = [UIColor whiteColor];
    [self.view addSubview:label2];
    /**
     * 8.設置字體的陰影效果
     * shadowOffset：陰影偏移量
     * shadowColor：陰影顏色
     */
    label2.shadowOffset = CGSizeMake(1, -3);
    label2.shadowColor = [UIColor purpleColor];


    UILabel * label3 = [[UILabel alloc] initWithFrame:CGRectMake(0, 200, 200, 50)];
    label3.backgroundColor = [UIColor brownColor];
    label3.text = @"其實張藝謀從來不是一個善於講故事的導演。從張藝謀的導演經歷來看，張藝謀對於畫面的掌控能力比較強，對於近現代題材有着很好地表現能力。其實看一下張藝謀早期參與的作品，從《紅高粱》到《活着》，張藝謀的技巧是沒得說的。這一時期，即便對於張藝謀的電影有爭議，也只是侷限在張藝謀是否通過暴露中國落後的一面來獲得國際關注，但對於影片本身的質量，極少有人有質疑。及至《英雄》之後，《十面埋伏》、《滿城盡帶黃金甲》、《三槍拍案驚奇》幾部電影前後腳上映，對於張藝謀的批評聲音頓時多了起來。除了《英雄》還有一些可圈可點之處之外，後面幾部真的是太掉價。《金陵十三釵》和《歸來》的出現，讓人又感嘆那個讓人熟悉的張藝謀又回來了。其實縱觀張藝謀的經歷，會發現張藝謀有兩個比較嚴重的缺陷：第一，由於成長環境的限制，張藝謀的歷史積澱並不高，所以一旦當題材超越出他的經驗範圍時，就容易跑偏；第二，張藝謀是攝影出身，攝影出身的導演普遍的特徵是畫面拍的比較好，但不太會講故事。而對於幻想小說這種開腦洞的題材，張藝謀真的是無能爲力的。我曾看過央視做的一期節目，裏面邀請張藝謀和卡梅隆同臺。節目最後，主持人讓二人互相以對方爲主角編一個故事。張藝謀的故事是：卡梅隆先生因爲一個機緣巧合穿越到了唐朝，見到了當時最美麗的女人楊貴妃，跟他談起了戀愛。卡梅隆的故事是：張先生是一個非常厲害的科學家，他一生中都在追尋一種世界上從沒有過的夢幻般的顏色，有一天他聽說外星球有這種顏色的礦石，於是張先生搭乘飛船來到了這個星球，然後他見到了這個星球的居民";
    label3.textColor = [UIColor whiteColor];
    label3.font = [UIFont systemFontOfSize:13];
    /**
     *  9、label默認的文字顯示行數爲1行,如果文字內容多於一行顯示的內容，那麼文字就會顯示不完全
     *  label3.numberOfLines = 3;表示如果文字不夠三行，夠幾行，顯示幾行；如果文字超過三行，高度足夠，只顯示三行。一般設置爲0，表示行數按照字體大小和label高度自動設置最大值。
     *
     */
    label3.numberOfLines = 0;
    //10、設置換行樣式：NSLineBreakByTruncatingMiddle表示下面行數爲以單詞換行，行數不夠，捨去尾行的行尾，顯示省略號。
    label3.lineBreakMode = NSLineBreakByTruncatingMiddle;
    [self.view addSubview:label3];


    UILabel * label4 = [[UILabel alloc] init];
    label4.frame = CGRectMake(0, 250, 200, 20);
    label4.backgroundColor = [UIColor grayColor];
    label4.textColor = [UIColor whiteColor];
    label4.text = @"我能想到最浪漫的事，就是唐嫣和羅晉在拍完錦繡未央以後真的走到了一起。恩，我實在編不下去了，但是不編字數又不夠，好了，這下字數夠了";
    //11、設置文字自適應寬度，如果寬度不夠，文字縮小，如果寬度過寬，文字不會放大
    label4.adjustsFontSizeToFitWidth = YES;

    [self.view addSubview:label4];
}

@end

效果如圖：

【小技巧】label3.lineBreakMode = NSLineBreakByTruncatingMiddle;例如設置換行樣式等時，根據需求查看換行樣式效果，長按command並單擊NSLineBreakByTruncatingMiddle，查看枚舉值。

小練習
將綠色控制器中，用15號字體顯示藍底紅字的“程序員小咖”五個字。

參考答案（一萬個讀者有一萬個哈姆雷特，一萬個程序員有一萬種編碼風格，答案僅供參考）
新建Test項目，ViewController.h中不做任何操作

ViewController.m

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    //command+單擊UIColor 查看支持的顏色
    self.view.backgroundColor = [UIColor greenColor];

    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 100, 200, 50)];
    label.backgroundColor = [UIColor blueColor];
    label.font = [UIFont systemFontOfSize:15];
    label.textColor = [UIColor redColor];
    label.text = @"程序員小咖";
    [self.view addSubview:label];

}

@end