iPhone通用界面应用开发详解

在我们所熟悉的大部分iPhone应用中，基本都是屏幕上方有个导航条，页面中间部分是一个列表，点击某个列表可以显示详细信息页面，在屏幕底部是一个TabBar，用于切换不同的应用功能。这种界面风格已经成为了手机应用开发的事实上的标准，但是做为iPhone初学者，绝大多数iPhone书籍和教程中都是把Navigation、TableView、TabBar分开来进行介绍的，这就使得开发一个普通应用变得比较困难。在这篇文章中，我将通过一个实际的例子，向大家展示如何实现这种界面风格的程序。注本文开发环境为普通Windows7笔记本VMWare虚拟机，软件配置为Mac OS x 10.6.8 Xcode 3.2 ios4.3下测试运行通过，新版本中已经将一些过程进行了自动化，不过基本原理是一样的。

首先在Xcode中新建一个windowsbased应用，命名为Sw5。此处需要注意，由于我们希望所有类名都大写，所以填项目名时，项目名的第一个字母也应该大写。

• 打开classes目录下Sw5AppDelegate.h文件：

添加TabbarController的IBoutlet，具体代码如下所示：

@interface Sw5AppDelegate :NSObject <UIApplicationDelegate>{

UIWindow *window;

IBOutlet UITabBarController*mainUtbc;

}

@property (nonatomic,retain) IBOutlet UIWindow *window;

@property (nonatomic, retain) IBOutlet UITabBarController *mainUtbc;

就是定义了一个位于屏幕底部的TabBar，这里需要注意的是，需要将NavigationBar放到TabBar中，而不是相反，所以我们首先建立TabBar。

• 然后打开classes/Sw5AppDelegate.m文件：

首先添加实例化：

@synthesize window;

@synthesize mainUtbc; //<=

然后将其设置为第一个页面：

application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {

//Override point for customization after application launch.

[self.window addSubview:mainUtbc.view];<<<<==========

[self.windowmakeKeyAndVisible];

return YES;

}

最后是进行资源回收：

 

- (BOOL)application:(- (void)dealloc {

[mainUtbc release]; <<<<==========

[window release];

[super dealloc];

}

在InterfaceBuilder中进行如下操作：

通过双击Resources/MainWindow.xib文件进入InterfaceBuilder界面，从左侧控件列表中将UITabBarController拉入MainWindow.xib窗口中（不是界面设计窗口），并放在最后。

然后选择Sw5 AppDelegate项，按下右键，在Outlet下面，将mainUtbc后面的园形标记拖到新加入的UITabBarController控件上。

在MainVindow.xib窗口中，选择新加入的UITabBarController，在右上角的属性窗口中，通过+按钮，添加所需要的Tab项，这里我们添加了五个，可以通过双击修改显示文字。

然后在MainWindow.xib窗口中将UITabBarController展开，选择每一个Tab项下的TabItem，然后在右侧属性窗口中指定其所对应的图片。

下是定义more选项所对应的屏幕，在这里我们只是做一个简单的About页面。

单击classes然后按右键，选择NewFile...，然后选择建立一个以UIViewController为基类并自动生成XIB文件（复选框在界面中间）的类：MoreViewController。

双击MoreViewConroller.xib进入InterfaceBuilder，选择MoreViewController的界面设计窗口，从左侧控件库中把TextView加入到这个窗口中，并编辑其中的文件，然后保存。

在MainWindow.xib窗口中，选择“更多”项，在右上部属性窗口中，选择NIB文件为MoreViewController。选中最右侧信息窗口，选择类为MoreViewController。

在Xcode中编辑并运行此程序，应该可以出现有TabBar的界面，点击更多，可以正确显示我们的About页面。

建立TopNavController类，TopNavController.h文件将其基类设置为UINavigationController。

 

@interface TopNavController :UINavigationController {

}

在Sw5AppDelegate.h中：

引入新定义的类并定义其所对应的属性，如下所示：

 

#import<UIKit/UIKit.h>

@classTopNavController;  <<<<==========

@interface Sw5AppDelegate : NSObject<UIApplicationDelegate> {

UIWindow *window;

IBOutlet UITabBarController*mainUtbc;

IBOutlet TopNavController*mainTncr;<<<<==========

}

@property (nonatomic,retain) IBOutlet UIWindow *window;

@property (nonatomic, retain) IBOutlet UITabBarController *mainUtbc;

@property (nonatomic, retain) IBOutlet TopNavController*mainTncr;<<<<==========

在Sw5AppDelegate.m文件中：引入TopNavController，实例化mainTncr对象，析构函数中释放该对象

 

#import"TopNavController.h"

@implementationSw5AppDelegate

@synthesize window;

@synthesize mainUtbc;

@synthesize mainTncr;

- (void)dealloc {

[mainTncr release];

[mainUtbc release];

[window release];

[super dealloc];

}

建立列表显示的类DynamicTableViewController，并将DynamicTableViewController.h中添加如下代码：

 

@interfaceDynamicTableViewController :UITableViewController<UITableViewDelegate,UITableViewDataSource> {

}

双击MainWindow.xib打开InterfaceBuilder，进行如下操作：

在MainWindow.xib窗口中，选择Tab Bar Controller项，在右上侧属性窗口中，将第一个Item动态的类变为UINavigationController而不是原来的UIViewController。

选中第一个条目，该条目已经变为Top Nav Controllerselected，选中该条目，在信息窗口中选择类为TopNavController。

在MainWindow.xib窗口中，选择Sw5 App Delegate并按右键，将Outlet中的mainTncr指向TabBar的第一个条目。

打开TabBar第一个条目下的第一个条目，在右上侧信息窗口中指定类为DynamicTableViewController，在属性窗口中指定NIB文件为DynamicTableView。

打开DynamicTableViewController.m文件：将sectionNumofTable改为1，将rowsInSection改为0，即加入一个空的表格。

回到Xcode编译运行，应该可以看到一个空的列表界面。

下面输入表格中的数据：

首先在DynamicTableViewController.h中定义数组：

 

@interface DynamicTableViewController :UITableViewController<UITableViewDelegate,UITableViewDataSource> {

NSMutableArray *items;

}

 

@property (nonatomic, retain) NSMutableArray *items;

然后在DynamicTableViewController.m中：

@synthesize items;

初始化界面：

 

 

- (void)viewDidLoad {

[super viewDidLoad];

 

self.title= NSLocalizedString(@"动态",@"身边百事动态");

//

NSMutableArray *itemArray = [[NSArray alloc]initWithObjects:@"food 1", @"food 2", @"room 3", @"goods 4", @"table 5", nil];

self.items = itemArray;

[itemArray release];

//Uncomment the following line to display an Edit button in thenavigation bar for this view controller.

//self.navigationItem.rightBarButtonItem = self.editButtonItem;

}

显示列表表格中的数据：

 

// Customize the appearance of table view cells.

- (UITableViewCell*)tableView:(UITableView*)tableViewcellForRowAtIndexPath:(NSIndexPath *)indexPath {

 

static NSString *CellIdentifier = @"Cell";

 

UITableViewCell *cell = [tableViewdequeueReusableCellWithIdentifier:CellIdentifier];

if (cell == nil) {

cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefaultreuseIdentifier:CellIdentifier]autorelease];

}

 

// Configure the cell...

NSUInteger row = [indexPathrow];

[cell.textLabel setText:[self.itemsobjectAtIndex:row]];

 

return cell;

}

下面建立条目详细信息页面：

通过在Xcode中选中classes并按右键，选择NewFile，然后选择UIViewController子类，建立ItemDetailViewController。

通过双击ItemDetailViewController.xib，在界面设计窗口中从左侧控件中拉入一个Label，写上“详细信息页面”，可以标志我们确实进入了这个页面。

由于需要在DynamicTableViewController点击某个条目时激活并显示，因此需要在DynamicTableViewController.h中加入如下代码：

 

#import<UIKit/UIKit.h>

@classItemDetailViewController;

@interface DynamicTableViewController :UITableViewController<UITableViewDelegate,UITableViewDataSource> {

//IBOutlet UITableView *tableView;

NSMutableArray *items;

ItemDetailViewController *itemDetailViewController;

}

@property (nonatomic, retain) NSMutableArray *items;

@property (nonatomic, retain) ItemDetailViewController*itemDetailViewController;

在DynamicTableViewController.m文件中：

引入并实例化ItemDetailViewController类

 

#import"DynamicTableViewController.h"

#import"ItemDetailViewController.h"

#import "Sw5AppDelegate.h"

@synthesize items;

@synthesizeitemDetailViewController;

具体单击事件响应函数：

 

- (void)tableView:(UITableView *)tableViewdidSelectRowAtIndexPath:(NSIndexPath *)indexPath {

// Navigation logic may go here. Create and push another viewcontroller.

 

NSUInteger row = [indexPathrow];

if (nil == self.itemDetailViewController) {

ItemDetailViewController *idvcObj = [[ItemDetailViewController alloc] initWithNibName:@"ItemDetailViewController"bundle:nil];

self.itemDetailViewController = idvcObj;

[idvcObj release];

}

 

self.itemDetailViewController.title= [NSString stringWithFormat:@"%@", [self.items objectAtIndex:row]];

 

Sw5AppDelegate *delegate = [[UIApplication sharedApplication]delegate];

[delegate.mainTncr pushViewController:self.itemDetailViewControlleranimated:YES];

}

最后是注销该对象：

 

- (void)dealloc {

[itemDetailViewController release];

[super dealloc];

}