[ad_1]
It is extremely widespread that you might want to show internet content material in your apps. The iOS SDK offers three choices for builders to point out internet content material: Cell Safari, WKWebView, and SFSafariViewController. In iOS 14 (or later), the SwiftUI framework offers a view referred to as Hyperlink so that you can open an internet hyperlink in cellular Safari. The utilization may 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 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’ll be able to 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 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’ve some expertise with the mixing of SwiftUI and UIKit, you understand we have to undertake the UIViewRepresentable protocol to make use of the elements 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 venture navigator, proper click on the venture folder and select New File…. Choose the Swift File template and identify the file WebView.swift. Substitute 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 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 methodology, we return an occasion of WKWebView. That is the way you wrap a UIKit view and make the net view accessible to SwiftUI.
Whereas the makeUIView methodology is liable for creating and initializing the view object, the updateUIView methodology is liable for updating the state of the UIKit view. So, we load the given URL within the updateUIView methodology.
Now it is able to use WebView in our SwiftUI venture. Swap over to ContentView.swift and add a state variable to retailer the present hyperlink:
|
@State personal var showWebView = false |
To deliver 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’ll be able to run the app on a simulator to have a check. Once you faucet the button, the app brings up an internet view to load the web site in a modal view.
By utilizing the identical approach, you’ll be able to combine SFSafariViewController in your SwiftUI tasks. I’ll go away it to you as an train.
If you wish to be taught extra about SwiftUI, you’ll be able to 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+.
[ad_2]
