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