Three20研究院之自定义TableView列表详解（二）-优快云博客

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

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

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

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

 
#import <Three20/Three20.h> 
 
#import "TableViewDataSource.h" 
 

 
@interface MovieController : TTTableViewController 
 
{ 
 

 
} 
 
@end

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

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

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

 
#import "MovieController.h" 
 
#import "MenuController.m" 
 
#import "TableItem.h" 
 
#import "TableItemCell.h" 
 
#import "TableViewDataSource.h" 
 
@implementation MovieController 
 
- (void)viewDidLoad 
 
{ 
 
[super viewDidLoad]; 
 

 
//标题栏内容 
 
self.title = @"雨松MOMO测试列表"; 
 
//开启列表自定义高度 
 
self.variableHeightRows = YES; 
 
//开启列表点击事件 
 
self.tableView.allowsSelection = YES; 
 

 
} 
 

 
- (void)createModel 
 
{ 
 
//开始创建列表 
 
self.dataSource = [[[TableViewDataSource alloc] init] autorelease]; 
 
} 
 

 
- (void)didSelectObject:(id)object atIndexPath:(NSIndexPath*)indexPath 
 
{ 
 
//点击列表中的某一项后打开网页 
 
TTNavigator* navigator = [TTNavigator navigator]; 
 
[navigator openURLAction:[TTURLAction actionWithURLPath:@"www.baidu.com"]]; 
 
//得到用户点击列表的ID 
 
NSLog(@"%d",indexPath.row); 
 
} 
 

 
@end

列表资源类：

 
#import <Three20/Three20.h> 
 

 
@interface TableViewDataSource : TTListDataSource 
 

 
@end

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

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

 
#import "TableViewDataSource.h" 
 
#import "TableItem.h" 
 
#import "TableItemCell.h" 
 

 
@implementation TableViewDataSource 
 

 
- (id)init { 
 

 
//创建列表资源 
 
if(self = [super init]) { 
 
UIImage *image0 = [UIImage imageNamed:@"0.jpg"]; 
 
UIImage *image1 = [UIImage imageNamed:@"1.jpg"]; 
 
self.items = [NSArray arrayWithObjects: 
 
[TableItem itemWithTitle:@"电影1"image:image0 backcolor:[UIColor redColor]], 
 
[TableItem itemWithTitle:@"电影2"image:image1 backcolor:[UIColor purpleColor]], 
 
[TableItem itemWithTitle:@"电影3"image:image0 backcolor:[UIColor redColor]], 
 
[TableItem itemWithTitle:@"电影4"image:image1 backcolor:[UIColor purpleColor]], 
 
[TableItem itemWithTitle:@"电影5"image:image0 backcolor:[UIColor redColor]], 
 
[TableItem itemWithTitle:@"电影6"image:image1 backcolor:[UIColor purpleColor]], 
 
nil]; 
 
} 
 
returnself; 
 
} 
 

 
- (Class)tableView:(UITableView*)tableView cellClassForObject:(id) object { 
 
//绘制列表 
 

 
if([object isKindOfClass:[TableItemclass]]) { 
 
return[TableItemCellclass]; 
 
} 
 

 
return[super tableView:tableView 
 
cellClassForObject:object]; 
 
} 
 

 
@end

下面是列表的资源类TableItem。

 
#import <Three20/Three20.h> 
 

 
@interface TableItem : TTTableLinkedItem { 
 
//列表元素的文字 
 
NSString *_title; 
 
//列表元素的贴图 
 
UIImage *_image; 
 
//列表元素的背景颜色 
 
UIColor *_backcolor; 
 
} 
 

 
@property (nonatomic, copy) NSString *title; 
 
@property (nonatomic, copy) UIImage *image; 
 
@property (nonatomic, copy) UIColor *backcolor; 
 

 
//初始化赋值 
 
+ (id)itemWithTitle:(NSString *)title 
 
image:(UIImage *)image backcolor:(UIColor *) backcolor; 
 

 
@end

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

 
#import "TableItem.h" 
 

 
@implementation TableItem 
 

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

 
+ (id)itemWithTitle:(NSString *)title 
 
image:(UIImage *)image backcolor:(UIColor *) backcolor { 
 
//初始化 
 
TableItem *item = [[[self alloc] init] autorelease]; 
 
item.title = title; 
 
item.image = image; 
 
item.backcolor = backcolor; 
 
returnitem; 
 
} 
 

 
- (id)init 
 
{ 
 
if(self = [super init]) 
 
{ 
 
_title = nil; 
 
_image = nil; 
 
_backcolor = nil; 
 
} 
 

 
returnself; 
 
} 
 

 
- (void)dealloc 
 
{ 
 
[super dealloc]; 
 
TT_RELEASE_SAFELY(_title); 
 
TT_RELEASE_SAFELY(_image); 
 
TT_RELEASE_SAFELY(_backcolor); 
 

 
} 
 

 
@end

下面是列表的样式类TableItemCell。

 
#import <Three20/Three20.h> 
 

 
@interface TableItemCell : TTTableLinkedItemCell { 
 
//元素的名称 
 
UILabel *_titleLabel; 
 
//元素的贴图 
 
UIImageView *_imageview; 
 

 
} 
 

 
@end

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

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

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

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

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

self.selectionStyle = UITableViewCellSelectionStyleBlue;

 
#import "TableItemCell.h" 
 
#import "TableItem.h" 
 
@implementation TableItemCell 
 

 
+ (CGFloat)tableView:(UITableView*)tableView rowHeightForObject:(id)item 
 
{ 
 
//每个列表元素的高度 
 
return80.0; 
 
} 
 

 
- (id)initWithStyle:(UITableViewCellStyle)style 
 
reuseIdentifier:(NSString*)identifier 
 
{ 
 
//初始化列表 
 
if(self = [super initWithStyle:UITableViewCellStyleValue2 
 
reuseIdentifier:identifier]) 
 
{ 
 
_item = nil; 
 

 
_titleLabel = [[UILabel alloc] initWithFrame:CGRectZero]; 
 
//将文本框加入窗口 
 
[self.contentView addSubview:_titleLabel]; 
 

 
_imageview = [[UIImageView alloc] initWithFrame:CGRectZero]; 
 
//将图片视图加入窗口 
 
[self.contentView addSubview:_imageview]; 
 

 
} 
 

 
returnself; 
 
} 
 

 
- (void)dealloc 
 
{ 
 
TT_RELEASE_SAFELY(_titleLabel); 
 
TT_RELEASE_SAFELY(_imageview); 
 
[super dealloc]; 
 
} 
 

 
- (void)layoutSubviews { 
 
[super layoutSubviews]; 
 

 
//设置列表中的组件，并且组件的绘制区域 
 
[_imageview setFrame:CGRectMake(5,5,70,70)]; 
 

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

 
} 
 

 
- (id)object 
 
{ 
 
return_item; 
 
} 
 

 
- (void)setObject:(id)object { 
 
if(_item != object) { 
 
[super setObject:object]; 
 
//拿到列表中的数据 
 
TableItem *item = object; 
 
//绘制在屏幕中 
 
[_titleLabel setText:item.title]; 
 
[_titleLabel setBackgroundColor:item.backcolor]; 
 

 
[_imageview setImage:item.image]; 
 
[_imageview setBackgroundColor:item.backcolor]; 
 
//设置列表的背景颜色 
 
self.contentView.backgroundColor = item.backcolor; 
 
//设置列表的选中颜色 
 
self.selectionStyle=UITableViewCellSelectionStyleBlue; 
 

 
} 
 
} 
 
@end

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

 
#import "AppDelegate.h" 
 
#import "MovieController.h" 
 
@implementation AppDelegate 
 

 
@synthesize window = _window; 
 

 
- (void)dealloc 
 
{ 
 
[_window release]; 
 
[super dealloc]; 
 
} 
 

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

 
//创建导航条 
 
TTNavigator* navigator = [TTNavigator navigator]; 
 
navigator.persistenceMode = TTNavigatorPersistenceModeAll; 
 
navigator.window = [[[UIWindow alloc] initWithFrame:TTScreenBounds()] autorelease]; 
 

 
TTURLMap* map = navigator.URLMap; 
 
[map from:@"*"toViewController:[TTWebControllerclass]]; 
 
[map from:@"tt://MovieView"toSharedViewController:[MovieControllerclass]]; 
 

 
if(![navigator restoreViewControllers]) 
 
{ 
 
[navigator openURLAction:[TTURLAction actionWithURLPath:@"tt://MovieView"]]; 
 
} 
 

 
returnYES; 
 
} 
 

 
@end