Use the color picker and images list to set your colors and images directly in the code! SwiftUI Tutorial!

Xcode has the ability to embed colors and images directly in code. This is done with the help of Color Literals and Image Literals.

Downloads

To follow this tutorial, you can download the source file, which will help you compare your progress.

Color Literal

A color literal allows you to select colors using a color picker directly from your code. You can either select a color or type in the HEX code. You can also set the opacity.
Note: Color literals are great for static colors. For colors that adapt to dark mode, I suggest using colors in the Assets Catalog.
Color(#colorLiteral(red: 0.2196078449, green: 0.007843137719, blue: 0.8549019694, alpha: 1))

Image Literal

Similar to color literals, image literals opens up a GUI from where you can select all the images in your Assets Catalog.
You can download stock images from Unsplash.
Image(uiImage: #imageLiteral(resourceName: "YOUR-IMAGE"))

Final Layout

In the final layout, you can quickly change the color of the title and the card’s background image.
VStack {
    Text("Color literal")
        .font(.title).bold()
        .foregroundColor(Color(#colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)))
}
.frame(width: 300, height: 200)
.background(Image(uiImage: #imageLiteral(resourceName: "gradienta-ix_kUDzCczo-unsplash")).resizable().aspectRatio(contentMode: .fill))
.cornerRadius(20)

More Projects

Group 6 CopyCreated with Sketch.

More Information?

Fill out your details and we will get back to you as soon as possible.