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

问题描述：

我正在尝试向我的应用程序添加一个WKWebView，占用大约2/3的屏幕（在底部留下空间）。因为似乎没有办法将WKWebView添加到故事板，所以我添加了常规的UIView。然后在我的viewDidAppear方法中尝试创建一个具有相同边界的WKWebView。这是一个合理的方法吗？如何在Swift 3/iOS 10中创建大小的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视图，我加入到故事板临时视图的子视图。这至少让我限制它的位置和大小，但还是感觉很缺憾，喜欢就必须有这样做的更好的办法..

嗨，你的用户界面现在是什么样子？你可以张贴截图吗？ –

@ChristianAbella截图添加。 'conversationView'占据了大部分空间，坐在标签下面。 – speg

我在我的项目中有相同的场景，但我只是使用self.view.addSubview（webView），而不是添加另一个UIView。 –

答

这是一个非常好的方法;拥有“内容视图”是完全合理的，其“工作内容”仅仅是为了引导网络视图到位。但是，添加网页视图加上限制的大小和位置会更好。

答

您可以根据需要调整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)

答

如果你想给约束大小和现在的位置是与对于它的容器视图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]) 
     }

答

没有其他的答案为我工作。 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 
}

答

你可以试试这个希望工程

注：请根据您的要求设定框架。

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!)) 
    } 
}

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

相关推荐