iOS WKWebView+UITableView混排

目錄

作內容展現頁的時候，常常會用到WKWebView+UITableView的混排功能，如今此作一個總結，該功能的實現我採用了四種方法。

• 一、 tableView.tableHeaderView = webView 撐開webView
• 二、[webView.scrollView addSubview:tableView] + 佔位Div
• 三、tableView.tableHeaderView = webView 不撐開webView (推薦)
• 四、scrollView addSubView: webView & tableView (推薦)
• 五、結尾

方案1：

webView做爲tableView的Header, 撐開webView，顯示渲染所有內容，當內容過多時，好比大量高清圖片時，容易形成內存暴漲（不建議使用），此方案簡單粗暴 , 僅適用於內容少的場景，具體實現不在此贅述，直接看代碼。

方案2：

簡書的內容頁實現方案 : UIWebView與UITableView的嵌套方案

將 tableView 加到 webView.scrollView 上, webView 加載的HTML最後留一個空白佔位div，用於肯定 tableView 的位置，在監聽到webView.scrollView.contentSize變化後，不斷調整tableView的位置，同時將該div的尺寸設置爲tableView的尺寸。禁用tableView和webView.scrollVie的scrollEnabled = NO，經過添加pan手勢,手動調整 contentOffset。tableView的最大高度爲屏幕高度，當內容不足一屏時，高度爲內容高度。

方案3(推薦)：

webView做爲tableView的Header, 但不撐開webView。禁用tableView和webView.scrollVie的scrollEnabled = NO，經過添加pan手勢,手動調整contentOffset。webView的最大高度爲屏幕高度，當內容不足一屏時，高度爲內容高度。和方案2相似，可是不須要插入佔位Div。主要代碼以下：

• 步驟1：初始化配置

//禁用自帶的滑動功能
 _webView.scrollView.scrollEnabled = NO;
 _tableView.scrollEnabled = NO;
// 給父視圖添加拖動手勢
 [self.view addGestureRecognizer:self.panRecognizer];
複製代碼

• 步驟2：手動調整contentOffset

/// 拖拽手勢，模擬UIScrollView滑動
- (void)handlePanGestureRecognizer:(UIPanGestureRecognizer *)recognizer {
    switch (recognizer.state) {
        case UIGestureRecognizerStateBegan: {
            //開始拖動，移除以前全部的動力行爲
            [self.dynamicAnimator removeAllBehaviors];
        }
            break;
        case UIGestureRecognizerStateChanged: {
            CGPoint translation = [recognizer translationInView:self.view];
            //拖動過程當中調整scrollView.contentOffset
            [self scrollViewsSetContentOffsetY:translation.y];
            [recognizer setTranslation:CGPointZero inView:self.view];
        }
            break;
        case UIGestureRecognizerStateEnded: {
            // 這個if是爲了不在拉到邊緣時，以一個很是小的初速度鬆手不回彈的問題
            if (fabs([recognizer velocityInView:self.view].y) < 120) {
                if ([self.tableView sl_isTop] &&
                    [self.webView.scrollView sl_isTop]) {
                    //頂部
                    [self performBounceForScrollView:self.webView.scrollView isAtTop:YES];
                } else if ([self.tableView sl_isBottom] &&
                           [self.webView.scrollView sl_isBottom]) {
                    //底部
                    if (self.tableView.frame.size.height < self.view.sl_height) { //tableView不足一屏，webView bounce
                        [self performBounceForScrollView:self.webView.scrollView isAtTop:NO];
                    } else {
                        [self performBounceForScrollView:self.tableView isAtTop:NO];
                    }
                }
                return;
   }
複製代碼

• 步驟3：模擬慣性和邊緣反彈效果

//動力元素 力的操做對象
 SLDynamicItem *item = [[SLDynamicItem alloc] init];
 item.center = CGPointZero;
  __block CGFloat lastCenterY = 0;
//慣性力
 UIDynamicItemBehavior *inertialBehavior = [[UIDynamicItemBehavior alloc] initWithItems:@[item]];
 //給item添加初始線速度 手指鬆開時的速度
 [inertialBehavior addLinearVelocity:CGPointMake(0, -[recognizer velocityInView:self.view].y) forItem:item];
       //減速度  無速度阻尼
     inertialBehavior.resistance = 2;
       __weak typeof(self) weakSelf = self;
      inertialBehavior.action = ^{
        //慣性力 移動的距離
     [weakSelf scrollViewsSetContentOffsetY:lastCenterY - item.center.y];
     lastCenterY = item.center.y;
 };
  //注意，self.inertialBehavior 的修飾符是weak，慣性力結束中止以後，會釋放inertialBehavior對象，self.inertialBehavior = nil
  self.inertialBehavior = inertialBehavior;
     [self.dynamicAnimator addBehavior:inertialBehavior];
 }

//反彈力
- (void)performBounceForScrollView:(UIScrollView *)scrollView isAtTop:(BOOL)isTop {
    if (!self.bounceBehavior) {
        //移除慣性力
        [self.dynamicAnimator removeBehavior:self.inertialBehavior];           //吸附力操做元素
        SLDynamicItem *item = [[SLDynamicItem alloc] init];
        item.center = scrollView.contentOffset;
        //吸附力的錨點Y
        CGFloat attachedToAnchorY = 0;
        if (scrollView == self.tableView) {
            //頂部時吸附力的Y軸錨點是0  底部時的錨點是Y軸最大偏移量
            attachedToAnchorY = isTop ? 0 : [self.tableView sl_maxContentOffsetY];
        }else {
            attachedToAnchorY = 0;
        }
        //吸附力
        UIAttachmentBehavior *bounceBehavior = [[UIAttachmentBehavior alloc] initWithItem:item attachedToAnchor:CGPointMake(0, attachedToAnchorY)];
        //吸附點的距離
        bounceBehavior.length = 0;
        //阻尼/緩衝
        bounceBehavior.damping = 1;
        //頻率
        bounceBehavior.frequency = 2;
        bounceBehavior.action = ^{
            scrollView.contentOffset = CGPointMake(0, item.center.y);
        };
        self.bounceBehavior = bounceBehavior;
        [self.dynamicAnimator addBehavior:bounceBehavior];
    }
}


複製代碼

方案2和3依賴於 UIKit 中的動力學/仿真物理學模塊，去實現鬆手後的慣性滑動和邊緣反彈效果，涉及的類主要包括 UIDynamicAnimator、UIDynamicItemBehavior、UIAttachmentBehavior、UIDynamicItem，我也利用這些類自定義繼承於UIView的類實現UIScrollView的效果，詳情能夠去看代碼。

方案4(推薦)：

[scrollView addSubView: webView & tableView]; scrollView.contenSize = webView.contenSize + tableView.contenSize; webView和tableView的最大高度爲一屏高，並禁用scrollEnabled=NO，而後根據scrollView的滑動偏移量調整webView和tableView的展現區域contenOffset。

• 步驟1：肯定webView和tableView的高度

//添加觀察者 監聽webView 和tableView 的contentSize
- (void)addKVO{
    [self.webView addObserver:self
                   forKeyPath:NSStringFromSelector(@selector(estimatedProgress))
                      options:NSKeyValueObservingOptionNew
                      context:nil];
    [self.webView addObserver:self forKeyPath:@"scrollView.contentSize" options:NSKeyValueObservingOptionNew context:nil];
    [self.tableView addObserver:self forKeyPath:@"contentSize" options:NSKeyValueObservingOptionNew context:nil];
}
/// 根據WebView和tableView的ContentSize變化，調整父scrollView.contentSize、WebView和tableView的高度位置、展現區域
- (void)updateContainerScrollViewContentSize{
    
    self.containerScrollView.contentSize = CGSizeMake(self.view.sl_width, _webViewContentHeight + _tableViewContentHeight);
    
    //若是內容不滿一屏，則webView、tableView高度爲內容高，超過一屏則最大高爲一屏高
    CGFloat webViewHeight = (_webViewContentHeight < self.view.sl_height) ? _webViewContentHeight : self.view.sl_height ;
    CGFloat tableViewHeight = _tableViewContentHeight < self.view.sl_height ? _tableViewContentHeight : self.view.sl_height;
    
    self.contentView.sl_height = webViewHeight + tableViewHeight;
    self.webView.sl_height = webViewHeight <= 0.1 ?0.1 :webViewHeight;
    self.tableView.sl_height = tableViewHeight;
    self.tableView.sl_y = self.webView.sl_height;
    
    //更新展現區域
    [self scrollViewDidScroll:self.containerScrollView];
}

複製代碼

• 步驟2：根據scrollView的偏移量調整webView和tableView的的位置和偏移量

#pragma mark - UIScrollViewDelegate
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
    if (_containerScrollView != scrollView) {
        return;
    }
    CGFloat offsetY = scrollView.contentOffset.y;
    CGFloat webViewHeight = self.webView.sl_height;
    CGFloat tableViewHeight = self.tableView.sl_height;
     if (offsetY <= 0) {
        //頂部下拉
        self.contentView.sl_y = 0;
        self.webView.scrollView.contentOffset = CGPointZero;
        self.tableView.contentOffset = CGPointZero;
    }else if(offsetY < _webViewContentHeight - webViewHeight){
        //父scrollView偏移量的展現範圍在webView的最大偏移量內容區域
        //contentView相對位置保持不動，調整webView的contentOffset
        self.contentView.sl_y = offsetY;
        self.webView.scrollView.contentOffset = CGPointMake(0, offsetY);
        self.tableView.contentOffset = CGPointZero;
    }else if(offsetY < _webViewContentHeight){
        //webView滑到了底部
        self.contentView.sl_y = _webViewContentHeight - webViewHeight;
        self.webView.scrollView.contentOffset = CGPointMake(0, _webViewContentHeight - webViewHeight);
        self.tableView.contentOffset = CGPointZero;
    }else if(offsetY < _webViewContentHeight + _tableViewContentHeight - tableViewHeight){
        //父scrollView偏移量的展現範圍到達tableView的最大偏移量內容區域
        //調整tableView的contentOffset
        self.contentView.sl_y = offsetY - webViewHeight;
        self.tableView.contentOffset = CGPointMake(0, offsetY - _webViewContentHeight);
        self.webView.scrollView.contentOffset = CGPointMake(0, _webViewContentHeight - webViewHeight);
    }else if(offsetY <= _webViewContentHeight + _tableViewContentHeight ){
        //tableView滑到了底部
        self.contentView.sl_y = self.containerScrollView.contentSize.height - self.contentView.sl_height;
        self.webView.scrollView.contentOffset = CGPointMake(0, _webViewContentHeight - webViewHeight);
        self.tableView.contentOffset = CGPointMake(0, _tableViewContentHeight - tableViewHeight);
    }else {
    }
}

複製代碼

五、結尾

涉及 WKWebView的使用、WKWebView+UITableView混排、UIScrollView實現原理、WKWebView離線緩存功能 等更多內容都在 github.com/wsl2ls/iOS_…

iOS_Tips集合簡介：
一、暗黑模式
二、AppleID登陸應用
三、AVFoundation 高仿微信相機拍攝和編輯
四、AVFoundation 人臉檢測
五、AVFoundation 實時濾鏡
六、GPUImage框架的使用
七、VideoToolBox和AudioToolBox音視頻編解碼
八、OpenGL ES學習
九、LeetCode算法練習
十、鍵盤和UIMenuController的並存問題
十一、iOS Crash防禦
十二、WKWebView相關