ioswebview混编_iOS资讯详情页实现—WebView和TableView混合使用

iOS资讯详情页实现—WebView和TableView混合使用

如果要实现一个底部带有相关推荐和评论的资讯详情页，很自然会想到WebView和TableView嵌套使用的方案。

这个方案是WebView作为TableView的TableHeaderView或者TableView的一个Cell，然后根据网页的高度动态的更新TableHeaderView和Cell的高度，这个方案逻辑上最简单，也最容易实现，而且滑动效果也比较好。

然而在实际应用中发现如果资讯内容很长而且带有大量图片和GIf图片的时候，APP内存占用会暴增，有被系统杀掉的风险。但是在单纯的使用WebView的时候内存占用不会那么大，WebView会根据自身视口的大小动态渲染HTML内容，不会一次性的渲染素有的HTML内容。这个方案只是简单的将WebView的大小更新为HTML的实际大小，WebView将会一次性的渲染所有的HTML内容，因此直接使用这种方案会有内存占用暴增的风险。

我们看下业界内主流的实现方案：

1、网易新闻:

通过Reveal查看网易新闻的视图结构，发现整个新闻详情页都是通过H5实现，包括评论、广告和相关推荐。

2、今日头条

今日头条新闻详情页最外层是ScrollView，WebView和ThemedView(里面包含TableView)是ScrollView同级SubView。

查看WebView的布局属性，发现WebView并没有被撑开，但是Y的坐标是发生变化的。

查看ThemedView的布局属性，发现其Y坐标是也是发生变化的，ThemedView正好位于WebView的下方。

通过以上分析基本可以推测出头条的解决方案：ScrollView是作为ContainerView，WebView和TableView是ScrollView的SubView。

WebView和TableView无法滚动，WebView和TableView的是由ScrollView滚动驱动的，也就是WebView和TableView无法通过手指直接改变其contentOffset，他们的contentOffset是由ScrollView滚动时的contentOffset计算得出。

ScrollView在滚动过程中，WebView和TableView的位置也是跟着改变的，这样就能保证WebView和TableView一直保持在视口的位置。

3、简书将webView作为主体，其加载的HTML最后留一个空白div，用于确定tableView的位置。tableView加到webView.scrollView上，在监听到webView.scrollView的内容尺寸变化后，不断调整tableView的位置对应于该空白div的位置，同时将该div的尺寸设置为tableView的尺寸。

简书是将TableView添加到WebView的ScrollView上，然后通过UIPanGestureRecognizer和UIDynamicAnimator模拟滚动产生偏移量来驱动TableView滑动。但是需要添加空白div，预留TableView的位置。

4、腾讯新闻

腾讯新闻的实现方案和今日头条的差不多，只是ScrollView下比今日头条添加了更多的SubView，当然如果理清这个方案的基本思路，就不算很复杂。

看了几款主流新闻资讯客户端资讯页的实现方案，从业务需求上来说，今日头条和腾讯新闻的实现方案是最为灵活的。简书实现方式也不错，但是需要去修改HTML，业务耦合性稍微高一些。

综合对比了一下，结论是今日头条和腾讯新闻方案比较合适我们，然后就来看看具体的实现的方法吧。

实现方法：

其实大概的方法在上面已经分析过，现在通过数学的方法精确的说明一下。在我们资讯详情页中，使用WebView渲染网页内容，使用TableView渲染“相关推荐”和“资讯评论”。最外层是一个ScrollView，WebView和TableView平铺在这个ScrollView中。

ScrollView的ContentSize

由于ScrollView用来滚动视图，ScrollView可以滚动到所有渲染内容，所以ScrollView的contentSize.height可通过以下公式计算(简单来说ScrollView的ContentSizeHeight是WebView和TableView的ContentSize之和)：

ScrollView.contentSize.height = W