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作为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


https://mp.weixin.qq.com/s/qtrrMXgTpj4OPDxmMBjNjw

闲鱼如何解决iOS环境搭建与APP打包速度问题

随着Flutter等跨端框架的出现,业务开发同学经常需要在Android/IOS上跨端进行业务开发,问题定位等。新的不熟悉的环境的搭建总会遇到各种各样的问题,导致搭建失败,特别是IOS开发环境,是最复杂的,不仅环境搭建繁琐,而且切分支后的打包速度很慢,所以我们设计实现了两个工具,用于优化闲鱼IOS开发体验。

发布于:11天以前  |  67次阅读  |  详细内容 »

iOS14 隐私适配及部分解决方案

在刚刚结束的线上 WWDC 2020 发布会上苹果向我们展示了新的 iOS14 系统。iOS14 的适配,很重要的一环就集中在用户隐私和安全方面。 在 iOS13 及以前,当用户首次访问应用程序时,会被要求开放大量权限,比如相册、定位、联系人,实际上该应用可能仅仅需要一个选择图片功能,却被要求开放整个照片库的权限,这确实是不合理的。对于相册,在 iOS14 中引入了 “LimitedPhotos Library” 的概念,用户可以授予应用访问其一部分的照片,对于应用来说,仅能读取到用户选择让应用来读取的照片,让我们看到了 Apple 对于用户隐私的尊重。这仅仅是一部分,在iOS14 中,可以看到诸多类似的保护用户隐私的措施,也需要我们升级适配。 最近在调研 iOS14的适配方案,本文主要分享一下 iOS14 上对于隐私授权的变更和部分适配方案,欢迎补充指正。

发布于:11天以前  |  62次阅读  |  详细内容 »

iOS 隐形水印之 LSB 实现

在音视频的领域里,其涵盖的知识点繁多,学习方向也很多。而本篇就是一篇比较入门的文章它简单地介绍如何在 iOS 上读取图片 RGB 数据,并通过修改最后一位 bit 来记录数字水印的信息下面就介绍《隐形水印之 iOS 实现》

发布于:1月以前  |  202次阅读  |  详细内容 »

声明式 UIKit 在有赞美业的实践

随着 Flutter 的出现,UI 开发形式也越来越趋向相同,Flutter,SwiftUI,RN,Weex 等新兴UI框架无一意外都使用了声明式的 UI 开发模式,和支持了FlexBox的布局系统。

发布于:1月以前  |  210次阅读  |  详细内容 »

iOS 架构谈:剖析 Uber 的 RIB 架构

加入 UBER 是我的 iOS 工程师职业的新篇章,所有这一切都始于称为 RIB 的新架构。该架构背后的主要思想是,应用程序应由业务逻辑而不是视图驱动。展示 RIB 的最佳方法是一棵树:每个 RIB 都是一个节点,并且它可以不包含子节点,也可以包括一个或多个子节点。

发布于:1月以前  |  193次阅读  |  详细内容 »

如何调试支付宝(iOS)

最近在做的一件事情,从代码层面分析下各家小程序(微信、头条、支付宝、百度)的启动性能,探究各家小程序的实现细节和差异。

发布于:1月以前  |  219次阅读  |  详细内容 »

iOS GPUImage源码解读(一)

最近在不断学习、使用的过程中,有了更深刻的理解,特来写一篇源码解读的文章详细介绍下核心代码的具体实现。至于括号里的“一”,主要是觉得GPUImage还有很多值得深入学习和分享的内容,后续的学习和使用过程中有新的心得体会还会继续给大家分享。

发布于:1月以前  |  231次阅读  |  详细内容 »

iOS开发之Masonry框架源码解析

Masonry是iOS在控件布局中经常使用的一个轻量级框架,Masonry让NSLayoutConstraint使用起来更为简洁。Masonry简化了NSLayoutConstraint的使用方式,让我们可以以链式的方式为我们的控件指定约束。本篇博客的主题不是教你如何去使用Masonry框架的,而是对Masonry框架的源码进行解析,让你明白Masonry是如何对NSLayoutConstraint进行封装的,以及Masonry框架中的各个部分所扮演的角色是什么样的。在Masonry框架中,仔细的品味干货还是很多的。Masonry框架是Objective-C版本的,如果你的项目是Swift语言的,那么就得使用SnapKit布局框架了。SnapKit其实就是Masonry的Swift版本,两者虽然实现语言不同,但是实现思路大体一致。

发布于:1月以前  |  219次阅读  |  详细内容 »

iOS 验证码输入一种实现思路

如图所示,现在很多App采用了类似下划线、方块等方式的验证码输入,直观美观!对于这种效果的实现方式,大概有以下几种方式:

发布于:2月以前  |  200次阅读  |  详细内容 »

最多阅读

快速配置 Sign In with Apple 1年以前  |  2626次阅读
给数组NSMutableArray排序 1年以前  |  2161次阅读
开篇 关于iOS越狱开发 1年以前  |  2056次阅读
在越狱的iPhone设置上使用lldb调试 1年以前  |  2028次阅读
UITableViewCell高亮效果实现 1年以前  |  1997次阅读
APP适配iOS11 1年以前  |  1968次阅读
App Store 审核指南[2017年最新版本] 1年以前  |  1745次阅读
关于Xcode不能打印崩溃日志 1年以前  |  1724次阅读
所有iPhone设备尺寸汇总 1年以前  |  1722次阅读
使用 GPUImage 实现一个简单相机 1年以前  |  1695次阅读
使用ssh访问越狱iPhone的两种方式 1年以前  |  1662次阅读
使用ssh 访问越狱iPhone的两种方式 1年以前  |  1597次阅读
UIDevice的简单使用 1年以前  |  1502次阅读
为对象添加一个释放时触发的block 1年以前  |  1422次阅读
使用最高权限操作iPhone手机 1年以前  |  1386次阅读