可視化編程-xib

1、Interface Builder可視化編程

　　一、Interface Builder簡介：

• GUI：圖形用戶界面（Graphical User Interface，簡稱GUI，又稱圖形用戶接口）是指採用圖形方式顯示的計算機操做用戶界面。
• Interface Builder（IB）：是Mac OS X 平臺下用於設計和測試圖形用戶界面的應用程序。代碼和IB均可以生成GUI。
• 優點：IB可以使開發者簡單快捷的開發出符合Mac系列操做系統的GUI。一般只須要經過簡單的拖拽操做來構建GUI。IB使用Nib文件儲存GUI資源，在須要的時候，Nib文件能夠被快速的載入內存。

　　二、iOS可視化編程

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

2、xib簡單實用

　　一、.xib建立

• xib一般以關聯方式出如今工程文件中，即在被建立時是伴隨一個類（UIKIT框架下的類）誕生的。如圖所示：
• 關聯xib後，視圖控制器獨有的初始化方法：

 

    // 建立視圖控制器，給window指定根控制器
    // 程序編譯時會將xib文件編譯成nib的二進制文件，運行時加載nib文件
    // nibName：當前控制器相關聯的nib文件，若是寫爲nil，默認查找和控制器名相同的文件名，可是若是xib文件與控制器名不相同，則查找不到。
    // bundle：獲取程序的資源路徑，若是寫爲nil，默認是主路徑，由於iOS只有一個主路徑，在mac端開發時必須寫。
    self.window.rootViewController = [[RootViewController alloc] initWithNibName:@"RootViewController" bundle:[NSBundle mainBundle]];

• 建立好後.xib文件的樣式

　　二、控件關聯

• 在可視化編程中，功能部分仍然須要依賴於代碼，因此咱們須要將控件和代碼相關聯起來。
• 插座變量：用於IB中的UI控件。
• IBOutlet：外聯指針，鏈接插座變量和IB中的UI空間。
• 設置：選中控件，按住control，向接口部分中拖拽，便可關聯。

1. Connection：拖拽以後建立的類型（屬性、方法、集合屬性）。
2. Object：綁定的對象。
3. Name：方法名或者屬性名字。
4. Type：控件類型。
5. Storage：控件的內存修飾參數。

　　三、事件關聯

• 動做：用於響應UI控件的觸發事件。IBAction，鏈接方法和IB中的UI控件。
• 設置：選中控件，按住control，向原類接口部分或者實現部分中拖拽，設置響應方法。

1. Name:方法名。
2. Type：方法中的參數類型。
3. Event：觸發方法的方式。
4. Arguments：方法中攜帶的什麼樣的參數。

　　四、代理設置

• File's owner：文件的擁有者，即視圖控制器。
• 設置：右鍵單擊控件，鏈接代理變量和File's owner。

 

3、xib繪製單元格

　　一、自定義單元格

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

    // 註冊cell
    [self.tableView registerNib:[UINib nibWithNibName:@"CustomCell" bundle:[NSBundle mainBundle]] forCellReuseIdentifier:identifier_cell];

    // 返回cell
    - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    CustomCell *cell = [tableView dequeueReusableCellWithIdentifier:identifier_cell forIndexPath:indexPath];
    return cell;
}

 

 

4、自動佈局

　　一、自動佈局

• 自動佈局：autoLayout，不給View固定的位置，經過某些規則讓View本身適應本身的位置。
• 自動佈局中經常使用的四個選項

　　二、Stack

• UIStackView，能夠管理多個視圖。一次性爲多個視圖進行約束設置。
• Axis：子視圖排布方向。
• Alignment：子視圖對齊方式。
• Distribution：分佈方式。（調整StackView的大小，切換選項觀察）。
• Space：子視圖的最小間距。

　　三、Align

• Align，設置視圖的對齊方式。
• Leading Edges：左對齊。
• Trailing Edges：右對齊。
• Top Edges：上對齊。
• Bottom Edges：下對齊。
• Horizontal Centers：縱向中心對齊。
• Vertical Centers：橫向中心對齊。
• BaseLines：基線對齊。
• Horizontally in Container：以屏幕的縱向中心線對齊。
• Vertically in Container：以屏幕的橫向中心對齊。
• 二者結合使用可讓View的中心點和屏幕中心點對齊。

　　四、Pin

• Pin：設置視圖的尺寸相關屬性。
• 上面的四個方向的設置尺寸表明距離四個方向的最近的視圖的距離。
• 若是對應方向沒有視圖，則視爲對應的屏幕方向的距離。
• Constrain to margins選項表示是否留下20個點的位置。
• Width：視圖的寬度。
• Height：視圖的高度。
• AspectRatio：設置寬高比。
• 當選中一個以上的視圖個數：
• Equal Width：兩個視圖等寬。
• Equal Height：兩個視圖等高。

　　五、Resolve Auto Layout Issues

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