UITableView Cell 中嵌套WebView 解决方案

之前一般都是根据 KVO监听webView 的contentSize.height来动态适配Cell的高度。但是如果webView的内容很多，那么将会产生很大的性能问题。APP就会Crash，这就很难受了。那么怎么解决这一问题呢？下面给出我的解决方案

DEMO

首先我们来看下图层分布

Snip20181229_2.png
以scrollView 作为TableView的父控件
这里禁用scrollView 跟 webView 的滚动。滚动事件全部交给ScrollView 来做。所以我们这里要计算ScrollView的contentSize,计算好contentSize后，在scrollView的scrollViewDidScrol代理方法里根据scrollView 的contentOffset.y手动设置tableView 的contentOffset.y以及webView的contentOffset.y

如何计算scrollView 的contentSize

1.先看webView contentSize

首先webView的contentSize.height也是根据KVO监听的来的，这里我们加了一个判断

• 如果webView.contentSize.height < scrollView.height
  那么这个webView是不能滚动的，webView.height = webView.contentSize.height
• 如果webView.contentSize.height > scrollView.height
  那么这个webView是能滚动的，webView.height = scrollview.height

webview 的滚动范围是0~(webView.contentSize.height-webView.height)

2.看tableview contentSize

tableview的contentSize.height也是根据KVO监听的来的

根据以上可以分析出
scrollView.contentSize = tableview.contentSize.height + webView.contentSize.height - webView.height

分析一下滚动的几个阶段

1

scrollView.contentOffset.y < 0
当手指往下拖scrollView的我们不对tableView以及webView做任何操作

2

当scrollView.contentOffset.y > 0 && scrollView.contentOffset.y < webViewCell.origin.y时为了保持tableView相对于scrollView的位置不变。我们应该设置tableView.origin.y = scrollView.contentOffset.y。为了让tableView跟随scrollView滚动。我们设置tableView.contentOffset.y = scrollview.contentOffset.y

3

当scrollView.contentOffset.y > webViewCell.origin.y && scrollView.contentOffset.y < webViewCell.origin.y + (webview.scrollview.contentSize.height - webview.height)时。为了保持webView相对于scrollView的位置不变。我们应该不再让tableView滚动。
设置tableView.contentOffset = CGPointMake(0,webViewCell.origin.y)
让webView滚动。
设置WebView.scrollView.contentOffset = CGPointMake(0,scrollview.contentOffset.y - webViewcell.origin.y)
保持tableView相对于scrollView位置不变。
设置 tableview.origin.y = scrollView.contentOffset.y

4

当scrollView.contentOffset.y > webViewCell.origin.y + (webview.scrollview.contentSize.height - webview.height) && scrollView.contentOffset.y < tableview.contentSize.height + (webview.scrollview.contentSize.height - webview.height)时。webView已经滚动了最底部，webView不用继续滚动
设置webView的最大偏移量webView.scrollView.contentOffset = CGPointMake(0,webview.scrollview.contentSize.height - webview.height)
让tableView滚动。
设置tableView.contentOffset = CGPointMake(0,scrollview.contentOffset.y - (webView.scrollView.contentSize.height - webview.height))
保持tableView相对于scrollView位置不变。
设置 tableview.origin.y = scrollView.contentOffset.y

5

当scrollView滚动超出最大contentsize.height，不做处理

部分源码

- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSKeyValueChangeKey,id> *)change context:(void *)context{
    if (object == _webView) {
        if ([keyPath isEqualToString:@"scrollView.contentSize"]) {
            if (self.webView.scrollView.contentSize.height == _lastWebViewContentHeight) {
                return;
            }
            [self updateContainerScrollViewContentSize];
            
            _lastWebViewContentHeight = self.webView.scrollView.contentSize.height;
            _webViewHeight = _lastWebViewContentHeight > self.containerScrollView.height?self.containerScrollView.height:_lastWebViewContentHeight;
            [self.tableView reloadData];
        }
    }else if(object == _tableView) {
        if ([keyPath isEqualToString:@"contentSize"]) {
            [self updateContainerScrollViewContentSize];
        }
    }
}

- (void)updateContainerScrollViewContentSize{
    CGFloat webViewContentHeight = self.webView.scrollView.contentSize.height;
    CGFloat tableViewContentHeight = self.tableView.contentSize.height;
    
    if (webViewContentHeight == _lastWebViewContentHeight && tableViewContentHeight == _lastTableViewContentHeight) {
        return;
    }
    
    _lastWebViewContentHeight = webViewContentHeight;
    _lastTableViewContentHeight = tableViewContentHeight;
    
    self.containerScrollView.contentSize = CGSizeMake(self.containerScrollView.width, webViewContentHeight + tableViewContentHeight-_webViewHeight);

    [self scrollViewDidScroll:self.containerScrollView];
    
}

#pragma mark - UIScrollViewDelegate
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
    if (_containerScrollView != scrollView) {
        return;
    }
    
    CGFloat offsetY = scrollView.contentOffset.y;
    if (offsetY <0) {
        self.tableView.top = 0;
        self.tableView.contentOffset = CGPointMake(0, 0);
        self.webView.scrollView.contentOffset = CGPointZero;
    }else if (offsetY <_currentWebCell.top) {
        self.tableView.top = offsetY;
        self.tableView.contentOffset = CGPointMake(0, offsetY);
        self.webView.scrollView.contentOffset = CGPointZero;
    }else if (offsetY < _currentWebCell.top + _lastWebViewContentHeight - _webViewHeight) {
        self.tableView.top = offsetY;
        self.tableView.contentOffset = CGPointMake(0, _currentWebCell.top);
        self.webView.scrollView.contentOffset = CGPointMake(0, offsetY - _currentWebCell.top);
    }else if (offsetY < _lastTableViewContentHeight + _lastWebViewContentHeight - _webViewHeight) {
        self.tableView.top = offsetY;
        self.tableView.contentOffset = CGPointMake(0, offsetY-( _lastWebViewContentHeight - _webViewHeight));
        self.webView.scrollView.contentOffset = CGPointMake(0, _lastWebViewContentHeight - _webViewHeight);
    }
}