Homework Assignment 3

In this assignment, you’ll build on the CardView lesson to create a scrollable row of playing cards. You’ll design a reusable card component and populate a ScrollView with multiple instances of it.

Important: VStack and HStack have a limit of 10 direct child views. Stick to 10 cards, or nest stacks if you want more.

Get Started

1. Create a new Xcode project named ScrollViewAssignment.
2. Download the card images, unzip the file, and drag the face cards (those with letter names like AD, not number names) into Assets.xcassets.
3. Create a new SwiftUI view file and name it Cards (or similar).

Build the Card Component

Inside Cards, design a card that matches the example shown in class, then add variables for the values that differ from card to card.

1. Create a variable for the image name and a variable for the title. Set default values for each so your Preview works without extra setup — use these exact defaults: This differs slightly from the textbook approach — their way also works, but this is faster.

var thetitle = "Ace of Diamonds"
var theimage = "AD"

2. Use Image(theimage) in your view, referencing the variable instead of a literal string.
3. Add padding with a number to the image (e.g., .padding(10)).
4. Wrap the image and title in a VStack. Apply both a plain .padding() and a numbered .padding(.bottom, N) to the VStack. You can stack multiple padding modifiers on the same view — that’s intentional.

Set Up the ScrollView

Back in ContentView, set up a horizontally scrolling row of cards:

1. Add a ScrollView with a horizontal axis.
2. Place an HStack inside it and add 10 card instances, passing a different face card image name to each.
3. Test it — the cards should scroll smoothly from side to side.

Bonus: Colored Background

To add a background color to the card view, open Cards and wrap a ZStack around the outer VStack. Insert this as the first child inside the ZStack:

Color.yellow
    .opacity(0.2)
    .edgesIgnoringSafeArea(.all)

Swap in any color and opacity that you like.