[SWIFT] Développement d'applications iOS: application Timer (2. affichage de la minuterie)

Contenu

Les points pour créer une application de minuterie sont publiés dans plusieurs articles. Dans cet article, je vais vous montrer comment afficher la partie minuterie, qui est la fonction principale.

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. Créez un TimerView
2. Créez un MainView
3. Placez PickerView et TimerView dans MainView

1. Créez un TimerView

Créez un nouveau fichier nommé TimerView.swift et préparez une structure pour la vue avec le même nom.

TimerView.swift

import SwiftUI

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

Ensuite, préparez les propriétés nécessaires. Ce TimerView fait également toujours référence à la valeur de la propriété Published de la classe TimeManager, créez donc une instance timeManager de la classe TimeManager et ajoutez le mot-clé @EnvironmentObject avant var, comme lors de la création de PickerView.

De plus, étant donné que la taille du composant de texte à afficher en tant que minuteur est spécifiée en fonction de la taille de l'écran comme dans le cas de PickerView, les propriétés pour acquérir la largeur et la hauteur de l'écran sont préparées comme screenWidth et screenHeight, respectivement.

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 {
    }
}

La valeur de retour de la méthode displayTimer déjà préparée dans la classe TimeManager est l'heure d'affichage du minuteur.

Puisque nous voulons changer la taille des caractères en fonction du format d'affichage de l'heure, celle-ci est également conditionnelle branchée avec l'instruction if en fonction de la valeur de la propriété displayTimeFormat déjà préparée dans la classe TimeManager.

La taille de la police est spécifiée par la taille de l'écran x le grossissement.

TimerView.swift

struct TimerView: View {
    //(Propriété omise)
    
    var body: some View {
        //Branche conditionnellement la taille des caractères de la minuterie en fonction du format d'affichage de l'heure en heures, minutes et secondes
        //Le format d'affichage est"temps"dans le cas de
        if self.timeManager.displayedTimeFormat == .hr {
            Text(self.timeManager.displayTimer())
                //Taille de l'écran de la police x 0.Désigné comme 15
                .font(.system(size: self.screenWidth * 0.15, weight: .thin, design: .monospaced))
                //Au cas où, spécifiez le nombre de lignes à 1 ligne
                .lineLimit(1)
                //Ajouter des marges par défaut
                .padding()
        //Le format d'affichage est"Minutes"dans le cas de
        } else if self.timeManager.displayedTimeFormat == .min {
            Text(self.timeManager.displayTimer())
                .font(.system(size: self.screenWidth * 0.23, weight: .thin, design: .monospaced))
                .lineLimit(1)
                .padding()
        //Le format d'affichage est"Secondes"dans le cas de
        } else {
            Text(self.timeManager.displayTimer())
                .font(.system(size: self.screenWidth * 0.5, weight: .thin, design: .monospaced))
                .lineLimit(1)
                .padding()
        }
    }
}

Voyez à quoi il ressemble sur Canvas. Voici le code de prévisualisation.

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

Le TimerView créé doit ressembler à l'image ci-dessous s'il s'agit de Canvas.

2. Créez un MainView

Préparez un autre fichier Swift nommé MainView. Cette vue sera l'écran principal en tant qu'application de compte à rebours.

Encore une fois, comme nous faisons toujours référence à la valeur de la propriété de classe TimeManager, nous créons une instance de la classe TimeManager avec le wrapper de propriété @EnvironmentObject devant var.

MainView.swift

import SwiftUI

struct MainView: View {
    @EnvironmentObject var timeManager: TimeManager

    var body: some View {
        
    }
}

3. Placez PickerView et TimerView dans MainView

Ici, ajoutez simplement le PickerView et le TimerView créés plus tôt dans le corps. Plus tard, selon que le compte à rebours est en cours d'exécution, la vue affichée est conditionnelle.

MainView.swift

struct MainView: View {
    @EnvironmentObject var timeManager: TimeManager

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

Comme je ne l'ai pas encore décrit dans l'instruction if de branchement conditionnel, les deux vues sont affichées en chevauchement, donc cela ressemble à l'image ci-dessous, mais ce n'est pas un problème pour le moment.

La prochaine fois, nous créerons des propriétés qui affichent l'état des boutons de démarrage, de pause, de réinitialisation et des minuteries dont la valeur change lorsque vous appuyez sur ces boutons.