放在UITableVIewCell上的webView的高度自適應的問題
一、前言
前段時間，群裡的小夥伴們經常問題UITableViewCell中要放一個UIWebView，怎麼做呢？怎麼算高度？怎麼讓它自適應？這一聽感覺挺不好處理的。
因為UIWebView通過代理載入的話，還沒有計算高度出來，cell的heightForRowAtIndexPath已經呼叫了。
基於此，筆者嘗試學習了一下如何去計算其高度，並自適應。
注意：筆者只是拋磚引玉，僅僅處理了首次載入WebView得到的內容的高度，如果點選WebView裡面的內容，頁面變大或者變小，這裡可沒有處理重新整理計算高度哦。這部分有點難度的，就交給大家自行深入吧~希望本博文可以給大家新的思想而已
效果圖
二、難點分析
- 效能問題：如果每一行cell的高度不一樣，採用常規做法是很耗效能，然後高度不好處理。
- 自適應高度問題：如果每次都通過載入UIWebView內容成功後才reload行，從而計算高度，這是會進行死迴圈的。webview載入— >重新整理當前行–>又重新載入webview–>又重複重新整理高度–>死迴圈，當然也可以載入一次webview後拿到的高度跟當前 重新整理載入的高度比較，若相等則不必無限重新整理，不過這麼做有一個最大的問題，就是當前正常看著看著，突然又重新整理變化了~
如果通過以下中的任何一個方法來載入HTML，那麼就是常規的做法了，這種做法要在cell中使用，是比較困難而且比較複雜難以控制的：
|
1 2 3 4 5 |
- (void)loadRequest:(NSURLRequest *)request; - (void)loadHTMLString:(NSString *)string baseURL:(NSURL *)baseURL; - (void)loadData:(NSData *)data MIMEType:(NSString *)MIMEType textEncodingName:(NSString *)textEncodingName baseURL:(NSURL *)baseURL; |
載入完了內容才能執行stringByEvaluatingJavaScriptFromString方法。
三、設計思想
筆者沒有使用自動佈局來計算，這方面也讓大家自行發揮吧。筆者只是通過常規的計算方式來學習一下基本的功能。
本demo的設計思想是通過js的方式來計算高度及替換HTML。
關鍵點如下：
- 獲取HTML的高度：在cell的代理方法heightForRowAtIndexPath，我們要計算出HTML的高度，這樣才能確定UIWebView的高度。
- 替換原來的HTML：在cell配置資料顯示處，直接替換掉原來的HTML，而不是通過WebView所提供的API來載入HTML，這樣就可以同步實現得到顯示資料
另外，在計算高度是，如何才能計算HTML的內容的高度呢？那麼我們必須藉助一個UIWebView來處理了，因此，我們還要使用一個專門用來計算HTML高度的UIWebView。
四、計算HTML高度的UIWebView
|
1 2 3 4 5 6 7 8 9 10 11 |
- (UIWebView *)webView { if (_webView == nil) { _webView = [[UIWebView alloc] init]; CGSize size = CGSizeMake(self.view.frame.size.width - 20, 0); _webView.frame = CGRectMake(0, 0, size.width, size.height); } return _webView; } |
看到設定了大小了嗎？我們必須指定webview的width否則下面計算的高度是不正確的。但是高度不要指定，設定為0就可以了（因為一旦指定，內容就會自動按照這個高度來自適應的，高度也就不用計算了）。
五、計算HTML的高度
首先，我們在ViewController中添加了個屬性webView，用於負責計算HTML的高度的。因此，將它作為屬性，一直都需要使用。程式碼如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath { HYBTestModel *model = [self.datasource objectAtIndex:indexPath.row]; CGFloat w = [UIScreen mainScreen].bounds.size.width; CGFloat h = [model.title sizeWithFont:[UIFont systemFontOfSize:16] constrainedToSize:CGSizeMake(w, CGFLOAT_MAX) lineBreakMode:NSLineBreakByWordWrapping].height; h += 10 + 20; if (model.webHeight <= 0) { // 注意不能使用雙引號 NSString *js = [NSString stringWithFormat:@"document.body.innerHTML = '%@'", model.html]; [self.webView stringByEvaluatingJavaScriptFromString:js]; NSLog(@"%@", [self.webView stringByEvaluatingJavaScriptFromString:@"document.body.innerHTML"]); NSString *heightJs = @"document.getElementsByTagName('div')[0].scrollHeight"; CGFloat webHeight = [[self.webView stringByEvaluatingJavaScriptFromString:heightJs] floatValue]; NSLog(@"%f", webHeight); self.webView.scrollView.contentSize = CGSizeMake(w - 20, webHeight); model.webHeight = webHeight + 40; } return h + model.webHeight + 40; } |
- 先通過document.body.innerHTML這段JS來替換用於計算HTML高度的UIWebView的HTML
- document.getElementsByTagName(‘div’)[0].scrollHeight來獲取可滾動範圍的高度，注意，這 個引數div不是固定的，要根據自己的HTML的內容來獲取，不能直接獲取body.scrollHeight，這是不對的。對於筆者的demo 中，div是最上層標籤，所以就可以通過它獲取高度。
- 為什麼要將計算的結果加上40？因為直接計算出來的是不夠準備的，因為還有margin、padding，自己看看差不多就可以了。
六、配置Cell
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
- (void)configCellWithModel:(HYBTestModel *)model { self.label.text = model.title; [self.label sizeToFit]; NSString *js = [NSString stringWithFormat:@"document.body.innerHTML = '%@'", model.html]; [self.webView stringByEvaluatingJavaScriptFromString:js]; self.webView.frame = CGRectMake(10, self.label.frame.origin.y + self.label.frame.size.height + 20, self.label.frame.size.width, model.webHeight); } |
對於配置cell顯示資料時，直接替換UIWebView裡面的HTML就可以了，不需要通過代理回撥才通知高度，如此就可以直接設定webview的frame了。
這裡可沒有再計算HTML的高度了，在計算高度的時候，直接給model添加了屬性model.webHeight，用於記錄所計算出來的高度，以免重複計算。