SwiftUI Image View

Basic Image

Right click to save this image:

Instructions

Make sure you drag an image to the Assets.xcassets folder.

Code:

Add this code the var body: some View section of your ContentView.swift file.


Image("jony")

Resizing an image to Fit the available space

Right click to save this image:

Instructions:

Use the .resizable() and .aspectRatio() styles to resize and fit your image to your screen.

Code:

Add this code the var body: some View section of your ContentView.swift file.

        VStack()
            {
                Image("logo")
                Image("logo").resizable().aspectRatio(contentMode: .fit)
            }

Image using .clipShape() style to add a shape mask to your image

Right Click to save this image:

Instructions:

You can use the .clipShape Style to add a shape mask to your image.

Code:

Add this code the var body: some View section of your ContentView.swift file.

 VStack{
            Image("steve")
            Image("steve").clipShape(Circle())
            Image("steve").clipShape(RoundedRectangle(cornerRadius: 20))
            Image("steve").clipShape(Capsule())
        }

Image using SF Symbols

Apple has an application called SF Symbols that provides over 1500 symbols that can be used in your app. Here is the link. Download it to get the full list of symbols and their names.

You can use the .foregroundColor() style to change the symbols color and you can use the .font() style to change the symbol’s size

Code:

Add this code the var body: some View section of your ContentView.swift file.

 HStack{
               Image(systemName:"square.and.arrow.up")
               Image(systemName:"trash").foregroundColor(.green)
               Image(systemName:"folder").font(.largeTitle)
               Image(systemName:"calendar")
               Image(systemName:"cloud.snow")
       }

Recommended Books