[XCode] Interface Builder 是怎么工作的

参考：http://www.informit.com/articles/article.aspx?p=1828676

IB 的作用：

• 可视化地创建界面元素
• 可视化地将界面元素映射成变量实例，比如将一个按钮在.h文件中映射成一个 IBOutlet UIButton * 的指针（通过对界面元素右键菜单选择”New Referncing Outlet“并拖拽至代码中实现）
• 可视化地在界面元素和action之间创建connection（通过对界面元素右键菜单选择诸如”Touch Up Inside“的事件并拖拽至代码中实现）
• 自动实例化（instantiate）界面中的，比如为界面中的按钮自动 new 一个 IBOutlet UIButton * 的指针。无需手工写 [ [some_ui_class alloc] init] 这样的代码：When a scene in a storyboard file is loaded by your application, the objects described in it are instantiated and can be accessed by your code

下面是一个 storyboard 的文本内容。可见其中定义了层级的界面元素布局，每个元素定义了诸如 id、类型、大小、颜色。更重要的，还对其中的按钮定义了一个 action，指定了响应 action 的 selector、目标元素、事件类型等信息。

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="6254" systemVersion="14A389" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" initialViewController="vXZ-lx-hvc">
    <dependencies>
        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="6246"/>
    </dependencies>
    <scenes>
        <!--View Controller-->
        <scene sceneID="ufC-wZ-h7g">
            <objects>
                <viewController id="vXZ-lx-hvc" customClass="ViewController" sceneMemberID="viewController">
                    <layoutGuides>
                        <viewControllerLayoutGuide type="top" id="jyV-Pf-zRb"/>
                        <viewControllerLayoutGuide type="bottom" id="2fi-mo-0CV"/>
                    </layoutGuides>
                    <view key="view" contentMode="scaleToFill" id="kh9-bI-dsS">
                        <rect key="frame" x="0.0" y="0.0" width="320" height="568"/>
                        <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
                        <subviews>
                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" fixedFrame="YES" text="?" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="GeI-HV-h4E">
                                <rect key="frame" x="36" y="28" width="248" height="76"/>
                                <fontDescription key="fontDescription" type="system" pointSize="17"/>
                                <color key="textColor" cocoaTouchSystemColor="darkTextColor"/>
                                <nil key="highlightedColor"/>
                            </label>
                            <button opaque="NO" contentMode="scaleToFill" fixedFrame="YES" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="TLI-nX-fBD">
                                <rect key="frame" x="48" y="204" width="225" height="30"/>
                                <state key="normal" title="What to do?">
                                    <color key="titleShadowColor" white="0.5" alpha="1" colorSpace="calibratedWhite"/>
                                </state>
                                <connections>
                                    <action selector="makeDecision:" destination="vXZ-lx-hvc" eventType="touchUpInside" id="0ye-Qf-yPW"/>
                                </connections>
                            </button>
                        </subviews>
                        <color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="calibratedWhite"/>
                    </view>
                    <connections>
                        <outlet property="decisionButtion" destination="TLI-nX-fBD" id="9bA-BU-PD7"/>
                        <outlet property="decisionLabel" destination="GeI-HV-h4E" id="AMD-tu-Uwg"/>
                    </connections>
                </viewController>
                <placeholder placeholderIdentifier="IBFirstResponder" id="x5A-6p-PRh" sceneMemberID="firstResponder"/>
            </objects>
            <point key="canvasLocation" x="234" y="377"/>
        </scene>
    </scenes>
    <simulatedMetricsContainer key="defaultSimulatedMetrics">
        <simulatedStatusBarMetrics key="statusBar"/>
        <simulatedOrientationMetrics key="orientation"/>
        <simulatedScreenMetrics key="destination" type="retina4"/>
    </simulatedMetricsContainer>
</document>

这里的 storyboard 对应的可视化效果如下：

最终创建了：

• 界面元素及其布局
• 界面元素到代码中变量的映射
• 界面元素事件到代码中响应函数的映射
• 在 storyboard 界面加载时，自动 new 出其中的界面元素变量

注：

At its most basic level, a view (UIView) is a rectangular region that can contain content and respond to user events (touches and so forth). All the controls (buttons, fields, and so on) that you’ll add to a view are, in fact, subclasses of UIView. This isn’t necessarily something you need to be worried about, except that you’ll be encountering documentation that refers to buttons and other interface elements referred to as subviews and the views that contain them as superviews.

Just keep in mind that pretty much everything you see onscreen can be considered a “view” and the terminology will seem a little less alien.

本质上来说，一个 UIView 就是一个能包含 content 并能对用户事件做出响应的矩形区域。因此，所有添加到视图（view）中的控件，都是 UIView 的子类。屏幕上可见的任何东西都可以被视为是一个”view“