Three20研究院之自定义TableView列表详解（二）

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

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

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

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

1	#import <Three20/Three20.h>

2	#import "TableViewDataSource.h"

3

4	@interface MovieController : TTTableViewController

5

{

6

7

}

8

@end

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

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

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

01	#import "MovieController.h"

02	#import "MenuController.m"

03	#import "TableItem.h"

04	#import "TableItemCell.h"

05	#import "TableViewDataSource.h"

06	@implementation MovieController

07	- (void)viewDidLoad

08

{

09	[super viewDidLoad];

10

11

//标题栏内容

12	self.title = @"雨松MOMO测试列表";

13	//开启列表自定义高度

14	self.variableHeightRows = YES;

15	//开启列表点击事件

16	self.tableView.allowsSelection = YES;

17

18

}

19

20	- (void)createModel

21

{

22

//开始创建列表

23	self.dataSource = [[[TableViewDataSource alloc] init] autorelease];

24

}

25

26	- (void)didSelectObject:(id)object atIndexPath:(NSIndexPath*)indexPath

27

{

28	//点击列表中的某一项后打开网页

29	TTNavigator* navigator = [TTNavigator navigator];

30	[navigator openURLAction:[TTURLAction actionWithURLPath:@"www.baidu.com"]];

31	//得到用户点击列表的ID

32	NSLog(@"%d",indexPath.row);

33

}

34

35

@end

列表资源类：

1	#import <Three20/Three20.h>

2

3	@interface TableViewDataSource : TTListDataSource

4

5

@end

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

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

01	#import "TableViewDataSource.h"

02	#import "TableItem.h"

03	#import "TableItemCell.h"

04

05	@implementation TableViewDataSource

06

07	- (id)init {

08

09

//创建列表资源

10	if(self = [super init]) {

11	UIImage *image0 = [UIImage imageNamed:@"0.jpg"];

12	UIImage *image1 = [UIImage imageNamed:@"1.jpg"];

13	self.items = [NSArray arrayWithObjects:

14	[TableItem itemWithTitle:@"电影1"image:image0 backcolor:[UIColor redColor]],

15	[TableItem itemWithTitle:@"电影2"image:image1 backcolor:[UIColor purpleColor]],

16	[TableItem itemWithTitle:@"电影3"image:image0 backcolor:[UIColor redColor]],

17	[TableItem itemWithTitle:@"电影4"image:image1 backcolor:[UIColor purpleColor]],

18	[TableItem itemWithTitle:@"电影5"image:image0 backcolor:[UIColor redColor]],

19	[TableItem itemWithTitle:@"电影6"image:image1 backcolor:[UIColor purpleColor]],

20

nil];

21

}

22	returnself;

23

}

24

25	- (Class)tableView:(UITableView*)tableView cellClassForObject:(id) object {

26

//绘制列表

27

28	if([object isKindOfClass:[TableItemclass]]) {

29	return[TableItemCellclass];

30

}

31

32	return[super tableView:tableView

33	cellClassForObject:object];

34

}

35

36

@end

下面是列表的资源类TableItem。

01	#import <Three20/Three20.h>

02

03	@interface TableItem : TTTableLinkedItem {

04

//列表元素的文字

05	NSString *_title;

06

//列表元素的贴图

07	UIImage *_image;

08	//列表元素的背景颜色

09	UIColor *_backcolor;

10

}

11

12	@property (nonatomic, copy) NSString *title;

13	@property (nonatomic, copy) UIImage *image;

14	@property (nonatomic, copy) UIColor *backcolor;

15

16

//初始化赋值

17	+ (id)itemWithTitle:(NSString *)title

18	image:(UIImage *)image backcolor:(UIColor *) backcolor;

19

20

@end

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

01	#import "TableItem.h"

02

03	@implementation TableItem

04

05	@synthesize title = _title,image = _image, backcolor = _backcolor;

06

07	+ (id)itemWithTitle:(NSString *)title

08	image:(UIImage *)image backcolor:(UIColor *) backcolor {

09

//初始化

10	TableItem *item = [[[self alloc] init] autorelease];

11	item.title = title;

12	item.image = image;

13	item.backcolor = backcolor;

14	returnitem;

15

}

16

17	- (id)init

18

{

19	if(self = [super init])

20

{

21	_title = nil;

22	_image = nil;

23	_backcolor = nil;

24

}

25

26	returnself;

27

}

28

29	- (void)dealloc

30

{

31	[super dealloc];

32	TT_RELEASE_SAFELY(_title);

33	TT_RELEASE_SAFELY(_image);

34	TT_RELEASE_SAFELY(_backcolor);

35

36

}

37

38

@end

下面是列表的样式类TableItemCell。

01	#import <Three20/Three20.h>

02

03	@interface TableItemCell : TTTableLinkedItemCell {

04

//元素的名称

05	UILabel *_titleLabel;

06

//元素的贴图

07	UIImageView *_imageview;

08

09

}

10

11

@end

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

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

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

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

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

self.selectionStyle = UITableViewCellSelectionStyleBlue;

01	#import "TableItemCell.h"

02	#import "TableItem.h"

03	@implementation TableItemCell

04

05	+ (CGFloat)tableView:(UITableView*)tableView rowHeightForObject:(id)item

06

{

07	//每个列表元素的高度

08	return80.0;

09

}

10

11	- (id)initWithStyle:(UITableViewCellStyle)style

12	reuseIdentifier:(NSString*)identifier

13

{

14

//初始化列表

15	if(self = [super initWithStyle:UITableViewCellStyleValue2

16	reuseIdentifier:identifier])

17

{

18	_item = nil;

19

20	_titleLabel = [[UILabel alloc] initWithFrame:CGRectZero];

21	//将文本框加入窗口

22	[self.contentView addSubview:_titleLabel];

23

24	_imageview = [[UIImageView alloc] initWithFrame:CGRectZero];

25	//将图片视图加入窗口

26	[self.contentView addSubview:_imageview];

27

28

}

29

30	returnself;

31

}

32

33	- (void)dealloc

34

{

35	TT_RELEASE_SAFELY(_titleLabel);

36	TT_RELEASE_SAFELY(_imageview);

37	[super dealloc];

38

}

39

40	- (void)layoutSubviews {

41	[super layoutSubviews];

42

43	//设置列表中的组件，并且组件的绘制区域

44	[_imageview setFrame:CGRectMake(5,5,70,70)];

45

46	[_titleLabel setFrame:CGRectMake(100,0,100,20)];

47

48

}

49

50	- (id)object

51

{

52	return_item;

53

}

54

55	- (void)setObject:(id)object {

56	if(_item != object) {

57	[super setObject:object];

58	//拿到列表中的数据

59	TableItem *item = object;

60

//绘制在屏幕中

61	[_titleLabel setText:item.title];

62	[_titleLabel setBackgroundColor:item.backcolor];

63

64	[_imageview setImage:item.image];

65	[_imageview setBackgroundColor:item.backcolor];

66	//设置列表的背景颜色

67	self.contentView.backgroundColor = item.backcolor;

68	//设置列表的选中颜色

69	self.selectionStyle=UITableViewCellSelectionStyleBlue;

70

71

}

72

}

73

@end

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

01	#import "AppDelegate.h"

02	#import "MovieController.h"

03	@implementation AppDelegate

04

05	@synthesize window = _window;

06

07	- (void)dealloc

08

{

09	[_window release];

10	[super dealloc];

11

}

12

13	- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions

14

{

15

16

//创建导航条

17	TTNavigator* navigator = [TTNavigator navigator];

18	navigator.persistenceMode = TTNavigatorPersistenceModeAll;

19	navigator.window = [[[UIWindow alloc] initWithFrame:TTScreenBounds()] autorelease];

20

21	TTURLMap* map = navigator.URLMap;

22	[map from:@"*"toViewController:[TTWebControllerclass]];

23	[map from:@"tt://MovieView"toSharedViewController:[MovieControllerclass]];

24

25	if(![navigator restoreViewControllers])

26

{

27	[navigator openURLAction:[TTURLAction actionWithURLPath:@"tt://MovieView"]];

28

}

29

30	returnYES;

31

}

32

33

@end

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

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

下载地址：http://vdisk.weibo.com/s/abA_d

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