自己定制加载图片并加上转圈圈

最新推荐文章于 2024-04-21 12:24:34 发布

原创最新推荐文章于 2024-04-21 12:24:34 发布 · 6.6k 阅读

1 ·

CC 4.0 BY-SA版权

IOS开发笔记专栏收录该内容

250 篇文章

订阅专栏

本文介绍如何在应用程序中实现自定义图片加载功能，并在加载过程中添加动态转圈圈效果，提供更好的用户体验。详细讲解了图片加载库的集成、自定义加载器的创建以及动画效果的实现步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//
//  HYBLoadImageView.h
//  CloudShopping
//
//  Created by ljy-335 on 14-8-1.
//  Copyright (c) 2014年 uni2uni. All rights reserved.
//

#import <UIKit/UIKit.h>

/*!
 * @brief 加载图片时，给图片加上转圈圈的状态，让用户知道图片未出现是因为网络不给力而造成的而不是没有图片
 * @author huangyibiao
 */
@interface HYBLoadImageView : UIImageView

// default is showLoading
- (id)initWithFrame:(CGRect)frame;
- (id)initWithFrame:(CGRect)frame showLoading:(BOOL)showLoading;
- (void)setImageWithURLString:(NSString *)urlString placeholder:(NSString *)placeholder;

@end

//
//  HYBLoadImageView.m
//  CloudShopping
//
//  Created by ljy-335 on 14-8-1.
//  Copyright (c) 2014年 uni2uni. All rights reserved.
//

#import "HYBLoadImageView.h"
#import "ASIHTTPRequest.h"
#import "HYBHttpRequestManager.h"
#import "NSString+Common.h"
#import "NSString+Encrypt.h"
#import "NSFileManager+File.h"

@interface HYBLoadImageView () <NSURLConnectionDataDelegate> {
    UIImageView             *_networkStateAnimatingView;
    BOOL                    _showLoading;
    NSMutableData           *_downloadData;
    NSURLConnection         *_urlConnection;
}
@property (nonatomic, copy) NSString *url;

@end

@implementation HYBLoadImageView

- (id)initWithFrame:(CGRect)frame {
    return [self initWithFrame:frame showLoading:YES];
}

- (id)initWithFrame:(CGRect)frame showLoading:(BOOL)showLoading {
    if (self = [super initWithFrame:frame]) {
        _showLoading = showLoading;
        self.contentMode = UIViewContentModeScaleAspectFit;
     }
    return self;
}

- (void)setImageWithURLString:(NSString *)urlString placeholder:(NSString *)placeholder {
    self.image = kImageWithName(placeholder);
    
    NSString *url = [NSString stringWithFormat:@"%@", urlString];
    if (url.length == 0) {
        return;
    }

    self.url = url;
    
    if ([[NSFileManager defaultManager] isFileExists:[self imageCachePath]]) {
        if (![[NSFileManager defaultManager] isFile:[self imageCachePath] timeout:24 * 60 * 60]) {
            NSData *data = [[NSData alloc] initWithContentsOfFile:[self imageCachePath]];
            self.image = [UIImage imageWithData:data];
            return;
        }
    }
    
    _downloadData = [[NSMutableData alloc] init];
    NSURLRequest *request = [[NSURLRequest alloc] initWithURL:[NSURL URLWithString:url]];
    _urlConnection = [[NSURLConnection alloc] initWithRequest:request delegate:self startImmediately:YES];
    [[HYBHttpRequestManager sharedRequestManager] addRequest:_urlConnection
                                                     withKey:self.url.md5];

    if (_showLoading) {
        if (_networkStateAnimatingView == nil) {
            CGRect frame = CGRectMake((self.frame.size.width - 22) / 2,
                                      (self.frame.size.height - 22) / 2, 22, 22);
            _networkStateAnimatingView = [HYBUIMaker imageViewWithFrame:frame];
            [self addSubview:_networkStateAnimatingView];
            NSMutableArray *imagesArray = [[NSMutableArray alloc] init];
            for (int i = 1; i < 13; i++) {
                NSString *imgName = [NSString stringWithFormat:@"%d.png", i];
                UIImage *image = kImageWithName(imgName);
                [imagesArray addObject:image];
            }
            _networkStateAnimatingView.animationImages = imagesArray;
            _networkStateAnimatingView.animationRepeatCount = 0;
            _networkStateAnimatingView.animationDuration = 1.0 / (13.0 / 8.0);
        }
        [_networkStateAnimatingView startAnimating];
    }
    return;
}

#pragma mark - NSURLConnectionDataDelegate
- (void)connection:(NSURLConnection *)connection didReceiveResponse:(NSURLResponse *)response {
    [_downloadData setLength:0];
    return;
}

- (void)connectionDidFinishLoading:(NSURLConnection *)connection {
    [[HYBHttpRequestManager sharedRequestManager] removeRequestWithKey:self.url.md5];
    
    self.image = [UIImage imageWithData:_downloadData];
    self.alpha = 0;
    [UIView animateWithDuration:0.5 animations:^{
        self.alpha = 1;
    }];
    [_networkStateAnimatingView stopAnimating];
    [_networkStateAnimatingView removeFromSuperview];
    [_downloadData writeToFile:[self imageCachePath] atomically:YES];
    return;
}

- (void)connection:(NSURLConnection *)connection didFailWithError:(NSError *)error {
    [[HYBHttpRequestManager sharedRequestManager] removeRequestWithKey:self.url.md5];
    [_networkStateAnimatingView stopAnimating];
    [_networkStateAnimatingView removeFromSuperview];
    return;
}

- (void)connection:(NSURLConnection *)connection didReceiveData:(NSData *)data {
    [_downloadData appendData:data];
    return;
}

#pragma mark - 获取图片缓存路径
//
- (NSString *)imageCachePath {
   return [NSString stringWithFormat:@"%@/%@", [NSString imageCachePath], self.url.md5];
}

@end