your Second iOS App（2）—Getting Started

Next

Previous

Getting Started

开始

To create the iOS app in this tutorial, you need Xcode 4.5 or later and the iOS SDK for iOS 6.0 or later. When you install Xcode on your Mac, you also get the iOS SDK, which includes the programming interfaces of the iOS platform.

想要创建本教程的iOS app，你需要Xcode 4.5或以后的版本并且iOS SDK 支持iOS 6.0 及以后版本。当你在你的Mac上安装Xcode的时候，你也得到了iOS SDK，它包含了iOS 平台的编程接口。

In this chapter, you create a new Xcode project, build and run the default app that the project creates, and learn how the storyboard defines the user interface and some of the app’s behavior.

在本章中，你创建一个新的Xcode工程，构建并运行工程创建的默认app，并且学习故事板如何定义用户界面以及一些app的行为。

Create a New Project

创建新工程

The app in this tutorial displays a list of bird sightings. When users select a specific sighting, they see some details about it on a new screen. Users can also add to the list by entering details about new sightings.

本教程中的app通过鸟瞰的方式显示了一个列表。当用户选择一个特定的项时，他们将在一个新屏幕中看到关于它的细节。用户还能通过输入向列表添加新的项。

Transitioning from a master list of items to a more detailed view of one item is part of a common design pattern in iOS apps. Many iOS apps allow users to drill down into a hierarchy of data by navigating through a series of progressively more detailed screens. For example, Mail allows users to drill down from a master list of accounts through progressively more detailed screens until they reveal a specific message.

从主列表过渡到一个项的详细视图是iOS apps常见的一种设计模式。很多iOS apps 允许用户通过导航来逐步显示一系列更详细的屏幕来挖掘数据的层次。举个例子，邮件app 允许用户从主列表逐步显示细节屏幕向下挖掘直到他们找到特定的信息。

Xcode provides the Master-Detail template to make it easy to build an app that allows users to navigate through a data hierarchy.

Xcode 提供了主-从模板来方便的构建允许用户浏览数据层次的app。

Begin developing the BirdWatching app by creating a new Xcode project for an iOS app that’s based on the Master-Detail template.

通过创建一个基于主-从模板的新的iOS app Xcode 工程，开始开发BirdWatching app。

To create a new project for the BirdWatching app

为BirdWatching app创建一个新的工程

1.Open Xcode and choose File > New > Project.

打开Xcode并选择File > New > Project。

2.In the iOS section at the left side of the dialog, select Application.

在对话框的左侧的iOS 区内，选择Application。

3.In the main area of the dialog, select Master-Detail Application and then click Next.

在对话框主区域，选择Master-Detail Application 然后点击Next。

A new dialog appears that prompts you to name your app and choose additional options for your project.

显示一个新的对话框，提示你命名你的app并为你的工程选择其他选项。

4.In the dialog fill in the following fields with these values:

按照下面的内容填写对话框。

Product NameBirdWatching

Organization Name Your company’s name. If you don’t have a company name, you can use Self.

你的公司的名字。如果你没有公司的名字，你也能使用Self。

Company Identifier The prefix of your company’s bundle identifier. If you don’t have a company identifier, you can use edu.self.

你的公司标识符的前缀。如果没有，你也可以使用edu.self.

Class PrefixBirds

5.In the Devices pop-up menu, make sure that iPhone is chosen.

在Device弹出窗口，确保iPhone被选择。

6.Make sure that the Use Storyboards and Use Automatic Reference Counting options are selected and that the Use Core Data and the Include Unit Tests options are unselected.

确保Use Storyboard 和 Use Automatic Reference Counting选项被选中并且 Use Core Data 和 Include Unit Tests选项没有被选中

After you finish entering this information, the dialog should look similar to this:

在你完成输入这些信息后，对话框应如下所示：

7.Click Next.点击Next。

8.In the new dialog that appears, enter a location to save your project, make sure applySource Control option is unselected, and click Create.

在新出现的对话框中，输入你保存工程的地址，确保 applySource Control选项没有被选中，点击Create。

Xcode opens your new project in a window, which is called the workspace window. By default, the workspace window displays information about the BirdWatching target.

Xcode在窗口中打开你的新工程，它被称为工作空间窗口。在默认情况下，工作空间窗口显示关于BirdWatching 目标（target）的信息。

Build and Run the Default Project

构建并运行默认的工程

As with all template-based projects, you can build and run the new project before you make any changes. It’s a good idea to do this because it helps you understand the functionality that the template provides.

作为完全基于模板的工程，你能在你做出任何改变之前构建并运行新工程。这是个好主意，因为它帮助你理解模板提供的功能。

To build the default project and run it in iOS Simulator

构建默认工程并在iOS模拟器上运行它

1.Make sure that the Scheme pop-up menu in the Xcode toolbar displays BirdWatching > iPhone 6.0 Simulator.

确保在Xcode工具栏中的Scheme弹出菜单显示BirdWatching > iPhone 6.0 Simulator。

If the menu doesn’t display this choice, open it and choose iPhone 6.0 Simulator.

如果菜单没有显示这个选项，打开它并选择 iPhone 6.0 Simulator.

2.Click the Run button in the toolbar (or choose Product > Run).

在工具栏中点击Run按钮（或选择 Product > Run）。

If Xcode asks you whether you want to enable developer mode, you can click Enable to let Xcode perform certain debugging tasks without requiring your password every time. For this tutorial, it doesn’t matter whether you enable developer mode or not.

如果Xcode问你是否启用开发者模式，你选择启用，以便Xcode在调试的时候不会每次都要求你输入密码。本教程中，不关心你是否启用了开发者模式。
Xcode displays messages about the build process in the activity viewer, which is in the middle of the toolbar.

Xcode在活动视图中显示关于构建过程的信息，它在工具栏的中间位置。

After Xcode finishes building your project, iOS Simulator should start automatically.

在Xcode完成构建你的工程之后，iOS模拟器应该自动开启。

When you created the project, because you specified an iPhone product (as opposed to an iPad product), Simulator displays a window that looks like an iPhone. On the simulated iPhone screen, Simulator opens the default app, which should look like this:

当你创建工程，因为你指定的是一个iPhone 产品（而不是iPad产品），模拟器显示的是一个类似于iPhone的窗口。在模拟器品目上，模拟器打开默认app，看上去如下所示：

There is already quite a bit of functionality in the default app. For example, the navigation bar includes an Add button (+) and an Edit button that you can use to add and remove items in the master list.

在默认的app 中已经有了相当多的功能。例如，导航条包含了（+）按钮和Edit按钮，你能使用他们添加以及移除主列表中的项。

Note: In this tutorial, you won’t be using the Edit button, and you’ll create the Add button in a way that’s different from the way the template creates it. Although you won’t use the template-provided code that’s associated with these buttons in later steps, leave the buttons in place for now so that you can test the default app.

注意：在本教程中，你将不适用Edit按钮，你将通过不同于模板创建的方式创建Add按钮。尽管你在之后的步骤中不使用模板提供的与这些按钮相关的代码，但现在你让按钮保持原样以便你能测试默认app。

In Simulator, click the Add button (+) in the right end of the navigation bar to add an item to the list (by default, the item is the current data and time). After you add an item, select it to reveal the detail screen. The default detail screen should look like this:

在模拟器中，点击导航条最右侧的（+）按钮来为列表（默认情况下，项是当前的数据和时间）添加项。在你添加项后，选择它来揭示细节屏幕。默认细节屏幕的样子将如下显示：

As the detail screen is revealed, notice that a back button appears in the left end of the navigation bar, titled with the title of the previous screen (in this case, Master). The back button is provided automatically by the navigation controller that manages the master-detail hierarchy. Click the back button to return to the master list screen.

如细节屏幕被揭示的所示，注意在导航条最左侧出现返回按钮，标题为前一个屏幕的标题（本例中为Master）。返回按钮通过用来管理主-从层级的导航控制器自动提供。点击返回按钮来返回到主列表屏幕。

In the next section, you use the storyboard to represent the app’s user interface and to implement much of its behavior. For now, quit iOS Simulator.

在下一个部分，你将使用故事板来展示app的用户界面以及实现它的大部分功能。现在，离开iOS模拟器。

Examine the Storyboard and Its Scene

检查故事板及其场景

A storyboard represents the screens in an app and the transitions between them. The storyboard in the BirdWatching app contains just a few screens, but a more complex app might have multiple storyboards, each of which represents a different subset of its screens.

故事板代表app的场景以及它们之间的转换。BirdWatching app中的故事板包含很少场景，但复杂的app或许有多个故事板，每个故事板代表一个不同的屏幕子集。

Click MainStoryboard.storyboard in the Xcode project navigator to open the BirdWatching app’s storyboard on the canvas. The project navigator should already be open in the left side of the Xcode window. If it’s not, click the button that looks like this:

点击Xcode工程导航器中的 MainStoryboard.storyboard 来在画布中打开BirdWatching app的故事板。工程导航器应该已经在Xcode 窗口的左侧被打开。如果没有，点击按钮来打开。

You might have to adjust the zoom level to see all three screens on the canvas without scrolling.

你或许必须调整缩放级别以便在不滚动画布的情况下看到所有的三个屏幕。

To adjust the canvas zoom level

调整画布的缩放级别

Do one of the following:

采用下面方法中的一个：

Click the zoom controls in the lower-right corner of the canvas.

点击画布的右下角的缩放控制。

The zoom controls look like this:

缩放控制看上去像：
The middle zoom control acts as a toggle that switches between the most recent zoom level and 100%.

在缩放控制的中间的按钮充当开关的作用，用来切换最近的缩放级别和100%缩放比例。

Choose Editor > Canvas > Zoom, and then choose the appropriate zoom command.

选择Editor > Canvas > Zoom，然后选择适当的缩放命令。

Double-click the canvas.

双击画布。

A double-click on the canvas acts as a toggle that switches between 100% and 50% zoom levels.

在画布上双击充当切换100%和50%缩放级别的开关。

Zoom in on the canvas so that you see all three screens in the project. You should see something like this:

缩小画布以便你能看见工程的全部三个屏幕。你应该看到如下所示的样子：

The default storyboard in the Master-Detail Application template contains three scenes and two segues.

在Master-Detail Application 模板中的默认故事板包含三个场景和两个连接。

A scene represents an onscreen content area that is managed by a view controller. A view controller is an object that manages a set of views that are responsible for drawing content onscreen. (In the context of a storyboard, scene and view controller are synonymous terms.) The leftmost scene in the default storyboard represents a navigation controller. A navigation controller is called a container view controller because, in addition to its views, it also manages a set of other view controllers. For example, the navigation controller in the default BirdWatching app manages the master and detail view controllers, in addition to the navigation bar and the back button that you saw when you ran the app.

场景代表了一个由一个视图控制器管理的屏幕上内容的区域。视图控制器是管理一组视图的对象，这些视图负责在屏幕上绘制内容。（在故事板的上下文中，场景和视图控制器是同义术语。）在默认故事板的最左侧的场景代表一个导航控制器。导航控制器被称为容器视图控制器，因为除了它自身的视图，它还管理一些列其他视图控制器。例如，默认的BirdWatching app的导航控制器管理主和从两个视图控制器，除此之外，当你运行app的时候你还看到了导航条和返回按钮。

A segue represents the transition from one scene (called the source) to the next scene (called the destination). For example, in the default project, the master scene is the source and the detail scene is the destination. When you tested the default app, you triggered a segue from the source to the destination when you selected the Detail item in the master list. In this case, the segue is a push segue, which means that the destination scene slides over the source scene from right to left. On the canvas, a push segue looks like this:

连接（segue）代表了从一个场景（称为源）到下一个场景（称为目标）的转换。例如，在默认的工程中，master场景是源而细节场景是目标。当你测试默认app的时候，当你在主列表中选择细节项时，你触发了从源到目标的连接。在本例中，连接是推入连接（push segue），意思是目标场景从源场景的右侧滑入，滑到左侧。在画布上，推入连接看上去像：

When you create a segue between two scenes, you have the opportunity to customize the setup of the destination scene and pass data to it (you do this in “Send Data to the Detail Scene”). You learn more about how to send data from a destination scene back to its source in “Get the User’s Input.”

当你创建两个场景之间的连接的时候，你有机会定制目标场景并向它传递数据（你将在“Send Data to the Detail Scene”中做到这一点。）你将在 “Get the User’s Input.”中学到更多关于如何从目标场景发送数据返回到它的源。

A relationship is a type of connection between scenes. On the canvas, a relationship looks similar to a segue, except that its icon looks like this:

关系是场景之间连接的类型。在画布中，关系看上去与连接类似，除了它的图标看上去像：

In the default storyboard, there is a relationship between the navigation controller and the master scene. In this case, the relationship represents the containment of the master scene by the navigation controller. When the default app runs, the navigation controller automatically loads the master scene and displays the navigation bar at the top of the screen.

在默认的故事板中，在导航控制器和主场景之间有关系。在这种情况下，关系代表导航控制器包含主场景。当默认app运行的时候，导航控制器自动加载主场景并在场景的顶部显示导航栏。

The canvas displays a graphical representation of each scene, its contents, and its connections, but you can also get a hierarchical listing of this information in the document outline. The document outline pane appears between the project navigator and the canvas. If you don’t see it, click the Document Outline button in the lower-left corner of the canvas to reveal it. The Document Outline button looks like this:

画布上用图解表示显示每个场景、它的内容以及它的连接，但你也能在文档大纲中得到这些信息的分级列表。文档大纲栏显示在工程导航器和画布之间。如果你看不到它，点击画布左下角的Document Outline按钮来显示它。文档大纲按钮看起来像：

Tip: Sometimes it’s easier to select an element in the document outline than it is to select it on the canvas.

提示：有时候，在文档大纲中选择元素要比在画布中选择容易的多。

To examine the contents of scenes in the document outline

在文档大纲中检查场景的内容

1.If necessary, resize the document outline pane so that you can read the names of the elements.

如果有必要，调整文档大纲栏的尺寸以便你能读取元素的名字。

2.Click the disclosure triangle next to each element in a view controller section.

在视图控制器部分点击每个元素旁的层三角。

For example, when you reveal the hierarchy of elements in the Birds Master View Controller section, you see something like this:

例如，当你揭示Birds Master视图控制器部分中的元素的层次结构的时候，你会看到类似如下的内容：

Recap

回顾

In this chapter, you used Xcode to create a new iOS app project based on the Master-Detail Application template. When you ran the default app, you found that it behaved much like other navigation-based iOS apps on iPhone, such as Mail and Contacts.

在本章中，你使用Xcode创建了一个基于Master-Detail Application模板的新的iOS app工程。当你运行这个默认的app的时候，你发现它的行为就像其他在iPhone上基于导航的iOS app一样，例如邮件和联系人。

When you opened the template-provided storyboard on the Xcode canvas, you learned a couple of ways to examine the storyboard and its contents. You also learned about the components of the storyboard and the parts of the app that they represent.

当你在Xcode画布中打开模板提供的故事板时，你学习了几种检查故事板及其内容的方法。你也学习了关于故事板的组件以及这些组件在app中做代表的部分。

Next

Previous

Copyright 2012 Apple Inc. All Rights Reserved. Terms of Use | Privacy Policy | Updated: 2012-10-16