iOS應用是非常注重用戶體驗的,在某些方面上應用的成功與否于UI界面是否漂亮,以及應用交互設計上有著非常重要的關系

隨著iOS開發(fā)發(fā)展至今,在UI制作上大概分為三個流派:

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

2.使用Xib文件來組織UI

3.使用StoryBoard故事板

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

xib

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

xib的創(chuàng)建

首先我們創(chuàng)建一個模板工程,它基于single view application(單視圖應用)

創(chuàng)建模板工程

然后我們Cmd+n創(chuàng)建一個空的Xib文件

創(chuàng)建空的Xib文件

這樣我們就可以從右側邊欄,隨意拖動一個控件到空白區(qū)域了.

控件

這樣我們就完成了xib文件的創(chuàng)建.實際上無論是xib還是storyboard,他們都是xml格式的資源文件.我們可以通過右鍵xib文件->Open As來切換顯示格式.

查看

然而,對于VC和view的創(chuàng)建我們還是有些不同的,當我們在創(chuàng)建UIViewController及其子類的時候我們只需要在創(chuàng)建文件的時候勾選also create xib file即可,這樣類文件創(chuàng)建出來之后,也就自然的與一起創(chuàng)建出來的xib文件關聯在一起了.

Xib_VC

對UIView及其子類的創(chuàng)建,則需要將子類文件與xib文件分別創(chuàng)建(注:通常我們會以與類文件相同的名字來命名對應的xib文件,xib文件的創(chuàng)建同上創(chuàng)建空的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開發(fā)過程中返回的數組中只會有一個元素,所以我們只要去取其第一個元素即可.即:[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文件與我們自己創(chuàng)建的類文件

four

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

five

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

six

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

關于AutoLayout

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

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

autolayout

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的很多方面需要在開發(fā)中自己琢磨,這里只是拋磚引玉.

關于連線-xib使用案例

創(chuàng)建

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

我們需要讓程序從我們創(chuàng)建的Xib文件啟動,所以我們可以刪掉系統給我們提供的ViewController類文件以及Main.storyboard文件.然后Main Interface下的Main.

創(chuàng)建伊始

我們創(chuàng)建一對類文件RootViewController,并勾選also create XIB file,創(chuàng)建出對應的xib文件.

然后我們在appDelegate中導入RootViewController的.h文件.我們創(chuàng)建和屏幕等大的窗口,并把窗口根視圖控制器指定為我們自己創(chuàng)建的控制器.最后將window設置為主Window并使之可見.

appDelegate

我們在這個方法里寫如下代碼

    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];

完成這幾步,程序啟動之后展示的就是我們自己創(chuàng)建的控制器了

屬性設置

接下來我們在xib文件中進行UI的設計.我們拖兩個Label控件,兩個TextField控件.注意為了方便添加約束,我們每拖一個控件就為它設置約束.例如我們?yōu)閮蓚€Label設置約束如下:

Label設置約束

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

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

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

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設置代理.我們?yōu)閡sernameTextField設置代理,實現對鍵盤的響應控制.

設置代理

代碼設置部分

為了演示被拖成屬性的空間用代碼是可以進行操作的,我們?yōu)?em>用戶名按鈕用代碼切成圓角.并且更改用戶名這個Label上顯示的文字,讓它顯示UserName.

在RootViewController的viewDidLoad方法下

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

效果如下:

圓角效果

設置鍵盤的響應事件

遵循協議:

遵循協議

我們設置usernaeTextField為鍵盤的第一響應者

[_nameTextField becomeFirstResponder];

為了實現鍵盤的連續(xù)響應我們需要判斷當前的響應者,也就是說我們需要分辨這兩個textField.所以我們設置為usernameTextField設置一個tag值

設置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 ,
由于筆者水平有限,如有疑問或者錯誤,歡迎大家交流,指正,我將不勝感激.