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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

时间: 2024-11-09 06:15:09

android自定义View滑动删除效果的相关文章

Android自定义View实现打字机效果_Android

一.先来看看效果演示 二.实现原理: 这个其实不难实现,通过一个定时器不断调用TextView的setText就行了,在setText的时候播放打字的音效. 具体代码如下: import java.util.Timer; import java.util.TimerTask; import android.content.Context; import android.media.MediaPlayer; import android.text.TextUtils; import android

Android自定义View实现打字机效果

一.先来看看效果演示 二.实现原理: 这个其实不难实现,通过一个定时器不断调用TextView的setText就行了,在setText的时候播放打字的音效. 具体代码如下: import java.util.Timer; import java.util.TimerTask; import android.content.Context; import android.media.MediaPlayer; import android.text.TextUtils; import android

Android 自定义View实现抽屉效果

Android 自定义View实现抽屉效果 说明 这个自定义View,没有处理好多点触摸问题 View跟着手指移动,没有采用传统的scrollBy方法,而是通过不停地重新布局子View的方式,来使得子View产生滚动效果menuView.layout(menuLeft, 0, menuLeft + menuWidth, menuHeight); 相应的,由于没有使用scrollBy方法,就没有产生getScrollX值,所以不能通过Scroller的startScroll方法来完成手指离开后的平

android自定义view实现公章效果

上次去一个公司面试,面试官问了一个题,怎么用android的自定义view实现一个公章的效果,据说这是华为之前的面试题,我想了下,要是公章的效果,最外层是一个圆,里面是一个五角星,但是这文字怎么画呢,比较难搞,后来回来看了下java的api,发现人家的Path里面本来就提供了这么一个方法: public void addArc(RectF oval, float startAngle, float sweepAngle) { addArc(oval.left, oval.top, oval.ri

Android自定义View实现钟摆效果进度条PendulumView_Android

在网上看到了一个IOS组件PendulumView,实现了钟摆的动画效果.由于原生的进度条确实是不好看,所以想可以自定义View实现这样的效果,以后也可以用于加载页面的进度条.  废话不多说,先上效果图   底部黑边是录制时不小心录上的,可以忽略.  既然是自定义View我们就按标准的流程来,第一步,自定义属性  自定义属性  建立属性文件  在Android项目的res->values目录下新建一个attrs.xml文件,文件内容如下: <?xml version="1.0&quo

Android自定义View实现钟摆效果进度条PendulumView

在网上看到了一个IOS组件PendulumView,实现了钟摆的动画效果.由于原生的进度条确实是不好看,所以想可以自定义View实现这样的效果,以后也可以用于加载页面的进度条. 废话不多说,先上效果图 底部黑边是录制时不小心录上的,可以忽略. 既然是自定义View我们就按标准的流程来,第一步,自定义属性 自定义属性 建立属性文件 在Android项目的res->values目录下新建一个attrs.xml文件,文件内容如下: <?xml version="1.0" enco

Android高仿微信对话列表滑动删除效果

前言 用过微信的都知道,微信对话列表滑动删除效果是很不错的,这个效果我们也可以有.思路其实很简单,弄个ListView,然后里面的每个item做成一个可以滑动的自定义控件即可.由于ListView是上下滑动而item是左右滑动,因此会有滑动冲突,也许你需要了解下android中点击事件的派发流程,请参考Android源码分析-点击事件派发机制.我的解决思路是这样的:重写ListView的onInterceptTouchEvent方法,在move的时候做判断,如果是左右滑动就返回false,否则返

Android仿微信对话列表滑动删除效果_Android

微信对话列表滑动删除效果很不错的,借鉴了github上SwipeListView(项目地址:https://github.com/likebamboo/SwipeListView),在其上进行了一些重构,最终实现了微信对话列表滑动删除效果. 实现原理 1.通过ListView的pointToPosition(int x, int y)来获取按下的position,然后通过android.view.ViewGroup.getChildAt(position)来得到滑动对象swipeView  2.

Android中自定义view实现侧滑效果_Android

效果图: 看网上的都是两个view拼接,默认右侧的不显示,水平移动的时候把右侧的view显示出来.但是看最新版QQ上的效果不是这样的,但给人的感觉却很好,所以献丑来一发比较高仿的. 知识点: 1.ViewDragHelper 的用法: 2.滑动冲突的解决: 3.自定义viewgroup. ViewDragHelper 出来已经比较久了 相信大家都比较熟悉,不熟悉的话google一大把这里主要简单用一下它的几个方法 1.tryCaptureView(View child, int pointerI