Search icon CANCEL
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Conferences
Free Learning
Arrow right icon
Arrow up icon
GO TO TOP
Mastering iOS 14 Programming

You're reading from   Mastering iOS 14 Programming Build professional-grade iOS 14 applications with Swift 5.3 and Xcode 12.4

Arrow left icon
Product type Paperback
Published in Mar 2021
Publisher Packt
ISBN-13 9781838822842
Length 558 pages
Edition 4th Edition
Languages
Tools
Arrow right icon
Authors (3):
Arrow left icon
Mario Eguiluz Alebicto Mario Eguiluz Alebicto
Author Profile Icon Mario Eguiluz Alebicto
Mario Eguiluz Alebicto
Chris Barker Chris Barker
Author Profile Icon Chris Barker
Chris Barker
Donny Wals Donny Wals
Author Profile Icon Donny Wals
Donny Wals
Arrow right icon
View More author details
Toc

Table of Contents (22) Chapters Close

Preface 1. Chapter 1: What's New in iOS 14? 2. Chapter 2: Working with Dark Mode FREE CHAPTER 3. Chapter 3: Using Lists and Tables 4. Chapter 4: Creating a Detail Page 5. Chapter 5: Immersing Your Users with Animation 6. Chapter 6: Understanding the Swift Type System 7. Chapter 7: Flexible Code with Protocols, Generics, and Extensions 8. Chapter 8: Adding Core Data to Your App 9. Chapter 9: Fetching and Displaying Data from the Network 10. Chapter 10: Making Smarter Apps with Core ML 11. Chapter 11: Adding Media to Your App 12. Chapter 12: Improving Apps with Location Services 13. Chapter 13: Working with the Combine Framework 14. Chapter 14: Creating an App Clip for Your App 15. Chapter 15: Recognition with Vision Framework 16. Chapter 16: Creating Your First Widget 17. Chapter 17: Using Augmented Reality 18. Chapter 18: Creating a macOS app with Catalyst 19. Chapter 19: Ensuring App Quality with Tests 20. Chapter 20: Submitting Your App to the App Store 21. Other Books You May Enjoy

Working with the asset catalog for Dark Mode

Since the ability to add colors to the asset catalog became available back in Xcode 9, there is now even more reason to take full advantage of one of Xcode's prized assets.

In this section, we'll look at how we can use the asset catalog not only to create our custom colors but also to create our own adaptive colors and images, allowing us to harness the power of Xcode when developing dynamic appearance applications.

Using custom adaptive colors

Sticking with our current project, head on over to the file inspector, and highlight the Assets.xcassets folder. With the following layout visible, click on the + button highlighted in the following screenshot and select New Color Set from the list of options:

Figure 2.19 – Creating a color set

Figure 2.19 – Creating a color set

Add in another three color sets and name them the following:

  • brandLabel
  • brandSecondaryLabel
  • brandTertiaryLabel

Highlight brandLabel, and then highlight the option in the central asset preview window. Notice the list of attribute options now made available to us in the Attributes Inspector pane:

Figure 2.20 – Adding a color set

Figure 2.20 – Adding a color set

As you can see, we can now define the brandLabel color that we want to use. But first, let's make it adaptive. In the Attributes Inspector pane, change Appearance from None to Any, Light, Dark.

You'll have noticed on the dropdown that there was another option of Any, Dark, so let's go through what this means:

  • None: This is a default color and won't be adaptive to your selected appearance.
  • Any, Dark: In this scenario, Any will support legacy versions of your app, along with any other variations that aren't dark (so light, basically). Dark will be dark…
  • Any, Light, Dark: Same as the preceding but will allow you to specifically select a value for legacy and light (along with dark).

So, with that covered, let's add some colors. Now, as mentioned before, this is where you can be really specific with your color choices, either by personal preference or brand guidelines you have to follow. For me, I'm just going to click Show Color Picker and pick my favorite colors:

  • Tangerine for Any (Legacy) and light
  • A more subtle Cantaloupe for dark:
Figure 2.21 – Choosing a color

Figure 2.21 – Choosing a color

Do the same for brandSecondaryLabel and brandTertiaryLabel, remembering to slightly alter the colors based on the semantic purpose you intend to use them for.

Once you've done that, head back on over to Interface Builder and highlight primaryLabel, then bring open the options of colors from Attributes Inspector. You should see the following:

Figure 2.22 – Default label color

Figure 2.22 – Default label color

All the color sets you created in the asset catalog are available to use right there in Interface Builder. Go ahead and add them in for each label and see how they look by switching appearance in Interface Builder:

Figure 2.23 – Color set, light mode versus dark mode

Figure 2.23 – Color set, light mode versus dark mode

With that done, you've created your very own adaptive, semantic and dynamic colors for your app – all within the power of Xcode.

If you wanted to use the colors programmatically, you can do that by simply referring to the asset name in a couple of different ways.

First is a direct reference to the name of the assets:

primaryLabel.textColor = UIColor(named: "brandLabel")

Alternatively, you can select the asset directly from the media library by pressing Shift + CMD + M and selecting show color palette from the icon options and selecting the color you want.

This will insert the color from the assets catalog as a swatch, directly inside your code:

Figure 2.24 – Assigning a color set programmatically

Figure 2.24 – Assigning a color set programmatically

Or another option, if you really wanted to keep your code clean, would be to create an extension of UIColor allowing you to define your own property:

extension UIColor {
    static var brandLabel: UIColor {
        return UIColor(named: "brandLabel") ?? UIColor.label
    }
}

This can now be used just like this:

primaryLabel.textColor = UIColor.brandLabel

This is a nice, clean, and manageable way to look after your custom color sets programmatically, but this really is a personal preference, and each to their own. If you're working with a large alternative color guideline, making the change to a primary color in one extension will roll the change out to your entire app without the worry of missing a label or two.

Next, let's take a look at the same approach but for images.

Using custom adaptive images

We've learned a lot about how the asset catalog works with adaptive images from the previous section, Custom adaptive colors, and luckily, we can take full advantage of that in creating adaptive images for our project.

In the same way that we created a new color set, let's follow these steps:

  1. Head on back over to Assets.xcassets.
  2. Create a new image set:
    Figure 2.25 – New image set

    Figure 2.25 – New image set

  3. Name your new image header, highlight it, and change the appearance in the Attributes Inspector window to Any, Dark. You should now see the following:
Figure 2.26 – Add new image set

Figure 2.26 – Add new image set

When adding an image to the image catalog, you'll be given the option for adding 1x, 2x, or 3x images – these are different image scales you can set for various screen sizes. For further information, see the following from Apple's documentation.

For this example, we are going to add in two different images to the 2x option: one for Any and the other for Dark. You can grab the images I've used from the sample project found in GitHub or choose your own – it's up to you. From the Finder, simply drag and drop the images into the 2x placeholder inside Xcode. You should see the following once done:

Figure 2.27 – New image set variants

Figure 2.27 – New image set variants

Now, head back on over to your storyboard and add in a UIImageView to your project. Add this to the top of ViewController to act as a header.

Once in place, head on over to the Attributes Inspector pane and select the dropdown for the Image option – there, you should see your newly created asset, header:

Figure 2.28 – Setting header from the image set

Figure 2.28 – Setting header from the image set

Select this and take a look (depending on the size of the image you chose, you may need to set Content Mode to Aspect Fill – these options can also be found in Attributes Inspector).

Run the simulator and have a look at everything you've achieved so far in this chapter, remembering to switch from light to dark appearance by using the environment override in Xcode… looks pretty good, right?

Figure 2.29 – Header light mode versus dark mode

Figure 2.29 – Header light mode versus dark mode

Just like we did with color sets, we can of course handle this programmatically, should we wish. Let's add another extension to our app to handle this for us:

extension UIImage {
    static var header: UIImage {
        return UIImage(named: "header") ?? UIImage()
    }
}

We can again use this in just the same way as before:

headerImageView.image = UIImage.header

We do this by assigning our header image directly onto our UIImageView.

In this section, we harnessed the power of the asset catalog to allow us to create custom adaptive and dynamic colors and images for our app. In the next section, we'll take a look at how best to update a legacy app to support dark mode with everything we've learned so far, and also how best to identify the little things we can do to futureproof our apps for various appearances.

You have been reading a chapter from
Mastering iOS 14 Programming - Fourth Edition
Published in: Mar 2021
Publisher: Packt
ISBN-13: 9781838822842
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at €18.99/month. Cancel anytime