【转】Android 使用Scroller实现绚丽的ListView左右滑动删除Item效果

2022-12-02 12:20:25

原文网址：http://blog.csdn.net/xiaanming/article/details/17539199

转帖请注明本文出自xiaanming的博客（http://blog.csdn.net/xiaanming/article/details/17539199），请尊重他人的辛勤劳动成果，谢谢！

我在上一篇文章中Android 带你从源码的角度解析Scroller的滚动实现原理从源码的角度介绍了Scroller的滚动实现原理，相信大家对Scroller的使用有一定的了解，这篇文章就给大家带来使用Scroller的小例子，来帮助大家更加熟悉的掌握Scroller的使用，掌握好了Scroller的使用我们就能实现很多滑动的效果。例如侧滑菜单，launcher，ListView的下拉刷新等等效果，我今天实现的是ListView的item的左右滑动删除item的效果，现在很多朋友看到这个效果应该是在Android的通知栏下拉中看到这个滑动删除的效果吧，我看到这个效果是在我之前的三星手机上左右滑动打电话发短信的效果，感觉很棒，不过现在很多手机联系人滑动都不是我之前那台手机的效果啦，网上很多朋友也写了关于滑动删除ListView的item的例子，有些是滑动手指离开之后然后给item加向左或者向右的移动动画，我觉得这样子的用户体验不是很好，所以今天自己也写了一个关于ListView左右滑动删除Item的小例子,ListView的item会随着手指在屏幕上的滑动而滑动，手指离开屏幕的时候item会根据判断向左或者向右划出屏幕，就是跟通知栏的效果差不多，接下来就带大家来实现这个效果。

先说下实现该效果的主要思路

  1. 先根据手指触摸的点来获取点击的是ListView的哪一个item
  2. 手指在屏幕中滑动我们利用scrollBy()来使该item跟随手指一起滑动
  3. 手指放开的时候，我们判断手指拖动的距离来判断item到底是滑出屏幕还是回到开始位置

主要思路就是上面这三步，接下来我们就用代码来实现吧，首先我们新建一个项目，叫SlideCutListView

根据需求我们需要自己自定义一个ListView来实现该功能，接下来先贴出代码再讲解具体的实现

  1. package com.example.slidecutlistview;
  2. import android.content.Context;
  3. import android.util.AttributeSet;
  4. import android.view.MotionEvent;
  5. import android.view.VelocityTracker;
  6. import android.view.View;
  7. import android.view.ViewConfiguration;
  8. import android.view.WindowManager;
  9. import android.widget.AdapterView;
  10. import android.widget.ListView;
  11. import android.widget.Scroller;
  12. /**
  13. * @blog http://blog.csdn.net/xiaanming
  14. *
  15. * @author xiaanming
  16. *
  17. */
  18. public class SlideCutListView extends ListView {
  19. /**
  20. * 当前滑动的ListView　position
  21. */
  22. private int slidePosition;
  23. /**
  24. * 手指按下X的坐标
  25. */
  26. private int downY;
  27. /**
  28. * 手指按下Y的坐标
  29. */
  30. private int downX;
  31. /**
  32. * 屏幕宽度
  33. */
  34. private int screenWidth;
  35. /**
  36. * ListView的item
  37. */
  38. private View itemView;
  39. /**
  40. * 滑动类
  41. */
  42. private Scroller scroller;
  43. private static final int SNAP_VELOCITY = 600;
  44. /**
  45. * 速度追踪对象
  46. */
  47. private VelocityTracker velocityTracker;
  48. /**
  49. * 是否响应滑动，默认为不响应
  50. */
  51. private boolean isSlide = false;
  52. /**
  53. * 认为是用户滑动的最小距离
  54. */
  55. private int mTouchSlop;
  56. /**
  57. *  移除item后的回调接口
  58. */
  59. private RemoveListener mRemoveListener;
  60. /**
  61. * 用来指示item滑出屏幕的方向,向左或者向右,用一个枚举值来标记
  62. */
  63. private RemoveDirection removeDirection;
  64. // 滑动删除方向的枚举值
  65. public enum RemoveDirection {
  66. RIGHT, LEFT;
  67. }
  68. public SlideCutListView(Context context) {
  69. this(context, null);
  70. }
  71. public SlideCutListView(Context context, AttributeSet attrs) {
  72. this(context, attrs, 0);
  73. }
  74. public SlideCutListView(Context context, AttributeSet attrs, int defStyle) {
  75. super(context, attrs, defStyle);
  76. screenWidth = ((WindowManager) context.getSystemService(Context.WINDOW_SERVICE)).getDefaultDisplay().getWidth();
  77. scroller = new Scroller(context);
  78. mTouchSlop = ViewConfiguration.get(getContext()).getScaledTouchSlop();
  79. }
  80. /**
  81. * 设置滑动删除的回调接口
  82. * @param removeListener
  83. */
  84. public void setRemoveListener(RemoveListener removeListener) {
  85. this.mRemoveListener = removeListener;
  86. }
  87. /**
  88. * 分发事件，主要做的是判断点击的是那个item, 以及通过postDelayed来设置响应左右滑动事件
  89. */
  90. @Override
  91. public boolean dispatchTouchEvent(MotionEvent event) {
  92. switch (event.getAction()) {
  93. case MotionEvent.ACTION_DOWN: {
  94. addVelocityTracker(event);
  95. // 假如scroller滚动还没有结束，我们直接返回
  96. if (!scroller.isFinished()) {
  97. return super.dispatchTouchEvent(event);
  98. }
  99. downX = (int) event.getX();
  100. downY = (int) event.getY();
  101. slidePosition = pointToPosition(downX, downY);
  102. // 无效的position, 不做任何处理
  103. if (slidePosition == AdapterView.INVALID_POSITION) {
  104. return super.dispatchTouchEvent(event);
  105. }
  106. // 获取我们点击的item view
  107. itemView = getChildAt(slidePosition - getFirstVisiblePosition());
  108. break;
  109. }
  110. case MotionEvent.ACTION_MOVE: {
  111. if (Math.abs(getScrollVelocity()) > SNAP_VELOCITY
  112. || (Math.abs(event.getX() - downX) > mTouchSlop && Math
  113. .abs(event.getY() - downY) < mTouchSlop)) {
  114. isSlide = true;
  115. }
  116. break;
  117. }
  118. case MotionEvent.ACTION_UP:
  119. recycleVelocityTracker();
  120. break;
  121. }
  122. return super.dispatchTouchEvent(event);
  123. }
  124. /**
  125. * 往右滑动，getScrollX()返回的是左边缘的距离，就是以View左边缘为原点到开始滑动的距离，所以向右边滑动为负值
  126. */
  127. private void scrollRight() {
  128. removeDirection = RemoveDirection.RIGHT;
  129. final int delta = (screenWidth + itemView.getScrollX());
  130. // 调用startScroll方法来设置一些滚动的参数，我们在computeScroll()方法中调用scrollTo来滚动item
  131. scroller.startScroll(itemView.getScrollX(), 0, -delta, 0,
  132. Math.abs(delta));
  133. postInvalidate(); // 刷新itemView
  134. }
  135. /**
  136. * 向左滑动，根据上面我们知道向左滑动为正值
  137. */
  138. private void scrollLeft() {
  139. removeDirection = RemoveDirection.LEFT;
  140. final int delta = (screenWidth - itemView.getScrollX());
  141. // 调用startScroll方法来设置一些滚动的参数，我们在computeScroll()方法中调用scrollTo来滚动item
  142. scroller.startScroll(itemView.getScrollX(), 0, delta, 0,
  143. Math.abs(delta));
  144. postInvalidate(); // 刷新itemView
  145. }
  146. /**
  147. * 根据手指滚动itemView的距离来判断是滚动到开始位置还是向左或者向右滚动
  148. */
  149. private void scrollByDistanceX() {
  150. // 如果向左滚动的距离大于屏幕的二分之一，就让其删除
  151. if (itemView.getScrollX() >= screenWidth / 2) {
  152. scrollLeft();
  153. } else if (itemView.getScrollX() <= -screenWidth / 2) {
  154. scrollRight();
  155. } else {
  156. // 滚回到原始位置,为了偷下懒这里是直接调用scrollTo滚动
  157. itemView.scrollTo(0, 0);
  158. }
  159. }
  160. /**
  161. * 处理我们拖动ListView item的逻辑
  162. */
  163. @Override
  164. public boolean onTouchEvent(MotionEvent ev) {
  165. if (isSlide && slidePosition != AdapterView.INVALID_POSITION) {
  166. requestDisallowInterceptTouchEvent(true);
  167. addVelocityTracker(ev);
  168. final int action = ev.getAction();
  169. int x = (int) ev.getX();
  170. switch (action) {
  171. case MotionEvent.ACTION_DOWN:
  172. break;
  173. case MotionEvent.ACTION_MOVE:
  174. MotionEvent cancelEvent = MotionEvent.obtain(ev);
  175. cancelEvent.setAction(MotionEvent.ACTION_CANCEL |
  176. (ev.getActionIndex()<< MotionEvent.ACTION_POINTER_INDEX_SHIFT));
  177. onTouchEvent(cancelEvent);
  178. int deltaX = downX - x;
  179. downX = x;
  180. // 手指拖动itemView滚动, deltaX大于0向左滚动，小于0向右滚
  181. itemView.scrollBy(deltaX, 0);
  182. return true;  //拖动的时候ListView不滚动
  183. case MotionEvent.ACTION_UP:
  184. int velocityX = getScrollVelocity();
  185. if (velocityX > SNAP_VELOCITY) {
  186. scrollRight();
  187. } else if (velocityX < -SNAP_VELOCITY) {
  188. scrollLeft();
  189. } else {
  190. scrollByDistanceX();
  191. }
  192. recycleVelocityTracker();
  193. // 手指离开的时候就不响应左右滚动
  194. isSlide = false;
  195. break;
  196. }
  197. }
  198. //否则直接交给ListView来处理onTouchEvent事件
  199. return super.onTouchEvent(ev);
  200. }
  201. @Override
  202. public void computeScroll() {
  203. // 调用startScroll的时候scroller.computeScrollOffset()返回true，
  204. if (scroller.computeScrollOffset()) {
  205. // 让ListView item根据当前的滚动偏移量进行滚动
  206. itemView.scrollTo(scroller.getCurrX(), scroller.getCurrY());
  207. postInvalidate();
  208. // 滚动动画结束的时候调用回调接口
  209. if (scroller.isFinished()) {
  210. if (mRemoveListener == null) {
  211. throw new NullPointerException("RemoveListener is null, we should called setRemoveListener()");
  212. }
  213. itemView.scrollTo(0, 0);
  214. mRemoveListener.removeItem(removeDirection, slidePosition);
  215. }
  216. }
  217. }
  218. /**
  219. * 添加用户的速度跟踪器
  220. *
  221. * @param event
  222. */
  223. private void addVelocityTracker(MotionEvent event) {
  224. if (velocityTracker == null) {
  225. velocityTracker = VelocityTracker.obtain();
  226. }
  227. velocityTracker.addMovement(event);
  228. }
  229. /**
  230. * 移除用户速度跟踪器
  231. */
  232. private void recycleVelocityTracker() {
  233. if (velocityTracker != null) {
  234. velocityTracker.recycle();
  235. velocityTracker = null;
  236. }
  237. }
  238. /**
  239. * 获取X方向的滑动速度,大于0向右滑动，反之向左
  240. *
  241. * @return
  242. */
  243. private int getScrollVelocity() {
  244. velocityTracker.computeCurrentVelocity(1000);
  245. int velocity = (int) velocityTracker.getXVelocity();
  246. return velocity;
  247. }
  248. /**
  249. *
  250. * 当ListView item滑出屏幕，回调这个接口
  251. * 我们需要在回调方法removeItem()中移除该Item,然后刷新ListView
  252. *
  253. * @author xiaanming
  254. *
  255. */
  256. public interface RemoveListener {
  257. public void removeItem(RemoveDirection direction, int position);
  258. }
  259. }
  • 首先我们重写dispatchTouchEvent（）方法，该方法是事件的分发方法，我们在里面只做了一些简单的步骤，我们按下屏幕的时候，如果某个item正在进行滚动，我们直接交给SlideCutListView的父类处理分发事件，否则根据点击的X,Y坐标利用pointToPosition(int x, int y)来获取点击的是ListView的哪一个position，从而获取到我们需要滑动的item的View，我们还在该方法加入了滑动速度的检测，并且在ACTION_MOVE的时候来判断是否响应item的左右移动，用isSlide来记录是否响应左右滑动
  • 然后就是重写onTouchEvent()方法，我们先判断isSlide为true,并且我们点击的是ListView上面的有效的position,否则直接交给SlideCutListView的父类也就是ListView来处理，在ACTION_MOVE中调用scrollBy()来移动item,scrollBy()是相对item的上一个位置进行移动的，所以我们每次都要用现在移动的距离减去上一个位置的距离然后赋给scrollBy()方法，这样子我们就实现了item的平滑移动，当我们将手指抬起的时候，我们先根据手指滑动的速度来确定是item是滑出屏幕还是滑动至原始位置，如果向右的速度大于我们设置的SNAP_VELOCITY，item就调用scrollRight()方法滚出屏幕，如果向左的速度小于-SNAP_VELOCITY，则调用scrollLeft()向左滚出屏幕，如果我们是缓慢的移动item，则调用scrollByDistanceX（）方法来判断是滚到那个位置

在scrollRight()和scrollLeft()方法中我们使用Scroller类的startScroll()方法先设置滚动的参数，然后调用postInvalidate()来刷新界面，界面刷新就会调用computeScroll()方法，我们在里面处理滚动逻辑就行了，值得一提的是computeScroll()里面的这段代码

  1. itemView.scrollTo(0, 0);

我们需要将该item滚动在（0, 0 ）这个点，因为我们只是将ListView的Item滚动出屏幕而已，并没有将该item移除，而且我们不能手动调用removeView()来从ListView中移除该item，我们只能通过改变ListView的数据，然后通过notifyDataSetChanged()来刷新ListView,所以我们需要将其滚动至(0, 0),这里比较关键。

定义好了我们左右滑动的ListView,接下来就来使用它，布局很简单，一个RelativeLayout包裹我们自定义的ListView

  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. xmlns:tools="http://schemas.android.com/tools"
  3. android:layout_width="match_parent"
  4. android:layout_height="match_parent"
  5. android:background="@android:color/darker_gray">
  6. <com.example.slidecutlistview.SlideCutListView
  7. android:id="@+id/slideCutListView"
  8. android:layout_width="match_parent"
  9. android:layout_height="match_parent"
  10. android:listSelector="@android:color/transparent"
  11. android:divider="@drawable/reader_item_divider"
  12. android:cacheColorHint="@android:color/transparent">
  13. </com.example.slidecutlistview.SlideCutListView>
  14. </RelativeLayout>

接下来我们来看看ListView的item的布局

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:layout_width="fill_parent"
  4. android:layout_height="wrap_content" >
  5. <LinearLayout
  6. android:layout_width="fill_parent"
  7. android:layout_height="wrap_content"
  8. android:background="@drawable/friendactivity_comment_detail_list2" >
  9. <TextView
  10. android:id="@+id/list_item"
  11. android:layout_width="match_parent"
  12. android:layout_height="wrap_content"
  13. android:layout_margin="15dip" />
  14. </LinearLayout>
  15. </LinearLayout>

还记得我在上一篇文章中提到过调用scrollTo()方法是对里面的子View进行滚动的，而不是对整个布局进行滚动的，所以我们用LinearLayout来套住我们的item的布局，这点需要注意一下，不然滚动的只是TextView。

主页面MainActivity里面的代码比较简单,里面使用的也是ArrayAdapter，相信大家都能看懂

  1. package com.example.slidecutlistview;
  2. import java.util.ArrayList;
  3. import java.util.List;
  4. import android.app.Activity;
  5. import android.os.Bundle;
  6. import android.view.View;
  7. import android.widget.AdapterView;
  8. import android.widget.AdapterView.OnItemClickListener;
  9. import android.widget.ArrayAdapter;
  10. import android.widget.Toast;
  11. import com.example.slidecutlistview.SlideCutListView.RemoveDirection;
  12. import com.example.slidecutlistview.SlideCutListView.RemoveListener;
  13. public class MainActivity extends Activity implements RemoveListener{
  14. private SlideCutListView slideCutListView ;
  15. private ArrayAdapter<String> adapter;
  16. private List<String> dataSourceList = new ArrayList<String>();
  17. @Override
  18. protected void onCreate(Bundle savedInstanceState) {
  19. super.onCreate(savedInstanceState);
  20. setContentView(R.layout.activity_main);
  21. init();
  22. }
  23. private void init() {
  24. slideCutListView = (SlideCutListView) findViewById(R.id.slideCutListView);
  25. slideCutListView.setRemoveListener(this);
  26. for(int i=0; i<20; i++){
  27. dataSourceList.add("滑动删除" + i);
  28. }
  29. adapter = new ArrayAdapter<String>(this, R.layout.listview_item, R.id.list_item, dataSourceList);
  30. slideCutListView.setAdapter(adapter);
  31. slideCutListView.setOnItemClickListener(new OnItemClickListener() {
  32. @Override
  33. public void onItemClick(AdapterView<?> parent, View view,
  34. int position, long id) {
  35. Toast.makeText(MainActivity.this, dataSourceList.get(position), Toast.LENGTH_SHORT).show();
  36. }
  37. });
  38. }
  39. //滑动删除之后的回调方法
  40. @Override
  41. public void removeItem(RemoveDirection direction, int position) {
  42. adapter.remove(adapter.getItem(position));
  43. switch (direction) {
  44. case RIGHT:
  45. Toast.makeText(this, "向右删除  "+ position, Toast.LENGTH_SHORT).show();
  46. break;
  47. case LEFT:
  48. Toast.makeText(this, "向左删除  "+ position, Toast.LENGTH_SHORT).show();
  49. break;
  50. default:
  51. break;
  52. }
  53. }
  54. }

这里面需要对SlideCutListView设置RemoveListener，然后我们在回调方法removeItem(RemoveDirection direction, int position)中删除该position的数据，在调用notifyDataSetChanged()刷新ListView,我这里用的是ArrayAdatper,直接调用remove()就可以了。

所有的代码就编写完了，我们来运行下程序看看效果吧

【转】Android 使用Scroller实现绚丽的ListView左右滑动删除Item效果

好了，今天的讲解就到此结束了，有疑问的朋友可以在下面留言，我会帮大家解答的。今天是2013年的最后一天，希望大家开开心心度过2013，也开开心心的迎接2014，提前祝大家元旦快乐！

项目源码，点击下载

上一篇：javascript中的for in循环和for in循环的使用陷阱


下一篇：Android 使用NineOldAndroids实现绚丽的ListView左右滑动删除Item效果