Akvelon | SwiftUI in Action
Nail Shakirov, the Director of Engineering at Akvelon's Kazan office, has written an article on "SwiftUI in Action" that was published on Medium.com
SwiftUI, Swift UI, Apple, iOS
post-template-default,single,single-post,postid-25629,single-format-standard,ajax_fade,page_not_loaded,,qode-theme-ver-8.0,wpb-js-composer js-comp-ver-4.9.2,vc_responsive

09 Jul SwiftUI in Action


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

SwiftUI in Action

Xcode new project popup with Use SwitchUI option

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 screen

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:

Coding SwiftUI in Action 1

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

Prototype cell with preview

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

SwiftUI in Action Coding 2

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):

SwiftUI in Action Coding 3

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

Previews with different states

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 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.

SwiftUI in Action Coding 4

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

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

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.

SwiftUI in Action Coding 5

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:

Swift UI in Action Coding 6

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

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 

SF Symbols


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:

Swift UI in Action Coding 7

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:

Swift UI in Action Coding 8

This code execution will give us the following result:

Application running on macOS Catalina

Application running on macOS Catalina


Apple delivered a new way of building UI with declarative semantics which makes Apps development faster and more efficient across all Apple platforms with the power of Swift.

Utilizing this new approach, we have implemented an iOS App using only SwiftUI capabilities. Yet the resulting app can run on any Apple platform starting from watchOS up to tvOS.

Sources of this application are available on .

SwiftUI compatible with following Operating Systems: iOS 13, iPadOS 13, watchOS 6, macOS 10.15 and tvOS 13.

About us

We at  love cutting edge technologies in mobile development, blockchain, big data, machine learning, artificial intelligence, computer vision, and many others. This article is the result of one of many projects developed in our Office Strategy Labs where we’re testing new technologies, approaches before delivering them to our clients.

Akvelon company official logo

If you would like to work with our strong Akvelon team — .

Written in collaboration with Artur Mikhaylov

Nail Shakirov Project Manager Akvelon

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.



More Insights

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 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

Constantine Korovkin provides 2019 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



We Make BIG Software Happen. Contact Us