關於xib文件和storyboard文件的那些事兒

在ios中，一般建議使用代碼布局，因為使用代碼布局，后期維護容易，拓展容易，並且可以實現動態加載很多數據，但是代碼布局比較繁瑣，不適合初學者。Xib布局或者Storyboard布局比較方便。下面介紹一下xib和storyboard的知識及創建使用方法。

有關nib、xib和storyboard的往事

nib和xib的那些事兒

開發 iOS 或 Mac 程序，搭建界面是避免不了的。Xcode 包含了一個工具 Interface Builder，可以用圖形化的方式，使用鼠標拖拉來創建界面。
Xcode 3.0 之前 Interface Builder 創建的文件是二進制格式 nib，nib 代表 NeXT Interface Builder。喬布斯從蘋果公司出走之后，創建了下一個公司 NeXT, 之后 NeXT 又被蘋果公司收購。現在 iOS 或 Mac 開發的整套系統、工具、類庫最開始都源自 NeXT。
二進制格式不好管理，也不方便版本控制，Xcode 3.0之后，Interface Builder 使用了一種新的文件格式xib。xib 的意思可能是 XML Interface Builder，也有可能是 OS X Interface Builder。xib 使用了 XML，在工程編譯的時候再轉換成 nib。Xib就是一個描述文檔，這里面包含了用戶界面和用戶界面相關元素。這樣做的主要原因是，方便程序員，因為其是“所見即所得”的，程序員不需要像原來一樣寫一堆代碼，然后運行出來才能看到界面元素的執行結果，這樣是很低效的。
在 Xcode 4.0 之前，Interface Builder 是一個獨立的軟件。而Xcode 4.0 是個大版本，界面被重新設計，Interface Builder 被直接集成到 Xcode 當中。
其實 Interface Builder 可以配置創建任何 NSObject 對象，但我們絕大多數情況下只用它來創建界面。

xib設計的一大目的其實是為了良好的MVC：一般來說，單個的xib文件對應一個ViewController，而對於一些自定義的view，往往也會使用單個xib並從main bundle進行加載的方式來載入。IB幫助完成view的創建，布局和與file owner的關系映射等一些列工作。

storyboard的那些事兒

iOS5之后Apple提供了一種全新的方式來制作UI，那就是StoryBoard。簡單理解來說，可以把StoryBoard看做是一組viewController對應的xib，以及它們之間的轉換方式的集合。在StoryBoard中不僅可以看到每個ViewController的布局樣式，也可以明確地知道各個ViewController之間的轉換關系。相對於單個的xib，其代碼需求更少，也由於集合了各個xib，使得對於界面的理解和修改的速度也得到了更大提升。

storyboard的能做的事兒

storyboard可以使程序的邏輯結構更加清楚，減少程序的代碼量，使view和controller耦合度降低。

storyboard提供的功能有自動布局（Auto Layout）、Size Classes、Scene跳轉、代碼可視化。

Storyboard的弊端

難以維護；性能瓶頸；錯誤定位困難。

有關於storyboard的更多內容，請閱讀Storyboard的愛與恨

xib文件加載

創建了一個xib文件，並在xib文件中添加了一個UIView和UILabel。

創建步驟如下：

 

xib文件界面顯示如下：

 

 

Xib文件創建好后，點擊該Xib文件，設置如下：

1、點擊test.xib -> File's Owner -> 身份檢查器 -> Class -> UIViewController；

2、點擊File's Owner -> 按住"Ctrl"按鍵不放 -> 鼠標左鍵按住不放，拖動到"View" -> 選中view。

 

下面使用source code打開xib文件：

 

xml詳情如下：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="10117" systemVersion="15F34" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES">
    <dependencies>
        <deployment identifier="iOS"/>
        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="10085"/>
    </dependencies>
    <objects>
        <placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner" customClass="UIViewController">
            <connections>
                <outlet property="view" destination="nyC-sf-CLM" id="2kO-17-hRO"/>
            </connections>
        </placeholder>
        <placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
        <view contentMode="scaleToFill" id="nyC-sf-CLM"> <rect key="frame" x="0.0" y="0.0" width="600" height="600"/> <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/> <subviews> <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" fixedFrame="YES" text="HelloWorld" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="7kL-hD-HEb"> <rect key="frame" x="269" y="112" width="84" height="21"/> <fontDescription key="fontDescription" type="system" pointSize="17"/> <color key="textColor" cocoaTouchSystemColor="darkTextColor"/> <nil key="highlightedColor"/> </label> </subviews> <color key="backgroundColor" white="1" alpha="1" colorSpace="calibratedWhite"/> </view>
    </objects>
</document>

在上面我將部分代碼加粗突出顯示出來，可以看出<view><label></label>...</view>對應着添加的view和label控件。

使用xib文件

- (IBAction)btnClick:(id)sender {
   _viewOfStoryboard = [[TestViewController alloc]initWithNibName:@"test" bundle:nil];
    _viewOfStoryboard.view.backgroundColor = [UIColor whiteColor];
    [self dismissViewControllerAnimated:YES completion:nil];
    [self presentViewController:_viewOfStoryboard animated:YES completion:nil];
}

由於沒有進行約束，所以label的位置發生了變化，顯示效果：

點擊Button－－－－－－－－－－－－－－－－－>顯示

Storyboard加載

新建Storyboard文件，快速創建（使用cmd＋N）：

 

Storyboard文件創建好后，點擊該Storyboard文件，設置如下：

1、點擊TestViewController.storyboard -> View Controller -> 身份檢查器 -> Class -> UIViewController

2、Identity -> Storyboard ID -> 填入該控制器的唯一標識

 

屬性面板中的Is Initial View Controller選項一定要選中，否則程序運行時會出現crash。詳情請閱讀Application tried to present a nil modal view controller on target “Current View Controller”解決方案。

TestViewController.storyboard文件用Source Code打開：

對應xml詳情：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="10117" systemVersion="15F34" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" initialViewController="o5p-NM-CmB">
    <dependencies>
        <deployment identifier="iOS"/>
        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="10085"/>
    </dependencies>
    <scenes>
        <!--View Controller-->
        <scene sceneID="KVb-4h-YfQ">
            <objects>                    
                <viewController storyboardIdentifier="TeststoryboardID" id="o5p-NM-CmB" sceneMemberID="viewController">
                    <layoutGuides>
                        <viewControllerLayoutGuide type="top" id="rlj-D4-qTs"/>
                        <viewControllerLayoutGuide type="bottom" id="efH-L5-gfL"/>
                    </layoutGuides>
                    <view key="view" contentMode="scaleToFill" id="efL-Bt-VVl">
                        <rect key="frame" x="0.0" y="0.0" width="600" height="600"/>
                        <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                        <subviews>
                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" fixedFrame="YES" restorationIdentifier="MyStoryboard" text="Hello－ios" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="lk9-fl-mjE"> <rect key="frame" x="199" y="100" width="202" height="41"/> <fontDescription key="fontDescription" type="system" pointSize="17"/> <color key="textColor" cocoaTouchSystemColor="darkTextColor"/> <nil key="highlightedColor"/> </label>
                        </subviews>
                        <color key="backgroundColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
                    </view>
                </viewController>
                <placeholder placeholderIdentifier="IBFirstResponder" id="C30-mU-UYt" userLabel="First Responder" sceneMemberID="firstResponder"/>
            </objects>
            <point key="canvasLocation" x="910" y="142"/>
        </scene>
    </scenes>
</document>

在xml文件中我將storyboard和Label對應的部分加粗進行了突出顯示。

使用storyboard文件

- (IBAction)btnClick:(id)sender {
    UIStoryboard *storyboard = [UIStoryboard storyboardWithName:@"TestViewController" bundle:nil];
     _viewOfStoryboard = [storyboard instantiateInitialViewController];
    //使用storyboardID創建
//    _viewOfStoryboard = [storyboard instantiateViewControllerWithIdentifier:@"TeststoryboardID"];
    _viewOfStoryboard.view.backgroundColor = [UIColor whiteColor];
    [self dismissViewControllerAnimated:YES completion:nil];
    [self presentViewController:_viewOfStoryboard animated:YES completion:nil];
}

運行顯示：

點擊Button－－－－－－－－－－－－－－－－－>顯示