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自定义TitleView标题开发实例
Android开发过程中,经常遇到一个项目需要重复的定义相同样式的标题栏,Android相继推出了actionBar, toolBar, 相信有用到的朋友也会遇到一些不如意的时候,比如标题栏居中时,需要自定义xml文件给toolBar等,不了解actionBar,toolBar的可以去找相应的文章了解,这里介绍自定义titleBar满足国内主题风格样式的情况. 为了提前看到效果,先上效果图: 前期准备 1.为标题栏titleView预定义id,在values下的ids.xml中 <?xml ve
-
Android动态自定义圆形进度条
效果图: A.绘制圆环,圆弧,文本 //1.画圆环 //原点坐标 float circleX = width / 2; float circleY = width / 2; //半径 float radius = width / 2 - roundWidth / 2; //设置画笔的属性 paint.setColor(roundColor); paint.setStrokeWidth(roundWidth); paint.setStyle(Paint.Style.STROKE); canvas.
-
Android自定义View仿微信LetterView效果
废话不多说了,具体代码如下所示: public class LetterView extends View { private String TAG = LetterView.class.getSimpleName(); //A,B,C....Z,# public List<String> letters; private Paint mPaint; private int selectPosition = -1; private TextView mLetter; public void s
-
Android自定义手机界面状态栏实例代码
前言 我们知道IOS上的应用,状态栏的颜色总能与应用标题栏颜色保持一致,用户体验很不错,那安卓是否可以呢?若是在安卓4.4之前,答案是否定的,但在4.4之后,谷歌允许开发者自定义状态栏背景颜色啦,这是个不错的体验!若你手机上安装有最新版的qq,并且你的安卓SDK版本是4.4及以上,你可以看下它的效果: 实现这个效果有两个方法: 1.在xml中设置主题或自定义style: Theme.Holo.Light.NoActionBar.TranslucentDecor Theme.Holo.NoActi
-
Android编程自定义圆角半透明Dialog的方法
本文实例讲述了Android编程自定义圆角半透明Dialog的方法.分享给大家供大家参考,具体如下: 效果图如下: 只是在实例化的时候使用带样式的构造函数即可 new MyDialog(GameActivity.this, R.style.dialog); 在value文件夹中添加mydialogthemes.xml <?xml version="1.0″ encoding=" utf-8″?> <resources> <style name="
-
Android中自定义Window Title样式实例
Android提供了很多控件便于开发者进行UI相关的程序设计.但是很多时候,默认的一些UI设置不足以满足我们的需求,要么不好看,要么高度不够,亦或者是与应用界面不协调.于是这时候需要通过自定义样式或者自定义控件来实现. 当然,在空间足以满足需求的情况下,通常需要定义样式就可以搞定.本文将简单介绍如何通过自定义样式来实现定义Window Title. 先看一下效果图 逐步实现 在res/values/styles.xml文件中加入下列代码 复制代码 代码如下: <style name="My
-
Android自定义TabLayout效果
周末就要到了,今天项目中遇到这样一个Tab,选中tab的背景是个圆角矩形,方向指向器没有了,这样普通的TabLayout不能满足我的要求,可能会想到动态的去设置选中Tab的背景不就可以了,但是那样的话太生硬了,没有动画效果,其实想想也还比较简单,今天就简单的说一说这个YzzTab.效果如下图: 这里是四个Tab,一版只显示3个,这里假设有num个Tab,当滑动到第3个时,这里就需要考虑如何让TabLayout和指示器一起移动呢? @Override public void onPageScrol
-
Android编程自定义title bar(标题栏)示例
本文实例讲述了Android编程自定义title bar(标题栏)的方法.分享给大家供大家参考,具体如下: package com.test; import android.app.Activity; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.drawable.Drawable; import andr
-
Android使用setCustomTitle()方法自定义对话框标题
Android有自带的对话框标题,但是不太美观,如果要给弹出的对话框设置一个自定义的标题,使用AlertDialog.Builder的setCustomTitle()方法. 运行效果如下,左边是点击第一个按钮,弹出Android系统自带的对话框(直接用setTitle()设置标题):右边是点击第二个按钮,首先inflate一个View,然后用setCustomTitle()方法把该View设置成对话框的标题. 定义一个对话框标题的title.xml文件: <?xml version="1.
-
Android编程实现自定义title功能示例
本文实例讲述了Android编程实现自定义title功能.分享给大家供大家参考,具体如下: 这里我在前面加了个logo,而且改变了title的背景和高度. 首先编写title的布局文件,title.xml: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
-
Android实现自定义圆角对话框Dialog的示例代码
前言: 项目中多处用到对话框,用系统对话框太难看,就自己写一个自定义对话框. 对话框包括:1.圆角 2.app图标 , 提示文本,关闭对话框的"确定"按钮 难点:1.对话框边框圆角显示 2.考虑到提示文本字数不确定,在不影响美观的情况下,需要在一行内显示提示的文字信息 3.设置对话框的宽和高 技术储备: 1.安卓开发_使用AlertDialog实现对话框 知道AlertDialog有setView(view) ,Dialog 有ContentView(view) 方法. 2.An
-
Android编程自定义Dialog的方法分析
本文实例讲述了Android编程自定义Dialog的方法.分享给大家供大家参考,具体如下: 功能: android 提供给我们的只有2种Dialog 即 AlertDialog & ProgressDialog 但是 Dialog 有其自身的特点:1. 不是 Activity 2. 开销比 Activity 小得多 鉴于以上的优点 我们就有定制自己Dialog 的需求 原理: 1. android 系统提供了一个class: Dialog. 而且你可以把自己的工作放在"protected