Understanding Spacers and Padding in Swift UI.

Photo by Cookie the Pom on Unsplash

Hello again! Today’s article is going to focus on spacers and padding within Swift UI. When you begin designing your user interface with Swift UI, you will notice that a lot of the elements you add are automatically being placed on the screen based on the type of stack you have created it within. Well what happens if you want to manually adjust the spacing between objects to achieve a desired look? This is where spacers and padding come into play. Today, we will talk about both options and when to use each one of them for your UI design.

Spacers:

Spacers are a great way to evenly space out objects within your UI design. Spacers do not give the most adjustability when designing the layout, but they do provide a quick and easy way to evenly distribute items either vertically or horizontally within your UI. You can see from the example below how to use a spacer with Swift UI:

struct SomeView: View {
   var body: some view {
      VStack {
         Text("Hello")
         Spacer()
         Text("World")
      }
   }
}

In this example, we have placed a spacer in between our two text objects in our vertical stack. What this spacer is going to do is place the first text object at the very top of the stack and the second text object at the very bottom of the stack. If we wanted a text object on the top of the stack and the second text object in the middle, we would use the following syntax:

struct SomeView: View {
   var body: some view {
      VStack {
         Text("This is on the top")
         Spacer()
         Text("This is in the middle")
         Spacer()
      }
   }
}

By placing a spacer in between the two text objects, and then another spacer below the final text object, we will see the first object placed on the top of the stack and the second object in the middle. As you can see, spacers are a great way to quickly start to design your UI and get the elements of your view placed appropriately.

Padding:

Spacers are a great tool to have in your Swift UI belt, but what if you want more control over the exact placement of your UI elements on your view? Well, this is where padding comes into play. Padding gives the developer a way to specify the exact amount of padding that they want to place on an element for the leading, trailing, top, and bottom. This gives full control of where an object ends up in the view to the developer and allows for amazing customization during the design phase. An example of basic padding without any modifications is below:

struct SomeView: View {
   var body: some view {
      Text("Hello World").padding()
   }
}

By utilizing .padding() on a UI element, Swift UI will place a system calculated amount of padding around the entire object. If you want to place padding on a specific side of an object, lets say the top of the object, you can do so using the following example:

struct SomeView: View {
   var body: some view {
      VStack {
         Text("Hello").padding(.top)
         Text("World,").padding(.bottom)
         Text("Padding").padding(.trailing)
         Text("Rocks!").padding(.leading)
      }
   }
}

As you can see from this example, we have placed only top padding on the first text element, bottom padding on the second text element, trailing padding on the third text element, and leading padding on the last text element.

What if we want to set a specific amount of padding on an object instead of using the system calculated amount of padding? Don’t worry because Swift UI has you covered for that as well! You can set a specific amount of padding by simply declaring the amount you wish to have on the element within the padding declaration. See the example below for reference:

struct SomeView: View {
   var body: some view {
      VStack {
         Text("Hello").padding(.top, 10)
         Text("World").padding(.bottom, 20)
         Text("Padding").padding(.trailing, 15)
         Text("Still Rocks!").padding(.leading, 5)
      }
   }
}

As you can see from this example above, setting a specific amount of padding for each side of an element couldn’t be easier!

Conclusion:

Today we have covered the basics of utilizing both spacers and padding to design customized UI’s within Swift UI. As you can see, these are both very powerful pieces of code to know and understand when building out complex user interfaces with Swift UI. Go ahead and and test out the things we have covered today and see how easy it is to start designing with Swift UI! Be sure to check out my previous articles about Swift UI here and here. If you enjoy my articles, please follow my page as I will be continuing to dive into further topics related to Swift UI and iOS development!