iOS 多个UIScrollView嵌套解决方案

热门标签

,

特别声明:文章多为网络转载,资源使用一般不提供任何帮助,特殊资源除外,如有侵权请联系!

一直以来,在实际项目中,无论是iOS、RN还是Android都会遇到一个场景,那就是UI界面会涉及到多个UIScrollView、ListView在垂直、水平方向上嵌套滑动,而在一些嵌套滑动中还会涉及更多复杂的业务逻辑。以iOS为例,比较常见的处理方式是UIScrollView嵌套UIScrollView或者UITableView,但这样其实存在很多问题,也会有很多难以解决的问题

比如:

1、UIScrollView互相嵌套,当需要滑动的时候去根据滑动位置设置是否isScrollEnabled,这样做对于简单的滑动没有问题,亦或者对于仅有一个简单的headerView是不会存在太大问题

2、当我们的headerView会有跟多复杂逻辑、更多滑动就会难以判定,甚至会出现滑动过程中界面卡顿的现象,这就是因为isScrollEnabled判定不好掌握

3、可能很多会采用,通过锤子滑动的时候headerView下方UIScrollView的contentOffset的改变来推动headerView重新设置origin,但是如果headerView的高度过高,设置超过了屏幕(就好比如headerView包含动态的置顶数据呢),如果不能够全屏滑动,那么这样子的嵌套就失去了意义

在这里,我使用了一种UIKit Dynamic + Gesture来处理,解决了上述问题,当然由于每个人的业务逻辑会存在很多的不同,无暂时无法写出一个框架来适应所有业务逻辑的处理,但是这个解决方案在很大程度上可以根据自己的业务逻辑,自行修改代码即可完成使用,在完成这个功能期间,我解决了如下问题,并且这些也许是你在实现时需要解决的问题:

iOS 多个UIScrollView嵌套解决方案
image

1、全屏可滑动

2、通过MJRefresh实现的下拉刷新、加载更多

3、单个tab,但数据未填充满屏幕

4、单个tab,数据填充满屏幕,但未填充满外层UIScrollView的contentSize

5、单个tab填充满屏幕

6、多个tab部分数据填充满屏幕,部分未填充

7、上述情况的其他多个tab情况

8、其他包含顶部horizontal滑动的情况

9、headerView包含动态的置顶、其他高度过高的UI等情况

10、其他更多的坑,我已在代码中注释

主要代码实现如下,每一个地方都有较为详细的注释:


enum NestedSlidingType: Int {
    case singleTabNotFillScreen = 0    // 单个tab数据未填充满屏幕
    case singleTabFillScreenNotFillContentSize  // 单个tab数据填充满屏幕,未填充满外层ScrollView contentSize
    case single // 上述两种情况外的单个tab情况
    case multiTabPartFill // 多个tab部分数据填充屏幕,部分未填充
    case multiTab   // 上述情况外的其他多个tab情况
    case multiTabOtherHeaderView  // 包含其他更多情况
}

通过手势来处理整屏的滑动

func gestureRecognizer(_ gestureRecognizer: UIGestureRecognizer, shouldRecognizeSimultaneouslyWith otherGestureRecognizer: UIGestureRecognizer) -> Bool {
        if let gesture = gestureRecognizer as? UIPanGestureRecognizer {
            let translationX = gesture.translation(in: view).x
            let translationY = gesture.translation(in: view).y
            if translationY == 0 {
                return true
            } else {
                /// 这里说一说手势处理,这个值可以设置得更大一些,保证在滑动垂直的时候触发了pageScrollView的滚动
                /// return fabsf(Float(translationX))/Float(translationY) >= 6.0
                /// 为了处理得更加严谨一点,应该这样(因为我们的headerView还可能存在更多的水平滑动,需要根具自己的需要判定在多大的偏移量的情况下处理horizontal滑动
                let point = gesture.location(in: view)
                let otherConvertPoint = view.convert(point, to: otherView)
                let pageConvertPoint = view.convert(point, to: pageScrollView)
                if otherView.point(inside: otherConvertPoint, with: nil) {  // 手势在otherView
                    return fabs(Float(translationX)) > fabs(Float(translationY))
                } else if pageScrollView.point(inside: pageConvertPoint, with: nil) {  // 手势在pageScrollView
                    return fabsf(Float(translationX))/Float(translationY) >= 6.0
                }
            }
        }
        return false
    }
    
    @objc func panGestureRecognizerAction(_ gesture: UIPanGestureRecognizer) {
        switch gesture.state {
        case .began:
            let translationX = gesture.translation(in: view).x
            let translationY = gesture.translation(in: view).y
            let velocityX = gesture.velocity(in: view).x
            let velocityY = gesture.velocity(in: view).y
            /// 这里有个坑,本可以直接使用translation即可的,但是在iphoneX、plus上的translation.y 在屏幕的左侧会存在translationY 始终 == 0 的情况,也就是当用左手指滑动的时候,你会发现根本不会执行后面的逻辑了
            isVertical = fabsf(Float(translationY)) > fabsf(Float(translationX)) || fabsf(Float(velocityY)) > fabsf(Float(velocityX))
            animator.removeAllBehaviors()
            decelerationBehavior = nil
            springBehavior = nil
            break
        case .changed:
            if isVertical {
                print("------------  手势改变 --------")
                _decelerateScrollView(gesture.translation(in: view).y)
            }
            break
        case .cancelled:
            break
        case .ended:
            print("------------  手势结束 --------")
            if isVertical {
                /// MARK: 模拟减速滑动
                dynamicItem.center = view.bounds.origin
                let velocity = gesture.velocity(in: view)
                let inertialBehavior = UIDynamicItemBehavior(items: [dynamicItem])
                inertialBehavior.addLinearVelocity(CGPoint(x: 0, y: velocity.y), for: dynamicItem)
                inertialBehavior.resistance = 2.0
                var lastCenter = CGPoint.zero
                inertialBehavior.action = { [weak self] () in
                    guard let weakSelf = self else { return }
                    if weakSelf.isVertical {
                        let currentY = weakSelf.dynamicItem.center.y - lastCenter.y
                        weakSelf._decelerateScrollView(currentY)
                    }
                    lastCenter = weakSelf.dynamicItem.center
                }
                animator.addBehavior(inertialBehavior)
                decelerationBehavior = inertialBehavior
            }
            break
        default:
            break
        }
        /// 这里需要每次重新设置translation
        gesture.setTranslation(CGPoint.zero, in: view)
    }

通过UIKit Dynamic来模拟滑动及回弹的效果

private func _decelerateScrollView(_ detal: CGFloat) {
        guard let curSegmentScrollView = curSegmentChildVC?.tableView else { return }
        
        let maxOffsetY: CGFloat = HeaderView.defaultHeight + otherView.height - UIScreen.naviBarHeight
        
        /// MARK: 仅有一个tab,并且tab不能够将mainScrollView推到顶部
        if curSegmentScrollView.contentSize.height + curSegmentScrollView.mj_footer.height < curSegmentScrollView.height && type == .singleTabNotFillScreen || type == .singleTabFillScreenNotFillContentSize {
            var mainOffsetY = outterScrollView.contentOffset.y - detal
            let offset1 = outterScrollView.contentOffset.y + outterScrollView.height
            let offset2 = pageScrollView.y + curSegmentScrollView.contentSize.height + curSegmentScrollView.mj_footer.height
            if mainOffsetY > 0 {
                if offset2 < outterScrollView.height {  // 可以往上多滑动40,有一个弹回效果
                    mainOffsetY = offset2 + 40 < offset1 ? 40 : mainOffsetY
                } else {
                    if mainOffsetY + outterScrollView.height > offset2 + 60 {
                        mainOffsetY = offset2 + 60 - outterScrollView.height
                    }
                }
            } else {
                if mainOffsetY < -200 {
                    mainOffsetY = -200
                }
            }
            outterScrollView.contentOffset = CGPoint(x: 0, y: mainOffsetY)
        } else {  /// MARK: 其他情况
            if outterScrollView.contentOffset.y >= maxOffsetY {
                var offsetY = curSegmentScrollView.contentOffset.y - detal
                if offsetY < 0 || curSegmentScrollView.contentSize.height < curSegmentScrollView.height {
                    offsetY = 0
                    var mainOffsetY = outterScrollView.contentOffset.y - detal
                    mainOffsetY = mainOffsetY < 0 ? outterScrollView.contentOffset.y - _rubberBandDistance(detal, UIScreen.height) : mainOffsetY
                    outterScrollView.contentOffset = CGPoint(x: 0, y: min(mainOffsetY, maxOffsetY))
                    print("-------- 处理其他情况 ---------- if ------------- ")
                } else if curSegmentScrollView.contentSize.height + curSegmentScrollView.mj_footer.height < curSegmentScrollView.height {
                    offsetY = 0
                    print("---------- 处理其他情况 -------- else if 1 ------------- ")
                } else if offsetY >= curSegmentScrollView.contentSize.height - curSegmentScrollView.height + curSegmentScrollView.mj_footer.height {
                    offsetY = curSegmentScrollView.contentOffset.y - _rubberBandDistance(detal, UIScreen.height)
                    print("--------- 处理其他情况 --------- else if 2 ------------- ")
                }
                curSegmentScrollView.contentOffset = CGPoint(x: 0, y: offsetY)
            } else {  /// 处理mainScrollView
                var mainOffsetY = outterScrollView.contentOffset.y - detal
                if mainOffsetY >= maxOffsetY {
                    mainOffsetY = maxOffsetY
                } else if mainOffsetY < 0 {
                    mainOffsetY = outterScrollView.contentOffset.y - _rubberBandDistance(detal, UIScreen.height)
                    if mainOffsetY < -200 { // 下拉刷新最多下拉到200位置
                        mainOffsetY = -200
                    }
                }
                print("--------------- 处理outterScrollView  -------- \(mainOffsetY)")
                outterScrollView.contentOffset = CGPoint(x: 0, y: mainOffsetY)
                if mainOffsetY == 0 {
                    _updateSegmentScrollViewContentOffset(CGPoint.zero)
                }
            }
        }
        
        
        /// MARK: 模拟回弹效果
        let bounce0 = curSegmentScrollView.contentSize.height < curSegmentScrollView.height && (type == .singleTabNotFillScreen || type == .singleTabFillScreenNotFillContentSize) && pageScrollView.y + curSegmentScrollView.contentSize.height + curSegmentScrollView.mj_footer.height < outterScrollView.contentOffset.y + outterScrollView.height  // 单个到底的回弹
        let bounce1 = outterScrollView.contentOffset.y < 0   // main到顶的回弹
        let bounce2 = detal < 0 && curSegmentScrollView.contentSize.height > curSegmentScrollView.height && curSegmentScrollView.contentOffset.y > curSegmentScrollView.contentSize.height - curSegmentScrollView.height - curSegmentScrollView.mj_footer.height  // curSegment 到底的回弹
        let bounce = bounce0 || bounce1 || bounce2
        if bounce && decelerationBehavior != nil && springBehavior == nil {
            var target = CGPoint.zero
            if bounce0 {
                dynamicItem.center = outterScrollView.contentOffset
                let offset = pageScrollView.y + curSegmentScrollView.contentSize.height + curSegmentScrollView.mj_footer.height
                if offset < outterScrollView.height {
                    target = CGPoint.zero
                } else {
                    target = CGPoint(x: 0, y: offset - outterScrollView.height + 10)
                }
                _springScrollViewContentOffset(outterScrollView, target)
            } else if outterScrollView.contentOffset.y < 0 {
                dynamicItem.center = outterScrollView.contentOffset
                if outterScrollView.contentOffset.y < -outterScrollView.mj_header.height - UIScreen.statusBarMoreHeight - 20 {
                    target = CGPoint(x: 0, y: -outterScrollView.mj_header.height - UIScreen.statusBarMoreHeight)
                } else {
                    target = CGPoint.zero
                }
                _springScrollViewContentOffset(outterScrollView, target)
                print(" spring ------------------   if  ------------- \(NSStringFromCGPoint(target))")
            } else if curSegmentScrollView.contentOffset.y > curSegmentScrollView.contentSize.height - curSegmentScrollView.height + curSegmentScrollView.mj_footer.height {
                dynamicItem.center = curSegmentScrollView.contentOffset
                /// MARK: 需要将footer 显示出来
                let offsetY = curSegmentScrollView.contentSize.height - curSegmentScrollView.height + curSegmentScrollView.mj_footer.height
                target = CGPoint(x: 0, y: offsetY < 0 ? 0 : offsetY)
                _springScrollViewContentOffset(curSegmentScrollView, target)
                print(" spring ------------------   else  ------------- \(NSStringFromCGPoint(target))")
            }
        }
    }
    
    /// 处理回弹
    private func _springScrollViewContentOffset(_ scrollView: UIScrollView, _ point: CGPoint) {
        dynamicItem.center = scrollView.contentOffset
        animator.removeAllBehaviors()
        decelerationBehavior = nil
        springBehavior = nil
        let tmpSprintBehavior = UIAttachmentBehavior(item: dynamicItem, attachedToAnchor: point)
        tmpSprintBehavior.length = 0
        tmpSprintBehavior.damping = 1
        tmpSprintBehavior.frequency = 2
        tmpSprintBehavior.action = { [weak self] () in
            guard let weakSelf = self else { return }
            scrollView.contentOffset = weakSelf.dynamicItem.center
            if scrollView == weakSelf.outterScrollView && scrollView.contentOffset.y == 0 {
                weakSelf._updateSegmentScrollViewContentOffset(CGPoint.zero)
            }
        }
        animator.addBehavior(tmpSprintBehavior)
        springBehavior = tmpSprintBehavior
    }
    
    private func _rubberBandDistance(_ offset: CGFloat, _ dimission: CGFloat) -> CGFloat {
        let constant: CGFloat = 0.55
        let result = (constant * CGFloat(fabsf(Float(offset))) * dimission) / (dimission + constant * CGFloat(fabs(Float(offset))))
        return offset < 0.0 ? -result : result
    }

最后这种解决方案虽然能够解决上述的很多问题,并且也比较方便进行后期的UI扩展改变,但也不是没有存在问题,其中最主要也是最难的一个就是:在业务功能复杂的时候,需要涉及到很多计算,就是这个计算会花费比较多的时间。

 

未经允许不得转载:作者:SheaYang, 转载或复制请以 超链接形式 并注明出处 技术Dog|博客
原文地址:《iOS 多个UIScrollView嵌套解决方案》 发布于2019-10-28

分享到:
赞(0)

评论 抢沙发

3 + 6 =


iOS 多个UIScrollView嵌套解决方案

长按图片转发给朋友

Vieu4.0主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录