Upgrade all the XIBs

Xcode 5 was released today along with iOS 7. If you are an iOS or MacOS X developer who uses XIBs and Storyboards in their projects, one of the most significant features to be added to Xcode 5 is the new file format for these files.

If you are a Cocoa developer who has sworn off using XIBs and Storyboards because of the old file format and the trouble that it brings with merging and understanding, it is time to reconsider your position.

You may be asking, why is this such a huge event? Well, in the past this is what XIBs looked like:

Xcode 3.x & 4.x style XIB

<?xml version="1.0" encoding="UTF-8"?>
<archive type="com.apple.InterfaceBuilder3.Cocoa.XIB" version="8.00">
  <data>
    <int key="IBDocument.SystemTarget">1080</int>
    <string key="IBDocument.SystemVersion">12E55</string>
    <string key="IBDocument.InterfaceBuilderVersion">3084</string>
    <string key="IBDocument.AppKitVersion">1187.39</string>
    <string key="IBDocument.HIToolboxVersion">626.00</string>
    <object class="NSMutableDictionary" key="IBDocument.PluginVersions">
      <string key="NS.key.0">com.apple.InterfaceBuilder.CocoaPlugin</string>
      <string key="NS.object.0">3084</string>
    </object>
    <array key="IBDocument.IntegratedClassDependencies">
      <string>IBNSLayoutConstraint</string>
      <!-- ... -->
      <string>NSTextFieldCell</string>
    </array>
    <array key="IBDocument.PluginDependencies">
      <string>com.apple.InterfaceBuilder.CocoaPlugin</string>
    </array>
    <object class="NSMutableDictionary" key="IBDocument.Metadata">
      <string key="NS.key.0">PluginDependencyRecalculationVersion</string>
      <integer value="1" key="NS.object.0"/>
    </object>
    <array class="NSMutableArray" key="IBDocument.RootObjects" id="1000">
      <object class="NSCustomObject" id="1003">
        <string key="NSClassName">FirstResponder</string>
      </object>
      <object class="NSCustomView" id="1005">
        <reference key="NSNextResponder"/>
        <int key="NSvFlags">268</int>
        <array class="NSMutableArray" key="NSSubviews">
          <object class="NSTextField" id="614930396">
            <reference key="NSNextResponder" ref="1005"/>
            <int key="NSvFlags">268</int>
            <string key="NSFrame">\{\{42, 2\}, \{287, 14\}\}</string>
            <reference key="NSSuperview" ref="1005"/>
            <reference key="NSWindow"/>
<!-- etc.... -->

The files were huge, nasty messes of XML that Xcode would change and re-order on a whim. While it might have been possible to build a mental model of what user interface the XIB represented it was very hard so no one bothered.

With Xcode 5 XIBs are still XML but they are now XML that a human might write by hand. Eg:

Xcode 5.x style XIB

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<document type="com.apple.InterfaceBuilder3.Cocoa.XIB" version="3.0" toolsVersion="4510" systemVersion="12F37" targetRuntime="MacOSX.Cocoa" propertyAccessControl="none" useAutolayout="YES">
    <dependencies>
        <deployment defaultVersion="1080" identifier="macosx"/>
        <plugIn identifier="com.apple.InterfaceBuilder.CocoaPlugin" version="4510"/>
    </dependencies>
    <objects>
        <customObject id="-2" userLabel="File's Owner" customClass="IBAAppSummaryTitleViewController">
            <connections>
                <outlet property="appNameTextField" destination="2" id="222"/>
                <!-- ... -->
                <outlet property="view" destination="1" id="66"/>
            </connections>
        </customObject>
        <customObject id="-1" userLabel="First Responder" customClass="FirstResponder"/>
        <customObject id="-3" userLabel="Application"/>
        <customView id="1" customClass="IBABarView">
            <rect key="frame" x="0.0" y="0.0" width="346" height="31"/>
            <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
            <subviews>
                <imageView translatesAutoresizingMaskIntoConstraints="NO" id="121">
                    <rect key="frame" x="8" y="1" width="29" height="29"/>
                    <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
                    <constraints>
                        <constraint firstAttribute="width" constant="29" id="141"/>
                    </constraints>
                    <imageCell key="cell" refusesFirstResponder="YES" alignment="left" imageScaling="proportionallyDown" image="ipad-icon" id="122"/>
                </imageView>
<!-- etc.... -->

The benefits of this new XIB XML format are many fold:

Xcode 5 XIB Property Inspector Settings

Xcode 5 XIB Property Inspector Settings

So if you’ve not done so already I highly recommend updating your project’s XIBs to the new Xcode 5 format. Xcode 5 should prompt you to do so the next time you open a XIB but if it does not you can just change the Interface Builder Document properties in the Xcode inspector for a XIB file and then save the XIB file again (as shown to the right).

Bear in mind that once you upgrade you wont want to go back to Xcode 4 style XIBs (even though it is technically possible). So before you do so ensure that this isn’t going to be a problem for your team or build servers.

Go forth and convert!

Written by
Oliver Jones — Oliver is the Technical Director at Itty Bitty Apps. You can follow him on Twitter @orj.