美文网首页
IOS WKWebView添加加载进度条

IOS WKWebView添加加载进度条

作者: 格吾刚哥 | 来源:发表于2017-07-11 16:12 被阅读145次

    1、添加UIProgressView属性

    @property (nonatomic, strong) WKWebView *wkWebView;
    @property (nonatomic, strong) UIProgressView *progressView;
    

    2、初始化progressView

    • (void)viewDidLoad {
      [super viewDidLoad];
      //进度条初始化
      self.progressView = [[UIProgressView alloc] initWithFrame:CGRectMake(0, 20, [[UIScreen mainScreen] bounds].size.width, 2)];
      self.progressView.backgroundColor = [UIColor blueColor];
      //设置进度条的高度,下面这句代码表示进度条的宽度变为原来的1倍,高度变为原来的1.5倍.
      self.progressView.transform = CGAffineTransformMakeScale(1.0f, 1.5f);
      [self.view addSubview:self.progressView];
      }

    3、添加kvo监听

    [self.wkWebView addObserver:self forKeyPath:@"estimatedProgress" options:NSKeyValueObservingOptionNew context:nil];
    

    4、监听方法里处理进度

    - (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSString *,id> *)change context:(void *)context {
        if ([keyPath isEqualToString:@"estimatedProgress"]) {
            self.progressView.progress = self.wkWebView.estimatedProgress;
            if (self.progressView.progress == 1) {
                /*
                 *添加一个简单的动画,将progressView的Height变为1.4倍,在开始加载网页的代理中会恢复为1.5倍
                 *动画时长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];
        }
    }
    

    5、移除监听

        [self.wkWebView removeObserver:self forKeyPath:@"estimatedProgress"];
    

    相关文章

      网友评论

          本文标题:IOS WKWebView添加加载进度条

          本文链接:https://www.haomeiwen.com/subject/zbkqhxtx.html