[SWIFT] Entwicklung der iOS-App: Timer-App (9. Passen Sie die Farbe des Fortschrittsbalkens an)

Artikel

Die Punkte zum Erstellen einer Timer-App werden in mehreren Artikeln veröffentlicht. In diesem Artikel werde ich Ihnen zeigen, wie Sie Ihre eigene Abstufungsfarbe auf den Fortschrittsbalken anwenden und den Farbton im Laufe der Zeit ändern.

Umgebung

• OS: macOS 10.15.7 (Catalina)
• Herausgeber: Xcode 12.1
• Sprache: Schnell
• Verwendete Hauptbibliothek: SwiftUI

Git-Repository

Sie können den Beispielcode unter der folgenden Git-Repository-URL sehen. https://github.com/msnsk/Qiita_Timer.git

Verfahren

1. Überlegen Sie, welche Farbe der Fortschrittsbalken haben soll
2. Erstellen Sie in ProgressBarView eine Eigenschaft, um den sich ändernden Farbtonwert (Hue) zu speichern.
3. Erstellen Sie eine Methode zum Generieren eines Verlaufs in ProgressBarView
4. Fügen Sie dem Farbargument des Modifikators .stroke in Circle () im Fortschrittsbalken eine Methode hinzu.
5. Fügen Sie ProgressBarView den Modifikator .onReceive hinzu, damit sich die Farbe des Fortschrittsbalkens weiter ändert

1. Überlegen Sie, welche Farbe der Fortschrittsbalken haben soll

Überlegen Sie, wie Sie die Farbe des Fortschrittsbalkens schön ausdrücken können. Dies kann von Person zu Person variieren. In meinem Fall hielt ich die folgenden zwei Punkte für wichtig. Eine besteht darin, die Abstufung anstelle einer einzelnen Farbe vorzunehmen. Das andere ist, dass sich die Farbe im Laufe der Zeit ändert. Implementieren Sie diese beiden, um den visuellen Eindruck Ihrer App zu verbessern.

2. Erstellen Sie in ProgressBarView eine Eigenschaft, um den sich ändernden Farbtonwert (Hue) zu speichern.

Sie benötigen mindestens zwei Farben, um einen Farbverlauf zu erstellen. Ich werde diese beiden Farben selbst machen.

In Swift gibt es verschiedene Möglichkeiten, eine Farbe anzugeben. Es erfüllt auch gängige Farbstandards. Zum Beispiel RGB, CMYK, HSB.

Einfach ausgedrückt, drückt RGB die Farbe durch die Menge jeder der drei Grundfarben Rot, Grün und Blau aus. Alle drei Farben sind 100% Weiß und 0% Schwarz.

CMYK sind die drei Grundfarben + K: Schwarz, und im Gegensatz zu RGB sind alle drei Farben 100% Schwarz und 0% Weiß. Ich denke, es ist leicht zu verstehen, wenn Sie sich einen Tintenstrahldrucker vorstellen.

Und HSB repräsentiert eine Farbe nach Farbton, Sättigung und Helligkeit. Der Farbton gibt an, wie viele Farben vorhanden sind. Die Sättigung gibt an, wie stark die Farbe ist (0 ist monoton). Die Helligkeit beträgt 100% Weiß, sodass die Farbe nicht matschig ist.

Wenn man bedenkt, dass die Farbe am Ende immer geändert wird, wenn es sich um HSB handelt, scheint es einfach zu sein, sie anzupassen, wenn nur der Farbtonwert geändert wird und Sättigung und Helligkeit festgelegt sind. Daher übernehmen wir hier die Farbspezifikation in HSB. Machen.

Fügen Sie nun der ProgressBarView zwei Eigenschaften hinzu, um den Farbton (Farbton) zu speichern. Nennen wir es customHueA bzw. customHueB.

Bei der Angabe einer Farbe in HSB erfordert Color () die folgenden Argumente. Jeder Datentyp ist CGFloat mit einem Mindestwert von 0,0 und einem Höchstwert von 1,0.

Color(hue:, saturation:, brightness:)

Ersetzen Sie daher vorerst 0,5 und 0,3 als Anfangswerte der neu hinzugefügten Hue-Eigenschaftswerte. Halten Sie die Farben relativ nah, wobei 0,5 bläulichgrün und 0,3 gelblichgrün ist.

Wenn es beispielsweise 0,0 und 0,5 ist, sind die Farbtöne entgegengesetzt und die Mitte neigt dazu, schlammig zu sein, wenn die endgültige Abstufung vorgenommen wird. Daher ist der Farbtonunterschied hier auf 0,2 begrenzt. Übrigens haben Farbton 0.0 und Farbton 1.0 die gleiche Farbe.

ProgressBarView

struct ProgressBarView: View {
    @EnvironmentObject var timeManager: TimeManager
    
    @State var costomHueA = 0.5
    @State var costomHueB = 0.3

    var body: some View {
        //(Kürzung)
    }
}

3. Erstellen Sie eine Methode zum Generieren eines Verlaufs in ProgressBarView

Als Nächstes erstellen wir aus den beiden Eigenschaften, in denen der Farbtonwert gespeichert ist, eine Methode, mit der eine Abstufung erstellt wird, die für einen kreisförmigen Fortschrittsbalken geeignet ist.

Der Name der Methode lautet makeGradientColor.

Die Argumente sind hueA und hueB, die Daten vom doppelten Typ annehmen. Ich habe vor, die Eigenschaft, die ich zuvor erstellt habe, hier zu platzieren.

Der Datentyp des Rückgabewerts ist AngularGradient mit einem konischen Gradienten. Übrigens gibt es andere Swift-Abstufungen wie LinearGradient und RadialGradient. Der Winkelverlauf ist eine Abstufung, die in Richtung des Umlaufens des Kreises angewendet wird.

func makeGradientColor(hueA: Double, hueB: Double) -> AngularGradient {}

Schreiben Sie als Nächstes in das {} der Methode makeGradientColor. Bereiten Sie zunächst im {} der Methode die Eigenschaft vor, mit der die beiden für die Abstufung erforderlichen Farben erstellt werden.

ColorA erstellt eine Farbe aus dem Wert des hueA-Arguments. Dies enthält die ProgressBarView-Eigenschaft costomHueA. In ähnlicher Weise erstellt ColorB eine Farbe aus dem Wert des Arguments hueB. CostomHueB wird hier aufgenommen.

Sowohl ColorA als auch ColorB haben die gleichen Werte für Sättigung und Helligkeit. Es ist wieder etwas höher und die Helligkeit ist viel höher.

func makeGradientColor(hueA: Double, hueB: Double) -> AngularGradient {
let colorA = Color(hue: hueA, saturation: 0.75, brightness: 0.9)
let colorB = Color(hue: hueB, saturation: 0.75, brightness: 0.9)
}

Und schließlich machen Sie eine konische Abstufung aus den beiden Farben, die Sie gemacht haben. Sie erstellen eine Instanz der AngularGradient-Struktur, in der Sie den Initialisierer .init () in den Argumentverlauf einfügen und in diesem Argument die Farben vom Anfang bis zum Ende des Verlaufs in Array einfügen.

Wenn Sie hier Folgendes tun, werden die Farben klar getrennt, wenn sich Start- und Endpunkt des Kreises überlappen.

[colorA, colorB]

Wenden Sie daher erneut eine Abstufung von Farbe B auf Farbe A an, wie unten gezeigt.

[colorA, colorB, colorA]

Sie können auch Farben in der Mitte platzieren, um feinere Anpassungen vorzunehmen. Zum Beispiel ist es wie folgt. Hier werde ich es auf eine Abstufung mit zwei Farben beschränken.

[colorA, colorB, colorC, colorD, colorA]

func makeGradientColor(hueA: Double, hueB: Double) -> AngularGradient {
let colorA = Color(hue: hueA, saturation: 0.75, brightness: 0.9)
let colorB = Color(hue: hueB, saturation: 0.75, brightness: 0.9)
let gradient = AngularGradient(gradient: .init(colors: [colorA, colorB, colorA]), center: .center, startAngle: .zero, endAngle: .init(degrees: 360))
return gradient
}

Die Methode wird unter body {} beschrieben.

ProgressBarView

struct ProgressBarView: View {
    @EnvironmentObject var timeManager: TimeManager
    
    @State var costomHueA = 1.0
    @State var costomHueB = 0.5

    var body: some View {
        //(Kürzung)
    }

    func makeGradientColor(hueA: Double, hueB: Double) -> AngularGradient {
        let colorA = Color(hue: hueA, saturation: 0.75, brightness: 0.9)
        let colorB = Color(hue: hueB, saturation: 0.75, brightness: 0.9)
        let gradient = AngularGradient(gradient: .init(colors: [colorA, colorB, colorA]), center: .center, startAngle: .zero, endAngle: .init(degrees: 360))
        return gradient
    }
}

4. Fügen Sie dem Farbargument des Modifikators .stroke in Circle () im Fortschrittsbalken eine Methode hinzu.

Zuvor wurde die Farbe des Kreises im Fortschrittsbalken im Argument des Modifikators .stroke als einfarbiges Cyan angegeben.

.stroke(Color(.cyan), style: StrokeStyle(lineWidth: 20, lineCap: .round, lineJoin: .round))

Fügen Sie nun die soeben erstellte Methode als Argument anstelle von Color (.cyan) ein. Geben Sie in die Methodenargumente hueA und hueB die zuvor vorbereiteten Eigenschaften costomHueA und costomHueB ein.

.stroke(self.makeGradientColor(hueA: costomHueA, hueB: costomHueB), style: StrokeStyle(lineWidth: 20, lineCap: .round, lineJoin: .round))

Der gesamte Code sieht folgendermaßen aus:

ProgressBarView

struct ProgressBarView: View {
    @EnvironmentObject var timeManager: TimeManager
    
    @State var costomHueA = 1.0
    @State var costomHueB = 0.5

    var body: some View {
        ZStack {
            //(Kreis für Hintergrund weggelassen)
            
            //Kreis für Fortschrittsbalken
            Circle()
                .trim(from: 0, to: CGFloat(self.timeManager.duration / self.timeManager.maxValue))
                //Wenden Sie die von der Methode erzeugte Verlaufsfarbe an
                .stroke(self.makeGradientColor(hueA: costomHueA, hueB: costomHueB), style: StrokeStyle(lineWidth: 20, lineCap: .round, lineJoin: .round))
                .scaledToFit()
                //Stellen Sie die Startposition der Konturlinie auf 12 Uhr ein
                .rotationEffect(Angle(degrees: -90))
                .padding(15)
        }
    }

    func makeGradientColor(hueA: Double, hueB: Double) -> AngularGradient {
        let colorA = Color(hue: hueA, saturation: 0.75, brightness: 0.9)
        let colorB = Color(hue: hueB, saturation: 0.75, brightness: 0.9)
        let gradient = AngularGradient(gradient: .init(colors: [colorA, colorB, colorA]), center: .center, startAngle: .zero, endAngle: .init(degrees: 360))
        return gradient
    }
}

5. Fügen Sie ProgressBarView den Modifikator .onReceive hinzu, damit sich die Farbe des Fortschrittsbalkens weiter ändert

In Schritt 4 konnten Sie den Fortschrittsbalken in Abstufung anzeigen, indem Sie ihn anhand des Farbtons der Eigenschaft angeben.

Darüber hinaus löst der Modifikator onReceive die timer-Eigenschaft (Timer.publish () -Methode) der TimeManager-Klasse aus, um die Werte der Farbtoneigenschaften costomHueA und costomHueB alle 0,05 Sekunden zu ändern und die Farbe des Fortschrittsbalkens zu ändern. Ich werde mich weiter verändern.

Addieren Sie den Farbtonwert alle 0,05 Sekunden um 0,005. Wenn Sie die Farbe langsamer ändern möchten, ist 0,001 besser, und wenn Sie die Farbe langsamer ändern möchten, ist 0,01 besser. Wenn Sie den Wert weiter erhöhen, flackert die Farbe nur und die Bewegung verletzt Ihre Augen.

Da 1.0 der Maximalwert für den Farbton ist, beschreiben Sie ihn mit einer if-Anweisung, damit er bei Erreichen von 1.0 auf 0.0 zurückkehrt.

.onReceive(timeManager.timer) { _ in
    self.costomHueA += 0.005
    if self.costomHueA >= 1.0 {
        self.costomHueA = 0.0
    }

Schreiben Sie dies für costomHueB auf die gleiche Weise. Der gesamte Code sieht folgendermaßen aus:

ProgressBarView

struct ProgressBarView: View {
    @EnvironmentObject var timeManager: TimeManager
    
    @State var costomHueA = 0.5
    @State var costomHueB = 0.3
    
    var body: some View {
        ZStack {
            //Kreis für Hintergrund
            Circle()
                .stroke(Color(.darkGray), style: StrokeStyle(lineWidth: 20))
                .scaledToFit()
                .padding(15)
            
            //Kreis für Fortschrittsbalken
            Circle()
                .trim(from: 0, to: CGFloat(self.timeManager.duration / self.timeManager.maxValue))
                //Wenden Sie die von der Methode erzeugte Verlaufsfarbe an
                .stroke(self.makeGradientColor(hueA: costomHueA, hueB: costomHueB), style: StrokeStyle(lineWidth: 20, lineCap: .round, lineJoin: .round))
                .scaledToFit()
                //Stellen Sie die Startposition der Konturlinie auf 12 Uhr ein
                .rotationEffect(Angle(degrees: -90))
                .padding(15)
        }
        //Alle 0.Wird alle 05 Sekunden aktiviert
        .onReceive(timeManager.timer) { _ in
            self.costomHueA += 0.005
            if self.costomHueA >= 1.0 {
                self.costomHueA = 0.0
            }
            self.costomHueB += 0.005
            if self.costomHueB >= 1.0 {
                self.costomHueB = 0.0
            }
        }
    }
    
    func makeGradientColor(hueA: Double, hueB: Double) -> AngularGradient {
        let colorA = Color(hue: hueA, saturation: 0.75, brightness: 0.9)
        let colorB = Color(hue: hueB, saturation: 0.75, brightness: 0.9)
        let gradient = AngularGradient(gradient: .init(colors: [colorA, colorB, colorA]), center: .center, startAngle: .zero, endAngle: .init(degrees: 360))
        return gradient
    }
}

Jetzt haben Sie einen kreisförmigen Fortschrittsbalken mit einer schönen Abstufung und einem sich ständig ändernden Farbton.