0C25136F-76CF-4F1A-91BB-6466CE5D45D3.png

二話不說，先丟效果圖????料滥。

最近用hud感覺界面不美觀然眼，而且加載頁面的視覺速度覺得特別慢艾船，就寫了個基于WKWebView的進度條葵腹，分享給大家高每，不多說，直接上干貨

#import <UIKit/UIKit.h>

@interface WWJ_WKWebView : UIView
/**
 *  進度條的顏色
 */
@property (strong, nonatomic) UIColor *progressColor;

- (instancetype)initWithUrl:(NSURL *)url;

@end

#import "WWJ_WKWebView.h"
#import <WebKit/WebKit.h>
#import <objc/runtime.h>
NSString *const progressColorKey = @"progressColorKey";
@interface WWJ_WKWebView ()

@property (strong, nonatomic) CALayer *progresslayer;

@end

@implementation WWJ_WKWebView

- (void)initWithDefault{
    self.progressColor = [UIColor colorWithRed:22.f / 255.f green:126.f / 255.f blue:251.f / 255.f alpha:.8];;
}

- (void)initWithProgressView{
    UIView *progress = [[UIView alloc]initWithFrame:CGRectMake(0, 64, CGRectGetWidth(self.frame), 3)];
    progress.backgroundColor = [UIColor clearColor];
    [self addSubview:progress];
    CALayer *layer = [CALayer layer];
    layer.frame = CGRectMake(0, 0, 0, 3);
    layer.backgroundColor = self.progressColor.CGColor;
    [progress.layer addSublayer:layer];
    self.progresslayer = layer;
}

- (UIColor *)progressColor{
    return objc_getAssociatedObject(self, &progressColorKey);
}

- (void)setProgressColor:(UIColor *)progressColor{
    objc_setAssociatedObject(self, &progressColorKey, progressColor, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
    [self initWithProgressView];
}

- (instancetype)initWithUrl:(NSURL *)url{
    self = [super initWithFrame:[UIScreen mainScreen].bounds];
    if (self) {
        WKWebView *webView = [[WKWebView alloc]initWithFrame:[UIScreen mainScreen].bounds];
        //添加觀察者,觀察wkwebview的estimatedProgress屬性
        [webView addObserver:self forKeyPath:@"estimatedProgress" options:NSKeyValueObservingOptionNew context:nil];
        [self addSubview:webView];
        [webView loadRequest:[NSURLRequest requestWithURL:url]];
        [self initWithDefault];
        [self initWithProgressView];
    }
    return self;
}

- (void)dealloc{
    [(WKWebView *)self removeObserver:self forKeyPath:@"estimatedProgress"];
}

- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSString *,id> *)change context:(void *)context{
    if ([keyPath isEqualToString:@"estimatedProgress"]) {
        self.progresslayer.opacity = 1;
        //不要讓進度條倒著走...有時候goback會出現(xiàn)這種情況
        if ([change[@"new"] floatValue] < [change[@"old"] floatValue]) {
            return;
        }
        self.progresslayer.frame = CGRectMake(0, 0, self.bounds.size.width * [change[@"new"] floatValue], 3);
        if ([change[@"new"] floatValue] == 1) {
            dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(.4 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
                self.progresslayer.opacity = 0;
            });
            dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(.5 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
                self.progresslayer.frame = CGRectMake(0, 0, 0, 3);
            });
        }
    }else{
        [super observeValueForKeyPath:keyPath ofObject:object change:change context:context];
    }
}

@end

之后調(diào)用就十分簡單了

WWJ_WKWebView *webView = [[WWJ_WKWebView alloc] initWithUrl:[NSURL URLWithString:@"http://shaozi.info"]];
    webView.progressColor = [UIColor orangeColor];
    [self.view addSubview:webView];

最后丟一張效果的gif

progress.gif