Itty Bitty Labs

Code and technical stuff from Itty Bitty Apps.

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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<?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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<?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:

  • XIBs are much smaller (fewer lines of code).
  • A developer can easily read the XML and understand what it specifies in the user interface.
  • Merging XIBs is now much less likely to lead to broken XIBs. Before we would rarely even bother to try and merge a XIB or Storyboard.
  • It might be possible for 3rd party tools to be built around the new XIB format. We’ll probably need an actual DTD to be published by Apple for this to be truly reliable though.
  • The new (much better) Auto Layout workflows in Xcode 5 are enabled by the new XIB format.

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!


About Oliver

Oliver Jones is the Technical Director at Itty Bitty Apps. He spends his days building the iOS Introspection tool Reveal and playing Pinball. You can follow him on twitter @orj.