What Are the Key UI Elements in SwiftUI?

Let’s take a look at Text, Image, HStack, VStack, and more

SwiftUI offers a number of UI elements that were also previously available in the UIKit. However, in SwiftUI, they have a different implementation and different names altogether. For example, UITableView has been replaced with List, and UILabel has been taken over by Text. And the list goes on.

We’ll be walking through the ones most likely to be used in daily development. In this article, we’ll be covering the following UI elements provided by SwiftUI and their implementation:

  • Text
  • Image
  • HStack
  • VStack
  • List

Text

UILabel in SwiftUI has been replaced by Text. Whenever you want to use a label, you can use Text(“Hello World!”). Below is the actual implementation of Text in a SwiftUI application.

Image

The Image container in SwiftUI can be added using a single line of code — i.e., Image(systemName: “”).

Note: This constructor here that you see taking systemName as a parameter is newly introduced in order for users to access a wide variety of built-in images that the system has to offer.

HStack

You guessed it right: HStack is the horizontal stack in SwiftUI. This element acts as a container for other elements to be stacked horizontally alongside one another. Let’s see this element in action.

I want an image to be placed beside my text. All Ineed to do is merge Image and Text in an HStack closure, as shown below:

The above code will produce the below output:

VStack

VStack, or vertical stack, is a container that allows the views to be stacked vertically. Its usage is similar to the HStack.

Let’s use the same view we used in the HStack and enhance it a bit to use the VStack. Suppose we want to add a subtitle right below the title and want our view to look as shown below:

Rack your brain: What can we do to achieve the desired output? Most of you must’ve guessed it right. We will put our labels in a VStack and then embed the Image and the VStack into an HStack.

List

We will continue with our view, and we’re assuming we require this view to be repeated based on our data source in the form of a list, just like a table view in UIKit. To serve the purpose, we will be using the List.

But before that, let me teach you another amazing feature that SwiftUI offers: extracting the views. To do that, hold down the Command key on your keyboard, and click at the beginning of the view you want to extract (in our case, it’s the HStack). Select “Extract Subview.” The Xcode will take care of the rest and generate a separate view for that that you can rename later as per your convenience. In our case, we will rename it to ContactCellView.

OK, now back to the List.

Since our view now has a name, ContactCellView, we want to repeat the ContactCellView five times in a form of a table. We can do that manually, or we can also do that with a click. We’ll do that manually first.

All we need to do is initialize the list with the iteration range so we can specify the number of times we want it to repeat a view.

Inside the closure, we’ll do nothing but call the ContactCellView’s initializer — and that’s all there is to it.

A quick way to embed a view in the list is to type in the view’s initializer, hold the Command button, and click on the view’s initializer.

Then click on “Embed in List,” as shown below.

Conclusion

In my second installment of SwiftUI articles, I tried to give you a flavor of some of the most commonly used UI elements. But this isn’t the end — in upcoming articles, I’ll explain to you the more advanced topics of SwiftUI (e.g. data propagation, navigation, and implementing MVVM in SwiftUI).

Happy reading, and stay tuned for more.