java - 如何使卡片 View 的移动更加流畅？

Question

我使用框架布局来保存每个卡片 View ，并从中启动每个运动动画(从左到右)。但我注意到这个 Action 看起来并不顺利。

我的代码如下，您建议做什么，以提高卡片移动的整体流畅度。谢谢

MyFrameLayout:

public class MyFrameLayout extends FrameLayout {

    private static int mWidth = 500;
    MyFrameLayout touchFrameLayout;

    public MyFrameLayout(Context context) {
        super(context);
        initialize(context);
    }

    public MyFrameLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        initialize(context);
    }

    public MyFrameLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initialize(context);
    }

    private void initialize(Context context) {
        setOnTouchListener(mTouchListener);
        touchFrameLayout = this;

    }

    private float mDisplacementX;
    // private float mLastMoveX;
    private float mDisplacementY;
    private float mInitialTx;
    private boolean mTracking;
    private OnTouchListener mTouchListener = new OnTouchListener() {

        @Override
        public boolean onTouch(View v, MotionEvent event) {
            mWidth = (int) touchFrameLayout.getLayoutParams().width;
            switch (event.getActionMasked()) {
                case MotionEvent.ACTION_DOWN:

                    mDisplacementX = event.getRawX();
                    mDisplacementY = event.getRawY();

                    mInitialTx = getTranslationX();

                    return true;

                case MotionEvent.ACTION_MOVE:
                    // get the delta distance in X and Y direction
                    float deltaX = event.getRawX() - mDisplacementX;
                    float deltaY = event.getRawY() - mDisplacementY;
                    // updatePressedState(false);

                    // set the touch and cancel event
                    if ((Math.abs(deltaX) > ViewConfiguration.get(getContext())
                            .getScaledTouchSlop() * 2 && Math.abs(deltaY) < Math
                            .abs(deltaX) / 2)
                            || mTracking) {

                        mTracking = true;

                        if (getTranslationX() <= mWidth / 2
                                && getTranslationX() >= -(mWidth / 2)) {

                            setTranslationX(mInitialTx + deltaX);
                            return true;
                        }
                    }

                    break;

                case MotionEvent.ACTION_UP:

                    if (mTracking) {
                        mTracking = false;
                        float currentTranslateX = getTranslationX();

                        if (currentTranslateX > (mWidth/10)) {
                            rightSwipe();
                        } else if (currentTranslateX < -(mWidth*10)) {
                            leftSwipe();
                        }

                        // comment this line if you don't want your frame layout to
                        // take its original position after releasing the touch
                        setTranslationX(0);
                        return true;
                    } else {
                        // handle click event
                        setTranslationX(0);
                    }
                    break;
            }
            return false;
        }
    };

     private void deleteCard() {
            ...
    }


    private void rightSwipe() {
        Toast.makeText(this.getContext(), "Swipe to the right",
                Toast.LENGTH_SHORT).show();
     DeleteCard();
    }

    private void leftSwipe() {
        Toast.makeText(this.getContext(), "Swipe to the left",
                Toast.LENGTH_SHORT).show();
        DeleteCard();
    }
}

XML:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

            <com.example.testing.android.layout.MyFrameLayout
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

    <android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:id="@+id/taskViewContainer"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        app:cardElevation="8dp"
        app:cardPreventCornerOverlap="false"
        card_view:cardCornerRadius="8dp">

           ......

            </android.support.v7.widget.CardView>
        </com.example.testing.android.layout.MyFrameLayout>



</RelativeLayout>

Answer 1

为了让 CardView 在 FrameLayout 中移动更顺畅，您将使用 animation package使您的 View 或其属性动起来。有很多方法可以实现这一目标，但Property Animation是迄今为止最简单的方法。它肯定符合您的需求，因为您提到您感兴趣的运动是从左到右运动。您可以为 CardView 设置动画，以更平滑地移动到 y 轴。

仔细阅读this文档以便执行您想要的操作。

编辑:可能LayoutTransition对你有用。查看this视频看看它是关于什么的。简而言之，当您在 ViewGroup 中添加/删除 View 时，发生的过渡/尺寸比例可以进行动画处理。