XLRemoteImageView

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. It has been tested on ios 5 & 6.

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'

Run the command pod install from the Podfile folder directory.

You can also install XLRemoteImage 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];