iOS開發——載入、滑動翻閱大量圖片解決方案詳解

標籤：

載入、滑動翻閱大量圖片解決方案詳解  今天分享一下私人相簿中，讀取載入、滑動翻閱大量圖片解決方案，我想強調的是，編程思想無關乎平台限制。我要詳細說一下，在縮圖介面點擊任意小縮圖後，進入高清大圖全屏瀏覽介面的這短暫的1秒內（和後續的幾秒），都發生了什麼。 常規思路流程點擊任意小圖後，1.首先製作scrollview架構：大小2個scrollview，小的用於手勢縮放單一圖片，大的橫向依次載入全部照片2.製作好scrollview架構後，載入照片3.一切準備就緒跳轉頁面呈現給使用者選擇的大圖 載入圖片這一步，若相簿內就10幾張照片，那麼毫無技術挑戰，但是如果是300張照片呢？直接崩潰？還是讓使用者等待載入？ 時間緊任務重,這一步需要拆分和最佳化. scrollview架構需要瞭解下API，然後動動腦子了，這裡有個小竅門，很多人都問我照片與照片間的黑邊間距怎麼實現，呵呵，貼下代碼：

1. #define PADDING  20  
2. - (NSInteger)loadPhotos  
3. {  
4.     //清理之前照片  
5.     for (UIView *v in [_scrollView subviews]) {  
6.         [v removeFromSuperview];  
7.     }  
8.   
9.     workingFrame = [[UIScreen mainScreen]bounds];  
10.     workingFrame.origin.x = PADDING;  
11.       
12.     for (int i = 0; i < int_total; i++) {  
13.         CGRect frame = workingFrame;  
14.         WQPhoto *photoView = [[WQPhoto alloc] initWithFrame:frame];  
15.         [photoView setScroller:self];  
16.         [photoView setIndex:i];  
17.   
18.         WQAlbumPhoto *photo = [albumObject._photos objectAtIndex:i];  
19.         [photo cleanThumbnail];  
20.         if (i == int_current) {  
21.     //載入原圖  
22.             [photoView setImage:photo.oriImage];  
23.             [photoView setIsLoad:YES];  
24.         }else if (int_current - 10 < i && i < int_current + 10){  
25.     //載入左右臨近的縮圖  
26.             [photoView setImage:photo.thumbnail4view];  
27.         }  
28.   
29.         [_scrollView addSubview:photoView];  
30.         workingFrame.origin.x = workingFrame.origin.x + 2 * PADDING   
31. + workingFrame.size.width;  
32.     }  
33.       
34.     //實現可滾動  
35.     [_scrollView setContentSize:CGSizeMake(workingFrame.origin.x, workingFrame.size.height / 2)];  
36.     [_scrollView setContentOffset:CGPointMake(360 * int_current, 0)];  
37.     //載入其餘縮圖  
38.     loadThread = [[NSThread alloc]initWithTarget:self selector:@selector(loadImages) object:nil];  
39.     return 0;  
40. }  

  使用低解析度圖仔細想想，其實沒有必要第一時間載入全部圖片的高清原圖，事先存好每張圖配套的低解析度圖，用空間換時間。先載入所有的圖片的低解析度圖, 當使用者翻閱到某一張圖片時, 即時的載入原始大小的高清無碼大圖. 過程最佳化為： 多線程任務即使是這樣，當照片數量達到一定量時，需要消耗的時間也並非毫秒級，體驗無法領人滿意,  頁面跳轉時仍然會出現卡頓現象。於是考慮使用多線程來進一步分割任務， 執行跳轉的同時再後台執行載入低解析度圖的步驟.   最佳化快速翻閱體驗通過這樣的拆分，可以實現立即跳轉，體驗滿意。但是翻閱瀏覽時，當使用者很快左右滑動時, 出現黑屏的幾率很高, 因為載入低解析度圖任務的線程可能還在進行大量IO操作，不能及時跟上。 為了完善它，要把載入低解析度圖的步驟再次分解，精益求精。 
在頁面跳轉時間允許的範圍內，載入使用者選定的那張圖片的高清原圖的同時，儘可能多的載入幾張左右臨近的圖片的低解析度圖。
    如何載入其餘的低解析度圖？以使用者點擊選定的那張圖為中心向兩邊載入, 直接想應該是兩個線程一左一右的載入，再想想左右一起載入其實可以是一個迴圈, 免了再開線程的那些耗費了。  

1. -(BOOL)loadImages  
2. {  
3.     for (int i = int_current - 10, j = int_current + 10 ; !( i < 0 &&  int_total - 1 < j); --i, ++j) {  
4.         if (!(i < 0)) {  
5.             WQPhoto *photo_pre = [_scrollView.subviews objectAtIndex:i];  
6.             WQAlbumPhoto *photoPre = [albumObject._photos objectAtIndex:i];  
7.             [photo_pre setImage:photoPre.thumbnail4view];  
8.         }  
9.         if (!(int_total - 1 < j)) {  
10.             WQPhoto *photo_next = [_scrollView.subviews objectAtIndex:j];  
11.             WQAlbumPhoto *photoNext = [albumObject._photos objectAtIndex:j];  
12.             [photo_next setImage:photoNext.thumbnail4view];  
13.         }  
14.     }  
15.     return YES;  
16. }  

最後還一個砍兒盡量減少記憶體佔用.  因為原始圖片要比低解析度圖大很多, 所以當使用者從一張圖片翻閱到另一張圖片時,  當前圖片載入為原始大小的高清大圖, 而原來那張就被替換為低解析度圖了。 雖然讀寫次數增多了, 但記憶體確實省了不少。

實話說，市場上不少相簿類的app， 翻閱時都會有卡頓的跳躍感，呵呵……    P.S.  下次總結討論下，獨立開發人員如何不花一分錢的推廣，最終實現盈利：   歡迎交流

 

iOS開發——載入、滑動翻閱大量圖片解決方案詳解