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實作，包括評論、廣告和相關推薦。

iOS 資訊詳情頁實作(WebView和TableView混合使用)iOS資訊詳情頁實作—WebView和TableView混合使用

2、今日頭條

今日頭條新聞詳情頁最外層是ScrollView，WebView和ThemedView（裡面包含TableView）是ScrollView同級SubView。

iOS 資訊詳情頁實作(WebView和TableView混合使用)iOS資訊詳情頁實作—WebView和TableView混合使用

檢視WebView的布局屬性，發現WebView并沒有被撐開，但是Y的坐标是發生變化的。

iOS 資訊詳情頁實作(WebView和TableView混合使用)iOS資訊詳情頁實作—WebView和TableView混合使用

檢視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、簡書

在《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，當然如果理清這個方案的基本思路，就不算很複雜。

iOS 資訊詳情頁實作(WebView和TableView混合使用)iOS資訊詳情頁實作—WebView和TableView混合使用

看了幾款主流新聞資訊用戶端資訊頁的實作方案，從業務需求上來說，今日頭條和騰訊新聞的實作方案是最為靈活的。簡書實作方式也不錯，但是需要去修改HTML，業務耦合性稍微高一些。

綜合對比了一下，結論是今日頭條和騰訊新聞方案比較合适我們，然後就來看看具體的實作的方法吧。

實作方法：

其實大概的方法在上面已經分析過，現在通過數學的方法精确的說明一下。在我們資訊詳情頁中，使用WebView渲染網頁内容，使用TableView渲染“相關推薦”和“資訊評論”。最外層是一個ScrollView，WebView和TableView平鋪在這個ScrollView中。

iOS 資訊詳情頁實作(WebView和TableView混合使用)iOS資訊詳情頁實作—WebView和TableView混合使用

ScrollView的ContentSize

由于ScrollView用來滾動視圖，ScrollView可以滾動到所有渲染内容，是以ScrollView的contentSize.height可通過以下公式計算（簡單來說ScrollView的ContentSizeHeight是WebView和TableView的ContentSize之和）：

ScrollView的ContentOffset

單個控件來看：

WebView的ContentOffset.y取值範圍是：

~ (WebView.contentSize.height - WebView.height)

TableView的ContentOffset.y取值範圍是：

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

将WebView放在ScrollView上來看，WebView可滾動範圍，即ScrollView.contentOffset.y取值範圍：

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

iOS 資訊詳情頁實作(WebView和TableView混合使用)iOS資訊詳情頁實作—WebView和TableView混合使用

從上圖可以看出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區間段：

同樣需要在4區間段改變TableView.Top使TableView看起來相對于ScrollView可視位置不變。在4區間段：

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;

相關代碼

下面是主要實作代碼：

#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 = ;
    _lastTableViewContentHeight = ;
}

- (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(, , self.view.width, self.view.height * );
    self.webView.top = ;
    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: webViewContentHeight:];
        }
    }else if(object == _tableView) {
        if ([keyPath isEqualToString:@"contentSize"]) {
            [self updateContainerScrollViewContentSize: webViewContentHeight:];
        }
    }
}


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

    CGFloat webViewContentHeight = flag== ?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 <=  ?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 <= ) {
        self.contentView.top = ;
        self.webView.scrollView.contentOffset = CGPointZero;
        self.tableView.contentOffset = CGPointZero;
    }else if(offsetY < webViewContentHeight - webViewHeight){
        self.webView.scrollView.contentOffset = CGPointMake(, offsetY);
        self.contentView.top = offsetY;
    }else if(offsetY < webViewContentHeight){
        self.tableView.contentOffset = CGPointZero;
        self.webView.scrollView.contentOffset = CGPointMake(, webViewContentHeight - webViewHeight);
    }else if(offsetY < webViewContentHeight + tableViewContentHeight - tableViewHeight){
        self.contentView.top = offsetY - webViewHeight;
        self.tableView.contentOffset = CGPointMake(, offsetY - webViewContentHeight);
        self.webView.scrollView.contentOffset = CGPointMake(, webViewContentHeight - webViewHeight);
    }else if(offsetY <= webViewContentHeight + tableViewContentHeight ){
        self.webView.scrollView.contentOffset = CGPointMake(, webViewContentHeight - webViewHeight);
        self.tableView.contentOffset = CGPointMake(, 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 ;
}

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

- (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(, , , );
        _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-字唐名僧

iOS 資訊詳情頁實作(WebView和TableView混合使用)iOS資訊詳情頁實作—WebView和TableView混合使用

iOS資訊詳情頁實作—WebView和TableView混合使用

我們看下業界内主流的實作方案：

1、網易新聞:

2、今日頭條

3、簡書

4、騰訊新聞

實作方法：

ScrollView的ContentSize

ScrollView的ContentOffset

WebView的Top和TableView的Top

WebView的Height 和 TableView的Height

繼續閱讀

iOS 設定badgeValue 的小技巧pragma mark -- 角标提示如果大于 0 顯示，否則隐藏

iOS webwiew加載本地html，樣式不正确？解決方法

iOS MJRefresh上拉加載功能，每次運作下面都會有“上拉加載”這句話，中英文切換？

iOS 手寫簽名的簡單實用封裝

iOS http請求不能用的解決辦法

iOS APP運作奔潰及解決辦法總結（待更新）

iOS 設定狀态欄字型顔色為白色

iOS Assertion failure in -[UITableView _configureCellForDisplay:forIndexPath:]解決辦法

iOS 動畫專題（UIView二維形變動畫與CAAnimation核心動畫）

iOS .framework靜态庫的封裝

iOS tabbar文字字型顔色修改問題

iOS 改變UIAlertController的标題、内容的字型和顔色

iOS 12正式版新特性總結

iOS 開發·适配iPhone X相關的宏和方法

Please sign in with an app-specific password. You can create one at appleid.apple.com

iOS App應用内評價