在开发中，我们可能遇到html网页的展示需求，为了让展现内容灵活多变，故很多新闻类的应用都是采用html+本地原生界面进行展示开发的。
从获取html源码开始说起吧！在拿到html源码的时候，我们第一步要将这些网页内容展示到webView上面，显然，这一步很简单。如果整个页面单纯的是一个网页的话，基本就完工了，就是纯网页展示嘛！但是如果是webView嵌入到原生的页面中，比如将webView嵌入到tableView中，就会遇到一些问题。最不好解决的问题可能就是webView的高度问题了。
webView这个控件大家估计都知道，它是有内容高度的，就是contentSize，如果内容高度比控件的高度大的话，那么滚动的时候就是整个webView在滚动，而外层的tablView你会发现似乎没法接收当前的滚动手势。这样其实造成了一个问题，就是本来要浏览tableView所要展示的内容，而结果却成了滚动webView了，是不是很奇怪，这样会影响用户体验。
其实，解决的方法也很简单，只要将webView的contentSize的高度设置为webView的控件高度就可以了。这样就不会出现webView的内容滚动问题了。关键是如何设置这个内容高度，什么时候设置它比较合适。
其实我尝试了很多种方案，比如在webView的代理回调中去实现高度的更新，但是代理中，只有一个webView内容全部加载完成以后的回调方法，如果在这个时候更新的话，会有很明显的跳跃效果，真的是很痛苦。因为网页的内容是实时变化的，如果在网页加载到最后的时候，在去更新它的高度，这个跳跃会更明显。而我们所需要的其实就是实时更新网页内容的高度，只有这样才能做到像浏览网页一样浏览tablView中的webView。所以为了解决这个问题，我用了kvo，使用kvo监听网页内容的高度，如果高度发生变化，就去更新webView的控件高度，这样就做到了实时性，让网页的高度与网页内容的高度始终保持一致，这样其实就达到了我们期待的效果。
就说说实现吧！代码奉上，哈哈~
- (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添加监听，监听webView的内容高度
[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;
//设置webView为tableView的header
self.tableView.tableHeaderView = self.webView;
[self.view addSubview:self.tableView];
}
//实时改变webView的控件高度，使其高度跟内容高度一致
- (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{
//销毁的时候别忘移除监听
[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;
}
对应的效果如下：
是不是很简单，如有需要，可以去git上下载我的Demo，我的git地址是：
https://github.com/lccdl/LCCRepository
