[APP開發-使用Swift] 18. 照相機

  1. 拖拉一個Table View Controller到Storyboard,選擇Table View,在Attributes inspector將Table View Contents改為Static Cells。

2. 再點選Table View Section,將行數改為5。

3. 把photoalbum圖案拖拉到Assets.xcassets中

4. 第一個Table View Cell列高設為250。

5. 拖拉一個Image View到第一個Cell中。

6. 將圖片大小改為64*64,選擇Reset to Suggested Constraints讓Image View置中。

7. 將第2個Table View Cell的高度設定為72,分別將Label, Text Field拉到Cell中。Label Title = 餐廳名稱,Text Field Placeholder = 名稱,Border Style = None,Text Field Width = 339。重複前面的動作設好第3、4個Cell,將名稱分別改為類型、地址。

8. 選擇Table View Controller嵌入Navigation Controller

9. 將Navigation Item設為「新增餐廳」

10. 拖拉一個Bar Button Item到我的餐廳導覽列中,System Item選擇Add,Icon自動會變為+。

11. 從新增Button拖拉一個Segue到Navigation Controller,選擇PresentModally。

12. 設定Segue Identifier = addRestaurant

13. 拖拉一個Bar Button Item到新增餐廳導覽列中,選擇Cancel。

14. 接下來用Unwind Segue,按下Cancel按鈕回到Restaurant Table View,所以我們先在目的地RestaurantTableViewController加上以下:

@IBAction func unwindToHomeScreen(segue:UIStoryboardSegue) {
}

15. 接著回到Storyboard選擇「Cancel」按鈕,Ctrl+Drag到上方的Exit按鈕,選取unwindToHomeScreenWithSegue。

16. 選擇New File → Cocoa Touch Class,新增AddRestaurantTableViewController.swift檔案。

17. 選擇Storyboard中新增餐廳的View Controller→ Identity inspector → Class選擇AddRestaurantTableViewController。

18. 因為我們使用Static Table,所以以下Xcode自動產生的程式碼可移除。

override func numberOfSections(in tableView: UITableView) -> Int {
return 0
}
override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return 0
}

19. 在AddRestaurantTableViewController.swift加上2個Protocol:

class AddRestaurantTableViewController: UITableViewController, UIImagePickerControllerDelegate, UINavigationControllerDelegate

再加上以下程式碼,使用UIImagePickerController取用照片:

  • imagePicker.sourceType = .photoLibrary取用裝置內的照片
  • imagePicker.sourceType = .camera使用照相機
override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
if indexPath.row == 0 {
if UIImagePickerController.isSourceTypeAvailable(.photoLibrary) {
let imagePicker = UIImagePickerController()
imagePicker.allowsEditing = false
imagePicker.sourceType = .photoLibrary
imagePicker.delegate = self
present(imagePicker, animated: true, completion: nil)
}
}
}

19. Info.plist新增一個Key: Privacy-Photo Library Usage Description

20. 執行:

21. 點選照片以後,還不能顯示在我們的Image View中,接下來我們得實作imagePickerController(_:didFinishPickingMediaWithInfo:)這個方法才能顯示:

func imagePickerController(_ picker: UIImagePickerController,
didFinishPickingMediaWithInfo info: [String : Any]) {
if let selectedImage = info[UIImagePickerControllerOriginalImage] as? UIImage {
photoImageView.image = selectedImage
photoImageView.contentMode = .scaleAspectFill
photoImageView.clipsToBounds = true
}
dismiss(animated: true, completion: nil)
}

22. 執行看看,出現了!

咦,圖片大小似乎被我們的限制條件綁住了,加上邊界條件上、下、左、右設為0。

>>>19. Core Data