The tenth chapter is about navigation controller and scene conversion

Now you can get ready to run app. Once you start, select any restaurant, and then app will move to the detail interface. Now, the detail interface controller only shows a blank interface, but the good news is that you have created a navigation interface.

Without writing any line of code, you add a navigation controller to your app. It’s incredible, isn’t it? I think you’ve got a problem,

1, how can I pass the restaurant information to “Detail View Controller” from “Restaurant Table View Controller”?

2, how do I display the selected restaurant photos in the detail controller?

We analyze them one by one

Two improvements before moving on

When you connect the cell and the detail view control, an extended indicator appears on the cell (disclosure indicator) V pattern that can click on the gray cell and when the cell is selected will display a detail view.

The tenth chapter is about navigation controller and scene conversion

Not until 2007. 7 years after the initial release of iPhone, users began to get used to the user interface of iPhone. For me, it’s not always necessary to use extended displays. Sometimes you want to close the display so that the interface looks cleaner.

In the interface constructor, select prototype cell. You can see an option called Accessory in the properties viewer. Change its value from “None”.

When you run app and select a cell, APP automatically navigates to a blank screen and displays an action selection list. We don’t need action selection lists. Later, we’ll add a function of the same function in the detail view. So remove the tableView from the RestaurantTableViewController.swift (_: didSelectRowAtIndexPath:) method.

Create a new class

Ok, let’s go back to the detail view. Updates the selected restaurant’s image in the view controller. The view controller is now associated with the UIViewController class by default.

In fact, the UIViewController class only provides the most basic model for view associations. There are no variables for storing restaurant pictures. Therefore, we extend and create our own class instead of UIViewController.

The tenth chapter is about navigation controller and scene conversion

In the project navigation bar, right-click the FoodPin folder, and then select NewFile…”. Select “Cocoa Touch Class” as the class template. Take a class name DetailViewController and set it to the subclass of UIViewController. Click Next and save it in the project folder.

As we know, we set the DetailViewController class to the view controller (View Controller). In the interface constructor, select detail view controller. In the identification viewer (Identity Inspector), modify the custom class (custom, class) to DeatailViewController.

The tenth chapter is about navigation controller and scene conversion

Adding variables to custom classes

In the custom class, we have two things to do:

Add a variable restaurantImage for data transfer: when a user chooses a restaurant in the table, you need to be able to pass the photo name to the detail view.

Add an output variable to the picture view restaurantImageView: then we can update it with the selected restaurant picture.

Well, add the following code in DetailViewController.swift:

The tenth chapter is about navigation controller and scene conversion

Next, we need to associate the photo view with the restaurantImageView in the storyboard. Right click the UIImageView object. Drag from the Reference Outlets option to Detail View Controller. Release the mouse button and select the restaurantImageView variable.

The tenth chapter is about navigation controller and scene conversion

You now associate the photo object with the output variable in the storyboard. Any change in the variables can be seen feedback. But there’s one more thing we haven’t done. We would like the photo view to show the selected restaurant photos. In the viewDidLoad method, add the following code.

The tenth chapter is about navigation controller and scene conversion

The viewDidLoad method is called when the view is loaded into memory. You can add custom views to this method. On top of this, we simply set the photo view of the photo view to a restaurant photo.

Try compiling and running your App. Well, the detail view is still blank after choosing the restaurant. We still miss one thing. We did not write any code from the table view controller to pass the picture of the restaurant to the details controller. Therefore, the restaurantImage variable is not assigned.

Passing data using scenario transformation

Now comes the central part of this chapter: using scene transitions to pass data between view controllers. The scene transformation describes the transfer of views between controllers and contains the view controllers involved in the transfer. When the scene transfer is triggered, the source view controller is notified by calling the prepareForSegue method (in this case, RestaurantTableViewController) before the visible transfer is sent. The default prepareForSegue method is null. By overloading the method, you can pass any of the related books to the new controller, in this case, DetailViewController.

IOS 8 programming portal – use swift language directory:

The tenth chapter is about navigation controller and scene conversion

现在,你可以准备运行app了。一旦启动,选择任何一个餐馆然后app将会转移到细节界面。现在,细节界面控制器只显示了一个空白界面,但是好消息是你已经创建了一个导航界面了。

没有编写任何一行代码,你就在你的app中增加了一个导航控制器。很不可思议吧?我想你脑子了肯定有一系列问题吧:

1、我如何从“Restaurant Table View Controller”中把餐馆信息传递给“Detail View Controller”?

2、我如何在细节控制器中将选中的餐馆照片显示出来?

我们一个一个分析

继续前进之前的两点改进

当你将单元格和细节视图控制连接起来时,单元格上出现一个扩展指示器(disclosure indicator)灰色的V型图案暗示单元格可以点击而且当单元格被选中时将会显示一个细节视图。

The tenth chapter is about navigation controller and scene conversion

在2007年之前不是这样的。在最初的iPhone发布之后7年,用户开始习惯iPhone的用户界面。对我来说并不总是需要使用扩展显示器。有时候你想关闭该显示,好让界面看起来更干净。

在界面构造器中,选择prototype cell。你可以在属性查看器中看到一个名叫“Accessory”的选项。将它的值从修改为None。

当你运行app并且选择一个单元格时app自动导航到一个空白屏幕并且显示一个动作选择列表。我们不需要动作选择列表。后面我们将在细节视图中添加一个相同功能的函数。所以从RestaurantTableViewController.swift中删除tableView(_:didSelectRowAtIndexPath:)方法。

创建一个新的类

Ok,让我们回到细节视图。在视图控制器中将更新选中的餐馆的图片。现在视图控制器默认和UIViewController 类关联。

事实上UIViewController类只提供视图关联的最基础模型。它里面没有变量用于存储餐馆图片。因此,我们扩展并且创建我们自己的类,替代UIViewController.

The tenth chapter is about navigation controller and scene conversion

在项目导航栏中,右击“FoodPin”文件夹然后选择“NewFile…”。选择“Cocoa Touch Class”作为类模板。取一个类名DetailViewController并且将其设置为UIViewController的子类。点击“Next”并且在工程文件夹中保存。

正如我们知道的,我们将DetailViewController类设置为视图控制器(View Controller)。在界面构造器中,选择detail view controller。在标识查看器中(Identity Inspector)修改定制类(custom class)为DeatailViewController。

The tenth chapter is about navigation controller and scene conversion

为定制类增加变量

在定制类中我们有两件事要做:

增加一个变量restaurantImage用于数据传递:当用户在表格中选择餐馆时,需要能够把照片名传递给细节视图。

为图片视图增加一个输出变量restaurantImageView:随后我们可以用选中的餐馆图片更新它。

好了,在DetailViewController.swift中添加下面的代码:

The tenth chapter is about navigation controller and scene conversion

下一步,我们需要在故事板中将照片视图和restaurantImageView关联起来。右击UIImageView对象。从Reference Outlets 选项中拖动到Detail View Controller。释放鼠标按钮,选择restaurantImageView变量。

The tenth chapter is about navigation controller and scene conversion

现在你已经在故事板中将照片对象和输出变量关联起来了。任何在变量上的变化都可以看到反馈。但是我们还有一件事情没有做。我们希望照片视图显示选中的餐馆照片。在viewDidLoad方法中,增加下面的代码。

The tenth chapter is about navigation controller and scene conversion

当视图被加载到内存中时viewDidLoad方法被调用。你可以在这个方法里面添加对视图的定制。在上面,我们简单的将照片视图的显示照片设置为餐馆照片。

试着编译并且运行你的App。哦,细节视图在选择了餐馆之后仍然是一片空白。我们仍然遗漏了一件事情。我们没有编写任何从表格视图控制器传递餐馆图片到细节控制器的代码。因此,restaurantImage变量并没有被赋值。

使用场景转换传递数据

现在终于来到了本章最核心的部分:使用场景转换在视图控制器之间传递数据。场景转换描述视图控制器之间的转移,并且包含在转移中涉及的视图控制器。当场景转移被触发时,在可见的转移发送前,故事板运行时通过调用prepareForSegue方法通知源视图控制器(在本例中时RestaurantTableViewController)。默认的prepareForSegue方法是空方法。通过重载该方法,你可以将任何相关的书籍传递给新的控制器,在本例中时DetailViewController。

场景转移可以被多个源触发。随着你的App逐渐复杂,很可能在视图控制器之间不止一种场景转移。因此,最好的方法是在故事板中为每一个不同的场景转移提供一个不同的标识符。标识符是一串字符串,该字符串被应用用于区分不同的场景转移。

The tenth chapter is about navigation controller and scene conversion

在属性查看器中选择场景转移(segue)然后可以为它取个标识符。在本例中,我们将场景转移命名为showRestaurantDetail。

场景转移配置完毕之后,在RestaurantTableViewController.swift中添加下面的代码覆盖默认的prepareForSegue方法。

The tenth chapter is about navigation controller and scene conversion

代码中的第一行用于检测场景转移的标识符。这段代码只有在场景转移是showRestaurantDetail时才执行。在代码块中,我们首先再次获取被选中的行。Index path 对象返回的是一个可选类型(optional)。在swift中,你可以同时使用if 和let处理可选类型。这里的条件语句块只有在indexPath存在时才执行。

一个场景转移对象同时包含源和目的视图控制器。你可以使用segue.destinationViewController再次获取目的控制器。在这个例子中,目的控制器是DetailViewController。最后我们将餐馆名传递给目的控制器。

准备测试

现在,可以准备测试app了。点击运行按钮编译并运行app。这次,你的app应该可以按照预期的运行了。试着选择餐馆,被选中的餐馆细节将会展示出来。

你的练习

在细节展示界面中显示更多的餐馆细节是不是会更好。试着卫显示的餐馆增加名字,类型,地址等标签。如果你理解了如何传递数据,增加这些功能将不会太难。

你可以下线本章Demo 作为参考 http://pan.baidu.com/s/1i4Vu0U5