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

2018-05-29 本文已影响1612人薛定喵的鹅

Demo源码地址：https://github.com/cnthinkcode/HSNatvieWebView

代码更新（20180602)：

修正tableview的height = contentsize.height 时计算不正确的问题。

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

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

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

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

1、网易新闻:

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

image.png

2、今日头条

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

image.png

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

image.png

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

image.png

通过以上分析基本可以推测出头条的解决方案：

ScrollView是作为ContainerView，WebView和TableView是ScrollView的SubView。
WebView和TableView无法滚动，WebView和TableView的是由ScrollView滚动驱动的，也就是WebView和TableView无法通过手指直接改变其contentOffset，他们的contentOffset是由ScrollView滚动时的contentOffset计算得出。
ScrollView在滚动过程中，WebView和TableView的位置也是跟着改变的，这样就能保证WebView和TableView一直保持在视口的位置。

3、简书

在《UIWebView与UITableView的嵌套方案》一文中，作者是这样描述的：

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

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

4、腾讯新闻

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

image.png

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

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

实现方法：

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

image.png

ScrollView的ContentSize

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

ScrollView.contentSize.height = WebView.contentSize.height + TableView.contentSize.height

ScrollView的ContentOffset

单个控件来看：

WebView的ContentOffset.y取值范围是：0 ~ (WebView.contentSize.height - WebView.height)

TableView的ContentOffset.y取值范围是：0 ~ (TableView.contentSize.height - TableView.Height)

将WebView放在ScrollView上来看，WebView可滚动范围，即ScrollView.contentOffset.y取值范围：

0 ~ (WebView.contentOffset.y - WebView.height)

将TableView放在ScrollView上来看，TableView可滚动范围，即ScrollView.contentOffset.y取值范围：

(ScrollView.contentSize.height - TableView.contentSize.Height) ~ (ScrollView.contentSize.height - TableView.height)

即：

(WebView.contentSize.height) ~ （WebView.contentSize.height + TableView.ContentSize.height - TableView.height)

image.png

从上图可以看出ScrollView.contentSzie.height将被分为6个的区间段。

WebView的Top和TableView的Top

由于WebView和TableView没有完全展开，所以WebView和TableView需要动态改变它们的Top值（frame.origin.y），才能使WebView处于ScrollView的可视位置。

所以我们需要在2间段改变WebView.top,让WebView看起来和相对于ScrollView可视位置不变（这个时候WebView的ContentOffset.y是根据ScrollView的contentOffset.y决定的）。在2区间段：

WebView.contentOffset.y = ScrollView.contentOffset.y

同样需要在4区间段改变TableView.Top使TableView看起来相对于ScrollView可视位置不变。在4区间段：

TableView.contentOffset.y = ScrollView.contentOffset.y - WebView.height

WebView的Height 和 TableView的Height

从上图我们可以看到在2和4区间段 WebView和TableView分别要发生滚动。因为TableView在WebView正下方，如果WebView.height小于ScrollView.height ，那么在这个区间段下我们能够同时看到WebView和TableView，因为WebView正在滚动，TableView未发生滚动，看起来会十分诡异。在4区间段情况也是一样的。

所以WebView的height在其contentSize 大于scrollView.height时：WebView.height = scrollView.height即可；
TableViewView的height在其contentSize 大于scrollView.height时：TableViewView.height = scrollView.height；
WebView的height在其contentSize 小于于scrollView.height时：WebView.height = WebView.contentSize.height;
TableViewView的height在其contentSize 小于scrollView.height时：TableViewView.height = TableViewView.contentSize.height;

补充1：

上面说到需要动态改变WebView和TableView的Top值（frame.origin.y），那么如何改变呢？

看过Demo代码的同学会了解到，我为WebView和TableView添加了一个ContentView，因为WebView和TableView的高度根据内容动态计算的（上面说过了），即它们的高度是一定的，TableView总是在在WebView下面，所以把他们放在一个contentView里面是完全可以的，contentView的高度是WebView和TableView的高度之和。

所以滚动中动态改变WebView和TableView的Top，也就是动态改变ContentView的Top。

下面分区间说一下ContentView的top是如何计算得到的。

offsetY：ScrollView的ContentOffset.y

1区间段：（offsetY <= 0 )

这时候是ScrollView的正常滚动效果，ContentView.top为0，WebView和TableView也不滚动，即它们的ContentOffset.y = 0。

2区间段：（0 < offsetY < WebView.contentsize.height - WebView.height )

因为webView.contentszie.height > webView.height , 说明webView是可以滚动的,这时候ScrollView的滚动应该是WebView的滚动,即webView.contentOffset.y = offsetY.

因为这时候WebView要完全显示在窗口，ScrollView的（ContentOffset.y~ContentOffset.y+ScrollView.height)是可视范围，所以使WebView.top = ContentOffset.y即可让webView完全可视。（webView.contentszie.height > WebView.height，所以WebView.height = ScrollView.height, 上面已经说过）。

TableView在此区间段不发生滚动。

3区间段：（ WebView.contentsize.height - WebView.height < offsetY < WebView.contentsize.height)

这个时候WebView已经滚动到底部（上面已经说过），不再滚动，此时：WebView.contentOffset.y = WebView.contentsize.height - WebView.height;

此时还没到TableView的可滚动范围，TableView也没滚动过，所以Table.contentOffset.y = 0。

因为此时是正常的ScrollView滚动范围，界面的滚动效果就是ScrollView的滚动。在2区间段最后位置：WebView.top = WebView.contentOffset.y，保持即可，所以WebView.top = WebwebViewContentHeight - webViewHeight 。

4区间段：（ WebView.contentsize.height < offsetY < WebView.contentsize.height + TebView.contentsize.height - TebView.height)

此时TableView可以滚动,TableView.contentOffset.y = offsetY - WebView.contentsize.height 。

TableView完全处于ScrollView可视位置, TableView.Top = offsetY，所以contentView.top = offsetY - WebView.height;

此时WebView的内容以及滚动到最底部，保持WebView.contentOffset.y = WebView.contentsize.height - WebView.height即可;

5区间段：（ WebView.contentsize.height + TebView.contentsize.height - TebView.height< offsetY < WebView.contentsize.height + TebView.contentsize.height)

此时和3区间段一样，WebView和TableView的内容都以及滚动到最底部，他们也处于ScrollView的最底部。显而易见去设置他们的ContentOffset和Top。

补充2：

思考以下问题（由特殊到一般）：

如果ScrollView里面只有一个WebView，WebView的Height最大为ScrollView.height, 如何去设置WebView的ContentOffset和Top？
如果ScrollView里面有3个或更多WebView，WebView的Height最大为ScrollView.height, 如何分别设置WebView的ContentOffset和Top？

相关代码

下面是主要实现代码：

#import "ViewController.h"
#import <WebKit/WebKit.h>
#import "UIView+HSKit.h"

@interface ViewController ()<UITableViewDelegate, UITableViewDataSource, UIScrollViewDelegate,
WKNavigationDelegate>

@property (nonatomic, strong) WKWebView     *webView;

@property (nonatomic, strong) UITableView   *tableView;

@property (nonatomic, strong) UIScrollView  *containerScrollView;

@property (nonatomic, strong) UIView        *contentView;

@end

@implementation ViewController{
    CGFloat _lastWebViewContentHeight;
    CGFloat _lastTableViewContentHeight;
}

- (void)viewDidLoad {
    [super viewDidLoad];
    [self initValue];
    [self initView];
    [self addObservers];
    
    NSString *path = @"https://www.jianshu.com/p/f31e39d3ce41";
    NSString *path2 = @"http://127.0.0.1/openItunes.html";
    
    NSMutableURLRequest *request = [[NSMutableURLRequest alloc] initWithURL:[NSURL URLWithString:path]];
    request.cachePolicy = NSURLRequestReloadIgnoringCacheData;
    [self.webView loadRequest:request];
}

- (void)dealloc{
    [self removeObservers];
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
}

- (void)initValue{
    _lastWebViewContentHeight = 0;
    _lastTableViewContentHeight = 0;
}

- (void)initView{
    [self.contentView addSubview:self.webView];
    [self.contentView addSubview:self.tableView];
    
    [self.view addSubview:self.containerScrollView];
    [self.containerScrollView addSubview:self.contentView];

    self.contentView.frame = CGRectMake(0, 0, self.view.width, self.view.height * 2);
    self.webView.top = 0;
    self.webView.height = self.view.height;
    self.tableView.top = self.webView.bottom;
}


#pragma mark - Observers
- (void)addObservers{
    [self.webView addObserver:self forKeyPath:@"scrollView.contentSize" options:NSKeyValueObservingOptionNew context:nil];
    [self.tableView addObserver:self forKeyPath:@"contentSize" options:NSKeyValueObservingOptionNew context:nil];
}

- (void)removeObservers{
    [self.webView removeObserver:self forKeyPath:@"scrollView.contentSize"];
    [self.tableView removeObserver:self forKeyPath:@"contentSize"];
}

- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSKeyValueChangeKey,id> *)change context:(void *)context{
    if (object == _webView) {
        if ([keyPath isEqualToString:@"scrollView.contentSize"]) {
            [self updateContainerScrollViewContentSize:0 webViewContentHeight:0];
        }
    }else if(object == _tableView) {
        if ([keyPath isEqualToString:@"contentSize"]) {
            [self updateContainerScrollViewContentSize:0 webViewContentHeight:0];
        }
    }
}

- (void)updateContainerScrollViewContentSize:(NSInteger)flag webViewContentHeight:(CGFloat)inWebViewContentHeight{

    CGFloat webViewContentHeight = flag==1 ?inWebViewContentHeight :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.view.width, webViewContentHeight + tableViewContentHeight);
    
    CGFloat webViewHeight = (webViewContentHeight < self.view.height) ?webViewContentHeight :self.view.height ;
    CGFloat tableViewHeight = tableViewContentHeight < self.view.height ?tableViewContentHeight :self.view.height;
    self.webView.height = webViewHeight <= 0.1 ?0.1 :webViewHeight;
    self.contentView.height = webViewHeight + tableViewHeight;
    self.tableView.height = tableViewHeight;
    self.tableView.top = self.webView.bottom;
}

#pragma mark - UIScrollViewDelegate
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
    if (_containerScrollView != scrollView) {
        return;
    }
    
    CGFloat offsetY = scrollView.contentOffset.y;
    
    CGFloat webViewHeight = self.webView.height;
    CGFloat tableViewHeight = self.tableView.height;
    
    CGFloat webViewContentHeight = self.webView.scrollView.contentSize.height;
    CGFloat tableViewContentHeight = self.tableView.contentSize.height;
    
    if (offsetY <= 0) {
        self.contentView.top = 0;
        self.webView.scrollView.contentOffset = CGPointZero;
        self.tableView.contentOffset = CGPointZero;
    }else if(offsetY < webViewContentHeight - webViewHeight){
        self.contentView.top = offsetY;
        self.webView.scrollView.contentOffset = CGPointMake(0, offsetY);
        self.tableView.contentOffset = CGPointZero;
    }else if(offsetY < webViewContentHeight){
        self.contentView.top = webViewContentHeight - webViewHeight;
        self.webView.scrollView.contentOffset = CGPointMake(0, webViewContentHeight - webViewHeight);
        self.tableView.contentOffset = CGPointZero;
    }else if(offsetY < webViewContentHeight + tableViewContentHeight - tableViewHeight){
        self.contentView.top = offsetY - webViewHeight;
        self.tableView.contentOffset = CGPointMake(0, offsetY - webViewContentHeight);
        self.webView.scrollView.contentOffset = CGPointMake(0, webViewContentHeight - webViewHeight);
    }else if(offsetY <= webViewContentHeight + tableViewContentHeight ){
        self.contentView.top = self.containerScrollView.contentSize.height - self.contentView.height;
        self.webView.scrollView.contentOffset = CGPointMake(0, webViewContentHeight - webViewHeight);
        self.tableView.contentOffset = CGPointMake(0, tableViewContentHeight - tableViewHeight);
    }else {
        //do nothing
        NSLog(@"do nothing");
    }
}

#pragma mark - UITableViewDataSouce
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
    return 1;
}

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
    return 200;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"cell"];
    if (cell == nil) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"cell"];
        cell.backgroundColor = [UIColor redColor];
    }
    
    cell.textLabel.text = @(indexPath.row).stringValue;
    return cell;
}

#pragma mark - private
- (WKWebView *)webView{
    if (_webView == nil) {
        WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init];
        _webView = [[WKWebView alloc] initWithFrame:self.view.bounds configuration:configuration];
        _webView.scrollView.scrollEnabled = NO;
        _webView.navigationDelegate = self;
    }
    
    return _webView;
}

- (UITableView *)tableView{
    if (_tableView == nil) {
        _tableView = [[UITableView alloc] initWithFrame:self.view.bounds style:UITableViewStylePlain];
        _tableView.contentInset = UIEdgeInsetsMake(0, 0, 0, 0);
        _tableView.delegate = self;
        _tableView.dataSource = self;
        _tableView.tableFooterView = [UIView new];
        _tableView.scrollEnabled = NO;

    }
    return _tableView;
}

- (UIScrollView *)containerScrollView{
    if (_containerScrollView == nil) {
        _containerScrollView = [[UIScrollView alloc] initWithFrame:self.view.bounds];
        _containerScrollView.delegate = self;
        _containerScrollView.alwaysBounceVertical = YES;
    }
    
    return _containerScrollView;
}

- (UIView *)contentView{
    if (_contentView == nil) {
        _contentView = [[UIView alloc] init];
    }
    
    return _contentView;
}

@end

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

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

1、网易新闻:

2、今日头条

3、简书

4、腾讯新闻

实现方法：

ScrollView的ContentSize

ScrollView的ContentOffset

WebView的Top和TableView的Top

WebView的Height 和 TableView的Height

补充1：

1区间段：（offsetY <= 0 )

2区间段：（0 < offsetY < WebView.contentsize.height - WebView.height )

3区间段：（ WebView.contentsize.height - WebView.height < offsetY < WebView.contentsize.height)

4区间段：（ WebView.contentsize.height < offsetY < WebView.contentsize.height + TebView.contentsize.height - TebView.height)

5区间段：（ WebView.contentsize.height + TebView.contentsize.height - TebView.height< offsetY < WebView.contentsize.height + TebView.contentsize.height)

补充2：

相关代码

猜你喜欢

热点阅读