Project Mess #2 – Magic numbers for UI spacing

In this short article we will address one common issue that can lead to a project mess is when all the paddings and spacing are hardcoded in the UI. Even having them as constants in the file does not solve the issue nicely.

Paddings and spacing should be mostly driven by a design library specs and should be centralised so any changes can apply globally.

Let’s see the following example:

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Hello, world!")
                .padding(.leading, 8)
        }
    }
}

struct ContentView: View {

var body: some View {

VStack {

Text("Hello, world!")

.padding(.leading, 8)

}

In order to remove this hard coded value we can introduce a Spacing enum:

enum Spacing: CGFloat {
    case none = 0
    case tight = 8
    case standard = 16
    case loose = 24
}

enum Spacing: CGFloat {

case none = 0

case tight = 8

case standard = 16

case loose = 24

}

And now we can replace the 8 with Spacing.tight:

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Hello, world!")
                .padding(.leading, Spacing.tight.rawValue)
        }
    }
}