Android仿QQ侧滑删除实现

最新推荐文章于 2024-06-13 11:05:46 发布

布丁西西

最新推荐文章于 2024-06-13 11:05:46 发布

阅读量2.8k

点赞数 1

分类专栏：自定义View Android开发经验分享

本文链接：https://blog.csdn.net/shenshibaoma/article/details/52778070

版权

Android开发经验分享同时被 2 个专栏收录

26 篇文章 2 订阅

订阅专栏

自定义View

14 篇文章 1 订阅

订阅专栏

效果图如下

首先可以分析下，整行继承自线性布局，分为内容区域ContentRect 和操作区域（即删除，置顶的操作）。

则整个线性布局下有两个child：一个内容View，一个可操作view，可以简单的理解为根据用户的手势来向左，向右滑动子元素，每次都requestLayout 产生的位移来重新布局子元素的位置，ok原理就是这样，无非就处理内容区域和操作区域的临界点，可以看到，当打开侧滑菜单即向左滑动时内容区域的左边Left范围是从0到负的操作区域这个范围

也即leftX = ［0，－optionViewWidth］；optionView的Left则需要加上内容的宽度，因为他永远在内容区域的右边即［contentViewwidth + leftX];同理，当向右滑动，即关闭这个侧滑菜单时，内容区域的leftX ＝－optionViewWidth ＋ leftX，因为不能够大于0，他的范围是从－optionViewWidth 处位移到0的过程，操作区域的的与之类似

1 最主要的方法就在onLayout了，如下所示 leftX 是我们定义的一个手指触摸滑动的变量，contentViewWidth 和 optionViewWidth 是我们可以获取到的内容区域和操作区域

@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
    super.onLayout(changed, l, t, r, b);
    contentView.layout(leftX, 0, contentViewWidth + leftX, mHeight);
    deleteView.layout(contentViewWidth + leftX, 0, contentViewWidth + optionViewWidth + leftX, mHeight);
    Log.e("onLayout", "onLayout" + String.valueOf(contentView.getLeft()) + "==" + String.valueOf(deleteView.getLeft()));
    if(mCurrentState == SlideState.OPEN){
        //打开状态获取此时内容和删除区域的rectF,用户再次单击时获取是否在内容区域内,如果在,则执行关闭动画,反之,则是删除区域的操作
        contentRectF.top = contentView.getTop();
        contentRectF.left = contentView.getLeft();
        contentRectF.right = contentView.getRight();
        contentRectF.bottom = contentView.getBottom();
        deleteRectF.left = deleteView.getLeft();
        deleteRectF.right = deleteView.getRight();
        deleteRectF.bottom = deleteView.getBottom();
        deleteRectF.top = deleteView.getTop();
    }
}

2.在onSizechanged方法里初始化数据，根据扣扣的截图（3倍图），删除和置顶的宽高大约为100px，80px，则大约对应于2倍图的54dp，63dp，因此算法如下：

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    super.onSizeChanged(w, h, oldw, oldh);
    this.mHeight = h;
    this.mWidth = w;
    contentRectF = new RectF();
    deleteRectF = new RectF();
    deleteView = LayoutInflater.from(getContext()).inflate(R.layout.item_delete_options, null);
    contentView = LayoutInflater.from(getContext()).inflate(R.layout.item_content, null);
    LinearLayout.LayoutParams contentLayoutParams = new LayoutParams(mWidth, (int) getResources().getDimension(R.dimen.dimens_54_dp));
    LinearLayout.LayoutParams deleteLayoutParams = new LayoutParams((int) getResources().getDimension(R.dimen.dimens_63_dp) * 2, (int) getResources().getDimension(R.dimen.dimens_54_dp));
    contentView.setLayoutParams(contentLayoutParams);
    deleteView.setLayoutParams(deleteLayoutParams);
    optionViewWidth = (int) getResources().getDimension(R.dimen.dimens_63_dp) * 2;
    contentViewWidth = mWidth;
    this.removeAllViews();
    this.setGravity(Gravity.CENTER_VERTICAL);
    this.addView(contentView);
    this.addView(deleteView);
    Log.e("onSizeChanged", "onSizeChanged");
}

3 我们事先定义两个变量存储滑动状态

public static class SlideState {
    public static final int OPEN = 0;
    public static final int CLOSE = 1;
}

4.onTouchEvent 则主要是滑动及临界值的处理，leftX 主要变量，每次都会requestLayout 通知更新子元素的位置

case MotionEvent.ACTION_DOWN:
    downX = (int) event.getX();
    break;
case MotionEvent.ACTION_MOVE:
    int moveX = (int) event.getX();
    if (downX - moveX > 10 && mCurrentState == SlideState.CLOSE) {//打开
        if (downX - moveX >= optionViewWidth) {
            leftX = -optionViewWidth;
            mCurrentState = SlideState.OPEN;
            requestLayout();
        } else {
            leftX = moveX - downX;
            requestLayout();
        }
    } else if (moveX - downX > 10 && mCurrentState == SlideState.OPEN) {//关闭
        if (moveX - downX >= optionViewWidth) {
            leftX = 0;
            mCurrentState = SlideState.CLOSE;
            requestLayout();
        } else {
            leftX = -optionViewWidth + (moveX - downX);
            requestLayout();
        }
    }

5.响应单击事件并动画关闭，这里主要处理好动画的移动范围，很明显，在打开状态时，用户感觉是从左到右的动画，运动范围［－optionViewWidth，0］则动画如下

public void closeAnimation() {
    ValueAnimator valueAnimator = ValueAnimator.ofFloat(1, 0);
    valueAnimator.setRepeatCount(0);
    valueAnimator.setDuration(200);
    valueAnimator.setInterpolator(new LinearInterpolator());
    valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator valueAnimator) {
            Float atFloat = (Float) valueAnimator.getAnimatedValue();
            leftX = (int) (-optionViewWidth * atFloat);
            requestLayout();
        }
    });
    valueAnimator.addListener(new Animator.AnimatorListener() {
        @Override
        public void onAnimationStart(Animator animator) {

        }

        @Override
        public void onAnimationEnd(Animator animator) {
            mCurrentState = SlideState.CLOSE;
        }

        @Override
        public void onAnimationCancel(Animator animator) {

        }

        @Override
        public void onAnimationRepeat(Animator animator) {

        }
    });
    valueAnimator.start();
}

6 单击的事件则判断手指离开后的X坐标与按下的坐标直接的距离，我设置的是10个像素，如果大于10，则视为移动onMove，反之，响应单击事件，代码如下所示

case MotionEvent.ACTION_CANCEL:
case MotionEvent.ACTION_UP:
    int upX = (int) event.getX();
    if (mCurrentState == SlideState.OPEN && Math.abs(downX - upX) <= 10 && contentRectF.contains(upX,event.getY())) {
        closeAnimation();
    }
    if (mCurrentState == SlideState.OPEN && Math.abs(downX - upX) <= 10 && deleteRectF.contains(upX,event.getY())) {
        if(upX > optionViewWidth / 2 + (mWidth - optionViewWidth)){//执行删除操作
            if(null != mOnSlideOpenOrCloseListener){
                mOnSlideOpenOrCloseListener.option(1);
            }
            Toast.makeText(getContext(),"删除",Toast.LENGTH_SHORT).show();
        }else {//置顶等其他操作
            if(null != mOnSlideOpenOrCloseListener){
                mOnSlideOpenOrCloseListener.option(0);
            }
            Toast.makeText(getContext(),"置顶",Toast.LENGTH_SHORT).show();
        }
        closeAnimation();
    }
    if (leftX <= -optionViewWidth / 2) {
        leftX = -optionViewWidth;
        mCurrentState = SlideState.OPEN;
        if(null != mOnSlideCompletionListener){
            mOnSlideCompletionListener.swiping();
        }
        requestLayout();
    } else {
        leftX = 0;
        mCurrentState = SlideState.CLOSE;
        requestLayout();
    }
    break;

7 上面至于你点击是哪个区域，我用rectF来记录两个子元素的运动轨迹，如果手指在此范围则可执行相应的操作

if (mCurrentState == SlideState.OPEN && Math.abs(downX - upX) <= 10 && deleteRectF.contains(upX,event.getY())) {
    if(upX > optionViewWidth / 2 + (mWidth - optionViewWidth)){//执行删除操作
        if(null != mOnSlideOpenOrCloseListener){
            mOnSlideOpenOrCloseListener.option(1);
        }
        Toast.makeText(getContext(),"删除",Toast.LENGTH_SHORT).show();
    }else {//置顶等其他操作
        if(null != mOnSlideOpenOrCloseListener){
            mOnSlideOpenOrCloseListener.option(0);
        }
        Toast.makeText(getContext(),"置顶",Toast.LENGTH_SHORT).show();
    }
    closeAnimation();
}

8,在onAttachedToWindow，加载到窗口的时候注意延迟发送requestLayout，让其初次布局并执行onLayout方法。

@Override
protected void onAttachedToWindow() {
    super.onAttachedToWindow();
    Log.e("onAttachedToWindow", "onAttachedToWindow");
    postDelayed(new Runnable() {
        @Override
        public void run() {
            requestLayout();
        }
    }, 100);
}

以上就完成了侧滑的功能，当然也有许多的可扩展性，以后可代码扩展添加自己的contentView 和 optionView，上述的属性集大家可以自己加，自己动起手来，好了，自定义这块东西是挺多，但是我觉得还要更全面，往NDK，React Native，H5方面多看看，毕竟目前来说，技术层出不穷，要收拾好心情，继续的去不断学习，与君共勉吧！

代码片如下：

package com.example.mrboudar.playboy.widgets;

import android.animation.Animator;
import android.animation.ValueAnimator;
import android.app.IntentService;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Rect;
import android.graphics.RectF;
import android.graphics.drawable.GradientDrawable;
import android.support.annotation.Dimension;
import android.support.annotation.Px;
import android.support.v7.widget.LinearLayoutCompat;
import android.util.AttributeSet;
import android.util.Log;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.LinearInterpolator;
import android.widget.LinearLayout;
import android.widget.Toast;

import com.example.mrboudar.playboy.L;
import com.example.mrboudar.playboy.R;
import com.example.mrboudar.playboy.model.GameCard;

/**
 * Created by MrBoudar on 16/9/11.
 * use in xml
 * use in code
 */
public class SlideDeleteView extends LinearLayout {
    private int mWidth;
    private int mHeight;
    private View contentView;
    private View deleteView;
    //首次触摸
    private int downX;
    //位移变量
    private int leftX;
    //侧滑打开状态
    private int mCurrentState = SlideState.CLOSE;

    //qq截图 3倍图的大小
    private static int defaultOptionsWidth = 100 / 3;
    private static int defaultOptionsHeight = 80 / 3;

    //内容的宽度
    private int optionViewWidth;
    //option选项的宽度
    private int contentViewWidth;

    //用来处理单击事件是否在内容区域内
    private RectF contentRectF;
    private RectF deleteRectF;
    private IntentService intentService;


    public SlideDeleteView(Context context) {
        this(context, null);
    }

    public SlideDeleteView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public SlideDeleteView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        //init type arrays
        setOrientation(LinearLayout.HORIZONTAL);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        this.mHeight = h;
        this.mWidth = w;
        contentRectF = new RectF();
        deleteRectF = new RectF();
        deleteView = LayoutInflater.from(getContext()).inflate(R.layout.item_delete_options, null);
        contentView = LayoutInflater.from(getContext()).inflate(R.layout.item_content, null);
        LinearLayout.LayoutParams contentLayoutParams = new LayoutParams(mWidth, (int) getResources().getDimension(R.dimen.dimens_54_dp));
        LinearLayout.LayoutParams deleteLayoutParams = new LayoutParams((int) getResources().getDimension(R.dimen.dimens_63_dp) * 2, (int) getResources().getDimension(R.dimen.dimens_54_dp));
        contentView.setLayoutParams(contentLayoutParams);
        deleteView.setLayoutParams(deleteLayoutParams);
        optionViewWidth = (int) getResources().getDimension(R.dimen.dimens_63_dp) * 2;
        contentViewWidth = mWidth;
        this.removeAllViews();
        this.setGravity(Gravity.CENTER_VERTICAL);
        this.addView(contentView);
        this.addView(deleteView);
        Log.e("onSizeChanged", "onSizeChanged");
    }

    @Override
    protected void onAttachedToWindow() {
        super.onAttachedToWindow();
        Log.e("onAttachedToWindow", "onAttachedToWindow");
        postDelayed(new Runnable() {
            @Override
            public void run() {
                requestLayout();
            }
        }, 100);
    }

    @Override
    protected void onDetachedFromWindow() {
        super.onDetachedFromWindow();
        Log.e("onDetachedFromWindow", "onDetachedFromWindow");
    }

    @Override
    public void onWindowFocusChanged(boolean hasWindowFocus) {
        super.onWindowFocusChanged(hasWindowFocus);
        Log.e("onWindowFocusChanged", "onWindowFocusChanged");

    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        Log.e("onMeasure", "onMeasure");
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        super.onLayout(changed, l, t, r, b);
        contentView.layout(leftX, 0, contentViewWidth + leftX, mHeight);
        deleteView.layout(contentViewWidth + leftX, 0, contentViewWidth + optionViewWidth + leftX, mHeight);
        Log.e("onLayout", "onLayout" + String.valueOf(contentView.getLeft()) + "==" + String.valueOf(deleteView.getLeft()));
        contentRectF.top = contentView.getTop();
        contentRectF.left = contentView.getLeft();
        contentRectF.right = contentView.getRight();
        contentRectF.bottom = contentView.getBottom();
        if (mCurrentState == SlideState.OPEN) {
            //打开状态获取此时内容和删除区域的rectF,用户再次单击时获取是否在内容区域内,如果在,则执行关闭动画,反之,则是删除区域的操作
            deleteRectF.left = deleteView.getLeft();
            deleteRectF.right = deleteView.getRight();
            deleteRectF.bottom = deleteView.getBottom();
            deleteRectF.top = deleteView.getTop();
        }
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {

        int action = event.getActionMasked();
        switch (action) {
            case MotionEvent.ACTION_DOWN:
                downX = (int) event.getX();
                break;
            case MotionEvent.ACTION_MOVE:
                int moveX = (int) event.getX();
                if (downX - moveX > 10 && mCurrentState == SlideState.CLOSE) {//打开
                    if (downX - moveX >= optionViewWidth) {
                        leftX = -optionViewWidth;
                        callbackOpen();
                    } else {
                        leftX = moveX - downX;
                        requestLayout();
                    }
                } else if (moveX - downX > 10 && mCurrentState == SlideState.OPEN) {//关闭
                    if (moveX - downX >= optionViewWidth) {
                        leftX = 0;
                        callbackClose();
                    } else {
                        leftX = -optionViewWidth + (moveX - downX);
                        requestLayout();
                    }
                }
               break;
            case MotionEvent.ACTION_CANCEL:
            case MotionEvent.ACTION_UP:
                int upX = (int) event.getX();
                if (mCurrentState == SlideState.OPEN && Math.abs(downX - upX) <= 10 && contentRectF.contains(upX, event.getY())) {
                    closeAnimation();
                }
                if(mCurrentState == SlideState.CLOSE && Math.abs(downX - upX) <= 10 && contentRectF.contains(upX, event.getY())){
                    //响应单击事件
                    if (null != mOnSlideOpenOrCloseListener) {
                        mOnSlideOpenOrCloseListener.option(2);
                    }
                }
                if (mCurrentState == SlideState.OPEN && Math.abs(downX - upX) <= 10 && deleteRectF.contains(upX, event.getY())) {
                    if (upX > optionViewWidth / 2 + (mWidth - optionViewWidth)) {//执行删除操作
                        if (null != mOnSlideOpenOrCloseListener) {
                            mOnSlideOpenOrCloseListener.option(1);
                        }
                        Toast.makeText(getContext(), "删除", Toast.LENGTH_SHORT).show();
                    } else {//置顶等其他操作
                        if (null != mOnSlideOpenOrCloseListener) {
                            mOnSlideOpenOrCloseListener.option(0);
                        }
                        Toast.makeText(getContext(), "置顶", Toast.LENGTH_SHORT).show();
                    }
                    closeAnimation();
                }
                if (leftX <= -optionViewWidth / 2) {
                    leftX = -optionViewWidth;
                    callbackOpen();
                } else {
                    leftX = 0;
                    callbackClose();
                }
               break;
        }
        return true;
    }

    public void callbackOpen() {
        mCurrentState = SlideState.OPEN;
        if (null != mOnSlideCompletionListener) {
            mOnSlideCompletionListener.open();
        }
        requestLayout();
    }

    public void callbackClose() {
        mCurrentState = SlideState.CLOSE;
        if (null != mOnSlideCompletionListener) {
            mOnSlideCompletionListener.close();
        }
        requestLayout();
    }

    public static class SlideState {
        public static final int OPEN = 0;
        public static final int CLOSE = 1;
    }

    private onSlideOpenOrCloseListener mOnSlideOpenOrCloseListener;

    public interface onSlideOpenOrCloseListener {
        //0 置顶 1删除 2 跳转
        public void option(int state);
    }

    public void setOnSlideOpenOrCloseListener(onSlideOpenOrCloseListener onSlideOpenOrCloseListener) {
        this.mOnSlideOpenOrCloseListener = onSlideOpenOrCloseListener;
    }

    public int getState() {
        return mCurrentState;
    }

    private onSlideCompletionListener mOnSlideCompletionListener;

    public interface onSlideCompletionListener {
        public void open();

        public void close();
    }

    public void setOnSlideCompltetionListener(onSlideCompletionListener onSlideCompltetionListener) {
        this.mOnSlideCompletionListener = onSlideCompltetionListener;
    }

    public void closeAnimation() {
        ValueAnimator valueAnimator = ValueAnimator.ofFloat(1, 0);
        valueAnimator.setRepeatCount(0);
        valueAnimator.setDuration(200);
        valueAnimator.setInterpolator(new LinearInterpolator());
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                Float atFloat = (Float) valueAnimator.getAnimatedValue();
                leftX = (int) (-optionViewWidth * atFloat);
                requestLayout();
            }
        });
        valueAnimator.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animator) {
            }

            @Override
            public void onAnimationEnd(Animator animator) {
                mCurrentState = SlideState.CLOSE;
            }

            @Override
            public void onAnimationCancel(Animator animator) {

            }

            @Override
            public void onAnimationRepeat(Animator animator) {

            }
        });
        valueAnimator.start();
    }
}

布丁西西

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
Android仿QQ侧滑删除实现

效果图如下首先可以分析下，整行继承自线性布局，分为内容区域ContentRect 和操作区域（即删除，置顶的操作）。则整个线性布局下有两个child：一个内容View，一个可操作view，可以简单的理解为根据用户的手势来向左，向右滑动子元素，每次都requestLayout 产生的位移来重新布局子元素的位置，ok原理就是这样，无非就处理内容区域和操作区域的临界点，可以看到，当打开
复制链接

扫一扫

专栏目录