iOS 開發視覺化程式設計之Xib 簡述

SoC發表於2018-01-03
原文網址 : https://juejin.im/post/5a3cbb4b51882560b76c5d76
iOS視覺化程式設計

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檔案的建立.實際上無論是xib還是storyboard,他們都是xml格式的資原始檔.我們可以通過右鍵xib檔案->Open As來切換顯示格式.

檢視

然而,對於VC和view的建立我們還是有些不同的,當我們在建立UIViewController及其子類的時候我們只需要在建立檔案的時候勾選also create xib file即可,這樣類檔案建立出來之後,也就自然的與一起建立出來的xib檔案關聯在一起了.

Xib_VC

對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中設定自動佈局主要用到的是右下角的四個標籤

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

關於連線-xib使用案例

建立

連線是將xib檔案與類的原始檔關聯起來.我們簡單模擬一個登陸介面的需求.

我們需要讓程式從我們建立的Xib檔案啟動,所以我們可以刪掉系統給我們提供的ViewController類檔案以及Main.storyboard檔案.然後Main Interface下的Main.

建立伊始

我們建立一對類檔案RootViewController,並勾選also create XIB file,建立出對應的xib檔案.

然後我們在appDelegate中匯入RootViewController的.h檔案.我們建立和螢幕等大的視窗,並把視窗根檢視控制器指定為我們自己建立的控制器.最後將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];
複製程式碼

完成這幾步,程式啟動之後展示的就是我們自己建立的控制器了

屬性設定

接下來我們在xib檔案中進行UI的設計.我們拖兩個Label控制元件,兩個TextField控制元件.注意為了方便新增約束,我們每拖一個控制元件就為它設定約束.例如我們為兩個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設定代理.我們為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值

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

相關文章