在項目中為了提升用戶體驗增显，需要在2G/3G/4G網(wǎng)絡情況下耙替，提供一個無圖模式（省流量模式）。我們的APP需求是：在用戶開啟了無圖模式之后什往，如果當前網(wǎng)絡是2G/3G/4G網(wǎng)絡，則項目中加載圖片的地方需要顯示“點擊加載圖片”慌闭，當用戶確認點擊的情況下别威，才去加載圖片。
無圖模式下的判斷邏輯如下：
- 如果目標圖片之前已經(jīng)加載過了驴剔，則顯示已經(jīng)加載過的圖片省古；
- 如果目標圖片之前沒有加載過，則只顯示一個placeholderImage丧失，并且顯示文案“點擊加載圖片”豺妓，當用戶確認點擊之后，再加載目標圖片。
幾點說明：
- 為了方便管理圖片以及判斷圖片是否已經(jīng)加載過科侈，這里使用第三方庫SDWebImage來管理载佳。
- 網(wǎng)絡情況判斷推薦使用Reachability第三方庫。
實現(xiàn)思路：
因為項目中之前已經(jīng)使用了SDWebImage對圖片進行管理臀栈，為了快速實現(xiàn)這個功能，這里創(chuàng)建了UIButton和UIImageView的擴展挠乳，并在擴展中新增了網(wǎng)絡加載圖片的方法权薯。當開啟了無圖模式并且目標圖片沒有加載過時，將一個相同大小的UIButton---coverButton加在當前視圖（UIButton或UIImageView）上睡扬，coverButton負責顯示“點擊加載圖片”以及點擊事件響應盟蚣。
下面直接上代碼(以UIButton為例)：
#import "UIButton+YLNoImageModel.h"
#import "UIButton+WebCache.h"
#import "objc/runtime.h"
#import "UIImage+YLResize.h"
static void *kCoverButtonTag = &kCoverButtonTag; ///< 覆蓋按鈕，點擊加載
static void *kLoadImageUrl = &kLoadImageUrl; ///< 圖片url
static void *kHolderImage = &kHolderImage; ///< 占位圖片
@implementation UIButton (YLNoImageModel)
-(void)yl_setNoImageModelWithUrl:(NSURL *)url placeHolderImage:(UIImage *)holder
{
UIImage *holderImg = [holder resizeToSize:self.bounds.size];
if(kYLNoImageModeIsAvaliable){
//開啟了無圖模式
//異步判斷是否已經(jīng)加載過了當前圖片
[[SDWebImageManager sharedManager]cachedImageExistsForURL:url completion:^(BOOL isInCache) {
if(isInCache){
//如果已經(jīng)加載過了卖怜，直接加載
if(self.coverButton){
[self.coverButton removeFromSuperview];
}
[self sd_setImageWithURL:url forState:UIControlStateNormal
placeholderImage:holderImg];
}else{
//如果沒有加載過屎开，則顯示點擊查看顯示圖片
[self setImage:holderImg forState:UIControlStateNormal];
self.loadImageUrl = url;
self.holderImage = holderImg;
if(!self.coverButton){
self.coverButton = [UIButton buttonWithType:UIButtonTypeCustom];
self.coverButton.titleLabel.font = [UIFont systemFontOfSize:20];
[self.coverButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
[self.coverButton setTitle:@"點擊加載圖片" forState:UIControlStateNormal];
self.coverButton.contentMode = UIViewContentModeCenter;
}
[self.coverButton addTarget:self action:@selector(coverButtonAction) forControlEvents:UIControlEventTouchUpInside];
self.coverButton.frame = self.bounds;
[self addSubview:self.coverButton];
}
}];
}else{
//未開啟無圖模式
if(self.coverButton){
[self.coverButton removeFromSuperview];
}
[self sd_setImageWithURL:url forState:UIControlStateNormal placeholderImage:holderImg];
}
}
-(UIButton *)coverButton
{
return (UIButton *)objc_getAssociatedObject(self, kCoverButtonTag);
}
-(void)setCoverButton:(UIButton *)btn
{
objc_setAssociatedObject(self, kCoverButtonTag, btn, OBJC_ASSOCIATION_RETAIN);
}
-(NSURL *)loadImageUrl
{
return (NSURL *)objc_getAssociatedObject(self, kLoadImageUrl);
}
-(void)setLoadImageUrl:(NSURL *)url
{
objc_setAssociatedObject(self, kLoadImageUrl, url, OBJC_ASSOCIATION_COPY);
}
-(UIImage *)holderImage
{
return (UIImage *)objc_getAssociatedObject(self, kHolderImage);
}
-(void)setHolderImage :(UIImage *)img
{
objc_setAssociatedObject(self, kHolderImage, img, OBJC_ASSOCIATION_RETAIN);
}
-(void)coverButtonAction
{
if(self.coverButton){
[self.coverButton removeFromSuperview];
}
[self sd_setImageWithURL:self.loadImageUrl forState:UIControlStateNormal placeholderImage:self.holderImage];
}
@end
至于網(wǎng)絡條件判斷，請參考Reachability马靠，在項目中監(jiān)聽到網(wǎng)絡改變之后保存一個標示kYLNoImageModeIsAvaliable在本地奄抽。
使用方法詳見：YLNoImageModel
以上是我的實現(xiàn)方法，如果有其他更好的實現(xiàn)方法甩鳄，請在文章后面留言告訴我一聲逞度，謝謝！
