UserDefaults Binding with Toggle in SwiftUI

Question

I'm trying to figure out the best way to build a simple settings screen bound to UserDefaults.

Basically, I have a Toggle and I want:

• the value a UserDefault to be saved any time this Toggle is changed (the UserDefault should be the source of truth)
• the Toggle to always show the value of the UserDefault

I have watched many of the SwiftUI WWDC sessions, but I'm still not sure exactly how I should set everything up with the different tools that are available within Combine and SwiftUI. My current thinking is that I should be using a BindableObject so I can use hat to encapsulate a number of different settings.

I think I am close, because it almost works as expected, but the behavior is inconsistent.

When I build and run this on a device, I open it and turn on the Toggle, then if I scroll the view up and down a little the switch toggles back off (as if it's not actually saving the value in UserDefaults).

However, if I turn on the switch, leave the app, and then come back later it is still on, like it remembered the setting.

Any suggestions? I'm posting this in hopes it will help other people who are new to SwiftUI and Combine, as I couldn't find any similar questions around this topic.

import SwiftUI
import Combine

struct ContentView : View {

    @ObjectBinding var settingsStore = SettingsStore()

    var body: some View {
        NavigationView {
            Form {
                Toggle(isOn: $settingsStore.settingActivated) {
                    Text("Setting Activated")
                }
            }
        }.navigationBarTitle(Text("Settings"))
    }
}

class SettingsStore: BindableObject {

    var didChange = NotificationCenter.default.publisher(for: .settingsUpdated).receive(on: RunLoop.main)

    var settingActivated: Bool {
        get {
            UserDefaults.settingActivated
        }
        set {
            UserDefaults.settingActivated = newValue
        }
    }
}

extension UserDefaults {

    private static var defaults: UserDefaults? {
        return UserDefaults.standard
    }

    private struct Keys {
        static let settingActivated = "SettingActivated"
    }

    static var settingActivated: Bool {
        get {
            return defaults?.value(forKey: Keys.settingActivated) as? Bool ?? false
        }
        set {
            defaults?.setValue(newValue, forKey: Keys.settingActivated)
        }
    }
}

extension Notification.Name {
    public static let settingsUpdated = Notification.Name("SettingsUpdated")
}

Solution 1

Update

------- iOS 14: -------

Starting iOS 14, there is now a very very simple way to read and write to UserDefaults.

Using a new property wrapper called @AppStorage

Here is how it could be used:

import SwiftUI

struct ContentView : View {

    @AppStorage("settingActivated") var settingActivated = false

    var body: some View {
        NavigationView {
            Form {
                Toggle(isOn: $settingActivated) {
                    Text("Setting Activated")
                }
            }.navigationBarTitle(Text("Settings"))
        }
    }
}

That's it! It is so easy and really straight forward. All your information is being saved and read from UserDefaults.

-------- iOS 13: ---------

A lot has changed in Swift 5.1. BindableObject has been completely deprecated. Also, there has been significant changes in PassthroughSubject.

For anyone wondering to get this to work, below is the working example for the same. I have reused the code of 'gohnjanotis' to make it simple.

import SwiftUI
import Combine

struct ContentView : View {

    @ObservedObject var settingsStore: SettingsStore

    var body: some View {
        NavigationView {
            Form {
                Toggle(isOn: $settingsStore.settingActivated) {
                    Text("Setting Activated")
                }
            }.navigationBarTitle(Text("Settings"))
        }
    }
}

class SettingsStore: ObservableObject {

    let willChange = PassthroughSubject<Void, Never>()

    var settingActivated: Bool = UserDefaults.settingActivated {
        willSet {

            UserDefaults.settingActivated = newValue

            willChange.send()
        }
    }
}

extension UserDefaults {

    private struct Keys {
        static let settingActivated = "SettingActivated"
    }

    static var settingActivated: Bool {
        get {
            return UserDefaults.standard.bool(forKey: Keys.settingActivated)
        }
        set {
            UserDefaults.standard.set(newValue, forKey: Keys.settingActivated)
        }
    }
}

Solution 2

With help both from this video by azamsharp and this tutorial by Paul Hudson, I've been able to produce a toggle that binds to UserDefaults and shows whichever change you've assigned to it instantaneously.

• Scene Delegate:

Add this line of code under 'window' variable

var settingsStore = SettingsStore()

And modify window.rootViewController to show this

window.rootViewController = UIHostingController(rootView: contentView.environmentObject(settingsStore))

• SettingsStore:

import Foundation

class SettingsStore: ObservableObject {
    @Published var isOn: Bool = UserDefaults.standard.bool(forKey: "isOn") {
        didSet {
            UserDefaults.standard.set(self.isOn, forKey: "isOn")
        }
    }
}

• SettingsStoreMenu

If so you wish, create a SwiftUI View called this and paste:

import SwiftUI

struct SettingsStoreMenu: View {
    
    @ObservedObject var settingsStore: SettingsStore
    
    var body: some View {
        Toggle(isOn: self.$settingsStore.isOn) {
            Text("")
        }
    }
}

• Last but not least

Don't forget to inject SettingsStore to SettingsStoreMenu from whichever Main View you have, such as

import SwiftUI

struct MainView: View {
        
    @EnvironmentObject var settingsStore: SettingsStore

    @State var showingSettingsStoreMenu: Bool = false

    
    var body: some View {
        HStack {
            Button("Go to Settings Store Menu") {
                    self.showingSettingsStoreMenu.toggle()
            }
            .sheet(isPresented: self.$showingSettingsStoreMenu) {
                    SettingsStoreMenu(settingsStore: self.settingsStore)
            }
        }
    }
}

(Or whichever other way you desire.)

Solution 3

This seam to work well :

enum BackupLocalisations: String, CaseIterable, Hashable, Identifiable {
    case iPhone = "iPhone"
    case iCloud = "iCloud"
    
    var name: String {
        return self.rawValue
    }
    var id: BackupLocalisations {self}
}

enum Keys {
    static let iCloudIsOn = "iCloudIsOn"
    static let backupLocalisation = "backupLocalisation"
    static let backupsNumber = "backupsNumber"
}

    class SceneDelegate: UIResponder, UIWindowSceneDelegate {
    
    var window: UIWindow?
    var settings = Settings()

…/…
    let contentView = ContentView()
            .environmentObject(settings)
… }

class Settings: ObservableObject {
    @Published var iCloudIsOn: Bool = UserDefaults.standard.bool(forKey: Keys.iCloudIsOn) {
        didSet { UserDefaults.standard.set(self.iCloudIsOn, forKey: Keys.iCloudIsOn) }
    }
    
    @Published var backupLocalisation: String = UserDefaults.standard.object(forKey: Keys.backupLocalisation) as? String ?? "iPhone" {
        didSet { UserDefaults.standard.set(self.backupLocalisation, forKey: Keys.backupLocalisation) }
    }
    
    @Published var backupsNumber: Int = UserDefaults.standard.integer(forKey: Keys.backupsNumber) {
        didSet { UserDefaults.standard.set(self.backupsNumber, forKey: Keys.backupsNumber) }
    }
}

struct ContentView: View {
    @ObservedObject var settings: Settings

    var body: some View {
        NavigationView {
            Form {
                Section(footer: Text("iCloud is \(UserDefaults.standard.bool(forKey: Keys.iCloudIsOn) ? "on" : "off")")) {
                    Toggle(isOn: self.$settings.iCloudIsOn) { Text("Use iCloud") }
                }
                Section {
                    Picker(selection: $settings.backupLocalisation, label: Text("\(self.settings.backupsNumber) sauvegarde\(self.settings.backupsNumber > 1 ? "s" : "") sur").foregroundColor(Color(.label))) {
                        ForEach(BackupLocalisations.allCases) { b in
                            Text(b.name).tag(b.rawValue)
                        }
                    }
                    
                    Stepper(value: self.$settings.backupsNumber) {
                        Text("Nombre de sauvegardes")
                    }
                }
            }.navigationBarTitle(Text("Settings"))
            
        }
    }
}

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

Xcode 11.3.1

Solution 4

Try something like this. You may also consider using EnvironmentObject instead of ObjectBinding per this answer.

import Foundation

@propertyWrapper
struct UserDefault<Value: Codable> {
    let key: String
    let defaultValue: Value

    var value: Value {
        get {
            return UserDefaults.standard.object(forKey: key) as? Value ?? defaultValue
        }
        set {
            UserDefaults.standard.set(newValue, forKey: key)
        }
    }
}

Using the object binding, the toggle will set the user default with the key myBoolSetting to true / false. You can see the current value reflected in the Text view's text.

import Combine
import SwiftUI

final class SettingsStore: BindableObject {
    let didChange = PassthroughSubject<Void, Never>()

    @UserDefault(key: "myBoolSetting", defaultValue: false)
    var myBoolSetting: Bool {
        didSet {
            didChange.send()
        }
    }
}


struct ContentView : View {
    @ObjectBinding var settingsStore = SettingsStore()

    var body: some View {
        Toggle(isOn: $settingsStore.myBoolSetting) {
            Text("\($settingsStore.myBoolSetting.value.description)")
        }
    }
}

View more solutions