为了项目的敏捷性和简单性,现在的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
