读书频道 > 网站 > 网页设计 > iPhone开发基础教程
8.5.3 使用UITableViewCell的自定义子类(1)
12-07-11    叶孤城
收藏    我要投稿   

本文所属图书 > iPhone开发基础教程

本书由业界名家撰写,英文原版问世以后迅速登上Amazon计算机图书排行榜榜首并持续至今,总排名一度达到20名左右,创造了销售奇迹。而且,本书获得了读者的一致好评,已经被奉为经典。书中从到Apple网站注册账号,...立即去当当网订购

我们很幸运,可以使用Interface Builder设计表视图单元。我们将使用Interface Builder重新创建与刚才使用代码构建的界面相同的两行界面。要达到此目的,可以创建一个UITableViewCell子类和一个包含表视图单元的新nib文件。然后,当我们需要一个表视图单元来表示一行时,不是向标准的表视图单元添加子视图,而是从nib文件加载子类,并使用将添加的两个输出口来设置名称和颜色。有道理吗?让我们开始付诸行动吧。

在Xcode中右键单击(或Ctrl+单击)Classes文件夹,从出现的Add子菜单中选择New File…,或者按下 键。新建文件向导出现后,从左侧窗格选择Cocoa Touch Classes,然后从右上窗格选择UITableViewCell子类。单击Next按钮,将新文件命名为CustomCell.m,并确保选中了Also Create"CustomCell.h"复选框。

创建文件之后,在Xcode中右键单击Resources文件夹,再次选择Add→New File…。这一次,在新建文件向导的左侧窗格中单击User Interfaces,在右上窗格中选择Empty XIB。当提示输入名称时,输入CustomCell.xib。

1. 创建UITableViewCell子类

创建所有必要的新文件之后,下面让我们继续创建UITableViewCell的新子类。

我们将在子类中使用输出口,这会简化对需要在每一行更改的值的设置。我们可以再次使用标记(tag),这完全避免了创建子类,而使用这种方式,代码会更加简明并容易阅读,因为我们可以仅通过设置属性来设置每一行单元上的标签,如下所示:

单击CustomCell.h,添加以下代码:

这就是我们需要添加的所有内容,下面切换到CustomCell.m,并添加两行代码:


保存上面的代码,并准备好自定义子类。

2. 在Interface Builder中设计表视图单元

下一步,双击CustomCell.xib,在Interface Builder中打开文件。这个主窗口中只有两个图标:File's owner和First Responder。在库中找到表视图单元(参见图8-14),然后把它拖动到主窗口中。

确保选中了表视图单元,然后按下 ,打开标识检查器。将类从UITableViewCell改为CustomCell。

然后,按下 ,打开大小检查器,将表视图单元的高度从44改为65。这会让我们有更多的活动空间。

最后,按下 ,打开属性检查器。其中第一个字段是Identifier,它是我们在代码中使用过的可重用的标识符。如果记不起来这一内容,请查阅本章前面的内容并找到SimpleTableIdentifier。将Identifier设置为CustomCell- Identifier。下一步,找到名称为Accessory的弹出按钮,把Detail Discloure改为None(参见图8-15)。扩展图标会在单元中占用一些空间,但是我们希望整个单元空间都归自己所用。下一章将详细地讨论扩展图标。

 

 


记住,即使UITableViewCell是UIView的子类,它仍然使用内容视图对子视图进行保存和分组。双击Custom Cell图标,将打开一个新的窗口,你会发现一个标记为Content View的灰色虚线圆角矩形(参见图8-16)。




图8-16  表视图单元的窗口



图8-17 表视图单元的设计
Interface Builder通过这种方式告诉你应该添加一些内容,因此在库中找到View并把它拖到Custom Cell窗口中。

发布视图之后会发现它的大小和窗口大小不一致,还要进行调整。选中新的视图,打开大小检查器。通过将x设置为0,y设置为0,w设置为320,h设置为65,把View的大小和位置改为符合Custom Cell窗口的大小。

现在所有项都设置完成了。我们有了一个画布,可以使用它在Interface Builder中设计表视图单元。下面就开始吧。

从库中拖动4个标签到Custom Cell窗口,按照图8-17所示进行布局和重命名。要将Name:和Color:设置为黑体,选中它们并按下 。下一步,选中右上方的标签,增加其宽度,将其右边缘拖到右边的蓝线。按同样方式更改右下位置的标签。这样做的目的是让名称和颜色数据拥有更大的显示空间。

现在,按下Control键,并将Custom Cell图标拖到视图右上位置的标签,为它指定nameLabel输出口。然后,按下Control键,把Custom Cell图标再次拖到右下位置的标签,为它指定colorLabel输出口。

你可能很奇怪为什么我们没有做任何和File's Owner图标有关的事情。原因是根本不需要。我们使用这个表单元显示数据,不过与用户的所有交互都是通过表视图来完成的,因此它不需要自己的控制器类。我们实际上只是使用nib作为一种模板,以便可视地设计表单元。

保存nib并将其关闭,然后返回Xcode

点击复制链接 与好友分享!回本站首页
分享到: 更多
您对本文章有什么意见或着疑问吗?请到论坛讨论您的关注和建议是我们前行的参考和动力  
上一篇:1.3 功能
下一篇:1.5 小结
相关文章
图文推荐
JavaScript网页动画设
1.9 响应式
1.8 登陆页式
1.7 主题式
排行
热门
文章
下载
读书

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训
版权所有: 红黑联盟--致力于做最好的IT技术学习网站