It is extremely widespread that you might want to show internet content material in your apps. The iOS SDK supplies three choices for builders to indicate internet content material: Cell Safari, WKWebView, and SFSafariViewController. In iOS 14 (or later), the SwiftUI framework supplies a view referred to as Hyperlink so that you can open an online hyperlink in cellular Safari. The utilization could be very easy. You simply must 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 consumer 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.
Nonetheless, the present model of SwiftUI doesn’t include an embedded internet view. To show internet content material inside your functions, you’ll need to faucet into the UIKit framework. On this tutorial, I’ll stroll you thru the procedures to undertake WKWebView in SwiftUI initiatives.
Adopting WKWebView Utilizing UIViewRepresentable
Assuming you will 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 referred to as WebView.swift to implement a customized internet view for SwiftUI. Within the mission navigator, proper click on the mission folder and select New File…. Choose the Swift File template and title 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. Principally, you simply must 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 net view obtainable to SwiftUI.
Whereas the makeUIView technique is answerable for creating and initializing the view object, the updateUIView technique is answerable 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 mission. Change over to ContentView.swift and add a state variable to retailer the present hyperlink:
|
@State non-public var showWebView = false |
To carry up the net 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 internet view utilizing a sheet. You may run the app on a simulator to have a check. Whenever you faucet the button, the app brings up an online view to load the web site in a modal view.
By utilizing the identical method, you possibly can combine SFSafariViewController in your SwiftUI initiatives. I’ll depart it to you as an train.
If you wish to be taught extra about SwiftUI, you possibly can try 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+.
