Text And Button with SwuiftUI

Upon creating a new project, we see a dialog to select the project name:

After creating the project, we see the file list on the left sidebar, the code and preview in the center, and the properties of the selected object on the right.

In SwiftUI, the main term we encounter frequently is “View.” This is a protocol, and to display an object, we need to use this protocol. By default, it provides methods to manage the properties of objects. Another interesting keyword is “some,” which refers to an “opaque type.”

I found a helpful post explaining this concept: https://medium.com/@PhiJay/whats-this-some-in-swiftui-34e2c126d4c4 . I recommend giving it a read. If you’d prefer a summary, the key point is:

“Adding this keyword turns the return type into an opaque type, meaning that both you and the compiler know this function will always return only one specific concrete type — but you’ll never know exactly which one!”

The default code snippet for a new project is:

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

#Preview {
    ContentView()
}

The result is the text “Hello, World!” displayed at the center of the screen.

In the #Preview section, ContentView is used to show the view in the preview window. This window also has a play button, allowing you to interact with the graphical elements, similar to using a simulator.

Text

The text “Hello, World!” is centered because, by default, every object is centered within the view. Padding is not a property of the entire label but rather a property of the text within the label. For example, if we change it to:

struct ContentView: View {
    var body: some View {
        Text("Hello, world!")
            .padding(.trailing, 20)
    }
}

You’ll notice additional space after the exclamation mark.

In SwiftUI, “trailing” refers to the right side, and “leading” refers to the left. Try changing .trailing to .leading to see the effect.

You can also modify font properties using the default system font, for example, by setting it to .title.

struct ContentView: View {
    var body: some View {
        Text("Hello, world!")
            .padding()
            .font(.title)
    }
}

For practice, try experimenting with other default font sizes.

You can also apply custom properties for attributes like size, color, and more.

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Hello, world!")
            .padding()
            .font(.system(size: 10, weight: .bold))
            .foregroundStyle(Color.white)
            .background(Color.blue)
        }
        .padding()
    }
}

To use a custom font family, you can specify it directly in your code using .font(.custom(“FontName”, size: fontSize)), where “FontName” is the name of your chosen font and fontSize is the desired size.

struct ContentView: View {
    var body: some View {
        Text("Hello, world!")
            .padding()
            .font(.custom("Courier", size: 10))    
    }
}

A nice property is roudend, for the design.

struct ContentView: View {
    var body: some View {
        Text("Hello, world!")
            .fontWeight(.bold)
            .padding()
            .font(.system( .title, design: .rounded ))
    }
}

Note the order of the methods; it’s intentional. Methods are called in a top-to-bottom sequence. If you try to rearrange them (e.g., moving padding to the end), you might encounter errors or unexpected output.

You can adjust properties using the panel on the right (as shown in the picture), but I find it more helpful to see them directly in the code.

Buttons

Now see the Button, cancel the code about the Text. Click on the plus button as in the figure and drag the button in the code.

Now replace the Label and Action with our code

struct ContentView: View {
    var body: some View {

        Button(action: {}) {
            Text("Touch me")
        }
    }
}

For now, we replace the action label with empty code (no action) and the content with a Text object.

To modify the look of the button we have to change the content so in this case the Text object.

struct ContentView: View {
    var body: some View {
        VStack {
            Button(action: {}) {
                Text("Touch me")
                .padding(10)
                .background(Color.blue)
                .foregroundColor(.white)
                .clipShape(RoundedRectangle(cornerRadius: 10))
            }
        }
        .padding()
    }
}

We can also use the system image (please download the San Francisco symbols from https://developer.apple.com/sf-symbols/)

struct ContentView: View {
    var body: some View {
        VStack {
            Button(action: {
                
            }) {
                Image(systemName: "cart")
                .foregroundStyle(.purple)
                .font(.title)
            }
        }
        .padding()
    }
}

To have:

We applied the font properties to the system image.