[iOS]淺談圖片加載<結(jié)合SDWebImageManager>

前言--這次我要探討的問題是一個(gè)不那么引人注意的地方,我認(rèn)為細(xì)節(jié)決定成敗,因此今天拿出來探討一下。針對(duì)于iOS的圖片加載---就拿最近比較火的電影《浮山行》做栗子了絮重。

Image.png

上圖為使用SDWebImageManager加載網(wǎng)絡(luò)圖片的狀態(tài),可以輕易地看到圖片是有拉伸的。我們對(duì)UIImageView的填充模式進(jìn)行設(shè)置青伤,圖片也會(huì)多多少少看起來不那么順眼督怜。

通常會(huì)出現(xiàn)以下情況

  • UIImageView沒有填充滿,兩邊有空白
  • UIImageView有拉伸

原因:對(duì)UIImageView有固定的大小潮模,加載的圖片活動(dòng)范圍也就只有設(shè)置的那么大

如果我們把UIImageView的填充模式改變了亮蛔,圖片不會(huì)拉伸但是兩邊會(huì)有空白,顯然擎厢,這對(duì)排版來說究流,看起來會(huì)很雜亂。
我們希望看到的不是一個(gè)有拉伸的圖片动遭,并且加載的網(wǎng)絡(luò)圖片要將UIImageView填充完全芬探。

個(gè)人會(huì)采用等比剪切的方式進(jìn)行加載

Image.png

像以上圖片這樣,雖然圖片看起來沒有顯示完全厘惦,但是它屬于圖片正中間偷仿,我們能夠看到圖片的主要內(nèi)容,并且看起來不會(huì)特別亂宵蕉。

首先會(huì)用到以下代碼酝静,用于對(duì)圖片的裁剪

+(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];
}

接下來,當(dāng)我們使用網(wǎng)絡(luò)加載圖片的時(shí)候就會(huì)用到SDWebImageManager羡玛。這是一個(gè)強(qiáng)大的三方别智,里面包含了大多數(shù)對(duì)圖片的處理。如果稼稿,您對(duì)SDWebImageManager只有簡(jiǎn)單的了解薄榛,僅僅用于加載圖片,但是對(duì)圖片填充有細(xì)節(jié)的要求让歼,我想這篇文章可能對(duì)你會(huì)有些許的幫助敞恋。
我將結(jié)合SDWebImageManager三方來談?wù)剤D片填充。上面谋右,講到要對(duì)圖片進(jìn)行裁剪硬猫,因此在我們需要加載圖片的時(shí)候我們會(huì)用到上面的裁剪方式。

我將裁剪方法寫在一個(gè)類里面改执,然后結(jié)合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) {                   
                }];         
   });        
           });      
     }   }

上面的代碼結(jié)合了許多,其中有關(guān)線程的暫且不談天梧,之后會(huì)單獨(dú)談?wù)勎覍?duì)線程的理解。

//判斷是否有緩存過
BOOL isExit = [[SDWebImageManager sharedManager] cachedImageExistsForURL:[NSURL URLWithString:imageName]];

這里的方法霞丧,調(diào)用的就是SDWebImageManager里面封裝的一個(gè)方法呢岗,他可以檢測(cè)是否圖片緩存過

//如果緩存里有,我們直接調(diào)用Cache里的圖片,以便節(jié)省下次網(wǎng)絡(luò)請(qǐng)求加載圖片
UIImage *cachedImage = [[SDImageCache sharedImageCache] imageFromDiskCacheForKey:imageName]; imageView.image = cachedImage;

這樣的方法也是SDWebImageManager里面的后豫。

如果緩存里面沒有悉尾,那么就在線程里面重新加載網(wǎng)絡(luò)圖片,下載完畢后就將圖片緩存起來挫酿。也就是else里面的語句构眯。

總結(jié)

1.加載圖片很簡(jiǎn)單,先裁剪
2.再檢查是否緩存
3.有緩存早龟,直接調(diào)用惫霸;沒有緩存,先下載葱弟,再緩存

最后壹店,SDWebImageManager里面有很多網(wǎng)絡(luò)加載的方法,里面囊括了許多iOS的知識(shí)芝加,可以抽時(shí)間仔細(xì)研究一下硅卢,說不定自己以后也能寫加載圖片的方法。以上是我通過學(xué)習(xí)SDWebImageManager藏杖,結(jié)合自己的理解和需求寫的加載圖片的方法将塑,雖有小問題,但是對(duì)于初學(xué)者來說蝌麸,或許會(huì)有些感悟点寥。我的方法結(jié)合了SDWebImageManager,所以或許會(huì)有些小問題祥楣,如果你不嫌棄可一起來探討开财,或者指出錯(cuò)誤。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末误褪,一起剝皮案震驚了整個(gè)濱河市责鳍,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌兽间,老刑警劉巖历葛,帶你破解...
    沈念sama閱讀 216,651評(píng)論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異嘀略,居然都是意外死亡恤溶,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,468評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門帜羊,熙熙樓的掌柜王于貴愁眉苦臉地迎上來咒程,“玉大人,你說我怎么就攤上這事讼育≌室觯” “怎么了稠集?”我有些...
    開封第一講書人閱讀 162,931評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)饥瓷。 經(jīng)常有香客問我剥纷,道長(zhǎng),這世上最難降的妖魔是什么呢铆? 我笑而不...
    開封第一講書人閱讀 58,218評(píng)論 1 292
  • 正文 為了忘掉前任晦鞋,我火速辦了婚禮,結(jié)果婚禮上棺克,老公的妹妹穿的比我還像新娘悠垛。我一直安慰自己,他們只是感情好逆航,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,234評(píng)論 6 388
  • 文/花漫 我一把揭開白布鼎文。 她就那樣靜靜地躺著,像睡著了一般因俐。 火紅的嫁衣襯著肌膚如雪拇惋。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,198評(píng)論 1 299
  • 那天抹剩,我揣著相機(jī)與錄音撑帖,去河邊找鬼。 笑死澳眷,一個(gè)胖子當(dāng)著我的面吹牛胡嘿,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播钳踊,決...
    沈念sama閱讀 40,084評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼衷敌,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了拓瞪?” 一聲冷哼從身側(cè)響起缴罗,我...
    開封第一講書人閱讀 38,926評(píng)論 0 274
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎祭埂,沒想到半個(gè)月后面氓,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,341評(píng)論 1 311
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡蛆橡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,563評(píng)論 2 333
  • 正文 我和宋清朗相戀三年舌界,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片泰演。...
    茶點(diǎn)故事閱讀 39,731評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡呻拌,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出睦焕,到底是詐尸還是另有隱情柏锄,我是刑警寧澤酿箭,帶...
    沈念sama閱讀 35,430評(píng)論 5 343
  • 正文 年R本政府宣布,位于F島的核電站趾娃,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏缔御。R本人自食惡果不足惜抬闷,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,036評(píng)論 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望耕突。 院中可真熱鬧笤成,春花似錦、人聲如沸眷茁。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,676評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽上祈。三九已至培遵,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間登刺,已是汗流浹背籽腕。 一陣腳步聲響...
    開封第一講書人閱讀 32,829評(píng)論 1 269
  • 我被黑心中介騙來泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留纸俭,地道東北人皇耗。 一個(gè)月前我還...
    沈念sama閱讀 47,743評(píng)論 2 368
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像揍很,于是被迫代替她去往敵國(guó)和親郎楼。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,629評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容

  • 前不久做了一個(gè)生成快照的需求窒悔,其中用到 SDWebImage 來下載圖片呜袁,在使用該框架的過程中也遇到了一些問題,索...
    ShannonChenCHN閱讀 14,067評(píng)論 12 241
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫蛉迹、插件傅寡、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,094評(píng)論 4 62
  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,080評(píng)論 25 707
  • 他路過這戶人家的時(shí)候,門口高高掛起兩個(gè)紅燈籠北救,紅到像失去光芒的太陽荐操,只剩下一團(tuán)火球,鋪灑著滴在宣紙上的紅墨水般...
    周海恒閱讀 470評(píng)論 0 0
  • 下午呆在家里看書珍策,窗外的蟬叫的撕心裂肺托启,讓人煩躁。不免納悶攘宙,明明氣溫不到30屯耸,蟬為什么還叫的這么歡拐迁?但轉(zhuǎn)念一想,蟬...
    everfight閱讀 774評(píng)論 0 0