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
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:
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 container in SwiftUI can be added using a single line of code — i.e.,
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.
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
Text in an
HStack closure, as shown below:
The above code will produce the below output:
VStack, or vertical stack, is a container that allows the views to be stacked vertically. Its usage is similar to the
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
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
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
OK, now back to the
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.
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.