xib中复制Cell | UI开发技巧

抛出问题

有时候我们新开发的一个view 与原有页面中某个cell 的UI设计是一样的，但是由于原cell由xib实现，你会发现无法将该cell 或其 contentView 直接复制到新的xib 画布当中。那么怎么办呢？

问题研究

别着急，我们先来研究下cell 与 view 在xib 当中的区别。
随手搭建一个简单的cell作为研究标本，假设我们的cell 是长这样子的：

demoCell.png

然后我们用xib手动搭建一个同款的UIView：

demoView.png

接下来到了我们来找茬的游戏环节，我们对比一下两个nib/xib文件的source code （请忽略一些尺寸数值的不同）

demoCell.png

demoView.png

xib 的source code 是 xml 语言来描述的，仔细研究也能发现一些其中的规律。现在我们不难看出主要的区别就在外层包裹的部分。直接更改source code 就能达到我们的需求了。现在的问题等价于如何将xib 中的 UITableViewCell 转成UIView。

解决方案

我们把cell 整容成view 的样子。简单起见，tableViewCell 及 tableViewCellContentView 两层包裹替换成一个包裹。以下的代码删除掉，注意先把tableViewCellContentView 的 id="H2p-sc-9uM" 拿个小本本记录下来。

    <tableViewCell contentMode="scaleToFill" selectionStyle="default" indentationWidth="10" rowHeight="99" id="KGk-i7-Jjw" customClass="DemoCell">
        <rect key="frame" x="0.0" y="0.0" width="267" height="99"/>
        <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
        <tableViewCellContentView key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" tableViewCell="KGk-i7-Jjw" id="H2p-sc-9uM">

替换成如下的code。

<view contentMode="scaleToFill" id="H2p-sc-9uM" customClass="DemoCell">
            <rect key="frame" x="0.0" y="0.0" width="316" height="107"/>
            <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>

这里的id 就是刚刚记录下来的。这里的customClass 是与当前nib文件名对应的。接下来把成对的收尾的小括号也改改。</tableViewCell> 改成</view>
</tableViewCellContentView> 删除

到这里大功告成。当然实际开发中数值或其他细节会不同，大家根据实际情况调整就好了。
另外，当然你也可以通过代码的方式将cell 添加到其他View。要不要采用上述的方案根据你自己的需求而定。

总结

步骤：

1.复制原cell的sourcecode
2.新建一个新的xib view，通过source code 方式打开，用刚复制的source code 替换全部内容。 
3.根据相关规则修改source code。

本文就是抛转引玉一下，最主要的就是要清楚xib source code 描述UI的基本规则，这样才能灵活运用，有些情况下直接修改xib source code 比操作图形化界面（比如拽线关联属性等等）要高效很多。

最后编辑于：2022.05.13 17:14:18