如何在SwiftUI中从图库中选取图片

时间:2019-07-19 10:17:23

标签: swiftui

我试图制作一个符合UIViewRepresentable并实现makeUIView和updateUIView的SwiftUI类。 但无法完成。代码如下:

代码:

struct ImagePicker : UIViewRepresentable {

@Binding var image: UIImage

class Coordinator: NSObject, UIImagePickerControllerDelegate, UINavigationControllerDelegate {

    @Binding var image: UIImage

    init(image: Binding<UIImage>) {
        $image = image
    }

    func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) {


        if let possibleImage = info[.editedImage] as? UIImage {
            image = possibleImage
        } else if let possibleImage = info[.originalImage] as? UIImage {
            image = possibleImage
        } else {

        }
    }
}

func makeCoordinator() -> Coordinator {
    return Coordinator(image: $image)
}

func makeUIView(context: UIViewRepresentableContext<ImagePicker>) -> UIImageView {
    let imageview = UIImageView()
    let picker = UIImagePickerController()
    picker.delegate = context.coordinator
    return imageview
}

func updateUIView(_ uiView: UIImageView,
                  context: UIViewRepresentableContext<ImagePicker>) {
    uiView.image = image
}

}

我尝试使用imagePicker作为控件,但无法使用。

2 个答案:

答案 0 :(得分:0)

请尝试这个

代码:

导入SwiftUI

struct OpenGallary:UIViewControllerRepresentable {

let isShown: Binding<Bool>
let image: Binding<Image?>

class Coordinator: NSObject, UINavigationControllerDelegate, UIImagePickerControllerDelegate {

    let isShown: Binding<Bool>
    let image: Binding<Image?>

    init(isShown: Binding<Bool>, image: Binding<Image?>) {
        self.isShown = isShown
        self.image = image
    }

    func imagePickerController(_ picker: UIImagePickerController,
                               didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) {
        let uiImage = info[UIImagePickerController.InfoKey.originalImage] as! UIImage
        self.image.wrappedValue = Image(uiImage: uiImage)
        self.isShown.wrappedValue = false
    }

    func imagePickerControllerDidCancel(_ picker: UIImagePickerController) {
        isShown.wrappedValue = false
    }

}

func makeCoordinator() -> Coordinator {
    return Coordinator(isShown: isShown, image: image)
}

func makeUIViewController(context: UIViewControllerRepresentableContext<OpenGallary>) -> UIImagePickerController {
    let picker = UIImagePickerController()
    picker.delegate = context.coordinator
    return picker
}

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

}

}

选择器显示在视图的顶部,没有过渡 所选的图像将不显示任何动画,并替换为“显示图像选择器”按钮

在创建显示视图之后,您可以在其中调用show imagePicker

struct ContentView:查看{

@State var showImagePicker: Bool = false
@State var image: Image?

var body: some View {
    ZStack {
        VStack {
            Button(action: {
                withAnimation {
                    self.showImagePicker.toggle()
                }
            }) {
                Text("Show image picker")
            }
            image?.resizable().frame(width: 100, height: 100)
        }
        if (showImagePicker) {
            OpenGallary(isShown: $showImagePicker, image: $image)
        }
    }
}

}

答案 1 :(得分:0)

我在这里使用presentationMode来检查它是否显示视图?

通过此操作,您可以dismiss() UIImagePickerController

SwiftUI预览的示例代码:

import SwiftUI

struct ContentView: View {

    @State var isShowPicker: Bool = false
    @State var image: Image? = Image("placeholder")

    var body: some View {
        NavigationView {
            ZStack {
                VStack {
                    image?
                        .resizable()
                        .scaledToFit()
                        .frame(height: 320)
                    Button(action: {
                        withAnimation {
                            self.isShowPicker.toggle()
                        }
                    }) {
                        Image(systemName: "photo")
                            .font(.headline)
                        Text("IMPORT").font(.headline)
                    }.foregroundColor(.black)
                    Spacer()
                }
            }
            .sheet(isPresented: $isShowPicker) {
                ImagePicker(image: self.$image)
            }
            .navigationBarTitle("Pick Image")
        }
    }
}


struct ImagePicker: UIViewControllerRepresentable {

    @Environment(\.presentationMode)
    var presentationMode

    @Binding var image: Image?

    class Coordinator: NSObject, UINavigationControllerDelegate, UIImagePickerControllerDelegate {

        @Binding var presentationMode: PresentationMode
        @Binding var image: Image?

        init(presentationMode: Binding<PresentationMode>, image: Binding<Image?>) {
            _presentationMode = presentationMode
            _image = image
        }

        func imagePickerController(_ picker: UIImagePickerController,
                                   didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) {
            let uiImage = info[UIImagePickerController.InfoKey.originalImage] as! UIImage
            image = Image(uiImage: uiImage)
            presentationMode.dismiss()

        }

        func imagePickerControllerDidCancel(_ picker: UIImagePickerController) {
            presentationMode.dismiss()
        }

    }

    func makeCoordinator() -> Coordinator {
        return Coordinator(presentationMode: presentationMode, image: $image)
    }

    func makeUIViewController(context: UIViewControllerRepresentableContext<ImagePicker>) -> UIImagePickerController {
        let picker = UIImagePickerController()
        picker.delegate = context.coordinator
        return picker
    }

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

    }

}


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