[SWIFT] Développement d'applications iOS: application Timer (4. Implémentation du compte à rebours)

Contenu

Les points pour créer une application de minuterie sont publiés dans plusieurs articles. Dans cet article, je vais décrire la procédure pour mettre à jour l'affichage du temps restant chaque seconde avec le compte à rebours.

environnement

• OS: macOS 10.15.7 (Catalina) --Editeur: Xcode 12.1 --Langue: Swift --Bibliothèque principale utilisée: SwiftUI

Dépôt Git

Vous pouvez voir l'exemple de code à partir de l'URL du référentiel Git suivante. https://github.com/msnsk/Qiita_Timer.git

procédure

1. Ajoutez la méthode de publication de la classe Timer à la classe TimeManager
2. Mettez à jour l'affichage du temps restant dans MainView toutes les secondes

1. Ajoutez la méthode de publication de la classe Timer à la classe TimeManager

À ce moment, le fait d'appuyer sur le bouton de démarrage changera l'état de la minuterie en .running, mais l'écran ne compte pas encore le temps restant. L'écran reste à l'heure définie par Picker.

Par conséquent, nous allons mettre en œuvre un affichage du compte à rebours du temps restant, qui est le cœur de cette application de minuterie.

Il est également inclus dans la bibliothèque SwiftUI, mais il utilise une méthode appelée publish d'une classe appelée Timer fournie dans la bibliothèque Foundation, qui est la base du langage Swift.

En écrivant comme suit, le minuteur qui est activé à chaque fois (1 seconde) spécifié par l'argument chaque méthode de publication est stocké dans le minuteur variable. En l'utilisant du côté Affichage, ce sera un déclencheur lorsque vous voudrez activer une action toutes les secondes. Ici, l'application de minuterie sera utilisée comme déclencheur lors de la mise à jour du temps restant toutes les secondes.

TimeManager.swift

class TimeManager: ObservableObject {
    //(Autres propriétés omises)

    //La méthode de publication de la classe Timer qui est activée toutes les secondes
    var timer = Timer.publish(every: 1, on: .main, in: .common).autoconnect()

    //(Méthode omise)
}

2. Mettez à jour l'affichage du temps restant dans MainView toutes les secondes

Ajoutez le modificateur .onReceive au ZStack le plus externe qui contient le TimerView dans MainView. Cela se reflète dans toutes les vues de ZStack.

Ce modificateur .onReceive reçoit le déclencheur du minuteur de classe TimeManager toutes les secondes. Ensuite, dans la fermeture après cela, écrivez le code à exécuter chaque fois que la minuterie est activée.

Dans la syntaxe guard let ~ else, écrivez return dans la fermeture afin que rien ne soit exécuté lorsque l'état du temporisateur est autre que .running. Si l'état de la minuterie est .running, passez à l'instruction if en dessous.

Dans l'instruction if, si le temps restant est supérieur à 0, soustrayez 1 seconde du temps restant, et si le temps restant est égal ou inférieur à 0, changez l'état du minuteur en .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)
            }
        }
        //Exécute le code dans la fermeture déclenchée par une minuterie qui s'active à chaque heure spécifiée (1 seconde)
        .onReceive(timeManager.timer) { _ in
            //L'état de la minuterie est.Ne rien faire sauf courir
            guard self.timeManager.timerStatus == .running else { return }
            //Si le temps restant est supérieur à 0
            if self.timeManager.duration > 0 {
                //Du temps restant-1 faire
                self.timeManager.duration -= 1
                //Lorsque le temps restant est égal ou inférieur à 0
            } else {
                //État de la minuterie.Changer pour arrêté
                self.timeManager.timerStatus = .stopped
            }
        }
    }
}

Maintenant, cela ressemble à un compte à rebours. La prochaine fois, nous mettrons en place des alarmes.