[SWIFT] iOS App Entwicklung: Timer App (4. Implementierung des Countdowns)

Inhalt

Die Punkte zum Erstellen einer Timer-App werden in mehreren Artikeln veröffentlicht. In diesem Artikel werde ich das Verfahren beschreiben, mit dem die Anzeige der verbleibenden Zeit jede Sekunde mit dem Countdown-Timer aktualisiert wird.

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. Fügen Sie der TimeManager-Klasse die Veröffentlichungsmethode der Timer-Klasse hinzu
2. Aktualisieren Sie die Anzeige der verbleibenden Zeit in MainView jede Sekunde

1. Fügen Sie der TimeManager-Klasse die Veröffentlichungsmethode der Timer-Klasse hinzu

Zu diesem Zeitpunkt ändert das Drücken der Starttaste den Timer-Status in .running, aber der Bildschirm zählt die verbleibende Zeit noch nicht herunter. Der Bildschirm bleibt zu der von Picker festgelegten Zeit.

Daher werden wir eine Countdown-Anzeige der verbleibenden Zeit implementieren, die das Herzstück dieser Timer-App ist.

Es ist auch in der SwiftUI-Bibliothek enthalten, verwendet jedoch eine Methode namens Publish einer Klasse namens Timer, die in der Foundation-Bibliothek bereitgestellt wird, die die Basis der Swift-Sprache bildet.

Durch Schreiben wie folgt wird der Zeitgeber, der jedes Mal (1 Sekunde) aktiviert wird, das durch das Argument jeder Veröffentlichungsmethode angegeben wird, im variablen Zeitgeber gespeichert. Wenn Sie dies auf der Ansichtsseite verwenden, ist dies ein Auslöser, wenn Sie jede Sekunde eine Aktion aktivieren möchten. Hier wird die Timer-App als Auslöser verwendet, wenn die verbleibende Zeit jede Sekunde aktualisiert wird.

TimeManager.swift

class TimeManager: ObservableObject {
    //(Andere Eigenschaften weggelassen)

    //Die Veröffentlichungsmethode der Timer-Klasse, die jede Sekunde aktiviert wird
    var timer = Timer.publish(every: 1, on: .main, in: .common).autoconnect()

    //(Methode weggelassen)
}

2. Aktualisieren Sie die Anzeige der verbleibenden Zeit in MainView jede Sekunde

Fügen Sie den Modifikator .onReceive zum äußersten ZStack hinzu, der die TimerView in der MainView enthält. Es wird in allen Ansichten in ZStack angezeigt.

Dieser Modifikator .onReceive empfängt jede Sekunde den Trigger des TimeManager-Klassen-Timers. Schreiben Sie anschließend im Abschluss den Code, der bei jeder Aktivierung des Timers ausgeführt werden soll.

Schreiben Sie in der Guard let ~ else-Syntax return in den Closure, damit nichts ausgeführt wird, wenn der Timer-Status nicht .running ist. Wenn der Timer-Status .running lautet, fahren Sie mit der if-Anweisung darunter fort.

Wenn in der if-Anweisung die verbleibende Zeit größer als 0 ist, subtrahieren Sie 1 Sekunde von der verbleibenden Zeit. Wenn die verbleibende Zeit 0 oder weniger beträgt, ändern Sie den Timer-Status in .stopped.

MainView.swift

struct MainView: View {
    @EnvironmentObject var timeManager: TimeManager
    
    var body: some View {
        ZStack {
            if timeManager.timerStatus == .stopped {
                PickerView()
            } else {
                TimerView()
            }
            
            VStack {
                Spacer()
                ButtonsView()
                    .padding(.bottom)
            }
        }
        //Führt den Code im Abschluss aus, der von einem Timer ausgelöst wird, der jedes Mal aktiviert wird (1 Sekunde).
        .onReceive(timeManager.timer) { _ in
            //Der Timer-Status ist.Mach nichts außer rennen
            guard self.timeManager.timerStatus == .running else { return }
            //Wenn die verbleibende Zeit größer als 0 ist
            if self.timeManager.duration > 0 {
                //Von der verbleibenden Zeit-Ich mache
                self.timeManager.duration -= 1
                //Wenn die verbleibende Zeit 0 oder weniger beträgt
            } else {
                //Timer-Status.Wechseln Sie zu gestoppt
                self.timeManager.timerStatus = .stopped
            }
        }
    }
}

Jetzt sieht es aus wie ein Countdown-Timer. Nächstes Mal werden wir Alarme implementieren.