XLRemoteImageView

Purpose

UIImageView categories that show a progress indicator while the image is being downloaded. It uses the same NSCache and NSOperation objects used in UIImageView+AFNetworking category. It looks like Instagram loading indicator.

Installation

The easiest way to integrate XLRemoteImageView in your projects is via CocoaPods.

Add the following line in the project's Podfile file: pod 'XLRemoteImageView', '~> 2.0'
Run the command pod install from the Podfile folder directory.

You can also install XLRemoteImageView manually. We don't recommend this approach. The source files you will need are in XLRemoteImageView/XLRemoteImageView/XL folder.

Example

Take a look at ViewController.m in the example project for details on how to use this component. In short, though:

// show a circle progress indicator
[self.imageView setImageWithProgressIndicatorAndURL:[NSURL URLWithString:url]];

UIImageView+XLProgressIndicator.h adds other helper methods:

// same behaviour as previous method showing a placeholder image while the download is in progress.
-(void)setImageWithProgressIndicatorAndURL:(NSURL *)url
                          placeholderImage:(UIImage *)placeholderImage

and

-(void)setImageWithProgressIndicatorAndURL:(NSURL *)url
                          placeholderImage:(UIImage *)placeholderImage
                       imageDidAppearBlock:(void (^)(UIImageView *))imageDidAppearBlock

The above methods use UIImageView+XLNetworking category, that let you know the image download progress.

- (void)setImageWithURLRequest:(NSURLRequest *)urlRequest
              placeholderImage:(UIImage *)placeholderImage
                       success:(void (^)(NSURLRequest *request, NSHTTPURLResponse *response, UIImage *image))success
                       failure:(void (^)(NSURLRequest *request, NSHTTPURLResponse *response, NSError *error))failure
         downloadProgressBlock:(void (^)(NSUInteger bytesRead, long long totalBytesRead, long long totalBytesExpectedToRead))downloadProgressBlock;

Appearance customization

// progress color, yellow color in the example image.
[[XLCircleProgressIndicator appearance] setStrokeProgressColor:[UIColor colorWithHex:COLOR_PROGRESSBAR_PROGRESS]];

// remaining color, gray color in the example image
[[XLCircleProgressIndicator appearance] setStrokeRemainingColor:[UIColor colorWithHex:COLOR_PROGRESSBAR_BACKGROUND]];

//In order to set up the circle stroke's width you can choose between these 2 ways.
[[XLCircleProgressIndicator appearance] setStrokeWidth:3.0f];

//or 

//the width of the circle stroke gets calculated based on the UIImageView size,
//[[XLCircleProgressIndicator appearance] setStrokeWidthRatio:0.15f];