Programmieren lernen mit SwiftUI

📱 Meine App zum Programmieren lernen: https://linktr.ee/codepirate

So fügst du deiner App eine Kamerafunktion mit SwiftUI hinzu

Die Integration einer Kamerafunktion in deine iOS-App kann den Nutzerwert deutlich steigern. In diesem kurzen Tutorial zeige ich dir dir, wie du mithilfe von SwiftUI und ein paar Zeilen Code eine einfache Kamera-App erstellst.

Schritt 1: Die Kamera-Schnittstelle in SwiftUI

Wir erstellen eine CameraPickerView-Struktur, die es unserer App ermöglicht, auf die Kamera zuzugreifen und ein Foto zu machen:

import Foundation
import SwiftUI

struct CamerPickerView: UIViewControllerRepresentable {
    private var onImagePicked: (UIImage) -> Void
    @Environment(\.presentationMode) private var presentationMode


    init(onImagePicked: @escaping (UIImage) -> Void) {
        self.onImagePicked = onImagePicked
    }

    func makeUIViewController(context: Context) -> some UIViewController {
        let picker = UIImagePickerController()
        picker.sourceType = .camera
        picker.delegate = context.coordinator
        return picker

    }

    func makeCoordinator() -> Coordinator {
        Coordinator {
            presentationMode.wrappedValue.dismiss()
        } onImagePicked: { image in
            onImagePicked(image)
        }

    }

    func updateUIViewController(_ uiViewController: UIViewControllerType, context: Context) { }

    final class Coordinator: NSObject, UIImagePickerControllerDelegate, UINavigationControllerDelegate {
        private let onDismiss: () -> Void
        private let onImagePicked: (UIImage) -> Void

        init(onDismiss: @escaping () -> Void, onImagePicked: @escaping (UIImage) -> Void) {
            self.onDismiss = onDismiss
            self.onImagePicked = onImagePicked
        }

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

            if let image = info[.originalImage] as? UIImage {
                onImagePicked(image)
            }

            onDismiss()
        }

        func imagePickerControllerDidCancel(_ picker: UIImagePickerController) {
            onDismiss()
        }


    }

}

Schritt 2: Ein Foto aufnehmen und anzeigen

Nachdem der Benutzer ein Foto aufgenommen hat, wollen wir dieses in unserer App anzeigen. Dies erreichen wir durch die Implementierung einer einfachen View:

import SwiftUI

struct ContentView: View {
    @State var showCameraPicker = false
    @State var selectedImage: UIImage?
    var body: some View {
        NavigationStack {
            VStack {
                if let image = selectedImage {
                    Image(uiImage: image)
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                        .cornerRadius(10)
                        .padding()
                } else {
                    Text("Please take a picture")
                }
            }
            .padding()
            .navigationTitle("Upload photo")
            .navigationBarTitleDisplayMode(.inline)
            .toolbar {
                Button(action: {
                    showCameraPicker = true
                }, label: {
                    Image(systemName: "plus.circle.fill")
                })
            }
            .fullScreenCover(isPresented: $showCameraPicker) {
                CamerPickerView { image in
                    selectedImage = image
                    showCameraPicker = false
                }
            }
        }

    }
}

Das komplette Beispiel zeigt, wie man die Kamerafunktionalität nahtlos in SwiftUI-Apps integriert. Du findest den vollständigen Code am Ende dieses Beitrags.

Warum es wichtig ist

Mit diesem Ansatz kannst du schnell und einfach Fotofunktionen in deine Apps integrieren, was die Benutzererfahrung erheblich verbessert.

Schau dir das beigefügte Video an, um eine schrittweise Anleitung zu erhalten und zu sehen, wie alles in Aktion aussieht.