Sections, Sliders and SFSymbols

Working with Sections

Now that we have implemented our Toggle and Stepper, we want to create several TextFields where the user can enter his delivery address. 

The first TextField should contain the first name of the user. Therefore, we start with creating a State property for holding the user’s first name as a String:

@State var firstName = ""

Then, we insert a TextField view between the Stepper and the Toggle by binding it to this State and providing it with a placeholder String.

TextField("First name", text: $firstName)

Take a look at the Preview simulator. You see that the TextField is placed in the same visual group as the Stepper and Toggle. But instead, we want to create three different sections that are visually separated from each other – one including our Toggle and its related TextField, one including the TextFields for the delivery address information and one including the Stepper.

To do this, group these views by wrapping them into three Sections:

Form {
    Section {
        Stepper(value: $orderAmount, in: 1...10) {
            Text("Quantity: \(orderAmount)")
        }
    }
    Section {
        TextField("First name", text: $firstName)
    }
    Section {
        Toggle(isOn: $specialRequest) {
            Text("Any special requests?")
        }
            .toggleStyle(SwitchToggleStyle(tint: .orange))
        if specialRequest {
            TextField("Enter your request", text: $specialRequestInput)
        }
     }
}

Great! Our Preview simulator shows three different sections that are visually separated from each other.

Create the remaining TextFields by declaring corresponding State properties …

@State var lastName = ""
@State var street = ""
@State var city = ""
@State var zip = ""

…and add the remaining TextFields to the second Section:

Section {
    TextField("First name", text: $firstName)
    TextField("Last name", text: $lastName)
    TextField("Street", text: $street)
    TextField("City", text: $city)
    TextField("ZIP code", text: $zip)
}

Great, we’re finished with setting up the TextFields containing the delivery address information.

Now, only two more components are left: a Slider that can be used to provide feedback and a Button that can be used to submit the order.

Creating a custom Slider

This is what our Slider will look like

Before we implement the Slider you see above, create a new Section below the one containing the Toggle and its related TextField.

Section {
    
}

The Slider in this Section should be surrounded by two icons. We also want to insert a Text view above the Slider. Let’s start by creating the Slider control.

To do this, declare another State property for keeping track of the current “progress” value (1.0 represents 100%) of the Slider. Make sure, it’s a float-type value by entering a decimal value.

@State var userFeedback = 0.0

Now we are ready to initialize the Slider by binding it to this State and providing it with a range of values within which the user can move the Slider.

Section {
    Slider(value: $userFeedback, in: 0.0...10.0)
}

What’s left is to place one icon before and one icon behind the Slider. Because the Slider will be arranged horizontally with the icons, we have to wrap it into a HStack first.

Section {
    HStack {
        Slider(value: $userFeedback, in: 0.0...10.0)
    }
}

At this point, we could initialize Image views by accessing custom icon files we would need to import into our Assets folder first. Fortunately, there is a much easier way: Using system symbols! Apple provides us with a bunch of native icons we can use for our SwiftUI apps. We can initialize such icons by using an Image view and providing it with the “systemName” parameter.

HStack {
    Image(systemName: "hand.thumbsdown")
    Slider(value: $userFeedback, in: 0.0...10.0)
    Image(systemName: "hand.thumbsup")
}

If you want, you can adjust the size and appearance of the icons. You can do this using the usual modifiers we have used for Image views in the previous chapters.

Your Slider should now look as follows:

Excursus: Working with SF Symbols

At this point, you are probably asking yourself: How I am supposed to know what system icons are available and how can I find their names so I can use them within my app?

Well, that’s super easy! Just use the free Apple SF Symbols app. This macOS app provides you with a set of over 3100 symbols you can use in your app.

You can download the app here. 

Once you have opened the SF Symbols app, you can scroll through the icons or search for a certain keyword to find matching symbols for your app.

You can simply search for any type of icon, for instance, “house” or “star” and then get a list of icons related to the entered search term! You can then use the name of this icon for inserting it into your app. In our example, I searched for “thumb”. SF Symbols then provided me with different icons I can use by using the corresponding name as the Image view’s “systemName” argument!

Okay, back to our Slider. What’s left is to insert another Text view above the Slider. Therefore, we wrap the existing HStack into a VStack and insert a Text view (with some padding) above the HStack.

Finally, we also want to change the accent color of the Slider.

VStack {
    Text("How do you like our Food Delivery App?")
        .padding(.top, 10)
    HStack {
        Image(systemName: "hand.thumbsdown")
        Slider(value: $userFeedback, in: 0.0...10.0)
            .accentColor(.orange)
        Image(systemName: "hand.thumbsup")
    }
}

Your Slider should now look as follows:

2 replies on “Sections, Sliders and SFSymbols”

Leave a Reply

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