SwiftUI WebView Tutorial

hello it's Chris and today I'm going to show you how to use a web view in your Swift UI project now unfortunately there is no Swift UI web view but it's relatively simple to use the UI kit one in your Swift UI project as you can see right here all right let's take a look before we begin one quick note we have a free EXO project containing sample code for all of the Swift UI components use it for your own projects or just to learn from get it at so here we have a brand new exod project with the basic content view what do we have to do cuz I mentioned earlier that there is no Swift UI web view what we have to do is use the UI kit one but we have to package it in a way that we can use it in our Swift UI project and that is done using UI view representable so let me go ahead and show you it's actually quite simple to do for this purpose we're going to add a new file to our project let's choose a Swift file let's call this web view because that is the structure name that I'm going to be using and we're going to change this to Swift UI we're going to create our web view uh struct and this is where we adhere to the UI view representable protocol so you can read here a wrapper for a uiit view that you use to integrate that view into your Swift UI view hierarchy which essentially just your Swift UI project so that's what we do now there are two different functions that we need to implement here in order to follow this protocol the first is make UI view so this is where you return the UI kit view that you want to use for us this is going to be the WK web view but this is in the webkit framework you can see here it says webkit is not imported so you can go ahead and import that up here like that and what you would do is you would return a new instance of that now this function it didn't know that that was the UI kit view we wanted to use so let's change this to the appropriate type and that's all we have to do here for this right this is going to get called to create the view and return it now the other function we need is the update UI view function and this one gives you an opportunity to update essentially that UI kit component for presentation in your Swift UI views so you see here you have a reference to that UI kit component we're going to actually just change this parameter name to web view now what do we want to do with the web view we want to load a website right it has a load method which takes in a URL request instance so we have to create that in order to create a URL request Quest instance it needs a URL instance so there are a couple of things we need to create first so let's start at the beginning with the URL so here is the URL instance and we are going to use this one right here now one important thing to note and I don't know why it's not indicating it here is that this one let me just put in a string URL here this one creates an optional URL instance let me see if I can show you this here yeah so you see this question mark represents that it is uh it could error out and not give you an actual URL instance could actually be nil so you have to check against that so let's do this and this is basically saying if we cannot create this it's not going to run this code however if this is created as an actual URL instance then it will assign it into this constant and then within here we can use it so within here we are going to create our request like that right and we are going to pass in url and then finally we can load it up in the web view right so we're going to just pass in the request like that now let's try this out cuz it's ready that's it so here we're going to replace all of this with our new web View and we are going to just ignore safe area but we have one problem this web view only loads up this web page what if we wanted to make it Dynamic so if you go back to the web view instead of specifying this here let's make it data that you have to pass in so we're going to create a property it's going to be URL type and we're going to make it optional so it can be passed in or not and you can just erase this right and before it tries to load it it's going to check to make sure that it's not nil we'll save this and we come back here as you can see if we don't specify anything it doesn't load but if we actually specify the URL here to be this uh I'm missing a bracket there we go then it loads it up and now you can actually specify the URL here and that's how you use a web view in your Swift UI project if you want to download the sample code for this we've got it all in a single handy exod project in fact it contains a sample code for all of the Swift UI components so that you can learn from it or copy and paste the code into your own project just visit cc. swiftui dkit it's a free download I'll leave it in the description below the video too

Channel: CodeWithChris

Views: 3,048

Keywords: How to Make an App, How to Create an App, How Build a Mobile App, Xcode, Swift, iOS, Coding, Programming, iOS Development

Id: aQUKMwJg0n0

Length: 6min 4sec (364 seconds)

Published: Mon May 27 2024