现在的位置: 首页 > 综合 > 正文

Three20软件引擎之自定义TableView列表详解

2013年07月18日 ⁄ 综合 ⁄ 共 7333字 ⁄ 字号 评论关闭

转载自:http://blog.sina.com.cn/s/blog_ac9efb7201015k2b.html

开始本教程之间首先简单的介绍一些Three20自身提供绘制列表的组件TTTableView,它继承与TableView将列表组件又封装了一次,封装了很多好看的列表样式。这部分内容比较简单并且官方已经封装至Three20项目包中的样例程序包中。Three20下载与安装配置环境,请阅读上一章博文。打开Three20文件夹,选择Samples->TTCatalog项目并且开打它,所有相关列表的样式都写在TableItemTestController类当中,如下图所示,大致的样式都在这里。
        系统提供的在好,它都不可能完美的满足开发的需求,所以开发时还是有必要使用自定义列表的样式。自定义永远比较灵活程序员可以手动的去修改它们的样式,本篇文章将重点探讨Three20下自定义列表样式的使用。
        开始创建一个新的IOS项目,然后将Three20添加至该项目中,这一步如果有朋友还不会请阅读上一篇文章。因为绘制列表需要使用TTTableView所以创建一个Controller类去继承TTTableViewController。
[cpp]
#import [td]  
#import "TableViewDataSource.h"  
  
@interface MovieController : TTTableViewController  
{  
  
}  
@end  
复制代码
        在ViewDidLoad执行一些列表初始化的操作,这里值得注意的是self.tableView.allowsSelection = YES;这行代码非常重要,没有这行代码表示选中列表某元素时,该元素将没有选中时的颜色,通常IOS开发中点击列表后列表背景颜色会变成蓝色,使用系统的方法去绘制列表会默认allowsSelection=YES,自定义列表需要手动设置allowsSelection=YES。
        在createModel方法中去创建列表,这个方法由系统自身调用,用来创建列表组件,我们需要重写dataSource组件,所有列表的资源都写在TableViewDataSource方法中。
         didSelectObject方法用来处理列表中某个元素被选择后的事件,这里设置点击任意元素后将直接打开百度的页面,选择元素的ID是: indexPath.row,数据类型为整形。
[cpp] 
#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)didSelectObjectid)object atIndexPathNSIndexPath*)indexPath  
{  
   //点击列表中的某一项后打开网页  
   TTNavigator* navigator = [TTNavigator navigator];   
   [navigator openURLAction:[TTURLAction actionWithURLPath"www.baidu.com"]];   
   //得到用户点击列表的ID  
   NSLog(@"%d",indexPath.row);  
}  
  
  
@end  
复制代码
列表资源类:
[cpp] 
#import [td]  
  
@interface TableViewDataSource : TTListDataSource  
  
@end  
复制代码
       在Init方法中去创建列表的资源,image0与image1为两张贴图。创建列表资源时将所有列表资源写入TableItem类中。这个类用来记录列表中的数据。在itemWithTitle方法中去初始化每条列表元素中的数据。这里的数据是列表每个元素的名称,贴图,背景颜色。
        在tableView方法中开始绘制列表,列表中有多少元素这个方法将会执行几次,以循环的方式将列表中的数据全部绘制在屏幕当中。绘制元素的时用到了一个非常重要的类TableItemCell。这个类主要用于列表的绘制,它规定的列表的样式,然后去TableItem类中拿数据,最后以它的样式一层一层的绘制在屏幕当中。
[cpp]
#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];  
    }  
    return self;  
}  
  
- (Class)tableViewUITableView*)tableView cellClassForObjectid) object {  
    //绘制列表  
      
    if ([object isKindOfClass:[TableItem class]]) {   
        return [TableItemCell class];   
    }  
      
    return [super tableView:tableView  
         cellClassForObjectbject];  
}  
  
@end  
复制代码
下面是列表的资源类TableItem。
[cpp] 
#import [td]  
  
@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)itemWithTitleNSString *)title  
              imageUIImage *)image backcolorUIColor *) backcolor;   
  
@end  
复制代码
        初始化的方法为intemWithTitle,在这里接收TableViewDataSource方法中传进来每个列表元素的所有资源,资源包括:文字信息,贴图信息,背景颜色,然后将TableItem对象返回出去,由TableViewDataSource类开始绘制列表。
[cpp] 
#import "TableItem.h"  
  
@implementation TableItem  
  
@synthesize title = _title,image = _image, backcolor = _backcolor;  
  
  
+ (id)itemWithTitleNSString *)title  
              imageUIImage *)image backcolorUIColor *) backcolor {  
    //初始化  
    TableItem *item = [[[self alloc] init] autorelease];  
    item.title = title;  
    item.image = image;  
    item.backcolor = backcolor;  
    return item;  
}  
  
  
- (id)init   
{   
    if (self = [super init])   
    {   
        _title = nil;  
        _image = nil;  
        _backcolor = nil;  
    }  
      
    return self;  
}  
  
  
- (void)dealloc  
{   
    [super dealloc];  
    TT_RELEASE_SAFELY(_title);  
    TT_RELEASE_SAFELY(_image);  
    TT_RELEASE_SAFELY(_backcolor);  
      
}  
  
@end  
复制代码
下面是列表的样式类TableItemCell。
[cpp] 
#import [td]  
  
@interface TableItemCell : TTTableLinkedItemCell {  
    //元素的名称  
    UILabel *_titleLabel;  
    //元素的贴图  
    UIImageView *_imageview;   
  
}  
  
@end  
复制代码
tableView方法中设置列表中每个元素的高度。
initWithStyle方法中初始化列表中元素,这里创建一个文本框与图片视图并且加入整个窗口当中。
layoutSubviews方法中设置元素组件的显示区域,元素组建的坐标都是相对坐标,相对于每个列表元素的左上角点。
setObject这个方法比较重要,循环绘制列表之前会在这里获取在列表中显示的数据,参数为当前列表元素中的数据,在这里拿到屏幕中显示的文字与贴图还有背景颜色,并且全部设置入窗口视图当中。
这个方法用于设置按钮选中后的颜色,这里设置按钮选中后的颜色为蓝色,也可以在这里修改颜色。
self.selectionStyle = UITableViewCellSelectionStyleBlue;
[cpp]
#import "TableItemCell.h"  
#import "TableItem.h"  
@implementation TableItemCell  
  
+ (CGFloat)tableView:(UITableView*)tableView rowHeightForObject:(id)item   
{    
    //每个列表元素的高度  
    return 80.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];  
      
    }  
      
    return self;  
}  
  
  
- (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类。
[csharp]
#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]

抱歉!评论已关闭.