概述


随着iPad的发布，我想很多人开始绞尽脑汁试图在新一轮的“淘金热”中抢占一块市场。iCodeBlog将推出一系列iPad教程帮助大家。


由于iPad使用iPhone同样的SDK，所有代码看上去完全一样。实际上，看看最新和修改了的API类，你就会发现大部分是有关用户界面的。这是一个好消息，因为我们都对iPhone编程有了一定的经验。


此教程被称为“Hello World”，实际上它远远不止这些。首先，我假定你们已经具有iPhone/Objective-C的编程经验。


我们要做什么


今天的教程，我将展示怎样创建一个iPad项目，使用UISplitViewController显示两个单独的窗格。我还将涉及一些新的设计/UI模式并介绍iPad编程。


此项目将基于使用UITableView显示水果列表教程 。我们将扩展其中一个范例，如下所示：



本文将使用UISplitViewController在左窗格显示一个UITableView，而在右窗格显示一个具有UIImageView子视窗的UIView。实际上创建这样一个项目非常简单，因为项目模板提供了大部分初始代码。

开始


  1. 从http://developer.apple.com/iphone/下载SDK 3.2。iPad模拟器包括在了SDK中。
  2. 下载本项目所需的资源文件 iPadHelloWorldResources.zip 。

创建项目


创建iPad项目与iPhone项目没有分别。打开XCode并选择File->New Project，你将发现有一个新的Split View-Based Application选项。选择它并命名为iPadHelloWorld。

这将创建一个UITableView位于左窗格，UIView位于右窗格的应用程序。它还甚至提供了一些示例数据。下列文件将被加入到项目中。



各文件的简单介绍如下：


  • iPadHelloWorldAppDelegate – 类似于 app delegate。在 application:didFinishLaunchingWithOptions 方法中，创建了具有MasterViewController和 DetailViewController的UISplitViewController。
  • MasterViewController – UITableViewController。它将处理左方视窗。
  • DetailViewController – 它将处理右方视窗。当用户选择左方列表中不同行时，我们将在此视窗中做相应更新。


按“Build and Run”测试一下。


注意：当你运行此程序时，你只能看到主视窗，这是因为模拟器运行于垂直模式。选取 “Hardware -> Rotate Left/Right”将使模拟器旋转。你还可以通过按下键盘上的CMD->Arrow Left/Right 键获得同样效果。


导入项目图像


下一步你需要导入项目需要的图像。将下载的资源文件解压，并拖入称为“Resources-iPad”的文件夹下。

XCode 将提示你复制这些文件，选择“Yes”并按下OK。



请包括四个图像文件以及fruits.plist。

显示水果列表


显示水果列表与显示其他UITableView中的数据并无区别。打开MasterViewController.h 加入水果数组定义。

#import   

@class DetailViewController;   

@interface MasterViewController : UITableViewController {
    DetailViewController *detailViewController;
    NSArray * fruits;
} 

@property (nonatomic, retain) IBOutlet DetailViewController *detailViewController;
@property (nonatomic, retain) NSMutableArray *fruits;  

@end

如你所见，这里没有任何新的东西。我们只是简单的定义了一个水果数组，并为其创建属性。


我们将从plist中加载水果数据。当你不想使用数据库时，从plist文件加载数据是一种方便而快捷的方法。


打开MasterViewController.m 在 viewDidLoad 方法中加入下列代码：

- (void)viewDidLoad {
    [super viewDidLoad];
    self.fruits = [[NSArray arrayWithContentsOfFile:[[NSBundle mainBundle]
        pathForResource:@"fruits" ofType:@"plist"]] retain];
}

fruits.plist文件实际上是一个写入文件的数组。如果你打开它，你就会发现它十分类似于XML。在为数组赋值后，我们要实现UITableView delegate 和 datasource 方法以显示列表。


UITableView datasource 方法

- (NSInteger)tableView:(UITableView *)aTableView
    numberOfRowsInSection:(NSInteger)section {
    // Return the number of rows in the section.
    return [fruits count];
}   
- (UITableViewCell *)tableView:(UITableView *)tableView
    cellForRowAtIndexPath:(NSIndexPath *)indexPath {  
    // Dequeue or create a cell of the appropriate type.
    static NSString *CellIdentifier = @"CellIdentifier";  
    UITableViewCell *cell =
        [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault
           reuseIdentifier:CellIdentifier] autorelease];
        cell.accessoryType = UITableViewCellAccessoryNone;
    }   // Get the object to display and set the value in the cell.
    cell.textLabel.text = [self.fruits objectAtIndex:indexPath.row];
    return cell;
}

没有什么特殊的东西… 我们首先告诉tableview 我们需要 fruits.count (等于4) 行。然后在各tableview单元中显示水果的名称。


UITableView delegate 方法


- (void)tableView:(UITableView *)aTableView
    didSelectRowAtIndexPath:(NSIndexPath *)indexPath {  
    /* When a row is selected, set the detail view controller's detail item
       to the item associated with the selected row.
     */
    detailViewController.detailItem = [self.fruits objectAtIndex: indexPath.row];
}

这里我们简单地将detailViewController 的detailItem 属性设置为所需水果。我们将在随后介绍一下属性，现在我们需要知道的是它的类型是 id。

现在，按下“Build and Run”运行一下。你应该看到如下画面：



它列出了水果的列表，但当你进行选择时，没有任何变化（当然detailView的标题会改变）。


下面，我们需要实现显示相应水果图像的代码。


显示水果


显示所选水果实际上非常简单。首先我们要在detailView中加入一个UIImageView。打开DetailViewController.h 加入下列代码：

@interface DetailViewController : UIViewController  {  
    UIPopoverController *popoverController;
    UINavigationBar *navigationBar;  
    id detailItem;  
    IBOutlet UIImageView * fruitImageView;
}   

@property (nonatomic, retain) UIPopoverController *popoverController;
@property (nonatomic, retain) IBOutlet UINavigationBar *navigationBar; 
@property (nonatomic, retain) id detailItem;  
@property (nonatomic, retain) IBOutlet UIImageView * fruitImageView;   

@end

除了添加IBOutlet UIImageView外的所有代码都是由项目模板生成的。添加此行代码后，在Interface Builder中打开DetailView.xib。


在视窗中加入一个尺寸为500×500的UIImageView。



现在，选择File’s Owner 打开连接观察器 (Tools -> connection inspector)。将imageView IBOutlet拖动到UIImageView 然后释放，将UIImageView 连接到你的outlet。


注意：如果你不希望图像变形，请将图像视窗的内容模式（content mode）设置为(在属性观察器attributes inspector中) Aspect Fit。


连接了imageview后，需要编写代码进行图像更新。关闭Interface Builder打开 DetailViewController.m 在setDetailItem 方法中加入下列代码：

- (void)setDetailItem:(id)newDetailItem {
    if (detailItem != newDetailItem) {
        [detailItem release];
        detailItem = [newDetailItem retain];   // Update the view.
        navigationBar.topItem.title = detailItem;
	NSString * imageName = [NSString stringWithFormat:@"%@.png",detailItem];
	[self.fruitImageView setImage:[UIImage imageNamed:imageName]];
    }   if (popoverController != nil) {
        [popoverController dismissPopoverAnimated:YES];
    }
}

大部分代码是由项目模板生成的，所以我不过多讨论。我添加的代码是根据水果的名称加载图像并随后设置其image属性。运行！下面是最终产品：


SplitViewController的另一个很酷的特性


当出于垂直模式时，SplitViewController提供另一个称为UIPopOverView的新的UI元素。我们以后将就此提供教程。下面我仅给出示范图：



但设备处于垂直位置时，它将自动旋转视图并在“Master List”按钮按下时提供UIPopoverView。（另外，此按钮本身也是可以定制的）。


源码下载 iPadHelloWorld.zip.


原文见：iPad Programming Tutorial – Hello World++