iOS: Why You Should Start Using XCAssets to Manage Your Interface Design
Reduce clutter and make design changes much, much easier
The XCAssets structure provided by Apple can be used for a whole number of tasks nowadays. We’ll be focusing on two of those applications that pretty much any project should use: images and colors.
Why is this important?
As projects grow and age, more assets get added and the style and colors tend to change. Updating your app to cope can become an annoying task, especially if you have design configuration all over the place.
This will be the first step in making it much easier to manage your app styles. Not only for your own updates, but also changes from Apple, such as the new Dark Mode that was introduced with iOS13. If you set up your styles the right way, you get this functionality pretty much for free, even if you are not using default settings provided by the system.
There’s also performance advantages to consider. The assets file will be converted into a single file when building your app, containing efficient references to your assets. Also, using an assets file allows your app to be thinned using app thinning, which makes sure downloaders of your app will never receive versions of assets that are not applicable to their device.
Populating the xcassets file
Open a project and select the Assets.xcassets file. You’ll see a screen a new set of panels. On the left your asset groups will be displayed and on the right the one currently selected. Right-click the left pane or press the plus icon in the bottom and select “image set”.
Although it’s called an image set, the end result of a set is a single image to be used and any point in time. By default you’ll see three options: 1x, 2x and 3x. These numbers signify the used screen scaling ratio, where newer phones with a higher PPI will use bigger images:
A standard-resolution display has a 1:1 pixel density (or @1x), where one pixel is equal to one point. High-resolution displays have a higher pixel density, offering a scale factor of 2.0 or 3.0 (referred to as @2x and @3x). As a result, high-resolution displays demand images with more pixels. — Apple.com
Note devices currently support by Apple’s ecosystem don’t have a single 1x device listed anymore, we’re past that for a while: the iPhone 3GS (2009) and the iPad mini 2 (2012) were the last non-retina devices, although the latter was officially sold until 2015.
Although it’s highly recommended to provide both 2x and 3x images, this is just the start.
Now let’s turn our attention to colors for a moment. If you press the +-icon again and select ‘color set’, you’ll end up with a screen with a single color. Things become more interesting when you add more options. Select the attributes inspector on the right. You’ll see a variety of options, including Appearances. Opening that dropdown will give you three options. The names can be a bit confusing, but basically they mean:
- None: Use one combination for all app appearances
- Any, Dark: Use two combinations: One for dark mode and one for ‘the rest’
- Any, Light, Dark: Same as before, but also include a specific color for light mode.
The difference between light and any? Currently there’s none, but there might be in the future, allowing you to future-proof your app already.
Choosing any option besides none shows your how the color just become a real set. Want help out users who prefer or need high-contrast interfaces? Check the High Contrast box. Some goes for localizations, the assets file makes it very easy to include an exception to allow one localization to use one or more different colors.
Using the assets in code
Putting those beautiful assets to good use couldn’t be simpler:
// For UIKit, where the string is the name in your assets file
let color = UIColor(named: "ColorName")
let image = UIImage(named: "ImageName")// For SwiftUI the syntax is even shorter:
let color = Color("ColorName")
let image = Image("ImageName")
The result object will dynamically change depending on the enviroment; so when the device switches for example from dark mode to light mode, the color and elements using it wil automatically adapt on the fly.
The next step
Using these references in your code will already help simplify and maintain your UI styling setup significantly. A good next step is to not use these names directly. A typo or removed asset would not lead to any warnings or errors compile-time, but can lead to unexpected issues when running your app. SwiftGen can help you prevent using these references by generating constants you can use.
If you prefer to start out with a simpler approach I would suggest at least defining these constants yourself to prevent typo’s and allow you to use autocomplete to find the color you are looking for. Of course, styling doesn’t just consist of properties you can specify in an asset file, but that’s another topic.
