[SwiftUI] Image Picker

Page·2022년 5월 26일

SwiftUI

목록 보기

7/18

ImagePicker

갤러리의 사진을 가져오는 작업을 진행해보자.
구체적인 동작 과정을 적지않고 코드만 간단히 작성하려고 한다.
어떤 어플이든 필요할만한 기능이라 따로 코드로 가지고 있는 편이 좋아보인다.

ImagePicker Code

import SwiftUI

struct ImagePicker: UIViewControllerRepresentable {
    
    @Binding var image: UIImage?
    @Environment(\.presentationMode) var mode
    
    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }
    
    func makeUIViewController(context: Context) -> some UIViewController {
        let picker = UIImagePickerController()
        picker.delegate = context.coordinator
        return picker
    }
    
    func updateUIViewController(_ uiViewController: UIViewControllerType, context: Context) {
        
    }
}

extension ImagePicker {
    class Coordinator: NSObject, UINavigationControllerDelegate, UIImagePickerControllerDelegate {
        let parent: ImagePicker
        
        init(_ parent: ImagePicker) {
            self.parent = parent
        }
        
        func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) {
            guard let image = info[.originalImage] as? UIImage else { return }
            parent.image = image
            parent.mode.wrappedValue.dismiss()
        }
    }
}

파일을 생성해주고 위 코드를 입력해준다.

ImagePicker 이용하기

ImagePicker를 구현하고 이용하기 위해
1. 3가지 State값
2. Image가 nil일 때의 처리
3. Image 할당

3가지 작업을 해주면 된다.

import SwiftUI

struct ImageViewTester: View {
    
    @State var showImagePicker = false
    @State var selectedUIImage: UIImage?
    @State var image: Image?
    
    func loadImage() {
        guard let selectedImage = selectedUIImage else { return }
        image = Image(uiImage: selectedImage)
    }
    
    var body: some View {
        
        
        VStack(spacing: 20) {
            
            if let image = image {
                image
                    .resizable()
                    .clipShape(Circle())
                    .frame(width: 120, height: 120)
            } else {
                Image(systemName: "plus.viewfinder")
                    .resizable()
                    .foregroundColor(.blue)
                    .frame(width: 120, height: 120)
            }
               
                       
            Button {
                showImagePicker.toggle()
            } label: {
                Text("Image Picker")
            }
            .sheet(isPresented: $showImagePicker, onDismiss: {
                loadImage()
            }) {
                ImagePicker(image: $selectedUIImage)
        }
        }
        
        
    }
}