android自定义View滑动删除效果

2019-12-12 03:30:05

字体：大中小

来源：转载

供稿：网友

View滑动删除效果图

实现功能

1、可以向左滑动,右侧出现删除
2、向左滑动如果删除出现一大半,松手打开删除,反之关闭删除
3、应用场景
微信消息的删除功能

实现原理

1、外面是一个ListView
2、条目是一个自定义控件继承ViewGroup
1）、左边一个TextView,右侧屏幕外也有一个TextView
2）、所以继承ViewGroup

实现步骤

1、创建一个SlideDeleteView类

1）.构造方法要关联

public class SlideDelete extends ViewGroup { private View leftView; private View rightView; private ViewDragHelper helper; //第一步关联构造方法 //第二步重写onMeasure和onLViewayout测量子View和布局子View public SlideDelete(Context context) {  this(context,null); } public SlideDelete(Context context, AttributeSet attrs) {  this(context, attrs,0); } public SlideDelete(Context context, AttributeSet attrs, int defStyleAttr) {  super(context, attrs, defStyleAttr);  helper = ViewDragHelper.create(this, callback); }}

2、在布局文件中设置SlideDeleteView里面的子View

SlideDeleteView height=80

        TextView
            width:matchParent
            height:matchparent
        TextView

<com.example.movedelete.SlideDelete  android:id="@+id/container"  android:layout_width="match_parent"  android:layout_height="80dp">  <TextView   android:id="@+id/content"   android:layout_width="match_parent"   android:layout_height="match_parent"   android:gravity="center"   android:background="#33000000"   android:text="第0个条目"   android:textColor="#fff"   android:textSize="20sp" />  <TextView   android:id="@+id/delete"   android:layout_width="80dp"   android:layout_height="match_parent"   android:background="#f00"   android:gravity="center"   android:text="删除"   android:textColor="#fff"   android:textSize="20sp" /> </com.example.movedelete.SlideDelete>

3、重写onMeasure,给子View进行测量

 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {  //对当前组合View的测量,不使用的话,也可以自己设置  measureChildren(widthMeasureSpec,heightMeasureSpec);  super.onMeasure(widthMeasureSpec, heightMeasureSpec); }

4、重写onLayout,给子View进行布局

注意事项:要设置leftView,也要设置rightView,不要都写成leftView了

 protected void onLayout(boolean changed, int l, int t, int r, int b) {  //第一步获取里面子View  leftView = getChildAt(0);  rightView = getChildAt(1);  //第二步给子View提供相应的布局  int leftL = 0;  int leftT = 0;  int leftR = leftView.getMeasuredWidth();  int leftB = leftView.getMeasuredHeight();  leftView.layout(leftL,leftT,leftR,leftB);  //给rightView提供相应的布局  int rightL = leftView.getMeasuredWidth();  int rightT = 0;  int rightR = leftView.getMeasuredWidth()+ rightView.getMeasuredWidth();  int rightB = rightView.getMeasuredHeight();  rightView.layout(rightL,rightT,rightR,rightB); }

5、设置View的滑动事件onTouchEvent,实现滑动
1）.因为要滑动,所以消费该事件返回true
2）.使用ViewDragHelper来实现滑动效果

注意事项:

只能实现leftView的滑动,右侧RightView看不到所以滑动不了

只能给滑动的View设置监听,当滑动的时候,重新设置另一个View的布局跟着滑动

 @Override public boolean onTouchEvent(MotionEvent event) {  //1,要消费该事件,所以直接返回true  //2,使用ViewDragHelper来实现滑动效果  helper.processTouchEvent(event);  return true; }

6、重写滑动事件的监听onViewPositionChanged解决只有lefView滑动的问题

1）.重写的方法是在ViewDragHelper.Callback的子实现类中

2）.要实现滑动事件,必须在tryCaptureView方法中返回true

 private ViewDragHelper.Callback callback = new ViewDragHelper.Callback() {  //手势滑动时  @Override  public boolean tryCaptureView(View child, int pointerId) {   return true;  }

  //监听控件移动状态  @Override  public void onViewPositionChanged(View changedView, int left, int top, int dx, int dy) {   //如果左边控件拖动,我们要让右边控件也重新布局   if(changedView == leftView){    rightView.layout(rightView.getLeft()+dx,0,rightView.getRight()+dx,rightView.getBottom()+dy);   }else if(changedView == rightView){    leftView.layout(leftView.getLeft()+dx,0,leftView.getRight()+dx,leftView.getBottom()+dy);   }  }

7、重写clampViewPositionHorizontal水平位置移动,解决左右越界问题

    1.返回值为移动时左侧滑动的距离
    2.如果滑动的控件是leftView时,解决越界
    3.如果滑动的控件是rightView时,解决越界

 public int clampViewPositionHorizontal(View child, int left, int dx) {   //对左右越界问题的处理   if(child == leftView){    //处理两边的越界问题    if(left >= 0){     left = 0;    }else if(left <= -rightView.getMeasuredWidth()){     left = -rightView.getMeasuredWidth();    }   }else if(child == rightView){    //只处理右边的越界问题,因为左侧越界的时看不到该View    if(left <= leftView.getMeasuredWidth()- rightView.getMeasuredWidth()){     left = leftView.getMeasuredWidth()- rightView.getMeasuredWidth();    }else if(left >= leftView.getMeasuredWidth()){     left = leftView.getMeasuredWidth();    }   }   return left;  }

8、手松开时重写onViewReleased方法,实现滑动手松开时,rightView是打开还是关闭

1.使用ViewDragHelper滑动时,要调用invalidate方法,回调computeScroll方法
2.重写computeScroll方法

1）.先判断是否要继承滑动

2）.使用兼容的invalidate方法来实现匀速滑动

  @Override  public void onViewReleased(View releasedChild, float xvel, float yvel) {   //松开后,什么时候打开rightView,什么时候关闭leftView   //临界值,rightView.getLeft() 和 屏幕的宽度-rightView.getWidth()/2   if(releasedChild == leftView){    if(rightView.getLeft() < getMeasuredWidth() - rightView.getMeasuredWidth()/2){     //使用ViewDragHelper来滑动     helper.smoothSlideViewTo(rightView,getMeasuredWidth()-rightView.getMeasuredWidth(),0);     invalidate();    }else{     helper.smoothSlideViewTo(rightView,getMeasuredWidth(),0);     invalidate();    }   }  } //需要重写computeScroll @Override public void computeScroll() {  //判断是否要继承滑动  if(helper.continueSettling(true)){   //invalidate();   //兼容使用   ViewCompat.postInvalidateOnAnimation(this);  } }

9、实现删除rightView的点击删除事件

    1.在listView的adapter中找到右侧的rightView
    2.调用rightView的点击事件
    3.删除该条目

        1）删除集合中的数据
            list.remove(position);
        2）更新adapter
            notifyDataSetChanged();
        3）重新绘制整个条目
            requestLayout();

  //设置删除的点击事件  vh.delete.setOnClickListener(new View.OnClickListener() {   @Override   public void onClick(View v) {    //删除当前的数据    list.remove(position);    notifyDataSetChanged();    //让父容器更新下   }  });  vh.container.requestLayout();

注意事项

1、在重写onLayout方法的时候,给rightView设置布局的时候,写成leftView一直出错
2、在onTouchEvent中要返回true,因为要消费该事件
3、在使用ViewDragHelper.Callback时,重写tryCaptureView时要返回true
4、在onTouchEvent中,不使用scrollby或者scrollTo,而是使用ViewDragHelper工具类,不需要判断滑动的距离

总结

1、首先该控件是自定义View,不是组合控件,因为组合的话rightView在屏幕右侧不能实现
2、是自定义View中的继承ViewGroup,因为左侧leftView和右侧rightView都是TextView不需要自己画

源码

SlideDelete的源码

package com.example.movedelete;import android.content.Context;import android.support.v4.view.ViewCompat;import android.support.v4.widget.ViewDragHelper;import android.util.AttributeSet;import android.view.MotionEvent;import android.view.View;import android.view.ViewGroup;/** * Created by guixin on 2017/1/5. */public class SlideDelete extends ViewGroup { private View leftView; private View rightView; private ViewDragHelper helper; //第一步关联构造方法 //第二步重写onMeasure和onLViewayout测量子View和布局子View public SlideDelete(Context context) {  this(context,null); } public SlideDelete(Context context, AttributeSet attrs) {  this(context, attrs,0); } public SlideDelete(Context context, AttributeSet attrs, int defStyleAttr) {  super(context, attrs, defStyleAttr);  helper = ViewDragHelper.create(this, callback); } private ViewDragHelper.Callback callback = new ViewDragHelper.Callback() {  //手势滑动时  @Override  public boolean tryCaptureView(View child, int pointerId) {   return true;  }  //拖动控件水平移动  @Override  public int clampViewPositionHorizontal(View child, int left, int dx) {   //对左右越界问题的处理   if(child == leftView){    //处理两边的越界问题    if(left >= 0){     left = 0;    }else if(left <= -rightView.getMeasuredWidth()){     left = -rightView.getMeasuredWidth();    }   }else if(child == rightView){    //只处理右边的越界问题,因为左侧越界的时看不到该View    if(left <= leftView.getMeasuredWidth()- rightView.getMeasuredWidth()){     left = leftView.getMeasuredWidth()- rightView.getMeasuredWidth();    }else if(left >= leftView.getMeasuredWidth()){     left = leftView.getMeasuredWidth();    }   }   return left;  }  //监听控件移动状态  @Override  public void onViewPositionChanged(View changedView, int left, int top, int dx, int dy) {   //如果左边控件拖动,我们要让右边控件也重新布局   if(changedView == leftView){    rightView.layout(rightView.getLeft()+dx,0,rightView.getRight()+dx,rightView.getBottom()+dy);   }else if(changedView == rightView){    leftView.layout(leftView.getLeft()+dx,0,leftView.getRight()+dx,leftView.getBottom()+dy);   }  }  //解决滑动一半松手时,View的复位  /**   *   * @param releasedChild 松开的View   * @param xvel   * @param yvel   */  @Override  public void onViewReleased(View releasedChild, float xvel, float yvel) {   //松开后,什么时候打开rightView,什么时候关闭leftView   //临界值,rightView.getLeft() 和 屏幕的宽度-rightView.getWidth()/2   if(releasedChild == leftView){    if(rightView.getLeft() < getMeasuredWidth() - rightView.getMeasuredWidth()/2){     //使用ViewDragHelper来滑动     helper.smoothSlideViewTo(rightView,getMeasuredWidth()-rightView.getMeasuredWidth(),0);     invalidate();    }else{     helper.smoothSlideViewTo(rightView,getMeasuredWidth(),0);     invalidate();    }   }  } }; //需要重写computeScroll @Override public void computeScroll() {  //判断是否要继承滑动  if(helper.continueSettling(true)){   //invalidate();   //兼容使用   ViewCompat.postInvalidateOnAnimation(this);  } } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {  //对当前组合View的测量,不使用的话,也可以自己设置  measureChildren(widthMeasureSpec,heightMeasureSpec);  super.onMeasure(widthMeasureSpec, heightMeasureSpec); } @Override protected void onLayout(boolean changed, int l, int t, int r, int b) {  //第一步获取里面子View  leftView = getChildAt(0);  rightView = getChildAt(1);  //第二步给子View提供相应的布局  int leftL = 0;  int leftT = 0;  int leftR = leftView.getMeasuredWidth();  int leftB = leftView.getMeasuredHeight();  leftView.layout(leftL,leftT,leftR,leftB);  //给rightView提供相应的布局  int rightL = leftView.getMeasuredWidth();  int rightT = 0;  int rightR = leftView.getMeasuredWidth()+ rightView.getMeasuredWidth();  int rightB = rightView.getMeasuredHeight();  rightView.layout(rightL,rightT,rightR,rightB); } //View的事件传递 @Override public boolean onTouchEvent(MotionEvent event) {  //1,要消费该事件,所以直接返回true  //2,使用ViewDragHelper来实现滑动效果  helper.processTouchEvent(event);  return true; }}

MainActivity.java源码

package com.example.movedelete;import android.os.Bundle;import android.support.v7.app.AppCompatActivity;import android.widget.ListView;import com.example.movedelete.adapter.SlideDeleteAdapter;import java.util.ArrayList;public class MainActivity extends AppCompatActivity { private ListView lv; private ArrayList<String> list; @Override protected void onCreate(Bundle savedInstanceState) {  super.onCreate(savedInstanceState);  setContentView(R.layout.activity_main);  //初始化视图  initView();  //初始化数据  initData();  //初始化事件  initEvent(); } //初始化视图 private void initView() {  lv = (ListView) findViewById(R.id.lv); } //初始化数据 private void initData() {  list = new ArrayList<>();  for (int i = 0; i < 20; i++) {   list.add("第"+i+"项条目");  } } //初始化事件 private void initEvent() {  SlideDeleteAdapter adapter = new SlideDeleteAdapter(list);  lv.setAdapter(adapter); }}

SlideDeleteAdapter.java源码

package com.example.movedelete.adapter;import android.view.View;import android.view.ViewGroup;import android.widget.BaseAdapter;import android.widget.TextView;import com.example.movedelete.R;import com.example.movedelete.SlideDelete;import java.util.ArrayList;/** * Created by guixin on 2017/1/5. */public class SlideDeleteAdapter extends BaseAdapter{ private ArrayList<String> list; public SlideDeleteAdapter(ArrayList<String> list) {  this.list = list; } @Override public int getCount() {  return list == null ? 0 : list.size(); } @Override public String getItem(int position) {  return list == null ? null : list.get(position); } @Override public long getItemId(int position) {  return position; } @Override public View getView(final int position, View convertView, ViewGroup parent) {  ViewHolder vh;  if(convertView == null){   convertView = View.inflate(parent.getContext(), R.layout.item_slide,null);   vh = new ViewHolder(convertView);   convertView.setTag(vh);  }else{   vh = (ViewHolder) convertView.getTag();  }  vh.content.setText(list.get(position));  //设置删除的点击事件  vh.delete.setOnClickListener(new View.OnClickListener() {   @Override   public void onClick(View v) {    //删除当前的数据    list.remove(position);    notifyDataSetChanged();    //让父容器更新下   }  });  vh.container.requestLayout();  return convertView; } class ViewHolder{  private TextView content;  private TextView delete;  private SlideDelete container;  public ViewHolder(View v){    container = (SlideDelete) v.findViewById(R.id.container);   content = (TextView) v.findViewById(R.id.content);    delete = (TextView) v.findViewById(R.id.delete);  } }}

activity_main.xml

<?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:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent"> <ListView  android:id="@+id/lv"  android:layout_width="match_parent"  android:layout_height="match_parent"> </ListView></RelativeLayout>

item_slide.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <com.example.movedelete.SlideDelete  android:id="@+id/container"  android:layout_width="match_parent"  android:layout_height="80dp">  <TextView   android:id="@+id/content"   android:layout_width="match_parent"   android:layout_height="match_parent"   android:gravity="center"   android:background="#33000000"   android:text="第0个条目"   android:textColor="#fff"   android:textSize="20sp" />  <TextView   android:id="@+id/delete"   android:layout_width="80dp"   android:layout_height="match_parent"   android:background="#f00"   android:gravity="center"   android:text="删除"   android:textColor="#fff"   android:textSize="20sp" /> </com.example.movedelete.SlideDelete></LinearLayout>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：Android编程实现文字倒影效果的方法

下一篇：Android基于OkHttpUtils网络请求的二次封装