Swift UI Basics 1

Posted on In

SwiftUI Basics 1

What is Swift UI?

SwiftUI is a framework for building user interfaces for iOS, macOS, watchOS, and tvOS. It is a declarative framework that allows you to describe the UI of your app in a declarative way, and the framework will take care of updating the UI when the data changes.

SwiftUI View

After you create a SwiftUI project, you will see a file called ContentView.swift. This is the main view of your app. It is a struct that conforms to the View protocol. It is a view that can be displayed on the screen.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundStyle(.tint)
            Text("Hello, world!")
        }
        .padding()
    }
}

#Preview {
    ContentView()
}

The default view that is generated is a VStack that contains an Image and a Text. The Image is a system image, and the Text is a label. The VStack is a vertical stack of views, and the padding() is a modifier that adds padding around the view.

#Preview is a special syntax that allows you to preview the view in Xcode’s canvas.

Text View

1
Text("Hello, World!")

You can use modifiers to modify the text view. For example, you can change the font, color, alignment, etc.

1
2
3
4
5
6
7
Text("Hello, World!")
    .font(.body)
    .foregroundColor(.white)
    .background(Color.cyan)
    .cornerRadius(5)
    .shadow(radius: 5)
    .padding()

You can set the font size, weight, and design. However, it is recommended to use the system font.

1
.font(.system(size: 40, weight: .bold, design: .monospaced))

Stack Views

Stack views are used to arrange views in a horizontal or vertical layout. There are three types of stack views: HStack, VStack, and ZStack.

1
2
3
4
5
6
7
8
9
10
11
12
VStack {
    Text("Hello, World!")
    Text("This is a VStack")
}
HStack {
    Text("Hello, World!")
    Text("This is a HStack")
}
ZStack {
    Text("Hello, World!")
    Text("This is a ZStack")
}

You can set the alignment and spacing of the stack views.

1
2
3
4
VStack(alignment: .leading, spacing: 0) {
    Text("Hello, World!")
    Text("This is a VStack")
}

Frame

Frames are used to set the size of the view. You can also set the alignment of the view. Alignment affects the position of the view within the frame.

All views have an intrinsic content size. By default, a view will take up only as much space as it needs to display its content. When you set a frame, you are overriding the intrinsic content size of the view.

1
2
3
4
Text("Hello, World!")
    .background(Color.yellow)
    .frame(width: 200, height: 200, alignment: .leading)
    .background(Color.blue)

Infinite width or height will make the view take up the entire space.

1
2
3
4
Text("Hello, World!")
    .background(Color.yellow)
    .frame(width: .infinity, height: .infinity, alignment: .leading)
    .background(Color.blue)

A view can have multiple frames.

1
2
3
4
5
Text("Hello, World!")
    .background(Color.yellow)
    .frame(width: 200, height: 200, alignment: .leading)
    .background(Color.blue)
    .frame(width: 200, height: 200, alignment: .trailing)

Color

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
Text("Primary Content Color")
    .font(.title)
    .foregroundStyle(.primary) // Automatically adapts to light/dark mode

Text("Secondary Content Color (more transparent)")
    .font(.headline)
    .foregroundStyle(.secondary) // Slightly transparent variant

Text("Tertiary Content Color")
    .font(.subheadline)
    .foregroundStyle(.tertiary) // Even more transparent (iOS 17+)

Text("Accent Color")
    .font(.title)
    .foregroundStyle(.accent)

Text("Success Color")
    .font(.title)
    .foregroundStyle(.success)

// custom rgb color
Text("Rgb Color")
    .font(.title)
    .foregroundStyle(Color(red: 1, green: 0, blue: 0))

You can also define a color in the asset catalog. Then use the color name in the foregroundStyle modifier.

1
2
3
Text("Custom Color")
    .font(.title)
    .foregroundStyle(Color("CustomColor"))

Gradient

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// Linear Gradient
LinearGradient(
    colors: [Color.blue.opacity(0.3), Color.blue],
    startPoint: .topLeading,
    endPoint: .bottom
)

// Radial Gradient
RadialGradient(
    colors: [Color.blue.opacity(0.3), Color.blue],
    center: .center,
    startRadius: 5,
    endRadius: 200
)

// Angular Gradient
AngularGradient(
    colors: [Color.green.opacity(0.3), Color.blue],
    center: .center,
    angle: .degrees(300)
)

Icons

add an icon. SF Icons are available in the SF Symbols app

1
2
3
Image(systemName: "xmark.circle")
    .font(.largeTitle)
    .foregroundColor(.red)

Fit to frame

1
2
3
4
5
6
Image(systemName: "heart.fill")
    .resizable()
    .scaledToFit()
    .font(.largeTitle)
    .foregroundColor(.red)
    .frame(width: 300, height: 300)

Image

add an image from asset catalog

1
2
3
4
5
Image("Cat")
    .resizable()
    .aspectRatio(contentMode: .fill)
    .scaledToFit()
    .frame(width: 300, height: 200)

Adding Icon with Modifiers

1
2
3
4
5
Image(systemName: "star.fill")
    .resizable()
    .scaledToFit()
    .frame(width: 100, height: 100)
    .foregroundColor(.yellow)

Clip to frame

1
2
3
4
5
6
Image("Cat")
    .resizable()
    .aspectRatio(contentMode: .fill)
    .scaledToFit()
    .frame(width: 200, height: 200)
    .clipShape(Circle())

Padding

Padding is used to add space around the view. You can set the padding for all sides or

specific sides.

1
2
3
4
5
6
7
8
Text("Hello, World!")
    .background(Color.yellow)
    .padding() // Add padding to all sides
    .background(Color.blue)

Text("Hello, World!")
    .background(Color.yellow)
    .padding(.leading, 50) // Add padding to leading side

Spacer

Spacer is used to add flexible space between views. It will take up all the available space.

1
2
3
4
5
HStack {
    Text("Hello, World!")
    Spacer()
    Text("SwiftUI")
}

VStack, HStack and Spacer Example

1
2
3
4
5
6
7
8
9
10
11
12
13
VStack {
    HStack {
        Text("Hello, World!")
        Spacer()
        Text("SwiftUI")
    }
    Spacer()
    HStack {
        Text("Bottom Left")
        Spacer()
        Text("Bottom Right")
    }
}

You can set the alignment of the views in a stack view. The alignment affects the position of
the views within the stack view.

1
2
3
4
5
6
7
HStack(alignment: .top, spacing: 0) {
Rectangle().fill(Color.gray)
                .frame(width: 100, height: 100)
            
            Rectangle().fill(Color.green)
                .frame(width: 120, height: 120)
}

ForEach

ForEach is used to create a view for each item in a collection. It is similar to a for loop.

1
2
3
4
5
VStack {
    ForEach(0..<5) { index in
        Text("Item \(index)")
    }
}

ScrollView

ScrollView is used to create a scrollable view. You can set the axis of the scroll

1
2
3
4
5
6
7
8
9
10
11
ScrollView() {
    VStack {
        ForEach(0..<50) { index in
            Text("Item \(index)")
                .padding()
                .background(Color.yellow)
                .cornerRadius(5)
                .padding(.horizontal)
        }
    }
}