WKWebView bottom constraint set but won't work
我已经将
这是显示底部未正确填充的问题图像。
这是视图和约束图像的层次结构
以及使用容器视图设置WebView约束的代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | 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 } |
那么,有人可以在这里纠正问题吗?
Some certain URL's it works, but not for all. Why?
以下子类的WKWebView可以解决您的问题:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | 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) } } |
以上摘录自
完整代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | 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
我正在尝试重现相同的问题,使用了您的方法,但是没有遇到有关底部空间的任何问题。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | 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 } } } |
一切对我来说都很好。
输出-
如果我缺少什么,请告诉我。
更新-
问题在于WKWebview的scrollView。
在安全区域中,WKScrollView.adjustedContentInset设置为{0,0,34,0}。
为了避免这种使用
1 | wv.scrollView.contentInsetAdjustmentBehavior = .never |
最终输出-
根据给定的屏幕截图,将底部约束应用到安全区域中。将底部约束添加到SuperView中。
您的代码看起来不错,您的问题可能来自
如果您使用情节提要板,则Xcode可能会对安全区域设置约束。在这种情况下,您应该以编程方式处理所有约束。
在底部约束中将容器视图替换为视图,因为根是视图。
1 2 3 4 5 6 7 8 9 10 11 12 13 | 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 |