[ad_1]
It is extremely frequent that you might want to show internet content material in your apps. The iOS SDK gives three choices for builders to indicate internet content material: Cell Safari, WKWebView, and SFSafariViewController. In iOS 14 (or later), the SwiftUI framework gives a view known as Hyperlink so that you can open an online hyperlink in cell 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 may 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 will have 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 could have some expertise with the combination 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 known 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 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 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 online view out there 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 mission. Swap over to ContentView.swift and add a state variable to retailer the present hyperlink:
|
@State non-public var showWebView = false |
To convey 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 internet view utilizing a sheet. You’ll be able to 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 approach, you may combine SFSafariViewController in your SwiftUI initiatives. I’ll go away it to you as an train.
If you wish to study extra about SwiftUI, you may try our up to date Swift course.
Founding father of AppCoda. Creator 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]
