UITableViewCell自適應圖片高度

1、問題描述

最近在作公司項目的時候，遇到了前端上傳多張圖片到七牛服務器後，前端在列表展現圖片適配的問題。一開始我設置的固定高度，由於圖片尺寸不是固定的，會出現不一樣程度的拉伸狀況，用戶體驗也很很差。經過設置圖片視圖contentMode這個屬性，雖然能保證圖片不被拉伸，但圖片會出現顯示不全的問題。

2、解決思路

一、後臺返回每張圖片的寬高，根據比例去計算圖片的高度

二、獲取到image，image有size這個屬性，能夠拿到寬高，根據比例去計算圖片的高度

3、最終採用方案

第一種方案是能夠實現圖片的適配問題，我採用了第二種。圖片都是網絡加載的，要想拿到image，就必需要將圖片下載下來，這樣就能夠獲取到圖片的尺寸。下面貼出我實現的關鍵步驟吧。

一、工程導入SDWebImage和Masonry,導入相關頭文件。

二、SDWebImage下載圖片，並計算出圖片高度，將高度緩存到字典。自定義cell用Masonry設置好上下左右約束，也能夠是xib。

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    ImageViewCell *cell = [tableView dequeueReusableCellWithIdentifier:kIdentifier forIndexPath:indexPath];
    cell.selectionStyle = UITableViewCellSelectionStyleNone;
    NSString *url = self.imageUrlArray[indexPath.row];
    [cell.autoImageView sd_setImageWithURL:[NSURL URLWithString:url] placeholderImage:nil options:SDWebImageRetryFailed completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, NSURL *imageURL) {
        if (image.size.height) {
            /**  < 圖片寬度 >  */
            CGFloat imageW = [UIScreen mainScreen].bounds.size.width - 2 * 15;
            /**  <根據比例 計算圖片高度 >  */
            CGFloat ratio = image.size.height / image.size.width;
             /**  < 圖片高度 + 間距 >  */
            CGFloat imageH = ratio * imageW + 15;
            /**  < 緩存圖片高度 沒有緩存則緩存 刷新indexPath >  */
            if (![[self.heightDict allKeys] containsObject:@(indexPath.row)]) {
                [self.heightDict setObject:@(imageH) forKey:@(indexPath.row)];
                [self.tableView beginUpdates];
                [self.tableView reloadRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationNone];
                [self.tableView endUpdates];
            }
        }
    }];
    return cell;
}
複製代碼

注意

• 字典key也能夠是圖片地址url
• 由於圖片下載是異步的，要在下載完成圖片以後，若是字典沒有緩存當前indexPath高度，須要手動去刷新一次indexPath(最開始的時候，我沒有根據key去判斷是否須要刷新，當cell滑動的時候，會不停的調用cellForRowAtIndexPath這個方法，會不停的刷新，這樣也很是耗費性能)。

三、cell高度代理方法返回緩存的圖片高度

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    return [[self.heightDict objectForKey:@(indexPath.row)] floatValue];
}
複製代碼

到這裏，就已經實現了圖片自適應高度的需求了，具體詳情，請看測試UITableViewCellAutoImageHeight。實現這個需求，本身也折騰了一段時間，上面的方法如今也能知足項目的需求，可是在UI效果上感受仍是有一些不完美之處。若是大神有更好的實現方案和優化方法，但願能多多交流學習。若是之後有更好的實現方案，我也會在這篇文章中記錄下來。

4、結語

2017年還剩兩天，這篇文章也是今年寫的最後一篇文章吧，寫文章的初衷也是爲了記錄本身學習成長的點滴，同時也但願可以幫助到須要的人。2017就要結束了，本身的指望也未達到，但願在即將到來的2018年，本身更加努力，可以實現本身的指望與目標。奮鬥吧，少年！