Homework Assignment Two

In the previous version of Swift, even the most talented students struggled with formatting their apps for multiple devices. However, with SwiftUI and the magic of Stacks, the formatting tools are so much better. This said, it still take time and effort to master, so here we go!

In this exercise you will download a couple unrelated images (I lie, they’re Harry Potter house crests), add text and formatting, extract a view, and create some variables to achieve a certain look, produce tidy code, and tell me a little bit about yourself via your house selection. It’s serious business.

1. Look at the screen capture at the bottom of the prompt for an example of the look you’ll be going for. Choose which two houses most represent yourself (in case you need a little help) for this View layout.
2. You have some creative freedom as far as text styling. However, each line should vary in style (e.g. size, weight, font, etc) to create a nice hierarchy as seen in the example below.
3. Your info for each house should have a background color that’s associated with the selected house. Round the corners of the background (hint: my corner radius is 10).
4. Ensure you have a padding of 10 or more around your elements inside your background color. I have a padding of 30 in the example. I also added a horizontal padding around each VStack, but you’re not required to.
5. Your app should use the info as it corresponds to your top 2 houses. You can find HP house info at the bottom of the screen in case you don’t know or care to look it up (but seriously, get your priorities in order). Click here to download the zip file containing the 4 crest images.
6. NOTE: You only need to build out one house since you’ll be extracting the view!
7. IMPORTANT: Use an extracted view to display each house’s crest, color, and information. The process is exactly as the Chapter four lesson. First, create the look that you want for one house. Then, command click on the Vstack that contains the image and text and extract the view, just as you did in Chapter 4. Set variables for each feature and use the extracted view to create a view for each candidate. For example, here is what things looked like for me after I extracted the Vstack and reused it.
   
   What I am NOT going to show you is the set of variables that I created after I extracted the view.
8. Make the ContentView of your app look as much like mine (below) as possible (with your houses of course).