Working with Text, Images, Buttons, and Stacks

# CHAPTER 12

Working with Text, Images, Buttons, and Stacks #

1. Introduction #

2. Learning Objectives #

• Apply advanced typography modifiers to the Text view.

• Import and render local image assets into your Xcode project.

• Utilize Apple's SF Symbols library using Image(systemName:).

• Create interactive Button views with custom layouts.

• Combine all components into a cohesive Profile Card mini-project.

3. Advanced Text Styling #

Text("iOS Architecture")
    .font(.system(.title, design: .rounded)) // Semantic size, rounded design!
    .fontWeight(.heavy)
    .foregroundColor(.primary) // Adapts automatically to Dark/Light mode!
    .multilineTextAlignment(.center)
    .lineLimit(2) // Truncates with "..." if the text is too long!

4. Working with Images #

1. 1. Open the Navigator panel in Xcode and click the Assets.xcassets folder.

1. 2. Drag and drop a .jpg or .png file into the Assets folder (let's say we name it "dog_photo").

1. 3. Call it in code using Image("dog_photo").

By default, an Image will render at its massive, original resolution, blowing right off the screen! You MUST explicitly tell SwiftUI to allow resizing.

Image("dog_photo")
    .resizable()             // CRITICAL: Allows the image to shrink!
    .aspectRatio(contentMode: .fill) // Fills the frame, cropping excess
    .frame(width: 150, height: 150)
    .clipShape(Circle())     // Cuts the image into a perfect circle!

5. SF Symbols (Apple's Icon Library) #

*(Tip: Download the free "SF Symbols" app from Apple's developer website to browse the thousands of available icon names).*

Image(systemName: "heart.fill")
    .font(.system(size: 50)) // Resize it using text modifiers!
    .foregroundColor(.red)

6. Buttons (Adding Interactivity) #

1. 1. The Action: What happens when the user clicks it (Swift logic).

1. 2. The Label: What the button looks like (UI Views).

Button(action: {
    // 1. The Action (Logic)
    print("User tapped the login button!")
}) {
    // 2. The Label (UI)
    Text("Log In")
        .font(.headline)
        .foregroundColor(.white)
        .padding()
        .frame(maxWidth: .infinity)
        .background(Color.blue)
        .cornerRadius(10)
}

7. Mini Project: Profile Card UI #

import SwiftUI

struct ProfileCardView: View {
    var body: some View {
        VStack {
            // Using an SF Symbol as a placeholder avatar
            Image(systemName: "person.circle.fill")
                .resizable()
                .frame(width: 100, height: 100)
                .foregroundColor(.gray)
                .padding(.top, 20)
            
            Text("Jane Developer")
                .font(.title)
                .bold()
            
            Text("Senior iOS Engineer")
                .font(.subheadline)
                .foregroundColor(.secondary)
                .padding(.bottom, 20)
            
            HStack(spacing: 20) {
                // Button 1: Message
                Button(action: { print("Message tapped") }) {
                    Label("Message", systemImage: "message.fill") // Label combines Text and an SF Symbol!
                        .padding()
                        .background(Color.blue)
                        .foregroundColor(.white)
                        .cornerRadius(8)
                }
                
                // Button 2: Follow
                Button(action: { print("Follow tapped") }) {
                    Label("Follow", systemImage: "person.badge.plus")
                        .padding()
                        .background(Color.green)
                        .foregroundColor(.white)
                        .cornerRadius(8)
                }
            }
            .padding(.bottom, 20)
        }
        .frame(width: 300)
        .background(Color.white)
        .cornerRadius(20)
        .shadow(radius: 10) // Drops a beautiful shadow behind the entire card!
    }
}

#Preview {
    // Putting it on a gray background so the white card pops!
    ZStack {
        Color.gray.opacity(0.2).ignoresSafeArea()
        ProfileCardView()
    }
}

8. Common Mistakes #

• Forgetting .resizable(): If you import a 4K resolution image into Xcode and write Image("my_photo").frame(width: 100), the image will ignore your frame and take up the entire screen. In SwiftUI, an image is absolutely rigid until you explicitly add .resizable() before any frame modifiers.

9. Best Practices #

• Use Label for Icon+Text: If you want a button that has a small icon next to text, do not manually build an HStack with an Image and a Text. Use the built-in Label("Title", systemImage: "icon") component. It is highly optimized for accessibility and alignment!

10. Exercises #

1. 1. Find an image on your computer, drag it into the Assets.xcassets folder, and render it in a view as a 200x200 circle.

1. 2. Create an SF Symbol icon of a star (star.fill) and make it yellow.

11. Coding Challenges #

12. MCQ Quiz with Answers #

13. Interview Questions #

• Q: Explain the structural syntax of a Button in SwiftUI. How does SwiftUI cleanly separate the logic execution block from the visual rendering block?

• Q: Contrast the rendering behaviors of Image("custom_asset") versus Image(systemName: "icon"). Why can you use .font() to resize the latter?

• Q: What is the specific UI purpose of the Label component, and why is it preferred over manually stacking an Image and Text view?

14. FAQs #

15. Summary #

16. Next Chapter Recommendation #