UITableView实例教程：创建Table View的detail view
Introduction介绍
In this tutorial, you will learnhow to navigate to the detail view and also pass some data at the sametime. This is the second tutorial in the UITableView tutorial seriesand inherits its source code from the first tutorial.
在这篇教程中，你将学会如何导航到细节视图（detail view）并同时传递一些数据。这是UITableView系列教程中的第二篇，本篇教程继承我们在上一篇教程中所用到的代码和方法。
Creating a detail view
创建一个细节视图
OpenInterface Builder and click on File -> New -> (select CocoaTouch) 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 viewcontroller class to control the view on the screen. In XCode selectClasses then click on File -> New File -> (under iPhone OS)select UIViewController subclass and name it "DetailViewController, donot change the extension. Now we have to connect the view to the viewcontroller we just created. In Interface Builder, select File's Ownerand open Identity Inspector, under class Identity set the class to"DetailViewController", open Connections Inspector and create aconnection 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 controllerclass）来控制视图在屏幕上的显示情况。在Xcode项目管理界面中中选择Classes，然后点击File -> New File-> (under iPhone OS) select UIViewControllersubclass然后命名为"DetailViewController",不要改变扩张名。现在，让我们来连接视图和我们刚刚创建的视图控制类。在Interface Builder中选择File's Owne，并且打开Identity Inspecto，在classIdentity条目中设置为"DetailViewController"，在nib文件中，打开ConnectionsInspector并且创建连接从view property 到 the view object。
Now add controls tothe view which will display the detail contents. The controls that youmay 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 simplelabel should do. Drag and drop the label on the view. We need some wayto change the text of the label from XCode, create a variable of typeUILabel in xcode and connect it with the label object on the view. Thelabel should be declared with IBOutlet property, so it shows up in theConnections Inspector. This is how the code looks like
现在给我们的细节视图添加控制程序。控制程序需要要能根据我们想要展示的数据而提供视图。我们将显示我们在tableview中所选的国家，所以需要一个简单的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 {
;
;
}
Afteryou have declared the variable, open IB and connect the variable to thelabel placed on the view in Connections Inspector. Now we can changethe label's properties from XCode.
声明该变量后，打开IB使用Connections Inspector和view视图上的label连接。现在我们可以通过程序来改变label的属性了。
Navigate to the detail view
导航到细节视图界面
Themethod tableView:didSelectRowAtIndexPath is called when a row isselected, it passes the tableview object with the indexPath object totell us which row was selected. First import the "DetailViewController"class in RootViewController, so it knows about it. The following codewill initialize the detail view and display it
当选择table view中的一行时，tableView:didSelectRowAtIndexPath 方法会被调用，同时传递所选行的索引参数（the indexPathobject）。首先，在RootViewController中引入"DetailViewController"类。下面的代码将初始化细节视图并显示。
//RootViewController.m
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
DetailViewController *dvController = [ initWithNibName:@"DetailView" bundle:];
;
;
dvController = nil;
}
A"DetailViewController" is created, initialized withinitWithNibName:bundle message and the name of the nib file is passedas the parameter. The view controller is then push to the top of thestack with its animated property set to YES. At last, we clean upmemory by releasing the detail view controller. Run the application andnow you can select a row to see the detail view.
代码说明：程序运行，创建并初始化"DetailViewController"对象。通过initWithNibName:bundle方法传递窗口文件名称。视图控制器会被推向顶层，并设置动画转换为真。最后我们在内存中释放细节视图控制器。运行程序，你可以选择一行看到细节视图界面的效果。
Passing data
传递数据
Westill have to pass the selected country from the list to the detailview. 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 viewcontroller to another. The following code declares a property in"DetailViewController"
现在我们还需要从tableview中传递所选数据给细节视图。好的，让我们现在就开始来实现它。首先，在"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 {
;
;
;
}
//First three lines of DetailViewController.m
#import "DetailViewController.h"
@implementation DetailViewController
@synthesize selectedCountry;
Theproperty is synthesized at the top after the implementation begins. Nowwe can pass the selected country from the table view to the detailview. The tableView:didSelectRowAtIndexPath method looks like this
声明的特性将会在实体程序开始执行之前生效。现在我们能通过在table view中传递所选的国家给细节视图。tableView:didSelectRowAtIndexPath方法中的代码如下：
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
//Get the selected country
NSString *selectedCountry = ;
//Initialize the detail view controller and display it.
DetailViewController *dvController = [ initWithNibName:@"DetailView" bundle:];
dvController.selectedCountry = selectedCountry;
;
;
dvController = nil;
}
Wefirst get the selected country from the array, initialize the detailview controller, set the selected country to the property on the detailview controller and display it.
我们首先从列表中获得所选国家，初始化detail view controller，设置所选国家在detail view controller声明并显示
Setting the accessory view
设置附属视图
Runthe 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 itsdetail view. We can add a "accessory view" to the cell which will showup at the right end of the row. The accessory view can be set up intableView:cellForRowAtIndexPath method or intableView:accessoryTypeForRowWithIndexPath. We will use the latermethod to keep our code simple. This is how the source code changes
运行程序，现在我们能在table view中选择一行。尽管如此，用户显然不会很明白可以选择tableview中的一行数据并查看细节视图。我们可以在table cell的右侧添加附属视图"accessoryview"。附属视图设置的方法为tableView:cellForRowAtIndexPath或者用tableView:accessoryTypeForRowWithIndexPath。我将使用后面的方法以便保持本例代码的简介性，最后的修改代码为：
//RootViewController.m
- (UITableViewCellAccessoryType)tableView:(UITableView *)tableView accessoryTypeForRowWithIndexPath:(NSIndexPath *)indexPath {
//return UITableViewCellAccessoryDetailDisclosureButton;
return UITableViewCellAccessoryDisclosureIndicator;
}
Theabove method returns an enum UITableViewCellAccessoryType and we canreturn four values: UITableViewCellAccessoryNone,UITableViewCellAccessoryDisclosureIndicator,UITableViewCellAccessoryDetailDisclosureButton, andUITableViewCellAccessoryCheckmark. You can test the code by returningone of the four values to see how the accessory view looks like. If youreturn "UITableViewCellAccessoryDetailDisclosureButton" clicking on thebutton will not do anything, since the cell is not selected but abutton is clicked. The SDK does provide a method which gets called whenthe accessory button is clicked and that is calledtableView:accessoryButtonTappedForRowWithIndexPath. In this method wecan call tableView:didSelectRowAtIndexPath which will load the detailview and this is how the code will look like
以上方法返回一个枚举类型UITableViewCellAccessoryType，可选值有四个：UITableViewCellAccessoryNone,UITableViewCellAccessoryDisclosureIndicator,UITableViewCellAccessoryDetailDisclosureButton,和UITableViewCellAccessoryCheckmark。你可以尝试不同的值，并注意tablecell样式的变化。如果返回"UITableViewCellAccessoryDetailDisclosureButton"，点击按钮将不会有任何变化，那是因为table cell不会被选择，当我们点击一个按钮时。当点击附属视图的按钮时，在SDK中提供了一个方法可以获得回调。该方法为tableView:accessoryButtonTappedForRowWithIndexPath。在这个方法中我们调用tableView:didSelectRowAtIndexPath方法，而加载细节视图。实现代码如下：
//RootViewController.m
- (void)tableView:(UITableView *)tableView accessoryButtonTappedForRowWithIndexPath:(NSIndexPath *)indexPath {
;
}
Thelast thing we need to do in detail view controller, is to display theselected country on the label. Do it in viewDidLoad method and this ishow the code looks like
// DetailViewController.m
- (void)viewDidLoad {
;
//Display the selected country.
lblText.text = selectedCountry;
//Set the title of the navigation bar
self.navigationItem.title = @"Selected Country";
}
Themethod "viewDidLoad" gets called when the view is loaded, where we setthe selected country by setting the text property of the label"lblText". The title of the navigation bar is also set in the samemethod.
viewDidLoad方法会在视图加载完成后调用，在这时我们设置所选国家并设置为"lblText"标签的属性。
Conclusion
结论
Wehave seen how to display a list of items in a table view, how to selecta row and display the detail view, and in the next tutorial we willlook at how to search the list of items in a table view. I hope youfound this tutorial helpful and if you have any questions, please sendme 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源码下载：
页:
[1]