Is It Possible to Use SwiftUI Preview on UIViewController?

Let’s find out!

Source: Apple

In WWDC 2019, Apple surprised every developer by announcing a completely new framework called SwiftUI. It doesn’t just change the way you develop iOS apps. This is the biggest shift in the Apple developer’s ecosystem (including iPadOS, macOS, tvOS, and watchOS) since the debut of Swift.

In addition to creating views in a declarative way, you would now have a preview of your screen, updating each graphic modification included in your view. This increases your productivity as you no longer need to run your app with every change to see if everything is working as expected.

If you are still working with UIKit framework but you'd like to use PreviewProvider from SwiftUI to increase your productivity, I'll give you some tips on how to make this possible.

Let's create an extension of UIViewController:

1. The Xcode only builds this block of code if it is possible to import SwiftUI and if you are in debug mode. (optional)
2. Make the extension available to consumers with iOS 13 and above.
3. A private Preview struct conforms to the UIViewControllerRepresentableprotocol. We will use it to create a preview for our view controllers.
4. Struct has a dependency on UIViewController. For example, if we want a preview for the SettingsViewController, we will provide it to the Previewstruct.
5. makeUIViewController(context:) and updateUIViewController(_ uiviewController:context:) methods are required by UIViewControllerRepresentable protocol. Inside makeUIViewControllermethod, we return the view controller that we want to obtain a preview of. The latter method stays empty.
6. Create a convenient preview property that returns a Preview for a view controller.

That’s all we need to add in order to support previews of any UIViewController in our apps. Let’s test what we’ve created.

Usage Example

Let’s create a simple ViewController HomeViewController.swift :

On this HomeViewController.swift we have an optional HomeView, let's create a simple UIView with 3 labels and 1 button using view code for example:

In our example, we isolated things related to views of our screen on a file HomeView.swift .

Ok, but what about our PreviewProvider ?

As default on SwiftUI, we can add it at the end of our view file. Let's add at the end of HomeView.swift :

1. Xcode will build this block of code only if it is possible to import SwiftUI and if you are in debug mode, this is the same reason we included on our UIViewController extension. (optional)
2. We provide a preview of our extension from a UINavigationController passing our ViewController as a rootViewController.

And voila!

Some important things/tips…

• The name of the struct Preview should have a “Preview” suffix, example: ViewControllerPreview, HomeViewControllerPreview, SomeViewPreview. If not, you are going to have a build error =/.
• If the preview canvas is not presented, you can use the shortcut ⌘+Option + Return or do it manually.

• To resume your preview you can also use a shortcut ⌘+Option+P.

Ok, we learned how to implement Preview for our ViewControllers but I'm super lazy and I don't want to add all the code manually on every single ViewController that I'll create, so let's create a Code Snippet!

To create a new Code Snippet you can use right click in any place inside a file and click on “Create Code Snippet”. Then you are going to give a name to your Code Snippet, add the block of code that is going to fill up on autocomplete, then add this block of code and add your tag for autocomplete, I've used SwiftUIPreview in this example.

It will work like this:

To learn more about code snippets and how to implement them, you can read this article.

Resources

The source code of the sample project is available on GitHub.