사진 갤러리 이미지에 접근하기 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)
}
}- 내부 property인 selectedImage에 property observer를 달아놔서 새로운 값이 설정되면 selectedImageView에 image를 반영하도록 했다.
- imagePicker에서 image 선택을 완료했을 때의 동작을 정의했다. 이 블록에서 selectedImage property의 값을 함수에서 전달되는 info 딕셔너리의 값을 UIImage로 변환해 내부 property인 selectedImage 값으로 설정했다.
- imagePicker에서 아무 사진을 선택도 안 했을 때이다.