一. 布景

主页改版，想要做一个类似花小猪主页滑动作用，具体如下所示:

二. 分析

从花小猪主页交互咱们能够分析出如下信息:

主页卡片分为三段式，底部、中心、顶部。
当主页卡片在底部，只能先外部视图全体往上滑动，滑动到顶部后，内部卡片头部悬浮，内部卡片翻滚视图依然能够翻滚。
当主页卡片在中心，能够先外部视图全体往上或者往下滑动，往下滑动到底部后，禁止滑动，滑动到顶部，内部视图卡片头部悬浮，内部翻滚视图能够翻滚。
当主页卡片在顶部，能够拖动卡片外部视图全体下滑，也能够经过内部视图向下翻滚，翻滚到跟内部头部底部相等，变成全体一起向下滑动。而当内部翻滚视图向上翻滚，内部卡片头部悬浮固定。
主页卡片滑动过程中，假如停在中心方位，依据卡片停止方位，间隔底部、中心、顶部方位远近，向间隔近的一端，直接移动到相应方位，比方移动到中心和顶部方位之间，假如间隔顶部近，则直接移动到顶部。
当主页卡片在底部，上滑速度很快超越必定值，就直接到顶部。相同在顶部下滑也一样。
当主页卡片在顶部，内部翻滚视图快速下滑，下滑到跟卡片头部分隔，发生绷簧作用，不直接一起下滑，但其他部分假如慢慢滑动，下滑到跟卡片头部行将分隔时，变成全体一起下滑。

三. 实现

理清了主页卡片的滑动交互细节之后，咱们开端规划对应类和相关职责。

从上面结构图咱们能够看出，首要分为三部分

卡片外层容器externalScrollView，限定为UIScrollView类型。
卡片内头部insideHeaderView，限定为UIView类型。
卡片内翻滚视图insideTableView，由于翻滚视图所以insideTableView必定是UIScrollView类型，为了复用，这儿咱们限定为UITableView

这儿其实咱们不关心头部视图insideHeaderView，由于内部头部视图insideHeaderView和内部翻滚视图insideTableView之间的关系是固定，就是内部翻滚视图insideTableView一直在头部视图 insideHeaderView下面。

相同咱们也不关心翻滚视图insideTableView里面的内容，咱们需求处理的就是卡片外层容器externalScrollView和内部翻滚视图insideTableView之间交互关系。

由于一切这种类型交互处理逻辑是一致的，因而咱们抽出FJFScrollDragHelper类。

首要咱们来知道下翻滚辅助类FJFScrollDragHelper相关属性

    /// scrollView 显示高度
    public var scrollViewHeight: CGFloat = kScreenH
    /// 约束的高度(超越这个高度能够翻滚)
    public var kScrollLimitHeight: CGFloat = kScreenH * 0.51
    /// 滑动初始速度(大于该速度直接滑动到顶部或底部)
    public var slideInitSpeedLimit: CGFloat = 3500.0
    /// 当时 翻滚 视图 方位
    public var curScrollViewPositionType: FJFScrollViewPositionType = .middle
    /// 最高 展现 高度
    public var topShowHeight: CGFloat = 0
    /// 中心 展现 高度
    public var middleShowHeight: CGFloat = 0
    /// 最低 展现 高度
    public var lowestShowHeight: CGFloat = 0
    /// 当时 翻滚 视图 类型
    private var currentScrollType: FJFCurrentScrollViewType = .externalView
    /// 外部 翻滚 view
    public weak var externalScrollView: UIScrollView?
    /// 内部 翻滚 view
    public weak var insideScrollView: UIScrollView?
    /// 拖动 scrollView 回调
    public var panScrollViewBlock: (() -> Void)?
    /// 移动到顶部
    public var goToTopPosiionBlock: (() -> Void)?
    /// 移动到 底部 默认方位
    public var goToLowestPosiionBlock: (() -> Void)?
    /// 移动到 中心 默认方位
    public var goToMiddlePosiionBlock: (() -> Void)?

咱们看到FJFScrollDragHelper内部弱引用了外部翻滚视图externalScrollView和内部翻滚视图insideScrollView。

关联目标，并给外部externalScrollView增加滑动手势

/// 增加 滑动 手势 到 外部翻滚视图
    public func addPanGestureRecognizer(externalScrollView: UIScrollView){
        let panRecoginer = UIPanGestureRecognizer(target: self, action: #selector(panScrollViewHandle(pan:)))
        externalScrollView.addGestureRecognizer(panRecoginer)
        self.externalScrollView = externalScrollView
    }

处理滑动手势

// MARK: - Actions
    /// tableView 手势
    @objc
    private func panScrollViewHandle(pan: UIPanGestureRecognizer) {
        /// 当时 翻滚 内部视图 不呼应拖动手势
        if self.currentScrollType == .insideView {
            return
        }
        guard let contentScrollView = self.externalScrollView else {
            return
        }
        let translationPoint = pan.translation(in: contentScrollView.superview)
        // contentScrollView.top 视图间隔顶部的间隔
        contentScrollView.y += translationPoint.y
        /// contentScrollView 移动到顶部
        let distanceToTopH = self.getTopPositionToTopDistance()
        if contentScrollView.y < distanceToTopH {
            contentScrollView.y = distanceToTopH
            self.curScrollViewPositionType = .top
            self.currentScrollType = .all
        }
        /// 视图在底部时间隔顶部的间隔
        let distanceToBottomH = self.getBottomPositionToTopDistance()
        if contentScrollView.y > distanceToBottomH {
            contentScrollView.y = distanceToBottomH
            self.curScrollViewPositionType = .bottom
            self.currentScrollType = .externalView
        }
        /// 拖动 回调 用来 更新 遮罩
        self.panScrollViewBlock?()
        // 在滑动手势结束时判别滑动视图间隔顶部的间隔是否超越了屏幕的一半，假如超越了一半就往下滑到底部
        // 假如小于一半就往上滑到顶部
        if pan.state == .ended || pan.state == .cancelled {
            // 处理手势滑动时，依据滑动速度快速呼应上下方位
            let velocity = pan.velocity(in: contentScrollView)
            let largeSpeed = self.slideInitSpeedLimit
            /// 超越 最大 力度
            if velocity.y < -largeSpeed {
                gotoTheTopPosition()
                pan.setTranslation(CGPoint(x: 0, y: 0), in: contentScrollView)
                return
            } else if velocity.y < 0, velocity.y > -largeSpeed {
                if self.curScrollViewPositionType == .bottom {
                    gotoMiddlePosition()
                } else {
                    gotoTheTopPosition()
                }
                pan.setTranslation(CGPoint(x: 0, y: 0), in: contentScrollView)
                return
            } else if velocity.y > largeSpeed {
                gotoLowestPosition()
                pan.setTranslation(CGPoint(x: 0, y: 0), in: contentScrollView)
                return
            } else if velocity.y > 0, velocity.y < largeSpeed {
                if self.curScrollViewPositionType == .top {
                    gotoMiddlePosition()
                } else {
                    gotoLowestPosition()
                }
                pan.setTranslation(CGPoint(x: 0, y: 0), in: contentScrollView)
                return
            }
            let scrollViewDistanceToTop = kScreenH - contentScrollView.top
            let topAndMiddleMeanValue = (self.topShowHeight + self.middleShowHeight) / 2.0
            let middleAndBottomMeanValue = (self.middleShowHeight + self.lowestShowHeight) / 2.0
            if scrollViewDistanceToTop >= topAndMiddleMeanValue {
                gotoTheTopPosition()
            } else if scrollViewDistanceToTop < topAndMiddleMeanValue,
                    scrollViewDistanceToTop > middleAndBottomMeanValue {
                gotoMiddlePosition()
            } else {
                gotoLowestPosition()
            }
        }
        pan.setTranslation(CGPoint(x: 0, y: 0), in: contentScrollView)
    }

处理滑动手势需求当时视图翻滚类型currentScrollType和卡片当时所处的方位curScrollViewPositionType来分别进行判别。

/// 当时 翻滚 视图 类型
public enum FJFCurrentScrollViewType {
    case externalView /// 外部 视图
    case insideView   /// 内部 视图
    case all   /// 内部外部都能够呼应
}
/// 当时 翻滚 视图  方位 属性
public enum FJFScrollViewPositionType {
    case top      /// 顶部
    case middle   /// 中心
    case bottom   /// 底部
}

如下是对应的判别逻辑:

暂时无法在飞书文档外展现此内容

A. 在底部

 /// 回到 底部 方位
    private func gotoLowestPosition() {
        self.curScrollViewPositionType = .bottom
        self.goToLowestPosiionBlock?()
    }
    private func gotoLowestPosition(withAnimated animated: Bool = true) {
        self.insideTableView.setContentOffset(CGPoint(x: 0, y: 0), animated: true)
        if animated {
            UIView.animate(withDuration: 0.18, delay: 0, options: .allowUserInteraction) {
                self.externalScrollView.top = self.scrollDragHelper.getBottomPositionToTopDistance()
            }
        } else {
            self.externalScrollView.top = self.scrollDragHelper.getBottomPositionToTopDistance()
        }
    }

只能翻滚外部视图，内部翻滚视图偏移量是0.

B. 在中心

/// 回到 中心 方位
    private func gotoMiddlePosition() {
        self.curScrollViewPositionType = .middle
        self.goToMiddlePosiionBlock?()
    }
    private func gotoMiddlePosition(withAnimated animated: Bool = true) {
        self.insideTableView.setContentOffset(CGPoint(x: 0, y: 0), animated: true)
        if animated {
            UIView.animate(withDuration: 0.18, delay: 0, options: .allowUserInteraction) {
                self.externalScrollView.top = self.scrollDragHelper.getMiddlePositionToTopDistance()
            }
        } else {
            self.externalScrollView.top = self.scrollDragHelper.getMiddlePositionToTopDistance()
        }
    }

只能翻滚外部视图，内部翻滚视图偏移量是0.

C. 在顶部

开端翻滚判别:

    /// 更新 当时 翻滚类型 当开端拖动 (当在顶部，开端滑动时分，判别当时滑动的目标是内部翻滚视图，仍是外部翻滚视图)
    public func updateCurrentScrollTypeWhenBeginDragging(_ scrollView: UIScrollView) {
        if self.curScrollViewPositionType == .top {
            if scrollView.contentOffset.y <= 0 {
                self.currentScrollType = .externalView
            } else {
                self.currentScrollType = .insideView
            }
        }
    }

翻滚过程中判别

/// 更新 翻滚 类型 当翻滚的时分，并回来是否当即停止翻滚
    public func isNeedToStopScrollAndUpdateScrollType(scrollView: UIScrollView) -> Bool {
        if scrollView == self.insideScrollView {
            /// 当时翻滚的是外部视图
            if self.currentScrollType == .externalView {
                self.insideScrollView?.setContentOffset(CGPoint(x: 0, y: 0), animated: false)
                return true
            }
            if self.curScrollViewPositionType == .top {
                if self.currentScrollType == .all { /// 在顶部的时分，外部和内部视图都能够滑动，判别当内部翻滚视图视图的方位，假如翻滚到底部了，则变为外部翻滚视图跟着滑动，内部翻滚视图不动
                    if scrollView.contentOffset.y <= 0 {
                        self.currentScrollType = .externalView
                    } else {
                        self.currentScrollType = .insideView
                    }
                } else if scrollView.isDecelerating == false,
                    self.currentScrollType == .insideView { /// 在顶部的时分，当内部翻滚视图，慢慢滑动到底部，变成整个外部翻滚视图跟着滑动下来，内部翻滚视图不再滑动
                    if scrollView.contentOffset.y <= 0 {
                        self.currentScrollType = .externalView
                    }
                }
            }
        }
        return false
    }

翻滚结束判别

/// 当在顶部，翻滚停止时分 更新 当时 翻滚类型 ，假如当时内部翻滚视图，现已翻滚到最底部，
    /// 则只能翻滚最外层翻滚视图，假如内部翻滚视图没有翻滚到最底部，则外部和内部视图都能够翻滚
    public func updateCurrentScrollTypeWhenScrollEnd(_ scrollView: UIScrollView) {
        if self.curScrollViewPositionType == .top {
            if scrollView.contentOffset.y <= 0 {
                self.currentScrollType = .externalView
            } else {
                self.currentScrollType = .all
            }
        }
    }

以上就是具体翻滚判别相关处理逻辑，对应实现作用如下。

iOS 仿花小猪首页滑动效果

一. 布景

二. 分析

三. 实现

关联目标，并给外部`externalScrollView`增加滑动手势

处理滑动手势

A. 在底部

B. 在中心

C. 在顶部

作者信息

iOS 仿花小猪首页滑动效果

一. 布景

二. 分析

三. 实现

关联目标，并给外部externalScrollView增加滑动手势

处理滑动手势

A. 在底部

B. 在中心

C. 在顶部

相关文章

Realm结合HandyJSON或Codable的坑

区块链技术原理

一看就懂的OpenGL ES教程——仿抖音滤镜的各种奇技淫巧（一）

二十二、app加载流程(六)分类的实现和加载(上)

作者信息

关联目标，并给外部`externalScrollView`增加滑动手势