WKWebView底部约束设置,但不起作用

时间:2019-08-23 09:44:38

标签: ios swift wkwebview

我已将WKWebView底部约束设置为超级视图,但是直到超级视图才显示内容,直到安全区域才显示内容。

这是显示底部未正确填充的问题图像。

enter image description here

这是视图和约束图像的层次结构

enter image description here

enter image description here

以及使用容器视图设置WebView约束的代码

    let wv = WKWebView(frame: containerView.frame, configuration: wvConfig)
    webView = wv
    containerView.addSubview(wv)

    // setup constraints
    wv.translatesAutoresizingMaskIntoConstraints = false
    if #available(iOS 11.0, *) {
        wv.trailingAnchor.constraint(equalTo: containerView.trailingAnchor).isActive = true
        wv.leadingAnchor.constraint(equalTo: containerView.leadingAnchor).isActive = true
        wv.topAnchor.constraint(equalTo: containerView.topAnchor).isActive = true
        wv.bottomAnchor.constraint(equalTo: containerView.bottomAnchor).isActive = true
    } else {
        NSLayoutConstraint(item: wv, attribute: .top, relatedBy: .equal, toItem: containerView, attribute: .top, multiplier: 1.0, constant: 0).isActive = true
        NSLayoutConstraint(item: wv, attribute: .leading, relatedBy: .equal, toItem: containerView, attribute: .leading, multiplier: 1.0, constant: 0).isActive = true
        NSLayoutConstraint(item: wv, attribute: .trailing, relatedBy: .equal, toItem: containerView, attribute: .trailing, multiplier: 1.0, constant: 0).isActive = true
        NSLayoutConstraint(item: wv, attribute: .bottom, relatedBy: .equal, toItem: containerView, attribute: .bottom, multiplier: 1.0, constant: 0).isActive = true
    } 

那么,有人可以在这里纠正问题吗?

  

某些特定的网址可以使用,但不能全部使用。为什么?

5 个答案:

答案 0 :(得分:2)

以下子类的WKWebView可能会解决您的问题:

class FullScreenWKWebView: WKWebView {

    override var safeAreaInsets: UIEdgeInsets {
        if #available(iOS 11.0, *) {
            let insects = super.safeAreaInsets
            return UIEdgeInsets(top: insects.top, left: insects.left, bottom: 0, right: insects.right)
        } else {
            return .zero
        }

    }
    override var alignmentRectInsets: UIEdgeInsets{
        let insects = super.alignmentRectInsets
        return UIEdgeInsets(top: insects.top-20, left: insects.left, bottom: 0, right: insects.right)
    }
}

以上摘录的内容from

完整代码:

import UIKit
import WebKit
class FullScreenWKWebView: WKWebView {

    override var safeAreaInsets: UIEdgeInsets {
        if #available(iOS 11.0, *) {
            let insects = super.safeAreaInsets
            return UIEdgeInsets(top: insects.top, left: insects.left, bottom: 0, right: insects.right)
        } else {
            return .zero
        }

    }
    override var alignmentRectInsets: UIEdgeInsets{
        let insects = super.alignmentRectInsets
        return UIEdgeInsets(top: insects.top-20, left: insects.left, bottom: 0, right: insects.right)
    }
}
class ViewController: UIViewController {

    let contaienrView: UIView = {
        let v = UIView()
        v.translatesAutoresizingMaskIntoConstraints = false
        return v
    }()

    let webView: FullScreenWKWebView = {
        let v = FullScreenWKWebView()
        v.translatesAutoresizingMaskIntoConstraints = false
        return v
    }()

    func setupViews(){
        view.addSubview(contaienrView)
        contaienrView.addSubview(webView)
        let constrains = [
            contaienrView.topAnchor.constraint(equalTo: view.topAnchor),
            contaienrView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            contaienrView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
            contaienrView.trailingAnchor.constraint(equalTo: view.trailingAnchor),

            webView.topAnchor.constraint(equalTo: contaienrView.topAnchor),
            webView.leadingAnchor.constraint(equalTo: contaienrView.leadingAnchor),
            webView.bottomAnchor.constraint(equalTo: contaienrView.bottomAnchor),
            webView.trailingAnchor.constraint(equalTo: contaienrView.trailingAnchor),
            ]
        NSLayoutConstraint.activate(constrains)
    }

    func loadRequest(){
        let url = URL(string: "https://afghan-gps.com/mobile")!
        let request = URLRequest(url: url)
        webView.load(request)
    }


    override func viewDidLoad() {
        super.viewDidLoad()
        setupViews()
        loadRequest()
    }
}

输出:1. iOS版本> 10 enter image description here

  1. iOS版本<11 enter image description here

答案 1 :(得分:0)

我正在尝试重现相同的问题,使用了您的方法,但是没有遇到关于底部空间的任何问题。

class TestWebViewController: UIViewController{

@IBOutlet weak var containerView: UIView!

var wkWebView : WKWebView?

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

    wkWebView?.load(URLRequest(url: URL(string: "https://www.google.com")!))
    wkWebView?.allowsBackForwardNavigationGestures = true

    // Do any additional setup after loading the view.
}

func addWKWebView() {
    let wvConfig = WKWebViewConfiguration.init()
    let wv = WKWebView(frame: containerView.frame, configuration: wvConfig)
    wkWebView = wv
    containerView.addSubview(wv)
    // setup constraints
    wv.translatesAutoresizingMaskIntoConstraints = false
    if #available(iOS 11.0, *) {
        wv.trailingAnchor.constraint(equalTo: containerView.trailingAnchor).isActive = true
        wv.leadingAnchor.constraint(equalTo: containerView.leadingAnchor).isActive = true
        wv.topAnchor.constraint(equalTo: containerView.topAnchor).isActive = true
        wv.bottomAnchor.constraint(equalTo: containerView.bottomAnchor).isActive = true
    } else {
        NSLayoutConstraint(item: wv, attribute: .top, relatedBy: .equal, toItem: containerView, attribute: .top, multiplier: 1.0, constant: 0).isActive = true
        NSLayoutConstraint(item: wv, attribute: .leading, relatedBy: .equal, toItem: containerView, attribute: .leading, multiplier: 1.0, constant: 0).isActive = true
        NSLayoutConstraint(item: wv, attribute: .trailing, relatedBy: .equal, toItem: containerView, attribute: .trailing, multiplier: 1.0, constant: 0).isActive = true
        NSLayoutConstraint(item: wv, attribute: .bottom, relatedBy: .equal, toItem: containerView, attribute: .bottom, multiplier: 1.0, constant: 0).isActive = true
    }
}
}

View Hierarchy Constraints

一切对我来说都很好。

输出-

Output

请让我知道我是否缺少任何东西。

更新-

问题与WKWebview的scrollView有关。

在安全区域WKScrollView.adjustedContentInset设置为{0,0,34,0}。

为避免这种情况使用

wv.scrollView.contentInsetAdjustmentBehavior = .never

最终输出-

enter image description here

答案 2 :(得分:-1)

将容器视图替换为底部约束视图,因为根是视图。

 view.addSubview(wv)

  wv.translatesAutoresizingMaskIntoConstraints = false
    if #available(iOS 11.0, *) {
        wv.trailingAnchor.constraint(equalTo: containerView.trailingAnchor).isActive = true
        wv.leadingAnchor.constraint(equalTo: containerView.leadingAnchor).isActive = true
        wv.topAnchor.constraint(equalTo: containerView.topAnchor).isActive = true
        wv.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true
    }
    NSLayoutConstraint(item: wv, attribute: .top, relatedBy: .equal, toItem: containerView, attribute: .top, multiplier: 1.0, constant: 0).isActive = true
            NSLayoutConstraint(item: wv, attribute: .leading, relatedBy: .equal, toItem: containerView, attribute: .leading, multiplier: 1.0, constant: 0).isActive = true
            NSLayoutConstraint(item: wv, attribute: .trailing, relatedBy: .equal, toItem: containerView, attribute: .trailing, multiplier: 1.0, constant: 0).isActive = true
            NSLayoutConstraint(item: wv, attribute: .bottom, relatedBy: .equal, toItem: view, attribute: .bottom, multiplier: 1.0, constant: 0).isActive = true

答案 3 :(得分:-1)

您的代码看起来不错,您的问题可能来自 public AddrainsPage() { InitializeComponent(); nameLabel.Text = Settings.NameSettings + "'s lovely rains"; //For getting current time Device.StartTimer(TimeSpan.FromSeconds(1), () => { Device.BeginInvokeOnMainThread(() => datetimeLabel.Text = "Date/Time: " + DateTime.Now.ToString("MMMM d, yyyy hh:mm tt")); return true; }); rain1Label.Text = Settings.rain1LocationSettings; rain2Label.Text = Settings.rain2LocationSettings; } private void savemLButtonHandle_Clicked(object sender, EventArgs e) { Post post = new Post() { //adding to Post.cs CDateTime = datetimeLabel.Text, rain1vol = drain1Entry.Text, rain2vol = drain2Entry.Text, }; //make a connection to database using (SQLiteConnection conn = newSQLiteConnection(App.DatabaseLocation)) { //table we want to create conn.CreateTable<Post>(); //now we can insert; insert in always integer int rows = conn.Insert(post); //only one connection at a time so we need to close it //conn.Close(); if (rows > 0) DisplayAlert("Success", "inserted", "OK"); else DisplayAlert("Fail", "insert failed", "OK"); } } 约束。

如果使用情节提要,Xcode可能会在安全区域设置约束。在这种情况下,您应该以编程方式处理所有约束。

答案 4 :(得分:-1)

根据给定的屏幕截图,将底部约束应用到安全区域中。将底部约束添加到SuperView中。 enter image description here