服务报价 | 域名主机 | 网络营销 | 软件工具| [加入收藏]
 热线电话: #
当前位置: 主页 > 开发教程 > ios开发教程 >

iOS开发WebView进度条

时间:2016-05-11 23:02来源:未知 作者:最模板 点击:
类似Safari的加载进度条,除了比HUD更加简洁,也有更好的用户体验。HUD会让用户觉得等待的时间很长,因为用户注意力集中在一个没有程度变化的东西上面。而进度条是有程度变化的,

类似Safari的加载进度条,除了比HUD更加简洁,也有更好的用户体验。HUD会让用户觉得等待的时间很长,因为用户注意力集中在一个没有程度变化的东西上面。而进度条是有程度变化的,所以会让用户产生加载速度比HUD快的错觉。(本人在公司内调查,的确如此)。所以现在就行动吧!

你可能已经注意到了,是WebView进度条而不是UIWebView,没错这个实现真对的不是UIWebView而是WKWebView,什么你不知道WKWebView?赶紧谷歌或者必应一下吧,这个控件要比UIWebView性能强大并且功能丰富,关于WKWebView的使用不属于本篇介绍的范围,感兴趣的可以自行搜索,后续我也会写相关的文章的。

好,废话不多说,进入正题。WKWebView有一个属性estimatedProgress,就是当前网页加载的进度,所以首先监听这个属性。

WKWebView *webView = [[WKWebView alloc]initWithFrame:[UIScreen mainScreen].bounds];
[webView addObserver:self forKeyPath:@"estimatedProgress" options:NSKeyValueObservingOptionNew context:nil];

接下来,就是弄一个进度条啦,在viewDidLoad方法里面写:

    UIView *progress = [[UIView alloc]initWithFrame:CGRectMake(0, 64, CGRectGetWidth(self.view.frame), 3)];
    progress.backgroundColor = [UIColor clearColor];
    [self.view addSubview:progress];

    CALayer *layer = [CALayer layer];
    layer.frame = CGRectMake(0, 0, 0, 3);
    layer.backgroundColor = COLOR_BAR_TIN.CGColor;
    [progress.layer addSublayer:layer];
    self.progresslayer = layer;

为什么要用CALayer?隐式动画啊。然后就是监听方法啦

- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSString *,id> *)change context:(void *)context{
    if ([keyPath isEqualToString:@"estimatedProgress"]) {
        self.progresslayer.opacity = 1;
        //不要让进度条倒着走...有时候goback会出现这种情况
        if ([change[@"new"] floatValue] < [change[@"old"] floatValue]) {
            return;
        }
        self.progresslayer.frame = CGRectMake(0, 0, self.view.bounds.size.width * [change[@"new"] floatValue], 3);
        if ([change[@"new"] floatValue] == 1) {
            dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(.4 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
                self.progresslayer.opacity = 0;
            });
            dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(.5 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
                self.progresslayer.frame = CGRectMake(0, 0, 0, 3);
            });
        }
    }else{
        [super observeValueForKeyPath:keyPath ofObject:object change:change context:context];
    }
}

拷贝到自己的项目里面就OK啦,是不是很爽呢?最后别忘了取消监听...

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

拿过去给产品show,告诉他你各种深度优化,让网页加载提速了,他肯定会说,「牛逼!」。

(责任编辑:最模板)
顶一下
(1)
25%
踩一下
(3)
75%
------分隔线----------------------------
栏目列表
热点内容