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

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

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

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

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

Android工程结构如下：

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

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     tools:context=".MainActivity" >

     <ListView
         android:id="@+id/list"
         android:layout_width="fill_parent"
         android:layout_height="fill_parent" >
     </ListView>

 </RelativeLayout>

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

 package com.himi.listviewdeleteitem;

 import java.util.ArrayList;

 import android.content.Context;
 import android.view.LayoutInflater;
 import android.view.MotionEvent;
 import android.view.View;
 import android.view.View.OnClickListener;
 import android.view.View.OnTouchListener;
 import android.view.ViewGroup;
 import android.view.animation.Animation;
 import android.view.animation.Animation.AnimationListener;
 import android.view.animation.AnimationUtils;
 import android.widget.BaseAdapter;
 import android.widget.Button;
 import android.widget.TextView;

 public class ListViewAdpter extends BaseAdapter {
     public ArrayList<String> data; // 数据源
     private Context context;
     private float downX; // 点下时候获取的x坐标
     private float upX; // 手指离开时候的x坐标
     private Button button; // 用于执行删除的button
     private Animation animation; // 删除时候的动画
     private View view;

     public ListViewAdpter(ArrayList<String> data, Context context) {
         this.data = data;
         this.context = context;
         animation = AnimationUtils.loadAnimation(context, R.anim.push_out); // 用xml获取一个动画
     }

     @Override
     public int getCount() {
         return data.size();
     }

     @Override
     public Object getItem(int arg0) {
         return data.get(arg0);
     }

     @Override
     public long getItemId(int arg0) {
         return arg0;
     }

     @Override
     public View getView(final int position, View convertView, ViewGroup parent) {
         ViewHolder holder = null;
         if (convertView == null) {
             convertView = LayoutInflater.from(context).inflate(R.layout.list_item,
                     null);
             holder = new ViewHolder();
             holder.textView = (TextView) convertView.findViewById(R.id.text);
             holder.button=(Button) convertView.findViewById(R.id.bt);
             convertView.setTag(holder);
         } else {
             holder = (ViewHolder) convertView.getTag();
         }
         convertView.setOnTouchListener(new OnTouchListener() { // 为每个item设置setOnTouchListener事件

                     @Override
                     public boolean onTouch(View v, MotionEvent event) {
                         final ViewHolder holder = (ViewHolder) v.getTag(); // 获取滑动时候相应的ViewHolder，以便获取button按钮
                         switch (event.getAction()) {
                         case MotionEvent.ACTION_DOWN: // 手指按下
                             downX = event.getX(); // 获取手指x坐标
                             if (button != null) {
                                 button.setVisibility(View.GONE); // 隐藏显示出来的button
                             }
                             break;
                         case MotionEvent.ACTION_UP: // 手指离开
                             upX = event.getX(); // 获取x坐标值
                             break;
                         }

                         if (holder.button != null) {
                             if (Math.abs(downX - upX) > 80 && (upX < downX)) { //向左滑动，删除item
                                 holder.button.setVisibility(View.VISIBLE); // 显示删除button
                                 button = holder.button; // 赋值给全局button，一会儿用
                                 view = v; // 得到itemview，在上面加动画
                                 return true; // 终止事件
                             }

                             if(Math.abs(downX - upX) > 80 && (upX > downX)) {//撤销删除操作
                                 if(holder.button.getVisibility() == View.VISIBLE) {//此时Button可见
                                     holder.button.setVisibility(View.GONE);
                                 }
                                 return true; // 终止事件
                             }

                             return false; // 释放事件，使onitemClick可以执行
                         }
                         return false;
                     }

                 });

         holder.button.setOnClickListener(new OnClickListener() { // 为button绑定事件

                     @Override
                     public void onClick(View v) {

                         if (button != null) {
                             button.setVisibility(View.GONE); // 点击删除按钮后，影藏按钮
                             deleteItem(view, position); // 删除数据，加动画
                         }

                     }
                 });
         holder.textView.setText(data.get(position)); // 显示数据
         return convertView;
     }

     public void deleteItem(View view, final int position) {
         view.startAnimation(animation); // 给view设置动画
         animation.setAnimationListener(new AnimationListener() {

             @Override
             public void onAnimationStart(Animation animation) {
             }

             @Override
             public void onAnimationRepeat(Animation animation) {
             }

             @Override
             public void onAnimationEnd(Animation animation) { // 动画执行完毕
                 data.remove(position); // 把数据源里面相应数据删除
                 notifyDataSetChanged();

             }
         });

     }

     static class ViewHolder {
         TextView textView; // 显示数据的view
         Button button; // 删除按钮
     }

 }

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

 <?xml version="1.0" encoding="utf-8"?>
 <set xmlns:android="http://schemas.android.com/apk/res/android" >

     <translate
         android:duration="1000"
         android:fromXDelta="0"
         android:toXDelta="100%p" />

 </set>

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

 <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="fill_parent"
     android:layout_height="fill_parent"
     android:orientation="horizontal"
     android:descendantFocusability="blocksDescendants"
      >

     <TextView
         android:clickable="false"
         android:focusable="false"
         android:focusableInTouchMode="false"
         android:id="@+id/text"
         android:layout_width="match_parent"
         android:layout_weight="1"
         android:layout_height="50dp"
         android:gravity="center"
         android:text="默认" />

     <Button
         android:id="@+id/bt"
         android:layout_width="wrap_content"
         android:layout_height="50dp"
         android:clickable="false"
         android:focusable="false"
         android:focusableInTouchMode="false"
         android:text="删除"
         android:visibility="gone" />

 </LinearLayout>

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

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

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

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

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

 package com.himi.listviewdeleteitem;

 import java.util.ArrayList;

 import android.app.Activity;
 import android.os.Bundle;
 import android.view.View;
 import android.widget.AdapterView;
 import android.widget.AdapterView.OnItemClickListener;
 import android.widget.ListView;
 import android.widget.Toast;

 public class MainActivity extends Activity {
     private ListView listView; //listview控件
     private ArrayList<String> contentStrings = new ArrayList<String>(); //数据源
    private ListViewAdpter adapter;  //适配器
     @Override
     protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         setContentView(R.layout.activity_main);
         listView = (ListView) findViewById(R.id.list);
         initData(); //初始化数据
         setListener();  //绑定事件
     }
     private void initData() {
         contentStrings.add("Item 1");
         contentStrings.add("Item 2");
         contentStrings.add("Item 3");
         contentStrings.add("Item 4");
         contentStrings.add("Item 5");
         contentStrings.add("Item 6");
         contentStrings.add("Item 7");
         contentStrings.add("Item 8");
         contentStrings.add("Item 9");
         contentStrings.add("Item 10");
         contentStrings.add("Item 11");
         contentStrings.add("Item 12");
         contentStrings.add("Item 13");
         contentStrings.add("Item 14");
         contentStrings.add("Item 15");

         adapter=new ListViewAdpter(contentStrings, this);
         listView.setAdapter(adapter);
     }

     private void setListener() {

         listView.setOnItemClickListener(new OnItemClickListener() { //点击每项item时候执行
             @Override
             public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,
                     long arg3) {
                 Toast.makeText(MainActivity.this, "点击事件，执行你的操作", Toast.LENGTH_SHORT).show();
             }
         });

     }

 }

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