首页 > 【Three20研究院之应用开发】 > Three20研究院之自定义TableView列表详解(二)
2012
05-01

Three20研究院之自定义TableView列表详解(二)

开始本教程之间首先简单的介绍一些Three20自身提供绘制列表的组件TTTableView,它继承与TableView将列表组件又封装了一次,封装了很多好看的列表样式。这部分内容比较简单并且官方已经封装至Three20项目包中的样例程序包中。Three20下载与安装配置环境,请阅读上一章博文。打开Three20文件夹,选择Samples->TTCatalog项目并且开打它,所有相关列表的样式都写在

TableItemTestController类当中,如下图所示,大致的样式都在这里。

 

Three20研究院之自定义TableView列表详解(二) - 雨松MOMO程序研究院 - 1

系统提供的在好,它都不可能完美的满足开发的需求,所以开发时还是有必要使用自定义列表的样式。自定义永远比较灵活程序员可以手动的去修改它们的样式,本篇文章将重点探讨Three20下自定义列表样式的使用。

开始创建一个新的IOS项目,然后将Three20添加至该项目中,这一步如果有朋友还不会请阅读上一篇文章。因为绘制列表需要使用TTTableView所以创建一个Controller类去继承TTTableViewController。

 

 

        在ViewDidLoad执行一些列表初始化的操作,这里值得注意的是self.tableView.allowsSelection = YES;这行代码非常重要,没有这行代码表示选中列表某元素时,该元素将没有选中时的颜色,通常IOS开发中点击列表后列表背景颜色会变成蓝色,使用系统的方法去绘制列表会默认allowsSelection=YES,自定义列表需要手动设置allowsSelection=YES。

        在createModel方法中去创建列表,这个方法由系统自身调用,用来创建列表组件,我们需要重写dataSource组件,所有列表的资源都写在TableViewDataSource方法中。

         didSelectObject方法用来处理列表中某个元素被选择后的事件,这里设置点击任意元素后将直接打开百度的页面,选择元素的ID是: indexPath.row,数据类型为整形。




列表资源类:

       在Init方法中去创建列表的资源,image0与image1为两张贴图。创建列表资源时将所有列表资源写入TableItem类中。这个类用来记录列表中的数据。在itemWithTitle方法中去初始化每条列表元素中的数据。这里的数据是列表每个元素的名称,贴图,背景颜色。

 

在tableView方法中开始绘制列表,列表中有多少元素这个方法将会执行几次,以循环的方式将列表中的数据全部绘制在屏幕当中。绘制元素的时用到了一个非常重要的类TableItemCell。这个类主要用于列表的绘制,它规定的列表的样式,然后去TableItem类中拿数据,最后以它的样式一层一层的绘制在屏幕当中。

 

下面是列表的资源类TableItem。

        初始化的方法为intemWithTitle,在这里接收TableViewDataSource方法中传进来每个列表元素的所有资源,资源包括:文字信息,贴图信息,背景颜色,然后将TableItem对象返回出去,由TableViewDataSource类开始绘制列表。

 

下面是列表的样式类TableItemCell。

tableView方法中设置列表中每个元素的高度。

 

initWithStyle方法中初始化列表中元素,这里创建一个文本框与图片视图并且加入整个窗口当中。

layoutSubviews方法中设置元素组件的显示区域,元素组建的坐标都是相对坐标,相对于每个列表元素的左上角点。

setObject这个方法比较重要,循环绘制列表之前会在这里获取在列表中显示的数据,参数为当前列表元素中的数据,在这里拿到屏幕中显示的文字与贴图还有背景颜色,并且全部设置入窗口视图当中。

这个方法用于设置按钮选中后的颜色,这里设置按钮选中后的颜色为蓝色,也可以在这里修改颜色。

self.selectionStyle = UITableViewCellSelectionStyleBlue;

 

最后在重要的入口类中指定打开MovieController类。

 

自定义列表中的元素已经映入我们眼帘,选中列表中某个元素后背景颜色为蓝色,点击后直接打开百度的网页。有了本章的知识,大家可以任意的使用Three20制作自定义列表啦。哇咔咔!!!!!

Three20研究院之自定义TableView列表详解(二) - 雨松MOMO程序研究院 - 2

Three20研究院之自定义TableView列表详解(二) - 雨松MOMO程序研究院 - 3

最后欢迎各位盆友可以和MOMO一起讨论Three20软件开发,如果你觉得看得不清楚,MOMO附带上本章的源码下载,希望大家可以一起学习 哈哈~。哇咔咔~ MOMO愿和 大家好好学习,大家一起进步哈~!!!



(下载后必需搭建three20环境成功后才能运行~ 因为three20为引用加载,所以程序路径都是我本机的请见谅!或者你可可以将你的Three20路径修改的和我一样就可以直接运行啦,我的路径是:User (用户) -> Share(共享)->Three20)。

 

 

雨松MOMO提醒您:亲,如果您觉得本文不错,快快将这篇文章分享出去吧 。另外请点击网站顶部彩色广告或者捐赠支持本站发展,谢谢!

--

最后编辑:
作者:雨松MOMO
专注移动互联网,Unity3D游戏开发
捐 赠如果您愿意花10块钱请我喝一杯咖啡的话,请用手机扫描二维码即可通过支付宝直接向我捐款哦。