android 单击图像按钮时使用动画交换两个视图

Question

我看过stack over flow里的题，连我都试过了，

Android Translate Animation like Swapping Two Views

但我的方案没有任何效果，我想在单击交换图像按钮时交换 swap_above 线性布局和 swap_below 线性布局。如果可能的话，我也想在交换视图时为交换图像按钮应用动画。

谢谢，

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <LinearLayout
                android:id="@+id/from"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:gravity="center_vertical"
                android:orientation="vertical"
                android:paddingBottom="25dp"
                android:paddingLeft="25dp"
                android:paddingRight="25dp"
                android:paddingTop="15dp">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="From"
                    android:textStyle="bold" />

                <LinearLayout
                    android:id="@+id/swap_above"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">

                    <LinearLayout
                        android:id="@+id/from_layout"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="20dp"
                        android:orientation="horizontal">

                        <TextView
                            android:id="@+id/from_text"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:drawableLeft="@drawable/seek_thumb_pressed"
                            android:drawablePadding="5dp"
                            android:text="BANGALORE"
                            android:textSize="20dp" />

                        <TextView
                            android:id="@+id/from_place"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:gravity="center_vertical"
                            android:text=" (BLR)"
                            android:textSize="15dp" />
                    </LinearLayout>
                </LinearLayout>
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:gravity="center_vertical"
                android:orientation="horizontal">

                <View
                    android:layout_width="0dp"
                    android:layout_height="0.5dp"
                    android:layout_marginLeft="20dp"
                    android:layout_weight="1"
                    android:background="#FFF" />

                <View
                    android:layout_width="60dp"
                    android:layout_height="0dp" />
            </LinearLayout>

            <LinearLayout
                android:id="@+id/to"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:gravity="center_vertical"
                android:orientation="vertical"
                android:paddingBottom="25dp"
                android:paddingLeft="25dp"
                android:paddingRight="25dp"
                android:paddingTop="15dp">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="To"
                    android:textStyle="bold" />

                <LinearLayout
                    android:id="@+id/swap_below"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">

                    <LinearLayout
                        android:id="@+id/to_layout"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="20dp"
                        android:orientation="horizontal">

                        <TextView
                            android:id="@+id/to_text"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:drawableLeft="@drawable/seek_thumb_normal"
                            android:drawablePadding="5dp"
                            android:text="Hyderabad"
                            android:textSize="20dp" />

                        <TextView
                            android:id="@+id/to_place"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:gravity="center_vertical"
                            android:text=" (HYD)"
                            android:textSize="15dp" />
                    </LinearLayout>
                </LinearLayout>
            </LinearLayout>
        </LinearLayout>

        <ImageButton
            android:id="@+id/swap"
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:layout_gravity="center_vertical|end"
            android:background="?android:attr/selectableItemBackground"
            android:src="@drawable/seek_thumb_disabled" />
    </FrameLayout>
</LinearLayout>

Answer 1

首先 - 为每个可能阻止动画的目标视图的父级设置以下 xml 属性：

    android:clipChildren="false"
    android:clipToPadding="false"

您需要在 3 个地方设置此属性。
在此处阅读有关 clipChildren 和 clipToPadding 的更多信息 - http://developer.android.com/reference/android/view/ViewGroup.html#attr_android:clipChildren http://developer.android.com/reference/android/view/ViewGroup.html#attr_android:clipToPadding

如果你的 minSDK >=12
将其用于交换动画：

    findViewById(R.id.swap).setOnClickListener(new View.OnClickListener() {
        boolean isAnimating;
        @Override
        public void onClick(View v) {
            if(isAnimating)
                return;
            isAnimating=true;

            View v1 = findViewById(R.id.swap_above);
            View v2 = findViewById(R.id.swap_below);

           float x1, y1, x2, y2;
           x1 = getRelativeX(v1);//Use v1.getX() if v1 & v2 have same parent
           y1 = getRelativeY(v1);//Use v1.getY() if v1 & v2 have same parent
           x2 = getRelativeX(v2);//Use v2.getX() if v1 & v2 have same parent
           y2 = getRelativeY(v2);//Use v2.getY() if v1 & v2 have same parent

            float x_displacement = (x2-x1);
            float y_displacement = (y2-y1);

            v1.animate().xBy(x_displacement).yBy(y_displacement);
            v2.animate().xBy(-x_displacement).yBy(-y_displacement);
            long anim_duration = v1.animate().getDuration();

            //Wait till animation is over to set isAnimating to false
            //take 10 ms as buffer time to ensure proper functioning
            //If you remove this timer & isAnimating variable, the animation will function improperly when user rapidly clicks on swap button
            new CountDownTimer(anim_duration + 10, anim_duration + 10) {
                @Override
                public void onTick(long millisUntilFinished) {

                }

                @Override
                public void onFinish() {
                    isAnimating=false;
                }
            }.start();

        }

        //returns x-pos relative to root layout
        private float getRelativeX(View myView) {
            if (myView.getParent() == myView.getRootView())
                return myView.getX();
            else
                return myView.getX() + getRelativeX((View) myView.getParent());
        }

        //returns y-pos relative to root layout
        private float getRelativeY(View myView) {
            if (myView.getParent() == myView.getRootView())
                return myView.getY();
            else
                return myView.getY() + getRelativeY((View) myView.getParent());
        }
    });

在此处阅读有关 View 属性动画师的信息 - http://developer.android.com/reference/android/view/ViewPropertyAnimator.html http://developer.android.com/guide/topics/graphics/prop-animation.html

此外，您应该尽量减少布局中的视图数。在此处阅读有关布局优化的信息 - http://developer.android.com/training/improving-layouts/optimizing-layout.html

android 单击图像按钮时使用动画交换两个视图

android swapping two views using animation when click on imagebutton

animation

android

swap

rotation