SwiftUI 4일차 • 사진앨범에서 이미지를 들고와 뷰에 푸시하기

안녕하세요 제로데이 입니다!

 

오늘은 사진을 화면에 띄울 것인데요.

 

바로 시작해보도록 하겠습니다.

 

 

---

 

 

평소와 똑같이 SwiftUI로 프로젝트를 만들어 주세요.

 

막 프로젝트를 만든 상태.png

 

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Hello, world!")
            .padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

생성시 만들어지는 기본 코드입니다. 

 

우선 사진을 뷰에 띄우려면 첫번째로 사진앨범에 접근을 해야 되는데요. 

버튼을 눌러 사진을 고르게 하기위해 버튼을 만들어 보겠습니다.

 

깔끔하게 하기 위해서 네비게이션 바를 추가해주고 버튼을 추가해보겠습니다.

네비게이션 바에 버튼 추가.png

import SwiftUI

struct ContentView: View {
    
    var body: some View {
        NavigationView {
            Text("")
            .navigationBarTitle("홈", displayMode: .inline)
                .navigationBarItems(trailing:
                        Button(action: {
                            
                        }) {
                            Text("사진 추가")
                            })
        }
        
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

 

 

버튼이 잘 추가 되었네요.

 

이제 사진앨범에 들어가는 코드를 추가 해줘야 됩니다.

그전에 파일을 생성해 줍시다.

 

File - New - File... 을 눌러 줍니다.

 

File...을 눌러주세요

 

 

 

그 후 Swift File을 누르고 Next를 눌러주세요.

 

Swift File 선택 후 Next 눌러주세요

 

 

 

Save As에 ImagePicker 라고 작성한뒤 Create를 눌러주세요!

 

 

 

 

자 이렇게 따라오셨으면 파일이 만들어졌습니다.

 

ImagePicker.swift

 

 

 

이제 ImagePicker.swift 안에 이렇게 코드를 작성해주세요.

 

import Foundation
import SwiftUI

struct ImagePicker: UIViewControllerRepresentable {

    var sourceType: UIImagePickerController.SourceType = .photoLibrary

    func makeUIViewController(context: UIViewControllerRepresentableContext<ImagePicker>) -> UIImagePickerController {

        let imagePicker = UIImagePickerController()
        imagePicker.allowsEditing = false
        imagePicker.sourceType = sourceType

        return imagePicker
    }

    func updateUIViewController(_ uiViewController: UIImagePickerController, context: UIViewControllerRepresentableContext<ImagePicker>) {

    }
}

 

UIImagePickerController는 사진과 동영상 같은걸 관리하거나 편집할수있게 해주는 컨트롤러 입니다.

자세한 내용은

developer.apple.com/documentation/uikit/uiimagepickercontroller

Apple Developer Documentation

여기를 참고해 주세요.

 

이제 다시 ContentView로 돌아와서

아래 코드를 작성해 줍니다.

import SwiftUI

struct ContentView: View {
    @State private var openPhoto = false
    @State private var image = UIImage()

    var body: some View {
        NavigationView {
            VStack {
                Image(uiImage: self.image)
                    .resizable()
                    .scaledToFill()
                    .frame(minWidth: 0, maxWidth: .infinity)
                    .edgesIgnoringSafeArea(.all)
            }
            .navigationBarTitle("홈", displayMode: .inline)
                .navigationBarItems(trailing:
                        Button(action: {
                            self.openPhoto = true
                        }) {
                            Text("사진 추가")
                            }
)
        }                             .sheet(isPresented: $openPhoto) {
            ImagePicker(sourceType: .photoLibrary)
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

 

 

 

이제 앱을 실행시켜보면

사진앨범으로 진입성공!

 

버튼을 눌렀을때 앨범으로 잘 들어가지는 것을 보실수있습니다.

 

이제 앨범에서 사진을 눌렀을때 뷰에 띄우기만 하면 끝나는데요

그 작업을 시작해 봅시다.

 

ImagePicker.swift에 들어가서 아래 코드를 넣어주세요.

 

import UIKit
import SwiftUI

struct ImagePicker: UIViewControllerRepresentable {
    
    var sourceType: UIImagePickerController.SourceType = .photoLibrary
    
    @Binding var selectedImage: UIImage
    @Environment(\.presentationMode) private var presentationMode

    func makeUIViewController(context: UIViewControllerRepresentableContext<ImagePicker>) -> UIImagePickerController {
        
        let imagePicker = UIImagePickerController()
        imagePicker.allowsEditing = false
        imagePicker.sourceType = sourceType
        imagePicker.delegate = context.coordinator
        
        return imagePicker
    }
    
    func updateUIViewController(_ uiViewController: UIImagePickerController, context: UIViewControllerRepresentableContext<ImagePicker>) {
        
    }
    
    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }
    
    final class Coordinator: NSObject, UIImagePickerControllerDelegate, UINavigationControllerDelegate {
        
        var parent: ImagePicker
        
        init(_ parent: ImagePicker) {
            self.parent = parent
        }
        
        func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) {
            
            if let image = info[UIImagePickerController.InfoKey.originalImage] as? UIImage {
                parent.selectedImage = image
            }
            
            parent.presentationMode.wrappedValue.dismiss()
        }
    }
}

 

그리고 ContentView.swift에 들어가서 아래처럼 코드를 수정해주세요.

 

import SwiftUI

struct ContentView: View {
    @State private var openPhoto = false
    @State private var image = UIImage()

    var body: some View {
        NavigationView {
            VStack {
                Image(uiImage: self.image)
                    .resizable()
                    .frame(minWidth: 0, maxWidth: .infinity)
            }
            .navigationBarTitle("홈", displayMode: .inline)
                .navigationBarItems(trailing:
                        Button(action: {
                            self.openPhoto = true
                        }) {
                            Text("사진 추가")
                            }
)
        }                             .sheet(isPresented: $openPhoto) {
            ImagePicker(sourceType: .photoLibrary, selectedImage: self.$image)
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

 

 

자 이제 결과를 확인해 볼까요?

 

짜잔!

 

뷰에 원하던 사진을 올리는걸 성공했네요!

 

그럼 마지막으로 스티브 잡스의 명언을 남기고 글을 마치겠습니다.

 

가끔은 혁신을 추구하다 실수할 때도 있습니다. 하지만 빨리 인정하고 다른 혁신을 개선해 나가는 것이 최선입니다.

- 스티브 잡스

 

---

참고글

www.appcoda.com/swiftui-camera-photo-library/