WebView进度条—》NJKWebViewProgress的实现

导入框架的头文件

#import "NJKWebViewProgressView.h"
#import "NJKWebViewProgress.h"```
遵循代理

@interface WebController : UIViewController<UIWebViewDelegate, NJKWebViewProgressDelegate>```

@interface WebController ()
{
    NJKWebViewProgressView *_progressView;
    NJKWebViewProgress *_progressProxy;
}

- (void)viewDidLoad{ 
 [super viewDidLoad]; 
  _webView = [[UIWebView alloc] initWithFrame:[UIScreen mainScreen].bounds];
  _progressProxy = [[NJKWebViewProgress alloc] init];
  _webView.delegate = _progressProxy;
  _progressProxy.webViewProxyDelegate = self;
  _progressProxy.progressDelegate = self;
    
  CGFloat progressBarHeight = 2.f;
  CGRect navigationBarBounds = self.navigationController.navigationBar.bounds;
  CGRect barFrame = CGRectMake(0, navigationBarBounds.size.height - progressBarHeight, navigationBarBounds.size.width, progressBarHeight);
  _progressView = [[NJKWebViewProgressView alloc] initWithFrame:barFrame];
    
  _progressView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleTopMargin;
    
  _webView.backgroundColor = [UIColor whiteColor];
  [self.view addSubview: _webView];
  [_webView  loadBaidu];

}
#pragma mark -- 加载网页
-(void)loadBidu{ 
  NSURLRequest *req = [[NSURLRequest alloc] initWithURL:[NSURL URLWithString:@"http://www.baidu.com/"]]; 
  [_webView loadRequest:req];
}
#pragma mark - NJKWebViewProgressDelegate
-(void)webViewProgress:(NJKWebViewProgress *)webViewProgress updateProgress:(float)progress{ 

  [_webViewProgressView setProgress:progress animated:YES]; 

}

- (void)viewWillAppear:(BOOL)animated
{
    [super viewWillAppear:animated];
    [self.navigationController.navigationBar addSubview:_progressView];
}

分析
之前也有遇到需要做webview进度条的需求，但是一直没有好的方法。最后我的处理方法是使用NSURLRquest 去请求数据，请求的进度可以拿到，请求结束之后把请求的数据加载到webview。这样请求完成之前是不会显示数据的，只显示了进度条。所以很好奇NJKWebViewProgress是怎么做到的，分析如下：webViewDidStartLoad是一个请求的开始，所有的请求都要经过它，未加载资源之前，能够得到一个URL 有多少个资源需要加载，使用_loadingCount++方式来计数。

• webViewDidFinishLoad、didFailLoadWithError是一个请求的结束，每次请求结束_loadingCount --,并重新计数进度

• 进度使用_loadingCount/_maxLoadCount的方式来计算

• 每次webViewDidFinishLoad、didFailLoadWithError请求都加入了waitForCompleteJS这样的js到web view中，来检测网页是否加载完成。

• 把得到进度逻辑和展示进度的视图分开写，用代理把两个类联系起来，结构清晰、实现起来也会方便很多

总结

作者非常巧妙地通过计算需要加载的请求的个数，通过请求个数来现实加载进度，不得不佩服他的想法