Module 2 Lesson 15 Background

App Development
1

I have been trying to put a background to the RecipeListView and have not succeeded. Tried ZStack and Image with background but this does fill the whole screen. Can you please help?

2

When you specify an Image and you want that to fill the entire screen (no matter how big or small the image is in terms of horizontal and vertical pixel count) you have to use a couple of modifiers to tell iOS how to deal with it.

The first one is to tell iOS that the image can be resized so add the modifier
.resizable()

This may make the image look a bit distorted as iOS will squash or expand the image to make it fit to the screen edges.

To maintain the aspect ratio you would add the modifier
.aspectRatio(contentMode: .fill)

By default the image will not go up past the Safe Area at the top and wont go past the Safe Area at the bottom so to overcome that use the modifier
.ignoresSafeArea()

3

In Chris’s RecipeListView where do I insert the background image? This is because the image background then hides the recipe image and text.

4

A List() wont allow you to have a background image. I gave that a try.

5

Order matters.

Create a ZStack and the first item should be your background. Everything after that (still in the ZSTack) will be stacked on top of each other (like other items, VStacks, HStacks, Lists…)

6

@Wildsparrow

Doesn’t work. I’ve already tried that hence the advice I gave the OP.

1 Like
7

I see.

So it is not possible to have a background or other color than white behind a List?

8

That’s correct. List is effectively a UIKit TableView. Whether you can access the underlying TableView methods through Application.shared… I have no idea.

1 Like