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

  • 相关阅读:
    【转】i18n实现前端国际化(实例)
    【转】SQL Pretty Printer for SSMS 很不错的SQL格式化插件
    windows server IIS启用Windows authentication
    【转】命令行下载各种网上各种视频
    解决python “No module named pip”
    【转】excel音标乱码
    【转】自动化部署之jenkins及简介
    【转】右键菜单管理
    【转】C# @作用
    【转】NGen
  • 原文地址:https://www.cnblogs.com/hebao0514/p/4901076.html
Copyright © 2020-2023  润新知