Copying from .xib to .storyboard and retaining IBOutlet connections - ios

Question

I'm migrating old app from .xib-s to .storyboard-s. Those .xibs have many IBOutlet connections and it is very time consuming to copy&paste the view and recreate them. I was wondering if there is a way to do this seamlessly. Anybody knows solution to this problem?

Answer 1

Yes there is a way.
Ensure the storyboard view controller scene has the correct class set for the view controller.
Right click on the xib file, and select Open As -> Source Code.
Locate the <subviews> ... </subviews> pair of tags, and copy the section.
Open the storyboard in the same way (Open As -> Source Code) and locate the corresponding view controller in the xml (marked by an xml comment eg <!--MyViewController>), and copy and paste you subviews xml from the xib, inside the view controllers <view> ... </view> tags. Eg
<viewController id="vXZ-lx-hvc" customClass="TwoViewController" 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>
<button opaque="NO" contentMode="scaleToFill" fixedFrame="YES" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="fLe-1C-hTu">
<rect key="frame" x="116" y="244" width="46" height="30"/>
<state key="normal" title="Button">
<color key="titleShadowColor" white="0.5" alpha="1" colorSpace="calibratedWhite"/>
</state>
</button>
</subviews>
<color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="calibratedWhite"/>
</view>
</viewController>
Repeat the above steps with the <connections> ... </connections> to copy across all the IBOutlets. Note that the connections go underneath the <view> .. </view> tags, but inside the <viewController> ... </viewController>
<viewController id="vXZ-lx-hvc" customClass="TwoViewController" 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>
<button opaque="NO" contentMode="scaleToFill" fixedFrame="YES" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="fLe-1C-hTu">
<rect key="frame" x="116" y="244" width="46" height="30"/>
<state key="normal" title="Button">
<color key="titleShadowColor" white="0.5" alpha="1" colorSpace="calibratedWhite"/>
</state>
<connections>
<action selector="samButtonTap:" destination="vXZ-lx-hvc" eventType="touchUpInside" id="1sQ-0S-S8z"/>
</connections>
</button>
</subviews>
<color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="calibratedWhite"/>
</view>
<connections>
<outlet property="samButton" destination="fLe-1C-hTu" id="8GK-Nn-Loy"/>
</connections>
</viewController>
You'll notice from the second snippet that IBActions are represented with the view, where as IBOutlets are represented together after the subviews have been declared.
You may need to do more, depending on how complex you xib file is. If you decide to recreate some of your xib components rather than copy them across the ids will change, so be aware of that. Don't forget to delete you xib file from the project once you're done.