使用自动版式将UIWebView设为与内容高度相同的高度 [英] Make a UIWebView as height as its content with Auto Layout

问题描述

我在滚动视图中嵌入了一个Web视图，并且希望该Web视图被展开"以显示其所有内容，然后我希望在其滚动视图中滚动浏览.

I've got a web view embedded in a scroll view, and I want the web view to be "expanded" to show all of its content, which I then want to scroll through with my scroll view.

之所以将滚动视图用作超级视图，而不仅仅是将Web视图用作滚动视图，是因为我在Web视图上方具有要在滚动过程中包括的标签(请参见屏幕截图).

The reason I am using a scroll View as a super view and not just using the web view as a scroll view is because I have labels above the web view that I want to include in the scrolling process (see screenshot).

那么，如何使Webview自身调整大小，使其占据显示其包含的内容所需的所有空间?

So how do I make the webview resize itself so it takes up all the space it needs to show the content it contains ?

然后，如何根据网络视图的大小调整超级视图(滚动视图)的大小?

And after that, how do I make the superview (the Scroll view) resize itself according to the size of the webview?

推荐答案

要进行此工作，您必须执行以下步骤:

To make this work you have to do the following steps:

1. 将UIWebView从笔尖连接到视图控制器中的插座
2. 禁止在网络视图中滚动
3. 在UIScrollView，Web视图顶部的UIView(在我的示例中，我省略了该视图中的所有标签)和UIWebView上设置约束.
4. 将UIWebView的height约束连接到视图控制器中的插座.
5. 将视图控制器设置为UIWebViewDelegate
6. 在webViewDidFinishLoad中，将高度约束的常量设置为Web视图内滚动视图的contentSize的高度.
7. 在必须更改Web视图的高度(因为网页的各个部分在不重新加载页面的情况下更改其大小)(例如，手风琴或菜单)的情况下，在contentSize上开始键值观察以更改高度.

1. Connect the UIWebView from the nib to an outlet in your view controller
2. Disable scrolling in the web view
3. Set the constraints on the UIScrollView, the UIView on top of the web view (In my example I omitted all the labels in that view) and the UIWebView.
4. Connect the UIWebView's height constraint to an outlet in your view controller.
5. Set the view controller as UIWebViewDelegate
6. In webViewDidFinishLoad set the height constraint's constant to the height of the contentSize of the scroll view inside the web view.
7. Start Key-Value Observing on the contentSize to change the height, when height of the web view has to change because segments of the webpage change their size without reloading the page (like accordeons, or menus).

我不会详细解释约束，因为您似乎已经自己弄清楚了.这是约束的屏幕截图:

I won't explain the constraints in detail as you seem to already have figured them out yourself. Here is a screenshot of the constraints:

所以，这是代码:

import UIKit

var MyObservationContext = 0

class ViewController: UIViewController {

    @IBOutlet weak var webview: UIWebView!
    @IBOutlet weak var webviewHeightConstraint: NSLayoutConstraint!
    var observing = false

    override func viewDidLoad() {
        super.viewDidLoad()
        webview.scrollView.scrollEnabled = false
        webview.delegate = self
        webview.loadRequest(NSURLRequest(URL: NSURL(string: "https://www.google.de/intl/de/policies/terms/regional.html")!))
    }

    deinit {
        stopObservingHeight()
    }

    func startObservingHeight() {
        let options = NSKeyValueObservingOptions([.New])
        webview.scrollView.addObserver(self, forKeyPath: "contentSize", options: options, context: &MyObservationContext)
        observing = true;
    }

    func stopObservingHeight() {
        webview.scrollView.removeObserver(self, forKeyPath: "contentSize", context: &MyObservationContext)
        observing = false
    }

    override func observeValueForKeyPath(keyPath: String?, ofObject object: AnyObject?, change: [String : AnyObject]?, context: UnsafeMutablePointer<Void>) {
        guard let keyPath = keyPath else {
            super.observeValueForKeyPath(nil, ofObject: object, change: change, context: context)
            return
        }
        switch (keyPath, context) {
        case("contentSize", &MyObservationContext):
            webviewHeightConstraint.constant = webview.scrollView.contentSize.height
        default:
            super.observeValueForKeyPath(keyPath, ofObject: object, change: change, context: context)
        }
    }
}

extension ViewController: UIWebViewDelegate {
    func webViewDidFinishLoad(webView: UIWebView) {
        print(webView.request?.URL)
        webviewHeightConstraint.constant = webview.scrollView.contentSize.height
        if (!observing) {
            startObservingHeight()
        }
    }
}

这篇关于使用自动版式将UIWebView设为与内容高度相同的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！