Swift加载带导航条的WebView

Webview是iOS开发中常用的控件，加载webview的时候常常需要一段等待时间，特别是网络条件差的时候，这时候加载一个带导航的webview能很好的提高用户体验，下面的例子演示使用WKWebview自定义一个导航条加载一个webView，WKWebview是iOS8时推出的，相比以前的UIWebview控制的更加精细，功能也更多,支持更多的HTML5特性，支持动态加载JS代码，感兴趣的可以看这篇文章。

下面重点讲本文的主题。
首选，创建一个webview，这里通过lazy load的方法，可以减少代码的耦合，便于代码控制，设置frame,和需要加载的URL:

 // webview
    lazy var webView : WKWebView = {
        var rect:CGRect = self.view.frame
        var webView:WKWebView = WKWebView.init(frame:rect)
        webView.uiDelegate = self
        webView.navigationDelegate = self
        webView.load(URLRequest.init(url: URL.init(string: "https://www.baidu.com/")!))
        webView.addObserver(self , forKeyPath: "estimatedProgress", options: .new, context: nil)
         return webView
    }()

其次：创建我们需要控制的导航条，如以下代码；

// progressView
    lazy var progressView:UIProgressView = {
        var progressView:UIProgressView = UIProgressView.init(frame: CGRect(x:0, y:65 ,width:UIScreen.main.bounds.width, height: 2))
        progressView.tintColor = UIColor.blue
        progressView.trackTintColor = UIColor.white
        return progressView

    }()

然后：最重要的，通过观察webview的estimatedProgress，来控制当前webview的加载进度，并且使用动画展示：

 //MARK:添加控制观察webview的加载进度
    override func observeValue(forKeyPath keyPath: String?, of object: Any?, change: [NSKeyValueChangeKey : Any]?, context: UnsafeMutableRawPointer?) {
        if keyPath == "estimatedProgress" {
            progressView.alpha = 1.0
            progressView.setProgress(Float(webView.estimatedProgress), animated: true)
            if webView.estimatedProgress >= 1.0 {
                UIView.animateKeyframes(withDuration: 0.3, delay: 0.1, options: .beginFromCurrentState, animations: {
                    self.progressView.alpha = 0
                }, completion: { (finish) in
self.progressView.setProgress(0.0, animated: false)
                })
            }
        }
    }

最后：记住在deinit方法中注销掉webview的代理；以下是展示效果。

这里写图片描述

项目地址：https://github.com/LINDreaming/DailyTools

Swift加载带导航条的WebView

猜你喜欢