你好,歡迎來到IOS教程網

 Ios教程網 >> IOS編程開發 >> IOS開發基礎 >> 詳細整理:UITableView優化技巧

詳細整理:UITableView優化技巧

編輯:IOS開發基礎

1.JPG

最近在微博上看到一個很好的開源項目VVeboTableViewDemo,是關於如何優化UITableView的。加上正好最近也在優化項目中的類似朋友圈功能這塊,思考了很多關於UITableView的優化技巧,相信這塊是難點也是痛點,所以決定詳細的整理下我對優化UITableView的理解。

UITableView作為iOS開發中最重要的控件之一,其中的實現原理很是考究。Apple在這塊的優化水平直接決定了iOS的體驗能甩安卓幾條街,哈哈,扯淡扯多了。。。好了,廢話不多說,直接進入主題。首先來談談我對UITableView的認識:

UITableView的簡單認識

UITableView最核心的思想就是UITableViewCell的重用機制。簡單的理解就是:UITableView只會創建一屏幕(或一屏幕多一點)的UITableViewCell,其他都是從中取出來重用的。每當Cell滑出屏幕時,就會放入到一個集合(或數組)中(這裡就相當於一個重用池),當要顯示某一位置的Cell時,會先去集合(或數組)中取,如果有,就直接拿來顯示;如果沒有,才會創建。這樣做的好處可想而知,極大的減少了內存的開銷。

知道UITableViewCell的重用原理後,我們來看看UITableView的回調方法。UITableView最主要的兩個回調方法是tableView:cellForRowAtIndexPath:和tableView:heightForRowAtIndexPath:。理想上我們是會認為UITableView會先調用前者,再調用後者,因為這和我們創建控件的思路是一樣的,先創建它,再設置它的布局。但實際上卻並非如此,我們都知道,UITableView是繼承自UIScrollView的,需要先確定它的contentSize及每個Cell的位置,然後才會把重用的Cell放置到對應的位置。所以事實上,UITableView的回調順序是先多次調用tableView:heightForRowAtIndexPath:以確定contentSize及Cell的位置,然後才會調用tableView:cellForRowAtIndexPath:,從而來顯示在當前屏幕的Cell。

舉個例子來說:如果現在要顯示100個Cell,當前屏幕顯示5個。那麼刷新(reload)UITableView時,UITableView會先調用100次tableView:heightForRowAtIndexPath:方法,然後調用5次tableView:cellForRowAtIndexPath:方法;滾動屏幕時,每當Cell滾入屏幕,都會調用一次tableView:heightForRowAtIndexPath:、tableView:cellForRowAtIndexPath:方法。

看到這裡,想必大伙也都能隱約察覺到,UITableView優化的首要任務是要優化上面兩個回調方法。事實也確實如此,下面按照我探討進階的過程,來研究如何優化:

優化探索,項目拿到手時代碼是這樣:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    ContacterTableCell *cell = [tableView dequeueReusableCellWithIdentifier:@"ContacterTableCell"];
    if (!cell) {
        cell = (ContacterTableCell *)[[[NSBundle mainBundle] loadNibNamed:@"ContacterTableCell" owner:self options:nil] lastObject];
    }
    NSDictionary *dict = self.dataList[indexPath.row];
    [cell setContentInfo:dict];
    return cell;
}
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    UITableViewCell *cell = [tableView cellForRowAtIndexPath:indexPath];
    return cell.frame.size.height;
}

看到這段代碼,對於剛畢業的我來說,覺得還是蠻巧妙的,但巧歸巧,當Cell非常復雜的時候,直接卡出翔了。。。特別是在我的Touch4上,這我能忍?!好吧,依據上面UITableView原理的分析,我們先來分析它為什麼卡?

這樣寫,在Cell賦值內容的時候,會根據內容設置布局,當然也就可以知道Cell的高度,想想如果1000行,那就會調用1000+頁面Cell個數次tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath方法,而我們對Cell的處理操作,都是在這個方法裡的!什麼賦值、布局等等。開銷自然很大,這種方案Pass。。。改進代碼。

改進代碼後:

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    NSDictionary *dict = self.dataList[indexPath.row];
    return [ContacterTableCell cellHeightOfInfo:dict];
}

思路是把賦值和計算布局分離。這樣讓tableView:cellForRowAtIndexPath:方法只負責賦值,tableView:heightForRowAtIndexPath:方法只負責計算高度。注意:兩個方法盡可能的各司其職,不要重疊代碼!兩者都需要盡可能的簡單易算。Run一下,會發現UITableView滾動流暢了很多。。。

基於上面的實現思路,我們可以在獲得數據後,直接先根據數據源計算出對應的布局,並緩存到數據源中,這樣在tableView:heightForRowAtIndexPath:方法中就直接返回高度,而不需要每次都計算了。

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    NSDictionary *dict = self.dataList[indexPath.row];
CGRect rect = [dict[@"frame"] CGRectValue];
    return rect.frame.height;
}

其實上面的改進方法並不是最佳方案,但基本能滿足簡單的界面!記得開頭我的任務嗎?像朋友圈那樣的圖文混排,這種方案還是扛不住的!我們需要進入更深層次的探究:自定義Cell的繪制

我們在Cell上添加系統控件的時候,實質上系統都需要調用底層的接口進行繪制,當我們大量添加控件時,對資源的開銷也會很大,所以我們可以索性直接繪制,提高效率。是不是說的很抽象?廢話不多說,直接上代碼:

首先需要給自定義的Cell添加draw方法,(當然也可以重寫drawRect)然後在方法體中實現:

//異步繪制
dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
        CGRect rect = [_data[@"frame"] CGRectValue];
        UIGraphicsBeginImageContextWithOptions(rect.size, YES, 0);
        CGContextRef context = UIGraphicsGetCurrentContext();
//整個內容的背景
        [[UIColor colorWithRed:250/255.0 green:250/255.0 blue:250/255.0 alpha:1] set];
        CGContextFillRect(context, rect);
//轉發內容的背景
        if ([_data valueForKey:@"subData"]) {
            [[UIColor colorWithRed:243/255.0 green:243/255.0 blue:243/255.0 alpha:1] set];
            CGRect subFrame = [_data[@"subData"][@"frame"] CGRectValue];
            CGContextFillRect(context, subFrame);
            [[UIColor colorWithRed:200/255.0 green:200/255.0 blue:200/255.0 alpha:1] set];
            CGContextFillRect(context, CGRectMake(0, subFrame.origin.y, rect.size.width, .5));
        }
        
        {
    //名字
            float leftX = SIZE_GAP_LEFT+SIZE_AVATAR+SIZE_GAP_BIG;
            float x = leftX;
            float y = (SIZE_AVATAR-(SIZE_FONT_NAME+SIZE_FONT_SUBTITLE+6))/2-2+SIZE_GAP_TOP+SIZE_GAP_SMALL-5;
            [_data[@"name"] drawInContext:context withPosition:CGPointMake(x, y) andFont:FontWithSize(SIZE_FONT_NAME)
                             andTextColor:[UIColor colorWithRed:106/255.0 green:140/255.0 blue:181/255.0 alpha:1]
                                andHeight:rect.size.height];
    //時間+設備
            y += SIZE_FONT_NAME+5;
            float fromX = leftX;
            float size = [UIScreen screenWidth]-leftX;
            NSString *from = [NSString stringWithFormat:@"%@  %@", _data[@"time"], _data[@"from"]];
            [from drawInContext:context withPosition:CGPointMake(fromX, y) andFont:FontWithSize(SIZE_FONT_SUBTITLE)
                   andTextColor:[UIColor colorWithRed:178/255.0 green:178/255.0 blue:178/255.0 alpha:1]
                      andHeight:rect.size.height andWidth:size];
        }
//將繪制的內容以圖片的形式返回,並調主線程顯示
UIImage *temp = UIGraphicsGetImageFromCurrentImageContext();
        UIGraphicsEndImageContext();
        dispatch_async(dispatch_get_main_queue(), ^{
            if (flag==drawColorFlag) {
                postBGView.frame = rect;
                postBGView.image = nil;
                postBGView.image = temp;
            }
}
//內容如果是圖文混排,就添加View,用CoreText繪制
[self drawText];
}}

上述代碼只貼出來部分功能,但大體的思路都是一樣的,各個信息都是根據之前算好的布局進行繪制的。這裡是需要異步繪制,但如果在重寫drawRect方法就不需要用GCD異步線程了,因為drawRect本來就是異步繪制的。對於圖文混排的繪制,可以移步Google,研究下CoreText,這塊內容太多了,不便展開。

好了,至此,我們又讓UITableView的效率提高了一個等級!但我們的步伐還遠遠不止這些,下面我們還可以從UIScrollView的角度出發,再次找到突破口。

滑動UITableView時,按需加載對應的內容

直接上代碼:

//按需加載 - 如果目標行與當前行相差超過指定行數,只在目標滾動范圍的前後指定3行加載。
- (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset{
    NSIndexPath *ip = [self indexPathForRowAtPoint:CGPointMake(0, targetContentOffset->y)];
    NSIndexPath *cip = [[self indexPathsForVisibleRows] firstObject];
    NSInteger skipCount = 8;
    if (labs(cip.row-ip.row)>skipCount) {
        NSArray *temp = [self indexPathsForRowsInRect:CGRectMake(0, targetContentOffset->y, self.width, self.height)];
        NSMutableArray *arr = [NSMutableArray arrayWithArray:temp];
        if (velocity.y<0) {
            NSIndexPath *indexPath = [temp lastObject];
            if (indexPath.row+33) {
                [arr addObject:[NSIndexPath indexPathForRow:indexPath.row-3 inSection:0]];
                [arr addObject:[NSIndexPath indexPathForRow:indexPath.row-2 inSection:0]];
                [arr addObject:[NSIndexPath indexPathForRow:indexPath.row-1 inSection:0]];
            }
        }
        [needLoadArr addObjectsFromArray:arr];
    }
}

記得在tableView:cellForRowAtIndexPath:方法中加入判斷:

if (needLoadArr.count>0&&[needLoadArr indexOfObject:indexPath]==NSNotFound) {
    [cell clear];
    return;
}

滾動很快時,只加載目標范圍內的Cell,這樣按需加載,極大的提高流暢度。

寫了這麼多,也差不多該來個總結了!UITableView的優化主要從三個方面入手:

  • 提前計算並緩存好高度(布局),因為heightForRowAtIndexPath:是調用最頻繁的方法;

  • 異步繪制,遇到復雜界面,遇到性能瓶頸時,可能就是突破口;

  • 滑動時按需加載,這個在大量圖片展示,網絡加載的時候很管用!(SDWebImage已經實現異步加載,配合這條性能槓槓的)。

除了上面最主要的三個方面外,還有很多幾乎大伙都很熟知的優化點:

  • 正確使用reuseIdentifier來重用Cells

  • 盡量使所有的view opaque,包括Cell自身

  • 盡量少用或不用透明圖層

  • 如果Cell內現實的內容來自web,使用異步加載,緩存請求結果

  • 減少subviews的數量

  • 在heightForRowAtIndexPath:中盡量不使用cellForRowAtIndexPath:,如果你需要用到它,只用一次然後緩存結果

  • 盡量少用addView給Cell動態添加View,可以初始化時就添加,然後通過hide來控制是否顯示

尾巴

肯定很多人會非常好奇,為什麼我都是手動用代碼創建Cell的?現在主流不都是Xib、Storyboard什麼的嘛?我的回答是:要想提高效率,還是手動寫有用!拋開Xib、Storyboard需要系統自動轉碼,給系統多加了一層負擔不談,自定義Cell的繪制更是無從下手,所以,在我看來,復雜的需要高效的界面,還是手動寫代碼吧!!!

最後如果你們的項目都是用的Xib、Storyboard,並需要優化UITableView的話,sunnyxx大神提出了好的方案:http://blog.sunnyxx.com/2015/05/17/cell-height-calculation/ 大伙可以自行研究研究。

知識是需要不斷學習的,作為剛上路的我,如果有什麼理解不到位的,歡迎大伙留言指正,如果你有什麼更牛逼的想法,希望一起交流交流。

注明:本篇的分析源碼來源於開源項目VVeboTableViewDemo

參考:https://github.com/johnil/VVeboTableViewDemo

  1. 上一頁:
  2. 下一頁:
蘋果刷機越獄教程| IOS教程問題解答| IOS技巧綜合| IOS7技巧| IOS8教程
Copyright © Ios教程網 All Rights Reserved