Create a View in SwiftUI

Written by Team Kodeco

One of the core concepts in SwiftUI is the view. Views are essentially the building blocks that make up your user interface, and can include buttons, text, images, and more. In this cookbook entry, we’ll walk through the steps to create a brand new view in SwiftUI.

To create a view, start by creating a new SwiftUI file. In Xcode, go to File ▸ New ▸ File (or use the shortcut Command-N), select SwiftUI View from the template menu, then click Next.

Name your new file MyView.swift and hit Create. Xcode will generate the starter code for your new view.

The starter code will look something like this:

import SwiftUI

struct MyView: View {
  var body: some View {
    Text("Hello, World!")
  }
}

struct MyView_Previews: PreviewProvider {
  static var previews: some View {
    MyView()
  }
}

Xcode should also automatically show a preview of your view that looks like this:

This code defines a new struct called MyView that conforms to the View protocol. The body property of the MyView struct returns a Text view that displays the string “Hello, World!”.

Note: If you don’t see the preview canvas, choose Editor ▸ Canvas or select Canvas from the Adjust Editor Options button on the righthand side of Xcode’s toolbar.

Now that we have the basic code set up, we can customize the view to our liking. In this example, you can change the text to display a greeting for your users:

struct MyView: View {
  var body: some View {
    Text("Welcome to my amazing app!")
  }
}

After a few seconds, the preview on the right should automatically update to show your new text.

Customizing Views With View Modifiers

You can also customize the appearance of the text by applying view modifiers. View modifiers are special methods or functions provided by SwiftUI that allow you to modify the properties and behavior of views. They provide a convenient way to make changes to views without subclassing or creating separate styles for each variation.

You can apply view modifiers by chaining them onto a view instance using dot notation. Each modifier is applied in the order they are chained, allowing you to combine multiple modifiers to achieve the desired effect. For example, you can change the font size and color as follows:

struct MyView: View {
  var body: some View {
    Text("Welcome to my amazing app!")
      .font(.title)
      .foregroundColor(.blue)
  }
}

The preview should now look like the following:

In this updated code, the .font() modifier sets the font size to the title style and the .foregroundColor() modifier to changes the text color to blue.

These are just a few of many view modifiers you can apply to your SwiftUI views. The rest of this section will explore some more ways you can use view modifiers to customize the look of your views.