IOS 自訂控制項之－顯示下載過程的ImageView

標籤：ios   nrlsession   block   imageview   自訂   

原創Blog，轉載請註明出處
blog.csdn.net/hello_hwc

前言：這個系列的目的是為了提供一些思路，在Demo的過程中讓讀者學會一些自訂控制項的思路，所以不適宜太複雜。當然，僅僅是拋磚引玉。這個控制項我會上傳Github，由於最近一直在搞IOT的應用，所以沒時間把進行完善，有時間了我會把這個控制項完善了，讓讀者那去直接就可以用。
完善好了我會更新下部落格

Demo效果，支援兩種顯示過程的方式，沿著border繪製一圈和frame逐漸填充。

思路

• NSURLSessionDataTask下載圖片
• 用Layer的方式展示下載的過程

介面設計
標頭檔原始碼

#import <UIKit/UIKit.h>typedef NS_ENUM(NSUInteger, WCProgressType) {    WCProgressTypeBorder,    WCProgressTypeFrame,};typedef void(^WCCompeltionBlock)(UIImage * image,NSError *error);@interface WCProgressImageview : UIImageView@property (nonatomic,getter=currentProgress,readonly)CGFloat progress;@property (nonatomic,strong) NSString * url;@property (nonatomic)WCProgressType type;-(void)resume;-(instancetype)initWithFrame:(CGRect)frame ImageURL:(NSString *)url Type:(WCProgressType)type;-(instancetype)initWithFrame:(CGRect)frame ImageURL:(NSString *)url Type:(WCProgressType)type ComepetionHander:(WCCompeltionBlock)block;@end

1.由於這個要支援兩種類型，所以定義枚舉代表分別為兩種類型
2.定義block來給使用者非同步傳遞imageview載入完成的時間
3.唯讀屬性progress獲得當前下載的進度
4.url和type分別代表image的url和進度條的類型
5.提供兩個API來初始化對象

實現

@interface  WCProgressImageview()<NSURLSessionDelegate,NSURLSessionDataDelegate>@property (strong,nonatomic)NSMutableData * buffer;@property (nonatomic)NSUInteger expectlength;@property (nonatomic,strong)CALayer * frameProgressLayer;@property (nonatomic,strong)CAShapeLayer * borderProgressLayer;@property (strong,nonatomic)NSURLSessionDataTask * dataTask;@property (strong,nonatomic) NSURLSession * session;@property (nonatomic,strong) WCCompeltionBlock completionBlock;@property (nonatomic,getter=currentProgress,readwrite)CGFloat progress;@end@implementation WCProgressImageview#pragma mark -  property-(NSMutableData *)buffer{    if (!_buffer) {        _buffer = [[NSMutableData alloc] init];    }    return _buffer;}-(CALayer *)frameProgressLayer{    if (!_frameProgressLayer) {        _frameProgressLayer = [CALayer layer];        _frameProgressLayer.backgroundColor = [UIColor lightGrayColor].CGColor;        _frameProgressLayer.bounds = CGRectMake(0,0,0,CGRectGetHeight(self.frame));        _frameProgressLayer.anchorPoint = CGPointMake(0,0);        _frameProgressLayer.position = CGPointMake(0,0);    }    return _frameProgressLayer;}-(CAShapeLayer *)borderProgressLayer{    if (!_borderProgressLayer) {        _borderProgressLayer = [CAShapeLayer layer];        _borderProgressLayer.bounds = CGRectMake(0,0,CGRectGetWidth(self.frame),CGRectGetHeight(self.frame));        _borderProgressLayer.anchorPoint = CGPointMake(0,0);        _borderProgressLayer.position = CGPointMake(0,0);        _borderProgressLayer.fillColor = [UIColor clearColor].CGColor;        _borderProgressLayer.lineWidth = 3.0;        _borderProgressLayer.path = [UIBezierPath bezierPathWithRoundedRect:_borderProgressLayer.bounds cornerRadius:10.0].CGPath;        _borderProgressLayer.strokeColor = [UIColor blueColor].CGColor;        _borderProgressLayer.strokeStart = 0.0;        _borderProgressLayer.strokeEnd = 0.0;    }    return _borderProgressLayer;}-(CGPathRef)createPathWith:(CGPoint *)center Radius:(CGFloat)radius Progress:(CGFloat)progress{    CGMutablePathRef mutablepath = CGPathCreateMutable();    return mutablepath;}-(NSURLSession *)session{    if (!_session) {        _session = [NSURLSession sessionWithConfiguration:[NSURLSessionConfiguration defaultSessionConfiguration]                                                 delegate:self                                            delegateQueue:[NSOperationQueue mainQueue]];    }    return _session;}-(void)setUrl:(NSString *)url{    self.progress = 0;    self.dataTask = [self.session dataTaskWithURL:[NSURL URLWithString:url]];}#pragma mark - API-(instancetype)initWithFrame:(CGRect)frame ImageURL:(NSString *)url Type:(WCProgressType)type{    if (self = [super initWithFrame:frame]) {        self.url = url;        self.type = type;        self.progress = 0;    }    return self;}-(instancetype)initWithFrame:(CGRect)frame ImageURL:(NSString *)url Type:(WCProgressType)type ComepetionHander:(WCCompeltionBlock)block{    if (self = [super initWithFrame:frame]) {        self.url = url;        self.completionBlock = block;        self.type = type;        self.progress = 0;    }    return self;}-(void)resume{    [self.dataTask resume];    switch (self.type) {        case WCProgressTypeFrame:            [self.layer addSublayer:self.frameProgressLayer];            break;        case WCProgressTypeBorder:            [self.layer addSublayer:self.borderProgressLayer];            break;        default:            break;    }}#pragma mark - URLSessionDelegate-(void)URLSession:(NSURLSession *)session dataTask:(NSURLSessionDataTask *)dataTask didReceiveResponse:(NSURLResponse *)response completionHandler:(void (^)(NSURLSessionResponseDisposition))completionHandler{    NSHTTPURLResponse * httpresponse = (NSHTTPURLResponse *)response;    self.expectlength = [httpresponse expectedContentLength];    completionHandler(NSURLSessionResponseAllow);}-(void)URLSession:(NSURLSession *)session dataTask:(NSURLSessionDataTask *)dataTask didReceiveData:(NSData *)data{    [self.buffer appendData:data];    self.progress = self.buffer.length/(double)self.expectlength;    NSLog(@"%f",self.progress);    if (self.expectlength > 0) {        switch (self.type) {            case WCProgressTypeFrame:                self.frameProgressLayer.bounds = CGRectMake(0,0,CGRectGetWidth(self.frame) * self.progress,CGRectGetHeight(self.frame));                break;            case WCProgressTypeBorder:                self.borderProgressLayer.strokeEnd = self.progress;                break;            default:                break;        }    }}-(void)URLSession:(NSURLSession *)session task:(NSURLSessionTask *)task didCompleteWithError:(NSError *)error{    [self.frameProgressLayer removeFromSuperlayer];    self.frameProgressLayer = nil;    [self.borderProgressLayer removeFromSuperlayer];    self.borderProgressLayer = nil;    if (!error) {        UIImage * image = [UIImage imageWithData:self.buffer];        self.image = image;        if (self.completionBlock) {            self.completionBlock(image,error);        }    }else    {        self.completionBlock(nil,error);    }    [self clean];}-(void)clean{    self.buffer = nil;    [self.session invalidateAndCancel];    self.session = nil;}@end

講解
1.屬性採用惰性初始化
2.用CAShape Layer的StrokeEnd屬性來代表進度
3.用NSURLSessionDelegate和NSURLSessionDataDelegate來擷取資料和進度。

使用

 self.imageview1 = [[WCProgressImageview alloc] initWithFrame:CGRectMake(40,40,300,200)                                                        ImageURL:@"http://f12.topit.me/o129/10129120625790e866.jpg"                                                            Type:WCProgressTypeBorder                                                ComepetionHander:^(UIImage *image, NSError *error) {                                                }];    [self.imageview1 resume];    [self.view addSubview:self.imageview1];

IOS 自訂控制項之－顯示下載過程的ImageView