This article written by Nail Shakirov, the Director of Engineering at Akvelon’s Kazan office, and was originally published in Medium.

Xcode new project popup with Use SwitchUI option

So we’ve created our default project, and the first thing we see is the “Hello world” scene where we can start coding:

Default Hello World project scene

At the left side, we have an editor while on the right there is a new window called “Canvas” which allows us to see our UI changes in real-time.

Note that alongside with View struct, now we also have code for preview which runs on DEBUG scheme only. That code preview is connected directly with the “Canvas” in order to draw our UI in Canvas in real-time.

Building List (as a replacement for UITableView)

The first screen of our App should contain a list of cities with their current weather conditions.

So to start up things, let’s create a prototype cell for displaying a single city with accessibility (Voice Over) compliance in mind:

We can use Groups in preview in order to see UI’s look and feel in different configurations and sizes in real-time.

Prototype cell with preview

Go back to the first scene and create a List with cells that we just implemented.

Previews in Canvas

Previews in Canvas can be easily configured using the same declarative semantics as used by SwiftUI (see the comments in the code below):

That allows us to see real-time previews of our view both in light and dark appearances.

Previews with different states

Dark Mode

Speaking of light and dark appearances, SwiftUI is doing a really good job of tracking changes between dark and light appearances which user can pick in System Setting menu.

First of all, let’s focus on dynamic colors. In order to take advantage of dynamic appearances, colors now should have initializer with a closure that contains current traits. Traits present all user UI preferences including preferred font size, color schemes, etc. The only thing that would be relevant in this case is userInterface enum with two cases: .light and .dark.

It’s even easier if you are using Assets for storing your colors, as Apple added a drop-down menu that allows us to specify different appearances of current color in regards to color scheme.

Color Assets

Any appearance would be used on devices which don’t have Dark Mode (iOS version less than 13).

Light appearance is optional and can be skipped. If not specified, the system will pick Any Appearance option for Light interface of iOS.

Dark appearance specifies display color with Dark Appearance enabled on iOS device.

Remember, user needs to switch device between Light and Dark Appearance settings to see app UI reflecting proper appearance.

Images and SF Symbols

For the second screen, we want to show the weather of the selected city in details. These are expected to be shown on the device properly in both light and dark modes, as well as city images.

San Francisco Weather Screen Light and Dark Modes with SF symbols

Implementation of given screens is rather interesting as now we have to explicitly return View component which is GeometryReader that allows reading current screen size.

There are two components embedded in code above (ConditionColumn and ConditionRow), both configured with Condition object but with slightly different layouts. Let’s take a look at one of them:

GeometryReader component allows getting the actual component size that we can use to adjust image height based on view width.

Image. Image component can be initialized with image name directly (like Image(“Moscow”)) with fully automatic support for Light and Dark Appearances.

Dynamic Images are pretty straightforward to implement as it behaves the same as Colors with three available options for Appearance: Any, Light and Dark. (see picture below).

Images Asset

SF Symbols. Here we have Image component that uses systemImageinitializer in order to grab the image by name from SF Symbols catalog. You can find all supported images directly in SF Symbols App available on the apple.developer.com

SF Symbols

Navigation

Now that we have CityList and CityDetail screens ready, it’s time to connect them. We can do this by implementing push transition with NavigationLinkcomponent. This component will handle user taps on view inside and navigate to destination screen. In our case, tappable view would be CityRow view and destination is CityDetails:

That gives us the ability to push CityDetails in navigationController stack.

Running App on macOS

In order to run Application on Mac, we should use the following override function in SceneDelegate file:

This code execution will give us the following result:

Application running on macOS Catalina

Nail Shakirov is the Director of Engineering at Akvelon’s Kazan office. He has a solid software development background and experience in all software development stages: technical design, implementation, testing, and operation.

Akvelon’s DevDay Conference Welcomed Special Guest Speaker, Esteemed Anton Keks

This year, Akvelon welcomed special guest speaker Anton Keks of Codeborne to our annual DevDay Conference. Read more here.

Akvelon Software Development Manager speaks at Kharkiv Project Management Day

Akvelon Software Development Manager Kyrylo Beloborodko was invited to speak at Kharkiv Project Managment Day this Spring, where he discussed his insights and experiences in IT project management. Read more here

Akvelon COO Constantine Korovkin Visits Office in Kharkiv, Ukraine and Provides Company Update

With over 700 employees at offices all over the globe, Akvelon knows the importance of keeping connected throughout the company. That is why Akvelon COO and Co-founder Constantine Korovkin visited our office in Kharkiv, Ukraine this week to touch base. Read more here