UIKit in SwiftUI

All right, guys, welcome back. And in this video, we’re going to see how we can integrate a UIKit component in SwiftUI, which is pretty cool. So, what we need to do first of all, is let me just go ahead and add an actually UIKit component.

So, what I’m going to do is go ahead and create a regular swift file and I’m going to name this as my line chart. So this is a simple SwiftUI view which I picked up from GitHub. And I’m just going to paste it right here. You can see it uses UIKit and is a pretty small library for rendering line charts, right? And that is pretty much it. For the line chart path, we won’t be needing this file again.

What we want to do next is we want to create another file called the controller of this particular file, right? And this would be a regular swift file as well. So this would be line shot controller, right? So what we want to do is everywhere we are making use of this in SwiftUI, we want to make use of the line chart controller instead.

So how do we go about that? So what we want to do is first of all import SwiftUI and import UIKit with us, right? Next, we’re going to create a struct line chart controller, but instead of conforming it to a view protocol we are going to conform it to UIView representable protocol. Which would allow us then to make use of this as a SwiftUI view. And immediately you get that this controller right here does not conform to that. Let’s fix that and doesn’t really help a lot. So what we’re going to do is we’re going to say make UIView as the method. And we get–

OK. We get something like this, but we’re going to make some changes to it. First of all, let’s make UIView’s going to return us a type of line chart. And this context would be just off that context, right? And what this means is now we have to initialize our view ourselves I’m going to say my line chart is a line chart which initializes our view from this particular swift class, you can see. And once we have that, let me just first of all, get rid of the canvas here.

So once we have the line chart with us, I’m just going to return my line chart Just like that, right? And it still say this that it does not conform to the protocol.

And OK, so the reason for that is basically is because you need to implement an update UIView as well. And you see that basically here, the code would go whenever we want to perform an update to the UIView, how it should behave. But since we don’t want to do that, we’re just going to keep this method as it this.

We’re going to make use of the make UIView however, a lot. So for now, let’s just initialize this with some random values, I would say. So what we could do is we could just go ahead and add line chart dot add line and I’m just going to say that this is 3 4 2 1 6 5, right? And that should be it.

So now, how we can go ahead and make use of this inside our SwiftUI. So it’s very simple. We go back to our content view. And we just go down. Let me just toggle the canvas again. And what you’re going to do is just go ahead and wait here. Just after the bad symbol I’m going to say that this is my line chart controller. There we go. And we’re just going to make use of this as a regular view, right?

So now, if we take a look in the preview section, let it load. What we’re going to see is a UIKit component compiled down. Not really compiled down, but we are able to make use of that in SwiftUI.

All right, so you can see that we have got a component right here with us, but it does not really look very good. Like this solid blue line, what this is. So once you play this, you’re going to see that this will– actually an animation which was not working because of the preview. But once you launch it in the full mode you can see that it works out of the box.

All right, so it looks so far pretty neat, but we need to obviously add some sort of restrictions and stuff to this particular line chart. So what we’re going to do is first of all, we’re going to make some changes to the dimensions. So I’m going to say that this frame has, let’s say I want this to have a full- width, but certain height.

So how do we do that? Well we make use of the min-width to be 0, right? The max-width, let me just get this in one line, in multiple lines actually. Max-width could be dot infinity– F-I-N-I-T-Y, which basically means that it could span the whole screen, right? Min-height would be 0. With the max-height could be just 150, right? And to avoid sticking it to a just too much I’m just going to give it a little padding as well.

So once we do that, we’re going to see that our graph should look much better now. And we can just also go ahead and move this below these two text views. And that would be actually good. There we go. All right, so we can see that its height got shrink. And it’s in a much neat condition now.

So that would be all for this video. In the next one, we’re going to see how we can customize this.