原生的 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];
}
}
