iOS WKWebView+UITableView混排

微信扫一扫,分享到朋友圈

iOS WKWebView+UITableView混排

目录

做内容展示页的时候,经常会用到 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:

webView作为 tableViewHeader , 撑开 webView ,显示渲染全部内容,当内容过多时,比如大量高清图片时,容易造成内存暴涨(不建议使用),此方案简单粗暴 , 仅适用于内容少的场景,具体实现不在此赘述,直接看代码。

方案2:

简书的内容页实现方案 : UIWebView与UITableView的嵌套方案

tableView 加到 webView.scrollView 上, webView 加载的HTML最后留一个 空白占位div ,用于确定 tableView 的位置,在监听到 webView.scrollView.contentSize 变化后,不断调整 tableView 的位置,同时将该 div 的尺寸设置为 tableView 的尺寸。禁用 tableViewwebView.scrollViescrollEnabled = NO ,通过添加pan手势,手动调整 contentOffsettableView 的最大高度为屏幕高度,当内容不足一屏时,高度为内容高度。

方案3(推荐):

webView作为 tableView 的Header, 但不撑开 webView 。禁用 tableViewwebView.scrollVie 的scrollEnabled = NO,通过添加 pan 手势,手动调整 contentOffsetwebView 的最大高度为屏幕高度,当内容不足一屏时,高度为内容高度。和方案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 中的动力学/仿真物理学模块,去实现松手后的惯性滑动和边缘反弹效果,涉及的类主要包括 UIDynamicAnimatorUIDynamicItemBehaviorUIAttachmentBehaviorUIDynamicItem ,我也利用这些类自定义继承于UIView的类实现UIScrollView的效果,详情可以去看代码。

方案4(推荐):

[scrollView addSubView: webView & tableView]; scrollView.contenSize = webView.contenSize + tableView.contenSize; webViewtableView 的最大高度为一屏高,并禁用 scrollEnabled=NO ,然后根据 scrollView 的滑动偏移量调整 webViewtableView 的展示区域 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 {
}
}
复制代码

又来?NATE警告称本周末美国各地的5G基站可能遭到破坏

上一篇

[译] 你理解数据库死锁发生的原因吗?

下一篇

你也可能喜欢

iOS WKWebView+UITableView混排

长按储存图像,分享给朋友