Android自定义可编辑、删除的侧滑LisitView

最近由于项目的需要,自定义了一个具有侧滑功能的listview,侧滑后可以点击编辑、删除。好了,大家先看一下效果图,毕竟是看脸的世界。

好了,我要先讲一下思路,一次编辑很难完善,有什么问题我后来还会补上,欢迎各位大神拍砖:
1、首先先说一下item:item用的LinearLayout布局,删除、编辑分别是写死了宽度的TextView,左边是一个match_parent的RelativeLayout,内容自己随意搞

2、上下滑动和左右滑动的处理:当用户手指滑动时,可以进行坐标的判断,如果Y轴移动距离大,则listview上下滑动;否则当X轴移动距离达到或者超过一个TextView的宽度时,动态控制item的marginLeft为负的两倍TextView的宽度,从而实现滑动效果

3、编辑、删除的点击:编辑、删除在adapter中进行监听,然后自己在adapter中再定义一个监听接口,方便用户在使用listview的activity中进行监听

下面附上item的布局文件:

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

 <RelativeLayout
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:background="#ffffff"
  android:orientation="horizontal">

  <RelativeLayout
   android:id="@+id/rlTop"
   android:layout_width="match_parent"
   android:layout_height="65dp"
   android:padding="10dp">
   <ImageView
    android:id="@+id/imgLamp"
    android:layout_alignParentLeft="true"
    android:layout_marginLeft="10dp"
    android:src="@mipmap/ic_launcher"
    android:layout_width="40dp"
    android:layout_height="40dp"/>
   <TextView
    android:id="@+id/tvName"
    android:layout_width="wrap_content"
    android:layout_height="22dp"
    android:layout_toRightOf="@+id/imgLamp"
    android:layout_marginLeft="10dp"
    android:gravity="center"
    android:textSize="17sp"
    android:textColor="#000000" />

   <TextView
    android:id="@+id/tvContent"
    android:layout_width="wrap_content"
    android:layout_height="18dp"
    android:layout_toRightOf="@+id/imgLamp"
    android:layout_below="@+id/tvName"
    android:layout_marginLeft="10dp"
    android:gravity="center"
    android:textSize="14sp"
    android:textColor="#000000"
    android:text="content"/>
  </RelativeLayout>

  <View
   android:layout_width="match_parent"
   android:layout_height="1dp"
   android:layout_marginLeft="20dp"
   android:layout_marginRight="20dp"
   android:layout_below="@+id/rlTop"
   android:background="#EEEEEE"/>

 </RelativeLayout>

 <!--Edit-->
 <TextView
  android:id="@+id/tvEdit"
  android:layout_width="80dp"
  android:layout_height="match_parent"
  android:background="#dddddd"
  android:gravity="center"
  android:paddingLeft="20dp"
  android:layout_marginBottom="1dp"
  android:textColor="@android:color/white"
  android:paddingRight="20dp"
  android:text="编辑" />

 <!--delete-->
 <TextView
  android:id="@+id/delete"
  android:layout_width="80dp"
  android:layout_height="match_parent"
  android:background="#FFFF0000"
  android:gravity="center"
  android:paddingLeft="20dp"
  android:layout_marginBottom="1dp"
  android:textColor="@android:color/white"
  android:paddingRight="20dp"
  android:text="删除" />

</LinearLayout>

Adapter代码:

package com.lei.slidelistview;

import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;
import java.util.List;

/**
 * Created by 磊 on 2016/7/7.
 */
public class ListViewSlideAdapter extends BaseAdapter{

 private List<String> bulbList;
 private Context context;
 private OnClickListenerEditOrDelete onClickListenerEditOrDelete;

  public ListViewSlideAdapter(Context context, List<String> bulbList){
   this.bulbList=bulbList;
   this.context=context;
  }

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

  @Override
  public Object getItem(int position) {
   return bulbList.get(position);
  }

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

  @Override
  public View getView(final int position, View convertView, ViewGroup parent) {
   final String bulb=bulbList.get(position);
   View view;
   ViewHolder viewHolder;
   if(null == convertView) {
    view = View.inflate(context, R.layout.item_slide_delete_edit, null);
    viewHolder=new ViewHolder();
    viewHolder.tvName=(TextView)view.findViewById(R.id.tvName);
    viewHolder.img=(ImageView)view.findViewById(R.id.imgLamp);
    viewHolder.tvDelete=(TextView)view.findViewById(R.id.delete);
    viewHolder.tvEdit=(TextView)view.findViewById(R.id.tvEdit);
    view.setTag(viewHolder);//store up viewHolder
   }else {
    view=convertView;
    viewHolder=(ViewHolder)view.getTag();
   }

   viewHolder.img.setImageResource(R.mipmap.ic_launcher);
   viewHolder.tvName.setText(bulb);
   viewHolder.tvDelete.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
     if (onClickListenerEditOrDelete!=null){
      onClickListenerEditOrDelete.OnClickListenerDelete(position);
     }
    }
   });
   viewHolder.tvEdit.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
     if (onClickListenerEditOrDelete!=null){
      onClickListenerEditOrDelete.OnClickListenerEdit(position);
     }
    }
   });
   return view;
  }

  private class ViewHolder{
   TextView tvName,tvEdit,tvDelete;
   ImageView img;
  }

 public interface OnClickListenerEditOrDelete{
  void OnClickListenerEdit(int position);
  void OnClickListenerDelete(int position);
 }

 public void setOnClickListenerEditOrDelete(OnClickListenerEditOrDelete onClickListenerEditOrDelete1){
  this.onClickListenerEditOrDelete=onClickListenerEditOrDelete1;
 }

 }

自定义ListView文件代码:

package com.lei.slidelistview;

import android.content.Context;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.view.MotionEvent;
import android.view.ViewGroup;
import android.view.WindowManager;
import android.widget.LinearLayout;
import android.widget.ListView;

public class SlideListView extends ListView {
 private int mScreenWidth; // 屏幕宽度
 private int mDownX; // 按下点的x值
 private int mDownY; // 按下点的y值
 private int mDeleteBtnWidth;// 删除按钮的宽度

 private boolean isDeleteShown; // 删除按钮是否正在显示

 private ViewGroup mPointChild; // 当前处理的item
 private LinearLayout.LayoutParams mLayoutParams; // 当前处理的item的LayoutParams

 public SlideListView(Context context, AttributeSet attrs) {
 this(context, attrs, 0);
 }

 public SlideListView(Context context, AttributeSet attrs, int defStyle) {
 super(context, attrs, defStyle);

 // 获取屏幕宽度
 WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
 DisplayMetrics dm = new DisplayMetrics();
 wm.getDefaultDisplay().getMetrics(dm);
 mScreenWidth = dm.widthPixels;
 }

 @Override
 public boolean onTouchEvent(MotionEvent ev) {
 switch (ev.getAction()) {
 case MotionEvent.ACTION_DOWN:
 performActionDown(ev);
 break;
 case MotionEvent.ACTION_MOVE:
 return performActionMove(ev);
 case MotionEvent.ACTION_UP:
 performActionUp();
 break;
 }

 return super.onTouchEvent(ev);
 }

 // 处理action_down事件
 private void performActionDown(MotionEvent ev) {
 if(isDeleteShown) {
 turnToNormal();
 }

 mDownX = (int) ev.getX();
 mDownY = (int) ev.getY();
 // 获取当前点的item
 mPointChild = (ViewGroup) getChildAt(pointToPosition(mDownX, mDownY)
 - getFirstVisiblePosition());
 // 获取删除按钮的宽度
 mDeleteBtnWidth = mPointChild.getChildAt(1).getLayoutParams().width;
 mLayoutParams = (LinearLayout.LayoutParams) mPointChild.getChildAt(0)
 .getLayoutParams();
 mLayoutParams.width = mScreenWidth;
 mPointChild.getChildAt(0).setLayoutParams(mLayoutParams);
 }

 // 处理action_move事件
 private boolean performActionMove(MotionEvent ev) {
 int nowX = (int) ev.getX();
 int nowY = (int) ev.getY();
 if(Math.abs(nowX - mDownX) > Math.abs(nowY - mDownY)) {
 // 如果向左滑动
 if(nowX < mDownX) {
 // 计算要偏移的距离
 int scroll = (nowX - mDownX) / 2;
 // 如果大于了删除按钮的宽度, 则最大为删除按钮的宽度
 if(-scroll >= mDeleteBtnWidth) {
  scroll = -mDeleteBtnWidth;
 }
 // 重新设置leftMargin
 mLayoutParams.leftMargin = scroll*2;
 mPointChild.getChildAt(0).setLayoutParams(mLayoutParams);
 }
 return true;
 }
 return super.onTouchEvent(ev);
 }

 // 处理action_up事件
 private void performActionUp() {
 // 偏移量大于button的一半,则显示button
 // 否则恢复默认
 if(-mLayoutParams.leftMargin >= mDeleteBtnWidth / 2) {
 mLayoutParams.leftMargin = -mDeleteBtnWidth*2;
 isDeleteShown = true;
 }else {
 turnToNormal();
 }

 mPointChild.getChildAt(0).setLayoutParams(mLayoutParams);
 }
 /**
 * 变为正常状态
 */
 public void turnToNormal() {
 mLayoutParams.leftMargin = 0;
 mPointChild.getChildAt(0).setLayoutParams(mLayoutParams);
 isDeleteShown = false;
 }
 /**
 * 当前是否可点击
 * @return 是否可点击
 */
 public boolean canClick() {
 return !isDeleteShown;
 }

}

下面附上使用布局代码+使用后台代码(2016年7月7日亲测可用)
布局:

<?xml version="1.0" encoding="utf-8"?>
<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="com.lei.slidelistview.MainActivity">

 <TextView
  android:id="@+id/tvTitle"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:gravity="center"
  android:textSize="20sp"
  android:text="title" />

 <com.lei.slidelistview.SlideListView
  android:id="@+id/list"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:layout_below="@+id/tvTitle">

 </com.lei.slidelistview.SlideListView>
</RelativeLayout>

使用后台代码,这里要注意以下adapter设置监听的位置,放错了会报错哦

package com.lei.slidelistview;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.Toast;
import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {
 private SlideListView listView;
 private List<String> list=new ArrayList<String>();
 private ListViewSlideAdapter listViewSlideAdapter;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  getData();
  initView();
 }

 private void initView(){
  listView=(SlideListView)findViewById(R.id.list);
  listViewSlideAdapter=new ListViewSlideAdapter(this,list);
  listView.setAdapter(listViewSlideAdapter);
  listViewSlideAdapter.setOnClickListenerEditOrDelete(new ListViewSlideAdapter.OnClickListenerEditOrDelete() {
   @Override
   public void OnClickListenerEdit(int position) {
    Toast.makeText(MainActivity.this, "edit position: " + position, Toast.LENGTH_SHORT).show();
   }

   @Override
   public void OnClickListenerDelete(int position) {
    Toast.makeText(MainActivity.this, "delete position: " + position, Toast.LENGTH_SHORT).show();
   }
  });
 }

 private void getData(){
  for (int i=0;i<20;i++){
   list.add(new String("第"+i+"个item"));
  }
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Android开源组件SlidingMenu侧滑菜单使用介绍

    现在很多android应用都有侧滑菜单,效果很不错. GitHub上有SlidingMenu的开源库,使用起来很方便. SlidingMenu GitHub地址:https://github.com/jfeinstein10/SlidingMenu.GitHub上说,Sliding结合ActionBarSherlock使用功能可以更丰富,ActionBarSherlock GitHub地址:https://github.com/JakeWharton/ActionBarSherlock 附csd

  • Android自定义控件简单实现侧滑菜单效果

    侧滑菜单在很多应用中都会见到,最近QQ5.0侧滑还玩了点花样~~对于侧滑菜单,一般大家都会自定义ViewGroup,然后隐藏菜单栏,当手指滑动时,通过Scroller或者不断的改变leftMargin等实现:多少都有点复杂,完成以后还需要对滑动冲突等进行处理~~今天给大家带来一个简单的实现,史上最简单有点夸张,但是的确是我目前遇到过的最简单的一种实现~~~ 1.原理分析 既然是侧滑,无非就是在巴掌大的屏幕,塞入大概两巴掌大的布局,需要滑动可以出现另一个,既然这样,大家为啥不考虑使用Android

  • Android使用DrawerLayout实现仿QQ双向侧滑菜单

    1.概述 之前写了一个Android 高仿 QQ5.0 侧滑菜单效果 自定义控件来袭 ,恰逢QQ5.2又加了一个右侧菜单,刚好看了下DrawerLayout,一方面官方的东西,我都比较感兴趣:另一方面,这玩意用起来的确方便,于是简单写了个demo,高仿QQ5.2双向侧滑,分享给大家. 首先看看效果图: DrawerLayout用起来真的很方便,下面一起看看用法~ 2.DrawerLayout的使用 直接将DrawerLayout作为根布局,然后其内部第一个View为内容区域,第二个View为左侧

  • Android基于ViewDragHelper仿QQ5.0侧滑界面效果

    QQ5.0侧滑效果实现方案有很多方式,今天我们使用ViewDragHelper来实现一下. 先上效果图: ①自定义控件SlidingMenu继承FrameLayout,放在FrameLayout上面的布局一层叠着者一层,通过getChildAt()可以很方便的获取到任意一层,进而控制此布局的变化. public class SlidingMenu extends FrameLayout { private ViewDragHelper mViewDragHelper; private int m

  • Android开发中记一个SwipeMenuListView侧滑删除错乱的Bug

    做侧滑删除网上有很多方案,比如重写Listview实现滑动的监听,今天说下一个SwipeListView,这个是之前一个朋友在网上开源的一个封装组件,能够适用于多种情况,项目地址:https://github.com/baoyongzhang/SwipeMenuListView,我也采用了拿来主义直接拿来用了. 但是在调试运行的滑动删除数据的时候,却出现了一个问题,删除位置错乱,删除的第一个数据,却删除了最后一个,于是找问题呗,我首先用listview试了下,数据是没有问题的,那么说明是删除的时

  • Android 仿京东侧滑筛选实例代码

    简单介绍 这个demo写的是仿京东的侧滑筛选页面,点击进入筛选后进入二级筛选,两次侧滑的筛选,还包括ListView+CheckBox滑动冲突,ListView+ GridView显示一行问题解决,接口回调传递数据等 效果图 简单得代码介绍 1.首页侧滑用的是安卓官方V4包中的DrawerLayout <?xml version="1.0" encoding="utf-8"?> <android.support.v4.widget.DrawerLa

  • Android使用ViewDragHelper实现QQ6.X最新版本侧滑界面效果实例代码

    (一).前言: 这两天QQ进行了重大更新(6.X)尤其在UI风格上面由之前的蓝色换成了白色居多了,侧滑效果也发生了一些变化,那我们今天来模仿实现一个QQ6.X版本的侧滑界面效果.今天我们还是采用神器ViewDragHelper来实现. 本次实例具体代码已经上传到下面的项目中,欢迎各位去star和fork一下. https://github.com/jiangqqlmj/DragHelper4QQ FastDev4Android框架项目地址:https://github.com/jiangqqlm

  • Android程序开发之使用Design包实现QQ动画侧滑效果和滑动菜单导航

    Google在2015的IO大会上,给我们带来了更加详细的Material Design设计规范,同时,也给我们带来了全新的Android Design Support Library,在这个support库里面,Google给我们提供了更加规范的MD设计风格的控件.最重要的是,Android Design Support Library的兼容性更广,直接可以向下兼容到Android 2.2.这不得不说是一个良心之作. 使用方法很简单,只需要添加一句依赖 compile 'com.android

  • Android使用自定义控件HorizontalScrollView打造史上最简单的侧滑菜单

    侧滑菜单在很多应用中都会见到,最近QQ5.0侧滑还玩了点花样~~对于侧滑菜单,一般大家都会自定义ViewGroup,然后隐藏菜单栏,当手指滑动时,通过Scroller或者不断的改变leftMargin等实现:多少都有点复杂,完成以后还需要对滑动冲突等进行处理~~今天给大家带来一个简单的实现,史上最简单有点夸张,但是的确是我目前遇到过的最简单的一种实现~~~ 1.原理分析 既然是侧滑,无非就是在巴掌大的屏幕,塞入大概两巴掌大的布局,需要滑动可以出现另一个,既然这样,大家为啥不考虑使用Android

  • Android实现原生侧滑菜单的超简单方式

    先来看看效果图 当你点击菜单可以更改图标,例如点击happy,首页就会变一个笑脸,这个实现的过程超级简单 你需要使用ToolBar与DrawableLayout两个比较新的控件 首先要写三个xml布局文件,我这里的布局文件是使用了include标签嵌入的,代码如下 headbar_toolbar.xml <?xml version="1.0" encoding="utf-8"?> <android.support.v7.widget.Toolbar

随机推荐