iOS-仿支付宝加载web网页添加进度条

目前市场上APP常会嵌入不少的h5页面，参照支付宝显示web页面的方式, 做了一个导航栏下的加载进度条. 因为项目最低支持iOS7,所以不能使用WKWebView来加载网页, 只能使用 UIWebView, 但是查看 UIWebView的API, 并没有代理或是通知告诉我们webView加载了多少, 所以这个进度条我决定用模拟进度-俗称假进度(虚拟的方式来做,就是假装知道加载了多少).

一、压缩文件及项目截图

压缩文件截图:

项目截图:

二、代码实现

实现原理：
自定义一个UIView的加载进度条，添加到Nav标题栏下方，提供两个方法：(开始加载/结束加载), 在网页加载适当的时候使用.

Step1. 自定义加载进度条WebviewProgressLine:

1、startLoadingAnimation 开始加载

开始加载，先动画模拟一个0.4s的加载，加载宽度为0.6倍屏幕宽度，动画结束，接着0.4s实现，共0.8倍的屏幕宽度。

1. - (void)startLoadingAnimation {
2. self.hidden = NO;
3. self.width = 0.0;
5. __weak UIView *weakSelf = self;
6. [UIView animateWithDuration:0.4 animations:^{
7. weakSelf.width = UI_View_Width * 0.6;
8. } completion:^(BOOL finished) {
9. [UIView animateWithDuration:0.4 animations:^{
10. weakSelf.width = UI_View_Width * 0.8;
11. }];
12. }];
13. }

2、endLoadingAnimation 结束加载

结束动画，动画模拟1.0倍数的屏幕宽度，实现全部加载完成，并最后隐藏进度条。

1. - (void)endLoadingAnimation {
2. __weak UIView *weakSelf = self;
3. [UIView animateWithDuration:0.2 animations:^{
4. weakSelf.width = UI_View_Width;
5. } completion:^(BOOL finished) {
6. weakSelf.hidden = YES;
7. }];
8. }

3、自定义线条颜色

1. // 进度条颜色
2. @property (nonatomic,strong) UIColor *lineColor;

1. - (void)setLineColor:(UIColor *)lineColor {
2. _lineColor = lineColor;
4. self.backgroundColor = lineColor;
5. }

Step2. web页面使用进度条方法：

1、初始化进度条

1. self.progressLine = [[WebviewProgressLine alloc] initWithFrame:CGRectMake(0, 64, UI_View_Width, 3)];
2. self.progressLine.lineColor = [UIColor blueColor];
3. [self.view addSubview:self.progressLine];

2、初始化网页并使用代理

懒加载:

1. - (UIWebView *)web {
2. if (!_web) {
3. UIWebView *web = [[UIWebView alloc] initWithFrame:self.view.bounds];
4. // UIWebView加载过程中，在页面没有加载完毕前，会显示一片空白。为解决这个问题，方法如下：让UIWebView背景透明。
5. web.backgroundColor = [UIColor clearColor];
6. web.opaque = NO;
7. [web setBackgroundColor:[UIColor colorWithPatternImage:[UIImage imageNamed:@"webbg.png"]]];
8. [self.view addSubview:web];
10. _web = web;
11. }
12. return _web;
13. }

获取网址并加载:

1. NSURL *url = [NSURL URLWithString:@"https://www.baidu.com"];
2. [self.web loadRequest:[NSURLRequest requestWithURL:url]];
3. self.web.delegate = self;

使用代理UIWebViewDelegate:

1. // 网页开始加载
2. - (void)webViewDidStartLoad:(UIWebView *)webView {
3. // [MBProgressHUD showMessage:@"稍等,玩命加载中"];
5. [self.progressLine startLoadingAnimation];
6. }
8. // 网页完成加载
9. - (void)webViewDidFinishLoad:(UIWebView *)webView {
10. // [MBProgressHUD hideHUD];
12. [self.progressLine endLoadingAnimation];
13. }
15. // 网页加载失败
16. - (void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error {
17. // [MBProgressHUD hideHUD];
19. [self.progressLine endLoadingAnimation];
20. }

三、运行效果

这时候测试一下效果图:

四、其他补充

可根据自己项目自定义进度条颜色, 具体可参考代码, 项目则能够直接运行!

如需看详情版，请到这里下载！