사진 갤러리 이미지에 접근하기 1 (부제 UIImagePickerController)

회사 기획팀에서 문의가 들어왔다. 게시판이나 공지사항을 쓰는 데 현재 총 사진을 다섯개 올릴 수 있는 데 하나씩 밖에 올라가지 않아 문의가 많다고 한다. 또 추후에 게시판 구현시에 도움이 될까하여 이번에는 직접 프레임워크를 작성해 봤다.

사진(갤러리)에 접근하기 

 UIImagePickerController

iOS에서 사진에 접근하는 가장 기본적인 방법은 UIImagePicker를 사용하는 거다. UIImagePicker 다 좋다 그런데 사진이 하나씩 밖에 선택이 안되네.... 사진 다중 선택을 가능하게 하는 다른 라이브러리를 선택할까 하다가 새로운 프레임워크를 만들어보기로 했다.

 

그래도 UIImagePicker를 통해 사진 선택 화면을 띄우는 건 어떻게 하는 지 알아보자. 간단히 Main 스토리보드 가운데에 누르면 UIImagePickerController를 present하도록 버튼을 달아놨다.

화면 구성

그리고 이제 가운데 버튼에 누르면 UIImagePickerController가 나오도록하는 코드를 추가했다.

import UIKit
import Photos

class ViewController: UIViewController {

    @IBOutlet weak var imagePickerButton: UIButton!
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }
    
    @IBAction
    private func didTouchImagePickerButton(_ sender: UIButton) {
        guard UIImagePickerController.isSourceTypeAvailable(.photoLibrary) else {
            return
        }
        let imagePickerController = UIImagePickerController()
        self.present(imagePickerController, animated: true)
    }
    

}

 

사진을 선택했는 데 선택한 사진은 어떻게 보여주지?

이제 선택한 사진을 보여줘야 하는데 어떻게 하지? 음 ViewController에서 UIImagePickerControllerDelegate를 채택해보자.

extension에서 UIImagePickerControllerDelegate만 채택하면 에러 메시지가 뜬다.

왜냐면 UIImagePickerController의 delegate property는 UIImagePickerControllerDelegate , UINavigationControllerDelegate 프로토콜을 모두 구현하도록 정의되어 있기 때무네

그러면 일단 아까 전에 버튼이 가운데 있던 화면 구성에서 선택한 이미지를 보여줄 수 있도록 하는 UIImageView를 추가해 보자.

화면 구성을 바꿨다.

이제 UIImagePickerControllerDelegate에서 필수 func을 구현한 코드를 넣어보겠다.

import UIKit
import Photos

class ViewController: UIViewController {

    @IBOutlet weak var imagePickerButton: UIButton!
    @IBOutlet weak var selectedImageView: UIImageView!
    var selectedImage: UIImage? = nil {
        didSet {
// 1
            self.selectedImageView.image = selectedImage
        }
    }
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }
    
    @IBAction
    private func didTouchImagePickerButton(_ sender: UIButton) {
        guard UIImagePickerController.isSourceTypeAvailable(.photoLibrary) else {
            return
        }
        let imagePickerController = UIImagePickerController()
        imagePickerController.delegate = self
        self.present(imagePickerController, animated: true)
    }
}

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

1. 내부 property인 selectedImage에 property observer를 달아놔서 새로운 값이 설정되면 selectedImageView에 image를 반영하도록 했다.
2. imagePicker에서 image 선택을 완료했을 때의 동작을 정의했다. 이 블록에서 selectedImage property의 값을 함수에서 전달되는 info 딕셔너리의 값을 UIImage로 변환해 내부 property인 selectedImage 값으로 설정했다. 
3. imagePicker에서 아무 사진을 선택도 안 했을 때이다.

결과 화면은...

https://youtu.be/rzgHZmagh3c