iOS 实现类似微信的 WebView 导航效果

2016-03-06 本文已影响6999人 yanging

原生的 UIWebView 没有以下几个功能

右滑返回上个网页
导航栏左侧的关闭按钮
网页加载过程中的进度条
显示网页的域名

在 Github 上找到一个项目 RxWebViewController 实现了上面前三个功能。根据需要进行了修改：删除 NJKWebViewProgress，Reveal，添加域名显示，修复返回某些页面闪现当前页的问题。

如何实现右滑返回上个网页

右滑返回上个网页，最简单的做法添加手势处理[self.webView goBack]，但这样没有滑动的慢动作效果，如何在慢速滑动时能同时看到当前网页和上个网页？首先需要维护一个数组，保存每个网页的截屏。每次在shouldStartLoadWithRequest调用snapshotViewAfterScreenUpdates:截取当前网页屏幕，压入数组中，并在需要的时候弹出。

#pragma mark - logic of push and pop snap shot views
-(void)pushCurrentSnapshotViewWithRequest:(NSURLRequest*)request{

    NSURLRequest* lastRequest = (NSURLRequest*)[[self.snapShotsArray lastObject] objectForKey:@"request"];
       
    UIView* currentSnapShotView = [self.webView snapshotViewAfterScreenUpdates:YES];
    [self.snapShotsArray addObject:
     @{
       @"request":request,
       @"snapShotView":currentSnapShotView
       }
     ];
}

我们知道把大象放进冰箱需要三个步骤：打开冰箱，放大象进去，关上冰箱。实现右滑的慢动作，要多一步：

截取当前网页，同时取出上一张网页，将这两个 view 添加到 self.view 中
根据滑动的位置变化，改变两个view的位置
滑动结束，判断是否返回上一页。滑动位置超过屏幕的一半则返回，否则取消返回。
完成取消或者返回的动画，最后删除两个view。

#pragma mark - events handler
-(void)swipePanGestureHandler:(UIPanGestureRecognizer*)panGesture{
    CGPoint translation = [panGesture translationInView:self.webView];
    CGPoint location = [panGesture locationInView:self.webView];
//    NSLog(@"pan x %f,pan y %f",translation.x,translation.y);
    
    if (panGesture.state == UIGestureRecognizerStateBegan) {
        if (location.x <= 50 && translation.x >= 0) {  //开始动画
            [self startPopSnapshotView]; 
        }
    }else if (panGesture.state == UIGestureRecognizerStateCancelled || panGesture.state == UIGestureRecognizerStateEnded){
        [self endPopSnapShotView];
        
    }else if (panGesture.state == UIGestureRecognizerStateChanged){
        [self popSnapShotViewWithPanGestureDistance:translation.x];
    }
}

删除 NJKWebViewProgress

使用 NJKWebViewProgress 的问题是每次打开网页时常常卡在0.1处，会给用户产生一种一打开就卡住的感觉，很不好的体验。查看源码，它的进度条其实就三个值0.1，0.5，0.9。

const float NJKInitialProgressValue = 0.1f;
const float NJKInteractiveProgressValue = 0.5f;
const float NJKFinalProgressValue = 0.9f;

- (void)incrementProgress
{
    float progress = self.progress;
    float maxProgress = _interactive ? NJKFinalProgressValue : NJKInteractiveProgressValue;
    float remainPercent = (float)_loadingCount / (float)_maxLoadCount;
    float increment = (maxProgress - progress) * remainPercent;
    progress += increment;
    progress = fmin(progress, maxProgress);
    [self setProgress:progress];
}

在测试过程中，而大部分时候会停留在0.1处。这个在网不好的时候体验最差，等半天还是在最初的0.1处，不动了。即使Wi-Fi环境下，在0.1处会让用户有种卡住的感觉，只是卡住时间相对较短。为了在打开网页时，就给用户一种快速加载的感觉，改成计时器的实现，匀速增加进度，然后停在接近满格的地方，直至网页加载完毕。这种实现在网络情况好的时候体验非常好，照顾到了大部分用户。因此，在webViewDidStartLoad添加一个计时器：

self.timer = [NSTimer scheduledTimerWithTimeInterval:0.1 target:self selector:@selector(timerCallback) userInfo:nil repeats:YES];

timer 的回调：

- (void)timerCallback {
    if (!self.loading) {
        if (self.progressView.progress >= 1) {
            self.progressView.hidden = true;
            [self.timer invalidate];
        }
        else {
            self.progressView.progress += 0.5;
        }
    }
    else {
        self.progressView.progress += 0.05;
        if (self.progressView.progress >= 0.9) {
            self.progressView.progress = 0.9;
        }
    }
}

微信的进度条并不是匀速增加的，是满满减速增加的，如果网页打开慢最终会停在大约0.95处。为了有更好的体验，可以在超过某个值时让增加的进度变小，比如将0.05变为0.02。

部分网页滑动返回闪现当前页的问题

在webViewDidFinishLoad里删除前一页的截屏，而不是滑动结束即删除。

   [self.prevSnapShotView removeFromSuperview];

加关闭按钮

返回键使用原生

在viewDidLoad中加

self.navigationItem.leftItemsSupplementBackButton = YES;

每次打开新的网页链接，更新按钮：

-(void)updateNavigationItems{
    if (self.webView.canGoBack) {
        
        self.navigationController.interactivePopGestureRecognizer.enabled = NO;
        [self.navigationItem setLeftBarButtonItems:@[self.closeButtonItem] animated:NO];
               
    }else{
        self.navigationController.interactivePopGestureRecognizer.enabled = YES;
        [self.navigationItem setLeftBarButtonItems:nil];
    }
}

自定义返回键

如果使用了 UINavigationController，那么系统自带的附加了一个从屏幕左边缘开始滑动可以实现pop的手势。但是，如果自定义了 navigationItem.leftBarButtonItem，那么这个手势就会失效。所以就没办法右滑返回上级视图。解决方法

在主 ViewController viewDidLoad 加
self.navigationController.interactivePopGestureRecognizer.delegate = self;

这样的话，在主 ViewController 这个手势也可以响应，会导致整个程序页面不响应。实现 UIGestureRecognizerDelegate 方法：

#pragma mark - UIGestureRecognizerDelegate
- (BOOL)gestureRecognizerShouldBegin:(UIGestureRecognizer *)gestureRecognizer {
    if (self.navigationController.viewControllers.count == 1) { //关闭主界面的右滑返回
        return NO;
    } else {
        return YES;
    }
}

-(BOOL)gestureRecognizerShouldBegin:(UIGestureRecognizer *)gestureRecognizer
{
    if (gestureRecognizer == self.interactivePopGestureRecognizer) {
        return (self.currentShowVC == self.topViewController);
    }
    return YES;
}

UIWebView updateNavigationItems修改为

- (void)updateNavigationItems {
    if ([self.webView canGoBack]) {
        if (!self.swipePanGesture.view) {
            [self.webView addGestureRecognizer:self.swipePanGesture];
        }
        
        if (self.navigationItem.leftBarButtonItems == nil || [self.navigationItem.leftBarButtonItems count] < 2) {

            [self.navigationItem setLeftBarButtonItems:@[self.leftButton, self.closeButton] ];
        }
        self.navigationController.interactivePopGestureRecognizer.enabled = NO;
    }
    else {
        self.navigationItem.leftBarButtonItem = self.leftButton;
        self.navigationController.interactivePopGestureRecognizer.enabled = YES;
        [self.webView removeGestureRecognizer:self.swipePanGesture];

    }
}

修改后的代码在这里。改动的代码没有实现自定义返回键，需要的同学可根据如上的代码进行修改。

2016.7.15 修复 timer 引起的内存泄漏问题。

self.timer = [NSTimer scheduledTimerWithTimeInterval:0.1 target:self selector:@selector(timerCallback) userInfo:nil repeats:YES];

苹果的文档：

The object to which to send the message specified by aSelector when the timer fires. The timer maintains a strong reference to target until it (the timer) is invalidated.

故 timer 对 self 有一个强引用，如果在退出 WebViewController 不调用 [self.timer invalidate]，由于循环引用，将导致内测泄漏。

在以下两种情况会产生内存泄漏：

当链接做多次跳转，webViewDidStartLoad被调用一次以上，多次初始化 timer。而之前的 timer 没有被 invalidate，从而对 self 保留了强引用。
页面没加载完全时退出当前 ViewController，[self.timer invalidate]未被调用时。

两处代码需要修改：

-(void)viewDidDisappear:(BOOL)animated{
    [super viewDidDisappear:animated];
    self.webView.delegate = nil;
    if (self.timer) {  
        [self.timer invalidate];
    }
}

- (void)webViewDidStartLoad:(UIWebView *)webView {
    [[UIApplication sharedApplication] setNetworkActivityIndicatorVisible:YES];
    
    self.progressView.progress = 0;
    self.progressView.hidden = false;
    self.loading = YES;
    if (!self.timer) {  // 避免创建多个 timer
        self.timer = [NSTimer scheduledTimerWithTimeInterval:0.1 target:self selector:@selector(timerCallback) userInfo:nil repeats:YES];
    }
}