WebKit(进度条)

最新推荐文章于 2022-03-25 14:13:41 发布

阳君

最新推荐文章于 2022-03-25 14:13:41 发布

阅读量1.1k

点赞数

分类专栏： WebKit 文章标签： webkit 进度条 WKWebView

本文链接：https://blog.csdn.net/y550918116j/article/details/50150509

版权

WebKit 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

WebKit(展示Web界面)

WebKit(WKScriptMessageHandler)

WebKit(WKUIDelegate)

WebKit(WKNavigationDelegate)

仿照qq或微信的进度条，我们也为我们的浏览器添加进度条功能。

1 WKWebView相关属性

在WKWebView就有一个关于网页加载进度的属性。

// 网络加载进度，0~1
@property (nonatomic, readonly) double estimatedProgress;

我们所要做的是使用KVO监听这个属性，然后显示到进度条上。

2 创建进度条

这里我们就是使用控件UIProgressView创建一个进度条，你还可以自行设计更精美的进度条。

2.1 强引用进度条

由于我们需要时刻更新进度条的数据，故我们使用强引用，设置进度条。

@property (nonatomic, strong) UIProgressView *progressView; ///< 进度条

2.2 懒加载进度条

我们使用懒加载的方式加载进度条。实现get方法。

- (UIProgressView *)progressView {
    if (_progressView == nil) {
        CGRect rect = CGRectZero;
        rect.origin.y = self.navigationController.navigationBar.frame.origin.y + self.navigationController.navigationBar.frame.size.height;
        rect.size.width = UIScreenWeight;
        rect.size.height = 2;
        _progressView = [[UIProgressView alloc] initWithFrame:rect];
        [_progressView setProgressViewStyle:UIProgressViewStyleDefault]; //设置进度条类型
        [self.view addSubview:_progressView];
    }
    return _progressView;
}

3 KVO实现进度条

3.1 KVO监听

在viewDidLoad()中，我们监听WKWebView的estimatedProgress属性。

- (void)viewDidLoad {
    [super viewDidLoad];
    [self initUIBarButtonItem];
    // 进度条监视
    NSLog(@"%f", self.webView.estimatedProgress); // 防止苹果改变属性名时，项目不报错。故这里先打印。
    [self.webView addObserver:self forKeyPath:@"estimatedProgress" options:NSKeyValueObservingOptionNew context:nil];
    // 刷新界面
    NSURL *url = [NSURL URLWithString:@"https://www.baidu.com"];
    NSURLRequest *urlRequest = [NSURLRequest requestWithURL:url];
    [self.webView loadRequest:urlRequest]; // 加载页面
}

3.2 KVO回调实现

所有类的KVO回调都是实现- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSString *,id> *)change context:(void *)context方法。

添加方法。

#pragma mark - KVO
- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSString *,id> *)change context:(void *)context {
    // 进度条
    if ([@"estimatedProgress" isEqualToString:keyPath]) {
        NSLog(@"%f", self.webView.estimatedProgress);
        [self.progressView setProgress:self.webView.estimatedProgress animated:YES];
        // 初始和终止状态
        if (self.progressView.progress == 0) {
            self.progressView.hidden = NO;
        } else if (self.progressView.progress == 1) {
            // 1秒后隐藏
            dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(1 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
                // 再次判断，防止正在加载时隐藏
                if (self.progressView.progress == 1) {
                    self.progressView.progress = 0;
                    self.progressView.hidden = YES;
                }
            });
        }
    }
}