android自定义View之自定义侧滑删除效果

最新推荐文章于 2021-06-26 09:37:40 发布
最新推荐文章于 2021-06-26 09:37:40 发布
阅读量833 收藏 2
点赞数

文章转载自http://blog.csdn.net/sinat_27681957/article/details/51854525

最近在研究自定义View,想到了之前想研究的侧滑删除.于是..

先上效果图



思路是这样的:

1：首先先说一下item：item用的LinearLayout布局，删除、编辑分别是写死了宽度的TextView，左边是一个match_parent的RelativeLayout,内容自己随意搞

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

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


首先,自定义SlideListView

package com.jxy.swipe;

/**
 * Created by JinXinYi on 2017/2/9.
 */
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;
    }


}

适配器Adapter代码: 

package com.jxy.swipe;

/**
 * Created by JinXinYi on 2017/2/9.
 */
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;
    }


}

activity_main的代码: 

<?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"
    tools:context="com.jxy.swipe.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.jxy.swipe.SlideListView
        android:id="@+id/list"
        android:layout_below="@+id/tvTitle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    </com.jxy.swipe.SlideListView>
</RelativeLayout>


ListView的item的代码: 

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

    <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>

最后附上MainActivity的代码: 

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
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
android自定义View之滑动删除
鬼芯
01-05 2822
效果图实现功能1,可以向左滑动,右侧出现删除 2,向左滑动如果删除出现一大半,松手打开删除,反之关闭删除 3,应用场景 微信消息的删除功能 实现原理1,外面是一个ListView 2,条目是一个自定义控件继承ViewGroup 1,左边一个TextView,右侧屏幕外也有一个TextView 2,所以继承ViewGroup 实现步骤1,创建一个SlideDeleteView类
Android自定义View示例(一)—带有删除按钮的EditText
花前月下的细说__AndJun
09-21 2254
首先，看一下效果图MainActivity如下：/** * Demo描述: * 自定义控件实现带清除功能的EditText * * 学习资料: * http://blog.csdn.net/xiaanming/article/details/11066685 * * Thank you very much */ public class MainActivity extends
安卓自定义带删除图标的输入框EditView
lgx06的专栏
12-25 6514
安卓自定义带删除图标的输入框EditView
android 自定义 滑动删除,android自定义View滑动删除效果
weixin_39794213的博客
05-25 423
View滑动删除效果图实现功能1、可以向左滑动,右侧出现删除2、向左滑动如果删除出现一大半,松手打开删除,反之关闭删除3、应用场景微信消息的删除功能实现原理1、外面是一个ListView2、条目是一个自定义控件继承ViewGroup1)、左边一个TextView,右侧屏幕外也有一个TextView2)、所以继承ViewGroup实现步骤1、创建一个SlideDeleteView类1).构造方法要关...
Android实现可编辑下拉菜单
hls007的专栏
06-28 1325
Android实现仿QQ登录可编辑下拉菜单 在Android里，直接提供的Spinner控件虽然可以实现下拉菜单的效果，但其效果并不理想，很多时候我们需要类似手机QQ那样既可以在文本框中直接输入编辑文字，可以在下拉菜单中选中或者删除菜单选项，并且下拉菜单并不是以遮罩整个手机屏幕方式，而是以浮动在屏幕上的效果出现。下面呢，就来实现一下这些效果。 此次主要以EdiText、PopupWindow、
Android自定义View之自定义drawable
fakerXuan的博客
06-26 417
Android自定义View之自定义drawable运行效果代码实现 思路： 观察动画由哪些流程组成（动画分解） 1 初始状态： 背景 圆圈 叉 2 旋转动画 时长 圆圈从-90 逆时针方向旋转 3圈 -1080度 叉 缩小为一个圆点 3 圆点上移 时长 4 圆点下移 时长 5 由一个圆点 变成 一个勾勾 时长 动画编排 ValueAnimator 改变属性的值 addUpdateLister onAnimationUpdate(){ 获取属性值 invalidateSelf(); } 旋转动画 matri
Android自定义view系列之99.99%实现QQ侧滑删除效果实例代码详解
09-01
在Android开发中，自定义View是一项重要的技能，它允许开发者创造出独特且富有交互性的界面元素。本篇文章将详细讲解如何实现99.99%接近QQ的侧滑删除效果，这是一个常见于各种列表应用的功能，让用户能快速地删除或...
Android中自定义view实现侧滑效果
09-01
主要介绍了Android中自定义view实现侧滑效果的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
Android自定义View 仿QQ侧滑菜单的实现代码
08-29
Android 自定义 View 仿 QQ 侧滑菜单的实现代码 Android 自定义 View 仿 QQ 侧滑菜单的实现代码是 Android 开发中的一种常见的视图实现方式。通过自定义 View，可以实现类似 QQ 侧滑菜单的效果。本文将从头开始，...
Android自定义控件简单实现侧滑菜单效果
09-02
本篇文章将详细介绍如何使用Android自定义控件实现一个简单的侧滑菜单。 首先，我们要理解侧滑菜单的基本原理。在Android中，我们可以利用HorizontalScrollView这个内置组件来实现这一功能。HorizontalScrollView是...
Android开发-自定义View-AndroidStudio(十六)侧滑删除
12-29
对应博文：http://blog.csdn.net/iwanghang/article/details/53929510
一个控件搞定Android item侧滑删除菜单
08-24
【Android自定义ViewGroup】不一样的轮子，巧用类变量解决冲突，像IOS那样简单的使用侧滑删除，一个控件搞定Android item侧滑删除菜单。
仿QQ左滑删除
06-04
仿QQ左滑删除的Demo 博客地址:http://blog.csdn.net/u011072398/article/details/28392605
android 自定义 滑动删除,Android自定义view——侧滑可删除的listView
weixin_39928686的博客
05-25 194
实现了一个可侧滑删除的listView，这个view是一个继承自listView的自定义view，实现侧滑删除，可以通过很多种方式，今天我介绍的方式是通过PopupWindow的方式来实现的。效果图效果图1效果图2思路当一个listView在屏幕上显示的时候，它上面(屏幕上面)发生的各种事件，我们是可以捕捉到的，我们只需要判断一下是不是我们需要的事件，如果是的话，就产生反馈，对事件进行处理，否则就...
适合RecyclerView使用的万能侧滑删除控件
昊帅的博客
09-14 1296
上效果图 先上代码public class SwipeMenuLayout extends ViewGroup { private static final String TAG = "zxt/SwipeMenuLayout"; private int mScaleTouchSlop;//为了处理单击事件的冲突 private int mMaxVelocity;//计算滑动速
android 侧滑删除 第三方库,非常实用的侧滑删除控件SwipeLayout
weixin_34122028的博客
05-26 375
前言：项目中经常会用到类似于QQ侧滑点击删除的效果，网上的开源库也很多。个人感觉SwipeLayout最好用。下面介绍怎么使用。一、首先导入需要的Jar包，有3个，AndroidSwipeLayout-v1.1.8.jar、AndroidViewAnimations-1.1.3.jar、nineoldandroids-2.4.0.jar。第一个jar包就是我们使用该控件的jar包，后面2个是侧滑出...
android 自定义侧拉,Android控件View打造完美的自定义侧滑菜单
weixin_29275257的博客
05-25 411
一、概述在App中，经常会出现侧滑菜单，侧滑滑出View等效果，虽然说Android有很多第三方开源库，但是实际上咱们可以自己也写一个自定义的侧滑View控件，其实不难，主要涉及到以下几个要点：1.对Android中Window类中的DecorView有所了解2.对Scroller类实现平滑移动效果3.自定义ViewGroup的实现首先来看看效果图吧：下面现在就来说说这里咱们实现侧滑View...
安卓自定义控件之左滑删除
热门推荐
子敬的技术博客
06-19 1万+
安卓自定义控件之左滑删除 目标： 今天我们要做的效果图为： 左滑之后会有删除按钮。上面这个图，为了主要研究原理，我们就先只加删除按钮好了。 思路： 在实现这个功能的时候，看了些资料。主要有两种： 1、      将内容和按钮当做两个可操作的对象，然后通过DragViewHelper监听内容和按钮执行拖拽的操作方法。然后去重新onlayout他们的位置。 2
android自定义侧滑LisitView(包含编辑、删除)
sinat_27681957的博客
07-07 6481
（尊重原创转载请说明来处，谢谢）        最近由于项目的需要，自定义了一个具有侧滑功能的listview，侧滑后可以点击编辑、删除。好了，大家先看一下效果图，毕竟是看脸的世界 好了，我要先讲一下思路，一次编辑很难完善，有什么问题我后来还会补上，欢迎各位大神拍砖： 1：首先先说一下item：item用的LinearLayout布局，删除、编辑分别是写死了宽度的TextVi
自定义Android开关控件实现详解
"Android自定义控件案例，包括自定义开关、下拉刷新和侧滑菜单的实现" 在Android开发中，有时系统自带的控件不能满足我们特定的设计需求，这时就需要自定义控件来实现个性化功能。这篇摘要讨论的是如何自定义一个...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值