Creare un’interfaccia utente in SwiftUI per controllare la torcia del tuo dispositivo iOS

In questa esercitazione, svilupperemo un’app iOS che userà SwiftUI per creare un’interfaccia utente (UI) interattiva per controllare la torcia del tuo dispositivo.

Il codice sarà strutturato in modo da permettere all’utente di accendere e spegnere la torcia premendo un pulsante. Quando la torcia è accesa, mostreremo un’immagine con la dicitura “ON AIR” e quando è spenta, l’immagine diventerà invisibile.

Vediamo il codice passo per passo:

import SwiftUI
import AVFoundation

All’inizio del file, importiamo i framework necessari. SwiftUI ci offre gli strumenti per costruire l’interfaccia utente, mentre AVFoundation ci permette di controllare l’hardware della fotocamera, che include la torcia.

struct ContentView: View {
    @State private var torch = false

Qui definiamo una nuova struct chiamata ContentView che aderisce al protocollo View di SwiftUI. Questa sarà la vista principale della nostra app. L’attributo @State è una proprietà di SwiftUI che permette di creare una variabile reattiva. In questo caso, stiamo usando torch per tracciare se la torcia è accesa (true) o spenta (false).

var body: some View {
        ZStack {
            onAirView

            VStack {
                Spacer()
                actionButton
            }
        }
        .padding()
        .background(Color.black)
        .edgesIgnoringSafeArea(.all)
    }

Il blocco body definisce la struttura principale dell’interfaccia utente. ZStack impila le viste l’una sopra l’altra. La nostra onAirView viene mostrata prima, seguita da un VStack che contiene un pulsante di azione (actionButton).

Notiamo che abbiamo impostato lo sfondo su nero utilizzando .background(Color.black) e abbiamo fatto sì che lo sfondo si estenda fino ai bordi dello schermo con .edgesIgnoringSafeArea(.all).

var onAirView: some View {
        VStack {
            Image("on_air")
                .resizable()
                .scaledToFit()
                .opacity(torch ? 1.0 : 0.0)
            Spacer()
        }
    }

onAirView è un’altra vista personalizzata. Qui, un’immagine con la dicitura “ON AIR” viene mostrata se la torcia è accesa. La vista Image viene resa ridimensionabile e adatta alla sua contenitore con .resizable() e .scaledToFit(). L’immagine diventa completamente trasparente quando la torcia è spenta, rendendola invisibile, grazie a .opacity(torch ? 1.0 : 0.0). Il Spacer() posiziona l’immagine in alto nello schermo.

var actionButton: some View {
        Button(action: {
            torch.toggle()
            toggleTorch(on: torch)
        }) {
            ZStack {
                if torch {
                    Color.red
                    Image(systemName: "power").foregroundColor(.white)
                }
                else {
                    Color.blue.opacity(0.1)
                    Image(systemName: "power").foregroundColor(.secondary)
                }
            }.frame(maxWidth:50, maxHeight: 50)
            .cornerRadius(15)
        }
    }

actionButton è il pulsante che l’utente preme per accendere o spegnere la torcia. Il colore e l’icona del pulsante cambiano in base allo stato della torcia. Usiamo la funzione toggleTorch(on:) per cambiare effettivamente lo stato della torcia sul dispositivo.