iOS學習32之UIKit框架-可視化編程-XIB

1. Interface Builder 可視化編程

　1> 概述

　　GUI : 圖形用戶界面(Graphical User Interface, 簡稱GUI, 又稱圖形化界面) 是指採用圖形方式顯示的計算機操做用戶界面。

　　Interface Builder (簡稱IB) : 是MAC OS X 平臺下用於設計和測試圖形用戶界面 (GUI) 的應用程序。代碼 和 IB 均可以生成 GUI。

　　優點: IB 能使開發者簡單快捷的開發出符合Mac系列操做系統的GUI。一般你只須要經過簡單的拖拽操做來構建UI就能夠了。IB 使用Nib文件存儲 GUI 資源，在須要的時候，Nib文件能夠被快速地載入內存。

　2> iOS可視化編程

• iOS下可視化編程分爲兩種方式：xib 和 storyBoard

• 在使用 xib 和 storyBoard 建立 GUI 過程當中，以 XML文件格式存儲在Xcode中，編譯時生成 nib 的二進制文件。在運行時，nib 文件被加載而且開始建立和實例化GUI元素

2. xib建立及使用

　1> 概述

• xib 建立 .xib 文件，包括視圖佈局，以XML格式存儲。

• 程序運行後，.xib 文件中的內容編譯爲.nib 文件（二進制文件），存儲在工程包中

• .xib 一般以關聯方式出如今工程文件中，即在被建立時是伴隨一個類（UIKit框架下的類）誕生的

　2> .xib建立

　　視圖控制器獨有初始化方法

　　- (instancetype)initWithNibName:(NSString *)nibNameOrNib bundle:(NSBundle *)nibBundleOrNil

　　nibNameOrNib：當前控制器相關聯的nib文件，若是寫nil默認爲同名文件

　　nibBundleOrNil：當前應用程序包所在文件，若是寫nil默認爲mainBundle

　　在咱們使用init初始化（或者new直接建立）控制器的時候，會自動執行控制器的此方法，參數均爲默認值執行，因此可不寫

 1 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
 2     // 建立window
 3     self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
 4     self.window.backgroundColor = [UIColor whiteColor];
 5     [self.window makeKeyAndVisible];
 6     
 7     // 程序編譯時,會將xib文件編譯成nib的二進制文件,運行時加載nib文件
 8     // NibName:當前控制器的相關聯的nib文件, 若是寫爲nil,默認查找和控制器名相同的文件名,可是若是xib文件與控制器名不一樣,則查不到
 9     // bundle:獲取程序資源路徑,若是寫爲nil,默認是主路徑,由於iOS只有一個主路徑,在mac端開發時必須寫
10     
11     // 建立根視圖
12     RootViewController *rootVC = [[RootViewController alloc] initWithNibName:@"RootViewController" bundle:[NSBundle mainBundle]];
13     
14     self.window.rootViewController = rootVC;
15     
16     return YES;
17 }　　

　3> 選項卡

　　在Xcode工具欄（快捷鍵command + option(alt) + 0）管理者一組選項卡，用以對Xcode中文件（類文件或者IB文件）進行設置和描述。

　　在選中IB文件的狀況下Xcode會有六個標籤分別負責對選中的內容的信息查看和操做，包括文件基本信息、快速幫助、屬性設置等。

　4> 插座變量(Outlet)

• 插座變量:用於控制IB中的UI控件。

　　　IBOutlet:外聯指針,鏈接插座變量和IB中的UI控件。

• 設置:選中控件,按住control , 向接口部分中拖拽。

　　　Connection: 拖拽以後建立的類型(屬性、方法、集合屬性)。

　　　Object:綁定的對象。

　　　Name: 法名或者屬性名字。

　　　Type:控件類型。

　　　Storage:控件的內存修飾參數。

　5> 事件關聯(IBAction)

• 動做,用於響應UI控件的觸發事件。

　　　IBAction,鏈接方法和IB中的UI控件。

• 設置,選中控件,按住 ,向原類接 部分或者實現部分中 拖拽,設置響應 法。

　　　Name :方法名。

　　　Type :方法中的參數類型。

　　　Event : 觸發方法的方式

　　　Arguments :方法中攜帶的什麼樣的參數。

　6> 代理設置

• File’s owner : 文件的擁有者,即視圖控制器。
• 設置:右鍵單擊控件,鏈接代理變量 和 File’s owner
• 注意 :在拖拽的時候必須拖拽到 File’s owner 。
  

　　拖拽方式一：

　　拖拽方式二：　　

3. xib繪製單元格

• 自定義單元格指的是UITableView 的自定義cell。
• 經過 xib 能夠快速的繪製cell。
• 新建UITableViewController 子類, 設置爲根視圖控制器。
• 新建一個UITableViewCell 子類,勾選Also create XIB file。
• 使用 xib 繪製自定義 cell 樣式。
• 設置 cell 的重用標識(zhì)符。

• 聲明和定義重用標識符　

 1 #import "RootTableViewController.h"
 2 #import "RootCell.h"
 3 
 4 @interface RootTableViewController ()
 5 
 6 @end
 7 
 8 @implementation RootTableViewController
 9 
10 // 定義重用標識符(標準版)
11 static NSString * const identifier_cell = @"cell";

• 註冊Cell　　

 1 - (void)viewDidLoad {
 2     [super viewDidLoad];
 3     
 4     // 之前普通方式
 5 //    [self.tableView registerClass:[RootCell class] forCellReuseIdentifier:@"cell"];
 6     
 7     // xib 註冊cell
 8     [self.tableView registerNib:[UINib nibWithNibName:@"RootCell" bundle:nil] forCellReuseIdentifier:identifier_cell];
 9 }
10 // 返回Cell
11 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
12     UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:identifier_cell forIndexPath:indexPath];
13     
14     return cell;
15 }

　　記得設置自定義cell的高度

1 // 設置每一行的高度
2 - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
3 {
4     return 120;
5 }

4. 自動佈局

　1> 概述

• 自動佈局:autoLayout , 不給View 固定的位置, 經過某些規則讓View 本身適應本身的位置。
• iOS6.0以後推出, 在 iOS8.0 自動佈局被大幅度優化, iOS9 中新增了許多功能。
  

　2> 自動佈局中經常使用的四個選項

 

　3> Stack

　　

• UIStackView, 能夠管理多個視圖。一次性爲多個視圖進行約束設置。      
• Axis : 子視圖排布方向。
• Alignment :子視圖對齊方式。
• Distribution : 分佈方式。(調整 StackView 的大小 , 切換選項觀察）
• Space : 子視圖的最小間距。
• 備註 : 選中多個排列的視圖 , 勾選 Stack 便可進行編輯 StackView 選項卡。

 

　4> Align（設置視圖的對齊方式）

　　

• Leading Edges :左對齊。 　　
• Trailing Edges :右對齊。
• Top Edges :上對齊。
• Bottom Edges :下對齊。
• Horizontal Centers :縱向中心對齊
• Vertical Centers :橫向中心對齊。
• BaseLine :基線對齊。
• Horizontal in Container :以屏幕的縱向中心線對齊。
• Vertical Container :以屏幕的橫向中心對齊。
• 二者結合使用可讓View 的中心點和屏幕的中心點對齊。 　

　5> Pin (設置視圖的尺寸相關屬性)

　　

• 上面的四個方向的設置尺寸表明距離四個方向的最近的視圖的距離
• 若是對應方向沒有視圖 , 則視爲對應的屏幕方向的距離。Constrain to margins 選項表示是否留下20個點的位置。 　　
• Width：視圖的寬度
• Height：視圖的高度
• Equal Width: 兩個視圖等寬。
• Equal Height :兩個視圖等高。
• Aspect Ratio: 設置寬高比
  

 

　6> Resolve Auto Layout Issues

• Resolve Auto Layout Issues : 解決自動佈局的問題。
• Selected Views: 選中的View , 不包含子視圖。
• All Views in View：選中的View , 包含子視圖。
• Update Frame :更新位置信息。
• Update Constraints :更新約束信息。 
• Add Missing Constraints :忽略約束不足的錯誤。 
• Reset to Suggested Constraints :重置被建議的約束。 
• Clear Constraints :刪掉全部的約束。