Use UIViewControllers in SwiftUI Views with UIViewControllerRepresentable & Coordinator

In this article, you will learn how to inject any UIViewController or VC subclass into a SwiftUI view. In this specific example, we will be using UIPageViewController.

Source Code link at the bottom!

key learnings

• UIViewControllerRepresentable
• Coordinator (conform to protocols within UIVCRepresentable in SwiftUI)
• UIHostingController
• UIPageViewController

Once you understand the concepts it becomes very easy to use and understand. How can you reach this point? Go through this article then watch the companion video on my channel. Lets Start.

Let’s Code!

STEP 1 — Create a new Xcode Project

• Choose single view app.
• Name it maxcodesUIVCRepresentable.
• Hit next.

STEP 2— Create a UI View Controller Representable struct

• Inside of ContentView.swift code what you see in the image below.
• This is a UIViewControllerRepresentable (make sure it’s a struct).
• Here we can create a UIViewController and convert it into a SwiftUI version of the same exact thing. This will simply allow us to use a UIKit VC in SwiftUI.

STEP 3— Add the VC type

• Notice the typealias directly below the class title.
• This tells UIVCRepresentable what type of controller we are dealing with so it can generate methods appropriately.

STEP 4— Add the required methods

• Click the red circle as pictured above.
• Click fix, and these empty methods will be generated.

STEP 5— Create a PageViewController and return it for VCRepresentable use

• in makeUIViewController, make your UIViewController (page view controller in this example) & return it.
• Again, this provides the UIViewControllerRepresentable struct instance with a VC to use.

STEP 6 — Add the VCs in updateUIViewController

• By adding this line we can now render our VC’s in SwiftUI.
• How do we get it to display some content? Next step.

STEP 7— We are set up very nicely. Let’s render some content.

• How do we render content?
• We do this by creating ViewControllers for our UIPageViewController.
• We will do this by creating ViewControllers out of SwiftUI views with UIHostingController. (if you don’t understand UIHostingController yet, please watch this video or read this article I wrote on UIHostingController)

STEP 8 — Create a ContainerView for our Representable controller

• To keep things clean we will create a container view in SwiftUI for our UIViewControllerRepresentable (page view controller) to live in.

STEP 9— Create a TitlePage SwiftUI View

• We don’t yet have view controllers to provide our page view controller
• We can generate these from SwiftUI view instances with UIHostingController.

• These UIHostingController instances need SwiftUI views
• So. Let’s create an ADDITIONAL view called TitlePage.
• This will contain a simple string to keep things as simple as possible

STEP 10 — Create an array of UIHostingControllers with a generic type of TitlePage

• Update ContainerView to contain the following.
• A controllers array with the type of UIHostingController generic type TitlePage.
• An initializer that takes an array of string titles we can generate our title views and ultimately hosting controllers off of.
• It’s very likely this doesn’t make complete sense. Let’s just code EVERYTHING and then you can re-read the flow of this article to understand what’s happening. I also highly recommend watching the video on my channel here.

STEP 11 — In our root PreviewProvider, provide an instance of ContainerView with string titles passed in.

change this to ContainerView([“strings”, “in here”])

• Right now nothing is rendering except the default text “Hello World!”
• Instead of rendering ContentView, let’s render ContainerView.
• Make it look like that second image.
• Your canvas should now display the first string in the array.

This is what it should look like

STEP 12— Use SwiftUI’s Coordinator pattern to provide UIPageViewController protocol methods so we can manipulate data

• In order to make our UIPageViewController functional, we need to implement its protocols.
• In SwiftUI VC representable, we do this with the Coordinator pattern.

• So add “class coordinator { }”.
• You’ll see it shows us a fixable error .

STEP 13 —Provide the required coordinator method

• When we provide a Coordinator class, UIVCRepresentable requires we implement makeCoordinator.
• Return an instance of Coordinator.

STEP 14 — Provide access to PageViewController in Coordinator

• This is explained in the video, but I’m not going to type everything out that would make this article way too much longer than it already is
• Provide the following code. Make sure you pass self in with Coordinator in makeCoordinator.

STEP 15 —Conform to UIPageViewControllerDataSource methods.

• On class Coordinator, make it of type NSObject and inherit UIPageViewControllerDataSource.
• It will require you to provide the two methods shown.
• These methods will enable swiping if coded correctly

STEP 16 — Enable Swiping Between Pages.

• This is explained in-depth in the video I made on this exact topic so you can watch that if you want to understand it easier.
• Provide the following logic to the methods.

• Again this logic is explained thoroughly in the video I uploaded on my channel. (I don't necessarily care if you watch it but If you want to understand it better I think that would be the best approach.)

YOU ARE DONE — Source code link!

• You are now done. Here is the full SOURCE CODE if you want it.
• Here is the YouTube video if you want full explanations of what is going on.
• If you are interested in subscribing to the free mailing list with updates on new articles, videos, and course coupons, check out my site maxcodes.io