前言
UITableViewCell中要放一個(gè)UIWebView，怎么做呢？怎么算高度？怎么讓它自適應(yīng)？這一聽感覺挺不好處理的。
因?yàn)閁IWebView通過(guò)代理加載的話，還沒(méi)有計(jì)算高度出來(lái)，cell的heightForRowAtIndexPath已經(jīng)調(diào)用了。
基于此，筆者嘗試學(xué)習(xí)了一下如何去計(jì)算其高度，并自適應(yīng)。
注意：筆者只是拋磚引玉，僅僅處理了首次加載WebView得到的內(nèi)容的高度，如果點(diǎn)擊WebView里面的內(nèi)容，頁(yè)面變大或者變小，這里可沒(méi)有處理刷新計(jì)算高度哦。這部分有點(diǎn)難度的，就交給大家自行深入吧~希望本博文可以給大家新的思想而已
難點(diǎn)分析
- 性能問(wèn)題：如果每一行cell的高度不一樣，采用常規(guī)做法是很耗性能，然后高度不好處理。
- 自適應(yīng)高度問(wèn)題：如果每次都通過(guò)加載UIWebView內(nèi)容成功后才reload行，從而計(jì)算高度，這是會(huì)進(jìn)行死循環(huán)的。webview加載—>刷新當(dāng)前行-->又重新加載webview-->又重復(fù)刷新高度-->死循環(huán)，當(dāng)然也可以加載一次webview后拿到的高度跟當(dāng)前刷新加載的高度比較，若相等則不必?zé)o限刷新，不過(guò)這么做有一個(gè)最大的問(wèn)題，就是當(dāng)前正常看著看著，突然又刷新變化了~
如果通過(guò)以下中的任何一個(gè)方法來(lái)加載HTML，那么就是常規(guī)的做法了，這種做法要在cell中使用，是比較困難而且比較復(fù)雜難以控制的：
- (void)loadRequest:(NSURLRequest *)request;
- (void)loadHTMLString:(NSString *)string baseURL:(NSURL *)baseURL;
- (void)loadData:(NSData *)data MIMEType:(NSString *)MIMEType textEncodingName:(NSString *)textEncodingName baseURL:(NSURL *)baseURL;
加載完了內(nèi)容才能執(zhí)行stringByEvaluatingJavaScriptFromString方法。
設(shè)計(jì)思想
筆者沒(méi)有使用自動(dòng)布局來(lái)計(jì)算，這方面也讓大家自行發(fā)揮吧。筆者只是通過(guò)常規(guī)的計(jì)算方式來(lái)學(xué)習(xí)一下基本的功能。
本demo的設(shè)計(jì)思想是通過(guò)js的方式來(lái)計(jì)算高度及替換HTML。
關(guān)鍵點(diǎn)如下：
- 獲取HTML的高度：在cell的代理方法heightForRowAtIndexPath，我們要計(jì)算出HTML的高度，這樣才能確定UIWebView的高度。
- 替換原來(lái)的HTML：在cell配置數(shù)據(jù)顯示處，直接替換掉原來(lái)的HTML，而不是通過(guò)WebView所提供的API來(lái)加載HTML，這樣就可以同步實(shí)現(xiàn)得到顯示數(shù)據(jù)
另外，在計(jì)算高度是，如何才能計(jì)算HTML的內(nèi)容的高度呢？那么我們必須借助一個(gè)UIWebView來(lái)處理了，因此，我們還要使用一個(gè)專門用來(lái)計(jì)算HTML高度的UIWebView。
計(jì)算HTML高度的UIWebView
- (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;
}
看到設(shè)置了大小了嗎？我們必須指定webview的width否則下面計(jì)算的高度是不正確的。但是高度不要指定，設(shè)置為0就可以了（因?yàn)橐坏┲付ǎ瑑?nèi)容就會(huì)自動(dòng)按照這個(gè)高度來(lái)自適應(yīng)的，高度也就不用計(jì)算了）。
計(jì)算HTML的高度
首先，我們?cè)赩iewController中添加了個(gè)屬性webView，用于負(fù)責(zé)計(jì)算HTML的高度的。因此，將它作為屬性，一直都需要使用。代碼如下：
- (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) {
// 注意不能使用雙引號(hào)
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;
}
- 先通過(guò)document.body.innerHTML這段JS來(lái)替換用于計(jì)算HTML高度的UIWebView的HTML
- document.getElementsByTagName('div')[0].scrollHeight來(lái)獲取可滾動(dòng)范圍的高度，注意，這個(gè)參數(shù)div不是固定的，要根據(jù)自己的HTML的內(nèi)容來(lái)獲取，不能直接獲取body.scrollHeight，這是不對(duì)的。對(duì)于筆者的demo中，div是最上層標(biāo)簽，所以就可以通過(guò)它獲取高度。
- 為什么要將計(jì)算的結(jié)果加上40？因?yàn)橹苯佑?jì)算出來(lái)的是不夠準(zhǔn)備的，因?yàn)檫€有margin、padding，自己看看差不多就可以了。
配置Cell
- (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);
}
對(duì)于配置cell顯示數(shù)據(jù)時(shí)，直接替換UIWebView里面的HTML就可以了，不需要通過(guò)代理回調(diào)才通知高度，如此就可以直接設(shè)置webview的frame了。
這里可沒(méi)有再計(jì)算HTML的高度了，在計(jì)算高度的時(shí)候，直接給model添加了屬性model.webHeight，用于記錄所計(jì)算出來(lái)的高度，以免重復(fù)計(jì)算。
