Lesson 4 Challenge(14 day challenge)

App Development
1

I am attempting the Toronto tower challenge and I am having a hard time figuring out how to get the words Tornoto and Tower to appear one line below the other. I am using a Zstack for the image as that is the only method to allow text to write on top of it. However when I try using a vstack for the toronto text and one for the tower text, the text of toronto is getting overwritten by the text from the tower. Also I don’t know how to implement the partial invisibility on the word boxes.

Any Advice?

2

Essentially you should have a VStack in which you have two ZStacks (one for each image).

Inside each ZStack you have your Image and then you need a VStack to for the two text items. On the VStack set a background color with an opacity level of, say, 0.7 and then set the foregroundColor to white.

So your rudimentary layout should be something like this:

VStack {
     ZStack {
         Image("imageName")
         VStack {
             Text("landMark")
             Text("City")
         }
     }
     ZStack {
         Image("imageName")

         VStack {
             Text("landMark")
             Text("City")
         }
     }
 }

Hope that give you a couple of pointers.

3

Thanks that does give me some ideas. That actually did work. I had an idea of applying the background color black to the Vstack container but it doesn’t allow me to add the color to it.

Any advice?

4

Yes, try this:

VStack {
     ZStack {
         Image("imageName")
         VStack {
             Text("landMark")
             Text("City")
         }
        .padding()
        .background(Color.black.opacity(0.7))
        .foregroundColor(.white)
        .cornerRadius(10)
     }
     ZStack {
         Image("imageName")

         VStack {
             Text("landMark")
             Text("City")
         }
     }
 }
5

Thank you for your help, that actually worked. I am kind of curious why the sequences of stacks goes VStack then ZStack and not the other way around. Also why does the command Color.black.opacity generate the blurry black color background? How does the cornerRadius command know which boxes it can be applied to and which it can’t.

I am just kind of curious about the coding.

6

If you are familiar with Photoshop and how layers work then that might be a good analogy. If you aren’t familiar with it then the best way to explain it is to look at the purpose of each of those Views.

  • VStack - arranges objects one above each other
  • HStack - arranges objects beside each other with the listed order of the objects presented on screen from left to right
  • ZStack - arranges objects on top of each other with the listed order being that the first object is on the bottom and subsequent objects on top of each other.

So with that in mind if you want two ZStacks to appear on the screen (one above the other) then you have to have both of them in a VStack.

Inside each VStack you have an Image listed first so that is in the background with a VStack sitting on top of the Image with two Text objects one above each other.

The modifier .background(Color.black.opacity(0.7)) does not actually make the image in the background blurry. All it is doing is shading the background so perhaps that is giving the illusion that it is blurred. If you look at the rendering in Preview mode and zoom in to 400% I think you will see that it is not blurry but just darker which is the intent.

The .cornerRadius(10) modifier is applied to the VStack element so it applies the radius to the View as a whole rather than the individual elements in the View.

Hope that makes sense