以自动布局的方式在UIView中以编程方式嵌入WKWebView

Question

对于专家来说，这可能很容易。问题是在Xcode可视化界面中没有WKWebView可供Storyboard使用，与UIWebview相反，因此必须通过编程创建。我正在为整个应用程序使用导航控制器。

我在Storyboard中创建了一个VIEW并使用自动布局将其约束为0,0,0,0。所以想要将WKWebView作为子视图添加到名为“Daview”的该视图中，并完全填充它。但我似乎无法弄清楚如何实现。

请查看下面的代码：

class ViewController2: UIViewController ,WKNavigationDelegate {

    @IBOutlet weak var navigation: UINavigationItem!

    @IBOutlet var daview: UIView!
    var restWeb: WKWebView?

    @IBOutlet var BottomView: UIView!

   // var ActivityIndicator =  UIActivityIndicatorView()


     override func viewDidAppear(animated: Bool) {
        super.viewDidAppear(true)       
         println(" daview bounds in VIEWDIDAPPEAR is \(self.daview.bounds) y Frame \(self.daview.frame)")
       restWeb!.bounds = daview.bounds
    }



    override func viewDidLoad() {
        super.viewDidLoad()

        /* Create our preferences on how the web page should be loaded */
        let preferences = WKPreferences()
        preferences.javaScriptEnabled = true

        /* Create a configuration for our preferences */
        let configuration = WKWebViewConfiguration()
        configuration.preferences = preferences


        /* Now instantiate the web view */
        restWeb = WKWebView(frame: self.daview.bounds, configuration: configuration)

   let urlString = "http://www.google.com"  


        println("EL DETAIL URL es \(urlString)")
        if let theWebView = restWeb {
            println("Existe restWeb")
        let urlRest = NSURL(string:urlString)
        let requestRest = NSURLRequest(URL: urlRest!)
        theWebView.loadRequest(requestRest)
        theWebView.allowsBackForwardNavigationGestures = true
        theWebView.navigationDelegate = self
        self.daview.addSubview(theWebView)
        }


} // finish viewdidload

- lorenzo gonzalez

---

通过 cocoa-init irc 在 freenode 上的帮助，我得到了答案。答案是：禁用：调整滚动视图插图。 - lorenzo gonzalez

Answer 1

简短回答：将您的代码从viewDidLoad()移动到viewDidAppear()

解释：我不是专家，但在我的早期经验中遇到过这个问题。 您的webview存在问题，因为您尝试在viewDidLoad()中设置边界。

    restWeb = WKWebView(frame: self.daview.bounds, configuration: configuration)

但是，仅当视图出现时，自动布局才完成。这意味着，在viewDidLoad中尝试使用的bounds（self.daview.bounds）会在视图布局设置之前给您一个值。

解决方案：正确的自动布局边界在viewDidAppear中及之后可用。如果将以下代码

WKWebView(frame: self.daview.bounds, configuration: configuration)

从viewDidLoad（）移至viewDidAppear（），那么您的所有愿望都会实现。

- Nishant

---

这个方法可以实现，虽然它不是自动布局。你应该能够在 viewDidLoad 中设置所有内容并添加约束，当视图中的所有元素进入视野时，约束将自动调整。 - jowie

Answer 2

如果要使用WKWebView并进行自动布局，请在xib/storyboard编辑器中创建一个UIView，将其类更改为WKWebView。添加自动布局约束。 在viewDidLoad方法中手动删除标志translatesAutoresizingMaskIntoConstraints。

- (void) viewDidLoad
{
   // ...
    _webView.translatesAutoresizingMaskIntoConstraints = NO; // This is necessary!
   // ...
}

// Addition for initialize WKWebView from StoryBoard.
- (instancetype) initWithCoder:(NSCoder*)coder
{
    UIView* view = [UIView.alloc initWithCoder:coder];
    ASSERT(view != nil);
    self = [self initWithFrame:view.frame configuration:WKWebViewConfiguration.new];
    return self;
}

- poGUIst

---

你如何使用WKWebViewConfiguration初始化WKWebView？ - Serge

谢谢。正确答案。接受的答案是错误的，因为在使用自动布局时调整框架是不必要的。 - sonifex

Answer 3

1. Create a method in which you setup 4 autolayout constraints programmatically:

   -(void)setWebViewConstraints {
       [self.view addConstraint:[NSLayoutConstraint constraintWithItem:self.webView attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self.bottomLayoutGuide attribute:NSLayoutAttributeTop multiplier:1.0 constant:0]];
       [self.view addConstraint:[NSLayoutConstraint constraintWithItem:self.webView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.topLayoutGuide attribute:NSLayoutAttributeBottom multiplier:1.0 constant:0]];
       [self.view addConstraint:[NSLayoutConstraint constraintWithItem:self.webView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1.0 constant:0]];
       [self.view addConstraint:[NSLayoutConstraint constraintWithItem:self.webView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1.0 constant:0]];
   }
   

2. Call that method in the viewDidAppear:

   -(void)viewDidAppear:(BOOL)animated {
   [super viewDidAppear:animated];
   [self setWebViewConstraints]; }
   

- Roland T.

---

这难道不会增加多个约束条件吗？ - Crashalot

Answer 4

如果您想在IB中使用自动布局来管理WKWebView，一种实现方式是将集合视图拖入ViewController中。然后，为与Collection View相关联的UIViewController创建一个swift文件，并将所有WKWebView代码放入此UIViewController中。使用自动布局将集合视图放置在包含它的UIViewController中任何需要的位置。

- D. Rothschild