Swift 일기장 개발 일기 5 (imageView 추가)

송민준·2023년 1월 8일

일기장 개발 일기

목록 보기

5/11

저번 글에서 언급했듯이 Diary에 Image를 추가를 했습니다.

목표

이번 글을 꽤 간단한 구현을 다루고 있기 때문에 짧게 끝날 것 같습니다.
1. CreateVC에 ImageView 추가 & 버튼 추가
2. Diary에 Image를 담을 프로퍼티 생성 & DiaryListMV init 함수 변경

1. CreateVC에 ImageView 추가 & 버튼 추가

ImageView와 버튼을 추가했습니다. 이미지 추가 버튼을 누르면 갤러리가 등장하고 사진을 선택하면 미리보기로 ImageView에 띄워주는 기능을 구현하도록 하겠습니다.

위와 같이 갤러리에서 사진을 선택하려면 또다른 새로운 컨트롤러로 넘어가야합니다.
그 컨트롤러의 이름은 UIImagePickerController 입니다.
이 컨트롤러를 사용하기 위해서는 VC가 UIImagePickerControllerDelegate, UINavigationControllerDelegate 이 두가지를 상속받아야합니다.

CreateVC

    @IBOutlet weak var imageView: UIImageView!
    @IBOutlet weak var imgInsertBtn: UIButton!
    
    let imgPicker = UIImagePickerController()

    override func viewDidLoad() {
        super.viewDidLoad()
        self.imgPicker.sourceType = .photoLibrary
        self.imgPicker.allowsEditing = true
        self.imgPicker.delegate = self
    }

먼저 UIImagePickerController를 전역으로 선언했습니다.

    self.imgPicker.sourceType = .photoLibrary //imagePicker의 소스 타입은 photo 라이브러리에서 가져오는 것.

    self.imgPicker.allowsEditing = true //이미지를 가져오기 전에 이미지 편집 허용 (예시로 허용함)

    self.imgPicker.delegate = self //imagePicker의 역할을 이 클래스에 위임

	@IBAction func imgInsertBtnPushed(_ sender: Any) {
        imageView.isHidden = false
        imgInsertBtn.isHidden = true
        present(imgPicker, animated: true)
    }

이미지 추가 버튼을 눌렀을 때 ImageVIew는 보이고 버튼은 사라지게 만든 후 ImagePicker를 보여주는 액션입니다.


extension CreateViewController: UIImagePickerControllerDelegate, UINavigationControllerDelegate{
    func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) {
        if let img = info[UIImagePickerController.InfoKey.originalImage] as? UIImage{
            imageView.contentMode = .scaleAspectFit
            imageView.image = img
        }
        
        dismiss(animated: true)
    }
    
}

UIImagePickerControllerDelegate, UINavigationControllerDelegate의 상속과 필요한 오버라이드 입니다.

didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any])
: 수정한 이미지건 오리지널 이미지건 info는 이미지 데이터를 가지고 있는 딕셔너리 자료구조입니다.
if let img = info[UIImagePickerController.InfoKey.originalImage] as? UIImage
: 이미지를 오리지널 이미지로 가져옵니다. editedImage, cropRec 등 다양한 키도 있습니다.

        imageView.image = img //imageView의 이미지를 가져온 이미지로 설정

1. 결과

2.

Diary (Model)

public struct Diary{
    let date:Date
    let emotion:String?
    let content:String
    let imageData:Data?
    init(date:Date, emotion:String?, content:String, imageData:Data?){
        self.date = date
        self.emotion = emotion
        self.content = content
        self.imageData = imageData
    }
}

이미지를 리스트에 저장시켰을 때 타입은 Data? 입니다. 따라서 imageData를 Data 타입으로 추가했습니다.

DiaryListViewModel (ViewModel)

뷰 모델도 그와 맞게 변경했습니다.

class DiaryListViewModel: NSObject{
    var diary: Diary!
    var diaryList: [Diary]!
    override init() {
        let dateFormatter = DateFormatter()
        dateFormatter.dateFormat = "yyyy-MM-dd HH:mm:ss"
        diaryList = []
    }
    func createDiaryData(date:Date, emotion: String?, content: String, imageData:Data?){
        diary = Diary(date: date, emotion: emotion, content: content, imageData: imageData)
        print("DiaryList appended ( \(date), \(content) ) in DiaryCreateViewModel")
        diaryList.append(diary)
    }
    func deleteDiaryData(index:Int){
        print("DiaryList delete index \(index)")
        diaryList.remove(at:index)
        
    }
}

CreateVC

...
 	@IBAction func completeButtonPushed(_ sender: UIButton) {
        ...
        let imageData = self.imageView.image?.pngData()
        dataDelegate?.receiveData(date:date, emotion:emotion, content:content, doCalendar: doCalendar, imageData: imageData)
        dismiss(animated: true)
    }
...