Transcript

We’ve made our basic wireframe, now let’s begin to add  more content. The images we have now wont tell us a much as true images. So we’ll load some images into the icon , the header and the menu items using two placeholders. 

You’ll find like to the photos here and here. Download them and store them in your photos album. 

First we’ll add the surfer to the app icon.  Open the side bar a tap the app settings button. We’ve been using the placeholder, but, tap the custom selection.  Tap Import from Photos. On large images, you’ll get a warning about reducing the size. Click Scale image. Close the settges and the app. You’ll see the icon has changed. 

Go back into the app. Tap the three dots at top to go into multipane mode. Open photos in the second pane.

Find the surfer and drag her over to the sidebar.  Release and she appears in the files list. Do the same with the pizza.  Hold down the name of the surfer, tap Rename and change to surfGirl1. 

Do the same to the pizza and name it Pizza.

Close the sidebar, 

In contentView, change the image to this: 

Image("SurfGirl1")

You add images by thier name in a string.  We get a huge image of the surfer painting.  To size the image to sometihing reasonable we’ll use two modifiers

.resizable()

Lets the image change size. This must be directly after the image.  Then I’ll add

.scaledToFit()

Which autiomatically scales the image to fit the size of the containg view. 

That looks a lot better. 

Head over to menu item view and replace the circle with  the pizza 

Image("Pizza")

And once you do, if you check the preview. The pizza overwhelms the view. We’ll again use the resizable modifier to control this. 

.resizable()

I get a distored pizza.  There’s another way to size images. we can specify the size of the frame of the image like this

.frame(maxWidth:150,maxHeight:150)

and then we get a square pizza image.  

However we wanted a circle. There is anothere modifier whic changes the shape of the photo called clipshpae. Clipshape takes asa parameter one fo the standard shapes available in SwiftUI: Circles, rounded rectangles, and capsules are threee common ones. So I can add 

.clipShape(Circle())

My image becomes a circle. 

Going back to Content view, we see the pizzas in front of the menu items.  I’ll add a little padding to move them away fro the edge.

.padding(.leading)

I can clip shape the Surfer too. this time I’ll do ti with a rounded rectangle:

.clipShape(RoundedRectangle(cornerRadius:10))

This is starting to look likea real app. Before we get to more in Swift UI We’ll nedd to understand more Swift, in our next lesson we’ll explore more about types and  type declarations.