PYScrollToolBarView(解决了很多手势冲突)

scrollToolBarView演示.gif

OC: 工具类下载
pod 'PYToolBarScrollView'
swift:工具下载
pod 'PYToolBarScrollView_Swift'

一、简介

这个工具写了很久,一直不满意,换了n种方法,最后毛瑟顿开,用最平常的知识解决了问题。虽然很简单,但很巧妙。

  1. 适用结构:
    1. 顶部有一个topView
    2. 中间有个选项栏(toolBarView)
    3. 底部有scrollVIew的集合(UITableView,UICollectionView)
  2. 效果:
    1. 随着底部的scrollView的滚动,topView与toolBarView也跟着上下滚动。
    2. toolBarView的到顶部的时候悬停
  3. 主要解决的问题:
    1. 解决了根据底部scrollView的不同contentOffset设置topView与toolBarView的高度问题
    2. 解决了中间toolBar悬停的问题
    3. 解决了底部scrollView左右滑动的问题

二、 知识点

  1. scrollView的一些知识,看这里
  2. 关于toolBarView的封装,看这里
  3. CoreGraphics的知识,看这里

三、工具结构

整体由最低层的ScrollViewtopViewmidToolBarViewbottomScrollView、还有bottomScrollViews组成
1. 主要的包含关系

  1. 最底层scrollVIew
    1.在他的上面有topView,midToolBarView,bottomScrollView,bottomScrollViewArray
    1. 这样的话就可以做到让bottomViews,midToolBarView,topView,一起上下滚动,只修改最低层的scrollView的contentOffset就可以了
  2. 顶部的topView
    为了扩展性,这个顶部的topView是由外部传进来
  3. 中间的toolBarView
    1. 这个是选项栏,也就是点击相应的按钮,底部的BottomScrollView就会相应相应的界面
    2. toolBarView的点击事件有传出到外部
    3. toolBarView的titleArray应该与BottomScrollView中的bottomScrollViewArray数目一致
    4. 点击滑动到相应的ScrollView界面
    5. 与下部的BottomScrollView滑动不会产生冲突
  4. 底部的BottomScrollView
    1. 主要是承接bottomScrollViewArray,让他们依次排列,并且可以左右滚动
    2. 设置了分页,每次到新的页面都会向外发送index和ScrollView消息
    3. 对数组长度进行了判断,避免了数组越界造成的崩溃
  5. bottomScrollViewArray
    1. 这个是外部传入的scrollView 的数组
    2. 内部监听了bottomScrollViewArray元素的contentOffset,对self.contentOffset进行设置,达到联动效果

四、遇到的问题

1. 当底部有多个scrollView或者多个view的时候,解决底部scrollView的contentOffset不一致造成的self.contentOffset的滑动突兀的问题
造成这个问题的根本原因是:

  1. 我在外部传入BottomScrollViewArray的时候会先判断其是否为scrollView,如果是scrollView,那么监听了scrollView的contentOffset,并根据scrollView的contentOffset,改变self.contentOffset
  2. 在监听的会调函数中,根据监听到的ScrollView的滚动的contentOffset改变self.contentOffset
  3. 如果,bottomScrollViewArray中有A、B两个scrollView做下面操作
    1. A滚动30的距离(这时候self.contentOffset.y跟随A变成了30)
    2. 现在切换到了B,这时候就会出现问题
    3. 因为B的contentOffset.y为0,而self.contentOffset为30,当你在滑动B的时候,B的contentOffset发生改变,那么将对self.contentOffset重新赋值,这时候,B的contentOffset.y为0,而self.contentOffset.y为30,则self.contentOffset会直接变成0

解决方案:

  1. 添加了一个OffsetY变量。
    在将要切换的底部的scrollView的时候对A与B进行contentOffset.y差值计算。
    在B滑动的时候把差值也算入到self.contentOffset中。
    在滑动到顶部,或者底部的时候,对offsetY进行清零
    但是还是有缺陷,比如A的contentOffset.y 为0,而self.contentOffset.y已经到最大,那么切换到A,向下拉,也会有self直接掉下来的突兀感

代码:

 ///布局bottomScrollView的subView (把subView添加到了bottomScrollViewView里面)
    private func setupBottomScrollViewSubView(_ contentOffsetY: CGFloat) {
        for index: NSInteger in 0 ..< self.bottomViewArray.count {
            //布局subview
            let view: UIView = self.bottomViewArray[index]
            self.bottomScrollView.addSubview(view)
            view.frame = CGRect(x: kToolBarScrollViewW * CGFloat(index), y:0, width: kToolBarScrollViewW, height: kBottomScrollViewH + contentOffsetY)
            //如果要是是ScrollView的子类那么监听contentOffset
            if view is UIScrollView {
                let scrollView: UIScrollView = view as! UIScrollView
                scrollView.addObserver(self, forKeyPath: "contentOffset", options: .new, context: nil)
            }
        }
    }

 ///通知的方法
    override func observeValue(forKeyPath keyPath: String?, of object: Any?, change: [NSKeyValueChangeKey : Any]?, context: UnsafeMutableRawPointer?) {
        if keyPath == "contentOffset" {
//            print(change?[NSKeyValueChangeKey.newKey] ?? "----- 没有纸")
            let scrollView: UIScrollView = object as! UIScrollView
            //获取偏移量
            let newValue: CGPoint = change?[NSKeyValueChangeKey.newKey] as! CGPoint
            self.newValue = newValue;
            //改变scrollView偏移的位置
            if scrollView.contentOffset.y <= 0{
                if newValue.y < 0 {
                    self.offset = 0
                }
                self.contentOffset = CGPoint(x: 0, y: 0)
            }
            if scrollView.contentOffset.y >= self.kTopViewH {
                if newValue.y > self.kTopViewH {
                    self.offset = 0
                }  
                self.contentOffset = CGPoint(x: 0, y: self.kTopViewH)
            }
//            let isScrollBottom = Int(scrollView.contentSize.height - self.contentOffset.y) <= Int(scrollView.frame.size.height);
            if scrollView.contentSize.height <= scrollView.frame.size.height + kTopViewH {   
                let insertY = scrollView.frame.size.height + kTopViewH - scrollView.contentSize.height   
                scrollView.contentInset = UIEdgeInsetsMake(0, 0, insertY, 0)
            }else{
                scrollView.contentInset = UIEdgeInsetsMake(0, 0, 0, 0)
            }
            self.contentOffset = CGPoint(x: 0, y: newValue.y + self.offset)
        }
    }

2. 当前显示的scrollView的contentSize滑动不到顶部,底部的scrollView就会显示不全
解决方法:
在滚动的时候判断,当前的scrollView的滑动范围,是否足以让self滑动到顶部

 if scrollView.contentSize.height <= scrollView.frame.size.height + kTopViewH {
                
                let insertY = scrollView.frame.size.height + kTopViewH - scrollView.contentSize.height
                
                scrollView.contentInset = UIEdgeInsetsMake(0, 0, insertY, 0)
            }else{
                scrollView.contentInset = UIEdgeInsetsMake(0, 0, 0, 0)
            }
            
            self.contentOffset = CGPoint(x: 0, y: newValue.y + self.offset)
        }

更新:2017.11.15

1. PYMidView的扩展

  1. 对中间的toolBarView的扩展性,进行了修复。添加了一个PYMidView(继承自UIView),他有个代理属性,var delegate: PYToolBarViewProtocol?要求实现一个方法,返回对应的toolBarView,
  2. 事实上,你只要继承PYMidView,然后在里面布局子控件,并且,把代理属性设置成自己,实现代理方法,就可以完美适应任何产品需求。

*代码

import UIKit
class PYMidView: UIView {
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    override init(frame: CGRect) {
        super.init(frame: frame)
    }
    var delegate: PYToolBarViewProtocol?
    private var isFirstSetToolBarUI: Bool = true
    
    override func layoutSubviews() {
        if isFirstSetToolBarUI {
            self.delegate?.registerToolBarView().displayUI()
            layoutIfNeeded()
            isFirstSetToolBarUI = false
        }
    }
}

更新:2018.1.5

进行了重构,具体思路差不多,只是提高了兼容性,与遗留bug的修复。
下一步,准备兼容web 滑动的监听。具体看代码:

OC: 工具类下载
pod 'PYToolBarScrollView'
swift:工具下载
pod 'PYToolBarScrollView_Swift'

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,921评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,635评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,393评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,836评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,833评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,685评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,043评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,694评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,671评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,670评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,779评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,424评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,027评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,984评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,214评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,108评论 2 351
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,517评论 2 343

推荐阅读更多精彩内容