一直以来,就有想通过技术博客来记录总结下自己工作中碰到的问题的想法,这个想法拖了好久今天才开始着手写自己的第一篇技术博客,由于刚开始写,不免会出现不对的地方,希望各位看到的大牛多多指教。好了,不多说了,直接进入正题~

  WKWebView有一个属性estimatedProgress,该属性就是当前网页加载的进度,可以通过KVO来监听这个属性。

WKWebView * webView = [[WKWebView alloc] initWithFrame:self.view.bounds];
[self.view addSubview:webView];
self.webView = webView;
// 添加属性监听
[webView addObserver:self forKeyPath:@"estimatedProgress" options:NSKeyValueObservingOptionNew context:nil];

  添加好属性的监听后,接下来就是去实现进度条,这里用到了CALayer隐式动画

// 进度条
UIView * progress = [[UIView alloc] initWithFrame:CGRectMake(, , CGRectGetWidth(self.view.frame), )];
progress.backgroundColor = [UIColor clearColor];
[self.view addSubview:progress]; // 隐式动画
CALayer * layer = [CALayer layer];
layer.frame = CGRectMake(, , , );
layer.backgroundColor = [UIColor blueColor].CGColor;
[progress.layer addSublayer:layer];
self.progressLayer = layer;

[webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"https://www.baidu.com"]]

  做好这些基本的工作之后,就是最重要的监听属性的方法了

- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSKeyValueChangeKey,id> *)change context:(void *)context{
if ([keyPath isEqualToString:@"estimatedProgress"]) {
NSLog(@"change == %@",change);
self.progressLayer.opacity = ;
self.progressLayer.frame = CGRectMake(, , self.view.bounds.size.width * [change[NSKeyValueChangeNewKey] floatValue], );
if ([change[NSKeyValueChangeNewKey] floatValue] == ) {
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(. * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
self.progressLayer.opacity = ;
});
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(. * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
self.progressLayer.frame = CGRectMake(, , , );
});
}
}else {
[super observeValueForKeyPath:keyPath ofObject:object change:change context:context];
}
}

  主要的代码就是这些了,⚠️最后不要忘记取消监听

- (void)dealloc {
[self.webView removeObserver:self forKeyPath:@"estimatedProgress"];
}

  以上就是给WKWebView添加进度条的方式。最后附上实现的Demo:https://github.com/wanliju/WLWKWebViewWithProgressLine

iOS-WebView(WKWebView)进度条的更多相关文章

  1. Xamarin iOS教程之进度条和滚动视图

    Xamarin iOS教程之进度条和滚动视图 Xamarin iOS 进度条 进度条可以看到每一项任务现在的状态.例如在下载的应用程序中有进度条,用户可以很方便的看到当前程序下载了多少,还剩下多少.Q ...

  2. WebView线性进度条

    参考:http://www.cnblogs.com/hubli/p/4835549.html APP会跳转网页时候,请参考:http://blog.csdn.net/raphael55/article ...

  3. Android中的webview的进度条

    <application android:icon="@drawable/hunqin" android:label="@string/app_name" ...

  4. webview的进度条的加载,webview的使用以及handle的理解与使用

    Webview的几个关键方法要介绍一些: 谷歌官方文档是这么说的; A WebView has several customization points where you can add your ...

  5. iOS学习-圆形进度条

    效果: #import <UIKit/UIKit.h> @interface HsProfitRatePieWidgets : UIView { UILabel *_textLabel; ...

  6. ios 画圆环进度条

    #import <UIKit/UIKit.h> @interface SNCircleProgressView : UIView /** * 进度值0-1.0之间 */ @property ...

  7. iOS 自定义步骤进度条

    新项目要做入驻功能,其中包括一个入住流程,类似登录或者注册流程如下图. 之前想着用自己绘图来做,可是又懒不想多写代码,所以就想着能不能用进度条来做. 1.用进度条做的首先要解决的是进度条的高度问题,可 ...

  8. iOS圆弧渐变进度条的实现

    由于项目需要一个环形渐变进度条显示课程,这方便网上的确有很多相关资料但是,都是比较零散的而且,大多数只是放一堆代码就算完了.这里我想详细写一篇我自己实现这个进度条的过程. 实现一个圆弧进度条主要分为三 ...

  9. 仿IOS圆形下载进度条

    /** * Created by C058 on 2016/5/25. */ public class MyHoriztalProgressBar extends ProgressBar { priv ...

随机推荐

  1. JavaEE之动态页面技术(JSP/EL/JSTL)

    动态页面技术(JSP/EL/JSTL) JSP技术 jsp脚本和注释 jsp脚本: 1)<%java代码%> ----- 内部的java代码翻译到service方法的内部 2)<%= ...

  2. vue双向绑定笔记

    原文:https://github.com/louzhedong/blog/issues/4 <!DOCTYPE html> <html lang="en"> ...

  3. CentOS 7运维管理笔记(10)----MySQL源码安装

    MySQL可以支持多种平台,如Windows,UNIX,FreeBSD或其他Linux系统.本篇随笔记录在CentOS 7 上使用源码安装MySQL的过程. 1.下载源码 选择使用北理工的镜像文件: ...

  4. Linux系统搭建GitLab---阿里云Centos7搭建Gitlab踩坑

    一.简介 GitLab,是一个利用 Ruby on Rails 开发的开源应用程序,实现一个自托管的Git项目仓库,可通过Web界面进行访问公开的或者私人项目安装. 它拥有与GitHub类似的功能,能 ...

  5. C#链接数据库:SQL Server 2008

    自己学习C#编程,在WinForm编程中,代码测试连接数据库. 现在sqlserver中测试使用的数据库能否以指定的用户名和密码登录. 如图所示,计算机名为administrator,数据库实例为sq ...

  6. PeekMessage&GetMessage

    原文:http://www.cnblogs.com/faceang/archive/2010/05/25/1743757.html PeekMessage与GetMessage的对比相同点:PeekM ...

  7. Android错题集

    在Android学习的过程中,遇到过很多迷之问题,在这里记下以防以后忘记,也可以顺便帮助一下遇到了相同问题的朋友. 1.自定义控件文字大小错误: 在自定义控件中获取的getDimension值为px值 ...

  8. xlwings: Write Excel macro using python instead of VBA

    i want to write Excel macros to deal with the data, but i am not familiar with VBA language. so i de ...

  9. 基于bootstrap的手机界面tab样式调整

    这是调整后手机页面的样子(pc端的样式还是bootstrap原来的样式,没有改变的): html结构为: <div class="tab" role="tabpan ...

  10. Java初学者 编译能通过,但显示有错误,并且不会自动弹出方法的解决方法。

    因为使用了 @Data注解,关于注解的作用尚未深入理解,此处先做一个记录. 解决方法是,添加lombok插件