UIWebview-----添加进度条

为了项目的敏捷性和简单性,现在的app常常会嵌入不少的H5页面,而如何优雅的显示这些web页面呢,我这里参照微信显示web页面的方式,做了一个导航栏下的加载进度条

我这里面提供两种方式，一个是github上开源的类库，获取真的加载进度，但是webview的加载时开始的时候比较慢，后来的进度一下子就完成了，个人感觉这样的效果体验不太好，所以这里我采用的是假的加载进度，让用户感觉在一直的加载

Simulator Screen Shot 2016年11月28日 23.40.44.png

代码如下：
建立XSQWebProgressView 继承 CAShapeLayer
.h 中

#import <QuartzCore/QuartzCore.h>

@interface XSQWebProgressView : CAShapeLayer
- (void)speedLoad;
- (void)startLoad;
- (void)closeTimer;

@end

.m 中

#import "XSQWebProgressView.h"
#import <UIKit/UIKit.h>
static NSTimeInterval const tiemInterval = 0.01;
@implementation XSQWebProgressView{
    CAShapeLayer *_layer;
    NSTimer *_timer;
    CGFloat _speed;
    BOOL _isSpeedLoad;
}
- (instancetype)init {
    if (self = [super init]) {
        [self initialize];
    }
    return self;
}
- (void)initialize{
    self.lineWidth = 2;
    self.strokeColor = [UIColor greenColor].CGColor;
    _timer = [NSTimer scheduledTimerWithTimeInterval:tiemInterval target:self selector:@selector(pathChanged:) userInfo:nil repeats:YES];
    [self pause];
    
    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:CGPointMake(0, 2)];
    [path addLineToPoint:CGPointMake([UIScreen mainScreen].bounds.size.width, 2)];
    
    self.path = path.CGPath;
    self.strokeEnd = 0;
    _speed = 0.001;
    _isSpeedLoad = NO;
}

- (void)pathChanged:(NSTimer *)timer {
    if (_isSpeedLoad) {
        //页面加载完后开始加速加速进度条
        self.strokeEnd +=0.02;
    }else{
        //页面没有加载完是慢慢的加载
        if (self.strokeEnd <= 0.8) {
             self.strokeEnd += 0.005;
        }
    }
    //进度条加载完后移除掉
    if (self.strokeEnd>=1.0) {
        [self closeTimer];
        dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.25 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
            self.hidden = YES;
            [self removeFromSuperlayer];
        });
    }
}
- (void)dealloc {
    //   NSLog(@"progressView dealloc");
    [self closeTimer];
}

#pragma mark - private
- (void)closeTimer {
    [_timer invalidate];
    _timer = nil;
}

- (void)pause{
    if ([_timer isValid]) {
        [_timer setFireDate:[NSDate distantFuture]];
    }
}
- (void)startLoad {
    if ([_timer isValid]) {
        [_timer setFireDate:[NSDate dateWithTimeIntervalSinceNow:tiemInterval]];
    }
}
- (void)speedLoad{
    _isSpeedLoad = YES;
}
@end

使用起来比较简单，代码如下：

#import "XSQWebProgressView.h"
@interface WebViewController ()<UIWebViewDelegate>
@property (nonatomic, strong) UIWebView * web;
@property (nonatomic, strong) XSQWebProgressView * progressView;
@end

@implementation WebViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    self.web = [[UIWebView alloc]initWithFrame:self.view.bounds];
    [self.web loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"https:www.baidu.com"]]];
    self.web.backgroundColor = [UIColor whiteColor];
    self.web.delegate = self;
    [self.view addSubview:self.web];
    self.progressView = [XSQWebProgressView new];
    self.progressView.frame = CGRectMake(0, 42, [UIScreen mainScreen].bounds.size.width, 2);
    [self.navigationController.navigationBar.layer addSublayer:self.progressView];
}
#pragma mark - UIWebViewDelegate
- (void)webViewDidStartLoad:(UIWebView *)webView {
    [self.progressView startLoad];
}

- (void)webViewDidFinishLoad:(UIWebView *)webView {
    [self.progressView speedLoad];
    self.title = [webView stringByEvaluatingJavaScriptFromString:@"document.title"];
}
- (void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error {
    [self.progressView speedLoad];
}
- (void)viewWillDisappear:(BOOL)animated{
    [super viewWillDisappear:animated];
    [self.progressView closeTimer];
    [self.progressView removeFromSuperlayer];
    self.progressView = nil;
}

@end

下面我来简单介绍一下我的思想，给webview添加一个进度可以很大程度上条高用户的体验，如上前面所说，通过获取webview的真实进度，webview刚开始加载的慢后来又太快，用户体验也不是太好，所以这里我自己模拟一个进度条来加载。
在webview没有加载完之前，是通过定时器模拟进度慢慢加载的等webview加载完后再快速加载，让用户感觉到webview在一直的加载，提高用户体验

本文的源码下载地址：https://github.com/xiaoshunliang/XSQWebProgressViewDemo

这个是开源的根据实际进度加载进度的，可搜一下github上的NJKWebViewProgress

UIWebview-----添加进度条

推荐阅读更多精彩内容