【学习】弹性ScrollView-仿微信弹性页面

一、先看效果

stretchScrollView.gif

二、准备工作

要实现这个效果,我的想法是给ScrollView包一个container,然后判断边界值,看当前的touch事件交给谁去处理。回弹的效果交给Scroller处理,甚至可以写出一个下拉刷新,看代码分析吧。

三、代码分析

在dispatchTouchEvent中去判断边界值,dispatchTouchEvent返回true或者false都是自己消费当前事件,否则super传递下去。代码如下:

    @Override
    public boolean dispatchTouchEvent(MotionEvent ev) {
        float currentY = ev.getY();
        switch (ev.getAction()) {
            case MotionEvent.ACTION_DOWN:
                mLastY = currentY;
                break;
            case MotionEvent.ACTION_MOVE:
                float distanceY = currentY - mLastY;
                if (mIsDraging) {
                    if (distanceY <= 0) {
                        if(mScrollView.isScrolledToTop()) {
                            scrollTo(0, 0);
                            mIsDraging = false;
                            return super.dispatchTouchEvent(ev);
                        }
                    }else{
                        if(mScrollView.isScrolledToBottom()){
                            scrollTo(0, 0);
                            mIsDraging = false;
                            return super.dispatchTouchEvent(ev);
                        }
                    }
                    scrollTo(0, (int) (-distanceY * ratio));
                    return true;
                } else {
                    if (Math.abs(distanceY) > mTouchSlop) {
                        if (distanceY > 0) {  // 向下
                            if (mScrollView.isScrolledToTop()) {
                                mLastY = currentY;
                                mIsDraging = true;
                            }
                        }else{
                            if(mScrollView.isScrolledToBottom()){
                                mLastY = currentY;
                                mIsDraging = true;
                            }
                        }
                    }
                }
                break;
            case MotionEvent.ACTION_UP:
                if (mIsDraging) {
                    int scrollY = getScrollY();
                    mScroller.startScroll(0, scrollY, 0, -scrollY, duration);
                    mIsDraging = false;
                    invalidate();
                    return true;
                }
                break;
        }
        return super.dispatchTouchEvent(ev);
    }
  1. 首先DOWN下记录起始位置,MOVE下先判断当前是不是拖拽状态mIsDraing,否,进入else里面,如果手指滑动距离需要响应了,判断方向,如果向下,还要看ScrollView是不是在顶部(为什么?),如果在顶部,那么记录当前 y 坐标(因为在判断这个期间,手指已经向下滑了一段距离了,如果还记录之前的位置,会很突兀),并将拖拽mIsDraing = true,开始向下。
  2. 这个时候再进入MOVE,已经是拖拽中,这个时候可以直接调用
scrollTo(0, (int) (-distanceY * ratio));
return true;

ratio是弹性系数。但是考虑到一种情况就是,刚开始下滑的时候手指突然向上滑动,这个时候container到顶了,ScrollView也在顶部,这个时候事件需要交给ScrollView而不是container继续滑动。同样的道理在底部回弹的时候,也存在上拉container到底了这个时候手指向下滑动,同样需要把事件交给ScrollView处理。所以在scrollTo之前需要再一次判断distanceY,如果小于0并且ScrollView在底部,事件传递,container需要恢复开始位置,这个时候虽然手指没有抬起,但是也不能是拖拽状态:

                            scrollTo(0, 0);
                            mIsDraging = false;
                            return super.dispatchTouchEvent(ev);
  1. ScrollView需要能判断有没有到顶或到底,重写一个StretchScrollView:
@Override
    protected void onScrollChanged(int l, int t, int oldl, int oldt) {
        super.onScrollChanged(l, t, oldl, oldt);
        if (getScrollY() == 0) {
            isScrolledToTop = true;
            isScrolledToBottom = false;
        } else if (getScrollY() + getHeight() - getPaddingTop()-getPaddingBottom() == getChildAt(0).getHeight()) {
            isScrolledToTop = false;
            isScrolledToBottom = true;
        } else {
            isScrolledToTop = false;
            isScrolledToBottom = false;
        }
    }

很简单对吧,同样适用于ListView,区别仅仅在于判断顶部底部的方法不一样。最后,可以扩展一点,凡是可以判断是顶部底部的view都可以加进来,抽象一个StretchView出来。附上gayHub地址。有兴趣拓展吧!

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

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,273评论 25 707
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 11,982评论 4 60
  • 是不是因为春天,连同烦心的事都一件件地跑出来。 朋友A说,一直以来她都很努力上进,可是不小心卷入了办公室派系之争,...
    原来是二姐阅读 530评论 0 0
  • 打字练习1.一般在哪个函数中创建某个View的子View ?ViewDidLoad方法1.多线程 ,写出常用的几个...
    小小Q吖阅读 177评论 0 0