新手教程:标签栏+导航栏的交互使用详细步骤
本文摘自:http://www.cocoachina.com/newbie/basic/2011/1008/3328.html
论坛会员xinde0908分享的关于标签栏+导航栏的交互使用的超详细步骤,适合新手学习和实践.
标签栏+导航栏的交互使用详细步骤。做为新手一起探讨进步吧
这几天一直在找这方面的资料。从网上下了不少简单的例子,可还是没做出来,主要是不是很理解吧。综合官方文档和开发基础教程里的内容,自己摸索了一下午总算是结果出来了。记录在此,一方面给需要的朋友以帮助,另一方面加深自己的理解。
![](http://www.cocoachina.com/cms/uploads/allimg/111008/3292_111008145734_1.png)
现在开始一步一步来,别嫌我罗嗦啊:
1.在Xcode中,新建一个新的项目,iPhone模板列表中选择Window-Based Application,新项目命名为:TabNav
2.打开顶部文件夹TabNav,里面有三个文件,分别是TabNavAppDelegate.h,TabNavAppDelegate.m,MainWindow.xib
在TabNavAppDelegate.h中,代码编辑如下(黑体部分是自己编辑的内容):
#import <UIKit/UIKit.h>
@interface TabNavAppDelegate : NSObject <UIApplicationDelegate> {
UITabBarController *tabBarController;
}
@property (nonatomic, retain) IBOutlet UIWindow *window;
@property (nonatomic, retain) IBOutlet UITabBarController *tabBarController;
@end
在TabNavAppDelegate.m中,代码如下:
#import "TabNavAppDelegate.h"
@implementation TabNavAppDelegate
@synthesize window=_window;
@synthesize tabBarController;
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
// Override point for customization after application launch.
[_window addSubview:tabBarController.view];
[self.window makeKeyAndVisible];
return YES;
}
- (void)dealloc
{
[tabBarController release];
[_window release];
[super dealloc];
}
@end
3.打开MainWindow.xib,从库中拖一个Tab Bar Controller到nib的主窗口。按住Control键并将Tab Nav App Delegate图标拖到Tab Bar Controller图标,选择tabBarController输出口
Tab Bar Controlle自带两个标签项,我们再向其中添加两个Navigation Controller,直接将图标拖进去就行。修改标签的名字分别为Device,Scene,Control,Favorite。
4.我们项目标签栏有四个窗口,因此我们需要有四个控制器。点击file,new file...,依次选择Cocoa Touch Class 和 Objective-C class,弹出的菜单中选择NSObject。点击Next,文件命名为:
DeviceViewController。重复3次上面的操作,其他三个文件分别命名为:SceneViewController,ControlViewController和FavoriteViewController
根据需要修改头文件的超类,我的修改如下,这一步也可以到编写代码时修改
@interface DeviceViewController : UIViewController {
}
@interface SceneViewController : UIViewController {
}
@interface ControlViewController : UITableViewController {
}
@interface FavoriteViewController : UIViewController {
}
5.分别为四个view Controller选择他们的基类,记得要一一对应哦。这里注意一点是后面两个view Controller需要展开Navigation Controller才能找到。
前面两项不是我们关注的对象,分别拖一个view到它们的控制器上,改改背景颜色,修改一下名字,随便你整啦。
我们来关注一下第三个控制器ControlViewController,这个标签主界面实现一个表视图。表格中有一个选项,点击可进入第二个界面。
6.我们先为第二个界面创建一个基于UIViewController的文件,生成三个文件NextFavViewController.h,NextFavViewController.m,NextFavViewController.xib
点击Xib文件,我们改变一下view的背景颜色,只是用来证明我们确实作为第二个界面打开了它。
7.展开Navigation Controller-control图标下的control view controller项,向其添加一个Table View,在连接检查器中设置它的委托和数据源。记得是连接它的上级控制器哦。
8.编辑ControlViewController.h文件如下
#import <Foundation/Foundation.h>
#import "NextFavViewController.h"
@interface ControlViewController : UITableViewController {
NSArray *controllers;
}
@property (nonatomic, retain) NSArray *controllers;
@end
***************************
编辑ControlViewController.m文件如下
#import "ControlViewController.h"
@implementation ControlViewController
@synthesize controllers;
- (void) viewDidLoad
{
self.navigationItem.title = @"maomi";
NSMutableArray *array = [[NSMutableArray alloc] init];
NextFavViewController *nextFavViewController = [[NextFavViewController alloc] initWithNibName:@"NextFavViewController" bundle:nil];
nextFavViewController.title = @"laopo";
[array addObject:nextFavViewController];
NSLog(@"have you viewDidLoad?");
self.controllers = array;
[nextFavViewController release];
[array release];
[super viewDidLoad];
}
- (void) viewDidUnload
{
self.controllers = nil;
[super viewDidUnload];
}
- (void) dealloc
{
[controllers release];
[super dealloc];
}
#pragma mark -
#pragma mark Table Data Source Methods
// Customize the number of rows in the table view.
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
return [self.controllers count];
}
// Customize the appearance of table view cells.
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
static NSString *CellIdentifier = @"Cell";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil) {
cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];
}
// Set up the cell...
NSUInteger row = [indexPath row];
NextFavViewController *controller = [controllers objectAtIndex:row];
cell.textLabel.text = controller.title; //@"haha";
cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;
return cell;
}
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
// Navigation logic may go here. Create and push another view controller.
NextFavViewController *anotherViewController = [[NextFavViewController alloc] initWithNibName:@"NextFavViewController" bundle:nil];
[self.navigationController pushViewController:anotherViewController animated:YES];
[anotherViewController release];
}
@end
Build一下看是不是出来想要的效果了呢?也是挺简单的呵。可以前就是做不出来,真急死人。
下面是第四个控制器FavoriteViewController,主要是对Navigation Controller中rightBarButtonItem和backBarButtonItem的应用,对了,还有一个button,这个就不专门解释啦。
9.同上面一样,我们添加一个View视图,并修改FavoriteViewController.h如下:
#import <Foundation/Foundation.h>
#import "NextFavViewController.h"
@interface FavoriteViewController : UIViewController {
UIButton *buttonFav;
}
@property (nonatomic, retain) IBOutlet UIButton *buttonFav;
- (IBAction) buttonFavPressed:(id)sender;
@end
FavoriteViewController.m文件的内容如下:
#import "FavoriteViewController.h"
@implementation FavoriteViewController
@synthesize buttonFav;
- (void) viewDidLoad
{
self.navigationItem.title = @"baobeiwoaini";
UIBarButtonItem *refreshButton = [[UIBarButtonItem alloc]
initWithTitle:@"刷新"
style:UIBarButtonItemStyleBordered
target:self
action:@selector(buttonFavPressed:)];
self.navigationItem.rightBarButtonItem = refreshButton;
UIBarButtonItem *cancelButton = [[UIBarButtonItem alloc]
initWithTitle:@"撤退"
style:UIBarButtonItemStylePlain
target:self
action:nil];
self.navigationItem.backBarButtonItem = cancelButton;
[super viewDidLoad];
}
- (void) viewDidUnload
{
self.buttonFav = nil;
[super viewDidUnload];
}
- (void) dealloc
{
[buttonFav release];
[super dealloc];
}
- (IBAction) buttonFavPressed:(id)sender
{
NextFavViewController *anotherViewController = [[NextFavViewController alloc] initWithNibName:@"NextFavViewController" bundle:nil];
[self.navigationController pushViewController:anotherViewController animated:YES];
[anotherViewController release];
}
@end
Build一下看,怎么样成功了没有?因为只是实验,它们的第二视图都是调用的NextFavViewController视图。实际中可以自己随便添加调用啊。
过程肯定有疏忽,遗漏的地方,希望大家能提出来一起研究,谢谢大家了!
下面是例子代码下载: TabNav.zip (38 K)