发布
登录
注册
xib中复制Cell | UI开发技巧
众说纷纭频道

图灵联邦

恒河沙
关注

图灵联邦

0

评论

0

点赞

抛出问题

有时候我们新开发的一个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 比操作图形化界面(比如拽线关联属性等等)要高效很多。

本文内容来源于用户投稿,如有侵权请联系官方删除

发布

评论 0