SwiftUI Codes

Best SwiftUI Code Warehouse

Lesson 2: Basic Views with SwiftUI

Objective:

Learn how to use Text and Image views, style them, and position them within the interface.

Content:

1. Text View

The Text view displays a string of text.

Displaying Text:

Text("Welcome to SwiftUI")Copy Code

Styling Text:

Text views can be styled with various modifiers:

• font(): Sets the font of the text. For example, .font(.largeTitle) makes the text large.
• foregroundColor(): Sets the color of the text. For example, .foregroundColor(.blue) makes the text blue.
• bold(): Makes the text bold. For example, .bold() applies a bold font weight.
• italic(): Makes the text italic. For example, .italic() applies an italic font style.
• padding(): Adds padding around the text. For example, .padding() adds default padding.

Example:

Text("Welcome to SwiftUI")
    .font(.largeTitle)
    .foregroundColor(.blue)
    .bold()
    .italic()
    .padding()Copy Code

Explanation:

• .font(.largeTitle): Sets the font size to large title, making the text significantly larger.
• .foregroundColor(.blue): Sets the text color to blue, making it stand out.
• .bold(): Applies a bold font weight to the text, making it thicker and more prominent.
• .italic(): Applies an italic style to the text, adding a slight slant.
• .padding(): Adds padding around the text, creating space between the text and other elements.

2. Image View

The Image view displays an image.

Displaying Images:

Image("exampleImage")Copy Code

Styling Images:

Image views can be styled with various modifiers:

• resizable(): Makes the image resizable. For example, .resizable() allows the image to be resized.
• aspectRatio(contentMode:): Sets the aspect ratio of the image. For example, .aspectRatio(contentMode: .fit) scales the image to fit within its bounds while maintaining its aspect ratio.
• frame(width:height:): Sets the width and height of the image. For example, .frame(width: 200, height: 200) sets the image's size to 200x200 points.
• clipShape(): Clips the image to a specific shape. For example, .clipShape(Circle()) makes the image circular.

Example:

Image("exampleImage")
    .resizable()
    .aspectRatio(contentMode: .fit)
    .frame(width: 200, height: 200)
    .clipShape(Circle())Copy Code

Explanation:

• .resizable(): Makes the image resizable, allowing it to be scaled to different sizes.
• .aspectRatio(contentMode: .fit): Maintains the image's aspect ratio while fitting it within its bounds.
• .frame(width: 200, height: 200): Sets the image's size to 200x200 points.
• .clipShape(Circle()): Clips the image to a circular shape.

3. Combining Text and Images

Views can be combined to create more complex layouts:

VStack {
    Text("SwiftUI Logo")
        .font(.title)
        .padding()
    Image(systemName: "swift")
        .resizable()
        .aspectRatio(contentMode: .fit)
        .frame(width: 100, height: 100)
        .foregroundColor(.orange)
}Copy Code

Explanation:

• VStack: A vertical stack that arranges its children vertically.
• Text("SwiftUI Logo"): Displays a text view with the string "SwiftUI Logo".
• .font(.title): Sets the font style to title, making the text larger.
• .padding(): Adds padding around the text view.
• Image(systemName: "swift"): Displays a system image with the name "swift".
• .resizable(): Makes the image resizable.
• .aspectRatio(contentMode: .fit): Maintains the image's aspect ratio while fitting it within its bounds.
• .frame(width: 100, height: 100): Sets the image's size to 100x100 points.
• .foregroundColor(.orange): Sets the image's color to orange.