iOS資訊詳情頁實(shí)現(xiàn)—WebView和TableView混合使用
如果要實(shí)現(xiàn)一個底部帶有相關(guān)推薦和評論的資訊詳情頁，很自然會想到WebView和TableView嵌套使用的方案沾歪。

這個方案是WebView作為TableView的TableHeaderView或者TableView的一個Cell遏餐，然后根據(jù)網(wǎng)頁的高度動態(tài)的更新TableHeaderView和Cell的高度，這個方案邏輯上最簡單灭将，也最容易實(shí)現(xiàn)疼鸟，而且滑動效果也比較好。

然而在實(shí)際應(yīng)用中發(fā)現(xiàn)如果資訊內(nèi)容很長而且?guī)в写罅繄D片和GIf圖片的時候庙曙，APP內(nèi)存占用會暴增空镜，有被系統(tǒng)殺掉的風(fēng)險。但是在單純的使用WebView的時候內(nèi)存占用不會那么大捌朴，WebView會根據(jù)自身視口的大小動態(tài)渲染HTML內(nèi)容吴攒，不會一次性的渲染素有的HTML內(nèi)容。

這個方案只是簡單的將WebView的大小更新為HTML的實(shí)際大小砂蔽，WebView將會一次性的渲染所有的HTML內(nèi)容洼怔，因此直接使用這種方案會有內(nèi)存占用暴增的風(fēng)險。

我們看下業(yè)界內(nèi)主流的實(shí)現(xiàn)方案：
1左驾、網(wǎng)易新聞:
通過Reveal查看網(wǎng)易新聞的視圖結(jié)構(gòu)茴厉，發(fā)現(xiàn)整個新聞詳情頁都是通過H5實(shí)現(xiàn)，包括評論什荣、廣告和相關(guān)推薦矾缓。

這里寫圖片描述

2、今日頭條
今日頭條新聞詳情頁最外層是ScrollView稻爬，WebView和ThemedView（里面包含TableView）是ScrollView同級SubView嗜闻。

這里寫圖片描述

查看WebView的布局屬性，發(fā)現(xiàn)WebView并沒有被撐開桅锄，但是Y的坐標(biāo)是發(fā)生變化的琉雳。

這里寫圖片描述

查看ThemedView的布局屬性样眠，發(fā)現(xiàn)其Y坐標(biāo)是也是發(fā)生變化的，ThemedView正好位于WebView的下方翠肘。

通過以上分析基本可以推測出頭條的解決方案：

ScrollView是作為ContainerView檐束，WebView和TableView是ScrollView的SubView。
WebView和TableView無法滾動束倍，WebView和TableView的是由ScrollView滾動驅(qū)動的被丧，也就是WebView和TableView無法通過手指直接改變其contentOffset，他們的contentOffset是由ScrollView滾動時的contentOffset計算得出绪妹。
ScrollView在滾動過程中甥桂，WebView和TableView的位置也是跟著改變的，這樣就能保證WebView和TableView一直保持在視口的位置邮旷。

3黄选、簡書
在《UIWebView與UITableView的嵌套方案》一文中，作者是這樣描述的：

將webView作為主體婶肩，其加載的HTML最后留一個空白div办陷，用于確定tableView的位置。tableView加到webView.scrollView上律歼，在監(jiān)聽到webView.scrollView的內(nèi)容尺寸變化后懂诗，不斷調(diào)整tableView的位置對應(yīng)于該空白div的位置，同時將該div的尺寸設(shè)置為tableView的尺寸苗膝。

簡書是將TableView添加到WebView的ScrollView上殃恒，然后通過UIPanGestureRecognizer和UIDynamicAnimator模擬滾動產(chǎn)生偏移量來驅(qū)動TableView滑動。但是需要添加空白div辱揭，預(yù)留TableView的位置离唐。

4、騰訊新聞
騰訊新聞的實(shí)現(xiàn)方案和今日頭條的差不多问窃，只是ScrollView下比今日頭條添加了更多的SubView亥鬓，當(dāng)然如果理清這個方案的基本思路，就不算很復(fù)雜域庇。

這里寫圖片描述

看了幾款主流新聞資訊客戶端資訊頁的實(shí)現(xiàn)方案嵌戈，從業(yè)務(wù)需求上來說，今日頭條和騰訊新聞的實(shí)現(xiàn)方案是最為靈活的听皿。簡書實(shí)現(xiàn)方式也不錯熟呛，但是需要去修改HTML，業(yè)務(wù)耦合性稍微高一些尉姨。

綜合對比了一下庵朝，結(jié)論是今日頭條和騰訊新聞方案比較合適我們，然后就來看看具體的實(shí)現(xiàn)的方法吧。

實(shí)現(xiàn)方法：
其實(shí)大概的方法在上面已經(jīng)分析過九府，現(xiàn)在通過數(shù)學(xué)的方法精確的說明一下椎瘟。在我們資訊詳情頁中，使用WebView渲染網(wǎng)頁內(nèi)容侄旬，使用TableView渲染“相關(guān)推薦”和“資訊評論”肺蔚。最外層是一個ScrollView，WebView和TableView平鋪在這個ScrollView中儡羔。

這里寫圖片描述

ScrollView的ContentSize
由于ScrollView用來滾動視圖宣羊，ScrollView可以滾動到所有渲染內(nèi)容，所以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)

這里寫圖片描述

從上圖可以看出ScrollView.contentSzie.height將被分為6個的區(qū)間段。

WebView的Top和TableView的Top
由于WebView和TableView沒有完全展開澈缺，所以WebView和TableView需要動態(tài)改變它們的Top值（frame.origin.y）坪创，才能使WebView處于ScrollView的可視位置。

所以我們需要在2間段改變WebView.top,讓W(xué)ebView看起來和相對于ScrollView可視位置不變（這個時候WebView的ContentOffset.y是根據(jù)ScrollView的contentOffset.y決定的）姐赡。在2區(qū)間段：

WebView.contentOffset.y = ScrollView.contentOffset.y
1
同樣需要在4區(qū)間段改變TableView.Top使TableView看起來相對于ScrollView可視位置不變莱预。在4區(qū)間段：

TableView.contentOffset.y = ScrollView.contentOffset.y - WebView.height
1
WebView的Height 和 TableView的Height
從上圖我們可以看到在2和4區(qū)間段 WebView和TableView分別要發(fā)生滾動。因為TableView在WebView正下方项滑，如果WebView.height小于ScrollView.height 依沮，那么在這個區(qū)間段下我們能夠同時看到WebView和TableView，因為WebView正在滾動枪狂，TableView未發(fā)生滾動危喉，看起來會十分詭異。在4區(qū)間段情況也是一樣的州疾。

所以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;

相關(guān)代碼

下面是主要實(shí)現(xiàn)代碼：

#import "ViewController.h"
#import <WebKit/WebKit.h>
#import "UIView+HSKit.h"
@interface ViewController ()<UITableViewDelegate, UITableViewDataSource, UIScrollViewDelegate>

@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];

    NSString *path = @"https://www.zitangmingseng.com/p/fsdsf";
    NSMutableURLRequest *request = [[NSMutableURLRequest alloc] initWithURL:[NSURL URLWithString:path]];
    request.cachePolicy = NSURLRequestReloadIgnoringCacheData;
    [self.webView loadRequest:request];
    [self addObservers];
}


- (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 ?self.view.height :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.webView.scrollView.contentOffset = CGPointMake(0, offsetY);
        self.contentView.top = offsetY;
    }else if(offsetY < webViewContentHeight){
        self.tableView.contentOffset = CGPointZero;
        self.webView.scrollView.contentOffset = CGPointMake(0, webViewContentHeight - webViewHeight);
    }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.webView.scrollView.contentOffset = CGPointMake(0, webViewContentHeight - webViewHeight);
        self.tableView.contentOffset = CGPointMake(0, tableViewContentHeight - tableViewHeight);
        self.contentView.top = self.containerScrollView.contentSize.height - self.contentView.height;
    }else {
        //do nothing
        NSLog(@"do nothing");
    }

}

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

- (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

君凱商聯(lián)網(wǎng)-iOS-字唐名僧
————————————————
版權(quán)聲明：本文為CSDN博主「H.A.N」的原創(chuàng)文章严蓖，遵循CC 4.0 BY-SA版權(quán)協(xié)議薄嫡，轉(zhuǎn)載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/u010960265/article/details/80563668