使用視圖控制器(View Controllers)
本文的學(xué)習(xí)目標(biāo)
- 理解視圖控制器的生命周期及其何時回調(diào)方法立磁，如viewDidLoad、viewWillAppear和viewDidAppear
- 在各視圖控制器之間傳遞數(shù)據(jù)
- 關(guān)閉一個視圖控制器
- 使用手勢識別作為產(chǎn)生事件的一個附加層級
- 基于視圖和控件(UIView/UIControl)類的繼承關(guān)系預(yù)期對象的行為
- 使用資產(chǎn)目錄(asset catalog)添加圖像資產(chǎn)到項目中
理解視圖控制器的生命周期
目前FoodTracker項目有一個單一頁面Scene振愿，其界面由一個單一視圖控制器管理。當(dāng)如果創(chuàng)建更復(fù)雜的應(yīng)用時，會處理更多的頁面驾胆，當(dāng)視圖移動到屏前和屏后時管理這些視圖的加載和卸載箱亿。
UIViewController類(和其子類)的對象擁有一組管理視圖繼承關(guān)系的方法跛锌，當(dāng)一個視圖控制器在不同狀態(tài)之間切換時，iOS在合適的時機自動調(diào)用這些方法届惋。當(dāng)創(chuàng)建一個視圖控制器的子類(subclass)時髓帽，子類繼承了父類(UIViewController)的方法，允許在每個方法中加入定制的行為脑豹。
UIViewController類的方法如下：
－ viewDidLoad()郑藏，當(dāng)視圖控制器的內(nèi)容視圖(content view，位于視圖層級的最頂層)被創(chuàng)建和從storyboard加載時瘩欺，本方法會被調(diào)用必盖，用于建立初始的設(shè)置。
－ viewWillAppear()俱饿，用于當(dāng)視圖變?yōu)榭梢娭暗娜魏斡脩舨僮饔捎谝晥D的可見性可以被其他視圖顯現(xiàn)或遮擋戒良，本方法總會在內(nèi)容視圖顯示在前屏之前立即被調(diào)用熏瞄。
－ viewDidAppear()毙玻，用于一旦視圖可見的任何用戶操作倘潜，如取回數(shù)據(jù)或者顯示一個動畫。由于視圖的可見性可以被其他視圖顯現(xiàn)或遮擋械拍，本方法總會在內(nèi)容視圖顯示在前屏后立即被調(diào)用突勇。
增加一個菜品照片
增加一個圖像視圖(image view)到頁面中
- 打開主storyboard界面資源文件装盯；
- 在對象庫中檢索image view；
- 找到圖像視圖將其拖拽到頁面中甲馋，放置在堆棧視圖(stack view)中按鈕的下面埂奈；
- 在圖像視圖選中狀態(tài)，設(shè)置尺寸如圖定躏；
- 設(shè)置Intrinsic Size字段為Placeholder账磺，設(shè)置寬度Width和高度Height為320；
- 點擊畫布(canvas)右下方Pin菜單按鈕痊远；
- 添加1:1外觀比例(aspect ratio)比例約束;
- 選中圖像視圖時垮抗，打開屬性編輯器，在Interaction字段設(shè)置允許用戶交互(User Interaction Enable)碧聪，這樣圖像視圖可以接收手勢事件冒版。
顯示缺省照片
當(dāng)用戶可以與圖像視圖交互來選擇一個照片時需要得到指示，增加一個缺省的占位圖像通知用戶可以選擇一個照片逞姿。
增加一個圖像到項目中
- 在項目導(dǎo)航欄找到Assets.xcassets辞嗡，查看資產(chǎn)目錄(asset catalog)；
- 點擊左下角的“＋”按鈕滞造，選擇“New Image Set”续室；
- 雙擊圖像集合名，改名為defaultPhoto谒养；
- 在電腦中找到想要添加的圖像挺狰；
- 將圖像拖拽到圖像集合的2x(對應(yīng)于iPhone6模擬器的顯示分辨率)空位處。
在圖像視圖中顯示一個缺省的圖像
- 打開storyboard界面文件买窟，選中圖像視圖控件丰泊；
- 打開屬性編輯器，在標(biāo)注“Image”的字段選擇defaultPhoto為缺省圖像蔑祟。
連接圖像視圖控件到代碼中
現(xiàn)在需要實現(xiàn)必要的功能趁耗，在運行時改變圖像視圖的圖像沉唠。首先需要連接圖像視圖到代碼中疆虚。
連接圖像視圖到ViewController.swift文件的代碼中
- 點擊Xcode工具條上的助手按鈕，打開助手編輯器满葛；
- 在storyboard上選中圖像視圖径簿；
- 在按下Control鍵同時拖拽圖像視圖到代碼編輯區(qū)；
- 在提示對話框中嘀韧，Name填寫為photoImageView篇亭；
- 點擊“Connect”按鈕。
Xcode增加以下代碼：@IBOutlet weak var photoImageView: UIImageView!
創(chuàng)建手勢識別器
圖像視圖不是控件(cotrol)不能設(shè)計成控件響應(yīng)于輸入例如一個按鈕的方式锄贷。因此不能簡單創(chuàng)建一個動作方法译蒂，當(dāng)用戶點擊一個圖像視圖來觸發(fā)這個動作方法曼月。不過可以通過給圖像視圖增加一個手勢識別器的方式實現(xiàn)同樣功能。圖像識別器(gesture recognizers)是綁定到一個視圖上的對象柔昼，允許視圖像一個控件一樣響應(yīng)于動作事件哑芹，圖像識別器分辨觸碰行為，決定是否對應(yīng)于特定的手勢捕透，例如：一個滑動聪姿、縮放、或旋轉(zhuǎn)等乙嘀。
綁定一個點擊手勢識別器(UITapGestureRecognizer)到圖像視圖末购，識別用戶點擊圖像視圖的手勢。
增加一個點擊手勢識別器到圖像視圖
- 打開對象庫(Object Library)虎谢，檢索“tap gesture”盟榴；
- 找到“Tap Gesture Recognizer”對象，拖拽其到頁面中的圖像視圖上婴噩。
連接手勢識別器對象到代碼中
連接手勢識別器到ViewController.swift文件代碼中
- 按住Control鍵拖拽手勢識別器到代碼編輯區(qū)中曹货；
- 在提示對話框中選擇Connection方式為“Action”；
- 在Name字段輸入selectImageFromPhotoLibrary讳推；
- 在type字段選擇“UITapGestureRecognizer”顶籽；
- 點擊“Connect”按鈕。
Xcode增加代碼如下银觅。@IBAction func selectImageFromPhotoLibrary(sender: UITapGestureRecognizer) { }
創(chuàng)建圖像揀取器(Image Picker)用于響應(yīng)用戶的點擊
用戶點擊圖像視圖礼饱，能夠從一組照片中選擇一個照片。UIImagePickerController類內(nèi)建了相關(guān)的各種行為究驴，管理一個界面用于拍照和選擇保存的圖像镊绪，需要使用圖像揀取器代理來使用圖像揀取控制器，該代理的協(xié)議名為“UIImagePickerControllerDelegate”洒忧。
ViewController類要遵從UIImagePickerControllerDelegate協(xié)議蝴韭，同時還要遵從UINavigationControllerDelegate協(xié)議(實現(xiàn)一些導(dǎo)航視圖切換)
遵從UIImagePickerControllerDelegate和UINavigationControllerDelegate協(xié)議
在項目導(dǎo)航欄選擇ViewController.swift文件
-
找到ViewController類定義行
class ViewController: UIViewController, UITextFieldDelegate { -
使用”,”添加UIImagePickerControllerDelegate和UINavigationControllerDelegate
class ViewController: UIViewController, UITextFieldDelegate, UIImagePickerControllerDelegate, UINavigationControllerDelegate {
實現(xiàn)selectImageFromPhotoLibrary(_:)動作方法
在ViewController.swift代碼中找到selectImageFromPhotoLibrary動作方法
-
添加如下代碼
@IBAction func selectImageFromPhotoLibrary(sender: UITapGestureRecognizer) { nameTextField.resignFirstResponder() } -
在selectImageFromPhotoLibrary方法添加創(chuàng)建視圖拾取控制器；
let imagePickerController = UIImagePickerController() -
添加下面代碼熙侍；
imagePickerController.sourceType = .PhotoLibrary設(shè)置視圖拾取控制器(image picker controller)的圖像來源榄鉴，.PhotoLibrary選項是使用模擬器的相機膠卷。
-
設(shè)置視圖拾取控制器的代理為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) }
為了給予用戶選取圖片的能力驶忌，需要視圖拾取控制器代理協(xié)議定義的兩個方法：
func imagePickerControllerDidCancel(picker: UIImagePickerController) func imagePickerController(picker: UIImagePickerController,didFinishPickingMediaWithInfo info: [String : AnyObject])
實現(xiàn)imagePickerControllerDidCancel(_:)方法
- 在ViewController.swift中//MARK: Actions代碼段添加代理的//MARK注釋
// MARK: UIImagePickerControllerDelegate
- 在上面注釋下添加方法和代碼。
func imagePickerControllerDidCancel(picker: UIImagePickerController) { dismissViewControllerAnimated(true, completion: nil) }
實現(xiàn)imagePickerController(_:didFinishPickingMediaWithInfo:)方法
- 在imagePickerControllerDidCancel方法后面添加方法笑跛；
func imagePickerController(picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [String : AnyObject]) { }
-
添加圖像獲取的代碼付魔；
let selectedImage = info[UIImagePickerControllerOriginalImage] as! UIImage -
添加給圖像視圖設(shè)置圖像的代碼聊品；
photoImageView.image = selectedImage -
添加關(guān)閉視圖拾取控制器的代碼。
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應(yīng)用訪問照片庫的權(quán)限杨刨。
增加圖像到模擬器
- 運行模擬器；
- 在電腦中擦剑，選中要添加的圖像妖胀；
- 拖拽圖像到模擬器中。
