Adding SwiftUI to UIKit App with UIHostingController (SwiftUI, 2021, iOS, Xcode 12)

[Music] what is going on guys welcome back to another swift video in today's video we're going to learn how you can bring swift ui into your existing ui kit applications so here's a app that we put together in ui kit we've got a view controller and one button on it and we tap it we actually see this screen which is actually built and is coming from swift ui so what we're going to learn here is you know how you can interoperate between ui kit and swift ui which you know is a fairly important topic since most legacy apps are built with ui kit and we can't just go and rebuild everything to swift ui so if that all sounds good make sure you start by destroying the like button if you're new to the channel and haven't subscribed yet definitely hit subscribe for daily switch content that all said let's get into the video all right we're going to begin by opening up xcode and creating a new project we're going to stick with the app template under ios and let's go ahead and call this project swift ui in ui kit we want to make sure our language is swift our life cycle is ui kit and our interface is storyboard go ahead and continue save the project wherever you'd like we'll toss it on to our desktop and first things first we are going to jump into our view controller i'm going to go ahead and select a 12 pro mac simulator we'll hit the play button to build and run it i'm also going to expand our xcode window to give ourselves a little more room to work and boom there's our simulator now now the whole purpose of this video is how to interrupt swift ui views into ui kit so the next thing we need to go ahead and do is create a new file here we're going to go ahead and search for swift ui and it's going to be a swift ui view go ahead and call this let's call it settings screen frankly you can call it whatever you want but we're going to build a settings screen on the right hand side hit resume to load up your preview just like that there is our simulator and we're going to create basically what looks like a navigation controller but with swift ui so we're going to drop in a navigation view we are also going to drop in inside of here a vertical stack i'm going to give it a navigation title modifier the title of this is going to be settings now inside of this vertical stack we're just going to go ahead and put some horizontal stacks with a text label and that'll be next to you know some toggle perhaps so we'll go ahead here and actually instead of a text label we could just use a toggle directly now that i think about it we could say toggle here we can go ahead and give this an is on of uh let's say is on we can give it a label of let's say is sub scriber we're going to make this is on a state property on this view we're going to make it false by default just like that and that'll go ahead and highlight that and let's just go ahead and copy and paste this a few times i'm going to go ahead and also wrap it inside of a form so we get a nicer ui you can go ahead and copy and paste it since the point of this video isn't really the actual setting screen we'll paste it a total of three times and let's go ahead and leave it at that we can go ahead and hit try again on our preview over here and you'll see your settings screen update in just a moment sometimes previews love to be finicky so just give it a few seconds there we see our label and our toggle and let's see what else we would need to do let's go ahead and add a spacer below this form so it pushes everything to the top just like that so cool we have this awesome looking screen in swift ui how the heck do we use it in our current application that we built with view controllers and ui kit what's super simple actually the first thing we're going to do is i like to import swift ui for the sake of knowing that we're interrupting swift ui here we want a button in our view controller when we tap on it we want to go ahead and show that other swift ui view so i'm going to go ahead and create a very basic ui button here we're going to give it a frame of let's say 0 0 220 and 50. we are also going to of course add it as a sub view to the view controller's view let's go ahead and center this guy into the view i'm also going to give it a title of show swift ui and this is going to be for the normal state let's also go ahead and give this a nice background color of system pink and let's see not indigo we're going to go with system pink and finally we want to go ahead and do something we tap on the button so we'll say button add target self and make sure we spell self correctly action will be a selector and this is going to be did tap button and the event will be touch up inside now we need to go ahead and create this function it did tap button and this is where the magic happens of swift ui interop what we want to go ahead and do is pretty simple we're going to create a view controller and it's going to be this thing called a ui hosting controller and if you look at it the description is a ui kit view controller that manages a swift dui view hierarchy and that's exactly what we want to do we're going to create this and we want to pass in a root view inside of this and you guessed it the root view is going to be that other view we created which is called settings screen so how do we create setting screen well we just instantiate it we just create settings screen just like that and just like any other view controller we can now say present vc animated true so pretty simple basically just as one line here let's go ahead and give this a run in a simulator i hit command r there and we should see a button in the middle of the screen which in fact we do we're going to hit this to say show swift ui and just like that you can see that we actually get our other screen popping up and from a user perspective there is no way where you can even tell that this is swift ui and ui kit the reason that when you turn one of these on they all turn on is because we built it like that with one state property but that's basically it that's how you interrupt swift ui and ui kit view controllers so i think this is a pretty interesting and important topic frankly because a lot of legacy applications are still built with you know view controllers and ui kits and if you want to dabble with swift ui you probably don't want to go and rebuild the whole app and it's kind of a lot of work so the takeaway here is really don't be afraid of using swift ui in apps that are built in ui kits uh inter operating of the two kind of ui frameworks is pretty simple and pretty heavily encouraged even by apple so that's all i've got for you guys if you enjoyed this video and haven't done so already make sure you destroy the like button down below for the youtube algorithm subscribe if you haven't done that already yet if you're new to the channel we post swift videos daily and of course leave any comments with any questions video suggestions feedback love hearing from you guys love replying thanks again for watching i'll see you on the next one

Channel: iOS Academy

Views: 3,023

Keywords: swift 5 tutorial, swift 2020, swift, swift 5, swift tutorial, swift for beginners, swiftUI 2020, swift programming, swift basics, swift apps, make iPhone app, swift make first app, swiftUI uikit, uiviewrepresentable, uihostingcontroller, swiftUI add uikit, uikit add swiftui, SwiftUI 2.0, swiftui tutorial, using uiview in swiftui, swiftUI beginners, swiftui basics, swiftui getting started, swiftUI make app, adding swiftui to existing app, uikit vs. swiftui, swiftui ios app

Id: diK5WkGpCUE

Length: 7min 53sec (473 seconds)

Published: Mon Feb 08 2021