Three20软件引擎之TabBar与下拉列表访问数据与刷新（五）

来源：互联网发布：淘宝关键词转化率查询编辑：程序博客网时间：2024/06/05 19:25

Three20软件引擎之TabBar与下拉列表访问数据与刷新

雨松MOMO原创文章如转载，请注明：转载至我的独立域名博客雨松MOMO程序研究院，原文地址:http://www.xuanyusong.com/archives/647

MOMO一直在使用新浪微博，对围脖中拖动下拉刷新的控件比较感兴趣，顺便求个粉，哇咔咔，点击博客网页左侧记得粉我喔。今天制作了一个简单的小例子，好东西一定要和大家分享哦。如下图所示，本节我们实现的是目标：1.在屏幕下方添加TabBar控件，选择不同的控件后刷新不同的资源。2.在屏幕中向下拖动界面时在顶端出现刷新的视图，手放开后开始访问网络下载数据。本节我们访问的网址是Google的Logo图片地址，首次刷新时将访问下载地址，然后将图片资源缓存至本地，再次刷新时先查看缓存中是否有这张图片，如果有则不继续访问下载图片。下图中还有一个小瑕疵，就是顶端视图中刷新的现实内容位英文，不过不要紧后面我会告诉大家如何修改这些文字成中文。

下面开始本节的教学，首先是程序的入口方法，我不做过多的解释，不清楚的朋友请阅读我之前的文章。

AppDelegate.m

#import "AppDelegate.h"#import "TabBarController.h"#import "MenuViewController.h"#import "TableTestContrller.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;        // Any URL that doesn't match will fall back on this one, and open in the web browser    [map from:@"*" toViewController:[TTWebController class]];        //注解1    [map from:@"tt://tabBar" toSharedViewController:[TabBarController class]];         //注解2    [map from:@"tt://menuView/(initMenu:)" toSharedViewController:[MenuViewController class]];        if (![navigator restoreViewControllers])     {        [navigator openURLAction:[TTURLAction actionWithURLPath:@"tt://tabBar"]];            }        return YES;}@end

注解1：表示TabBarController，它时TabBar的控制器，在这里分配TabBar的数量包括选择后显示的视图控制器等。

注解2：视图控制器，切换TabBar后将进入这个控制器当中。因为本节中TabBar比较简单，所以我将它们都写在了一个控制器当中，通过参数来区分它们。当然它们也可以分开写在不同的控制器当中。最后程序将首先进入TabBarController控制器。

TabBarController.h

#import <Three20/Three20.h>@interface TabBarController : UITabBarController {}@end

TabBarController.m

#import "TabBarController.h"@implementation TabBarController- (void)viewDidLoad{        //获取当前屏幕的尺寸    CGSize screen = [[UIScreen mainScreen]bounds].size;    //设置TabBar的现实区域    //这里表示位置在屏幕底部并且高度是44     self.tabBar.frame = CGRectMake(0, screen.height - 44, screen.width, 44);       //注解1    [self setTabURLs:[NSArray arrayWithObjects:@"tt://menuView/0",                      @"tt://menuView/1",                      nil]];        }@end

注解1：设置Tabbar的数量，数组的长度就是它的数量， @"tt://menyView/0"表示点击第一个TabBar按钮后进入的视图控制器，以此类推。那么在这里点击按钮后程序将进入MenuViewController。

MenuViewController.h

#import <Three20/Three20.h>@interface MenuViewController : TTTableViewController{}@end

MenuViewController.m

#import "MenuViewController.h"#import "ListDataSource.h"#import "CustomDaragRefesh.h"@implementation MenuViewController- (id)initMenu:(int)page {    if (self = [super init])     {                //初始化页面的ID        [self setPage:page];    }    return self;}- (void)dealloc {    [super dealloc];}-(void)loadView{    [super loadView];    //注解1    TTURLCache* cacheStore = [TTURLCache sharedCache];    [cacheStore removeURL:@"http://www.google.com.hk/intl/zh-CN/images/logo_cn.png" fromDisk:YES];    }- (void)setPage:(int)page {         //设置标题与TabBar的图片与文字    switch (page) {        case 0:            self.title = @"雨松MOMO";            self.tabBarItem = [[[UITabBarItem alloc] initWithTitle:self.title image:TTIMAGE(@"bundle://icon0.png") tag:0] autorelease];            break;        case 1:            self.title = @"RORO娃娃";            self.tabBarItem = [[[UITabBarItem alloc] initWithTitle:self.title image:TTIMAGE(@"bundle://icon1.png") tag:0] autorelease];            break;            default:            break;    }}-(void)createModel {    //注解2    self.dataSource = [[[ListDataSource alloc] init] autorelease];}- (id)createDelegate {    //注解3        CustomDaragRefesh *a = [[[CustomDaragRefesh alloc] initWithController:self] autorelease];    return a;}@end

注解1：访问应用程序的缓存，在这里可以拿到缓存的资源文件。这里表示首次进入该视图控制器时删除之前缓存的资源。下面会详细介绍缓存的机制。

注解2：createModel 方法表示初始化创建模型数据，该方法是系统调用用于初始化数据。为了刷新列表中显示的内容，我们在这里重写了TTListDataSource显示类，所有的内容将在ListDataSource中计算。

注解3：createDelegate方法表示初始化一个委托，它也是由系统调用。这里的代码表示创建一个下拉列表，仅仅只是创建的现实的视图。CustiomDaragRefesh继承于TTTabViewDragRefreshDelegate类，我们在这里监听用户拖动下拉列表的事件。

ListDataSource.h

#import <Three20/Three20.h>#import "Model.h" @class Model;@interface ListDataSource : TTListDataSource {     //用于监听下拉列表读取与刷新    Model* _custiom_model;  }@end

ListDataSource.m

#import "ListDataSource.h"@implementation ListDataSource- (id)init{     if (self = [super init]) {         //创建Model        _custiom_model = [[[Model alloc] init] autorelease];           }     return self; }- (void)dealloc {     TT_RELEASE_SAFELY(_custiom_model);     [super dealloc]; }- (id<TTModel>)model {     //注解1    return _custiom_model; }- (void)tableViewDidLoadModel:(UITableView*)tableView {         //注解2  NSMutableArray* items = [[[NSMutableArray alloc] init]autorelease];       int count = _custiom_model.images.count;    for (int i = 0; i < count; i++)     {        UIImage * image = [_custiom_model.images objectAtIndex:i];        [items addObject: [TTTableRightImageItem itemWithText: @"M" imageURL:nil                                                      defaultImage:image imageStyle:TTSTYLE(rounded)                                                          URL:@"tt://tableItemTest"]];    }        self.items = items;    }@end

注解1: 在这里重写modle方法，表示设置下拉列表的模型，因为我们需要在Model中实现下载数据的操作。

注解2：在这里刷新UI，它会等待Model类中发送刷新UI的请求，一旦Model中下载数据成功后，调用方法将会在这里刷新UI的内容。这段代码表示绘制列表，包含图片与文字。

Model.h

#import <Three20/Three20.h>#import "ListDataSource.h"@interface Model : TTURLRequestModel {     //图片    NSMutableArray * _images;    //文字    NSMutableArray * _texts;    //图片地址    NSString * _url; }@property (nonatomic, assign) NSMutableArray * images;@property (nonatomic, assign) NSMutableArray * texts;@property (nonatomic, assign) NSString * url;@end

Model.m

#import "Model.h"@implementation Model@synthesize images = _images; @synthesize texts  = _texts;@synthesize url  = _url;- (id)init{     if (self = [super init]) {                 self.images = [[NSMutableArray alloc] init];        self.texts = [[NSMutableArray alloc] init];             self.url = @"http://www.google.com.hk/intl/zh-CN/images/logo_cn.png";            }         return self; }- (void) dealloc {     TT_RELEASE_SAFELY(_images);     TT_RELEASE_SAFELY(_texts);     TT_RELEASE_SAFELY(_url);     [super dealloc]; }- (void)load:(TTURLRequestCachePolicy)cachePolicy more:(BOOL)more {     //是否正在下载中    if (!self.isLoading) {                 UIImage* image = nil;        //得到缓存对象        TTURLCache* cacheStore = [TTURLCache sharedCache];                //判断缓存中是否有url指定的资源对象        if ([cacheStore hasDataForKey:[cacheStore keyForURL:_url] expires:3000]) {            //直接从缓存中获取对象            image = [cacheStore imageForURL:_url fromDisk:NO];            if (image == nil)             {                // 图片未能在缓存中获取，尝试在内存中获取图片                image = [UIImage imageWithData:[cacheStore dataForURL:_url]];            }            [self.images addObject:image];            //注解1            [self didFinishLoad];        }        else        {            // 图片未能在缓存中找到，删除缓存地址尝试重新下载图片            [cacheStore removeURL:_url fromDisk:YES];        }                //如果图片未能获取到，我们开始下载图片        if(image == nil)        {                       //下载请求           TTURLRequest* request = [TTURLRequest                                      requestWithURL: _url                                      delegate: self];             //表示接收图片数据            request.response = [[[TTURLImageResponse alloc] init] autorelease];                        //发送异步请求            if(![request send])            {                //异步请求未能成功发送，这里需要处理一下            }                        //资源下载成功后将缓存在本地中。        }        }   }- (void)requestDidFinishLoad:(TTURLRequest*)request {         TTURLCache* cacheStore = [TTURLCache sharedCache];    UIImage * image = [cacheStore imageForURL:_url fromDisk:NO];    //图片资源下载完毕后，后缓存中取得图片资源    if(image != nil)    {        [self.images addObject:image];    }    //注解2   [super requestDidFinishLoad:request];  }@end

注解1：在视图中下列表时程序将自动调用Load方法，首先在缓存中判断图片资源是否存在，如果缓存中没有该资源，那么根据URL地址开始下载图片资源。didFinishLoad方法表示通知ListDataSource类开始刷新UI。然后会执行ListDataSource类中的tableViewDidLoadModel方法。

注解2：requestDidFinishLoad方法表示数据下载完毕后反馈结果时调用，图片资源已经缓存至本地。最后调用[super requsetDidFinishLoad]方法来刷新UI，它也是通知ListDataSource类开始刷新界面。

如果是模拟器的话，图片将被缓存至Library（资源库）->Application Support->Iphone Simulator->5.1（模拟器版本）->Applications->你的程序->Library->Caches->Three20

如下图所示Google的资源被存在本地。

通过如下方法即可在缓存中获取该对象，值得注意的时url并不是上图中对应的资源名称，而是下载图片时的地址。

    TTURLCache* cacheStore = [TTURLCache sharedCache];    UIImage * image = [cacheStore imageForURL:_url fromDisk:NO];

CustomDaragRefesh.h

#import <Three20/Three20.h>@interface CustomDaragRefesh : TTTableViewDragRefreshDelegate{}@end

CustomDaragRefesh.m

用于监听下拉列表所有的事件。

#import "CustomDaragRefesh.h"@implementation CustomDaragRefesh- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {    NSLog(@"点击刷新视图时");}- (void)scrollViewDidScroll:(UIScrollView*)scrollView {    [super scrollViewDidScroll:scrollView];        NSLog(@"拖动刷新视图时");}- (void)scrollViewDidEndDragging:(UIScrollView*)scrollView willDecelerate:(BOOL)decelerate {    [super scrollViewDidEndDragging:scrollView willDecelerate:decelerate];         NSLog(@"拖动刷新视图松手时");}- (void)modelDidStartLoad:(id<TTModel>)model {    NSLog(@"开始下载时");}- (void)modelDidFinishLoad:(id<TTModel>)model {   NSLog(@"下载结束时");}- (void)model:(id<TTModel>)model didFailLoadWithError:(NSError*)error {     NSLog(@"下载失败的错误%@", error);}@end

最后我们学习文章开头中提到的，如何修改刷新文字。我觉得这里直接修改源码就可以，我查看了源码，感觉这里写的非常不灵活。刷新的文字写在TTTabHeaderDragRefreshView中。如下图所示，刷新的文字已经修改成中文。最后我们在来学习一下Three20的运行机制，编译程序时Three20会把自身所有的.m文件封装成.a文件。我们修改了它的源码，编译时three20会重新生成新的.a文件，所以我们无法进行调试Three20中的源码。

修改过的代码

@implementation TTTableHeaderDragRefreshView//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////#pragma mark -#pragma mark Private///////////////////////////////////////////////////////////////////////////////////////////////////- (void)showActivity:(BOOL)shouldShow animated:(BOOL)animated {  if (shouldShow) {    [_activityView startAnimating];  } else {    [_activityView stopAnimating];  }  [UIView beginAnimations:nil context:nil];  [UIView setAnimationDuration:(animated ? ttkDefaultFastTransitionDuration : 0.0)];  _arrowImage.alpha = (shouldShow ? 0.0 : 1.0);  [UIView commitAnimations];}///////////////////////////////////////////////////////////////////////////////////////////////////- (void)setImageFlipped:(BOOL)flipped {  [UIView beginAnimations:nil context:NULL];  [UIView setAnimationDuration:ttkDefaultFastTransitionDuration];  [_arrowImage layer].transform = (flipped ?                                   CATransform3DMakeRotation(M_PI * 2, 0.0f, 0.0f, 1.0f) :                                   CATransform3DMakeRotation(M_PI, 0.0f, 0.0f, 1.0f));  [UIView commitAnimations];}//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////#pragma mark -#pragma mark NSObject///////////////////////////////////////////////////////////////////////////////////////////////////- (id)initWithFrame:(CGRect)frame {  if (self = [super initWithFrame:frame]) {    self.autoresizingMask = UIViewAutoresizingFlexibleWidth;    _lastUpdatedLabel = [[UILabel alloc]                         initWithFrame:CGRectMake(0.0f, frame.size.height - 30.0f,                                                  frame.size.width, 20.0f)];    _lastUpdatedLabel.autoresizingMask =      UIViewAutoresizingFlexibleRightMargin | UIViewAutoresizingFlexibleLeftMargin;    _lastUpdatedLabel.font            = TTSTYLEVAR(tableRefreshHeaderLastUpdatedFont);    _lastUpdatedLabel.textColor       = TTSTYLEVAR(tableRefreshHeaderTextColor);    _lastUpdatedLabel.shadowColor     = TTSTYLEVAR(tableRefreshHeaderTextShadowColor);    _lastUpdatedLabel.shadowOffset    = TTSTYLEVAR(tableRefreshHeaderTextShadowOffset);    _lastUpdatedLabel.backgroundColor = [UIColor clearColor];    _lastUpdatedLabel.textAlignment   = UITextAlignmentCenter;    [self addSubview:_lastUpdatedLabel];    _statusLabel = [[UILabel alloc]                    initWithFrame:CGRectMake(0.0f, frame.size.height - 48.0f,                                             frame.size.width, 20.0f )];    _statusLabel.autoresizingMask =      UIViewAutoresizingFlexibleRightMargin | UIViewAutoresizingFlexibleLeftMargin;    _statusLabel.font             = TTSTYLEVAR(tableRefreshHeaderStatusFont);    _statusLabel.textColor        = TTSTYLEVAR(tableRefreshHeaderTextColor);    _statusLabel.shadowColor      = TTSTYLEVAR(tableRefreshHeaderTextShadowColor);    _statusLabel.shadowOffset     = TTSTYLEVAR(tableRefreshHeaderTextShadowOffset);    _statusLabel.backgroundColor  = [UIColor clearColor];    _statusLabel.textAlignment    = UITextAlignmentCenter;    [self setStatus:TTTableHeaderDragRefreshPullToReload];    [self addSubview:_statusLabel];    UIImage* arrowImage = TTSTYLEVAR(tableRefreshHeaderArrowImage);    _arrowImage = [[UIImageView alloc]                   initWithFrame:CGRectMake(25.0f, frame.size.height - 60.0f,                                            arrowImage.size.width, arrowImage.size.height)];    _arrowImage.image             = arrowImage;    [_arrowImage layer].transform = CATransform3DMakeRotation(M_PI, 0.0f, 0.0f, 1.0f);    [self addSubview:_arrowImage];    _activityView = [[UIActivityIndicatorView alloc]                     initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleGray];    _activityView.frame = CGRectMake( 30.0f, frame.size.height - 38.0f, 20.0f, 20.0f );    _activityView.hidesWhenStopped  = YES;    [self addSubview:_activityView];  }  return self;}///////////////////////////////////////////////////////////////////////////////////////////////////- (void)dealloc {  TT_RELEASE_SAFELY(_activityView);  TT_RELEASE_SAFELY(_statusLabel);  TT_RELEASE_SAFELY(_arrowImage);  TT_RELEASE_SAFELY(_lastUpdatedLabel);  TT_RELEASE_SAFELY(_lastUpdatedDate);  [super dealloc];}//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////#pragma mark -#pragma mark Public///////////////////////////////////////////////////////////////////////////////////////////////////- (void)setUpdateDate:(NSDate*)newDate {  if (newDate) {    if (_lastUpdatedDate != newDate) {      [_lastUpdatedDate release];    }    _lastUpdatedDate = [newDate retain];    NSDateFormatter* formatter = [[NSDateFormatter alloc] init];    [formatter setDateStyle:NSDateFormatterShortStyle];    [formatter setTimeStyle:NSDateFormatterShortStyle];    _lastUpdatedLabel.text = [NSString stringWithFormat:                              TTLocalizedString(@"最后更新: %@",                                                @"The last time the table view was updated."),                              [formatter stringFromDate:_lastUpdatedDate]];    [formatter release];  } else {    _lastUpdatedDate = nil;    _lastUpdatedLabel.text = TTLocalizedString(@"Last updated: never",                                               @"The table view has never been updated");  }}///////////////////////////////////////////////////////////////////////////////////////////////////- (void)setCurrentDate {  [self setUpdateDate:[NSDate date]];}///////////////////////////////////////////////////////////////////////////////////////////////////- (void)setStatus:(TTTableHeaderDragRefreshStatus)status {  switch (status) {    case TTTableHeaderDragRefreshReleaseToReload: {      [self showActivity:NO animated:NO];      [self setImageFlipped:YES];      _statusLabel.text = TTLocalizedString(@"松开即可刷新...",                                            @"Release the table view to update the contents.");      break;    }    case TTTableHeaderDragRefreshPullToReload: {      [self showActivity:NO animated:NO];      [self setImageFlipped:NO];      _statusLabel.text = TTLocalizedString(@"下拉可以刷新...",                                            @"Drag the table view down to update the contents.");      break;    }    case TTTableHeaderDragRefreshLoading: {      [self showActivity:YES animated:YES];      [self setImageFlipped:NO];      _statusLabel.text = TTLocalizedString(@"加载中...",                                            @"Updating the contents of a table view.");      break;    }    default: {      break;    }  }}@end

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

下载地址：http://www.xuanyusong.com/archives/647

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