{"id":2953,"date":"2020-08-19T21:25:17","date_gmt":"2020-08-19T21:25:17","guid":{"rendered":"http:\/\/4310.mynmi.net\/?page_id=2953"},"modified":"2026-04-23T21:20:48","modified_gmt":"2026-04-23T21:20:48","slug":"homework-assignment-3","status":"publish","type":"page","link":"https:\/\/nmi.cool\/appdev\/homework-assignment-3\/","title":{"rendered":"Homework Assignment 3"},"content":{"rendered":"\n

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<\/code> with multiple instances of it.<\/p>\n\n\n\n

Important:<\/strong> VStack<\/code> and HStack<\/code> have a limit of 10 direct child views. Stick to 10 cards, or nest stacks if you want more.<\/p>\n\n\n\n

Get Started<\/h2>\n\n\n\n
  1. Create a new Xcode project named ScrollViewAssignment<\/strong>.<\/li>\n
  2. Download the card images<\/a>, unzip the file, and drag the face cards<\/strong> (those with letter names like AD<\/code>, not number names) into Assets.xcassets<\/code>.<\/li>\n
  3. Create a new SwiftUI view file and name it Cards<\/strong> (or similar).<\/li><\/ol>\n\n\n\n

    Build the Card Component<\/h2>\n\n\n\n

    Inside Cards<\/code>, design a card that matches the example shown in class, then add variables for the values that differ from card to card.<\/p>\n\n\n\n

    \"Example<\/figure>\n\n\n\n
    1. Create a variable for the image name<\/strong> and a variable for the title<\/strong>. Set default values for each so your Preview works without extra setup \u2014 use these exact defaults: This differs slightly from the textbook approach \u2014 their way also works, but this is faster.<\/li>\n\n\n
      var thetitle = \"Ace of Diamonds\"\nvar theimage = \"AD\"<\/code><\/pre>\n\n
    2. Use Image(theimage)<\/code> in your view, referencing the variable instead of a literal string.<\/li>\n
    3. Add padding with a number<\/strong> to the image (e.g., .padding(10)<\/code>).<\/li>\n
    4. Wrap the image and title in a VStack<\/code>. Apply both a plain .padding()<\/code> and a numbered .padding(.bottom, N)<\/code> to the VStack<\/code>. You can stack multiple padding modifiers on the same view \u2014 that’s intentional.<\/li><\/ol>\n\n\n\n
      Set Up the ScrollView<\/h2>\n\n\n\n
      Back in ContentView<\/code>, set up a horizontally scrolling row of cards:<\/p>\n\n\n\n
      1. Add a ScrollView<\/code> with a horizontal axis<\/strong>.<\/li>\n
      2. Place an HStack<\/code> inside it and add 10 card instances<\/strong>, passing a different face card image name to each.<\/li>\n
      3. Test it \u2014 the cards should scroll smoothly from side to side.<\/li><\/ol>\n\n\n\n
        \"ScrollView<\/figure>\n\n\n\n
        Bonus: Colored Background<\/h2>\n\n\n\n
        To add a background color to the card view, open Cards<\/code> and wrap a ZStack<\/code> around the outer VStack<\/code>. Insert this as the first child inside the ZStack<\/code>:<\/p>\n\n\n\n
        Color.yellow\n    .opacity(0.2)\n    .edgesIgnoringSafeArea(.all)<\/code><\/pre>\n\n\n\n
        Swap in any color and opacity that you like.<\/p>\n","protected":false},"excerpt":{"rendered":"
        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. … Continue reading Homework Assignment 3<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2953","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nmi.cool\/appdev\/wp-json\/wp\/v2\/pages\/2953","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nmi.cool\/appdev\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nmi.cool\/appdev\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nmi.cool\/appdev\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nmi.cool\/appdev\/wp-json\/wp\/v2\/comments?post=2953"}],"version-history":[{"count":9,"href":"https:\/\/nmi.cool\/appdev\/wp-json\/wp\/v2\/pages\/2953\/revisions"}],"predecessor-version":[{"id":4270,"href":"https:\/\/nmi.cool\/appdev\/wp-json\/wp\/v2\/pages\/2953\/revisions\/4270"}],"wp:attachment":[{"href":"https:\/\/nmi.cool\/appdev\/wp-json\/wp\/v2\/media?parent=2953"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}