多层 UIScrollView 嵌套滚动解决方案

时间  2019-11-07
标签 多层 uiscrollview 嵌套 滚动 解决 方案 繁體版
原文   原文链接

原文地址：jiar.me/article/Mul…git

本文旨在对于SegementSlide库实现原理的讲解，有兴趣的同窗，欢迎前往Github地址浏览。github

SegementSlide

背景

现在的app中，愈来愈多地采用以下图所示的设计，通常用在诸如『用户主页』、『话题详情页』、『专题详情页』等这些场景。一般，这些场景会带有头部视图（头部视图可能要求支持滚动渐变），下面紧接着的是分页控件，最下面是滚动列表。编程

以下图所示：swift

各类方案以及优缺点

为了方便下面的说明，在开始以前，先约定几个说法，下面的各类方案，大都离不开在最底层放上一个UIScrollView（竖直方向滚动），咱们称之为rootScrollView。不管分页控件下方有多少个子界面，总有一个当前界面，咱们称当前界面下的UIScrollView（竖直方向滚动）为childScrollView。缓存

I 控制isScrollEnabled属性

这是咱们第一时间能想到的方案，经过给rootScrollView和childScrollView实现UIScrollViewDelegate，并在func scrollViewDidScroll(_ scrollView: UIScrollView)方法中实时将scrollView.contentOffset.y与临界值进行对比从而修改二者scrollView的isScrollEnabled属性值来达到目的。bash

大体代码以下微信

func scrollViewDidScroll(_ scrollView: UIScrollView) {
    if scrollView == rootScrollView {
        if scrollView.contentOffset.y >= headerStickyHeight {
            scrollView.contentOffset.y = headerStickyHeight
            rootScrollView.isScrollEnabled = false
            childScrollView.isScrollEnabled = true
        }
    } else {
        if scrollView.contentOffset.y <= 0 {
            scrollView.contentOffset.y = 0
            childScrollView.isScrollEnabled = false
            rootScrollView.isScrollEnabled = true
        }
    }
}
复制代码

方法简单，可是有个不太能接受的交互问题，但凡将isScrollEnabled设置为false，此次的滑动手势就会被打断，从表现上来看，就是滑动到临界值时滑动会被中断。app

II 自定义滑动手势

在这篇文章这篇文章中，做者提供了一种利用自定义手势的方式来实现。 可是，只是添加普通的滑动手势是不够的，UIScrollView是自带阻尼效果的，所以引入了UIDynamicAnimator来实现阻尼效果。 这是一种不错的思路。不过彻底自定义手势来实现UIScrollView的效果，须要考虑的细节过多，挺难处理得跟系统的效果一致（写这篇文章的时候，下载了做者提供的源码，commitID为ff7b76f8468bc87fea8ea6975d8b9fe1173ab031，在真机iPhone X上运行，感受仍是有交互上的问题）。此外，由于是自定义手势，手势不是直接做用在UIScrollView上的，UIScrollView的ScrollIndicator是没法显示的，经过改变UIScrollView的contentOffset，其ScrollIndicator也是没法显示的，必需要手势做用在UIScrollView上才行。使用UIScrollView的flashScrollIndicators()来强迫ScrollIndicator显示出来？...可能还真行，不过我没试过，感受太粗暴了。ide

III 手势穿透

这应该是目前相对主流的一种实现方式，好比在这篇文章中，即是介绍了这种方式。据我观察Twitter和微博的用户主页多是使用这种方式实现的（写这篇文章的时候，Twitter版本为：7.41.2，微博版本为：9.2.0，推测错了的话还望见谅）工具

该方案的核心为有两点：

  • 让滑动手势穿透使得rootScrollView和childScrollView都能接收到滑动手势（由于手势是做用到UIScrollview上的，天然是能显示ScrollIndicator的）。作法是让rootScrollView实现UIGestureRecognizerDelegate的代理方法func gestureRecognizer(_ gestureRecognizer: UIGestureRecognizer, shouldRecognizeSimultaneouslyWith otherGestureRecognizer: UIGestureRecognizer) -> Bool，并在适当的时机返回true。

这部分的代码大体以下：

class SegementSlideScrollView: UIScrollView, UIGestureRecognizerDelegate {
    
    func gestureRecognizer(_ gestureRecognizer: UIGestureRecognizer, shouldRecognizeSimultaneouslyWith otherGestureRecognizer: UIGestureRecognizer) -> Bool {
        return true
    }
    
}
复制代码

固然只是如此的话，是不够的，这样的结果是滑动的时候，致使rootScrollView和childScrollView一块儿滚动。

  • 增长两个标志位来控制什么时候容许rootScrollView滚动，以及什么时候容许childScrollView。

这部分代码大体以下：

func scrollViewDidScroll(_ scrollView: UIScrollView) {
    if scrollView == rootScrollView {
        if !canParentViewScroll {
            rootScrollView.contentOffset.y = headerStickyHeight // point A
            canChildViewScroll = true
        } else if scrollView.contentOffset.y >= headerStickyHeight {
            rootScrollView.contentOffset.y = headerStickyHeight
            canParentViewScroll = false
            canChildViewScroll = true
        }
    } else {
        if !canChildViewScroll {
            childScrollView.contentOffset.y = 0 // point B
        } else if scrollView.contentOffset.y <= 0 {
            canChildViewScroll = false
            canParentViewScroll = true
        }
    }
}
复制代码

如上代码所示，控制rootScrollView或者是childScrollView不可滚动的方式是将二者的contentOffset.y设置为一个固定值（见注释point A和point B），并非简单地将isScrollEnabled设置false而已。

没问题了？不，也是有不足之处的： 在第一个界面使用手指向上滑动，让头部视图彻底被隐藏后再向上滑动一些，让childScrollView的contentOffset.y处于大于0的状态，随后，左右切换到第二个界面，使用手指向下滑动，彻底拉出头部视图，而后再切换回第一个界面，这个时候，使用手指在屏幕上稍微滑动一下，rootScrollView或是childScrollView的contentOffset.y会突变，从表现上看，就是发生『位置突变现象』

问题产生的缘由是什么？ canParentViewScroll和childScrollView始终为一对相反的值，浏览上诉代码，会发如今point A和point B处，将rootScrollView或者是childScrollView的contentOffset.y设置为了一个固定值。这样的处理，当始终在同一个界面滑动的时候，不会有问题，可是，在切换界面后，因为rootScrollView是共用的，在新界面改动了rootScrollView的contentOffset.y，切换回原界面后，稍作滑动，定会执行point A或是point B其中的一处代码，从而致使『位置突变现象』。

在微博和Twitter中对此问题作了简单的处理。微博上，在切换至新界面以前，将原界面的childScrollView的contentOffset.y值重置为了0。Twitter上，则是在合适的时机作了重置。这也是推测二者多是使用了该方案的缘由。

以下图所示：

SegementSlide的需求

SegementSlide是使用 方案III 来实现的。

此外我但愿它还能支持一些别的特性：

  1. 简单易用的接口
  2. 通常使用 方案III 实现的例子，大都只是支持在rootScrollView上实现阻尼效果，我但愿也能在childScrollView上实现，能够选择任意一个阻尼来使用。（有阻尼，就能够配套下拉刷新工具来使用了）
  3. 通常使用 方案III 实现的例子，大都是须要手指在子视图部分滑动才能实现联动，但愿也能在头部滑动实现联动
  4. 既能够支持使用头部视图，也能够不须要头部视图
  5. 头部视图可使用简单的接口实现滚动渐变效果（navigation上随着滚动改变背景色、标题、leftItem颜色、rightItem颜色，或是背景色透明之类的），也能够自定义渐变效果
  6. 子控件既可结合一块儿使用，也能够单独使用
  7. 分页标题旁能够显示红点 ...

对此，大都已经实现：

  1. 看下以下示例代码，是否还算简单易用：
import SegementSlide

class HomeViewController: SegementSlideViewController {

    ......

    override var headerHeight: CGFloat? {
        return view.bounds.height/4
    }
    
    override var headerView: UIView? {
        return UIView()
    }

    override var titlesInSwitcher: [String] {
        return ["Swift", "Ruby", "Kotlin"]
    }

    override func segementSlideContentViewController(at index: Int) -> SegementSlideContentScrollViewDelegate? {
        return ContentViewController()
    }

    override func viewDidLoad() {
        super.viewDidLoad()
        canCacheScrollState = true
        reloadData()
        scrollToSlide(at: 0, animated: false)
    }

}
复制代码
import SegementSlide

class ContentViewController: UITableViewController, SegementSlideContentScrollViewDelegate {

    ......

    @objc var scrollView: UIScrollView {
        return tableView
    }

}
复制代码
  1. 已经可否支持“父阻尼”和“子阻尼”效果了

重写SegementSlideViewController的属性bouncesType，它是一个枚举类型：

enum BouncesType {
    case parent
    case child
}
复制代码

默认值为.parent，以下重写，便可实现『子阻尼』效果：

class HomeViewController: SegementSlideViewController {

    ......

    override var bouncesType: BouncesType {
        return .child
    }
}
复制代码

  1. 如何使得在头部滑动也能实现滚动联动效果？ 我在SegementSlideHeaderView中重写了方法func hitTest(_ point: CGPoint, with event: UIEvent?) -> UIView?，在合适的状况下返回了childScrollView。目前这不是一个最优的方法，由于我没可以在这个方法中判断出这个事件是滑动仍是点击事件，这里还能够优化。

  2. 既能够支持使用头部视图，也能够不须要头部视图 SegementSlideViewController是实现这套方案的基类，其中有一个headerView属性，该属性为可选值，返回nil则表示不须要头部视图。我在项目配套的Example工程中，其中的首页即是没有头部视图的示例，不过增长了下拉显示navigation、上滑隐藏navigation的效果。通常使用 方案III 的例子，在rootScrollView上使用了UITableView，为了使用UITableView的tableHeaderView属性，以及吸顶效果。SegementSlide在v1版本的时候，使用了UICollectionView，也是处于一样的目的，现v2已经改为了UIScrollView，吸顶效果的话，能够经过增长一条到view.safeAreaLayoutGuide.topAnchor的约束来实现。

  3. 快速应用头部渐变效果？ TransparentSlideViewController是继承于SegementSlideViewController的子类，其中的headerView属性已被改为非可选值。其中另外定义了一些属性，用于头部视图处于『显示状态』或是『嵌入状态』时，titleView和navigationBar对应属性的改动。

以下所示：

typealias DisplayEmbed<T> = (display: T, embed: T)

override var isTranslucents: DisplayEmbed<Bool> {
    return (true, false)
}

override var attributedTexts: DisplayEmbed<NSAttributedString?> {
    return (nil, nil)
}

override var barStyles: DisplayEmbed<UIBarStyle> {
    return (.black, .default)
}

override var barTintColors: DisplayEmbed<UIColor?> {
    return (nil, .white)
}

override var tintColors: DisplayEmbed<UIColor> {
    return (.white, .black)
}
复制代码

其中DisplayEmbed为一个typealias表示『显示状态』或是『嵌入状态』时的值。

须要注意的是：

  • TransparentSlideViewController中的titleView是使用自定义的方式并赋值给navigationItem.titleView来实现的，最早考虑的是修改navigationBar的titleTextAttributes属性，实践下来，发现会出现titleTextAttributes已经修改完毕，可是效果没有改变的状况。
  • TransparentSlideViewController会在viewWillAppear时保存navigation上对应样式的状态，并在viewWillDisappear时进行还原，来保证从一个TransparentSlideViewController（A）进入到另外一个TransparentSlideViewController（B）时，navigation上样式的状态不会有错误，因此也不应在viewDidLoad时修改navigation上的样式，由于B的viewDidLoad先于A的viewWillDisappear执行。

若是须要自定义渐变效果，能够模仿TransparentSlideViewController继承SegementSlideViewController来实现须要的效果。Example中使用的是原生的UINavigationController，和TransparentSlideViewController配合起来，能够作到还算满意的效果。可是，实际状况下每一个项目中可能会去改动默认的navigation，若是TransparentSlideViewController不适用，则须要使用自定义的方式来支持已有项目。

  1. 子控件既可结合一块儿使用，也能够单独使用 目前SegementSlideSwitcherView和SegementSlideContentView既能够做为SegementSlideViewController的子控件来使用，也能够单独拿出来使用，Example工程中的NoticeViewController即是单独使用的例子，实现了将switcher放在navigation上的效果。

  2. 红点显示？ SegementSlideSwitcherView支持了红点显示

enum BadgeType {
    case none
    case point
    case count(Int)
}
复制代码

红点类型为枚举值，从上述代码能够看出红点是支持『普通红点显示』还有『带数字红点显示』。

还须要优化的点

  1. 上面在第3点已经提到，『头部滑动也能实现滚动联动效果』目前对此的解决方法不是最优。

  2. 方案III 所提到的『位置突变现象』，我在SegementSlideViewController中提供了canCacheScrollState属性，值为true时，在切换界面的时候会缓存当前的canParentViewScroll、canChildViewScroll以及rootScrollView的contentOffset.y值，并在切换回该界面的时候恢复；值为false时，即为相似微博的处理，在切换到新界面前将当前界面的childScrollView的contentOffset.y值置为0。设置为true时会有一个效果，担忧这个效果难以被接受，故将该值的默认值设置为了false。

效果以下：

但这仍不是一个很好的处理方式。

  1. 联动滚动切换的时候，尚未达到完美的流畅效果。因为point A和point B处将contentOffset.y强制设值来阻止滚动，同时也致使了滚动切换时『动能』不足的结果，也就是还不够流畅。

接下去要作的事

天然是要解决上面提到的三点不足的地方，要想让联动完美般流畅，仍是须要使用一个滚动，而不是两个。我在本地开了个v3分支作了个尝试，在视图顶层覆盖一层透明的UIScrollView，借用它的手势、它的contentOffset来控制rootScrollView和childScrollView的contentOffset，能够解决上述提到的三个须要优化的点，可是同时也带来了其余好多问题，这里就不细说了，哪天问题都解决了，更新了v3版本，再来补充说明吧。

参考

结束语

编写本文时，SegementSlide的版本号为2.0-beta-13。另外，本站还未开通评论功能，如对本文中的内容存在疑问，或者发现文中的不正确之处，欢迎在本文的掘金地址评论区中友善提出。如对本项目有任何疑问，欢迎前往issues提出，同时也欢迎来Pull requests，为本项目作贡献。






『欢迎关注个人我的微信订阅号，我将不按期分享编程相关内容』

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程