通过Android移动位置的Scroller和Margin方法,用一些简单的操作就可以给ListView加上类似iOS列表的拉伸弹性效果,如图所示:
- 这是通过MarginLayoutParams参数实现的。因为MarginLayoutParams实现的是整个ListView控件的位置改变,如果把ListView的父控件加上美女背景,那么ListView拉开后就看到美女了,根据这个原理可以实现一些较酷炫的社交app的类似效果。
-
这是通过Scroller实现的。Scroller实现的是ListView控件本身内容的位置改变,自身位置不变,所以只能实现普通的回弹效果,看不到美女。
大概的实现思路:
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));
}