快速给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.
 * 

* {@link Scroller}或者{@link android.view.ViewGroup.MarginLayoutParams}实现ListView的上下弹性拉伸 *

*

* 其实用@{@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); } } }





    

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

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

你可能感兴趣的:(快速给ListView加上回弹效果)