快速给ListView加上回弹效果
2020-06-18 本文已影响0人
我的阿福
通过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));
}
