TB IT-Solutions
Sonntag, 12. Juli 2020

Progressbar mit SwiftUI

In diesem Tutorial zeige ich euch, wie man eine Progressbar mit Hilfe von SwiftUI erstellen kann. So wird unser Ergebnis aussehen:

Schritt 1

Als erstes überlegen wir uns welche Werte unsere Progressbar benötigt:
- einen aktuellen Wert
- einen maximalen Wert
- einen Hintergrund?
- Farbe des Fortschrittbalkens

Anhand dieser Überlegung erstellen wir eine neue leere SwiftUI View mit dem Namen ProgressBar und fügen die Werte, die wir uns überlegt haben in die View ein.

struct ProgressBar: View {
    var value: Double
    var maxValue: Double
    var useBackground: Bool = true
    var backgroundColor: Color = Color(white: 0.75)
    var foregroundColor: Color = .red
    
    var body: some View {
        Text("ProgressBar")
    }
}

Schritt 2

Nun beginnen wir die View aufzubauen: Mit Hilfe des GeometryReaders können wir die Größe der Elternview benutzen und unsere View entsprechend anpassen (1). Da wir zum einen den Fortschritt aber auch den anzuzeigenden Hintergrund übereinander legen möchten, legen wir die Capsule in einen ZStack(2). Über den Bool Wert für den Hintergrund geben wir an, ob wir einen Hintergrund haben möchten. Falls ja, fügen wir als erstes eine zusätzliche Capsuleein und damit den Hintergrund darzustellen (3).

  var body: some View {
    /// 1
    GeometryReader { geometry in
        /// 2
        ZStack(alignment: .leading) {
            /// 3
            if self.useBackground {
                /// This is the background capsule
                Capsule()
                    .frame(width: geometry.size.width, height: 10)
                    .foregroundColor(self.backgroundColor)
            }
            /// This capsule represents our progress
            Capsule()
                .frame(width: geometry.size.width)
                .foregroundColor(self.foregroundColor)
                .animation(.easeIn)
        }.padding()
    }
}

Mehr müssen wir in dieser View nicht machen. Was nun noch bleibt, ist den Fortschrittsbalken zu berechnen. Das machen wir in Schritt 3.

Schritt 3

Zum Schluss müssen wir nur noch die Breite unseres Fortschrittbalkens dynamisch berechnen. Hierfür legen wir eine private Methode in unserer View an.

private func calculateProgress(value: Double,
                               maxValue: Double,
                               width: CGFloat) -> CGFloat {
    let percentage = value / maxValue
    return width * CGFloat(percentage)
}

Nachdem wir nun den Fortschritt (Breite des Balkens) anhand des internen Wertes ermitteln können, müssen wir unsere Methode nur noch aufrufen. Der Aufruf erfolgt bei (4).

  var body: some View {
    GeometryReader { geometry in
        ZStack(alignment: .leading) {
            if self.useBackground {
                Capsule()
                    .frame(width: geometry.size.width, height: 10)
                    .foregroundColor(self.backgroundColor)
            }
            Capsule()
                /// 4
                .frame(width: self.calculateProgress(value: self.value,
                                                     maxValue: self.maxValue,
                                                     width: geometry.size.width),
                       height: 10)
                .foregroundColor(self.foregroundColor)
                .animation(.easeIn)
        }.padding()
    }
}

Das war es auch schon. In diesem Tutorial haben wir gelernt, wie wir einen Fortschrittsbalken mit Hilfe einer eigenen View erstellen. Diese Komponente können wir nun in jeder anderen View benutzen.

Ich hoffe euch hat dieses kleine Tutorial gefallen. Weitere Tutorials folgen in Kürze.

Youtube Video

Tags: