ios開發之--給WebView加載進度條

不是新東西，就是在項目里面用到H5頁面的時候，中間加載延遲的時候，在最上面加載一個進度條，代碼如下：

// 獲取屏幕 寬度、高度 bounds就是屏幕的全部區域
#define KDeviceWidth    [UIScreen mainScreen].bounds.size.width
#define KDeviceHeight   [UIScreen mainScreen].bounds.size.height

#define IS_IPHONE_X (KDeviceHeight == 812.0f) ? YES : NO

#define Height_NavBar ((IS_IPHONE_X) ? 88.0f : 64.0f)

#define Height_NavContentBar 64.0f


#import "OtherViewController.h"

@interface OtherViewController ()<WKUIDelegate,WKNavigationDelegate>

@property (nonatomic, strong) WKWebViewConfiguration *wkConfig;
/*
 *1.添加UIProgressView屬性
 */
@property (nonatomic, strong) UIProgressView *progressView;

@property (nonatomic, strong) WKWebView *wkWebView;

@end

@implementation OtherViewController

#pragma mark - 初始化wkWebView

- (WKWebViewConfiguration *)wkConfig {
    if (!_wkConfig) {
        _wkConfig = [[WKWebViewConfiguration alloc] init];
        _wkConfig.allowsInlineMediaPlayback = YES;
        if (@available(iOS 10.0, *)) {
            _wkConfig.allowsPictureInPictureMediaPlayback = YES;
        } else {
            // Fallback on earlier versions
        }
    }
    return _wkConfig;
}

- (WKWebView *)wkWebView {
    if (!_wkWebView) {
        _wkWebView = [[WKWebView alloc] initWithFrame:CGRectMake(0, Height_NavBar, KDeviceWidth, KDeviceHeight) configuration:self.wkConfig];
        _wkWebView.navigationDelegate = self;
        _wkWebView.UIDelegate = self;
        [self.view addSubview:_wkWebView];
    }
    return _wkWebView;
}

/*
 *6.在dealloc中取消監聽
 */

- (void)dealloc {
    if (self.progressView) {
        [self.progressView removeFromSuperview];
        self.progressView = nil;
    }
    [self.wkWebView removeObserver:self forKeyPath:@"estimatedProgress"];
}

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    
    /*
     *2.初始化progressView
     */
    self.progressView = [[UIProgressView alloc] initWithFrame:CGRectMake(0, 44, [[UIScreen mainScreen] bounds].size.width, 2)];
    self.progressView.backgroundColor = [UIColor whiteColor];
    self.progressView.progressImage = [UIImage imageNamed:@"WKProgress"];
    //設置進度條的高度，下面這句代碼表示進度條的寬度變為原來的1倍，高度變為原來的1.5倍.
    self.progressView.transform = CGAffineTransformMakeScale(1.0f, 1.5f);
    //    [self.navigationController.navigationBar addSubview:self.progressView];
    [self.navigationController.navigationBar addSubview:self.progressView];
    /*
     *3.添加KVO，WKWebView有一個屬性estimatedProgress，就是當前網頁加載的進度，所以監聽這個屬性。
     */
    [self.wkWebView addObserver:self forKeyPath:@"estimatedProgress" options:NSKeyValueObservingOptionNew context:nil];
    
    [self loadWebViewWithUrl:@"http://www.pc6.com/apple/"];
}

- (void)viewWillDisappear:(BOOL)animated{
    [super viewWillDisappear:animated];
    [self.progressView removeFromSuperview];
    self.progressView = nil;
}

#pragma mark - start load web

- (void)loadWebViewWithUrl:(NSString *)url{
    NSMutableURLRequest *request = [NSMutableURLRequest requestWithURL:[NSURL URLWithString:url]];
    request.timeoutInterval = 15.0f;
    [self.wkWebView loadRequest:request];
}

#pragma mark - 監聽

/*
 *4.在監聽方法中獲取網頁加載的進度，並將進度賦給progressView.progress
 */

- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSString *,id> *)change context:(void *)context {
    if ([keyPath isEqualToString:@"estimatedProgress"]) {
        NSLog(@"%.2f,",self.wkWebView.estimatedProgress);
        self.progressView.progress = self.wkWebView.estimatedProgress;
        if (self.progressView.progress == 1) {
            /*
             *添加一個簡單的動畫，將progressView的Height變為1.4倍
             *動畫時長0.25s，延時0.3s后開始動畫
             *動畫結束后將progressView隱藏
             */
            __weak typeof (self)weakSelf = self;
            [UIView animateWithDuration:0.25f delay:0.3f options:UIViewAnimationOptionCurveEaseOut animations:^{
                weakSelf.progressView.transform = CGAffineTransformMakeScale(1.0f, 1.4f);
            } completion:^(BOOL finished) {
                weakSelf.progressView.hidden = YES;
                
            }];
        }
    }else{
        [super observeValueForKeyPath:keyPath ofObject:object change:change context:context];
    }
}

#pragma mark - WKWKNavigationDelegate Methods

/*
 *5.在WKWebViewd的代理中展示進度條，加載完成后隱藏進度條
 */

//開始加載
- (void)webView:(WKWebView *)webView didStartProvisionalNavigation:(WKNavigation *)navigation {
    NSLog(@"開始加載網頁");
    //開始加載網頁時展示出progressView
    self.progressView.hidden = NO;
    //開始加載網頁的時候將progressView的Height恢復為1.5倍
    self.progressView.transform = CGAffineTransformMakeScale(1.0f, 1.5f);
    //防止progressView被網頁擋住
    [self.navigationController.navigationBar bringSubviewToFront:self.progressView];
}

//加載完成
- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation {
    NSLog(@"加載完成");
    //加載完成后隱藏progressView
    //    self.progressView.hidden = YES;
}

//加載失敗
- (void)webView:(WKWebView *)webView didFailProvisionalNavigation:(WKNavigation *)navigation withError:(NSError *)error {
    NSLog(@"加載失敗");
    //加載失敗同樣需要隱藏progressView
    self.progressView.hidden = YES;
}

//頁面跳轉
- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {
    //允許頁面跳轉
    NSLog(@"%@",navigationAction.request.URL);
    decisionHandler(WKNavigationActionPolicyAllow);
}

思路是：給WKWebView添加一個觀察者，WKWebView有一個屬性estimatedProgress，就是當前網頁加載的進度，所以監聽這個屬性，然后再開始加載網頁的時候顯示progress，在加載完成或者失敗的時候，把progress隱藏就可以了！

僅做記錄！

效果如下：