[Swift] Comment afficher les caractères saisis sur le Widget via UserDefaults lors de l'utilisation du WidgetKit

Dernier article [Swift] Comment implémenter facilement WidgetKit ajouté depuis iOS 14.0 Alors, j'ai décrit comment utiliser WidgetKit, Cette fois, après avoir ajouté WidgetKit en tant qu'extension, je décrirai comment partager la valeur via UserDefaults.

environnement

• Xcode: 12.0
• Swift5

Préparation

• En principe, on suppose que WidgetKit a déjà été ajouté à partir de Target.

1. Ajouter AppGroup à partir de Capability

Sélectionnez Target comme application de widget (le projet à partir duquel vous avez ajouté le kit de widgets) et double-cliquez sur AppGroup depuis Capability pour ajouter l'AppGroup. OK si la colonne Groupes d'applications est ajoutée comme indiqué ci-dessous

2. Enregistrez un identifiant commun dans AppGroups

Lorsque vous appuyez sur "+" dans AppGroups, la boîte de dialogue suivante s'affiche. Sélectionnez l'équipe de développement.

b. Vous serez invité à entrer l'identifiant commun utilisé par AppGroups, alors entrez comme suit

group.{Identificateur de bundle lors de la création d'un projet}.xxxxx

Exemple)

※Remarque

La partie xxxxx peut être enregistrée librement, mais si vous en connectez deux ou plus avec un point comme xxxxx.yyy, Veuillez noter qu'il sera lu avec une erreur lors de l'application pour l'App Store.

Après avoir appuyé sur OK, c'est OK si l'identifiant de AppGroup est enregistré comme indiqué ci-dessous.

• Si la case n'est pas cochée, veuillez l'ajouter.

3. Ajoutez également des groupes d'applications du côté de l'extension de widget

La procédure est presque la même que celle que nous avons suivie précédemment.

Sélectionnez Target (WidgetAppExtension) ajouté en tant qu'extension et ajoutez Capacity> AppGroups

b. Appuyez sur le bouton «+» pour enregistrer l'identifiant commun dans les groupes d'applications Ce côté devrait se terminer lorsque vous sélectionnez une équipe de développeurs. Ensuite, l'identifiant ajouté à l'étape 2 sera affiché, donc cochez la case.

Ceci termine la préparation à l'utilisation de UserDefaults.

la mise en oeuvre

Cette fois, nous implémenterons le contenu suivant. -Enregistrer la chaîne de caractères saisie côté écran dans UserDefaults -Afficher la chaîne de caractères enregistrée dans UserDefaults sur le Widget

1. Organisez les champs de texte et les boutons pour la saisie à l'écran

ContentView.swift

struct ContentView: View {
    @State private var text = ""
    var body: some View {
        VStack {
            TextField("Saisie de caractères", text: $text)
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .padding(.horizontal)
            Button(action: {
                //Lorsque le bouton est enfoncé
            }){
                Text("Enregistrer les caractères")
            }
        }
    }
}

2. Ajouter un processus de sauvegarde à UserDefaults

Cette fois, enregistrez la valeur du champ de texte lorsque le bouton est enfoncé

ContentView.swift

struct ContentView: View {
    @State private var text = ""
    var body: some View {
        VStack {
            TextField("Saisie de caractères", text: $text)
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .padding(.horizontal)
            Button(action: {
                //Lorsque le bouton est enfoncé
                let userDefaults = UserDefaults(suiteName: "group.com.sample.yajima.WidgetApp.WidgetExtension")
                if let userDefaults = userDefaults {
                    userDefaults.synchronize()
                    userDefaults.setValue(text, forKeyPath: "inputText")
                }
            }){
                Text("Enregistrer les caractères")
            }
        }
    }
}

De cette manière, vous pouvez partager la valeur de UserDefaults en spécifiant l'identifiant enregistré précédemment dans suiteName. J'ai aussi vu un article disant que userDefaults.synchronize () n'est pas nécessaire, mais cela n'a pas fonctionné sans que je l'ajoute.

3. Processus d'acquisition de valeur à partir de UserDefaults

WidgetAppExtension.swift

    // struct Provider:Dans TimelineProvider
    func getTimeline(in context: Context, completion: @escaping (Timeline<Entry>) -> ()) {
        var entries: [SimpleEntry] = []
        /*Post-scriptum d'ici*/
        var text = ""
        let userDefaults = UserDefaults(suiteName: "group.com.sample.yajima.WidgetApp.WidgetExtension")
        if let userDefaults = userDefaults {
            text = userDefaults.string(forKey: "inputText") ?? ""
        }
        /*Jusque là*/
        let currentDate = Date()
        for hourOffset in 0 ..< 5 {
            let entryDate = Calendar.current.date(byAdding: .hour, value: hourOffset, to: currentDate)!
            let entry = SimpleEntry(date: entryDate)
            entries.append(entry)
        }

        let timeline = Timeline(entries: entries, policy: .atEnd)
        completion(timeline)
    }

Comme pour l'enregistrement des valeurs, spécifiez l'identificateur pour suiteName, et le reste revient à utiliser UserDefaults comme d'habitude.

4. Afficher la valeur obtenue à partir de UserDefaults dans Widget

Si vous n'avez rien touché de article précédent Je pense que le widget par défaut décrit le processus d'affichage de l'heure, donc En plus de cela, je vais essayer d'afficher la chaîne de caractères.

WidgetAppExtension.swift

import WidgetKit
import SwiftUI

struct Provider: TimelineProvider {
    func placeholder(in context: Context) -> SimpleEntry {
        SimpleEntry(date: Date(), text: "")
    }

    func getSnapshot(in context: Context, completion: @escaping (SimpleEntry) -> ()) {
        let entry = SimpleEntry(date: Date(), text: "")
        completion(entry)
    }

    func getTimeline(in context: Context, completion: @escaping (Timeline<Entry>) -> ()) {
        var entries: [SimpleEntry] = []
        var text = ""
        let userDefaults = UserDefaults(suiteName: "group.com.sample.yajima.WidgetApp.WidgetExtension")
        if let userDefaults = userDefaults {
            text = userDefaults.string(forKey: "inputText") ?? ""
        }
        let currentDate = Date()
        for hourOffset in 0 ..< 5 {
            let entryDate = Calendar.current.date(byAdding: .hour, value: hourOffset, to: currentDate)!
            //Définissez la chaîne de caractères obtenue à partir de UserDefaults
            let entry = SimpleEntry(date: entryDate, text: text)
            entries.append(entry)
        }

        let timeline = Timeline(entries: entries, policy: .atEnd)
        completion(timeline)
    }
}

struct SimpleEntry: TimelineEntry {
    let date: Date
    let text: String
}

struct WidgetAppExtensionEntryView : View {
    var entry: Provider.Entry

    var body: some View {
        Text(entry.date, style: .time)
        Text(entry.text)
    }
}

@main
struct WidgetAppExtension: Widget {
    let kind: String = "WidgetAppExtension"

    var body: some WidgetConfiguration {
        StaticConfiguration(kind: kind, provider: Provider()) { entry in
            WidgetAppExtensionEntryView(entry: entry)
        }
        .configurationDisplayName("My Widget")
        .description("This is an example widget.")
    }
}

struct WidgetAppExtension_Previews: PreviewProvider {
    static var previews: some View {
        WidgetAppExtensionEntryView(entry: SimpleEntry(date: Date(),text: ""))
            .previewContext(WidgetPreviewContext(family: .systemSmall))
    }
}

Vous pouvez maintenant afficher les valeurs enregistrées dans UserDefaults dans WidgetKit.

Si vous souhaitez mettre à jour le contenu d'affichage du widget immédiatement après avoir appuyé sur le bouton

La mise à jour est possible en appelant le processus suivant lorsque le bouton est enfoncé.

WidgetCenter.shared.reloadAllTimelines()

ContentView.swift

import SwiftUI
import WidgetKit

struct ContentView: View {
    @State private var text = ""
    var body: some View {
        VStack {
            TextField("Saisie de caractères", text: $text)
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .padding(.horizontal)
            Button(action: {
                //Lorsque le bouton est enfoncé
                //Identifiant défini lors de l'ajout d'AppGroups
                let userDefaults = UserDefaults(suiteName: "group.com.sample.yajima.WidgetApp.WidgetExtension")
                if let userDefaults = userDefaults {
                    userDefaults.synchronize()
                    userDefaults.setValue(text, forKeyPath: "inputText")
                }
                //Mettre à jour le widget
                WidgetCenter.shared.reloadAllTimelines()
            }){
                Text("Enregistrer les caractères")
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

mouvement

Les caractères saisis de cette manière sont maintenant reflétés dans WidgetKit! Je vous serais reconnaissant si vous pouviez signaler tout malentendu à mon sujet.

Nous avons publié les applications suivantes avec la mise en œuvre comme cet article. Il manque toujours de fonctionnalités, mais si vous le souhaitez, veuillez l'installer! Accent Widget

Remarques

L'application est sortie! Veuillez l'installer si vous le souhaitez. Toranpo

J'ai commencé Twitter! Veuillez me suivre si vous le souhaitez. @yajima_tohshu