Adding SwiftUI To An Existing UIKit Storyboard Project - Learn SwiftUI For iOS

[Music] all right in today's lesson we're going to learn how to mix languages so in particular we'll learn how to bring swift ui into an existing ui kit brace project which has a storyboard already in it in our past lessons we already talked about doing the reverse where we had a swift ui project we want to add a few ui kit based objects such as the webkit view and and pencil kit so we learned how to do that you can refer to a past video if you want to do the reverse uh what we're going to do today is focus on something that i think will be more relevant because i mean majority of the projects out there are already done in ui kit i can't see developers abandoning existing projects and just rewriting everything from scratch unless they really really really needed to and they were planning on doing a rebuild of their app which is actually very time consuming so i can i can see a lot of projects continuing on in swift ui uh or or uh or continuing on ui kit depending on how they feel about it uh but so the reason i created this simple little application today was just to show you that if you are on a project where you already created you already have an existing project that has uh so that has a ui kit and has storyboards and you're told you want to add some new screens and you want to do it in swift ui or you're told to do a swift ui you can do so with ease and it's actually easier to add swift ui stuff to an existing ui kit project than it is to do the reverse i mean the reverse isn't too bad but you still have uh there's actually less work involved in doing so so let's look at the final project here from final product here what i do is i created a simple home page with two buttons a label and two buttons so this first button here says go to a new ui kit view controller so just illustrating you know this is a ui kit based page there's nothing special here nothing new if you're a ui kit developer already you already know storyboards and view controllers and all that then this is no big deal it's really quick to put together the second page is go to a new swift ui content view and so if i click on this this is actually a swift ui page right here on top of a view controller all right so swift ui using a view controller right hit back return back to the home page so this is what i want to illustrate to you today so first thing we'll do is we're going to create a new project so we have ios single v application and i'm going to call this m7 uh mixing languages all right and i'll leave everything else unchecked most important things we're gonna use a storyboard this time around so if you have soft ui already enabled switch that back to storyboard and hit next and give it a home all right so we have here our basic storyboard based application we already have main.storyboard auto generated for us and we have a viewcontroller.swift.generated for us so now it's up to us to try and build this out first i'm going to start with main.storyboard we're going to build out our ui first off all right so there's our home page right there and what i'm going to do is i'm going to start by adding a label and a couple of buttons so i hit the plus sign there so if you're not accustomed to building stuff in ui kit there was a lot of dragging and dropping where you dragged and dropped items directly onto a view and adjusted it as you needed to as opposed to typing everything purely 100 in code so i hit the plus sign there you have this little tools palette that pops up so i'm going to drag a label and stretch it out and we'll say that this label is our title which is mixing ui kit and swift ui views all right that's our title center that text i'm going to add a couple of buttons all right this is our first button just do a command c to copy command v to paste all right so the first button will just say go to new ui kit view controller the second button will say go to new swift ui content view all right so we have our two buttons we'll start with doing everything purely ui kit and storyboard base then we'll move into swift ui so now in a storyboard to add new screens we simply drag over view controller so i'm going to search for a view controller view controller right there so i'm going to drag one zoom out a bit so you can see a bigger view of this so this will be our view controller base page i'll drag a second one since i'm at it throw that there all right now to go from one page to another we just create segues the easiest way to create a segue from one page to another is to click on the button that you want to click on to navigate to that new page then hold down the control key on your keyboard click and drag to the new page let go we're going to choose present modally all right so it creates a little arrow there that you can see which actually illustrates that there's going to be a transition there now i'll click on the second button hold down the control key on my keyboard click and drag to the other page choose present modally as well all right so we have two screens that are sub pages of our homepage there and we're going to do is we'll start with the we'll start with this page here and we'll do is we'll just we're going to add a navigation bar to the top now in swifty ui you found was very easy it was automatically automatically generated so you don't have to worry about that but here we have to manually add these things in so i'm going to add a navigation bar so there is navigation bar all right and for this title we'll say ui kit based view controller all right let's add one to the other page navigation bar this will be swift ui based view controller all right now we need back buttons we have to manually add those they're automatically generated when when in swift ui when we use the navigation view but here we have to manually add them in so we're looking for a bar button item we'll change the text of that to back same here again all right so now we have two screens here uh two sub screens that is from our home page now uh for those you're not familiar with view controllers and and and ui kit uh when you drag a new screen onto your storyboard you need to have a swift file associated for each of these screens so we need to generate a couple of new files here so i'm going to right click on on my folder here m7 mixing languages i'm going to say new file ios coco touch class is what we're saying hit next subclass of ui view controller i'm going to call this page 2 ui kit view controller all right and give it a home all right so let's let's finish this page it's going to be a very simple simple page so we'll go back to main.storyboard we're not going to add any code it's just going to be that simple so we're going to go back to main.storyboard let's add a simple label to this ui kit base view controller all right and the text for this new label will be this is a ui kit page all right now we have a back button and we didn't have to do anything in swift ui to get the back button enabled and to navigate back to the previous screen we have to do something here in the ui kit world to get this back button up and running so we need to learn how to unwind our segway like we talked about winding setting up our segways to go from one page to another now if we want to go back to the previous page we don't just create a segue back but to unwind the segway so we need a special method so this involves two steps first we need a special method that goes into the page that we're turning back to so into this page this page by default is tied to is tied to viewcontroller.swift so it's this one so i'm going to add this method here and this method is an ib action all right so i'm going to say ib action funk i'm going to call it unwind to home vc sender is and this is important ui storyboard segway and the method can be completely empty which it typically is uh so we do we unless you want to actually have some code happen during your segwaying back to your homepage you don't need to add anything you have an empty method it's just the fact that the method exists that in the first place that's what's important to xcode and interface builder so they can actually make the connection now that we have this method here i'll just command s to save and go back to main.storyboard and go to back to this page first off i need to because i created a new view controller page two ui kit view controller.swift i have to tie this together with this screen to do that i make sure that my yellow circle which represents my view controller is highlighted by default it's tied to uh ui view controller and i want to change that to be page 2 ui kit view controller so i'm going to go to the the sorry the fourth option here which is the identity inspector all right and class it says ui view control we're going to change this to page to ui kit view controller and just hit tab to tab away so now it's connected to that so any code i write inside page 2 ui view controller will be represented of what needs to be done on this page so if you want anything to happen on this page you put it inside that swift file the only thing i do here is connect the back button so i want to set up the back button to go back to the previous page so what we do is we click on the back button hold down the control key on our keyboard click and drag to this icon right here this is our exit icon and when we let go of it we see our name here unwind to home vc all right now the back button works and you can give it a run just to verify that you can go to that new page so let's hit run quickly all right so there's go to new ui k view controller it's going to hit that here's our new this is a ui kit page hit back we're back on our home page if you want to verify that we can go to the second page go to new swift ui content view well yeah you can go to there this is still a ui kit based view controller but now let's get this to set up so that it actually displays a swift ui view instead of just a view controller alright so to do that let's first create our new swift ui view all right so we're going to right click and we're going to say new file ios sorry ios swift ui view this time all right and so i'm going to hit next and we're going to call it page 3 swift ui view right and we'll hit create all right so we got our swift uib i'm not going to worry about the previews at all all right we have a simple hello world there in fact we could we could change this text to be something more relevant so i'm going to say this is page 3 a swift ui view all right let's add some padding uh let's say 25 just to stretch it out if you want all right so this is uh this is it we're going to do a very basic swift ui view here just to prove that we can do it you can see here's the view there's a body there's some previews importing swift ui so this is our this is our view now if we want to get a swift ui view to appear we have to do that inside the view controller so for that like i said earlier we created a view controller file for that second page that ui kit based second page well we also need a a view controller file for this screen that we're going to display here it's a it is so that we can get this swift ui view to load on it so i'm going to add a new file and this will be ios coco touch class and it'll be a subclass of ui view controller it's going to call it page 3 view controller and give it a home all right now inside of this uh what we're going to do is we're going to have our uh our our new our swift ui content view display inside a view the ui view that we have in our view controller so first thing i'm going to do is i'm going to add an ib outlet so ib outlet weak var the container extends ui view all right now inside muted load which is like the quote-unquote constructor for the screen if you want to consider it that way but it'll auto execute code upon loading this screen this view controller we want to automatically load the swift ui view so we're going to use an object called ui hosting controller so when you're doing the reverse you're trying to bring in ui kit like uh ui kit based objects into a swift ui content view you use the ui view representable now when you go in the opposite direction when you want to bring in swift ui into an existing ui kit storyboard based project you're going to use ui hosting controller so we're going to do is we're going to say let child view equal ui hosting controller and it's not auto completing because ui hosting controller exists inside the swift ui framework so it's going to hit back a bit we should be importing swift ui so i'm going to say let child view equal ui hosting controller and root view will be the name of our swift ui content view which is page 3 swift ui view and instantiate it all right now we do is we add this to the screen by saying add child for child view all right now we want to specify sizing to be complete so we're gonna say child view dot view dot frame is equal to the container dot bounds which basically says stretch this this new page three shift ui view to be the size of the size of our container view that we defined above and then we're going to bring bring into our storyboard now finally let's get this to display by saying the container dot add subview for child view view alright so that's it for coding now let's move back to the storyboard and connect things up and get things up and running so we'll switch back to main.storyboard and we're going to do is we're going to add a view so i'm going to search for a ui view and there it is view i'm going to drag this and stretch this to be the remaining size of the screen there below the navigation bar all right and now let's first subclass this view to be page 3 view controller so we can take advantage of the code that was generated there that we wrote there so i'm going to click on the yellow circle and you see my identity inspector and change from ui view controller to page 3 view controller right hit tab to tap away so now all the code that exists there is connectable all right so now let's switch over to my connections inspector because i have my having my yellow circle highlighted i can see that the container the ib outlet i defined is there so i'm going to drag and connect that to to what i just created so the container and i also have a back button i need to set up so i'm going to click on the back button hit the control key on my keyboard click and drag to my exit icon and choose unwind to home vc and that's it let's give it a run all right so i'm going to hit say go to new swift ui content view and there you are this is page 3 a swift ui view right and i hit back i can go back to my home page all right so there you have it this is how you can bring in an existing into an existing ui kit based project that has view controllers swift ui content views so now you can mix together swift ui and ui kit all right and that's it for now don't forget to like subscribe share with your friends until the next video have a good one take care bye for now

Channel: Jawaad Sheikh

Views: 1,677

Keywords: learn to code, swiftui, ios, apple, app development, uikit, storyboard, uihostingcontroller, mixing languages

Id: aWL7W8SLfeo

Length: 20min 30sec (1230 seconds)

Published: Tue Nov 17 2020