java - 如何在带有 Java 的 Android 中将 ConstraintSet 用于动画？

Question

我发现有一种使用 ConstraintSet 为 ConstrainLayout Activity 创建动画的快速方法。比对 RelativeLayout

使用 TransitionManager 更快

ConstraintSet 为一个 Activity 使用两个 xml 文件。一个用于第一个位置，下一个用于目的地。

我想创建这样的东西:

https://media.giphy.com/media/2UwXdWEoLWe9iQMFIY/giphy.gif

但是没有明确的说明说明如何在Java中使用它。任何做过这件事的人都可以向我展示源代码或链接到类似的帖子。

感谢阅读这篇文章。

Answer 1

这可以通过 ConstraintSet 实现。他们的关键是两个有两个布局，一个布局有屏幕的 ui 元素，另一个有屏幕上的元素。现在，您可以将 TransitionManager 与您选择的插值器和持续时间一起使用，并为布局更改设置动画。

activity_main.xml

 <?xml version="1.0" encoding="utf-8"?>
    <android.support.constraint.ConstraintLayout
        android:id="@+id/constraint"
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#181818"
        tools:context=".MainActivity">

        <ImageView
            android:id="@+id/backgroundImage"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:src="@drawable/mugello"
            android:scaleType="centerCrop"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="JUNE 3, 2018"
            app:layout_constraintRight_toRightOf="@+id/title"
            app:layout_constraintBottom_toBottomOf="@+id/title"
            android:textSize="12sp"
            android:background="#d3d3d3"
            android:paddingStart="16dp"
            android:paddingEnd="16dp"
            android:paddingTop="3dp"
            android:paddingBottom="3dp"/>

        <TextView
            android:id="@+id/title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="48dp"
            android:background="#F44336"
            android:paddingBottom="8dp"
            android:paddingEnd="24dp"
            android:paddingStart="24dp"
            android:paddingTop="8dp"
            android:text="Mugello Circuit"
            android:textColor="#FFFF"
            android:textSize="45sp"
            app:layout_constraintRight_toLeftOf="@+id/backgroundImage"
            app:layout_constraintTop_toTopOf="parent" />

        <View
            android:id="@+id/fadeBackgroudView"
            android:layout_width="wrap_content"
            android:layout_height="90dp"
            android:foreground="@drawable/gradient_variant"
            app:layout_constraintBottom_toTopOf="@+id/description" />

        <TextView
            android:id="@+id/tap"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="12dp"
            android:layout_marginEnd="8dp"
            android:layout_marginStart="8dp"
            android:text="Tap for info"
            android:textSize="15sp"
            android:textColor="#ffffff"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent" />

        <TextView
            android:id="@+id/description"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="The Mugello is a historic region and valley in northern Tuscany, in Italy. It is located to the north of the city of Florence and consists of the northernmost portion of the Metropolitan City of Florence.  It is connected to the separate Santerno river valley by the Futa Pass."
            android:textSize="22sp"
            android:textColor="#FFFF"
            android:background="#181818"
            android:gravity="center"
            android:paddingStart="8dp"
            android:paddingEnd="8dp"
            android:paddingBottom="8dp"
            app:layout_constraintTop_toBottomOf="@+id/backgroundImage"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"/>

    </android.support.constraint.ConstraintLayout>

activity_main_detail.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/backgroundImage"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:scaleType="centerCrop"
        android:src="@drawable/mugello"
        app:layout_constraintBottom_toTopOf="@+id/description"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="48dp"
        android:background="#F44336"
        android:paddingBottom="8dp"
        android:paddingEnd="24dp"
        android:paddingStart="24dp"
        android:paddingTop="8dp"
        android:text="Mugello Circuit"
        android:textColor="#FFFF"
        android:textSize="45sp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="JUNE 3, 2018"
        app:layout_constraintRight_toRightOf="@+id/title"
        app:layout_constraintTop_toBottomOf="@+id/title"
        android:textSize="12sp"
        android:background="#d3d3d3"
        android:paddingStart="16dp"
        android:paddingEnd="16dp"
        android:paddingTop="3dp"
        android:paddingBottom="3dp"/>

    <View
        android:id="@+id/fadeBackgroudView"
        android:layout_width="wrap_content"
        android:layout_height="30dp"
        android:foreground="@drawable/gradient"
        app:layout_constraintBottom_toTopOf="@+id/description" />

    <TextView
        android:id="@+id/tap"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:text="Tap for info"
        android:textSize="15sp"
        android:textColor="#ffffff"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <TextView
        android:id="@+id/description"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="The Mugello is a historic region and valley in northern Tuscany, in Italy. It is located to the north of the city of Florence and consists of the northernmost portion of the Metropolitan City of Florence.  It is connected to the separate Santerno river valley by the Futa Pass."
        android:textSize="22sp"
        android:textColor="#FFFF"
        android:gravity="center"
        android:background="#181818"
        android:paddingStart="8dp"
        android:paddingEnd="8dp"
        android:paddingBottom="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>


</android.support.constraint.ConstraintLayout>

主 Activity .java

public class MainActivity extends AppCompatActivity {

    private boolean show = false;

    private ImageView backgroundImage;
    private ConstraintLayout constraint;
    private ConstraintSet constraintSet = new ConstraintSet();

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        constraint = findViewById(R.id.constraint);
        backgroundImage = findViewById(R.id.backgroundImage);
        backgroundImage.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if(show)
                    hideComponents(); // if the animation is shown, we hide back the views
                else
                    showComponents() ;// if the animation is NOT shown, we animate the views
            }

        });

    }

    private void showComponents(){
        show = true;

        constraintSet.clone(this, R.layout.activity_main_detail);

        Transition transition = new ChangeBounds();
        transition.setInterpolator(new AnticipateOvershootInterpolator(1.0f));
        transition.setDuration(1000);

        TransitionManager.beginDelayedTransition(constraint, transition);
        constraintSet.applyTo(constraint);
    }

    private void hideComponents(){
        show = false;

        constraintSet.clone(this, R.layout.activity_main);

        Transition transition = new ChangeBounds();
        transition.setInterpolator(new AnticipateOvershootInterpolator(1.0f));
        transition.setDuration(1000);


        TransitionManager.beginDelayedTransition(constraint, transition);
        constraintSet.applyTo(constraint);
    }
}

这是关于 ConstraintLayout 的幻灯片分享 https://speakerdeck.com/camaelon/advanced-animations-and-constraintlayout