[SWIFT] iOS App Entwicklung: Timer App (2. Timer Anzeige)

Inhalt

Die Punkte zum Erstellen einer Timer-App werden in mehreren Artikeln veröffentlicht. In diesem Artikel werde ich Ihnen zeigen, wie Sie den Timer-Teil anzeigen, der die Hauptfunktion darstellt.

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. Erstellen Sie eine TimerView
2. Erstellen Sie eine Hauptansicht
3. Platzieren Sie PickerView und TimerView in MainView

1. Erstellen Sie eine TimerView

Erstellen Sie eine neue Datei mit dem Namen TimerView.swift und bereiten Sie eine Struktur für die gleichnamige Ansicht vor.

TimerView.swift

import SwiftUI

struct TimerView: View {
    var body: some View {
    }
}

Bereiten Sie als nächstes die erforderlichen Eigenschaften vor. Diese TimerView bezieht sich auch immer auf den Wert der Published-Eigenschaft der TimeManager-Klasse. Erstellen Sie daher eine Instanz timeManager der TimeManager-Klasse und fügen Sie das Schlüsselwort @EnvironmentObject vor var hinzu, genau wie beim Erstellen von PickerView.

Da die Größe der Textkomponente, die als Timer angezeigt werden soll, basierend auf der Bildschirmgröße wie im Fall von PickerView angegeben wird, werden die Eigenschaften zum Erfassen der Breite und Höhe des Bildschirms als screenWidth bzw. screenHeight vorbereitet.

TimerView.swift

struct TimerView: View {
    @EnvironmentObject var timeManager: TimeManager

    let screenWidth = UIScreen.main.bounds.width
    let screenHeight = UIScreen.main.bounds.height

    var body: some View {
    }
}

Der Rückgabewert der displayTimer-Methode, die bereits in der TimeManager-Klasse vorbereitet wurde, ist die Anzeigezeit des Timers.

Da wir die Zeichengröße abhängig vom Zeitanzeigeformat ändern möchten, ist dies auch bedingt verzweigt mit der if-Anweisung entsprechend dem Wert der AnzeigeTimeFormat-Eigenschaft, die bereits in der TimeManager-Klasse vorbereitet wurde.

Die Schriftgröße wird durch Bildschirmgröße x Vergrößerung angegeben.

TimerView.swift

struct TimerView: View {
    //(Eigentum weggelassen)
    
    var body: some View {
        //Verzweigen Sie die Zeichengröße des Timers bedingt entsprechend dem Zeitanzeigeformat von Stunden, Minuten und Sekunden
        //Das Anzeigeformat ist"Zeit"Im Falle von
        if self.timeManager.displayedTimeFormat == .hr {
            Text(self.timeManager.displayTimer())
                //Schriftgröße Bildschirmgröße x 0.Bezeichnet als 15
                .font(.system(size: self.screenWidth * 0.15, weight: .thin, design: .monospaced))
                //Geben Sie für alle Fälle die Anzahl der Zeilen pro Zeile an
                .lineLimit(1)
                //Standardränder hinzufügen
                .padding()
        //Das Anzeigeformat ist"Protokoll"Im Falle von
        } else if self.timeManager.displayedTimeFormat == .min {
            Text(self.timeManager.displayTimer())
                .font(.system(size: self.screenWidth * 0.23, weight: .thin, design: .monospaced))
                .lineLimit(1)
                .padding()
        //Das Anzeigeformat ist"Sekunden"Im Falle von
        } else {
            Text(self.timeManager.displayTimer())
                .font(.system(size: self.screenWidth * 0.5, weight: .thin, design: .monospaced))
                .lineLimit(1)
                .padding()
        }
    }
}

Sehen Sie, wie es auf Leinwand aussieht. Unten ist der Vorschau-Code.

struct TimerView_Previews: PreviewProvider {
    static var previews: some View {
        TimerView()
            .environmentObject(TimeManager())
            .previewLayout(.sizeThatFits)
    }
}

Die erstellte TimerView sollte wie im Bild unten aussehen, wenn es sich um Canvas handelt.

2. Erstellen Sie eine Hauptansicht

Bereiten Sie eine weitere Swift-Datei mit dem Namen MainView vor. Diese Ansicht ist der Hauptbildschirm als Countdown-Timer-App.

Da wir uns immer auf den Wert der TimeManager-Klasseneigenschaft beziehen, erstellen wir erneut eine Instanz der TimeManager-Klasse mit dem @EnvironmentObject-Eigenschafts-Wrapper vor var.

MainView.swift

import SwiftUI

struct MainView: View {
    @EnvironmentObject var timeManager: TimeManager

    var body: some View {
        
    }
}

3. Platzieren Sie PickerView und TimerView in MainView

Fügen Sie hier einfach die zuvor im Body erstellten PickerView und TimerView hinzu. Abhängig davon, ob der Countdown-Timer läuft, ist die angezeigte Ansicht später abhängig.

MainView.swift

struct MainView: View {
    @EnvironmentObject var timeManager: TimeManager

    var body: some View {
            PickerView()
            TimerView()
    }
}

Da ich es in der if-Anweisung zur bedingten Verzweigung noch nicht beschrieben habe, werden beide Ansichten überlappend angezeigt, sodass es wie im Bild unten aussieht, aber dies ist vorerst kein Problem.

Beim nächsten Mal erstellen wir Eigenschaften, die den Status der Schaltflächen Start, Pause, Zurücksetzen und Timer anzeigen, deren Wert sich ändert, wenn Sie diese Tasten drücken.