[iOS]浅谈图片加载<结合SDWebImageManager>

前言--这次我要探讨的问题是一个不那么引人注意的地方,我认为细节决定成败,因此今天拿出来探讨一下。针对于iOS的图片加载---就拿最近比较火的电影《浮山行》做栗子了。

Image.png

上图为使用SDWebImageManager加载网络图片的状态,可以轻易地看到图片是有拉伸的。我们对UIImageView的填充模式进行设置,图片也会多多少少看起来不那么顺眼。

通常会出现以下情况

  • UIImageView没有填充满,两边有空白
  • UIImageView有拉伸

原因:对UIImageView有固定的大小,加载的图片活动范围也就只有设置的那么大

如果我们把UIImageView的填充模式改变了,图片不会拉伸但是两边会有空白,显然,这对排版来说,看起来会很杂乱。
我们希望看到的不是一个有拉伸的图片,并且加载的网络图片要将UIImageView填充完全。

个人会采用等比剪切的方式进行加载

Image.png

像以上图片这样,虽然图片看起来没有显示完全,但是它属于图片正中间,我们能够看到图片的主要内容,并且看起来不会特别乱。

首先会用到以下代码,用于对图片的裁剪

+(UIImage *)cutImage:(UIImage *)image imageView:(UIImageView *)imageView
{    //裁剪压缩图片   
   CGSize newSize; 
   CGImageRef imageRef = nil;  
     if ((image.size.width / image.size.height) < (imageView.frame.size.width / imageView.frame.size.height)) {   
     newSize.width = image.size.width;   
     newSize.height = image.size.width * imageView.frame.size.height / imageView.frame.size.width;                
    imageRef = CGImageCreateWithImageInRect([image CGImage], CGRectMake(0, fabs(image.size.height - newSize.height) / 2, newSize.width, newSize.height));      
     } else {   
     newSize.height = image.size.height;   
     newSize.width = image.size.height * imageView.frame.size.width / imageView.frame.size.height;               
     imageRef = CGImageCreateWithImageInRect([image CGImage], CGRectMake(fabs(image.size.width - newSize.width) / 2, 0, newSize.width, newSize.height));   
        }     
  return [UIImage imageWithCGImage:imageRef];
}

接下来,当我们使用网络加载图片的时候就会用到SDWebImageManager。这是一个强大的三方,里面包含了大多数对图片的处理。如果,您对SDWebImageManager只有简单的了解,仅仅用于加载图片,但是对图片填充有细节的要求,我想这篇文章可能对你会有些许的帮助。
我将结合SDWebImageManager三方来谈谈图片填充。上面,讲到要对图片进行裁剪,因此在我们需要加载图片的时候我们会用到上面的裁剪方式。

我将裁剪方法写在一个类里面,然后结合SDWebImageManager也将加载图片的方法写在类里面。

+(void)addImageWith:(NSString *)imageName andImageView:(UIImageView *)imageView{  
         BOOL isExit = [[SDWebImageManager sharedManager] cachedImageExistsForURL:[NSURL URLWithString:imageName]];   
 if (isExit) {     
 //  NSLog(@"有");      
  UIImage *cachedImage = [[SDImageCache sharedImageCache] imageFromDiskCacheForKey:imageName];      
  imageView.image = cachedImage; 
   }else{  
     dispatch_queue_t ab = dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0);   
     dispatch_queue_t main = dispatch_get_main_queue();        
dispatch_async(ab, ^{                 
      [NSThread sleepForTimeInterval:2];            
   dispatch_async(main, ^{        
          NSURL *urlBack = [NSURL URLWithString:imageName];      
          UIImage *image = [UIImage imageWithData:[NSData dataWithContentsOfURL:urlBack]];           
          image = [Cut cutImage:image imageView:imageView];                
          imageView.image = image;      
          //缓存图片     
           [[SDImageCache sharedImageCache] storeImage:image forKey:imageName];           
                    [[SDWebImageManager sharedManager] downloadImageWithURL:urlBack options:0 progress:^(NSInteger receivedSize, NSInteger expectedSize) {           
         NSLog(@"下载完成");           
     } completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, BOOL finished, NSURL *imageURL) {                   
                }];         
   });        
           });      
     }   }

上面的代码结合了许多,其中有关线程的暂且不谈,之后会单独谈谈我对线程的理解。

//判断是否有缓存过
BOOL isExit = [[SDWebImageManager sharedManager] cachedImageExistsForURL:[NSURL URLWithString:imageName]];

这里的方法,调用的就是SDWebImageManager里面封装的一个方法,他可以检测是否图片缓存过

//如果缓存里有,我们直接调用Cache里的图片,以便节省下次网络请求加载图片
UIImage *cachedImage = [[SDImageCache sharedImageCache] imageFromDiskCacheForKey:imageName]; imageView.image = cachedImage;

这样的方法也是SDWebImageManager里面的。

如果缓存里面没有,那么就在线程里面重新加载网络图片,下载完毕后就将图片缓存起来。也就是else里面的语句。

总结

1.加载图片很简单,先裁剪
2.再检查是否缓存
3.有缓存,直接调用;没有缓存,先下载,再缓存

最后,SDWebImageManager里面有很多网络加载的方法,里面囊括了许多iOS的知识,可以抽时间仔细研究一下,说不定自己以后也能写加载图片的方法。以上是我通过学习SDWebImageManager,结合自己的理解和需求写的加载图片的方法,虽有小问题,但是对于初学者来说,或许会有些感悟。我的方法结合了SDWebImageManager,所以或许会有些小问题,如果你不嫌弃可一起来探讨,或者指出错误。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,319评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,801评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,567评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,156评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,019评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,090评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,500评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,192评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,474评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,566评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,338评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,212评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,572评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,890评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,169评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,478评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,661评论 2 335

推荐阅读更多精彩内容

  • 前不久做了一个生成快照的需求,其中用到 SDWebImage 来下载图片,在使用该框架的过程中也遇到了一些问题,索...
    ShannonChenCHN阅读 14,023评论 12 241
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 11,943评论 4 60
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,050评论 25 707
  • 他路过这户人家的时候,门口高高挂起两个红灯笼,红到像失去光芒的太阳,只剩下一团火球,铺洒着滴在宣纸上的红墨水般...
    周海恒阅读 457评论 0 0
  • 下午呆在家里看书,窗外的蝉叫的撕心裂肺,让人烦躁。不免纳闷,明明气温不到30,蝉为什么还叫的这么欢?但转念一想,蝉...
    everfight阅读 764评论 0 0