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

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://download.csdn.net/detail/xys289187120/4183984

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