屁话不多说，先上个效果图先

GIF动画录制工具20180317161745.gif

将此控件放到RecyclerView中，并自定义LayoutManager可以有这样的效果

GIF动画录制工具20180317162426.gif

github：https://github.com/lewis-v/YCardLayout

使用方式

添加依赖

Add it in your root build.gradle at the end of repositories:

    allprojects {
        repositories {
            ...
            maven { url 'https://jitpack.io' }
        }
    }

Add the dependency

    dependencies {
            compile 'com.github.lewis-v:YCardLayout:1.0.1'
    }

在布局中使用

  <com.lewis_v.ycardlayoutlib.YCardLayout
        android:id="@+id/fl"
        android:layout_marginTop="20dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <ImageView
            android:id="@+id/img"
            android:layout_margin="5dp"
            android:src="@mipmap/ic_launcher"
            android:layout_width="200dp"
            android:layout_height="200dp" />
    </com.lewis_v.ycardlayoutlib.YCardLayout>

代码中进行操作

控件中已有默认的配合参数,所以可以直接使用,不进行配置

yCardLayout = findViewById(R.id.fl);
        //yCardLayout.setMaxWidth(yCardLayout.getWidth());//设置最大移动距离
        //yCardLayout.setMoveRotation(45);//最大旋转角度
        //yCardLayout.reset();//重置数据

        img = findViewById(R.id.img);
        img.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                yCardLayout.removeToLeft(null);
                Toast.makeText(MainActivity.this,"点击11",Toast.LENGTH_SHORT).show();
            }
        });

实现步骤

自定义控件继承于Framelayout及初始化

public class YCardLayout extends FrameLayout {
public void init(Context context){
        setClickable(true);
        setEnabled(true);
        minLength = ViewConfiguration.get(context).getScaledTouchSlop();//获取设备最小滑动距离
        post(new Runnable() {
            @Override
            public void run() {
                maxWidth = getWidth();//默认移动最大距离为控件的宽度,这里的参数用于旋转角度的变化做参照
                firstPoint = new Point((int) getX(),(int)getY());//获取初始位置
                isInit = true;
            }
        });
    }
}

实现移动的动画,还用移动时的旋转

 @Override
    public boolean onTouchEvent(MotionEvent event) {
        if (!isRemove && moveAble && isInit && !isRunAnim) {
            switch (event.getAction()) {
                case MotionEvent.ACTION_DOWN:
                    //获取点击时的数据,并存起来
                    cacheX = event.getRawX();
                    cacheY = event.getRawY();
                    downX = event.getRawX();
                    downY = event.getRawY();
                    if (firstPoint == null) {//这个正常情况不会执行,在这里只是以防万一
                        firstPoint = new Point((int) getX(), (int) getY());
                    }
                    return true;
                case MotionEvent.ACTION_MOVE:
                    if ((Math.abs(downX-event.getRawX()) > minLength || Math.abs(downY-event.getRawY()) > minLength)) {//只有大于最小滑动距离才算移动了
                        float moveX = event.getRawX();
                        float moveY = event.getRawY();

                        if (moveY > 0) {
                            setY(getY() + (moveY - cacheY));//移动Y轴
                        }
                        if (moveX > 0) {
                            setX(getX() + (moveX - cacheX));//移动X轴
                            float moveLen = (moveX - downX) / maxWidth;
                            int moveProgress = (int) ((moveLen) * 100);//移动的距离占整个控件的比例moveProgress%
                            setRotation((moveLen) * 45f);//控制控件的旋转
                            if (onYCardMoveListener != null) {
                                onYCardMoveListener.onMove(this, moveProgress);//触发移动的监听器
                            }
                        }
                        cacheX = moveX;
                        cacheY = moveY;
                    }
                    return false;
                case MotionEvent.ACTION_UP:
                    if ((Math.abs(downX-event.getRawX()) > minLength || Math.abs(downY-event.getRawY()) > minLength)) {//移动了才截获这个事件
                        int moveEndProgress = (int) (((event.getRawX() - downX) / maxWidth) * 100);
                        if (onYCardMoveListener != null) {
                            if (onYCardMoveListener.onMoveEnd(this, moveEndProgress)) {//移动结束事件
                                return true;
                            }
                        }
                        animToReBack(this, firstPoint);//复位
                        return true;
                    }
                    break;
            }
        }
        return false;
    }

加入移动后的复位动画

上面的代码调用了animToReBack(this, firstPoint);来进行复位

/**
     * 复位动画
     * @param view
     * @param point 复位的位置
     */
    public void animToReBack(View view,Point point){
        AnimatorSet animatorSet = getAnimToMove(view,point,0,getAlpha());//获取动画
        isRunAnim = true;//动画正在运行的标记
        animatorSet.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {

            }

            @Override
            public void onAnimationEnd(Animator animation) {
                isRunAnim = false;
            }

            @Override
            public void onAnimationCancel(Animator animation) {
                isRunAnim = false;
            }

            @Override
            public void onAnimationRepeat(Animator animation) {

            }
        });
        animatorSet.start();//开始复位动画
    }

控件里的所有动画都通过getAnimToMove来获取,getAnimToMove的代码为

 /**
     * 移动动画
     * @param view
     * @param point
     * @param rotation
     */
    public AnimatorSet getAnimToMove(View view, Point point, float rotation,float alpha){
        ObjectAnimator objectAnimatorX = ObjectAnimator.ofFloat(view,"translationX",point.x);
        ObjectAnimator objectAnimatorY = ObjectAnimator.ofFloat(view,"translationY",point.y);
        ObjectAnimator objectAnimatorR = ObjectAnimator.ofFloat(view,"rotation",rotation);
        ObjectAnimator objectAnimatorA = ObjectAnimator.ofFloat(view,"alpha",alpha);
        AnimatorSet animatorSet = new AnimatorSet();
        animatorSet.playTogether(objectAnimatorR,objectAnimatorX,objectAnimatorY,objectAnimatorA);
        return animatorSet;
    }

到这里,控件就可以移动和复位了,到了删除动画的实现了

删除动画

删除动画有左边的右边删除,删除的移动轨迹,需要与滑动方向相关,这样看起来的效果才比较好
这里写了两个方法,供删除时调用

/**
     *  向左移除控件
     * @param removeAnimListener
     */
    public void removeToLeft(RemoveAnimListener removeAnimListener){
        remove(true,removeAnimListener);
    }

    /**
     * 向右移除控件
     * @param removeAnimListener
     */
    public void removeToRight(RemoveAnimListener removeAnimListener){
        remove(false,removeAnimListener);
    }

其中remove方法实现为

/**
     * 移除控件并notify
     * @param isLeft 是否是向左
     * @param removeAnimListener
     */
    public void remove(boolean isLeft, final RemoveAnimListener removeAnimListener){
        isRemove = true;
        final Point point = calculateEndPoint(this,this.firstPoint,isLeft);//计算终点坐标
        AnimatorSet animatorSet = getReMoveAnim(this,point,getRemoveRotation(this,this.firstPoint,isLeft));//获取移除动画
        animatorSet.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {
                if (removeAnimListener != null){
                    removeAnimListener.OnAnimStart(YCardLayout.this);
                }
            }

            @Override
            public void onAnimationEnd(Animator animation) {
                if (removeAnimListener != null){
                    removeAnimListener.OnAnimEnd(YCardLayout.this);
                }
            }

            @Override
            public void onAnimationCancel(Animator animation) {
                Log.e("cancel","");
                reset();
                if (removeAnimListener != null){
                    removeAnimListener.OnAnimCancel(YCardLayout.this);
                }
            }

            @Override
            public void onAnimationRepeat(Animator animation) {

            }
        });
        animatorSet.start();
    }

在动画开始/结束/取消懂提供了回调,当然不需要时传入null就行了
其中调用计算终点坐标的方法,这个不好解释,看看计算过程,详细的就不说了

 /**
     * 计算移除动画终点
     * @param view
     * @param point
     * @param isLeft
     * @return
     */
    public Point calculateEndPoint(View view, Point point, boolean isLeft){
        Point endPoint = new Point();
        if (isLeft) {
            endPoint.x = point.x - (int) (view.getWidth() * 1.5);
        }else {
            endPoint.x = point.x + (int) (view.getWidth() * 1.5);
        }
         if (Math.abs(view.getX() - point.x) < minLength &&Math.abs (view.getY()-point.y) < minLength){//还在原来位置
            endPoint.y = point.y + (int)(view.getHeight()*1.5);
        }else {
            int endY = getEndY(view,point);
            if (isLeft) {
                endPoint.y = (int) view.getY() - endY;
            }else {
                endPoint.y = (int)view.getY() + endY;
            }
        }
        return endPoint;
    }

    /**
     * 获取终点Y轴与初始位置Y轴的距离
     * @param view
     * @param point
     * @return
     */
    public int getEndY(View view,Point point){
        return (int) ((point.y-view.getY())/(point.x-view.getX())*1.5*view.getWidth());
    }

而移除的动画,内部其实也是调用了getAnimToMove(),只是传入的旋转度为当前的旋转度,且透明度变化结束为0

到这里控件已经可以有移除动画了,但是会发现控件内的子控件的点击事件没有了,所以这里需要解决点击事件的冲突

解决点击事件冲突

需要在onInterceptTouchEvent中,对事件进行分发处理,在down和up不截获,在move中选择性截获

 @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        boolean intercepted = super.onInterceptTouchEvent(ev);
        if (!isInit || isRunAnim){
            return false;
        }
        switch (ev.getAction()){
            case MotionEvent.ACTION_DOWN:
                downX = ev.getRawX();
                downY = ev.getRawY();
                cacheX = ev.getRawX();
                cacheY = ev.getRawY();
                if (firstPoint == null){
                    firstPoint = new Point((int) getX(),(int) getY());
                }
                intercepted = false;
                break;
            case MotionEvent.ACTION_MOVE:
                if ((Math.abs(downX-ev.getRawX()) > minLength || Math.abs(downY-ev.getRawY()) > minLength) && !isRemove && moveAble){
                    intercepted = true;
                }else {
                    intercepted = false;
                }
                break;
            case MotionEvent.ACTION_UP:
                intercepted = false;
                break;
        }
        return intercepted;
    }

到这里YCardLayout就基本结束了,接下来就是与RecyclerView的结合了,结合之前要加个重置方法,用于重置控件数据,因为RecyclerView有复用的功能,不重置会被其他本控件影响

 /**
     * 重置数据
     */
    public void reset(){
        if (firstPoint != null) {
            setX(firstPoint.x);
            setY(firstPoint.y);
        }
        isRemove = false;
        moveAble = true;
        setRotation(0);
        setAlpha(1);
    }

结合RecyclerView

自定义LayoutManager

当然这里的Manager只是做示范作用,实际中可能会出现问题

public class YCardLayoutManager extends RecyclerView.LayoutManager {
    public static final String TAG = "YCardLayoutManager";


    @Override
    public RecyclerView.LayoutParams generateDefaultLayoutParams() {
        return new RecyclerView.LayoutParams(RecyclerView.LayoutParams.WRAP_CONTENT,
                RecyclerView.LayoutParams.WRAP_CONTENT);
    }



    @Override
    public void onLayoutChildren(RecyclerView.Recycler recycler, RecyclerView.State state) {
        if (getItemCount() == 0) {//没有Item，界面空着吧
            detachAndScrapAttachedViews(recycler);
            return;
        }
        if (getChildCount() == 0 && state.isPreLayout()) {//state.isPreLayout()是支持动画的
            return;
        }
        detachAndScrapAttachedViews(recycler);
        setChildren(recycler);
    }

    public void setChildren(RecyclerView.Recycler recycler){
        for (int i = getItemCount()-1; i >= 0; i--) {
            View view = recycler.getViewForPosition(i);
            addView(view);
            measureChildWithMargins(view,0,0);
            calculateItemDecorationsForChild(view,new Rect());
            int width = getDecoratedMeasurementHorizontal(view);
            int height = getDecoratedMeasurementVertical(view);
            layoutDecoratedWithMargins(view,0,0,width,height);
        }
    }

    /**
     * 获取某个childView在水平方向所占的空间
     *
     * @param view
     * @return
     */
    public int getDecoratedMeasurementHorizontal(View view) {
        final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams)
                view.getLayoutParams();
        return getPaddingRight()+getPaddingLeft()+getDecoratedMeasuredWidth(view) + params.leftMargin
                + params.rightMargin;
    }

    /**
     * 获取某个childView在竖直方向所占的空间
     *
     * @param view
     * @return
     */
    public int getDecoratedMeasurementVertical(View view) {
        final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams)
                view.getLayoutParams();
        return getPaddingTop()+getPaddingBottom()+getDecoratedMeasuredHeight(view) + params.topMargin
                + params.bottomMargin;
    }
}

然后在RecyclerView中使用YCardLayoutManager加上YCardLayout就能有最开始第二个动图那样的效果,但这里主要是自定义YCardLayout,在与RecyclerView使用的时候还需要对YCardLayoutManager进行相应的修改.目前使用时,在添加数据时需要使用notifyDataSetChanged()来进行刷新,删除时需要使用notifyItemRemoved(position)和notifyDataSetChanged()一起刷新,不然可能出现问题.

The End

在自定义这个控件中,主要是解决了点击事件的冲突,移除动画的终点计算,还有其他的冲突问题,这里的与RecyclerView的结合使用,其中使用的LayoutManager还有一些问题,将在完善后再加入到GitHub中.最后推荐本书《Android开发艺术探索》,这书还是挺不错的,这里解决点击事件冲突的也是在此书中看来的...