快速给ListView加上回弹效果

作者: 我的阿福 | 来源:发表于2020-06-18 16:42 被阅读0次

快速给ListView加上回弹效果
ListView 回弹/阻尼效果
Android ListView ScrollView回弹效果
Android ListView实现阻尼回弹效果并去除边缘阴影
JdkJavaCompiler异常记录
《Android APP可能有的东西》之UI篇：加入购物车动画
为列表添加布局动画效果
阻尼回弹效果，以及ScrollView嵌套listview导致显
ps运动效果，快速给运动人像加上动感效果
滑动回弹与内层listview的滑动冲突

通过Android移动位置的Scroller和Margin方法，用一些简单的操作就可以给ListView加上类似iOS列表的拉伸弹性效果，如图所示:

这是通过MarginLayoutParams参数实现的。因为MarginLayoutParams实现的是整个ListView控件的位置改变，如果把ListView的父控件加上美女背景，那么ListView拉开后就看到美女了，根据这个原理可以实现一些较酷炫的社交app的类似效果。

meinv.gif

这是通过Scroller实现的。Scroller实现的是ListView控件本身内容的位置改变，自身位置不变，所以只能实现普通的回弹效果，看不到美女。

nothing.gif

大概的实现思路：
1.监听listview的滑动到顶端和底端，这个监听网上有很多方法，不多说，具体也可参见下方源码。
2.滑动到顶端时候，如果还往下滑动，那么用Scroller来将listview的内容向下滚动，同理，滑动到底端的时候，用Scroller将listview的内容向上滚动。MarginParams的方式，只是在该滚动的时候设置topMargin和bottomMargin的值即可。这里值得注意的是，用MarginParams实现方式，ListView的宽高应该设置成match_parent。且，当滚动到最底端的时候，不能只将bottomMargin增加，还必须将topMargin向负方向增加相应的值
3.其他就是一些在onTouchEvent方法中的微调，细心即可，整个实现过程很简单。
总结：
其实，用这些方法，不只是listview，基本上可以给任何控件加上类似的效果，可以多多尝试。
方便使用和阅读，将两种实现方式整合到了一起，两个类分别实现一个抽象类TelescopTool，在这里切换：

        mTelescopTool = new ScrollerTelescopTool(this);
//        mTelescopTool = new MarginTelescopTool(this);

下面是完整的代码：

 package com.h.anthony.widgets;

import android.content.Context;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.widget.AbsListView;
import android.widget.ListView;
import android.widget.Scroller;

/**
 * Created by hf on 2020-06-17.
 * <p>
 * {@link Scroller}或者{@link android.view.ViewGroup.MarginLayoutParams}实现ListView的上下弹性拉伸
 * <p>
 * <p>
 * 其实用@{@link View#setTranslationY(float)} }也可以实现拉伸，但每次拉伸的时候边界总是有闪烁的情况，
 * 未找到原因，这里就不实现这种方式了。
 */
public class TelescopingListView extends ListView implements AbsListView.OnScrollListener {

    private static final String TAG = "WechatListView";


    /**
     * 标记是否滑到了最顶端
     */
    private boolean mTopArrived = true;

    /**
     * 标记是否滑到了最底端
     */
    private boolean mBottomArrived = false;

    /**
     * 处理相关回弹效果的工具类，包含两种实现方式
     */
    private TelescopTool mTelescopTool;


    public TelescopingListView(Context context, AttributeSet attrs) {
        super(context, attrs);
        setOverScrollMode(View.OVER_SCROLL_NEVER);
        setOnScrollListener(this);
        mTelescopTool = new ScrollerTelescopTool(this);
//        mTelescopTool = new MarginTelescopTool(this);
    }


    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        super.onLayout(changed, l, t, r, b);
        mTelescopTool.listViewLayoutChange();
    }

    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        return mTelescopTool.dealTouchEvent(mTopArrived, mBottomArrived, ev) ? true : super.onTouchEvent(ev);
    }


    @Override
    public void computeScroll() {
        mTelescopTool.computeScroll();
    }


    @Override
    public void onScrollStateChanged(AbsListView view, int scrollState) {
    }

    /**
     * @param view
     * @param firstVisibleItem
     * @param visibleItemCount
     * @param totalItemCount
     */
    @Override
    public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
        View firstChildView = getChildAt(0);
        if (firstChildView != null) {
            int top = firstChildView.getTop();
            if (top == 0 && firstVisibleItem == 0) {//滑到最顶端
                mTopArrived = true;
                Log.d(TAG, "滑到了最顶端");
            } else {
                mTopArrived = false;
            }
        } else {
            mTopArrived = false;
        }


        View lastChildView = getChildAt(getChildCount() - 1);
        if (lastChildView != null) {
            int bottom = lastChildView.getBottom();
            if (bottom == getHeight() && (firstVisibleItem + visibleItemCount == totalItemCount)) {//滑到最低端
                mBottomArrived = true;
                Log.d(TAG, "滑到了最低端");
            } else {
                mBottomArrived = false;
            }
        } else {
            mBottomArrived = false;
        }
    }


    /**
     * 抽象类
     */
    private static abstract class TelescopTool {

        /**
         * 阻尼参数(0,1]越小拉动越费力，其实就是把实际拉伸的距离*这个参数。
         */
        private final static float DAMPING = 0.5f;

        protected TelescopingListView telescopingListView;
        /**
         * 记录上一次手指距离屏幕边缘的Y坐标
         */
        protected float mmLastRawY;

        public TelescopTool(TelescopingListView telescopingListView) {
            this.telescopingListView = telescopingListView;
        }

        abstract boolean dealTouchEvent(boolean topArrived, boolean bottomArrived, MotionEvent ev);

        /**
         * 给ScrollerTelescopTool用的，配合Scroller使用
         */
        void computeScroll() {

        }

        /**
         * 把实际的距离*阻尼参数，增加阻尼效果
         *
         * @param delTaY
         * @return
         */
        protected float adjustDelta(float delTaY) {
            float absValue = Math.abs(delTaY) * DAMPING;
            if (delTaY < 0) {
                absValue *= -1;
            }
            return absValue;
        }


        /**
         * 当listview onLayout时候，这时候可以重新获取listView的布局参数
         */
        public void listViewLayoutChange() {

        }
    }

    /**
     * 用Scroller实现
     */
    private static class ScrollerTelescopTool extends TelescopTool {
        private Scroller mmScroller;

        public ScrollerTelescopTool(TelescopingListView telescopingListView) {
            super(telescopingListView);
            mmScroller = new Scroller(telescopingListView.getContext());
        }

        @Override
        boolean dealTouchEvent(boolean topArrived, boolean bottomArrived, MotionEvent ev) {
            if (mmScroller != null) {
                mmScroller.forceFinished(true);
            }
            float nowRawY = ev.getRawY();
            switch (ev.getAction()) {
                case MotionEvent.ACTION_DOWN:
                    mmLastRawY = nowRawY;
                    break;
                case MotionEvent.ACTION_MOVE:
                    float delTaY = adjustDelta(nowRawY - mmLastRawY);
                    mmLastRawY = nowRawY;
                    float nowScrollY = telescopingListView.getScrollY();
                    if (topArrived) {
                        if (delTaY > 0) {
                            telescopingListView.scrollBy(0, (int) -delTaY);
                            return true;
                        } else if (delTaY < 0) {
                            if (nowScrollY < 0) {
                                telescopingListView.scrollBy(0, (int) -delTaY);
                                return true;
                            }
                        } else {
                            return true;
                        }
                    } else if (bottomArrived) {
                        if (delTaY < 0) {
                            telescopingListView.scrollBy(0, (int) -delTaY);
                            return true;
                        } else if (delTaY > 0) {
                            if (nowScrollY > 0) {
                                telescopingListView.scrollBy(0, (int) -delTaY);
                                return true;
                            }
                        } else {
                            return true;
                        }
                    }
                case MotionEvent.ACTION_UP:
                    smoothScrollTo(0);
                    break;
            }
            return false;
        }


        @Override
        void computeScroll() {
            if (mmScroller.computeScrollOffset()) {
                telescopingListView.scrollTo(mmScroller.getCurrX(), mmScroller.getCurrY());
                telescopingListView.invalidate();
            }
        }

        /**
         * 工具方法
         * 平滑的滑动到一个指定的坐标
         *
         * @param distnationY y方向要滑动到的目的坐标
         */
        private void smoothScrollTo(int distnationY) {
            mmScroller.startScroll(telescopingListView.getScrollX(), telescopingListView.getScrollY(), telescopingListView.getScrollX(), distnationY - telescopingListView.getScrollY(), 200);
            telescopingListView.invalidate();
        }
    }


    /**
     * 用MarginLayoutParams实现
     */
    private static class MarginTelescopTool extends TelescopTool {

        private MarginLayoutParams mmMarginParams;

        public MarginTelescopTool(TelescopingListView telescopingListView) {
            super(telescopingListView);
        }

        @Override
        public void listViewLayoutChange() {
            mmMarginParams = (MarginLayoutParams) telescopingListView.getLayoutParams();
        }

        @Override
        boolean dealTouchEvent(boolean topArrived, boolean bottomArrived, MotionEvent ev) {
            float nowRawY = ev.getRawY();
            switch (ev.getAction()) {
                case MotionEvent.ACTION_DOWN:
                    mmLastRawY = nowRawY;
                    break;
                case MotionEvent.ACTION_MOVE:
                    float delTaY = adjustDelta(nowRawY - mmLastRawY);
                    mmLastRawY = nowRawY;
                    if (topArrived) {
                        float nowTopMargin = mmMarginParams.topMargin;
                        if (delTaY > 0) {
                            mmMarginParams.topMargin += delTaY;
                            listRequestLayout();
                            return true;
                        } else if (delTaY < 0) {
                            if (nowTopMargin > 0) {
                                mmMarginParams.topMargin += delTaY;
                                listRequestLayout();
                                return true;
                            }
                        } else {
                            return true;
                        }
                    } else if (bottomArrived) {
                        if (delTaY < 0) {
                            mmMarginParams.topMargin += delTaY;
                            mmMarginParams.bottomMargin -= delTaY;
                            listRequestLayout();
                            return true;
                        } else if (delTaY > 0) {
                            if (mmMarginParams.bottomMargin > 0) {
                                mmMarginParams.bottomMargin -= delTaY;
                                if (mmMarginParams.topMargin < 0) {
                                    mmMarginParams.topMargin += delTaY;
                                    mmMarginParams.topMargin = mmMarginParams.topMargin <= 0 ? mmMarginParams.topMargin : 0;
                                }
                                listRequestLayout();
                                return true;
                            }
                        } else {
                            return true;
                        }
                    }

                case MotionEvent.ACTION_UP:
                    mmMarginParams.topMargin = 0;
                    mmMarginParams.bottomMargin = 0;
                    listRequestLayout();
                    break;
            }
            return false;
        }

        private void listRequestLayout() {
            telescopingListView.setLayoutParams(mmMarginParams);
        }
    }

}

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@mipmap/meinv2"
    tools:context=".MainActivity">


    <com.h.anthony.widgets.TelescopingListView
        android:id="@+id/list_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/white" />
</LinearLayout>

  @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        listView = findViewById(R.id.list_view);

        final List<String> list = new ArrayList<>();
        for (int i = 0; i < size; i++) {
            list.add(i + "==============text");
        }
        listView.setAdapter(new Adapter(list));
    }

快速给ListView加上回弹效果
通过Android移动位置的Scroller和Margin方法，用一些简单的操作就可以给ListView加上类似i...
ListView 回弹/阻尼效果
网上例子比较多, 找着试了好几个不是真的行. 所以这必须是真的能用的, 而且效果要棒棒的. 下面例出好几种方案 ....
Android ListView ScrollView回弹效果
转自：http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/...
Android ListView实现阻尼回弹效果并去除边缘阴影
使用ListView将位置拖到顶部和底部默认是没有回弹效果的，为了增加这个效果，方法如下：1、开启overScro...
JdkJavaCompiler异常记录
最近由于业务需要，需要实现CoordinatorLayout快速滑动回弹效果，据了解需要重新 “behavior”...
《Android APP可能有的东西》之UI篇：加入购物车动画
很多电商app的加入购物车的动作会要求加上动画效果：飞进购物车，想来也合理，在listview界面时商品快速加入购...
为列表添加布局动画效果
给列表ListView添加动画效果，首先MainActivity继承自ListView，通过setLayoutAn...
阻尼回弹效果，以及ScrollView嵌套listview导致显
ps运动效果，快速给运动人像加上动感效果
制作一种人物在飞驰的效果，这种效果一般我们在用相机进行人物运动的时候会有这种场景，我们如何在PS中制作呢，可以通过...
滑动回弹与内层listview的滑动冲突
title: 滑动回弹与内层listview的滑动冲突date: 2016-12-06 10:33:27tags:...