Last updated on April 29, 2020
There are two types of rendering modes for your image assets:
- Original.
- Template.
The original mode will portray the image asset as it is. While the template mode will turn all the non-transparent parts of the image into one color that you can set. And the default color is black.
No overview available.
Apple Documentation
In this tutorial, you’ll learn what is Rendering Mode in SwiftUI. You’ll learn:
- How to use Rendering Mode.
Prerequisites
To follow along this tutorial, you’ll need some basic knowledge in:
- A basic familiarity with Swift.
- At least Xcode 11
Rendering Mode
Xcode does a pretty good job in helping you select the rendering mode when you add an image asset into your project. However, let’s see some of the differences of the rendering mode that can perhaps be useful to your project.
This is one way you could pick your rendering mode.
Another way is to programmatically set it as it is. Below is the effect of original where it is how it is.
|
1 2 3 4 |
Image("model-x") .renderingMode(.original) .resizable() .frame(width: 40, height: 40) |
Given the scenario that your designer would like the image the be in BLUE as a whole, and your designer has no time to do it for you. You may opt for the template option.
|
1 2 3 4 5 |
Image("model-x") .renderingMode(.template) .resizable() .frame(width: 40, height: 40) .foregroundColor(.blue) |
Now, you are both an iOS Developer and a designer.
Where to go From Here
If you feel like you are ready to take on more challenges, feel free to check out some other tutorials that we have created:
Be First to Comment