簡単に使える非同期画像表示-ローディング付き

1 Star2 Stars3 Stars4 Stars5 Stars (まだ評価されていません)
Loading...

今回は以下のライブラリを利用しました。
https://github.com/AFNetworking/AFNetworking

CocoaPodsからのインストールが推奨されていますがフォルダをプロジェクトにコピーしても利用できます。

ドキュメントはこちらです。
http://cocoadocs.org/docsets/AFNetworking/2.0.1/

今回はこちらの非同期画像表示に「UIActivityIndicatorView」にてローディングのクルクルを追加してみたいと思います。
(直接ライブラリに記述しているのでスマートではありませんが。。。)

■導入

#import "AFNetworking.h"
#import "UIImageView+AFNetworking.h"

■利用方法

UIImageView *hoge = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
[hoge setImageWithURL:[NSURL URLWithString:@"http://image-url"]];

現状のロード中はUIImageViewの背景色のみ表示されます。
(別途ローディング画像を追加できるメソッドもあります。)
それではこちらのメソッドにUIActivityIndicatorViewを追加していきます。

■追加
「UIImageView+AFNetworking.m」を編集します。
●変数の宣言


@interface UIImageView (_AFNetworking)
@property (readwrite, nonatomic, strong, setter = af_setImageRequestOperation:) AFHTTPRequestOperation *af_imageRequestOperation;
@property (readwrite, nonatomic, retain, setter = loadingAnim:) UIActivityIndicatorView *loadingAnim;//追加
@end
@implementation UIImageView (_AFNetworking)
@dynamic loadingAnim;//追加

●GetterとSetterの追加

//メソッド自体を追加
-(UIActivityIndicatorView *)loadingAnim{
return (UIActivityIndicatorView *)objc_getAssociatedObject(self, @"loadingAnim");
}
-(void)loadingAnim:(UIActivityIndicatorView *)ai{
objc_setAssociatedObject(self, @"loadingAnim", ai, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
}

●ローディングの追加

- (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
{
[self cancelImageRequestOperation];
UIImage *cachedImage = [[[self class] af_sharedImageCache] cachedImageForRequest:urlRequest];
if (cachedImage) {
if (success) {
success(nil, nil, cachedImage);
} else {
self.image = cachedImage;
}
self.af_imageRequestOperation = nil;
} else {
self.image = placeholderImage;
//**** 追加
if(self.loadingAnim)[self.loadingAnim stopAnimating],[self.loadingAnim removeFromSuperview],self.loadingAnim = nil;
self.loadingAnim = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleGray];
self.loadingAnim.frame = self.frame;
self.loadingAnim.center = CGPointMake(self.frame.size.width/2, self.frame.size.height/2);
[self.loadingAnim.layer setValue:[NSNumber numberWithFloat:1.5f] forKeyPath:@"transform.scale"];
[self addSubview:self.loadingAnim];[self.loadingAnim startAnimating];
//************
__weak __typeof(self)weakSelf = self;
self.af_imageRequestOperation = [[AFHTTPRequestOperation alloc] initWithRequest:urlRequest];
self.af_imageRequestOperation.responseSerializer = self.imageResponseSerializer;
[self.af_imageRequestOperation setCompletionBlockWithSuccess:^(AFHTTPRequestOperation *operation, id responseObject) {
__strong __typeof(weakSelf)strongSelf = weakSelf;
//追加
if(strongSelf.loadingAnim)[strongSelf.loadingAnim stopAnimating],[strongSelf.loadingAnim removeFromSuperview],strongSelf.loadingAnim = nil;
if ([[urlRequest URL] isEqual:[operation.request URL]]) {
if (success) {
success(urlRequest, operation.response, responseObject);
} else if (responseObject) {
strongSelf.image = responseObject;
}
} else {
}
[[[strongSelf class] af_sharedImageCache] cacheImage:responseObject forRequest:urlRequest];
} failure:^(AFHTTPRequestOperation *operation, NSError *error) {
if ([[urlRequest URL] isEqual:[operation.request URL]]) {
//追加
__strong __typeof(weakSelf)strongSelf = weakSelf;
if(strongSelf.loadingAnim)[strongSelf.loadingAnim stopAnimating],[strongSelf.loadingAnim removeFromSuperview],strongSelf.loadingAnim = nil;
if (failure) {
failure(urlRequest, operation.response, error);
}
}
}];
[[[self class] af_sharedImageRequestOperationQueue] addOperation:self.af_imageRequestOperation];
}
}

これでローディングが追加されました!
同じ方法で「UIButton+AFNetworking.m」も変更してあげるとローディング付きボタンが作れますね。

また今回は2系のソースコードとなりますが1系でも若干変更は必要ですが追加可能です。


1 Star2 Stars3 Stars4 Stars5 Stars (まだ評価されていません)
Loading...
      この投稿は審査処理中  | 元のサイトへ