為了項(xiàng)目的敏捷性和簡(jiǎn)單性,現(xiàn)在的app常常會(huì)嵌入不少的H5頁(yè)面,而如何優(yōu)雅的顯示這些web頁(yè)面呢,我這里參照微信顯示web頁(yè)面的方式,做了一個(gè)導(dǎo)航欄下的加載進(jìn)度條
我這里面提供兩種方式捺典，一個(gè)是github上開源的類庫(kù)干旁，獲取真的加載進(jìn)度，但是webview的加載時(shí)開始的時(shí)候比較慢愤惰，后來(lái)的進(jìn)度一下子就完成了包归，個(gè)人感覺這樣的效果體驗(yàn)不太好锨推，所以這里我采用的是假的加載進(jìn)度，讓用戶感覺在一直的加載
代碼如下：
建立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) {
//頁(yè)面加載完后開始加速加速進(jìn)度條
self.strokeEnd +=0.02;
}else{
//頁(yè)面沒有加載完是慢慢的加載
if (self.strokeEnd <= 0.8) {
self.strokeEnd += 0.005;
}
}
//進(jìn)度條加載完后移除掉
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
使用起來(lái)比較簡(jiǎn)單公壤，代碼如下：
#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
下面我來(lái)簡(jiǎn)單介紹一下我的思想换可，給webview添加一個(gè)進(jìn)度可以很大程度上條高用戶的體驗(yàn)，如上前面所說(shuō)厦幅，通過(guò)獲取webview的真實(shí)進(jìn)度沾鳄，webview剛開始加載的慢后來(lái)又太快，用戶體驗(yàn)也不是太好确憨，所以這里我自己模擬一個(gè)進(jìn)度條來(lái)加載译荞。
在webview沒有加載完之前，是通過(guò)定時(shí)器模擬進(jìn)度慢慢加載的等webview加載完后再快速加載休弃，讓用戶感覺到webview在一直的加載吞歼，提高用戶體驗(yàn)
本文的源碼下載地址：https://github.com/xiaoshunliang/XSQWebProgressViewDemo
這個(gè)是開源的根據(jù)實(shí)際進(jìn)度加載進(jìn)度的，可搜一下github上的NJKWebViewProgress
