如何在Swift 3/iOS 10中創建大小的WKWebView

Question

我正在嘗試向我的應用程序添加一個WKWebView，佔用大約2/3的屏幕（在底部留下空間）。因爲似乎沒有辦法將WKWebView添加到故事板，所以我添加了常規的UIView。然後在我的viewDidAppear方法中嘗試創建一個具有相同邊界的WKWebView。這是一個合理的方法嗎？

我的代碼如下所示：

@IBOutlet var conversationView: UIView! 

    override func viewDidAppear(_ animated: Bool) { 
     let webView = WKWebView(frame: conversationView.frame) 
     if let url = URL(string: "https://www.google.com") { 
     webView.load(URLRequest(url: url)) 
     } 

     // conversationView = webView // <-- doesn't work :\ 
     conversationView.addSubview(webView) // works! 
    } 

Swaping的意見完全沒有在所有的工作，所以不是我添加Web視圖，我加入到故事板臨時視圖的子視圖。這至少讓我限制它的位置和大小，但還是感覺很缺憾，喜歡就必須有這樣做的更好的辦法..

Answer 1

這是一個非常好的方法;擁有「內容視圖」是完全合理的，其「工作內容」僅僅是爲了引導網絡視圖到位。但是，添加網頁視圖加上限制的大小和位置會更好。

Answer 2

您可以根據需要調整webview框架的大小，而無需使用其他視圖。

let webView = WKWebView(frame: CGRect(x: 0, y: 0, width: view.bounds.width, height: view.bounds.height * 0.66).integral) 
view.addSubview(webView) 

但是，如果您需要在故事板視圖排隊等子視圖限制那麼你的方法工作正常。

編輯：剛纔看到你的額外的截圖與意見陳述的觀點是低於標籤：

let webView = WKWebView(frame: CGRect(x: label.frame.maxX + (whatever distance you want between label bottom and webView top), y: 0, 
width: view.bounds.width, height: view.bounds.height * 0.66).integral) 
view.addSubview(webView) 

Answer 3

如果你想給約束大小和現在的位置是與 對於它的容器視圖web視圖，你可以這樣做。

 @IBOutlet weak var wkWebBackgroundView: UIView! 
    var wkWebView:WKWebView! 

    override func viewDidLoad() { 
      super.viewDidLoad() 
      setUpView() 

     } 
    func setUpView(){ 
      self.wkWebView = WKWebView(frame: CGRect.zero)  
      self.wkWebBackgroundView.addSubview(wkWebView) 

      let height = NSLayoutConstraint(item: wkWebView, attribute: .height, relatedBy: .equal, toItem: wkWebBackgroundView, attribute: .height, multiplier: 1, constant: 0) 
      let width = NSLayoutConstraint(item: wkWebView, attribute: .width, relatedBy: .equal, toItem: wkWebBackgroundView, attribute: .width, multiplier: 1, constant: 0) 
      let top = NSLayoutConstraint(item: wkWebView, attribute: .top, relatedBy: .equal, toItem: wkWebBackgroundView, attribute: .top, multiplier: 1, constant: 0) 
      let leading = NSLayoutConstraint(item: wkWebView, attribute: .leading, relatedBy: .equal, toItem: wkWebBackgroundView, attribute: .leading, multiplier: 1, constant: 0) 

      view.addConstraints([leading, top, height, width]) 
     } 

Answer 4

沒有其他的答案爲我工作。 Samip Shah的答案是沿着正確的軌道，但約束不是很正確。重要的是要記住將translatesAutoresizingMaskIntoConstraints設置爲false。

所以，這是我的解決方案。在故事板中創建一個帶有WKWebView所需的約束和佈局的UIView。在您的視圖控制器中添加代碼：

@IBOutlet var contentView: UIView! 
var wkWebView:WKWebView! 

override func viewDidLoad() { 
    super.viewDidLoad() 

    wkWebView = WKWebView(frame:contentView.frame) 
    contentView.addSubview(wkWebView) 
    constrainView(view: wkWebView, toView: contentView) 

    let request = URLRequest(url: /* your url here */) 
    wkWebView.load(request) 
} 

限制視圖的代碼。如果您想使用多個視圖控制器，可以將其添加到實用程序類。

func constrainView(view:UIView, toView contentView:UIView) { 
    view.translatesAutoresizingMaskIntoConstraints = false 
    view.leadingAnchor.constraint(equalTo: contentView.leadingAnchor).isActive = true 
    view.topAnchor.constraint(equalTo: contentView.topAnchor).isActive = true 
    view.trailingAnchor.constraint(equalTo: contentView.trailingAnchor).isActive = true 
    view.bottomAnchor.constraint(equalTo: contentView.bottomAnchor).isActive = true 
} 

Answer 5

你可以試試這個希望工程

注：請根據您的要求設定框架。

import UIKit 
import WebKit 

class WKWebViewVC: UIViewController { 

    @IBOutlet weak var wkWebviewBGView: UIView! 
    var wkWebview: WKWebView! 

    override func viewDidLoad() { 

     super.viewDidLoad() 

     wkWebview = WKWebView(frame: wkWebviewBGView.bounds, configuration: WKWebViewConfiguration()) 
     wkWebview.autoresizingMask = [.flexibleWidth, .flexibleHeight] 
     self.wkWebviewBGView.addSubview(wkWebview) 

     let url = URL(string: "https://www.google.com") 
     wkWebview.load(URLRequest(url: url!)) 
    } 
}