Android 高级UI设计笔记03：使用ListView实现左右滑动删除Item

1. 这里就是实现一个很简单的功能，使用ListView实现左右滑动删除Item：

（1）当我们在ListView的某个Item，向左滑动显示一个删除按钮，用户点击按钮，即可以删除该项item，并且有一个简单动画。

（2）然后向右滑动时候，可以撤销删除。

2. 下面是是完整的思维过程：

Android工程结构如下：

（1）首先我们先来到主布局文件main.xml，如下：

 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     tools:context=".MainActivity" >
 6 
 7     <ListView
 8         android:id="@+id/list"
 9         android:layout_width="fill_parent"
10         android:layout_height="fill_parent" >
11     </ListView>
12 
13 </RelativeLayout>

（2）上面使用到ListView，自然需要选用Adapter，自定义适配器ListViewAdapter，如下：

  1 package com.himi.listviewdeleteitem;
  2 
  3 import java.util.ArrayList;
  4 
  5 import android.content.Context;
  6 import android.view.LayoutInflater;
  7 import android.view.MotionEvent;
  8 import android.view.View;
  9 import android.view.View.OnClickListener;
 10 import android.view.View.OnTouchListener;
 11 import android.view.ViewGroup;
 12 import android.view.animation.Animation;
 13 import android.view.animation.Animation.AnimationListener;
 14 import android.view.animation.AnimationUtils;
 15 import android.widget.BaseAdapter;
 16 import android.widget.Button;
 17 import android.widget.TextView;
 18 
 19 public class ListViewAdpter extends BaseAdapter {
 20     public ArrayList<String> data; // 数据源
 21     private Context context;
 22     private float downX; // 点下时候获取的x坐标
 23     private float upX; // 手指离开时候的x坐标
 24     private Button button; // 用于执行删除的button
 25     private Animation animation; // 删除时候的动画
 26     private View view;
 27 
 28     public ListViewAdpter(ArrayList<String> data, Context context) {
 29         this.data = data;
 30         this.context = context;
 31         animation = AnimationUtils.loadAnimation(context, R.anim.push_out); // 用xml获取一个动画
 32     }
 33 
 34     @Override
 35     public int getCount() {
 36         return data.size();
 37     }
 38 
 39     @Override
 40     public Object getItem(int arg0) {
 41         return data.get(arg0);
 42     }
 43 
 44     @Override
 45     public long getItemId(int arg0) {
 46         return arg0;
 47     }
 48 
 49     @Override
 50     public View getView(final int position, View convertView, ViewGroup parent) {
 51         ViewHolder holder = null;
 52         if (convertView == null) {
 53             convertView = LayoutInflater.from(context).inflate(R.layout.list_item,
 54                     null);
 55             holder = new ViewHolder();
 56             holder.textView = (TextView) convertView.findViewById(R.id.text);
 57             holder.button=(Button) convertView.findViewById(R.id.bt);
 58             convertView.setTag(holder);
 59         } else {
 60             holder = (ViewHolder) convertView.getTag();
 61         }
 62         convertView.setOnTouchListener(new OnTouchListener() { // 为每个item设置setOnTouchListener事件
 63 
 64                     @Override
 65                     public boolean onTouch(View v, MotionEvent event) {
 66                         final ViewHolder holder = (ViewHolder) v.getTag(); // 获取滑动时候相应的ViewHolder，以便获取button按钮
 67                         switch (event.getAction()) {
 68                         case MotionEvent.ACTION_DOWN: // 手指按下
 69                             downX = event.getX(); // 获取手指x坐标
 70                             if (button != null) {
 71                                 button.setVisibility(View.GONE); // 隐藏显示出来的button
 72                             }
 73                             break;
 74                         case MotionEvent.ACTION_UP: // 手指离开
 75                             upX = event.getX(); // 获取x坐标值
 76                             break;
 77                         }
 78 
 79                         if (holder.button != null) {
 80                             if (Math.abs(downX - upX) > 80 && (upX < downX)) { //向左滑动，删除item
 81                                 holder.button.setVisibility(View.VISIBLE); // 显示删除button
 82                                 button = holder.button; // 赋值给全局button，一会儿用
 83                                 view = v; // 得到itemview，在上面加动画
 84                                 return true; // 终止事件
 85                             }
 86                             
 87                             if(Math.abs(downX - upX) > 80 && (upX > downX)) {//撤销删除操作
 88                                 if(holder.button.getVisibility() == View.VISIBLE) {//此时Button可见
 89                                     holder.button.setVisibility(View.GONE);    
 90                                 }
 91                                 return true; // 终止事件
 92                             }
 93                             
 94                             
 95                             return false; // 释放事件，使onitemClick可以执行
 96                         }
 97                         return false;
 98                     }
 99 
100                 });
101 
102         holder.button.setOnClickListener(new OnClickListener() { // 为button绑定事件
103 
104                     @Override
105                     public void onClick(View v) {
106 
107                         if (button != null) {
108                             button.setVisibility(View.GONE); // 点击删除按钮后，影藏按钮
109                             deleteItem(view, position); // 删除数据，加动画
110                         }
111 
112                     }
113                 });
114         holder.textView.setText(data.get(position)); // 显示数据
115         return convertView;
116     }
117 
118     public void deleteItem(View view, final int position) {
119         view.startAnimation(animation); // 给view设置动画
120         animation.setAnimationListener(new AnimationListener() {
121 
122             @Override
123             public void onAnimationStart(Animation animation) {
124             }
125 
126             @Override
127             public void onAnimationRepeat(Animation animation) {
128             }
129 
130             @Override
131             public void onAnimationEnd(Animation animation) { // 动画执行完毕
132                 data.remove(position); // 把数据源里面相应数据删除
133                 notifyDataSetChanged();
134 
135             }
136         });
137 
138     }
139 
140     static class ViewHolder {
141         TextView textView; // 显示数据的view
142         Button button; // 删除按钮
143     }
144 
145 }

上面引用到一个动画为res/anim/push_out.xml，如下：

1 <?xml version="1.0" encoding="utf-8"?>
2 <set xmlns:android="http://schemas.android.com/apk/res/android" >
3 
4     <translate
5         android:duration="1000"
6         android:fromXDelta="0"
7         android:toXDelta="100%p" />
8 
9 </set>

（3）接下来我们来到item的布局list_item.xml，如下：

 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="fill_parent"
 5     android:orientation="horizontal"
 6     android:descendantFocusability="blocksDescendants"
 7      >
 8 
 9     <TextView
10         android:clickable="false"
11         android:focusable="false"
12         android:focusableInTouchMode="false"
13         android:id="@+id/text"
14         android:layout_width="match_parent"
15         android:layout_weight="1"
16         android:layout_height="50dp"
17         android:gravity="center"
18         android:text="默认" />
19 
20     <Button
21         android:id="@+id/bt"
22         android:layout_width="wrap_content"
23         android:layout_height="50dp"
24         android:clickable="false"
25         android:focusable="false"
26         android:focusableInTouchMode="false"
27         android:text="删除"
28         android:visibility="gone" />
29 
30 </LinearLayout>

这里布局稍微注意一点：当我们向左滑动item的时候，显示删除按钮，这个时候我们希望整个item内容相应向左移动，给用户一个删除按钮出现的感觉。

所以这里我们设置TextView的width属性为match_parent，同时weight属性为1，目的是让TextView占据所有剩余空间。

这里我们还设置了Button的height属性也为50dp，和上面TextView文字一样高，用户视觉感觉好一点，width属性为实际内容大小。

当我们向左滑动的时候，删除Button出现了，它会占据TextView显示的空间（TextView是占据所有剩余空间），这样很自然地TextView的内容就会相应地向左显示。

（4）接下来比较简单了，来到MainActivity，如下：

 1 package com.himi.listviewdeleteitem;
 2 
 3 import java.util.ArrayList;
 4 
 5 import android.app.Activity;
 6 import android.os.Bundle;
 7 import android.view.View;
 8 import android.widget.AdapterView;
 9 import android.widget.AdapterView.OnItemClickListener;
10 import android.widget.ListView;
11 import android.widget.Toast;
12 
13 public class MainActivity extends Activity {
14     private ListView listView; //listview控件
15     private ArrayList<String> contentStrings = new ArrayList<String>(); //数据源
16    private ListViewAdpter adapter;  //适配器
17     @Override
18     protected void onCreate(Bundle savedInstanceState) {
19         super.onCreate(savedInstanceState);
20         setContentView(R.layout.activity_main);
21         listView = (ListView) findViewById(R.id.list);
22         initData(); //初始化数据
23         setListener();  //绑定事件
24     }
25     private void initData() {
26         contentStrings.add("Item 1");
27         contentStrings.add("Item 2");
28         contentStrings.add("Item 3");
29         contentStrings.add("Item 4");
30         contentStrings.add("Item 5");
31         contentStrings.add("Item 6");
32         contentStrings.add("Item 7");
33         contentStrings.add("Item 8");
34         contentStrings.add("Item 9");
35         contentStrings.add("Item 10");
36         contentStrings.add("Item 11");
37         contentStrings.add("Item 12");
38         contentStrings.add("Item 13");
39         contentStrings.add("Item 14");
40         contentStrings.add("Item 15");
41         
42         adapter=new ListViewAdpter(contentStrings, this);
43         listView.setAdapter(adapter);
44     }
45 
46     private void setListener() {
47         
48         listView.setOnItemClickListener(new OnItemClickListener() { //点击每项item时候执行
49             @Override
50             public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,
51                     long arg3) {
52                 Toast.makeText(MainActivity.this, "点击事件，执行你的操作", Toast.LENGTH_SHORT).show();            
53             }
54         });
55 
56     }
57     
58     
59 
60 }

（5）部署程序到手机上，如下：