iOS|iOS WKWebView+UITableView 混排实现 iOSWKWebView+UITableView混排实现

Python实战社群
Java实战社群
长按识别下方二维码，按需求添加

文章图片

扫码关注添加客服
进Python社群▲

文章图片

扫码关注添加客服
进Java社群▲
作者丨且行且珍惜
https://juejin.im/user/5c00d97b6fb9a049fb436288

文章图片

目录做内容展示页的时候，经常会用到WKWebView+UITableView的混排功能，现在此做一个总结，该功能的实现我采用了四种方法。
1、 tableView.tableHeaderView = webView 撑开webView
2、[webView.scrollView addSubview:tableView] + 占位Div
3、tableView.tableHeaderView = webView 不撑开webView (推荐)
4、scrollView addSubView: webView & tableView (推荐)
5、结尾
方案1： 【iOS|iOS WKWebView+UITableView 混排实现】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 { } }

5、结尾涉及 WKWebView的使用、WKWebView+UITableView混排、UIScrollView实现原理、WKWebView离线缓存功能等更多内容都在 https://github.com/wsl2ls/iOS_Tips