UITableView实例教程：创建Table View的detail view

Introduction
介绍
In this tutorial, you will learn how to navigate to the detail view and also pass some data at the same time. This is the second tutorial in the UITableView tutorial series and inherits its source code from the first tutorial.
在这篇教程中，你将学会如何导航到细节视图（detail view）并同时传递一些数据。这是UITableView系列教程中的第二篇，本篇教程继承我们在上一篇教程中所用到的代码和方法。
Creating a detail view
创建一个细节视图
Open Interface Builder and click on File -> New -> (select Cocoa Touch) View, save it in the application directory and name it "DetailView". You will be asked to add the view to the current project, click on "Add". You may need to drag the view (in XCode) to the "Resources" folder. Now that you have your view, we will create a view controller class to control the view on the screen. In XCode select Classes then click on File -> New File -> (under iPhone OS) select UIViewController subclass and name it "DetailViewController, do not change the extension. Now we have to connect the view to the view controller we just created. In Interface Builder, select File's Owner and open Identity Inspector, under class Identity set the class to "DetailViewController", open Connections Inspector and create a connection from the view property to the view object in the nib file.
打 开Interface Builder，点击File -> New -> (select Cocoa Touch) View，保存在我们第一篇所创建的应用程序里并命名为"DetailView"。同时，程序会提示你是否添加到当前项目中，选择“ADD”。为使得我们 的代码管理界面看起来更整齐，你需要拖放这个视图文件（在Xcode项目管理界面里）到"Resources"文件夹。现在我们有了视图，我们将创建一个 视图控制类（view controller class）来控制视图在屏幕上的显示情况。在Xcode项目管理界面中中选择Classes，然后点击File -> New File -> (under iPhone OS) select UIViewController subclass然后命名为"DetailViewController",不要改变扩张名。现在，让我们来连接视图和我们刚刚创建的视图控制类。在 Interface Builder中选择File's Owne，并且打开Identity Inspecto，在class Identity条目中设置为"DetailViewController"，在nib文件中，打开Connections Inspector并且创建连接从view property 到 the view object。
Now add controls to the view which will display the detail contents. The controls that you may want to add to the view, depends on the data you want to display. We will display the country selected in the table view, so a simple label should do. Drag and drop the label on the view. We need some way to change the text of the label from XCode, create a variable of type UILabel in xcode and connect it with the label object on the view. The label should be declared with IBOutlet property, so it shows up in the Connections Inspector. This is how the code looks like
现在给我们的细节视图添加控制 程序。控制程序需要要能根据我们想要展示的数据而提供视图。我们将显示我们在table view中所选的国家，所以需要一个简单的label标签。从lib中拖一个label标签放到view视图上。在程序中我们需要通过一些方式来改变 label的值，所以在程序中创建一个UILabel类型的变量，和view视图上的label标签相连接，并声明为IBOutlet属性，以便可以再连 接控制器（Connections Inspector）中显示。最后的代码如下：

//DetailViewController.h
#import <UIKit/UIKit.h>
@interface DetailViewController : UIViewController {
IBOutlet UILabel *lblText;
}
@end
//Dealloc method declared in DetailViewController.m
- (void)dealloc {
[lblText release];
[super dealloc];
}

After you have declared the variable, open IB and connect the variable to the label placed on the view in Connections Inspector. Now we can change the label's properties from XCode.
声明该变量后，打开IB使用Connections Inspector和view视图上的label连接。现在我们可以通过程序来改变label的属性了。
Navigate to the detail view
导航到细节视图界面
The method tableView:didSelectRowAtIndexPath is called when a row is selected, it passes the tableview object with the indexPath object to tell us which row was selected. First import the "DetailViewController" class in RootViewController, so it knows about it. The following code will initialize the detail view and display it
当选择table view中的一行时， tableView:didSelectRowAtIndexPath 方法会被调用，同时传递所选行的索引参数（the indexPath object）。首先，在RootViewController中引入"DetailViewController"类。下面的代码将初始化细节视图并显 示。

//RootViewController.m
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
DetailViewController *dvController = [[DetailViewController alloc] initWithNibName:@"DetailView" bundle:[NSBundle mainBundle]];
[self.navigationController pushViewController:dvController animated:YES];
[dvController release];
dvController = nil;
}

A "DetailViewController" is created, initialized with initWithNibName:bundle message and the name of the nib file is passed as the parameter. The view controller is then push to the top of the stack with its animated property set to YES. At last, we clean up memory by releasing the detail view controller. Run the application and now you can select a row to see the detail view.
代码说明：程序运行，创建并初始 化"DetailViewController"对象。通过initWithNibName:bundle方法传递窗口文件名称。视图控制器会被推向顶 层，并设置动画转换为真。最后我们在内存中释放细节视图控制器。运行程序，你可以选择一行看到细节视图界面的效果。
Passing data
传递数据
We still have to pass the selected country from the list to the detail view. To do this, we will declare a property in "DetailViewController" whose data type is the same as the in the array, in our case NSString. This is what you have to do if you want to pass data from one view controller to another. The following code declares a property in "DetailViewController"
现在我们还需要从table view中传递所选数据给细节视图。好的，让我们现在就开始来实现它。首先，在"DetailViewController"中声明所传递的数据类型和 array中的一致，在本例中为NSString。下面DetailViewController文件中的代码实现了我们的想法。

//DetailViewController.h
#import <UIKit/UIKit.h>
@interface DetailViewController : UIViewController {
IBOutlet UILabel *lblText;
NSString *selectedCountry;
}
@property (nonatomic, retain) NSString *selectedCountry;
@end
//Dealloc method declared in DetailViewController.m
- (void)dealloc {
[selectedCountry release];
[lblText release];
[super dealloc];
}
//First three lines of DetailViewController.m
#import "DetailViewController.h"
@implementation DetailViewController
@synthesize selectedCountry;

The property is synthesized at the top after the implementation begins. Now we can pass the selected country from the table view to the detail view. The tableView:didSelectRowAtIndexPath method looks like this
声明的特性将会在实体程序开始执行之前生效。现在我们能通过在table view中传递所选的国家给细节视图。tableView:didSelectRowAtIndexPath方法中的代码如下：

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
//Get the selected country
NSString *selectedCountry = [listOfItems objectAtIndex:indexPath.row];
//Initialize the detail view controller and display it.
DetailViewController *dvController = [[DetailViewController alloc] initWithNibName:@"DetailView" bundle:[NSBundle mainBundle]];
dvController.selectedCountry = selectedCountry;
[self.navigationController pushViewController:dvController animated:YES];
[dvController release];
dvController = nil;
}

We first get the selected country from the array, initialize the detail view controller, set the selected country to the property on the detail view controller and display it.
我们首先从列表中获得所选国家，初始化detail view controller，设置所选国家在detail view controller声明并显示
Setting the accessory view
设置附属视图
Run the app and now we are able to select a row in a table view. However, it is not obvious to the user that a row can be selected to see its detail view. We can add a "accessory view" to the cell which will show up at the right end of the row. The accessory view can be set up in tableView:cellForRowAtIndexPath method or in tableView:accessoryTypeForRowWithIndexPath. We will use the later method to keep our code simple. This is how the source code changes
运 行程序，现在我们能在table view中选择一行。尽管如此，用户显然不会很明白可以选择table view中的一行数据并查看细节视图。我们可以在table cell的右侧添加附属视图"accessory view"。附属视图设置的方法为tableView:cellForRowAtIndexPath或者用 tableView:accessoryTypeForRowWithIndexPath。我将使用后面的方法以便保持本例代码的简介性，最后的修改代码 为：

//RootViewController.m
- (UITableViewCellAccessoryType)tableView:(UITableView *)tableView accessoryTypeForRowWithIndexPath:(NSIndexPath *)indexPath {
//return UITableViewCellAccessoryDetailDisclosureButton;
return UITableViewCellAccessoryDisclosureIndicator;
}
The above method returns an enum UITableViewCellAccessoryType and we can return four values: UITableViewCellAccessoryNone, UITableViewCellAccessoryDisclosureIndicator, UITableViewCellAccessoryDetailDisclosureButton, and UITableViewCellAccessoryCheckmark. You can test the code by returning one of the four values to see how the accessory view looks like. If you return "UITableViewCellAccessoryDetailDisclosureButton" clicking on the button will not do anything, since the cell is not selected but a button is clicked. The SDK does provide a method which gets called when the accessory button is clicked and that is called tableView:accessoryButtonTappedForRowWithIndexPath. In this method we can call tableView:didSelectRowAtIndexPath which will load the detail view and this is how the code will look like
以上方法返回一个枚举类型 UITableViewCellAccessoryType，可选值有四个：UITableViewCellAccessoryNone, UITableViewCellAccessoryDisclosureIndicator, UITableViewCellAccessoryDetailDisclosureButton,和 UITableViewCellAccessoryCheckmark。你可以尝试不同的值，并注意table cell样式的变化。如果返回"UITableViewCellAccessoryDetailDisclosureButton"，点击按钮将不会有任 何变化，那是因为table cell不会被选择，当我们点击一个按钮时。当点击附属视图的按钮时，在SDK中提供了一个方法可以获得回调。该方法为 tableView:accessoryButtonTappedForRowWithIndexPath。在这个方法中我们调用 tableView:didSelectRowAtIndexPath方法，而加载细节视图。实现代码如下：

//RootViewController.m
- (void)tableView:(UITableView *)tableView accessoryButtonTappedForRowWithIndexPath:(NSIndexPath *)indexPath {
[self tableView:tableView didSelectRowAtIndexPath:indexPath];
}
The last thing we need to do in detail view controller, is to display the selected country on the label. Do it in viewDidLoad method and this is how the code looks like
// DetailViewController.m
- (void)viewDidLoad {
[super viewDidLoad];
//Display the selected country.
lblText.text = selectedCountry;
//Set the title of the navigation bar
self.navigationItem.title = @"Selected Country";
}

The method "viewDidLoad" gets called when the view is loaded, where we set the selected country by setting the text property of the label "lblText". The title of the navigation bar is also set in the same method.
viewDidLoad方法会在视图加载完成后调用，在这时我们设置所选国家并设置为"lblText"标签的属性。
Conclusion
结论
We have seen how to display a list of items in a table view, how to select a row and display the detail view, and in the next tutorial we will look at how to search the list of items in a table view. I hope you found this tutorial helpful and if you have any questions, please send me an email. Don't forget to leave a comment.
我们已经学习到如何使用table view显示条目列表视图，如何选择一个条目并显示其细节视图。在下一篇教程中我们将学习如何在table view中搜索条目。希望这些文字对你有用，同时如果你有任何问题可以提出来，可以发邮件给我。当然不要忘记留下你的评论。
翻译：http://blog.laifangwen.com  译文：http://blog.laifangwen.com/htmldata/iPhone/2009/06/16/221.html
作者：http://www.iphonesdkarticles.com  英文：http://www.iphonesdkarticles.com/2009/01/uitableview-loading-detail-view.html
Happy Programming,
iPhone SDK Articles
原创翻译，欢迎转载，但需保留作者信息和翻译者信息，谢谢！
本例UITableView 源码下载：