Interface Builderで配置したビューのクラスを後から変更する方法

Interface Builderで一度配置したビューを別のクラスに置き換えたいことがたまにあります。自作のサブクラスに置き換えるのであれば、クラスの指定を変更すれば済みますが、`UIView`を`UIImageView`に置き換えたいときなど、Interface Builderでやるには再度配置するしかなく、特にAuto Layoutの設定をしてしまった後だと非常に面倒な作業になります。

これを避けたければ中身のXMLを直接編集するしかありません（個人的にこれをxibの**開腹手術**と呼んでいます）。

# UIViewをUIImageViewに置き換える

まず簡単な例として`UIView`を`UIImageView`に置き換えることを考えます。

![IBTips201.png](https://qiita-image-store.s3.amazonaws.com/0/32084/e0e79829-2f00-69b9-1db0-8e888a3c68df.png)

単純にクラスの指定を`UIImageView`に変更するのも手ではあります。しかしこれではIB上での扱いはただの`UIView`と変わらず、`image`の設定などができません。

![IBTips202.png](https://qiita-image-store.s3.amazonaws.com/0/32084/c7e59bc6-6be2-0e32-38f0-d597b23f1018.png)

ここではXMLを編集することでクラスを置き換えてみます。と言ってもXMLの書式を把握しているわけではないので、まずは置き換えたいクラス`UIImageView`を配置してみます。

![IBTips203.png](https://qiita-image-store.s3.amazonaws.com/0/32084/31773223-5718-ad5c-956f-bb3f983f58ea.png)

そしてxib（またはStoryboard）ファイルをXMLとして開きます。そのためには左カラムのProject Navigatorから目的のファイルを右クリックしてOpen As > Source Codeを選択します。

![IBTips204.png](https://qiita-image-store.s3.amazonaws.com/0/32084/3970d53d-c0e7-df5c-cdca-f221a231cdc0.png)

表示されたXMLから、置き換え元のクラスと置き換え先のクラスがどこにあるか探してください。要素が多くて探しにくい場合はviewについたID（右カラムのIdentity inspectorにObject IDとして表示されます）で検索すると楽です。

ここで重要なのは「id」と「frame」と「constraints」です。

![IBTips205.png](https://qiita-image-store.s3.amazonaws.com/0/32084/d3270c52-7ccc-5744-c2e9-6d0eed7cf005.png)

これらの要素を`UIImageView`側にコピーして、`UIView`の方は削除します。

![IBTips206.png](https://qiita-image-store.s3.amazonaws.com/0/32084/ee102d83-7d62-cf75-73eb-a2b9f05ade89.png)

再びProject Navigatorからファイルを右クリックし、Open As > Interface Builder XIB Documentを選択して、IBで開きます。

問題がなければ下図のように期待通りの結果が得られます。XMLの編集を間違えると最悪ファイルを開くたびにXcodeがクラッシュするので注意してください。

![スクリーンショット 2015-08-04 22.50.25.png](https://qiita-image-store.s3.amazonaws.com/0/32084/6c9a7e71-bb21-72d9-e80a-cc56cbcb8793.png)


# UITableViewCellをUICollectionViewCellに置き換える

より複雑な例として`UITableViewCell`を`UICollectionViewCell`に置き換えることを考えます。セルの上に配置した要素はそのままに、根元だけクラスを変更します。複雑なビュー階層とAuto Layoutを設定していた場合、これを最初から作り直すことは避けたいでしょう。

ここではわかりやすくするため、以下のように`contentView`直下にビューがひとつ置かれている単純な構造を考えます。

![IBTips208.png](https://qiita-image-store.s3.amazonaws.com/0/32084/6cb80fda-898d-79f0-1342-c8f8a5dfe6a8.png)

TableViewCellのXMLは以下のようになっています。

```xml:TableViewCell.xib
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="7706" systemVersion="14E46" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES">
    <dependencies>
        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="7703"/>
    </dependencies>
    <objects>
        <placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner"/>
        <placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
        <tableViewCell contentMode="scaleToFill" selectionStyle="default" indentationWidth="10" id="zdF-YS-G3Z">
            <rect key="frame" x="0.0" y="0.0" width="320" height="88"/>
            <autoresizingMask key="autoresizingMask"/>
            <tableViewCellContentView key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" tableViewCell="zdF-YS-G3Z" id="3eA-Vz-neI">
                <autoresizingMask key="autoresizingMask"/>
                <subviews>
                    <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="6HF-V6-sxv" userLabel="Image View">
                        <rect key="frame" x="8" y="8" width="72" height="72"/>
                        <color key="backgroundColor" white="0.66666666666666663" alpha="1" colorSpace="calibratedWhite"/>
                        <constraints>
                            <constraint firstAttribute="height" constant="72" id="8lk-Uc-lxx"/>
                            <constraint firstAttribute="width" constant="72" id="G96-X2-EQ8"/>
                        </constraints>
                    </view>
                </subviews>
                <constraints>
                    <constraint firstItem="6HF-V6-sxv" firstAttribute="top" secondItem="3eA-Vz-neI" secondAttribute="top" constant="8" id="PlM-tb-ObS"/>
                    <constraint firstItem="6HF-V6-sxv" firstAttribute="leading" secondItem="3eA-Vz-neI" secondAttribute="leading" constant="8" id="XlX-fl-gER"/>
                </constraints>
            </tableViewCellContentView>
            <point key="canvasLocation" x="271" y="133"/>
        </tableViewCell>
    </objects>
</document>
```

一方、CollectionViewCellは以下のようになっています。

```xml:CollectionViewCell.xib
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="7706" systemVersion="14E46" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES">
    <dependencies>
        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="7703"/>
    </dependencies>
    <objects>
        <placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner"/>
        <placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
        <collectionViewCell opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" id="KEu-Vi-azp">
            <rect key="frame" x="0.0" y="0.0" width="320" height="88"/>
            <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
            <view key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center">
                <rect key="frame" x="0.0" y="0.0" width="320" height="88"/>
                <autoresizingMask key="autoresizingMask"/>
                <subviews>
                    <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="Zjc-6s-snt" userLabel="Image View">
                        <rect key="frame" x="8" y="8" width="72" height="72"/>
                        <color key="backgroundColor" white="0.66666666666666663" alpha="1" colorSpace="calibratedWhite"/>
                        <constraints>
                            <constraint firstAttribute="width" constant="72" id="VjM-p5-jxX"/>
                            <constraint firstAttribute="height" constant="72" id="qmW-i8-JdR"/>
                        </constraints>
                    </view>
                </subviews>
                <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="calibratedWhite"/>
            </view>
            <constraints>
                <constraint firstItem="Zjc-6s-snt" firstAttribute="leading" secondItem="KEu-Vi-azp" secondAttribute="leading" constant="8" id="3JU-Lw-Ko2"/>
                <constraint firstItem="Zjc-6s-snt" firstAttribute="top" secondItem="KEu-Vi-azp" secondAttribute="top" constant="8" id="nW8-az-cXE"/>
            </constraints>
            <point key="canvasLocation" x="253" y="188"/>
        </collectionViewCell>
    </objects>
</document>
```

上記ではわかりにくいので、重要な部分だけ抜き出してみると以下のようになります。TableViewCellとContentViewCellでは構造が少し違っているのがわかります。

![IBTips210.png](https://qiita-image-store.s3.amazonaws.com/0/32084/891f05ff-e3b5-d5db-6140-c873422459bb.png)

![IBTips209.png](https://qiita-image-store.s3.amazonaws.com/0/32084/f6e050d8-9da1-2ea9-ab39-a8fc488959b4.png)

これを参考に、以下の手順でTableViewCellからCollectionViewCellへの移植が可能です。

1. `collectionViewCell`のIDを`tebleViewCellContentView`のIDに合わせる
2. `tebleViewCellContentView`の下の`subviews`をcollection viewの`<view key="contentView">`の下にコピー
3. `tebleViewCellContentView `の下の`constraints`を`collectionViewCell`の下にコピー

collection viewではsubviewとconstraintの置かれている階層が違うことに注意が必要です。