On the Settings screen, of the Negative Thought Cards app, I thought it could be nice to have some of the app details be available if the user wants it.

A simple toggle switch will do – toggle the switch on and it will show the user an extended version of the Settings screen. Toggle the switch on the extended version and it will minimise again. It would be nice to style the toggle switch a bit more

Store the state in a private var that is a Boolean type. Toggle switches only have on and off, so a Bool is appropriate. We don’t want people to see the extended content yet, so we’ll set it to false.

@State private var showAppInfo: Bool = false

Then, depending on it’s whether it’s true/false, it will show the extra content we want the user to see.

  // MARK: - SECTION WITH EXTENDED INFO
        Section(header: Text("App Info")) {
          if showAppInfo {
            HStack {
              Text("Product").foregroundColor(Color.gray)
              Spacer()
              Text("Mind Spar")
            }
            HStack {
              Text("Compatibility").foregroundColor(Color.gray)
              Spacer()
              Text("iPhone & iPad")
            }
            HStack {
              Text("Version").foregroundColor(Color.gray)
              Spacer()
              Text("1.6.2")
            }
            HStack{
                Toggle(isOn: $showAppInfo.animation()) {
                             Text("Show Extended App Info")
               }
            }
           } else {
            //Expanded settings info 
            HStack {
              Text("Version").foregroundColor(Color.gray)
              Spacer()
              Text("1.6.2")
            }
            HStack {
              Text("Developer").foregroundColor(Color.gray)
              Spacer()
              Text("Luke Bresler")
            }
            HStack{
                Toggle(isOn: $showAppInfo.animation()) {
                             Text("Show Extended App Info")
            }
          }
        }
      }

Ok, we have the functionality but I would like to streamline the look and feel a bit more – let’s customise our toggle!

The inspiration for this implementation is fantastic tutorial by AppCoda where they adopted the ToggleStyle protocol which you can read about on the Apple Develop Docs

struct CheckboxStyle: ToggleStyle {
 
    func makeBody(configuration: Self.Configuration) -> some View {
 
        return HStack {
 
            configuration.label
 
            Spacer()
 
            Image(systemName: configuration.isOn ? "chevron.up.circle" : "chevron.down.circle")
                .resizable()
                .frame(width: 24, height: 24)
                .foregroundColor(configuration.isOn ? .gray : .gray)
                .font(.system(size: 20, weight: .light, design: .default))
                .onTapGesture {
                    configuration.isOn.toggle()
            }
        }
    }
}

And then don’t forget to call the toggleStyle on the appropriate HStacks, and remembering to apply the toggleStyle on both instances where there are checkboxes.

.toggleStyle(CheckboxStyle())

And there it is. Isn’t that nice? It offers functionality without taking up excessive screen space. Small touches can go a long way to making an app feel less generic.

Leave a Reply

Your email address will not be published. Required fields are marked *