iis服务器助手广告广告
返回顶部
首页 > 资讯 > 移动开发 >Android自定义view实现列表内左滑删除Item
  • 726
分享到

Android自定义view实现列表内左滑删除Item

Android列表内左滑删除ItemAndroid自定义view左滑删除Item 2023-02-09 12:02:16 726人浏览 八月长安
摘要

目录前言需求运行效果编写代码主要问题动态生成TextView将TextView对齐到当前容器右端滑动出界问题滑动开始判定后续订正前言 上一篇文章自定义了一个左滑删除的Recycler

前言

上一篇文章自定义了一个左滑删除的RecyclerView,把view事件分发三个函数dispatchTouchEvent、onInterceptTouchEvent、onTouchEvent实际运用了一下,一些原理通过出现的bug还是挺能加深印象,并且后面还在优化上用上了TouchSlop、VelocityTracker以及GestureDetector,但是真不配那个一个控件搞定安卓自定义view,所以我把上篇博客标题改了,并且希望在接下来的时间里,通过几个自定义view较全面的去学习自定义view的相关知识,话不多说,下面开始1

需求

上篇文章通过RecyclerView去实现了一个左滑的效果,后面突发奇想,既然能通过列表去实现item的左滑,那能不能通过item自己去实现左滑呢?这样我们把item内容写在自定义的layout里面就可以实现左滑了,听起来挺方便,于是就动手做了,少说多做总还是好的。

有了第一篇的内容,item的左滑还是简单多了,主要就是让item跟随滑动,右边自动添加一个删除按钮就够了吧,开始我是这么想的,并总结了三点核心思想:

  • 一个容器,左右两部分,左边外部导入,右边删除框自动增加
  • 在 View 右边追加一个删除框 ,需要在 View 内拦截事件,根据 x 轴滑动距离滑动
  • 在 ConstraintLayout 内部添加一个删除框,左边对其 parent 右边

这里取巧了一下,继承的 ConstraintLayout,这样让添加的删除框对齐 ConstraintLayout的右边就行了。

运行效果

编写代码

代码不多,就直接上代码了,注释写的很详细,后面再提下出现的主要问题:

import Android.annotation.SuppressLint
import android.content.Context
import android.graphics.Color
import android.os.Build
import android.util.AttributeSet
import android.util.TypedValue
import android.view.Gravity
import android.view.MotionEvent
import android.view.View
import android.widget.Scroller
import android.widget.TextView
import androidx.annotation.Requiresapi
import androidx.constraintlayout.widget.ConstraintLayout
import Kotlin.math.abs

class LeftDeleteItemLayout : ConstraintLayout {
    private val mDeleteView: View?
    var mDeleteClickListener: OnClickListener? = null
    //流畅滑动
    private var mScroller = Scroller(context)
    //上次事件的横坐标
    private var mLastX = -1f
    //控制控件结束的runnable
    private val stopMoveRunnable: Runnable = Runnable { stopMove() }
    constructor(context: Context) : this(context, null, 0)
    constructor(context: Context, attrs: AttributeSet?) : this(context, attrs, 0)
    constructor(context: Context, attrs: AttributeSet?, defStyleAttr: Int) :
            super(context, attrs, defStyleAttr)
    @RequiresApi(Build.VERSION_CODES.LOLLIPOP)
    constructor(context: Context, attrs: AttributeSet?, defStyleAttr: Int, defStyleRes: Int) :
            super(context, attrs, defStyleAttr, defStyleRes)
    init {
        //kotlin的初始化函数
        mDeleteView = makeDeleteView(context)
        addView(mDeleteView)
    }
    //创建删除框,设置好位置对齐自身最右边
    private fun makeDeleteView(context: Context): View {
        val deleteView = TextView(context)
        //给当前控件一个id,用于删除控件约束
        this.id = generateViewId()
        //设置布局参数
        deleteView.layoutParams = LayoutParams(
            dp2px(context, 100f), 0
        ).apply {
            //设置约束条件
            leftToRight = id
            topToTop = id
            bottomToBottom = id
        }
        //设置其他参数
        deleteView.text = "删除"
        deleteView.gravity = Gravity.CENTER
        deleteView.setTextColor(Color.WHITE)
        deleteView.textSize = sp2px(context,18f).toFloat()
        deleteView.setBackgroundColor(Color.RED)
        //设置点击回调
        deleteView.setOnClickListener(mDeleteClickListener)
        return deleteView
    }
    //拦截事件
    override fun onInterceptTouchEvent(event: MotionEvent?): Boolean {
        event?.let {
            when(event.action) {
                //down事件记录x,不拦截,当move的时候才会用到
                MotionEvent.ACTION_DOWN -> mLastX = event.x
                //拦截本控件内的移动事件
                MotionEvent.ACTION_MOVE -> return true
            }
        }
        return super.onInterceptTouchEvent(event)
    }
    //处理事件
    @SuppressLint("ClickableViewAccessibility")
    override fun onTouchEvent(event: MotionEvent?): Boolean {
        event?.let {
            when(event.action) {
                MotionEvent.ACTION_MOVE -> moveItem(event)
                MotionEvent.ACTION_UP -> stopMove()
            }
        }
        return super.onTouchEvent(event)
    }
    private fun moveItem(e: MotionEvent) {
        //Log.e("TAG", "moveItem: mLastX=$mLastX")
        //如果没有收到down事件,不应该移动
        if (mLastX == -1f) return
        val dx = mLastX - e.x
        //更新点击的横坐标
        mLastX = e.x
        //检查mItem移动后应该在[-deleteLength, 0]内
        val deleteWidth = mDeleteView!!.width
        if ((scrollX + dx) <= deleteWidth && (scrollX + dx) >= 0) {
            //触发移动
            scrollBy(dx.toInt(), 0)
        }
        //如果一段时间没有移动时间,mLastX还没被stopMove重置为-1,那就是移动到其他地方了
        //设置200毫秒没有新事件就触发stopMove
        removeCallbacks(stopMoveRunnable)
        postDelayed(stopMoveRunnable, 200)
    }
    private fun stopMove() {
        //如果移动过半了,应该判定左滑成功
        val deleteWidth = mDeleteView!!.width
        if (abs(scrollX) >= deleteWidth / 2f) {
            //触发移动至完全展开
            mScroller.startScroll(scrollX, 0, deleteWidth - scrollX, 0)
        }else {
            //如果移动没过半应该恢复状态,则恢复到原来状态
            mScroller.startScroll(scrollX, 0, - scrollX, 0)
        }
        invalidate()
        //清除状态
        mLastX = -1f
    }
    //流畅地滑动
    override fun computeScroll() {
        if (mScroller.computeScrollOffset()) {
            scrollTo(mScroller.currX, mScroller.currY)
            postInvalidate()
        }
    }
    //单位转换
    @Suppress("SameParameterValue")
    private fun dp2px(context: Context, dpVal: Float): Int {
        return TypedValue.applyDimension(
            TypedValue.COMPLEX_UNIT_DIP, dpVal, context.resources
                .displayMetrics
        ).toInt()
    }
    @Suppress("SameParameterValue")
    private fun sp2px(context: Context, spVal: Float): Int {
        val fontScale = context.resources.displayMetrics.scaledDensity
        return (spVal * fontScale + 0.5f).toInt()
    }

主要问题

动态生成TextView

这个主要就是通过代码生成一个TextView,不是很难,提一下。

将TextView对齐到当前容器右端

这里利用ConstraintLayout取巧做的还是不错的,因为如果要自己去实现一个在屏幕外的对齐,至少要在onMeasure中获得宽度,再去onLayout里面摆放到右侧屏幕外。

这里也有一些问题,首先是设置动态生成的TextView参数,然后是设置ConstraintLayout内的约束条件,因为约束标记必须要用到id,还得为当前控件生成一个id,最后就是做一个回调接口了。

滑动出界问题

还有一个没有预料到的问题是当滑动超过当前view的范围时,ACTION_MOVE和ACTION_UP都无法接收到,这就没法知道移动是否结束了。这里因为我们的自定义view是一个viewgroup,所以没法消耗ACTION_DOWN事件,所以后续的事件序列并不会交到当前的item上,这就麻烦了,所以这个需求本质上就是不合理的,但是还是要解决问题吧!

这里我通过View类的postDelayed,延迟运行一个runnable去停止滑动,当每次滑动的时候又去停止这个runnable。整个逻辑运行起来就是,滑动没有出界,移动的时候先移除延迟的停止逻辑,再发送延迟的停止逻辑,直到ACTION_UP触发停止,若滑动出界了,没有去移除延迟的停止逻辑,就会在一端时间后自动触发停止。

有点绕,但是还是挺简单的,里面的原理也简单讲一下。实际上View的postDelayed会通过主线程的handler去延迟执行,如果有了解handler机制,可以知道handler并不仅仅可以发送message,同样也可以发送runnable,类似移除message,同样也可以移除runnable。

滑动开始判定

另一个预料之外的问题是当滑动从其他item移动到当前item的时候,即使没有收到ACTION_DOWN事件,也会触发滑动,这个很不符合逻辑。我这就在stopMove里面将mLastX改为了-1,初始值也是-1,如果在moveItem中值是-1,就说明没有被ACTION_DOWN事件设定mLastX,即按下的时候并不在当前item,应当舍弃滑动。

后续订正

onTouchEvent有误

    //处理事件
    @SuppressLint("ClickableViewAccessibility")
    override fun onTouchEvent(event: MotionEvent): Boolean {
        when(event.action) {
            MotionEvent.ACTION_DOWN -> return true
            MotionEvent.ACTION_MOVE -> moveItem(event)
            MotionEvent.ACTION_UP -> stopMove()
        }
        return super.onTouchEvent(event)
    }

增加对ACTION_DOWN的拦截,因为如果ACTION_DOWN没在view处有被处理的话,会被丢弃,如果被view拦截了的话,move事件又不会经过onInterceptTouchEvent函数。真不知道当时写的时候是怎么运行通过的。。。

到此这篇关于Android自定义view实现列表内左滑删除Item的文章就介绍到这了,更多相关Android左滑删除Item内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: Android自定义view实现列表内左滑删除Item

本文链接: https://www.lsjlt.com/news/195309.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Android自定义view实现列表内左滑删除Item
    目录前言需求运行效果编写代码主要问题动态生成TextView将TextView对齐到当前容器右端滑动出界问题滑动开始判定后续订正前言 上一篇文章自定义了一个左滑删除的Recycler...
    99+
    2023-02-09
    Android列表内左滑删除Item Android自定义view左滑删除Item
  • Android自定义view实现左滑删除的RecyclerView详解
    目录概述需求编写代码I编写代码II编写代码III优化总结概述 最近安卓自定义view的知识看的很熟,但是却很久没动手了,这几天用kotlin手撕了原先一个左滑删除的RecyclerV...
    99+
    2022-11-13
    Android RecyclerView Android 左滑删除RecyclerView
  • Android嵌套RecyclerView左右滑动替代自定义view
    以前的左右滑动效果采用自定义scrollview或者linearlayout来实现,recyclerview可以很好的做这个功能,一般的需求就是要么一个独立的左右滑动效果,要么在一个列表里的中间部分一个左右滑动效果而列表里面也容易,只是需要...
    99+
    2023-05-31
    android recycleview 滑动
  • Android自定义view实现侧滑栏详解
    目录前言需求效果图编写代码主要问题前言 上一篇文章学了下自定义View的onDraw函数及自定义属性,做出来的滚动选择控件还算不错,就是逻辑复杂了一些。这篇文章打算利用自定义view...
    99+
    2022-11-13
    Android侧滑栏 Android自定义view 自定义view侧滑栏
  • Android Recyclerview实现左滑删除功能
    本文实例为大家分享了Android Recyclerview实现左滑删除的具体代码,供大家参考,具体内容如下 1.先创建一个工具类 SlideRecyclerView public...
    99+
    2024-04-02
  • Android 实现左滑出现删除选项
    滑动删除的部分主要包含两个部分, 一个是内容区域(用于放置正常显示的view),另一个是操作区域(用于放置删除按钮)。默认情况下,操作区域是不显示的,内容区域的大小是填充整个容 器,操作区域始终位于内容区域的右面。当开始滑动的时候,整个容器...
    99+
    2023-05-31
    android 左滑 删除
  • Android自定义view实现滑动解锁效果
    本文实例为大家分享了Android自定义view实现滑动解锁的具体代码,供大家参考,具体内容如下 1. 需求如下: 近期需要做一个类似屏幕滑动解锁的功能,右划开始,左划暂停。 2. ...
    99+
    2024-04-02
  • Android自定义View实现竖向滑动回弹效果
    本文实例为大家分享了Android自定义View实现滑动回弹的具体代码,供大家参考,具体内容如下 前言 Android 页面滑动的时候的回弹效果 一、关键代码 public clas...
    99+
    2024-04-02
  • 微信小程序实现列表项左滑删除效果
    本文实例为大家分享了微信小程序实现列表项左滑删除效果的具体代码,供大家参考,具体内容如下 效果 图片 WXML <view class="container">...
    99+
    2024-04-02
  • Android自定义view实现滑动解锁九宫格控件
    目录前言需求效果图前言 上一篇文章用贝塞尔曲线画了一个看起来不错的小红点功能,技术上没什么难度,主要就是数学上的计算。这篇文章也差不多,模仿了一个常用的滑动解锁的九宫格控件。 需求 ...
    99+
    2023-02-09
    Android滑动解锁九宫格 Android滑动解锁 Android九宫格控件
  • Android中怎么通过自定义View 实现QQ侧滑菜单
    这期内容当中小编将会给大家带来有关Android中怎么通过自定义View 实现QQ侧滑菜单,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。布局代码<fierce_luk.com.sideslipvie...
    99+
    2023-05-30
    android view
  • Android深入探究自定义View之嵌套滑动的实现
    本文主要探讨以下几个问题: 嵌套滑动设计目的 嵌套滑动的实现 嵌套滑动与事件分发机制 嵌套滑动设计目的 不知道大家有没有注意过淘宝APP首页的二级联动,滑...
    99+
    2024-04-02
  • Android怎么自定义View实现竖向滑动回弹效果
    这篇文章主要介绍“Android怎么自定义View实现竖向滑动回弹效果”,在日常操作中,相信很多人在Android怎么自定义View实现竖向滑动回弹效果问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Andro...
    99+
    2023-06-30
  • Android自定义View实现扫描效果
    本文实例为大家分享了Android自定义View实现扫描效果的具体代码,供大家参考,具体内容如下 演示效果如下: 实现内容: 1、控制动画是竖向或者横向 2、控制动画初始是从底部/...
    99+
    2024-04-02
  • Android自定义View实现时钟效果
    本文实例为大家分享了Android自定义View实现时钟效果的具体代码,供大家参考,具体内容如下 自定义时钟 初学自定义View,先画一个不太成熟的时钟(甚至只有秒针) 时钟效果 ...
    99+
    2024-04-02
  • Android自定义View实现体重表盘详解流程
    目录效果视频分析起始角度圆弧指针代码初始化属性画布绘制内圆弧绘制外圆弧绘制中间指针绘制中间文字绘制左右两边文字动画全部代码下载链接效果视频 分析 起始角度 如下图所示,起点角度为1...
    99+
    2024-04-02
  • Android如何实现自定义View中attrs.xml
    这篇文章主要为大家展示了“Android如何实现自定义View中attrs.xml”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Android如何实现自定义View中attrs.xml”这篇文章...
    99+
    2023-05-30
    android view attrs.xml
  • Android自定义View实现时钟功能
    最近在练习自定义view, 想起之前面试的时候笔试有道题是写出自定义一个时钟的关键代码. 今天就来实现一下. 步骤依然是先分析, 再上代码. 实现效果 View分析 时钟主要分为五...
    99+
    2024-04-02
  • Android自定义View实现心形图案
    本文实例为大家分享了Android自定义View实现心形的具体代码,供大家参考,具体内容如下 通过继承View实现的❤形 在绘制心形需要Path类中的两个重要方法分别...
    99+
    2024-04-02
  • Android自定义View实现气泡动画
    本文实例为大家分享了Android自定义View实现气泡动画的具体代码,供大家参考,具体内容如下 一、前言 最近有需求制作一个水壶的气泡动画,首先在网上查找了一番,找到了一个文章:A...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作