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.
So we’ve created our default project, and the first thing we see is the “Hello world” scene where we can start coding:
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.
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.
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.
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.
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).
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
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:
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 GitHub.
SwiftUI compatible with following Operating Systems: iOS 13, iPadOS 13, watchOS 6, macOS 10.15 and tvOS 13.
We at Akvelon Inc 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.
If you would like to work with our strong Akvelon team — please see our open positions.
Written in collaboration with Artur Mikhaylov
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