使用視圖控制器(View Controllers)
本文的學習目標
- 理解視圖控制器的生命周期及其何時回調方法，如viewDidLoad、viewWillAppear和viewDidAppear
- 在各視圖控制器之間傳遞數據
- 關閉一個視圖控制器
- 使用手勢識別作為產生事件的一個附加層級
- 基于視圖和控件(UIView/UIControl)類的繼承關系預期對象的行為
- 使用資產目錄(asset catalog)添加圖像資產到項目中
理解視圖控制器的生命周期
目前FoodTracker項目有一個單一頁面Scene，其界面由一個單一視圖控制器管理。當如果創建更復雜的應用時，會處理更多的頁面，當視圖移動到屏前和屏后時管理這些視圖的加載和卸載。
UIViewController類(和其子類)的對象擁有一組管理視圖繼承關系的方法，當一個視圖控制器在不同狀態之間切換時，iOS在合適的時機自動調用這些方法。當創建一個視圖控制器的子類(subclass)時，子類繼承了父類(UIViewController)的方法，允許在每個方法中加入定制的行為。
UIViewController類的方法如下：
－ viewDidLoad()，當視圖控制器的內容視圖(content view，位于視圖層級的最頂層)被創建和從storyboard加載時，本方法會被調用，用于建立初始的設置。
－ viewWillAppear()，用于當視圖變為可見之前的任何用戶操作由于視圖的可見性可以被其他視圖顯現或遮擋，本方法總會在內容視圖顯示在前屏之前立即被調用。
－ viewDidAppear()，用于一旦視圖可見的任何用戶操作，如取回數據或者顯示一個動畫。由于視圖的可見性可以被其他視圖顯現或遮擋，本方法總會在內容視圖顯示在前屏后立即被調用。
增加一個菜品照片
增加一個圖像視圖(image view)到頁面中
- 打開主storyboard界面資源文件；
- 在對象庫中檢索image view；
- 找到圖像視圖將其拖拽到頁面中，放置在堆棧視圖(stack view)中按鈕的下面；
- 在圖像視圖選中狀態，設置尺寸如圖；
- 設置Intrinsic Size字段為Placeholder，設置寬度Width和高度Height為320；
- 點擊畫布(canvas)右下方Pin菜單按鈕；
- 添加1:1外觀比例(aspect ratio)比例約束;
- 選中圖像視圖時，打開屬性編輯器，在Interaction字段設置允許用戶交互(User Interaction Enable)，這樣圖像視圖可以接收手勢事件。
顯示缺省照片
當用戶可以與圖像視圖交互來選擇一個照片時需要得到指示，增加一個缺省的占位圖像通知用戶可以選擇一個照片。
增加一個圖像到項目中
- 在項目導航欄找到Assets.xcassets，查看資產目錄(asset catalog)；
- 點擊左下角的“＋”按鈕，選擇“New Image Set”；
- 雙擊圖像集合名，改名為defaultPhoto；
- 在電腦中找到想要添加的圖像；
- 將圖像拖拽到圖像集合的2x(對應于iPhone6模擬器的顯示分辨率)空位處。
在圖像視圖中顯示一個缺省的圖像
- 打開storyboard界面文件，選中圖像視圖控件；
- 打開屬性編輯器，在標注“Image”的字段選擇defaultPhoto為缺省圖像。
連接圖像視圖控件到代碼中
現在需要實現必要的功能，在運行時改變圖像視圖的圖像。首先需要連接圖像視圖到代碼中。
連接圖像視圖到ViewController.swift文件的代碼中
- 點擊Xcode工具條上的助手按鈕，打開助手編輯器；
- 在storyboard上選中圖像視圖；
- 在按下Control鍵同時拖拽圖像視圖到代碼編輯區；
- 在提示對話框中，Name填寫為photoImageView；
- 點擊“Connect”按鈕。
Xcode增加以下代碼：@IBOutlet weak var photoImageView: UIImageView!
創建手勢識別器
圖像視圖不是控件(cotrol)不能設計成控件響應于輸入例如一個按鈕的方式。因此不能簡單創建一個動作方法，當用戶點擊一個圖像視圖來觸發這個動作方法。不過可以通過給圖像視圖增加一個手勢識別器的方式實現同樣功能。圖像識別器(gesture recognizers)是綁定到一個視圖上的對象，允許視圖像一個控件一樣響應于動作事件，圖像識別器分辨觸碰行為，決定是否對應于特定的手勢，例如：一個滑動、縮放、或旋轉等。
綁定一個點擊手勢識別器(UITapGestureRecognizer)到圖像視圖，識別用戶點擊圖像視圖的手勢。
增加一個點擊手勢識別器到圖像視圖
- 打開對象庫(Object Library)，檢索“tap gesture”；
- 找到“Tap Gesture Recognizer”對象，拖拽其到頁面中的圖像視圖上。
連接手勢識別器對象到代碼中
連接手勢識別器到ViewController.swift文件代碼中
- 按住Control鍵拖拽手勢識別器到代碼編輯區中；
- 在提示對話框中選擇Connection方式為“Action”；
- 在Name字段輸入selectImageFromPhotoLibrary；
- 在type字段選擇“UITapGestureRecognizer”；
- 點擊“Connect”按鈕。
Xcode增加代碼如下。@IBAction func selectImageFromPhotoLibrary(sender: UITapGestureRecognizer) { }
創建圖像揀取器(Image Picker)用于響應用戶的點擊
用戶點擊圖像視圖，能夠從一組照片中選擇一個照片。UIImagePickerController類內建了相關的各種行為，管理一個界面用于拍照和選擇保存的圖像，需要使用圖像揀取器代理來使用圖像揀取控制器，該代理的協議名為“UIImagePickerControllerDelegate”。
ViewController類要遵從UIImagePickerControllerDelegate協議，同時還要遵從UINavigationControllerDelegate協議(實現一些導航視圖切換)
遵從UIImagePickerControllerDelegate和UINavigationControllerDelegate協議
在項目導航欄選擇ViewController.swift文件
-
找到ViewController類定義行
class ViewController: UIViewController, UITextFieldDelegate { -
使用”,”添加UIImagePickerControllerDelegate和UINavigationControllerDelegate
class ViewController: UIViewController, UITextFieldDelegate, UIImagePickerControllerDelegate, UINavigationControllerDelegate {
實現selectImageFromPhotoLibrary(_:)動作方法
在ViewController.swift代碼中找到selectImageFromPhotoLibrary動作方法
-
添加如下代碼
@IBAction func selectImageFromPhotoLibrary(sender: UITapGestureRecognizer) { nameTextField.resignFirstResponder() } -
在selectImageFromPhotoLibrary方法添加創建視圖拾取控制器；
let imagePickerController = UIImagePickerController() -
添加下面代碼；
imagePickerController.sourceType = .PhotoLibrary設置視圖拾取控制器(image picker controller)的圖像來源，.PhotoLibrary選項是使用模擬器的相機膠卷。
-
設置視圖拾取控制器的代理為ViewController；
imagePickerController.delegate = self -
添加下面代碼。
presentViewController(imagePickerController, animated: true, completion: nil)presentViewController(_:animated:completion:)方法用于模式顯示一個視圖控制器，這里是視圖拾取控制器。
完整的selectImageFromPhotoLibrary方法代碼如下：
@IBAction func selectImageFromPhotoLibrary(sender: UITapGestureRecognizer) { nameTextField.resignFirstResponder() let imagePickerController = UIImagePickerController() imagePickerController.sourceType = .PhotoLibrary imagePickerController.delegate = self presentViewController(imagePickerController, animated: true, completion: nil) }
為了給予用戶選取圖片的能力，需要視圖拾取控制器代理協議定義的兩個方法：
func imagePickerControllerDidCancel(picker: UIImagePickerController) func imagePickerController(picker: UIImagePickerController,didFinishPickingMediaWithInfo info: [String : AnyObject])
實現imagePickerControllerDidCancel(_:)方法
- 在ViewController.swift中//MARK: Actions代碼段添加代理的//MARK注釋
// MARK: UIImagePickerControllerDelegate
- 在上面注釋下添加方法和代碼。
func imagePickerControllerDidCancel(picker: UIImagePickerController) { dismissViewControllerAnimated(true, completion: nil) }
實現imagePickerController(_:didFinishPickingMediaWithInfo:)方法
- 在imagePickerControllerDidCancel方法后面添加方法；
func imagePickerController(picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [String : AnyObject]) { }
-
添加圖像獲取的代碼；
let selectedImage = info[UIImagePickerControllerOriginalImage] as! UIImage -
添加給圖像視圖設置圖像的代碼；
photoImageView.image = selectedImage -
添加關閉視圖拾取控制器的代碼。
dismissViewControllerAnimated(true, completion: nil)
完整代碼如下：
func imagePickerController(picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [String : AnyObject]) { let selectedImage = info[UIImagePickerControllerOriginalImage] as! UIImage photoImageView.image = selectedImage dismissViewControllerAnimated(true, completion: nil) }
運行模擬器，提示用戶要授予FoodTracker應用訪問照片庫的權限。
增加圖像到模擬器
- 運行模擬器；
- 在電腦中，選中要添加的圖像；
- 拖拽圖像到模擬器中。
