iOS 開發可視化編程之Xib 簡述

iOS應用是很是注重用戶體驗的,在某些方面上應用的成功與否於UI界面是否漂亮,以及應用交互設計上有着很是重要的關係

隨着iOS開發發展至今,在UI製做上大概分爲三個流派:

1.使用代碼手寫UI和佈局

2.使用Xib文件來組織UI

3.使用StoryBoard故事板

關於三者的優缺點以及應用的場景請移步代碼手寫UI，xib和StoryBoard間的博弈，以及Interface Builder的一些小技巧

xib

xib是一個可視化文件,就像咱們往紙上畫畫同樣,咱們能夠隨意拖動一個UI控件到這張紙上

xib的建立

首先咱們建立一個模板工程,它基於single view application(單視圖應用)

而後咱們Cmd+n建立一個空的Xib文件

這樣咱們就能夠從右側邊欄,隨意拖動一個控件到空白區域了.

這樣咱們就完成了xib文件的建立.實際上不管是xib仍是storyboard,他們都是xml格式的資源文件.咱們能夠經過右鍵xib文件->Open As來切換顯示格式.

然而,對於VC和view的建立咱們仍是有些不一樣的,當咱們在建立UIViewController及其子類的時候咱們只須要在建立文件的時候勾選also create xib file便可,這樣類文件建立出來以後,也就天然的與一塊兒建立出來的xib文件關聯在一塊兒了.

對UIView及其子類的建立,則須要將子類文件與xib文件分別建立(注:一般咱們會以與類文件相同的名字來命名對應的xib文件,xib文件的建立同上建立空的xib文件的步驟一致),最重要的文件關聯.

咱們點擊進入xib文件,在右側邊欄選擇第三個按鈕(show the identity inspect)下的custom class的class選項,將該xib文件對應的類文件名寫在輸入框中,最後回車一下就Ok了

關於加載xib文件的init方法

UIViewController加載xib文件一般使用如下方法:

- (instancetype)initWithNibName:(nullable NSString *)nibNameOrNil bundle:(nullable NSBundle *)nibBundleOrNil;

而基於UIView子類的xib一般使用如下方法加載,該方法返回的是一個數組,而在iOS開發過程當中返回的數組中只會有一個元素,因此咱們只要去取其第一個元素便可.即:[0].

- (NSArray *)loadNibNamed:(NSString *)name owner:(id)owner options:(NSDictionary *)options;

**注:**關於加載方法中的NibName:

nib實際上是xib通過Xcode編譯以後的加密文件,編譯以後Xcode沒法正常打開,而storyboard被編譯以後會生成. storyboardc文件,也是打不開的,二者都存放在app的main bundle中.

簡單使用xib

關於xib的簡單使用,主要就是對右側邊欄的簡單介紹

當咱們點擊進入xib文件的時候,在右側邊欄咱們會看到六個標籤:

one

第一個標籤:show the file inspector.這個標籤主要介紹xib文件的基本信息,通常是不會用到的,因此也不用修改.

two

第二個標籤:show quick help inspector.這個標籤就是一些快捷幫助信息,基本上就是蘋果API中對某個控件的介紹.

three

第三個標籤:show the identity inspector.在這個標籤下主要作一些標識.咱們最經常使用的就是其中的Custom Class,用這個標籤來關聯xib文件與咱們本身建立的類文件

four

第四個標籤:show the attributes inspector.在這個標籤使咱們最經常使用的一個標籤,咱們一般會使用它進行控件的屬性設置.好比設置模擬器的一些尺度,顏色等相關的.這個標籤的內容(便可設置的屬性)會因控件的不一樣而變化的.

five

第五個標籤:show the size inspector.這個標籤是設置frame的相關,主要與尺寸相關.

six

第六個標籤:show the connections inspector.這個標籤主要負責xib文件與類的源文件交互,通俗的將就是"連線",在xib中控件的屬性與觸發的動做,都是能夠拖一條線到類的源文件中,用代碼進行下步操做的.這會在接下來進行介紹.

關於AutoLayout

AutoLayout是iOS6引入的,由於iPhone5的屏幕從3.5寸增大到了4寸,這使得在開發中使用frame進行UI界面的設計,在適配屏幕的時候成了一個問題,因而應運而生了AutoLayout.

在xib中設置自動佈局主要用到的是右下角的四個標籤

one

第一個標籤:Stack.這是Xcode7在iOS9引入的新功能,它用來統一管理它全部的subView(子視圖)上的約束.

two

第二個標籤:Align.它主要管理視圖的對應關係.從上到下依次是:左右上下,水平,垂直對齊等...

three

第三個標籤:Pin.它用於對單個視圖添加約束,紅色框起來的小三角形能夠選擇約束添加的相對參考視圖. 其中Constrain to margin這個選項若是勾選上則表示參考邊緣不是實際的父視圖的邊緣,一般是在父視圖邊緣減20的位置做爲參考邊緣. Aspect Ratio是設置自身的寬高比, Equal Width/Height是相對於其餘控件,設置等寬或者等高.這個選項咱們能夠按住Control鍵拖到其餘控件上時設置.

four

第四個標籤:Resolve autoLayout issue.這個標籤主要用於從新設置autolayout.這個標籤能夠做用在選中的view或者是以這個view爲父視圖的全部view 好比:Update Frame,用於更新UI,好比咱們設置了自動適應佈局,能夠用這個選項來更新它的位置. Clear Constraint,用於清空全部的約束.

注意

若是咱們使用了autoLayout自動佈局,那麼咱們在ViewDidLoad和iOS5以後新加入的ViewWillLayoutSubviews中修改Frame均不能生效.這是由於,ViewWillLayoutSubviews這個方法在ViewDidLoad以後調用,也就是說frame生效以後接着就被autoLayout給從新佈局了.

既然這樣那麼,咱們要更改frame就要在ViewDidLayoutSubviews中更改,或者將自動佈局拖成屬性,在代碼中更改.

關於AutoLayout的不少方面須要在開發中本身琢磨,這裏只是拋磚引玉.

關於連線-xib使用案例

建立

連線是將xib文件與類的源文件關聯起來.咱們簡單模擬一個登錄界面的需求.

咱們須要讓程序從咱們建立的Xib文件啓動,因此咱們能夠刪掉系統給咱們提供的ViewController類文件以及Main.storyboard文件.而後Main Interface下的Main.

咱們建立一對類文件RootViewController,並勾選also create XIB file,建立出對應的xib文件.

而後咱們在appDelegate中導入RootViewController的.h文件.咱們建立和屏幕等大的窗口,並把窗口根視圖控制器指定爲咱們本身建立的控制器.最後將window設置爲主Window並使之可見.

咱們在這個方法裏寫以下代碼

self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
    RootViewController *rootVC = [[RootViewController alloc] initWithNibName:@"RootViewController" bundle:[NSBundle mainBundle]];
    self.window.rootViewController = rootVC;
    self.window.backgroundColor = [UIColor whiteColor];
    [self.window makeKeyAndVisible];
複製代碼

完成這幾步,程序啓動以後展現的就是咱們本身建立的控制器了

屬性設置

接下來咱們在xib文件中進行UI的設計.咱們拖兩個Label控件,兩個TextField控件.注意爲了方便添加約束,咱們每拖一個控件就爲它設置約束.例如咱們爲兩個Label設置約束以下:

其餘控件的約束添加方式同上.

以上約束設置中的參數只是演示，與文中效果無關

下面咱們設置Label以及Button的文字,以及TextField的佔位文字.

關於Label和Button文字咱們也能夠經過雙擊控件設置.

咱們能夠經過show the attributes inspect標籤下的View子標籤的background屬性設置控件的顏色.

關於其餘的屬性,例如文字大小,顏色等屬性你們能夠本身測試.

將控件拖成屬性

咱們能夠按住Control鍵將Xib中的控件在代碼中關聯成屬性或者方法,這就是IBOutLet和IBAction.

1.咱們先將Xcode設置成分屏顯示.

第二個按鈕.找到與xib文件關聯的類文件.

2.接下來就能夠將控件拖成屬性或者方法了

屬性的關聯同上所示.

咱們把button的點擊事件關聯成方法,關聯方式以下所示.

關聯完成以後咱們就能夠在show the connections inspector標籤下看到了.

設置代理

一樣咱們可使用Xib設置代理.咱們爲usernameTextField設置代理,實現對鍵盤的響應控制.

代碼設置部分

爲了演示被拖成屬性的空間用代碼是能夠進行操做的,咱們爲用戶名按鈕用代碼切成圓角.而且更改用戶名這個Label上顯示的文字,讓它顯示UserName.

在RootViewController的viewDidLoad方法下

self.nameLabel.text = @"UserName";
    // 切圓角
    self.nameLabel.layer.cornerRadius = 4;
    self.nameLabel.layer.masksToBounds = YES;
複製代碼

效果以下:

設置鍵盤的響應事件

遵循協議:

咱們設置usernaeTextField爲鍵盤的第一響應者

[_nameTextField becomeFirstResponder];

爲了實現鍵盤的連續響應咱們須要判斷當前的響應者,也就是說咱們須要分辨這兩個textField.因此咱們設置爲usernameTextField設置一個tag值

實現代理協議方法

-(BOOL)textFieldShouldReturn:(UITextField *)textField{
    
//    [_usernameTextField resignFirstResponder];
    if (textField.tag == 1000) {
        [_passWordTextField becomeFirstResponder];
    }else{
        
        [_passWordTextField resignFirstResponder];
    }
    
    
    return YES;
}
複製代碼

實現button的點擊事件

在上面咱們已經爲UIButton的點擊事件關聯了方法,如今咱們實現方法.咱們在這裏模擬點擊button更改背景顏色的事件,而且回收鍵盤事件.

實現點擊事件:

- (IBAction)btnClick:(id)sender {
	[_usernameTextField resignFirstResponder]
    [_passWordTextField resignFirstResponder];
    NSLog(@"登錄成功");
    self.view.backgroundColor = [UIColor colorWithRed:arc4random()%256/255.0 green:arc4random()%256/255.0 blue:arc4random()%256/255.0 alpha:1];
}
複製代碼

最終效果:

Last

以上是我在學習可視化編程Xib時的一些筆記整合.學習資料主要來自簡書二亮子，一天一點Xib , 因爲筆者水平有限,若有疑問或者錯誤,歡迎你們交流,指正,我將不勝感激.