在上一篇博文我们已经讲了UIWebView的基础知识,这篇博文主要讲的知识点包含如下:
UIWebView设置
清空浏览器的cookies;
清除UIWebView的缓存;
网页刷新;
网页上一页和下一页;
网页加载的进度条,效果如qq和微信的网页加载进度条。
1 准备工作
前期的项目搭建和上一篇博文一样,只是在UINavigationController添加三个按钮。运行后的界面如图所示:
在图中有三个按钮,从左到右分别是刷新、后退和前进。
这里我使用的控制器为AdvancedVC。
#import"AdvancedVC.h"
@interfaceAdvancedVC()
@property(weak,nonatomic)IBOutletUIWebView*webView;///< UIWebView
@end
@implementationAdvancedVC
- (void)viewDidLoad {
[superviewDidLoad];
// Do any additional setup after loading the view.
}
@end
1.2 显示网页
我们使用大家都熟悉的百度做测试,加载网页“https://www.baidu.com”。
- (void)viewDidLoad {
[superviewDidLoad];
// Do any additional setup after loading the view.
NSURL*url = [NSURLURLWithString:@"https://www.baidu.com"];
NSURLRequest*urlRequest = [NSURLRequestrequestWithURL:url];
// url的位置
[self.webViewloadRequest:urlRequest];
// 加载页面
}
运行项目后,大家会发现一个错误。错误信息为
2.2 页面滚动弹跳
上面说的,你可以滑动到顶部看到背景色,这里有一个弹跳效果。也就是你看见背景色,松开手指看到的效果。这里你可以禁用这种效果。
self.webView.scrollView.bounces= NO;
2.3 缩放
默认情况下UIWebView加载HTML页面后,会以页面的原始大小进行显示,亦即如果页面的大小超出UIWebView视口大小,UIWebView会出现滚动效果,而且用户只能通过滚动页面来查看不同区域的内容,不能使用手指的捏合手势来放大或缩小页面。通过设置
self.webView.scalesPageToFit=YES;
UIWebView可以缩放HTML页面来适配其视口大小,从而达到整屏显示内容的效果,并且用户可以用捏合动作来放大或缩小页面来查看内容。
3 清空cookies
清空cookies使用到了NSHTTPCookieStorage类,这个类主要用于管理网络中的cookies。
在viewDidLoad方法中添加如下代码,这里我们清空了所有cookies。
4 清除缓存
清除UIWebView的缓存使用了NSURLCache对象,在这里我们使用removeAllCachedResponses清楚所有缓存。
5 网页刷新
在UIWebView有下列属性和方法。
、@property (nonatomic, readonly, getter=isLoading) BOOL loading、:是否正在刷新界面
- (void)reload:刷新
- (void)stopLoading:停止刷新
在AdvancedVC添加如下代码
6 网页上一页和下一页
在UIWebView有下列方法:
@property (nonatomic, readonly, getter=canGoBack) BOOL canGoBack:能否去上一页;
@property (nonatomic, readonly, getter=canGoForward) BOOL canGoForward:能否去下一页;
- (void)goBack:去上一页;
- (void)goForward:去下一页。
在AdvancedVC添加如下代码
7 进度条
打开qq的网页浏览,发现在UINavigationController有一个很炫的进度条,初步分析使用的是UIProgressView控件,这里我们也使用这种控件,只要实现进度条的动画效果即可。如果你想实现更炫的效果,请自行研究UIProgressView。
为了实现进度条,需要在界面中加一个UIProgressView控件。
在storyboard拉一个UIProgressView放在view上,并设置相关约束。搭建好后效果如图
然后将控件指向AdvancedVC,并实现UIVWebView的代理,完成后代码如下。
7.3 进度条实现
运行项目后,我们在浏览器随意操作。发现,有的页面输出信息多,有的页面输出信息少。
对比发现有的页面是请求多个url然后展示,而有的页面只请求一个url页面。
这就给我们实现进度条的机会,我们可以制作一个简单的进度条。由于webViewDidStartLoad和webViewDidFinishLoad是一一对应的,而且一个页面是并发的请求webViewDidStartLoad,然后再一个一个回调webViewDidFinishLoad。
通过这里你就发现了,只要完成的请求除以发出的请求就是进度条的百分比。
添加两个属性_startLoadingCount和_finishLoadingCount分别记录需加载和完成的请求,然后相除则完美实现进度条。
这里我只展示核心代码:
运行项目,进度条完美运行,是不是感觉很爽,你也会制作很炫的进度条了。但是这里我们制作的进度条是伪进度条,比较粗糙,虽然用户发现不了,但是我们自己还是知道。在UIWebView高级篇我会为大家介绍精度更高的进度条。
版权所有