在開發(fā)中琳骡，我們可能遇到html網(wǎng)頁的展示需求弯淘，為了讓展現(xiàn)內(nèi)容靈活多變颜武，故很多新聞類的應(yīng)用都是采用html+本地原生界面進(jìn)行展示開發(fā)的您觉。
從獲取html源碼開始說起吧拙寡！在拿到html源碼的時候，我們第一步要將這些網(wǎng)頁內(nèi)容展示到webView上面琳水，顯然肆糕，這一步很簡單般堆。如果整個頁面單純的是一個網(wǎng)頁的話，基本就完工了诚啃，就是純網(wǎng)頁展示嘛淮摔！但是如果是webView嵌入到原生的頁面中，比如將webView嵌入到tableView中始赎，就會遇到一些問題和橙。最不好解決的問題可能就是webView的高度問題了。
webView這個控件大家估計都知道造垛，它是有內(nèi)容高度的魔招，就是contentSize，如果內(nèi)容高度比控件的高度大的話五辽，那么滾動的時候就是整個webView在滾動办斑，而外層的tablView你會發(fā)現(xiàn)似乎沒法接收當(dāng)前的滾動手勢。這樣其實(shí)造成了一個問題奔脐，就是本來要瀏覽tableView所要展示的內(nèi)容俄周，而結(jié)果卻成了滾動webView了，是不是很奇怪髓迎，這樣會影響用戶體驗(yàn)峦朗。
其實(shí)，解決的方法也很簡單排龄，只要將webView的contentSize的高度設(shè)置為webView的控件高度就可以了波势。這樣就不會出現(xiàn)webView的內(nèi)容滾動問題了。關(guān)鍵是如何設(shè)置這個內(nèi)容高度橄维，什么時候設(shè)置它比較合適尺铣。
其實(shí)我嘗試了很多種方案，比如在webView的代理回調(diào)中去實(shí)現(xiàn)高度的更新争舞，但是代理中凛忿，只有一個webView內(nèi)容全部加載完成以后的回調(diào)方法，如果在這個時候更新的話竞川，會有很明顯的跳躍效果店溢，真的是很痛苦。因?yàn)榫W(wǎng)頁的內(nèi)容是實(shí)時變化的委乌，如果在網(wǎng)頁加載到最后的時候床牧，在去更新它的高度，這個跳躍會更明顯遭贸。而我們所需要的其實(shí)就是實(shí)時更新網(wǎng)頁內(nèi)容的高度戈咳，只有這樣才能做到像瀏覽網(wǎng)頁一樣瀏覽tablView中的webView。所以為了解決這個問題，我用了kvo著蛙，使用kvo監(jiān)聽網(wǎng)頁內(nèi)容的高度删铃，如果高度發(fā)生變化，就去更新webView的控件高度册踩，這樣就做到了實(shí)時性泳姐，讓網(wǎng)頁的高度與網(wǎng)頁內(nèi)容的高度始終保持一致，這樣其實(shí)就達(dá)到了我們期待的效果暂吉。
就說說實(shí)現(xiàn)吧胖秒！代碼奉上，哈哈~
- (void)creatView{
self.webView = [[UIWebView alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 300)];
[self.webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://www.baidu.com"]]];
//使用kvo為webView添加監(jiān)聽慕的，監(jiān)聽webView的內(nèi)容高度
[self.webView.scrollView addObserver:self forKeyPath:@"contentSize" options:NSKeyValueObservingOptionOld | NSKeyValueObservingOptionNew context:nil];
self.tableView = [[UITableView alloc]initWithFrame:self.view.frame style:UITableViewStyleGrouped];
self.tableView.backgroundColor = [UIColor whiteColor];
self.tableView.delegate = self;
self.tableView.dataSource = self;
self.tableView.rowHeight = 80;
//設(shè)置webView為tableView的header
self.tableView.tableHeaderView = self.webView;
[self.view addSubview:self.tableView];
}
//實(shí)時改變webView的控件高度阎肝，使其高度跟內(nèi)容高度一致
- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSString *,id> *)change context:(void *)context{
if ([keyPath isEqualToString:@"contentSize"]) {
CGRect frame = self.webView.frame;
frame.size.height = self.webView.scrollView.contentSize.height;
self.webView.frame = frame;
self.tableView.tableHeaderView = self.webView;
}
}
- (void)dealloc{
//銷毀的時候別忘移除監(jiān)聽
[self.webView.scrollView removeObserver:self forKeyPath:@"contentSize"];
}
#pragma -mark- tableView的代理方法
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
return 20;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
static NSString *cellID = @"reuseCell";
UITableViewCell *tableViewCell = [tableView dequeueReusableCellWithIdentifier:cellID];
if (tableViewCell == nil) {
tableViewCell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellID];
}
tableViewCell.textLabel.text = [NSString stringWithFormat:@"%ld",indexPath.row];
return tableViewCell;
}
對應(yīng)的效果如下：
是不是很簡單，如有需要肮街，可以去git上下載我的Demo风题，我的git地址是：
https://github.com/lccdl/LCCRepository
