SwiftHTML & CSSSolidityDesenvolvimento de JogosSolana/Rust
24.11.2024

Aula 126: Usando a Câmera e a Biblioteca de Fotos no SwiftUI

Nesta aula, exploraremos como acessar a câmera e a biblioteca de fotos em um aplicativo SwiftUI. Usar a câmera permite que os usuários tirem fotos diretamente no aplicativo, enquanto acessar a biblioteca de fotos permite que eles selecionem imagens existentes. Usaremos o UIImagePickerController do UIKit, que podemos integrar ao nosso aplicativo SwiftUI usando um UIViewControllerRepresentable.

Configurando o Projeto

  1. Crie um novo projeto SwiftUI no Xcode.
  2. Certifique-se de adicionar as permissões necessárias para acesso à câmera e à biblioteca de fotos no seu arquivo Info.plist:
    <key>NSCameraUsageDescription</key>
    <string>Precisamos de acesso à sua câmera para tirar fotos.</string>
    <key>NSPhotoLibraryUsageDescription</key>
    <string>Precisamos de acesso à sua biblioteca de fotos para selecionar fotos.</string>

Criando um Seletor de Imagens

Vamos criar uma struct que conforma ao UIViewControllerRepresentable para apresentar o seletor de imagens:

import SwiftUI
import UIKit

struct ImagePicker: UIViewControllerRepresentable {
    @Binding var isPresented: Bool
    @Binding var selectedImage: UIImage?
    var sourceType: UIImagePickerController.SourceType

    class Coordinator: NSObject, UINavigationControllerDelegate, UIImagePickerControllerDelegate {
        var parent: ImagePicker

        init(parent: ImagePicker) {
            self.parent = parent
        }

        func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) {
            if let image = info[.originalImage] as? UIImage {
                parent.selectedImage = image
            }
            parent.isPresented = false
        }

        func imagePickerControllerDidCancel(_ picker: UIImagePickerController) {
            parent.isPresented = false
        }
    }

    func makeCoordinator() -> Coordinator {
        Coordinator(parent: self)
    }

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

    func updateUIViewController(_ uiViewController: UIImagePickerController, context: Context) {
        // Não é necessário atualizar a UI
    }
}

Construindo a Interface do Usuário

Agora, vamos criar uma interface do usuário simples que permita ao usuário escolher entre tirar uma foto com a câmera ou selecionar uma da biblioteca de fotos.

struct ContentView: View {
    @State private var isImagePickerPresented: Bool = false
    @State private var selectedImage: UIImage? = nil
    @State private var sourceType: UIImagePickerController.SourceType = .photoLibrary

    var body: some View {
        VStack {
            if let image = selectedImage {
                Image(uiImage: image)
                    .resizable()
                    .scaledToFit()
                    .frame(width: 300, height: 300)
                    .cornerRadius(10)
            }

            HStack {
                Button("Câmera") {
                    sourceType = .camera
                    isImagePickerPresented.toggle()
                }
                .disabled(!UIImagePickerController.isSourceTypeAvailable(.camera))

                Button("Biblioteca de Fotos") {
                    sourceType = .photoLibrary
                    isImagePickerPresented.toggle()
                }
            }
            .padding()
        }
        .sheet(isPresented: $isImagePickerPresented) {
            ImagePicker(isPresented: $isImagePickerPresented, selectedImage: $selectedImage, sourceType: sourceType)
        }
        .padding()
    }
}

Rodando o Aplicativo

Com a interface do usuário configurada, você pode agora rodar seu aplicativo. Toque nos botões para lançar a câmera ou selecionar uma imagem da biblioteca de fotos. Assim que uma imagem for selecionada ou capturada, ela será exibida na tela.

Conclusão

Nesta aula, aprendemos a criar um seletor de imagens no SwiftUI usando UIViewControllerRepresentable. Abordamos como apresentar tanto a câmera quanto as opções da biblioteca de fotos e como lidar com as imagens selecionadas. Essa abordagem permite uma maneira flexível de integrar componentes do UIKit ao SwiftUI, possibilitando uma funcionalidade mais ampla dentro de suas aplicações. Boa programação!

Video

Did you like this article? Rate it from 1 to 5:

Thank you for voting!