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.

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()
  }
 
 
  }
 
 }

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.

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.