ios開發(fā)加載webview顯示進度條實例
很多APP加載webView頁面的時候都有進度條顯示,今天我們這里主要使用相對輕量級的WKWebView加載網(wǎng)頁,至于WKWebView 和UIWebView的區(qū)別與聯(lián)系這里就不多講了,自己百度哈哈。。。
WKWebView加載網(wǎng)頁進度跳顯示主要效果如下:

這里主要是使用KVO監(jiān)聽WKWebView的“estimatedProgress”屬性,通過監(jiān)聽該屬性的變化才是進度條的長度。
1、定義便利構(gòu)造函數(shù)、以及屬性和控件
var url: String?
var progresslayer = CALayer()
var webView: WKWebView?
var button: UIButton?
convenience init(title: String, url: String) {
self.init()
self.title = title
self.url = url
}
2、創(chuàng)建webview控件,并監(jiān)聽estimatedProgress,進度條初始化的時候會給一定的長度顯示(原因下面解釋)。
func setupUI() {
webView = WKWebView(frame: CGRect.init(x: 0, y: 0, width: screenWidth, height: screenHeight-64.0))
if url == "" {
url = "http:www.baidu.com"
}
let request = URLRequest(url: URL(string: url ?? "http:www.baidu.com")!)
webView?.load(request)
webView?.uiDelegate = self
webView?.navigationDelegate = self;
view.addSubview(webView!)
//添加屬性監(jiān)聽
webView?.addObserver(self, forKeyPath: "estimatedProgress", options: .new, context: nil)
progresslayer.frame = CGRect.init(x: 0, y: 0, width: screenWidth * 0.1, height: 3)
progresslayer.backgroundColor = UIColor.green.cgColor
view.layer.addSublayer(progresslayer)
}
3、監(jiān)聽estimatedProgress屬性變化,并修改進度條長度,創(chuàng)建進度條的時候之所以給一定的默認長度主要是因為在沒有網(wǎng)絡的狀態(tài)下會立即進度float == 1條件,這樣給人的感覺就是沒有加載網(wǎng)頁一樣。
override func observeValue(forKeyPath keyPath: String?, of object: Any?, change: [NSKeyValueChangeKey : Any]?, context: UnsafeMutableRawPointer?) {
if keyPath == "estimatedProgress" {
progresslayer.opacity = 1
let float = (change?[NSKeyValueChangeKey.newKey] as! NSNumber).floatValue
progresslayer.frame = CGRect.init(x: 0, y: 0, width: (screenWidth * CGFloat(float)) , height: 3)
if float == 1 {
weak var weakself = self
DispatchQueue.main.asyncAfter(deadline: DispatchTime.now() + 0.2, execute: {
weakself?.progresslayer.opacity = 0
})
DispatchQueue.main.asyncAfter(deadline: DispatchTime.now() + 0.8, execute: {
weakself?.progresslayer.frame = CGRect.init(x: 0, y: 0, width: 0, height: 3);
})
}
}else{
super.observeValue(forKeyPath: keyPath, of: object, change: change, context: context)
}
}
4、web view加載失敗后提示
extension KKWebView : WKUIDelegate, WKNavigationDelegate {
func webView(_ webView: WKWebView, didFailProvisionalNavigation navigation: WKNavigation!, withError error: Error) {
guard let btn = button else {
button = UIButton(type: .system)
button?.frame = CGRect.init(x: 0, y: 3, width: screenWidth, height: screenHeight-64-3)
button?.backgroundColor = UIColor.white
button?.setTitleColor(UIColor.darkText, for: .normal)
button?.setTitle("點擊重新加載", for: .normal)
button?.addTarget(self, action: #selector(loadURL), for: .touchUpInside)
view.addSubview(button!)
return
}
btn.isHidden = false
}
}
5、記載失敗后點擊提示重新加載
func loadURL() {
button?.isHidden = true
if url == "" {
url = "http:www.baidu.com"
}
let request = URLRequest(url: URL(string: url ?? "http:www.baidu.com")!)
webView?.load(request)
}
5、移除監(jiān)聽,離開頁面的時候需要移除KVO監(jiān)聽,否則會出現(xiàn)內(nèi)存泄露
deinit {
webView!.removeObserver(self, forKeyPath: "estimatedProgress")
}
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
IOS 波紋進度(waveProgress)動畫實現(xiàn)
這篇文章主要介紹了IOS 紋進度(waveProgress)動畫實現(xiàn)的相關(guān)資料,需要的朋友可以參考下2016-09-09
詳解iOS開發(fā)中UITableview cell 頂部空白的多種設置方法
這篇文章主要介紹了詳解iOS開發(fā)中UITableview cell 頂部空白的多種設置方法的相關(guān)資料,需要的朋友可以參考下2016-04-04
iOS開發(fā)之App主題切換解決方案完整版(Swift版)
這篇文章主要為大家詳細介紹了iOS開發(fā)之App主題切換完整解決方案,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-02-02
React Native搭建iOS開發(fā)環(huán)境
React Native的門檻不管是對于前端開發(fā)者還是移動端開發(fā)者來說都是很高的,既要懂原生又要懂js,技術(shù)棧是相當長的。但是沒有關(guān)系,下面我們一步步來學習,慢慢成長吧!2016-09-09

