Review of Work with View Controllers (2) - Food Tracker

Create a Gesture Recognizer

Image view는 control 이 아닙니다.

 

그렇기 때문에 button 이나 slider와 같이 사용자의 input에 반응하도록 설계되지 않았습니다.

 

따라서 바로 Control-drag 을 통해서 action method를 넣을 수 없습니다.

이전 글의 마지막 부분 ( `Connet the Image View to Code` )에 이 내용을 다루었습니다.

 

View를 control처럼 동작하게 하는 방법은, 해당 View에 gesture recognizer를 추가하는 것입니다.

 

Gesture recognizer 는 view에 붙이는 객체로,  control과 같이 사용자의 input에 반응하도록 만들 수 있습니다.

 

각각의 Gesture recognizer 는 각자에 상응하는 동작에만 반응합니다. ( 동작의 예:  swipe, pinch, rotation )

 

즉, 하나의 Gesture recognizer 에는 하나의 동작에만 반응하게 매핑되어 있습니다.

" Gesture recognizer has its assigned gesture."

 

 

Scene의 윗 부분을 `Scene Dock` 이라고 부릅니다.

위 사진의 오른쪽 Doument Outline 에서,

 

!!! 저는 Gesture recognizer를 Image view에 추가하였기 때문에 Image view 아래 계층에 추가될 것이라고 예상하였지만,

Content View와 동일한 계층에 추가되었다는 것을 확인하였습니다.!!!

 

처음에는 잘못 추가된 줄 알고 헤매었지만, Gesture Recognizer와 연결된 view를 확인하는 방법을 찾아 해결하게 되었습니다.

 

Scene Dock 에서 Gesture recognizer 를 오른쪽 클릭하여 나오는 창의 `Referencing Outlet Collecitons` 에서 제대로 연결 되었음을 확인할 수 있었습니다.

 

---

 

Connect the Gesture Recognizer to Code

action을 만드는 과정과 유사하기 때문에 생략하였습니다.

 

차이점은 Scene 내의 view에서 Control-drag 하지 않고, Scene Dock의 Gesture recognizer에서 Control-drag 한다는 점입니다.

혹은 Document Outline에서 Control-drag 합니다. 이 부분은 controls에 action을 연결하는 것과 같습니다.

 

---

 

Create an Image Picker to Respond to User Taps

 

구현 목표

1. 사용자가 Image view를 Tap 했을 때, 카메라로 새로운 사진을 찍거나, 앨범에서 사진을 하나 선택할 수 있다.

2. 선택한 사진을 Meal Scene의 Image view에서 띄운다.

 

이번 단락에서는 위의 두 단계를 순서대로 해결하는 과정을 리뷰하였습니다.

 

1. 사용자가 Image view를 Tap 했을 때, 카메라로 새로운 사진을 찍거나 앨범에서 사진을 하나 선택할 수 있다.

우선 사용자의 Input (Tap)을 인식하게 하기 위하여 이전 단락에서 Gesture recognizer를 추가하고, action을 생성해 연결하였습니다.

 

앨범에서 사진을 하나 선택할 수 있게 구현하는 것은 UIImagePickerController를 이용합니다.

" An image picker controller manages the user interface for taking pictures and for choosing saved images to use in your app."

 

UIImagePickerController에서 고른 결과를 Meal Scene의 View controller에게 전달하기 위해 참조가 필요한데, 마침 UIImagePickerController는 delegate 프로토콜이 존재합니다.

 

그리고 반드시 delegate을 설정해야 한다고 가이드라인을 제시하고 있습니다.

" To use an image picker controller, you must provide a delegate that conforms to the UIImagePickerControllerDelegate protocol. "

 

따라서 delegate 프로토콜을 채용하는 객체는 View controller가 될 것입니다.

 

그래서 위의 작업들에 따라 action method에 구현하였습니다.

  @IBAction func selectingImageFromPhotoLibrary(_ sender: UITapGestureRecognizer) {
    
    // Hide the keyboard while typing in the textfield when user taps the image view
    /* 1 */
    nameTextField.resignFirstResponder()
    
    /* 2 */
    let imagePickerController = UIImagePickerController()
    
    /* 3 */
    imagePickerController.sourceType = .photoLibrary
    
    /* 4 */
    imagePickerController.delegate = self
    present(imagePickerController, animated: true, completion: nil)
  }

 

/* 1 */

사용자가 TextField를 작성중에 image view 를 탭하였을 때, Text Field 를 first responder에서 해제하는 코드입니다.

 

/* 2*/

UIImagePickerController 인스턴스를 생성합니다.

이 인스턴스는 택한 시점에만 필요하므로, 굳이 다른 시점에 생성하여 참조를 가지고 있을 필요는 없습니다.

해당 메서드가 호출되고 delgate method 호출 및 실행이 종료되면, ARC에 의해 자동으로 메모리 해제될 것입니다.

 

/* 3 */

사용자에게 photoLibrary를 보여주는 코드입니다.

 

/* 4 */

delegate를 View Controller로 설정합니다.

ImagePIckerController를 화면에 띄우기 위해 present(_, animated:, completion:) 메서드를 호출합니다.

---

 

그런데 View Controller가 delegate 이 되기 위해서는 필요한 프로토콜을 채택하여야 합니다.

 

아래 코드는 프로토콜을 채택하는 코드입니다.

extension ViewController: UIImagePickerControllerDelegate,UINavigationControllerDelegate {
  
  /* 1 */
  func imagePickerControllerDidCancel(_ picker: UIImagePickerController) {
    dismiss(animated:true, completion: nil)
  }
  
  /* 2 */
  func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) {
    
    guard let selectedImage = info[UIImagePickerController.InfoKey.originalImage] as? UIImage else {
      fatalError()
    }
    
    photoImageView.image = selectedImage
    
    dismiss(animated: true, completion: nil)
  }
}

 

/* 1 */

어떤 시점에 호출되는 메서드 인지는 Apple Developer Documentation을 통해 확인해야 합니다.

다만 메서드명 중 DidCancel이라는 문구가 사용자가 `cancel` 버튼을 누른 직후에 호출될 것을 유추할 수 있습니다.

 

/* 2 */

사용자가 이미지를 선택했을 때 호출되는 메서드입니다.

parameter `info`에 정보가 딕셔너리 타입으로 반환됩니다.

방어 코드로. originalImage를 key로 넣어 나온 value를  UIImage로 캐스팅하여 저장하고, 그것을 ImageView.image 속성에 넣어 줍니다.

---

 

이후 실행해보면 저의 경우 정상적으로 동작했지 만 만, Documentaion에서는 이대로 실행하면 일부러 에러가 뜨게 설계한 것 같았습니다.

 

이 내용을 적어 보겠습니다. (이후는 Documentation에서 나오는 상황입니다.)

제가 시뮬레이터로만 실행해서 문제없이 실행된 것 같습니다.

 

실행하여 Image view를 탭 하면, 앱이 SIGABORT signal과 함께 종료됩니다.

 

이것은 앱을 바로 종료해야 할 만큼 심각한 에러가 있다는 것을 의미합니다.

 

이 문제는 image picker를 화면에 present 하려고 할 때 발생한 것입니다.

 

시스템은 반드시 Photo Library에 접근하기 전에 사용자에게 허가를 받아야 합니다.

 

iOS 10 이상부터, photo library usage description을 반드시 작성하여야 하고, 이런 허가 문구는 Info.plist 에서 추가합니다.

 

Info.plist 에서  오른쪽 클릭 후 [Add row] 를 통해 Property를 하나 추가하고, 위와 같이 설정 하였습니다.

 

 

 

끝!

---

 

다음 글: