ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • UIImagePickerViewController(photoLibrary)
    iOS/App Develop 2019. 7. 21. 21:01

    안녕하세요 dely입니다:)

    오늘은 UIImagePickerViewController에 대해 정리해보겠습니다.

     

    UIImagePickerViewController는 사진을 찍고, 동영상을 녹화하고, 사용자 미디어 라이브러리에서

    항목을 선택하기 위한 시스템 인터페이스를 관리하는 ViewController라고 합니다.

    (참고: https://developer.apple.com/documentation/uikit/uiimagepickercontroller)

     

    그래서 앨범에서 사진을 선택하여 가져오기 위한 방법은 간단합니다.

    1. 무언가를 클릭하면 imagePicker를 띄운다(여기서 무언가는 버튼이나 탭제스쳐)

    (2. 사용자가 어떤 사진을 선택한다.) - 사용자의 영역이니 설명 생략

    3. 선택한 사진을 가져온다.

    4. 가져온 사진을 ImageView에 보여주거나 구어삶는다.

     

    차례대로 해보면서 ImagePicker 기능을 만들어봅시다!!

     

    1. 무언가를 클릭하면 imagePicker를 띄운다(여기서 무언가는 버튼이나 탭제스쳐)

    일단 앨범에서 사진을 선택하기 위해서 다음과 같이 UIImagePickerController()를 imagePicker로 선언합니다.

    let imagePicker = UIImagePickerController()

    그 다음으로 버튼을 클릭했을 때 이미지피커를 띄운다면

    스토리보드에서 해당 ViewController에 버튼을 끌어다가 놓을 때 IBAction으로 메소드를 만들수도 있고,

    이미지뷰를 터치했을 때 이미지피커를 띄우고 싶다면

    UITapGestureRecognizer(target: , action:)를 이용해 매개변수 action 부분에 따로 만들어둔 메소드를 연결할 수도 있습니다.

     

    이 글에서는 두번째 방법인 탭제스쳐를 사용해보겠습니다.

    스토리보드에서 ImageView를 하나 만들고, 해당 ViewController에 IBOutlet으로 연결해줍니다.

    @IBOutlet weak var imageView: UIImageView!

    그리고 viewDidLoad()에서 다음 코드를 작성합니다.

    let tapGestureRecognizer = UITapGestureRecognizer(target: self, action: Selector(("imageViewTapped:")))
    imageView.addGestureRecognizer(tapGestureRecognizer)

    코드를 한국어(?)로 해석하자면 다음과 같습니다.

    "imageViewTapped() 메소드를 부르는 UITapGestureRecognizer()를 tapGestureRecognizer라는 이름으로 만듭니다."

    "위에서 만든 tapGestureRecognizer는 imageView를 탭했을 때 부르도록 설정합니다"

     

    그럼 이미지뷰를 탭했을 때 부르는 메소드 imageViewTapped()를 만들고

    이 곳에서 이미지피커에 대한 설정을 해보겠습니다.

    @objc func imageViewTapped(_ gesture: UITapGestureRecognizer) {
        imagePicker.sourceType = .photoLibrary
        present(imagePicker, animated: true, completion: nil)
    }

    위에서 작성한 imageViewTapped() 메소드 안에 첫번째 코드를 보면

    sourceType을 설정하게 됩니다.

     

    UIImagePickerViewController는 지정한 Source Type에 따라 유형이 달라지는데

    Source Type에는 .camera, .photoLibrary, savedPhotosAlbum이 있습니다.

    .camera는 카메라를 불러오고,

    .photoLibrary는 포토앨범 전체 라이브러리를 불러오고, 

    .savedPhotoAlbum은 카메라 롤 앨범에서만 불러오도록 설정하게 됩니다.

     

    이글에서는 photoLibrary를 선택하겠습니다.

     

    3. 선택한 사진을 가져온다.

    UIImagePickerViewController는 Delegate를 통해

    포토앨범에서 사용자가 선택한 이미지를 가져오는 기능을 쉽게 만들 수 있습니다.

    마치 "당신은 사용자가 선택한 것을 책임지고 가져오세요~ 그리고 가져오게되면 저에게도 알려주세요^^"라고

    미리 부탁해놓은 것이라고 할 수 있습니다.

     

    그럼 사용자가 이미지를 선택하는 순간 이미지를 ImageView에 넣거나 편집모드로 가거나.. 등등

    개발자는 이미지를 가져온 이후의 여러 기능들에 집중해서 만들 수 있게 됩니다.

     

    UIImagePickerControllerDelegate를 사용하는 방법은 다음과 같습니다.

    viewDidLoad() 안에 아래의 코드를 작성합니다.

    imagePicker.delegate = self

    그리고 extension으로 UIImagePickerControllerDelegate와 UINavigationControllerDelegate를 선언합니다.

    extension ViewController: UIImagePickerControllerDelegate, UINavigationControllerDelegate {
        func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) {
            // 어떤 기능을 추가할까요
            picker.dismiss(animated: true, completion: nil)
        }
        
    }

    picker.dismiss(animated: true)라는 코드는 사용자가 이미지를 선택한 후 picker view를 닫아줍니다.

    그럼 우리는 그 코드 위쪽에 info[]을 통해 가져온 이미지를 사용하여

    원하는 기능들을 넣어줌으로써 기능을 구현할 수 있습니다.

     

    UINavigationControllerDelegate을 왜 쓰는걸까??

    ...더보기

    UIImagePickerController를 쓰는 건데..

    이름이 비슷한 UIImagePickerControllerDelegate를 쓰는 건 이해가 되는데

    UINavigationControllerDelegate는 왜 쓰는 건가...?? 라는 의문이 들기도 합니다.

     

    그 이유는 다음과 같습니다.

    바로 image picker의 delegate는

    UIImagePickerControllerDelegate & UINavigationControllerDelegate type을 받기 때문입니다.

     

    위 이미지의 Discussion를 좀 더 살펴보면,

     

    'delegate는 사용자가 이미지나 동영상을 선택하거나 picker 인터페이스를 종료 할 때 알림을 받습니다.

    delegate는 또한 picker 인터페이스를 닫을 시기를 결정합니다. 따라서 picker를 사용하기 위해 delegate를 제공해야합니다.

    만약 이 프로퍼티가 nil이면 picker는 즉시 이 속성이 nil이면 picker는 닫힙니다.'

     

    라고 합니다.

    음.. 좀 더 UINavigationControllerDelegate를 살펴봅니다.

    'ViewController가 네비게이션 스택에서 push나 pop 되었을 때 동작을 수정하려면 UINavigationControllerDelegate를 쓰세요'

    라고 합니다.

     

    오오.. 종합해보면, picker를 띄우고 사라지게 하는 동작을 하기 위함으로 이해가 됩니다.

     

    4. 가져온 사진을 ImageView에 보여주거나 구어삶는다.

    이 글에서는 ImageView에 보여주도록 하겠습니다.

    앞에서 만들어둔 imagePickerController() 메소드 안에 // 어떤 기능을 추가할까요 부분에

    다음 코드를 작성합니다.

    if let pickedImage = info[UIImagePickerController.InfoKey.originalImage] as? UIImage {
        imageView.contentMode = .scaleAspectFit
        imageView.image = pickedImage
    }

    이 코드는 [UIImagePickerController.InfoKey : Any]라는 형태의 딕셔너리 type으로 가져온 사진들을

    UIImage로 타입캐스팅을 해주고,

    그것이 nil이 아니라면 imageView에 .scaleAspectFit 형태로 보여지도록 설정하게 됩니다.

     

    그러면 이렇게 빠르고 쉽게 앨범에서 이미지를 선택하고 불러오게 됩니다!!

    반응형

    'iOS > App Develop' 카테고리의 다른 글

    Singleton  (0) 2019.07.25
    Navigation Controller  (0) 2019.07.23
    Auto Layout  (0) 2019.07.19
    Create iOS Develop Category  (0) 2019.07.19

    댓글

Designed by Tistory.