iOS用心學 UI基礎之UIView

1、引入UI

　　在實際開發中，基本的流程大體以下圖所示:

　　UI（User Interface）做爲最基本的要點，也是很是重要的一部分，UI界面的美觀直接決定着着用戶的體驗,蘋果官方給開發中提供了很是強大的搭建UI界面的框架UIKit，包含了豐富多彩的各類UI元素。那麼如何搭建界面呢？在搭建界面以前先了解UIView。

 

2、UIView

　　

  一、什麼是UIView？

　　UIView稱之爲控件或視圖

　　界面中咱們看到的東西都是一些對象組成的，界面中全部能看到的都是UIView

 

 二、常見的UIView控件有哪些？

　　UIButton、UILabel、UIImageView、UITableView、UICollectionView等

　　

  三、控件的共有屬性

　　全部的控件都是直接或間接的繼承自UIView類，都擁有共同的屬性和方法

　　- 尺寸 CGSize

　　- 位置 CGPoint

　　- 背景色 backgroundColor

　　- ... 

 

  四、父控件和子控件

• 每個控件其實都是一個容器

- 能夠將其餘控件放到該控件的內部

- 比較常見的仍是將UIView做爲容器

 

• 能夠將A控件放入B控件

- A控件是B控件的子控件

- B控件是A控件的父控件

 

• 每個控制器都有一個UIView

- 控制器自己是不可見

- 可以看到的是控制器的View

- 每個控制器中都一個UIVIew的屬性

- 控制器中管理的全部子控件都是UIView該控件的子控件

- 父控件和子控件不是繼承關係，要注意和繼承區分

 

五、UIView的常見屬性

  •控件矩形框在父控件的位置和尺寸(以父控件的左上角爲座標原點)

@property(nonatomic) CGRect frame;

  • 控件矩形框的位置和尺寸(以本身左上角爲座標原點，全部bounds的x、y都是0)

@property(nonatomic) CGRect bounds;

  • 控件中點的位置、座標

@property(nonatomic) CGPoint center;

  • 獲取本身的父控件對象

@property(nonatomic,readonly) UIView *superview;

  • 獲取本身的全部子控件對象

@property(nonatomic,readonly,copy) NSArray *subviews;

  • 控件的形變屬性(可設置旋轉角度，比例縮放，平移等效果)

@property(nonatomic) CGAffineTransform transform;

  • 控件的ID（標識）,父控件能夠經過tag找到對應的子控件 

@property(nonatomic) NSInteger tag;

 

六、UIView的經常使用方法

  • 添加子控件:調用者是父視圖

- (void)addSubview:(UIView *)view;

  • 移除控件(將本身從父控件中移除):調用者是子控件本身

- （void）removeFromSuperview;

  • 根據一個tag標識找出對應的控件

- （void）viewWithTag:(NSInteger)tag;

 

 3、UI界面的搭建

  UI界面全部能看到的都是UIView,這些控件都是對象，能夠說UI界面是有不少個對象組成的；而對象又是由類產生；

　　- 用於顯示文字的對象，一般是UILabel，UILabel直接繼承自UIView

　　- 用於顯示圖片的對象，一般是UIImageView，UIImageView直接繼承自UIView

　　- 用於和用戶交互的對象，一般是UIButton，UIButton繼承自UIControl,而後UIControl繼承自UIView，除了具備UIView的屬性和方法外，還具備UIControl的特性，這也是爲什麼它區別於UILabel等其餘控件，而擁有交互功能。

　　

如圖：該界面咱們須要用到2個控件,UILabel和UIButton

 

  一、建立工程項目

 > （1）打開xcode，新建一個工程，選擇模板--single View Application 

 > （2）填寫項目信息，這裏後面3個選項能夠先不勾

　

> （3）項目文件結構　

xcode界面導航欄

運行和模擬器

模擬器設備

配置信息頁面

 

 

二、搭建一個界面，能夠切換文字顏色

設定該程序運行在4.7英寸的6s設備上

> （1）建立好工程，先將模擬器選擇爲6s,而後導航欄中進入main.storyboard，選擇控制器，在屬性檢查器中將size設置成和模擬器對應的屏幕大小

> （2）單視圖建立項目，main.storyboard中默認有一個控制器，控制器會自動生成對應的大View容器，

　　* 拖入控件

　　快速添加多個相同的控件方法：

- 能夠選中一個控件 command + c 複製，command + v 粘貼便可。
- 選中控件，按住 option 鍵，而後拖出來一個也行。

在view容器中拖入一個UILabel,和三個UIButton,當拖入控件，編譯器內部其實是自動幫咱們用代碼建立好了控件對象並添加控件到父控件中。

 　　* 運行項目

　　雙擊控件，能夠修改爲對應的文字內容

　　storyboard 或者 xib（後面會講到），只是負責展現頁面效果，不負責邏輯功能。

　　若是要設置控件作事，則須要在 storyboard 上設置默認控制器所關聯的類，而後使用所關聯的類來寫代碼處理默認控制器的邏輯。　　

　　* 新建關聯類

默認狀況下，新建好的類中的 viewController 與 Main.storyboard 是想關聯的。

咱們能夠驗證下，也能夠更換它的關聯類。

新建一個 MainViewController，並於 Main.storyboard 進行關聯。

　　* 編輯類

如今裏面的方法都還暫時用不上，先所有刪掉。

新建三個方法，當點擊按鈕的時候就能夠打印文字。

 1 #import "MainViewController.h"
 2 
 3 @interface MainViewController ()
 4 
 5 @end
 6 
 7 @implementation MainViewController
 8 
 9 //紅色按鈕
10 - (void) redBtn {
11 NSLog(@"redBtn");
12 }
13 
14 //綠色按鈕
15 - (void) greenBtn {
16 NSLog(@"greenBtn");
17 }
18 
19 //藍色按鈕
20 - (void) blueBtn {
21 NSLog(@"blueBtn");
22 }
23 
24 @end

可是運行以後，點擊並無什麼效果。咱們應該想辦法把按鈕跟代碼進行聯繫起來才行。

當咱們既要處理代碼，又要處理控件的時候，咱們能夠把它們兩個頁面同事顯示。
使用快捷鍵 command + option + 回車，退出 command + 回車。
也能夠點擊關聯圖標。

　　* 拖線

當咱們想讓代碼與控件有聯繫的話，通常狀況下，咱們會進行「拖線」。

拖線的方式：選中控件，而後按住 ctrl 左鍵再按住鼠標便可拖出一條藍色的線。把這根線拖向須要執行的方法上。

可是默認狀況下，控制器的類中的方法是不能和 storyboard中的事件連線的。

解決方法：
若是想要連線，須要講方法的返回值修改成 IBAction，只有修改爲 IBAction 的方法才能進行連線。

- IBAction:
a. IBAction 是 OC 的關鍵字。
b. 做用至關於 void 。
c. 只有返回值是 IBAction時，才能和 storyboard 中的事件連線。

當把前面寫的方法中的返回值中的 void 替換成 IBAction，便可發現前面會有一個空心圓



其餘拖線方法：
鼠標右鍵拖、按着ctrl拖、或者在空圓心中按住加號拖均可以。拖完以後，空心圓就變成實心圓 。



　　* 獲取 Label 對象

運行程序，而後點擊按鈕，發現點擊按鈕後，只是在控制檯上打印一些語句，而沒有改變 Label 的文本顏色。

回想以前說過的「往控制器上拖任何一個UI控件，同時也就已經建立了一個UI對象」。

也就是說，咱們想設置 UILabel 對象的屬性，咱們必須先獲取到這個對象。拿到對象，才能設置對應的屬性值。

 

　　* 如何根據對象獲取屬性？

回顧以前學習的內容，演示如何根據對象獲取屬性。

新建一個 Person 類。



接着在 viewController 類中調用。

① .h 文件代碼以下：

//引入Person
@class Person;

//聲明一個 Person 類型的屬性，引用
@property(nonatomic, strong) Person *person;

- 分析，如今只有引用，但尚未保存到任何的對象。

咱們能夠在 .m 文件中的 viewDidLoad 方法中進行初始化 Person對象。

② .m 文件代碼以下：(viewDidLoad方法中)

//初始化一個Person對象
[[Person alloc] init];

- 畫圖展現Person初始化的內存圖



> 分析如今堆中的 Person 對象並無強引用指向它，因此會被釋放。

咱們可使用一個強引用指向Person。

//賦值給強引用屬性
self.person = [[Person alloc] init];



系統會默認建立一個控制器對象，系統有一個 window 的強引用指向它，因此不銷燬。在堆中建立一個 Person 對象，同時控制器有個強指針指着它，因此也不會銷燬。

接下來，咱們已經拿到了Person對象，而後能夠根據對象去設置它的屬性，好比說Person有「年齡」屬性，因此接着在 Person.h 文件中加入一個屬性，

//聲明一個 age 屬性
@property(nonatomic, assign) NSInteger age;

而後咱們在 .m 文件中根據 self.person 拿到 Person 的內存地址，而後就能夠找到對象，接着就能夠找對象裏面的屬性進行設置或者修改了。好比說能夠修改年齡爲20。

//給 age 屬性賦值
self.person.age = 20;

 

 

3. 設置 UILabel 的顏色

既然知道根據對象去設置屬性的方法後，咱們須要爲咱們的UILabel的屬性設置值。

- 首先咱們先在頭文件部分寫一個 UILabel 類型的 myLabel 屬性

//聲明一個屬性
@property (nonatomic, strong) UILabel *myLabel;

不過，如今尚未保存任何的對象。

那怎樣才能讓 myLabel 指向 UILabel 對象呢？

咱們仍是要「拖線」

注意點：
- 默認狀況下類中的屬性是不能和 storyboard或者 xib中的對象聯繫起來。

- 若是想要聯繫起來，須要在引用類型前加 IBOutlet 。

IBOutlet:
- 是 OC的關鍵字。
- 沒有實際意義。
- 做用：只有屬性類型前加 IBOutlet 屬性才和 storyboard 或者 xib 中的對象進行鏈接。


> 接着進行在三個方法中進行修改UILable的文本顏色

//設置 label 的文本顏色
self.myLabel.textColor =

此時，textColor 須要接受一個 UIColor 類型的值。

UIColor 是一個設置顏色的類。

好比說，它裏邊有以下一些設置顏色的類方法。



> 完善代碼：

self.myLabel.textColor = [UIColor redColor];//紅色
self.myLabel.textColor = [UIColor greenColor]; //綠色
self.myLabel.textColor = [UIColor blueColor];//藍色

4. 運行效果