It is extremely widespread that it’s essential show net content material in your apps. The iOS SDK offers three choices for builders to indicate net content material: Cellular Safari, WKWebView, and SFSafariViewController. In iOS 14 (or later), the SwiftUI framework offers a view known as Hyperlink so that you can open an internet hyperlink in cell Safari. The utilization could be very easy. You simply have to specify the textual content of the hyperlink and the vacation spot URL like this:
|
Hyperlink(vacation spot: URL(string: “https://www.appcoda.com”)!, label: { Textual content(“AppCoda”) .foregroundColor(.orange) }) |
This presents a textual content hyperlink in orange. When a person faucets the textual content, the app opens the hyperlink within the Safari browser. You aren’t restricted to make use of a textual content hyperlink. Within the label closure, you possibly can change the code to current a picture hyperlink utilizing an Picture view or different customized views.
Nevertheless, the present model of SwiftUI doesn’t include an embedded net view. To show net content material inside your purposes, you’ll need to faucet into the UIKit framework. On this tutorial, I’ll stroll you thru the procedures to undertake WKWebView in SwiftUI tasks.
Adopting WKWebView Utilizing UIViewRepresentable
Assuming you might have some expertise with the mixing of SwiftUI and UIKit, you realize we have to undertake the UIViewRepresentable protocol to make use of the parts from UIKit.
For this demo, I’ll create a brand new file known as WebView.swift to implement a customized net view for SwiftUI. Within the challenge navigator, proper click on the challenge folder and select New File…. Choose the Swift File template and identify the file WebView.swift. Exchange the file content material like this:
|
import SwiftUI import WebKit
struct WebView: UIViewRepresentable {
var url: URL
func makeUIView(context: Context) –> WKWebView { return WKWebView() }
func updateUIView(_ webView: WKWebView, context: Context) { let request = URLRequest(url: url) webView.load(request) } } |
To make use of a UIKit view in SwiftUI, you wrap the view with the UIViewRepresentable protocol. Mainly, you simply have to create a struct in SwiftUI that adopts the protocol to create and handle a UIView object. Within the code above, we create a WebView struct adopts the UIViewRepresentable protocol and implement the required strategies.
Within the makeUIView technique, we return an occasion of WKWebView. That is the way you wrap a UIKit view and make the online view accessible to SwiftUI.
Whereas the makeUIView technique is accountable for creating and initializing the view object, the updateUIView technique is accountable for updating the state of the UIKit view. So, we load the given URL within the updateUIView technique.
Now it is able to use WebView in our SwiftUI challenge. Swap over to ContentView.swift and add a state variable to retailer the present hyperlink:
|
@State non-public var showWebView = false |
To deliver up the online view, connect the .sheet modifier to the Button view:
|
Button { showWebView.toggle() } label: { Textual content(“AppCoda”) } .sheet(isPresented: $showWebView) { WebView(url: URL(string: “https://www.appcoda.com”)!) } |
We current the customized net view utilizing a sheet. You possibly can run the app on a simulator to have a check. Whenever you faucet the button, the app brings up an internet view to load the web site in a modal view.
Through the use of the identical approach, you possibly can combine SFSafariViewController in your SwiftUI tasks. I’ll depart it to you as an train.
If you wish to be taught extra about SwiftUI, you possibly can take a look at our up to date Swift course.
Founding father of AppCoda. Writer of a number of iOS programming books together with Starting iOS Programming with Swift and Mastering SwiftUI. iOS App Developer and Blogger. Comply with me at Fb, Twitter and Google+.
