Tracciare il progresso dell’anno corrente in SwiftUI

Nell’ambito dello sviluppo di applicazioni, esistono numerose situazioni in cui potrebbe essere utile visualizzare una progress bar per tracciare il progresso di un’attività. In questo articolo, discuteremo come abbiamo implementato una progress bar in SwiftUI che traccia il progresso dell’anno corrente, mostrando non solo una barra di progresso visiva, ma anche una rappresentazione testuale che può essere facilmente copiata negli appunti.

Parte 1: Scelte progettuali

Il nostro obiettivo principale era creare un’app che potesse tracciare il progresso dell’anno corrente in modo visivo e testuale. Per realizzare ciò, abbiamo utilizzato SwiftUI, uno dei framework più potenti di Apple per lo sviluppo di interfacce utente. Ecco le variabili di stato che abbiamo definito all’inizio del nostro ContentView:

@State private var progress: Float = 0.0
@State private var monthsElapsed: Int = 0
@State private var daysElapsed: Int = 0
@State private var hoursElapsed: Int = 0
@State private var minutesElapsed: Int = 0
@State private var secondsElapsed: Int = 0

Queste variabili rappresentano il progresso dell’anno corrente e le unità di tempo trascorse dall’inizio dell’anno. Utilizzando @State, SwiftUI rileva automaticamente quando queste variabili vengono aggiornate e aggiorna l’interfaccia utente di conseguenza.

Parte 2: Calcolo del progresso

Il cuore del nostro codice risiede nella funzione calculateProgress(). Questa funzione calcola l’intervallo di tempo dall’inizio dell’anno ad ora, e lo divide per l’intervallo di tempo totale dell’anno per ottenere il progresso come un valore frazionario. Questo valore viene poi moltiplicato per 100 per ottenere una percentuale.

let elapsedSeconds = now.timeIntervalSince(startOfYear)
let totalSeconds = endOfYear.timeIntervalSince(startOfYear)
progress = Float(elapsedSeconds / totalSeconds)

Oltre a ciò, calculateProgress() calcola anche il numero di mesi, giorni, ore, minuti e secondi trascorsi dall’inizio dell’anno. Fa ciò utilizzando il metodo dateComponents(_:from:to:) dell’oggetto Calendar.current.

Parte 3: Visualizzazione del progresso

Per visualizzare il progresso, abbiamo utilizzato la classe ProgressView di SwiftUI. Questa vista è configurata per mostrare il progresso come una barra di avanzamento, con il valore del progresso impostato sul valore della variabile di stato progress.

ProgressView(value: progress)
    .progressViewStyle(LinearProgressViewStyle(tint: .blue))
    .frame(width: UIScreen.main.bounds.width * 0.8)
    .padding(.bottom, 20)

Oltre alla progress bar, abbiamo aggiunto delle etichette per mostrare il numero di mesi, giorni, ore, minuti e secondi trascorsi dall’inizio dell’anno.

Parte 4: Generazione di una barra di avanzamento testuale

Abbiamo anche voluto dare agli utenti la possibilità di copiare una rappresentazione testuale della progress bar negli appunti. Per realizzare ciò, abbiamo aggiunto un pulsante alla barra di navigazione che genera una stringa di progress bar quando viene premuto.

let filledSection = String(repeating: "▓", count: Int(progress * 20))
let unfilledSection = String(repeating: "░", count: 20 - Int(progress * 20))
let progressBarString = "\(filledSection)\(unfilledSection) \(Int(progress * 100))%"

Questo codice genera una stringa di progress bar con 20 caratteri totali. Il numero di “▓” nella stringa corrisponde alla percentuale del progresso.

Parte 5: Copia della barra di avanzamento negli appunti

Per copiare la barra di avanzamento negli appunti, abbiamo utilizzato il framework UIKit di Apple. Poiché UIKit non è nativamente compatibile con SwiftUI, abbiamo dovuto usare UIPasteboard.general.string per interagire con gli appunti.

Button(action: {
    UIPasteboard.general.string = progressBarString
}) {
    Image(systemName: "doc.on.doc")
}

Con questo codice, ogni volta che l’utente preme il pulsante, la stringa di progress bar viene copiata negli appunti, pronta per essere incollata in un’altra app o condivisa con qualcun altro.

Questo un esempio della barra testuale generata dal codice:

▓▓▓▓▓▓▓░░░░░░░ 50%

Qui, il reposity della app su GitHub.