SwiftUI: formatting decimals in Text view

Oct 2, 2021

Learn how to format a decimal number in a SwiftUI Text view using the specifier parameter, so a Double like 34.000000 finally shows as a clean 34.

~~~

When we use the Slider view to select a value, we have to use a Double value and this causes a problem, because when it’s time to show the value in a Text view, number 34 appears as 34.000000, despite us using a step value of 1, meaning we can only select integer values in our slider:

struct ContentView: View {
    @State private var age: Double = 0
    
    var body: some View {
        Form {
            Slider(value: $age, in: 0...100, step: 1)
            Text("\(age)")
        }
    }
}

iOS simulator showing SwiftUI form with slider value displayed as unformatted decimal 34.000000

Let’s see how we can format this value to show 34 instead.

When we interpolate the value of age in the Text view, we can provide an additional parameter called specifier.

This specifier lets us use a string format specifier. You can lookup the available options in the Apple documentation for String.

In our case, we can use $.0f:

Text("\(age, specifier: "%.0f")")

See? Now we get 20 instead of 20.000000:

iOS simulator showing SwiftUI form with slider value displayed as clean integer 20 after applying formatting

Tagged: Swift · All topics

~~~