android 弹性ScrollView(已优化)

最新推荐文章于 2024-08-09 04:20:40 发布
最新推荐文章于 2024-08-09 04:20:40 发布
阅读量1.2w 收藏 16
点赞数 4
分类专栏： android 文章标签： android ScrollVeiw
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a394268045/article/details/51892015
版权

想要的效果

最近项目中想实现一个效果，效果如下：
这里写图片描述

网上demo展示

就是上滑或者下滑，能实现弹性效果，刚开始在网上找了好几个demo，代码大致如下：

public class BounceScrollView extends ScrollView {

    private View inner;// 孩子View  
    private float y;// 点击时y坐标  
    private Rect normal = new Rect();// 矩形(这里只是个形式，只是用于判断是否需要动画.)  
    private boolean isCount = false;// 是否开始计算  

    public BounceScrollView(Context context, AttributeSet attrs) {  
        super(context, attrs);  
    }  

    /*** 
     * 根据 XML 生成视图工作完成.该函数在生成视图的最后调用，在所有子视图添加完之后. 即使子类覆盖了 onFinishInflate 
     * 方法，也应该调用父类的方法，使该方法得以执行. 
     */  
    @Override  
    protected void onFinishInflate() {  
        if (getChildCount() > 0) {  
            inner = getChildAt(0);  
        }  
    }  

    /*** 
     * 监听touch 
     */  
    @Override  
    public boolean onTouchEvent(MotionEvent ev) {  
        if (inner != null) {  
            commOnTouchEvent(ev);  
        }  

        return super.onTouchEvent(ev);  
    }  

    /*** 
     * 触摸事件 
     *  
     * @param ev 
     */  
    public void commOnTouchEvent(MotionEvent ev) {  
        int action = ev.getAction();  
        switch (action) {  
        case MotionEvent.ACTION_DOWN:  
            break;  
        case MotionEvent.ACTION_UP:  
            // 手指松开.  
            if (isNeedAnimation()) {  
                animation();  
                isCount = false;  
            }  
            break;  
        case MotionEvent.ACTION_MOVE:  
            final float preY = y;// 按下时的y坐标  
            float nowY = ev.getY();// 时时y坐标  
            int deltaY = (int) (preY - nowY);// 滑动距离  
            if (!isCount) {  
                deltaY = 0; // 在这里要归0.  
            }  

            y = nowY;  
            // 当滚动到最上或者最下时就不会再滚动，这时移动布局  
            if (isNeedMove()) {  
                // 初始化头部矩形  
                if (normal.isEmpty()) {  
                    // 保存正常的布局位置  
                    normal.set(inner.getLeft(), inner.getTop(),  
                            inner.getRight(), inner.getBottom());  
                }  
                // 移动布局  
                inner.layout(inner.getLeft(), inner.getTop() - deltaY / 2,  
                        inner.getRight(), inner.getBottom() - deltaY / 2);  
            }  
            isCount = true;  
            break;  

        default:  
            break;  
        }  
    }  

    /*** 
     * 回缩动画 
     */  
    public void animation() {  
        // 开启移动动画  
        TranslateAnimation ta = new TranslateAnimation(0, 0, inner.getTop(),  
                normal.top);  
        ta.setDuration(200);  
        inner.startAnimation(ta);  
        // 设置回到正常的布局位置  
        inner.layout(normal.left, normal.top, normal.right, normal.bottom);  

        normal.setEmpty();  

    }  

    // 是否需要开启动画  
    public boolean isNeedAnimation() {  
        return !normal.isEmpty();  
    }  

    /*** 
     * 是否需要移动布局 inner.getMeasuredHeight():获取的是控件的总高度 
     *  
     * getHeight()：获取的是屏幕的高度 
     *  
     * @return 
     */  
    public boolean isNeedMove() {  
        int offset = inner.getMeasuredHeight() - getHeight();  
        int scrollY = getScrollY();  
        // 0是顶部，后面那个是底部  
        if (scrollY == 0 || scrollY == offset) {  
            return true;  
        }  
        return false;  
    }
}

它的实现原理：

  1. 通过getChildAt(0)方法获取到scrollView的唯一一个子view—inner， 并用矩形Rect–>normal记录子view的初始位置(left,top,right，bottom)；
  2. 在onTouchEvent()方法的ACTION_MOVE中，根据子view inner滑动的距离，用view.setLayout(left,top,right,bottom)对子view inner进行滑动;
  3. 在onTouchEvent()方法的ACTION_UP中，对子view –> inner设置帧动画，让其回缩到原始位置。

出现的问题：

  1. scrollView中的子view，必须是溢出全屏的(比如说子view中含有较长的listview之类)，才能实现弹性效果，就是设置scrollView或者它的子View的layout_height为match_content也没用。这种效果就看起来很尴尬，在安全中心，退出程序之类的按钮上滑动就没反应，在下面灰色部分上下滑动就有弹性效果。这是个bug，得治！

解决原理：

  1. 根据事件分发机制，重写子view的dispatchTouchEvent(),onInterceptTouchEvent(),onTouchEvent();
  2. 根据事件分发机制，重写父类->scrollView的dispatchTouchEvent(),onInterceptTouchEvent(),onTouchEvent()
    关于android的事件分发机制，在文章http://blog.csdn.net/a394268045/article/details/51889797 有详细介绍

在自定义的scrollView和它的子View的三个方法中，分别加上log，会发现，这里写图片描述
当在上图中画红圈部分上下滑动时，log如下:

BounceScrollView dispatchTouchEvent...ACTION_DOWN
BounceScrollView onInterceptTouchEvent...ACTION_DOWN
BounceScrollView onTouchEvent...ACTION_DOWN
BounceScrollView dispatchTouchEvent...ACTION_MOVE
BounceScrollView onTouchEvent...ACTION_MOVE
BounceScrollView dispatchTouchEvent...ACTION_MOVE
BounceScrollView onTouchEvent...ACTION_MOVE
BounceScrollView dispatchTouchEvent...ACTION_MOVE
BounceScrollView onTouchEvent...ACTION_MOVE
BounceScrollView dispatchTouchEvent...ACTION_UP
BounceScrollView onTouchEvent...ACTION_UP

当在图中类似安全中心等按钮上滑动时，log如下：

BounceScrollView dispatchTouchEvent...ACTION_DOWN
BounceScrollView onInterceptTouchEvent...ACTION_DOWN
子View           dispatchTouchEvent...ACTION_DOWN
子View           onInterceptTouchEvent...ACTION_DOWN
子View           onTouchEvent...ACTION_DOWN
BounceScrollView dispatchTouchEvent...ACTION_MOVE
BounceScrollView onInterceptTouchEvent...ACTION_MOVE
子View           dispatchTouchEvent...ACTION_MOVE
子View           onTouchEvent...ACTION_MOVE
BounceScrollView dispatchTouchEvent...ACTION_MOVE
BounceScrollView onInterceptTouchEvent...ACTION_MOVE
子View           dispatchTouchEvent...ACTION_MOVE
子View           onTouchEvent...ACTION_MOVE
BounceScrollView dispatchTouchEvent...ACTION_MOVE
BounceScrollView onInterceptTouchEvent...ACTION_MOVE
子View           dispatchTouchEvent...ACTION_MOVE
子View           onTouchEvent...ACTION_MOVE
BounceScrollView dispatchTouchEvent...ACTION_UP
BounceScrollView onInterceptTouchEvent...ACTION_UP
子View           dispatchTouchEvent...ACTION_UP
子View           onTouchEvent...ACTION_UP

最终解决方案

如果在子view中处理，那么这个父View BounceScrollView就没有通用性，而且，当子view类型不同时，还得处理各种想不到的问题。所以，在父view中处理弹性效果是最好的。但是，当我在子view上下滑动时，BounceScrollView居然没有调用onTouchEvent()！而不管是在画红圈区域上下滑动，还是在按钮上滑动，都会调用父View的dispatchTouchEvent()方法。OK，那我们就可以将弹性效果放到dispatchTouchEvent()中，并加上上下滑动的判断，最终代码如下：

/*  
 *@author luoxiaohui
 *@date 2016年4月18日
 *@description 具有弹性的ScrollView
 **/

public class BounceScrollView extends ScrollView {

    private static final String TAG = "BounceScrollView";

    private View inner;// 孩子View  

    private float y;// 点击时y坐标  

    private Rect normal = new Rect();// 矩形(这里只是个形式，只是用于判断是否需要动画.)  

    private boolean isCount = false;// 是否开始计算  
    private float lastX = 0;
    private float lastY = 0;
    private float currentX = 0;
    private float currentY = 0;
    private float distanceX = 0;
    private float distanceY = 0;
    private boolean upDownSlide = false; //判断上下滑动的flag

    public BounceScrollView(Context context, AttributeSet attrs) {  
        super(context, attrs);  
    }  

    /*** 
     * 根据 XML 生成视图工作完成.该函数在生成视图的最后调用，在所有子视图添加完之后. 即使子类覆盖了 onFinishInflate 
     * 方法，也应该调用父类的方法，使该方法得以执行. 
     */  
    @Override  
    protected void onFinishInflate() {  
        if (getChildCount() > 0) {  
            inner = getChildAt(0);  
            View view;
        }  
    }  

    @Override
    public boolean dispatchTouchEvent(MotionEvent ev) {
        // TODO Auto-generated method stub

        currentX = ev.getX();
        currentY = ev.getY();
        switch(ev.getAction()){
        case MotionEvent.ACTION_DOWN:

            break;
        case MotionEvent.ACTION_MOVE:
            distanceX = currentX - lastX;
            distanceY = currentY - lastY;
            if(Math.abs(distanceX)<Math.abs(distanceY) && Math.abs(distanceY)>12){

                upDownSlide = true;
            }
            break;
        case MotionEvent.ACTION_UP:

            break;
        default:
            break;          
        }
        lastX = currentX;
        lastY = currentY;
        if (upDownSlide && inner != null) commOnTouchEvent(ev); 
        return super.dispatchTouchEvent(ev);
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        // TODO Auto-generated method stub
        return super.onInterceptTouchEvent(ev);
    }

    /*** 
     * 监听touch 
     */  
    @Override  
    public boolean onTouchEvent(MotionEvent ev) { 
        return super.onTouchEvent(ev);  
    }


    /*** 
     * 触摸事件 
     *  
     * @param ev 
     */  
    public void commOnTouchEvent(MotionEvent ev) {  
        int action = ev.getAction();  
        switch (action) {  
        case MotionEvent.ACTION_DOWN:  
            break;  
        case MotionEvent.ACTION_UP:  
            // 手指松开.  
            if (isNeedAnimation()) {  
                animation();  
                isCount = false;  
            }  
            clear0();
            break;  
             */  
        case MotionEvent.ACTION_MOVE:  
            final float preY = y;// 按下时的y坐标  
            float nowY = ev.getY();// 时时y坐标  
            int deltaY = (int) (preY - nowY);// 滑动距离  
            if (!isCount) {  
                deltaY = 0; // 在这里要归0.  
            }  

            y = nowY;  
            // 当滚动到最上或者最下时就不会再滚动，这时移动布局  
            if (isNeedMove()) {  
                // 初始化头部矩形  
                if (normal.isEmpty()) {  
                    // 保存正常的布局位置  
                    normal.set(inner.getLeft(), inner.getTop(),  
                            inner.getRight(), inner.getBottom());  
                }  
                // 移动布局  
                inner.layout(inner.getLeft(), inner.getTop() - deltaY / 2,  
                        inner.getRight(), inner.getBottom() - deltaY / 2);  
            }  
            isCount = true;  
            break;  

        default:  
            break;  
        }  
    }  

    /*** 
     * 回缩动画 
     */  
    public void animation() {  
        // 开启移动动画  
        TranslateAnimation ta = new TranslateAnimation(0, 0, inner.getTop(),  
                normal.top);  
        ta.setDuration(200);  
        inner.startAnimation(ta);  
        // 设置回到正常的布局位置  
        inner.layout(normal.left, normal.top, normal.right, normal.bottom);  

        normal.setEmpty();  

    }  

    // 是否需要开启动画  
    public boolean isNeedAnimation() {  
        return !normal.isEmpty();  
    }  

    /*** 
     * 是否需要移动布局 inner.getMeasuredHeight():获取的是控件的总高度 
     *  
     * getHeight()：获取的是屏幕的高度 
     *  
     * @return 
     */  
    public boolean isNeedMove() {  
        int offset = inner.getMeasuredHeight() - getHeight();  
        int scrollY = getScrollY();  
        // 0是顶部，后面那个是底部  
        if (scrollY == 0 || scrollY == offset) {  
            return true;  
        }  
        return false;  
    }

    private void clear0(){
        lastX = 0;
        lastY = 0;
        distanceX = 0;
        distanceY = 0;
        upDownSlide = false;
    }

这种处理方式，毫不影响子View的onClick事件，并能完美实现弹性效果,经过反复测试，现已放入项目中~

罗小辉
关注
专栏目录
android ScrollView弹性控件，横向和纵向滑动
07-04
和网络上的ReboundScrollView类似，但是没有那些滑动BUG，并且有横向弹性滑动
弹性SCrollView
wqewq19的博客
06-07 325
传承者（Inheritors）打造共同进步生态圈！！！转载public class ReboundScrollView extends ScrollView { //移动因子, 是一个百分比, 比如手指移动了100px, 那么View就只移动50px //目的是达到一个延迟的效果 private static final float MOVE_FACTOR = 0.5f;
android scrollview用法
最新发布
weixin_36688589的博客
08-09 78
Android ScrollView 用法详解 当我们在开发 Android 应用时，经常会遇到需要在屏幕上显示大量内容的情况。这个时候，ScrollView 是一个非常有用的控件。它可以让用户在屏幕上竖向滚动内容。本文将逐步引导你学习如何实现 ScrollView 的基本用法。 实现 ScrollView 的步骤流程 以...
Android自定义控件（二）——有弹性的ScrollView
weixin_33828101的博客
11-27 73
本文在http://gundumw100.iteye.com/blog/1075286的基础上稍作修改， 实现了当手指滑动到ScrollView的顶部、底部时， 可以继续的向上、向下拉伸。当释放手指的时候，向上、下弹回。 效果如图所示：   主要代码：   [java] view plaincopy   public class ElasticScrollVi...
android 弹性scrollview,Android自定义控件（二）——有弹性的ScrollView
weixin_33952612的博客
05-29 289
实现了当手指滑动到ScrollView的顶部、底部时，可以继续的向上、向下拉伸。当释放手指的时候，向上、下弹回。效果如图所示： 主要代码：public class ElasticScrollView extends ScrollView {private View inner;private float y;private Rect normal = new Rect();private bool...
Android 弹性ScrollView和悬浮头.zip
07-10
这个名为"Android 弹性ScrollView和悬浮头"的压缩包文件正专注于解决这一问题，它提供了源码示例和相关说明，帮助开发者在Android应用中实现类似于iOS的弹性滚动效果和浮动头部功能。 首先，我们来理解一下"弹性...
Android，自定义ScrollView，实现过度滑动时回弹效果
12-08
本主题关注的是如何自定义一个ScrollView，使其在用户过度滑动后产生回弹效果，这种效果通常被称为“橡皮筋”效果或“弹性”效果。这个效果在iOS中很常见，而在Android中则需要我们手动实现。接下来，我们将深入探讨...
自定义弹性scrollviewDemo
08-14
本文将深入探讨如何基于`ScrollView`创建一个具有弹性效果的自定义组件，即“自定义弹性scrollviewDemo”。该组件实现了下拉弹回和上拉弹回的功能，与下拉刷新的效果类似，但更具趣味性和交互性。 首先，我们需要...
仿IOS弹性ScrollView
01-24
在Android开发中，为了提供与iOS类似的用户体验，开发者经常需要实现一些特定的界面效果，比如“仿iOS弹性ScrollView”。这个专题主要关注如何在Android平台上创建一个具有弹性滚动特性的ScrollView，使得用户在上下...
Android自定义view-弹性ScrollView(上)
SmartIceberg的博客
02-22 2140
前言： 相信很多安卓开发者都很头痛的一件事就是公司要求做的app和IOS端的风格保持一致，很多IOS端中具有弹性的ScrollView在android开发中不失为一个难题（相应的效果见IOS的微信端等等...）对应的软件可以查看。为了实现这样的效果，毫无疑问的一件事：可以考虑重写我们的ScrollView，然后在监听事件中做相应的处理。开题话说的太多了，直接开始我们的教程把。 正文: 首先贴
android 仿ios 弹性ScrollView 上下滑动
08-30
将文件复制到工程中，将包名改为自己项目的包名即可！简单好用
android 能上下弹性拉动的ScrollView
07-18
android 能上下弹性拉动的ScrollView,这个是demo，可以直接导入工程运行，代码是网上收集的
带弹性的ScrollView效果
11-03
使用XListView做出的弹性ScrollView效果，代码虽然有点变态，但是和iOs的弹性效果非常接近，是目前遇到过最好的弹性效果，看到咕咚运动是这样的效果，估计就是这样干出来的吧，倒是有点曲线救国的意思了，有兴趣的朋友可以看看。
unity scrollview 优化 高效重复利用 动态增删
08-14
unity scrollview 优化， 通过将显示区域外的子物体，重新赋值达到重复利用 示例效果： https://blog.csdn.net/weixin_41843959/article/details/81668685
由滑动顶端悬浮引发的性能优化大坑坑坑—ScrollView嵌套ListView以及层层嵌套
10-11
ScrollView嵌套ListView以及层层嵌套，导致的性能问题
Android上实现仿IOS弹性ScrollView
热门推荐
昨夜星辰的博客
02-17 1万+
前言 IOS的UI和用户体验是它的优势， 与IOS相比， Android的UI和用户体验可能要差一些。 虽然Android版本已经到了4.4， 对系统的各个方法进行了大量实质性的优化， 但他的显示效果和交互体验依然不及IOS。 例如IOS上的很多控件都是带弹性的, 也就是用于拖拽一个控件到了该控件的边界， 但是控件依然可以随着手指的移动而移动一段距离。 这样的话， 给用户的感觉就不那么生
【弹性ScrollView】Android弹性ScrollView的封装，让你的界面弹起来
Tomasyb的博客
05-25 808
配置下载已封装好的类导入自己的工程即可使用 下载地址使用步骤<com.daqsoft.baseproject.view.scrollview.ReboundScrollView android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout
android 弹性view,Android自定义弹性ScrollView
weixin_39877182的博客
05-27 160
Android自定义弹性ScrollView总结了下最近写的弹性ScrollView，如下代码主要是通过触摸事件加动态更改布局实现的弹性ScrollView，具体分析都在注解中！package ljh.android.view;import android.content.Context;import android.graphics.Rect;import android.util.Attrib...
评论 14
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值