以编程方式在具有自动布局的 UIView 中使用 WKwebView

Question

这对某些专家来说可能很容易，所以。问题是 Xcode 可视化界面中没有 WKWebView 供故事板使用，与 UIWebview 不同，因此必须以编程方式创建它。我在整个应用程序中使用导航控制器。

我在故事板中创建了一个 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

Answer 1

一行回答：将您的代码从 viewDidLoad() 移至 viewDidAppear()

说明：我不是专家，但我在早期遇到过这个问题。您的 webview 的问题是您试图在 viewDidLoad()

中设置边界

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

但是，只有当视图出现时，自动布局才算完成。意思是，您尝试在 viewDidLoad 中使用的边界 (self.daview.bounds)，甚至在设置视图布局之前就给您一个值。

解决方案：正确的自动布局边界在 viewDidAppear 中和之后可用。如果您移动代码

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

从 viewDidLoad() 到 viewDidAppear()，那么你的愿望就会实现了。

Answer 2

创建一个以编程方式设置 4 个自动布局约束的方法：

-(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]];
}

在 viewDidAppear 中调用该方法：

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

Answer 3

另一种让您能够在 IB 中为 WKWebView 使用自动布局的方法是将集合视图拖到您的 ViewController 中。然后为与集合视图关联的 UIViewController 创建一个 swift 文件。将您所有的 WKWebView 代码放入此 UIViewController。使用自动布局将集合视图放置在包含它的 UIViewController 中您需要的任何位置。

Answer 4

要将 WKWebView 与自动布局一起使用，请在 xib/storyboard 编辑器中创建 UIView，将 class 更改为 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;
}

以编程方式在具有自动布局的 UIView 中使用 WKwebView

Programmatically WKwebView inside an UIView with auto layout

uiview

autolayout

constraints

wkwebview