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

时间:2021-01-11 08:04:13

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

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

(2)然后向右滑动时候,可以撤销删除。

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

Android工程结构如下:

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

(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)部署程序到手机上,如下:

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