ViewDragHelper应用之仿QQ侧滑删除控件

2024-02-24 10:32
文章标签 应用 删除 qq 控件 之仿 侧滑 viewdraghelper

本文主要是介绍ViewDragHelper应用之仿QQ侧滑删除控件，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！


概要

QQ消息列表侧滑删除在网上也有很多相关代码介绍，介绍的实现方式也各不一样，本文是将侧滑删除自定义为一个控件，这样使用就可以不仅仅限制在ListView中了。如果想理解本文逻辑首先得对ViewDragHelper有一定的了解，可以参考一下ViewDragHelper解析，在文章中对ViewDragHelper进行了简单的介绍并配有示例demo，通过本文也可以加深对ViewDragHelper理解。

本文最终效果图如下：

swipelayout

侧滑删除控件实现分析

有关自定义控件的学习笔记已经记录了四篇了，有兴趣可以查看以前的文章：

  • Android自定义控件学习笔记一
  • Android自定义控件学习笔记二
  • Android自定义控件学习笔记三
  • Android自定义控件学习笔记四

本文的自定义控件是要重写一个ViewGroup，在以前的笔记中还没有记录过关于自定义控件来布局一个ViewGroup，SwipeLayout通过继承FragmeLayout重写onLayout方法布局子View，事实上SwipeLayout布局重点就在于如何布局子View，而侧滑删除的操作重点在于ViewDragHelper的如何使用，通过上面的简单分析，重点就在这两个地方了。

onLayout布局子View

FrameLayout是帧布局，就是说布局的时候都是上下层级的关系，这种情况下就需要动态来布局了，侧滑操作初始时时看不到的，也就是说初始时放在内容布局的后面就可以了，同时我们可以侧滑的范围就是侧滑菜单的宽度。

SwipeLayout布局文件

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<com.sunny.demo.view.SwipeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/swipeLayout"
    android:layout_width="match_parent"
    android:layout_height="60dp" >
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent" >
        <TextView
            android:layout_width="70dp"
            android:background="#ccc"
            android:layout_height="match_parent"
            android:gravity="center"
            android:textColor="#fff"
            android:text="置顶" />
        <TextView
            android:id="@+id/tv_del"
            android:layout_width="70dp"
            android:background="#f00"
            android:textColor="#fff"
            android:layout_height="match_parent"
            android:gravity="center"
            android:clickable="true"
            android:text="刪除" />
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center_vertical" >
        <ImageView
            android:id="@+id/imageView"
            android:src="@drawable/kxg"
            android:layout_width="50dp"
            android:layout_marginLeft="8dp"
            android:layout_marginRight="8dp"
            android:layout_height="50dp"/>
        <TextView
            android:id="@+id/textView"
            android:textColor="#444"
            android:textSize="18sp"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:gravity="center_vertical"/>
    </LinearLayout>
</com.sunny.demo.view.SwipeLayout>

 

SwipeLayout布局代码

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
private ViewDragHelper dragHelper;
private View backView;//侧滑菜单
private View frontView;//内容区域
private int height;//自定义控件布局高
private int width;//自定义控件布局宽
private int range;//侧滑菜单可滑动范围
//重写三个构造方法
public SwipeLayout(Context context) {
this(context, null);
}
public SwipeLayout(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public SwipeLayout(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
dragHelper = ViewDragHelper.create(this, callback);
}
//获取两个View
protected void onFinishInflate() {
super.onFinishInflate();
int childCount = getChildCount();
if (childCount < 2) {
throw new IllegalStateException("you need 2 children view");
}
if (!(getChildAt(0) instanceof ViewGroup) || !(getChildAt(1) instanceof ViewGroup)) {
throw new IllegalArgumentException("your children must be instance of ViewGroup");
}
backView = getChildAt(0);//侧滑菜单
frontView = getChildAt(1);//内容区域
}
//初始化布局的高height宽width以及可滑动的范围range
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
height = frontView.getMeasuredHeight();
width = frontView.getMeasuredWidth();
range = backView.getMeasuredWidth();
}
//布局子View
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
super.onLayout(changed, left, top, right, bottom);
layoutContent(false);
}
/**
* @param isOpen 侧滑菜单是否打开
*/
private void layoutContent(boolean isOpen) {
Rect frontRect = computeFrontViewRect(isOpen);
frontView.layout(frontRect.left, frontRect.top, frontRect.right, frontRect.bottom);
Rect backRect = computeBackViewRect(frontRect);
backView.layout(backRect.left, backRect.top, backRect.right, backRect.bottom);
//调整顺序
// bringChildToFront(frontView);
}
/**
* 通过内容区域所占矩形坐标计算侧滑菜单的矩形位置区域
* @param frontRect 内容区域所占矩形
* @return
*/
private Rect computeBackViewRect(Rect frontRect) {
int left = frontRect.right;
return new Rect(left, 0, left + range, height);
}
/**
* 通过菜单打开与否isOpen计算内容区域的矩形区
* @param isOpen
* @return
*/
private Rect computeFrontViewRect(boolean isOpen) {
int left = 0;
if (isOpen) {
left = -range;
}
return new Rect(left, 0, left + width, height);
}

 

侧滑操作ViewDragHelper的实现

ViewDragHelper解析我们已经分析过三步走，第一步在构造函数中已经做过了，接下来就是剩下的两步了，关键在于第三步。

接管touch事件

 

1
2
3
4
5
6
7
8
public boolean onInterceptTouchEvent(android.view.MotionEvent ev) {
return dragHelper.shouldInterceptTouchEvent(ev);
};
public boolean onTouchEvent(MotionEvent event) {
dragHelper.processTouchEvent(event);
return true;
}

 

自定义Callback

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
private ViewDragHelper.Callback callback = new ViewDragHelper.Callback() {
//所有子View都可拖拽
public boolean tryCaptureView(View child, int pointerId) {
return true;
}
//水平拖拽后处理
public int clampViewPositionHorizontal(View child, int left, int dx) {
if (child == frontView) {
if (left > 0) {
return 0;
} else if (left < -range) {
return -range;
}
} else if (child == backView) {
if (left > width) {
return width;
} else if (left < width - range) {
return width - range;
}
}
return left;
}
public void onViewPositionChanged(View changedView, int left, int top, int dx, int dy) {
if (changedView == frontView) {
backView.offsetLeftAndRight(dx);
} else if (changedView == backView) {
frontView.offsetLeftAndRight(dx);
}
//事件派发
dispatchSwipeEvent();
//兼容低版本
invalidate();
};
//松手后根据侧滑位移确定菜单打开与否
public void onViewReleased(View releasedChild, float xvel, float yvel) {
if (xvel == 0 && frontView.getLeft() < -range * 0.5f) {
open();
} else if (xvel < 0) {
open();
} else {
close();
}
};
//子View如果是clickable，必须重写的方法
public int getViewHorizontalDragRange(View child) {
return 1;
}
public int getViewVerticalDragRange(View child) {
return 1;
}
};

 

拖拽伴随动画操作

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
// 持续平滑动画 高频调用
public void computeScroll() {
// 如果返回true，动画还需要继续
if (dragHelper.continueSettling(true)) {
ViewCompat.postInvalidateOnAnimation(this);
}
};
public void open() {
open(true);
}
public void open(boolean isSmooth) {
int finalLeft = -range;
if (isSmooth) {
if (dragHelper.smoothSlideViewTo(frontView, finalLeft, 0)) {
ViewCompat.postInvalidateOnAnimation(this);
}
} else {
layoutContent(true);
}
}
public void close() {
close(true);
}
public void close(boolean isSmooth) {
int finalLeft = 0;
if (isSmooth) {
if (dragHelper.smoothSlideViewTo(frontView, finalLeft, 0)) {
ViewCompat.postInvalidateOnAnimation(this);
}
} else {
layoutContent(false);
}
}

 

拖拽状态以及事件回调

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
private Status status=Status.CLOSE;//拖拽状态 默认关闭
public static enum Status {
OPEN, CLOSE, DRAGING
}
//拖拽事件监听器
public static interface OnSwipeChangeListener {
void onDraging(SwipeLayout mSwipeLayout);
void onOpen(SwipeLayout mSwipeLayout);
void onClose(SwipeLayout mSwipeLayout);
void onStartOpen(SwipeLayout mSwipeLayout);
void onStartClose(SwipeLayout mSwipeLayout);
}
//更改状态
private Status updateStatus() {
int left=frontView.getLeft();
if(left==0){
return Status.CLOSE;
}else if(left==-range){
return Status.OPEN;
}
return Status.DRAGING;
}
//根据当前状态判断回调事件
protected void dispatchSwipeEvent() {
Status preStatus=status;
status=updateStatus();
if(swipeChangeListener!=null){
swipeChangeListener.onDraging(this);
}
if(preStatus!=status&&swipeChangeListener!=null){
if(status==Status.CLOSE){
swipeChangeListener.onClose(this);
}else if(status==Status.OPEN){
swipeChangeListener.onOpen(this);
}else if(status==Status.DRAGING){
if(preStatus==Status.CLOSE){
swipeChangeListener.onStartOpen(this);
}else if(preStatus==Status.OPEN){
swipeChangeListener.onStartClose(this);
}
}
}
}

 

小结

在一个ListView列表中当我们侧滑出一个菜单后需要其余的已经打开的菜单全部关闭，这时候我们可以将所有的打开的SwipeLayout放入一个List中，每次打开后将该SwipeLayout是存入List中，当我们关闭后再把SwipeLayout从List中移除掉，详细的代码就不再贴出来了，可以下载示例源代码查看。

示例源代码下载

本文地址www.sunnyang.com/368.html

这篇关于ViewDragHelper应用之仿QQ侧滑删除控件的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/741828。

相关文章

线程池ThreadPoolExecutor应用过程

线程池ThreadPoolExecutor应用过程

《线程池ThreadPoolExecutor应用过程》：本文主要介绍如何使用ThreadPoolExecutor创建线程池,包括其构造方法、常用方法、参数校验以及如何选择合适的拒绝策略,文章还讨论... 目录ThreadPoolExecutor构造说明及常用方法为什么强制要求使用ThreadPoolExec
阅读更多...
mysql_mcp_server部署及应用实践案例

mysql_mcp_server部署及应用实践案例

《mysql_mcp_server部署及应用实践案例》文章介绍了在CentOS7.5环境下部署MySQL_mcp_server的步骤,包括服务安装、配置和启动,还提供了一个基于Dify工作流的应用案例... 目录mysql_mcp_server部署及应用案例1. 服务安装1.1. 下载源码1.2. 创建独立
阅读更多...
Python列表的创建与删除的操作指南

Python列表的创建与删除的操作指南

《Python列表的创建与删除的操作指南》列表（list）是Python中最常用、最灵活的内置数据结构之一,它支持动态扩容、混合类型、嵌套结构,几乎无处不在,但你真的会创建和删除列表吗,本文给大家介绍... 目录一、前言二、列表的创建方式1. 字面量语法（最常用）2. 使用list()构造器3. 列表推导式
阅读更多...
MyBatis-Plus逻辑删除实现过程

MyBatis-Plus逻辑删除实现过程

《MyBatis-Plus逻辑删除实现过程》本文介绍了MyBatis-Plus如何实现逻辑删除功能,包括自动填充字段、配置与实现步骤、常见应用场景,并展示了如何使用remove方法进行逻辑删除,逻辑删... 目录1. 逻辑删除的必要性编程1.1 逻辑删除的定义1.2 逻辑删php除的优点1.3 适用场景2.
阅读更多...
C#实现插入与删除Word文档目录的完整指南

C#实现插入与删除Word文档目录的完整指南

《C#实现插入与删除Word文档目录的完整指南》在日常的办公自动化或文档处理场景中,Word文档的目录扮演着至关重要的角色,本文将深入探讨如何利用强大的第三方库Spire.Docfor.NET,在C#... 目录Spire.Doc for .NET 库：Word 文档处理利器自动化生成：C# 插入 Word
阅读更多...
MySQL中的DELETE删除数据及注意事项

MySQL中的DELETE删除数据及注意事项

《MySQL中的DELETE删除数据及注意事项》MySQL的DELETE语句是数据库操作中不可或缺的一部分,通过合理使用索引、批量删除、避免全表删除、使用TRUNCATE、使用ORDERBY和LIMI... 目录1. 基本语法单表删除2. 高级用法使用子查询删除删除多表3. 性能优化策略使用索引批量删除避免
阅读更多...
Nginx内置变量应用场景分析

Nginx内置变量应用场景分析

《Nginx内置变量应用场景分析》Nginx内置变量速查表,涵盖请求URI、客户端信息、服务器信息、文件路径、响应与性能等类别,这篇文章给大家介绍Nginx内置变量应用场景分析,感兴趣的朋友跟随小编一... 目录1. Nginx 内置变量速查表2. 核心变量详解与应用场景3. 实际应用举例4. 注意事项Ng
阅读更多...
使用Python实现在PDF中添加、导入、复制、移动与删除页面

使用Python实现在PDF中添加、导入、复制、移动与删除页面

《使用Python实现在PDF中添加、导入、复制、移动与删除页面》在日常办公和自动化任务中,我们经常需要对PDF文件进行页面级的编辑,使用Python,你可以轻松实现这些操作,而无需依赖AdobeAc... 目录1. 向 PDF 添加空白页2. 从另一个 PDF 导入页面3. 删除 PDF 中的页面4. 在
阅读更多...
Java轻松实现在Excel中插入、提取或删除文本框

Java轻松实现在Excel中插入、提取或删除文本框

《Java轻松实现在Excel中插入、提取或删除文本框》在日常的Java开发中,我们经常需要与Excel文件打交道,当涉及到Excel中的文本框时,许多开发者可能会感到棘手,下面我们就来看看如何使用J... 目录Java操作Excel文本框的实战指南1. 插入Excel文本框2. 提取Excel文本框内容3
阅读更多...
Java中的随机数生成案例从范围字符串到动态区间应用

Java中的随机数生成案例从范围字符串到动态区间应用

《Java中的随机数生成案例从范围字符串到动态区间应用》本文介绍了在Java中生成随机数的多种方法,并通过两个案例解析如何根据业务需求生成特定范围的随机数,本文通过两个实际案例详细介绍如何在java中... 目录Java中的随机数生成：从范围字符串到动态区间应用引言目录1. Java中的随机数生成基础基本随
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2