登录
当前位置： 首页 > 编程笔记 >

android自定义View滑动删除效果

靳举
2023-03-14
本文向大家介绍android自定义View滑动删除效果，包括了android自定义View滑动删除效果的使用技巧和注意事项，需要的朋友参考一下

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自定义View实现自动转圈效果

    本文向大家介绍Android自定义View实现自动转圈效果，包括了Android自定义View实现自动转圈效果的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了Android实现自动转圈效果展示的具体代码，供大家参考，具体内容如下 在values文件夹下创建attrs.xml 写一个类继承view 在主页面布局中引入自定义view类 以上就是本文的全部内容，希望对大家的学习有所帮助，也

  • Android自定义view系列之99.99%实现QQ侧滑删除效果实例代码详解

    本文向大家介绍Android自定义view系列之99.99%实现QQ侧滑删除效果实例代码详解，包括了Android自定义view系列之99.99%实现QQ侧滑删除效果实例代码详解的使用技巧和注意事项，需要的朋友参考一下 首先声明本文是基于GitHub上"baoyongzhang"的SwipeMenuListView修改而来,该项目地址: https://github.com/baoyongzhan

  • Android自定义View实现随手势滑动控件

    本文向大家介绍Android自定义View实现随手势滑动控件，包括了Android自定义View实现随手势滑动控件的使用技巧和注意事项，需要的朋友参考一下 本文控件为大家分享了Android随手势滑动控件的具体代码，供大家参考，具体内容如下 1.新建自定义控件类：MyView 上面代码就是一个自定义按钮类，重写onTouchEvent()方法来监听用户滑动，既然说到滑动肯定会存在偏移量的说法。 t

  • Android嵌套RecyclerView左右滑动替代自定义view

    本文向大家介绍Android嵌套RecyclerView左右滑动替代自定义view，包括了Android嵌套RecyclerView左右滑动替代自定义view的使用技巧和注意事项，需要的朋友参考一下 以前的左右滑动效果采用自定义scrollview或者linearlayout来实现，recyclerview可以很好的做这个功能，一般的需求就是要么一个独立的左右滑动效果，要么在一个列表里的中间部分一

  • Android 自定义view实现TopBar效果

    本文向大家介绍Android 自定义view实现TopBar效果，包括了Android 自定义view实现TopBar效果的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了Android自定义view实现TopBar的具体代码，供大家参考，具体内容如下 布局文件 自定义属性attrs.xml文件 自定义View的Class类 Main方法的代码调用自定义的类和点击事件 效果图： 以上就

  • android自定义ViewPager水平滑动弹性效果

    本文向大家介绍android自定义ViewPager水平滑动弹性效果，包括了android自定义ViewPager水平滑动弹性效果的使用技巧和注意事项，需要的朋友参考一下 android ViewPager是一个经常要用到的组件，但android系统本身为我们提供的ViewPager是没有任何效果的，只能是一页一页的滑动，这样会让人感觉很死板，在看一些知名大公司的App时，看到了他们的ViewPa

相关阅读

Android 自定义view实现TopBar效果android自定义ViewPager水平滑动弹性效果iOS自定义View实现卡片滑动Android 自定义view实现水波纹动画效果Android自定义view仿IOS开关效果

相关文章

Vue.js 自定义指令Vue3 自定义指令JSP自定义标签Python自定义模块Java自定义注解

相关问答

JPA级联删除使用自定义删除方法失败从aws cloudwatch中删除自定义度量Android：从ActionBar的自定义布局中删除左页边距Swift-在静态UITableView中滑动删除（没有删除按钮）Rails：如何定义自定义路由但删除默认路由

相关工具

自定义Table View折叠效果ScrollView滑动固定效果选项卡滑动效果手指滑动特效自定义照相机和图片滤镜效果

相关文档

Android Animation 动画详解自己动手写 servlet 容器Python 自动化测试之实操Duang 基于配置自动生成 CMS自己动手做聊天机器人
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.