登录 立即注册
金钱:

Code4App-iOS开发-iOS 开源代码库-iOS代码实例搜索-iOS特效示例-iOS代码例子下载-Code4App.com

一句话完成类似微信进度条读取

[复制链接]
来自: keanlove 分类: iOS精品源码 上传时间: 2016-12-15 12:40:36
Tag:网页 微信 进度条 Progress Layer

项目介绍:

模仿微信web页面加载进度条的读取,WKWeb和UIWeb都可以适用, 加载成功和加载失败都显示出了不同的进度条在在
在原作者的基础上做的修改,原作者详解:http://www.jianshu.com/p/b32b9fb6cb0a 感谢原作者的分享
https://github.com/keanlove/YJWebProgressLayer 下载也行,不喜勿喷

简介

为了项目的敏捷性和简单性,现在的app常常会嵌入不少的H5页面,而如何优雅的显示这些web页面呢,我这里参照微信显示web页面的方式,做了一个导航栏下的加载进度条.因为项目最低支持iOS7,所以不能使用WKWebView来加载网页,只能使用 UIWebView,查看 UIWebView的API可以发现,并没有代理或是通知告诉我们webView加载了多少,所以这个进度条我决定用虚拟的方式来做,就是假装知道加载了多少.

加载WebView的控制器WYWebController

@interface WYWebController : UIViewController

@property (nonatomic, copy) NSString *url;

@end


#import "WLWebController.h"
#import "WLWebProgressLayer.h"
#import "UIView+Frame.h"

@interface WLWebController ()<UIWebViewDelegate>

@end

@implementation WLWebController
{
    UIWebView *_webView;

    WLWebProgressLayer *_progressLayer; ///< 网页加载进度条
}

- (void)viewDidLoad {
    [super viewDidLoad];

    self.view.backgroundColor = [UIColor whiteColor];
    [self setupUI];
}

- (void)setupUI {
    _webView = [[UIWebView alloc] initWithFrame:self.view.bounds];
    _webView.delegate = self;
    NSURLRequest *request = [NSURLRequest requestWithURL:[NSURL URLWithString:self.url]];
    [_webView loadRequest:request];

    _webView.backgroundColor = [UIColor whiteColor];

    _progressLayer = [WLWebProgressLayer new];
    _progressLayer.frame = CGRectMake(0, 42, SCREEN_WIDTH, 2);

    [self.navigationController.navigationBar.layer addSublayer:_progressLayer];
    [self.view addSubview:_webView];
}

#pragma mark - UIWebViewDelegate
/// 网页开始加载
- (void)webViewDidStartLoad:(UIWebView *)webView {
    [_progressLayer startLoad];
}

/// 网页完成加载
- (void)webViewDidFinishLoad:(UIWebView *)webView {
    [_progressLayer finishedLoad];

// 获取h5的标题
    self.title = [webView stringByEvaluatingJavaScriptFromString:@"document.title"];

}

/// 网页加载失败
- (void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error {
    [_progressLayer finishedLoad];
}

- (void)dealloc {

    [_progressLayer closeTimer];
    [_progressLayer removeFromSuperlayer];
    _progressLayer = nil;
    NSLog(@"i am dealloc");
}

@end

进度条WYWebProgressLayer.h

#define SCREEN_WIDTH [UIScreen mainScreen].bounds.size.width

@interface WYWebProgressLayer : CAShapeLayer

- (void)finishedLoad;
- (void)startLoad;

- (void)closeTimer;

@end

WYWebProgressLayer.m这个类主要继承自CAShapeLayer,这里我主要想要使用CAShaperLayer的strokeStart[默认0]和strokeEnd[默认1]这两个属性来对进度条进行渲染,使用定时器更改strokeEnd的值使其看起来就像在一点一点的加载一样.

#import "WYWebProgressLayer.h"
#import "NSTimer+addition.h"

static NSTimeInterval const kFastTimeInterval = 0.003;

@implementation WYWebProgressLayer {
    CAShapeLayer *_layer;

    NSTimer *_timer;
    CGFloat _plusWidth; ///< 增加点
}

- (instancetype)init {
    if (self = [super init]) {
        [self initialize];
    }
    return self;
}

- (void)initialize {
    self.lineWidth = 2;
    self.strokeColor = [UIColor greenColor].CGColor;

    _timer = [NSTimer scheduledTimerWithTimeInterval:kFastTimeInterval target:self selector:@selector(pathChanged:) userInfo:nil repeats:YES];
    [_timer pause];

    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:CGPointMake(0, 2)];
    [path addLineToPoint:CGPointMake(SCREEN_WIDTH, 2)];

    self.path = path.CGPath;
    self.strokeEnd = 0;
    _plusWidth = 0.01;
}

- (void)pathChanged:(NSTimer *)timer {
    self.strokeEnd += _plusWidth;

    if (self.strokeEnd > 0.8) {
        _plusWidth = 0.002;
    }
}

- (void)startLoad {
    [_timer resumeWithTimeInterval:kFastTimeInterval];
}

- (void)finishedLoad {
    [self closeTimer];

    self.strokeEnd = 1.0;
    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; 
}

Demo:https://github.com/wangyansnow/WYWebViewDemo

如何放到项目中用
只需要下载demo,然后把demo中的整个web文件夹拖入到项目中,使用方式例:

WYWebController *webVC = [WYWebController new];
webVC.url = @"https://www.baidu.com";
[self.navigationController pushViewController:webVC animated:YES];

code4app

相关源码推荐:

我来说两句
*滑动验证:
所有评论(177)
我强国强 2016-12-16 13:24:08
精华内容,楼主V5!
回复
code4app热心网友 2016-12-16 14:20:25
感谢分享,Code4App有你更精彩:)
回复
code4app热心网友 2016-12-17 11:48:09
正需要啊,感谢楼主无私分享!
回复
code4app热心网友 2016-12-17 11:53:45
我只是路过打酱油的。
回复
code4app热心网友 2016-12-17 14:03:04
我只是路过打酱油的。
回复
code4app热心网友 2016-12-17 21:02:14
正需要啊,感谢楼主无私分享!
回复
w_326 2016-12-18 14:57:20
感谢分享,Code4App有你更精彩:)
回复
leijunzhe88 2016-12-18 20:51:07
强烈支持楼主ing……
回复
美君君 2016-12-18 23:13:06
虽不明,但觉厉!
回复
code4app热心网友 2016-12-19 09:45:51
强烈支持楼主ing……
回复
提取码:  下载次数:197 状态:已购或VIP 售价:0(原价:10)金钱 下载权限:初级码农 
11652 2 197
联系我们
首页/微信公众账号投稿

帖子代码编辑/版权问题

QQ:435399051,742864542

如何获得代码达人称号?

代码贡献英雄榜
用户名 下载数
通过邮件订阅最新 Code4App 信息
上一条 /4 下一条
联系我们
关闭
合作电话:
13802416937
Email:
435399051@qq.com
商务市场合作/投稿
问题反馈及帮助
联系我们

广告投放| Github|申请友链|手机版|Code4App ( 粤ICP备15117877号-1 )

快速回复 返回顶部 返回列表