Open source: automatically convert XIBs to Storyboard files
To make it easy to convert XIB files to Storyboard, we developed an easy-to-use Mac app – and we’re happy to share.
Creating the user interface for applications on Apple platforms is typically done in Interface Builder, a tool built into Xcode that allows the developer to layout each UI element in an application without writing any code.
There are two file types that can be used in Interface Builder:
- XIB files: Can contain multiple views but only 1 class owning them. Often used to design the UI of 1 view controller.
- Storyboard files: Can contain multiple view controllers and define the navigation between them. Typically used to design the flow of the entire or a part of the application.
At November Five, we’ve traditionally been a fan of XIBs, since every view (controller) is neatly stored in its own separate file. The format has several advantages:
- Views (controllers) in XIB files are very easy to reuse, and navigation between them can be flexible.
- XIBs contain much fewer views, which means they take less time to load in Interface Builder.
- More files means less risk to create merge conflicts when working with multiple developers on the same project. Interface Builder files are internally just XMLs – as soon as you open one (even without changing values), it will make changes to the XML. So multiple developers opening one big Storyboard file typically results in a lot of merge conflicts.
However, in recent years Apple has mainly focused on improving Storyboards, meaning XIBs are lacking some features when compared to Storyboards:
- XIBs don’t have top or bottom layout guides
- XIBs don’t allow you to create template table or collection view cells
- Safe Area Layout guides (required to support iPhone X backwards compatibility for iOS 9 and 10) don’t work properly in XIBs. This is a known bug.
That means that for applications using view controllers with XIBs, to support the iPhone X and not break compatibility for older OS versions, we need to either port these to one or more Storyboards or fix the layout manually in code. We’ll go with the first option.
Why did we make xib2Storyboard?
Moving a view controller XIB to a Storyboard is easy enough. You can select the view of the view controller in the XIB, copy it, create a view controller in the Storyboard and paste the view there. However, this results in all outlets being cleared and potentially losing constraints. All these can be set again of course, but it becomes a tedious monkey job really fast. And if you’ve been following our blog for a while, you know we don’t like monkey jobs.
We looked for a tool to automate this process, but we couldn’t find anything. So we made one ourselves.
xib2Storyboard is a small macOS app that converts multiple view controller XIBs to multiple Storyboards or combines multiple view controller XIBs into one Storyboard. All objects are moved to the Storyboard and all outlets and constraints are preserved and linked to the correct elements. Each view controller’s Storyboard ID (and Restoration ID) will be set to the name of the custom class (if any). Currently xib2Storyboard supports both iOS and tvOS XIB files.
How to use xib2Storyboard
First, navigate to the .xib files you’d like to convert in Finder, and drag & drop your files into xib2Storyboard.
Alternatively, you can also press the plus button on the bottom and add .xib files that way.
Next, if you want to convert your .xibs to an individual .storyboard leave “Combine to single Storyboard” unchecked and press “convert”. This will place each .storyboard file in the same directory with the same name your .xib was.
If you want multiple .xib’s to be added to the same .storyboard, check “Combine to single Storyboard” and press export. This will present you a modal save window, so you can add a suiting name for your new .storyboard file.
xib2Storyboard is open source, and both the code and the binary can be found on our GitHub page.
And if you’re looking into the steps you should be taking to make your apps suitable for the iPhone X, don’t fret: we wrote a blogpost detailing how to do just that.