So add .edgesIgnoringSafeArea(.all) modifier so the image runs to the edge of your screen. In turn, by adding the resizable modifier the image goes as far as the safe area. If you add the resizable() modifier then the image will be automatically sized so that it fills all the available space. however, note this may make the image go beyond the screen size. By default, image views automatically sizes itself to their contents. In SwiftUI, images can be resized in different ways.
I named my files bgkMain.Īdd image code just beneath the ZStack and before the VStack containing the text. You can check the screen sizes on the Apple developer site. Download the file and format for the iPhone. Using Unsplash, I downloaded a great photo by Chris Grafton taken of Washington DC Metro station. Check that your display is the same as what is shown to the right. Go back to the MainView file and view the preview screen. Where Station is managed from the MainView file. The initial display was Hello World and now is Station. In the above code you have redirected what the content view will first show. In MainView, begin by setting up the ZStack with the word station as text.Ĭheck the output is showing station, you will need to change the ContentView file to the following Setting up the main viewĬreate a new SwiftUI file - for this project I named it MainView.
If not, read through how to create a new SwiftUI project first. This article works from the premise that you know how to create a new SwiftUI project.
So how to achieve the same result using SwiftUI? The gradient overlay article was written using UIKit. Previously I've looked into adding a tint overlay to a background image.
If you get lost along the journey, the final result is available on GitHub. Adding a black tint, then transform it to a gradient using a colour array. The journey will go through text modifiers with regular and semibold font weights, and font colour. I'm going to take you on a journey about adding a gradient tint to a background image.