UIKit and SwiftUI — How can you use both in your  project?

UIKit and SwiftUI — How can you use both in your project?

In WWDC 2019, Apple announced this completely new framework called SwiftUI, well known as a declarative programming that helps to develop better apps with less code.

Declarative vs Imperative Programming

SwiftUI is a UI toolkit to design apps in a declarative way. Before iOS 13, what iOS developer were doing was imperative UI — where we might make a function call when a button is clicked and the function would read a value, show the respective change which needs to be modified based on what is happening. Contrast to this, declarative UI lets us tell iOS about all states of our app at once without needing to write code to move between two states. In SwiftUI, we do not manage these states by hand but tell Swift all the rules and leave it to Swift to enforce it.

Why SwiftUI?

  1. SwiftUI no longer needs Interface Builder.
  2. Less merge conflicts, better developer productivity
  3. There is no AutoLayout or related problems. Instead, you use things like HStack,VStack, ZStack, Groups, Lists, and more.
  4. Simple, easy to learn and clean code
  5. Learn one language, one framework — deploy everywhere!

However, anything newly launched is going to have bugs. Not just SwiftUI, but everything. And we need to be patient and give it time as the declarative concept is still quite new to many.

As SwiftUI was introduced in the iOS 13 framework, it only allows iOS 13 and above. Everything before iOS 13 was build using Obj-C framework (Inc Swift). All the apps written till 2019 use UIKit and there is no straightforward way to fully migrate them to SwiftUI as we need to rethink it entirely with a different layout paradigm.

SwiftUI in UIKit

SwiftUI makes iOS developers enthusiastic about getting started with this new framework for building apps. An effective way to start with would be using SwiftUI in your existing UIKit, little by little, and familiarise yourself with the framework. SwiftUI can work together with UIKit by making it easier to add SwiftUI views to UIKit and vice versa.

In this example, I will show how we can integrate SwiftUI in a project with legacy code. I have created a simple app that shows the top 10 mountains in the world with an image and a title for each. On the detailview, it shows just an image.

Here, we have a MountainListViewController and DetailsViewController that uses UIKit and shows an image in the detail screen.

But in our object, we have titles and descriptions as well. So, we will use that to show the title and description of Mountains in the details screen. (Using SwiftUI)

page2image53908976page2image53908560

page3image53748048

This is how the app looks like using UIKit.

page3image53740768

Now let us create a new detailsview using SwiftUI view that will replace the detailsviewcontroller.

page4image53744720

Note: If you do not mark the struct as available (@available iOS 13.0, *), you will get an error as View is only in iOS 13 or newer.

Vstack: A view that arranges its children in a vertical line.
Now that we have our detailsview, we need to update the MountainListsViewController and

the exact part is the didSelectRow.

Let us add a logic to check if its above iOS 13 then use SwiftUI to show title and description of the image in detailsView. Here, you also must import SwiftUI.

page4image53753872

The result,

page5image53754080

As we can see, depending on the iOS version, the app will show a different layout and how SwiftUI views are integrated into existing apps with UIKit.

Get in touch with us to find out how you can make key changes to your native apps.

Contact Us

Share on facebook
Share on twitter
Share on linkedin
Share on email
Share on whatsapp

About the author

Michael Ridland is the Co-CEO and Founder of Xam Consulting.

Design-led problem solving delivering digital solutions.

Learn more about us.

Good at what you do?

We’re looking for the right superstars to join our team and work on growing our clients’ businesses.