[SWIFT] iOS App Entwicklung: Timer App (1. Timer Zeiteinstellung)
Inhalt
Die Punkte zum Erstellen einer Timer-App werden in mehreren Artikeln veröffentlicht. In diesem Artikel werde ich über das Erstellen einer Ansicht schreiben, in der die maximale Zeit für den Countdown bis zum Timer festgelegt 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
- Erstellen Sie eine TimeManager-Klasse
- Erstellen Sie eine Eigenschaft zum Speichern der Countdown-Zeit in TimeManager
- Erstellen Sie PickerView
- Platzieren Sie den Picker in der PickerView
- Erstellen Sie eine Methode, die die in TimeManager festgelegte Zeit widerspiegelt
- Erstellen Sie eine Methode, um die verbleibende Zeit während des Countdowns in TimeManager anzuzeigen
1. Erstellen Sie eine TimeManager-Klasse
Erstellen Sie eine Datei mit dem Namen TimeManager.swift und erstellen Sie eine Klasse mit demselben Namen. Vorausgesetzt, wir wenden später ein Protokoll namens ObservableObject an. ObservableObject Einfach ausgedrückt, ist das Protokoll erforderlich, um die Eigenschaften von Variablen im Auge zu behalten, deren Werte sich ändern. Wenn Sie eine Eigenschaft (var) vorbereiten, der das Schlüsselwort @Published (Property Wrapper) in einer Klasse vorangestellt ist, auf die dieses Protokoll angewendet wird, kann auf ihren Wert immer aus anderen Ansichten verwiesen werden.
TimeManager.swift
import SwiftUI
class TimeManager: ObservableObject {
}
2. Erstellen Sie eine Eigenschaft zum Speichern der Countdown-Zeit in TimeManager
Bereiten Sie die folgenden fünf Eigenschaften vor, um die Countdown-Zeit festzulegen.
- Eine Eigenschaft, die zeitbasierte Einstellungen speichert
- Eine Eigenschaft, die den Einstellungswert in Minuten speichert
- Eine Eigenschaft, die den Einstellungswert in Sekunden speichert
- Die Eigenschaft der maximalen Zeit vor dem Start des Countdowns, die die Summe der oben genannten drei ist
- Eine Eigenschaft, deren Wert während des Countdowns weiter abnimmt, wobei der Gesamtwert der Maximalwert ist.
Da Stunden, Minuten und Sekunden von Picker als Int-Typ abgerufen werden, geben Sie Int als Datentyp an. Geben Sie andererseits Double für die verbleibende Zeit und die maximale Zeit an. Dies dient dazu, die Werte dieser Eigenschaften später zugänglicher zu machen. Wenn Sie die Datentypen der Variablen bei Berechnungen mit Variablen in der Programmierung nicht vereinheitlichen, tritt ein Fehler auf.
Jede Eigenschaft muss einen Standardwert enthalten, belassen Sie ihn also bei 0.
TimeManager.swift
class TimeManager: ObservableObject {
//Mit Picker einstellen"Zeit"Variable zum Speichern
@Published var hourSelection: Int = 0
//Mit Picker einstellen"Protokoll"Variable zum Speichern
@Published var minSelection: Int = 0
//Mit Picker einstellen"Sekunden"Variable zum Speichern
@Published var secSelection: Int = 0
//Verbleibende Countdown-Zeit
@Published var duration: Double = 0
//Maximale Zeit bis zum Countdown
@Published var maxValue: Double = 0
}
Außerdem möchte ich das Format der Zeitanzeige entsprechend der Länge der eingestellten Countdown-Zeit ändern (z. B. "02:30:00" bei Einstellung auf 2 Stunden 30 Minuten, "05:00" bei Einstellung auf 5 Minuten, bei Einstellung auf 30 Sekunden Ich möchte "30" anzeigen), also erstelle eine Aufzählung.
Erstellen Sie eine neue Datei mit dem Namen Data.swift und eine Aufzählung mit dem Namen TimeFormat.
Data.swift
import SwiftUI
enum TimeFormat {
case hr
case min
case sec
}
Bereiten Sie dann eine Eigenschaft vor, die die in der TimeManager-Klasse erstellte Aufzählung von TimeFormat als Typ angibt, damit das Anzeigeformat angegeben werden kann. Der Standardwert sollte vorerst min sein.
TimeManager.swift
class TimeManager: ObservableObject {
//(Auslassen der zuvor erstellten Eigenschaft)
//Zeitanzeigeformat, das sich abhängig von der eingestellten Zeit von 1 Stunde oder mehr, weniger als 1 Stunde, 1 Minute oder mehr, weniger als 1 Minute, 1 Sekunde oder mehr ändert
@Published var displayedTimeFormat: TimeFormat = .min
}
3. Erstellen Sie PickerView
Erstellen Sie eine neue Datei mit dem Namen PickerView.swift und erstellen Sie einen Ansichtstyp Struct (Struktur) mit demselben Namen.
PickerView.swift
import SwiftUI
struct PickerView: View {
var body: some View {
}
}
Erstellen Sie zunächst die erforderlichen Eigenschaften. Erstellen Sie jetzt eine Instanz der TimeManager-Klasse, die Sie zuvor erstellt haben. Durch das Präfixieren des Schlüsselworts @EnvironmentObject (Property Wrapper) können Sie immer auf den Wert der sich ändernden Variablen von TimeManager verweisen. Das heißt, die Eigenschaft @Published in der Klasse mit dem ObservableObject-Protokoll und die Eigenschaft @EnvironmentObject in der View-Protokollstruktur werden gepaart und immer synchronisiert.
PickerView.swift
struct PickerView: View {
//Erstellen Sie eine Instanz von TimeManager
@EnvironmentObject var timeManager: TimeManager
//Bildschirmbreite des Geräts
let screenWidth = UIScreen.main.bounds.width
//Bildschirmhöhe des Geräts
let screenHeight = UIScreen.main.bounds.height
//Konfigurierbare Zeiteinheitennummer: Array von Ganzzahlen von 0 bis 23
var hours = [Int](0..<24)
//Konfigurierbare Minutenzahl: Array von Ganzzahlen von 0 bis 59
var minutes = [Int](0..<60)
//Konfigurierbare Zahl in Sekunden: Array von Ganzzahlen von 0 bis 59
var seconds = [Int](0..<60)
struct PickerView: View {
var body: some View {
}
}
4. Platzieren Sie den Picker in der PickerView
Verwenden Sie in PickerView HStack, um die folgenden Komponenten horizontal in der Reihenfolge von links anzuordnen.
- Zeitauswahl
- Stunden Text
- Minute Picker
- Text minuten
- Zweiter Picker
- Zweiter Text
Geben Sie für die Auswahl des Time Picker-Arguments die Eigenschaft hourSelection der zuvor erstellten Instanz timeManager an. Dadurch wird der von Picker ausgewählte Wert der gleichnamigen Eigenschaft in der TimeManager-Klasse zugewiesen.
Erzwingen Sie im {} der Auswahl, dass jede eine Zahl in der Auswahl für jede von 0 bis 23 anzeigt, und geben Sie den Wert (einschließlich des Datentyps) an, der erfasst werden soll, wenn die Zeit vom Auswahlmodifikator tatsächlich in der Auswahl ausgewählt wird. .. Der zu erfassende Wert ist vom Typ Int, und die Eigenschaft hourSelection des Reflexionsziels TimeManager wird ebenfalls mit dem Typ Int abgeglichen.
Wenn Sie eine Stundenauswahl haben, geben Sie an, dass die Textkomponente die Einheit "Stunde" anzeigen soll.
Erstellen Sie auf die gleiche Weise Auswahl und Text für Minuten und Sekunden.
PickerView.swift
struct PickerView: View {
//(Beschreibung des Eigenschaftsteils weggelassen)
var body: some View {
//Auswahl von Stunden, Minuten, Sekunden und Text, die jede Einheit in HStack nebeneinander anzeigen
HStack {
//Stündliche Kommissionierung
Picker(selection: self.$timeManager.hourSelection, label: Text("hour")) {
ForEach(0 ..< self.hours.count) { index in
Text("\(self.hours[index])")
.tag(index)
}
}
//Geben Sie einen Radstil an, der sich auf und ab dreht
.pickerStyle(WheelPickerStyle())
//Bildschirmbreite der Auswahlbreite x 0.1, Höhe Bildschirmgröße x 0.Spezifiziert durch 4
.frame(width: self.screenWidth * 0.1, height: self.screenWidth * 0.4)
//Clip mit dem oberen Rahmen und verstecke den Teil, der über den Rahmen hinausragt
.clipped()
//Text, der die Zeiteinheit darstellt
Text("hour")
.font(.headline)
//Minutenpflücker
Picker(selection: self.$timeManager.minSelection, label: Text("minute")) {
ForEach(0 ..< self.minutes.count) { index in
Text("\(self.minutes[index])")
.tag(index)
}
}
.pickerStyle(WheelPickerStyle())
.frame(width: self.screenWidth * 0.1, height: self.screenWidth * 0.4)
.clipped()
//Text, der Minuten darstellt
Text("min")
.font(.headline)
//Picker in Sekunden
Picker(selection: self.$timeManager.secSelection, label: Text("second")) {
ForEach(0 ..< self.seconds.count) { index in
Text("\(self.seconds[index])")
.tag(index)
}
}
.pickerStyle(WheelPickerStyle())
.frame(width:self.screenWidth * 0.1, height: self.screenWidth * 0.4)
.clipped()
//Text, der Sekunden darstellt
Text("sec")
.font(.headline)
}
}
}
5. Erstellen Sie eine Methode, die die in TimeManager festgelegte Zeit widerspiegelt
Erstellen Sie in der TimeManager-Klasse eine Methode namens setTimer. Da Sie die Werte der Zeit-, Minuten- und Sekunden-Eigenschaften von TimeManager in PickerView abrufen können, konvertieren Sie diese Werte in Sekunden, addieren Sie sie und spiegeln Sie sie in den Eigenschaften der verbleibenden Zeit und der maximalen Zeit wider. Gleichzeitig sollte das Zeitanzeigeformat eine bedingte Verzweigung entsprechend der Gesamtzeit sein.
TimeManager.swift
class TimeManager: ObservableObject {
//Mit Picker einstellen"Zeit"Variable zum Speichern
@Published var hourSelection: Int = 0
//Mit Picker einstellen"Protokoll"Variable zum Speichern
@Published var minSelection: Int = 0
//Mit Picker einstellen"Sekunden"Variable zum Speichern
@Published var secSelection: Int = 0
//Verbleibende Countdown-Zeit
@Published var duration: Double = 0
//Maximale Zeit bis zum Countdown
@Published var maxValue: Double = 0
//Zeitanzeigeformat, das sich abhängig von der eingestellten Zeit von 1 Stunde oder mehr, weniger als 1 Stunde, 1 Minute oder mehr, weniger als 1 Minute, 1 Sekunde oder mehr ändert
@Published var displayedTimeFormat: TimeFormat = .min
//Berechnen Sie die verbleibende Countdown-Zeit und die maximale Zeit, bevor der Countdown beginnt, aus dem von Picker erhaltenen Wert.
//Das Zeitanzeigeformat wird ebenfalls durch den Wert angegeben
func setTimer() {
//Berechnen Sie die verbleibende Zeit, indem Sie alle von Picker erhaltenen Werte für Stunden, Minuten und Sekunden in Sekunden umwandeln und summieren.
duration = Double(hourSelection * 3600 + minSelection * 60 + secSelection)
//Wenn die Zeit mit Picker eingestellt ist=Verbleibende Zeit, da der Countdown beginnt=Maximale Zeit
maxValue = duration
//Geben Sie das Zeitanzeigeformat für die verbleibende Zeit an (maximale Zeit).
//00-Format für weniger als 60 Sekunden, 00 für 60 Sekunden oder mehr und weniger als 3600 Sekunden:00 Format, 00 für 3600 Sekunden oder länger:00:00 Format
if duration < 60 {
displayedTimeFormat = .sec
} else if duration < 3600 {
displayedTimeFormat = .min
} else {
displayedTimeFormat = .hr
}
}
}
Fügen Sie außerdem eine Schaltfläche zu PickerView hinzu, damit die obige setTimer-Methode zu dem Zeitpunkt aktiviert werden kann, zu dem die Zeit in PickerView eingestellt wird. Dies liegt daran, dass die Formel aus maximaler Zeit = verbleibende Zeit enthalten ist. Daher ist sie ideal vor dem Countdown, dh unmittelbar nach der Zeiteinstellung.
Verwenden Sie für das Schaltflächensymbol "checkmark.circle.fill" aus den Original-SF-Symbolen von Apple.
Der Modifikator .offset wird gegenüber der Standardplatzierung in der Mitte leicht nach unten platziert und so angepasst, dass er sich nicht mit PickerView überschneidet.
Wenn mit dem Modifikator .opacity die Stunden, Minuten und Sekunden auf 0 gesetzt sind, wird die Transparenz auf 10% (x 0,1) gesetzt und es wird visuell ausgedrückt, dass Sie jetzt nicht tippen können.
Wenn Sie das Argument des Modifikators eingeben, schreiben Sie anstelle von if und else "△△? □□: ○○", um "If △△, dann □□, andernfalls ○○" zu bedeuten. Es ist zweckmäßig, ein Argument zu erhalten, zu dem bedingt verzweigt werden kann. Außerdem bedeutet "&&" "katsu" und wird verwendet, um Fälle auszudrücken, in denen mehrere Bedingungen erfüllt sind.
.Modifikator onTapGesture{}Wenn der Wert der Eigenschaft Stunde, Minute oder Sekunde nicht 0 ist, wird die setTimer-Methode beim Tippen ausgelöst. "" In der if-Anweisung||"" Mittel "oder".
PickerView.swift
struct PickerView: View {
//Erstellen Sie eine Instanz von TimeManager
@EnvironmentObject var timeManager: TimeManager
//Bildschirmbreite des Geräts
let screenWidth = UIScreen.main.bounds.width
//Bildschirmhöhe des Geräts
let screenHeight = UIScreen.main.bounds.height
//Einstellbare Zeiteinheitennummer
var hours = [Int](0..<24)
//Einstellbare Minutenzahl
var minutes = [Int](0..<60)
//Konfigurierbare Nummer in Sekunden
var seconds = [Int](0..<60)
var body: some View {
//Ordnen Sie die Schaltflächen so an, dass sie sich mit Picker in ZStack überschneiden
ZStack{
//Auswahl von Stunden, Minuten, Sekunden und Text, die jede Einheit in HStack nebeneinander anzeigen
HStack {
//(Pickerteil weggelassen)
}
//Aktivieren Sie das Markierungssymbol, um die Einstellung durch Tippen zu bestätigen
Image(systemName: "checkmark.circle.fill")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 35, height: 35)
.offset(y: self.screenWidth * 0.32)
.opacity(self.timeManager.hourSelection == 0 && self.timeManager.minSelection == 0 && self.timeManager.secSelection == 0 ? 0.1 : 1)
.onTapGesture {
if self.timeManager.hourSelection != 0 || self.timeManager.minSelection != 0 || self.timeManager.secSelection != 0 {
self.timeManager.setTimer()
}
}
}
}
}
6. Erstellen Sie eine Methode, um die verbleibende Zeit während des Countdowns in TimeManager anzuzeigen
Machen Sie es zu einer Methode namens displayTimer. Gibt einen Rückgabewert vom Typ String zurück.
Die Berechnung der verbleibenden Zeit ist arithmetisch, aber wie folgt. % Ist übrigens ein Operator, der den Rest der Division berechnen kann.
- Gesamte verbleibende Zeit (Sekunden) / 3600 (Sekunden) = verbleibende Zeit (Stunden)
- Gesamte verbleibende Zeit (Sekunden)% 3600 (Sekunden) / 60 (Sekunden) = verbleibende Zeit (Minuten)
- Gesamte verbleibende Zeit (Sekunden) / 3600 (Sekunden)% 60 (Sekunden) = verbleibende Zeit (Sekunden)
Die drei durch die obige Berechnung erhaltenen numerischen Werte werden nebeneinander auf dem Bildschirm als Zeichenfolgentypdaten angezeigt.
String(format: "%02d:%02d:%02d", hr, min, sec)
Dieser Code wird als String geschrieben (Format: "Geben Sie die Anzahl der Ziffern an", Wert). Insbesondere bedeutet% 02d in "", dass die Gesamtzahl der Ziffern 2 beträgt, und wenn sie weniger als 2 Ziffern beträgt, wird sie mit 0 von der größten Ziffer gefüllt. Dann werden die nach% 02d aufgelisteten Werte durch Kommas getrennt und in der Reihenfolge von links eingegeben.
Auf dem Bildschirm wird beispielsweise Folgendes angezeigt.
--Wenn die verbleibende Zeit 4000 Sekunden beträgt 01:06:40
- Wenn die verbleibende Zeit 350 Sekunden 05:50 beträgt ――Wenn die verbleibende Zeit 7 Sekunden beträgt, 07
TimeManager.swift
class TimeManager: ObservableObject {
//(Kürzung)
//Methode zur Anzeige der verbleibenden Zeit während des Countdowns
func displayTimer() -> String {
//Verbleibende Zeit (Stundeneinheit)=Verbleibende Gesamtzeit (Sekunden)/3600 Sekunden
let hr = Int(duration) / 3600
//Verbleibende Zeit (in Minuten)=Verbleibende Gesamtzeit (Sekunden)/Rest geteilt durch 3600 Sekunden/60 Sekunden
let min = Int(duration) % 3600 / 60
//Verbleibende Zeit (in Sekunden)=Verbleibende Gesamtzeit (Sekunden)/Rest geteilt durch 3600 Sekunden/Rest geteilt durch 60 Sekunden
let sec = Int(duration) % 3600 % 60
//Verzweigen Sie das Zeitanzeigeformat bedingt gemäß dem Ergebnis der setTimer-Methode und geben Sie die obigen drei Konstanten in Kombination wieder.
switch displayedTimeFormat {
case .hr:
return String(format: "%02d:%02d:%02d", hr, min, sec)
case .min:
return String(format: "%02d:%02d", min, sec)
case .sec:
return String(format: "%02d", sec)
}
}
}
Die bisher erstellte PickerView sollte wie im Bild unten aussehen.
Beim nächsten Mal berechnen wir die verbleibende Zeit anhand der in Picker eingestellten Zeit neu und zeigen den Timer auf dem Bildschirm an.
Recommended Posts