Question

我想在ConstraintLayout中淡出一组视图。使用LinearLayout，我会将视图封装在父LinearLayout中淡出并为父级设置动画。这也是ConstraintLayout的首选方法吗？感觉这会破坏ConstraintLayout的目的

Answer 1

一种方法是利用ConstraintSets。

从布局中视图的原始约束开始，创建第二组约束，然后通过“应用”它们转换到新约束。

在此示例中，第二个约束集派生自几乎相同的布局文件。唯一的区别是ImageViews设置为visibility =“invisible”。

<强> MainActivity.java

public class MainActivity extends AppCompatActivity {

    private ConstraintLayout constraintLayout;
    private ConstraintSet originalConstraints = new ConstraintSet();
    private ConstraintSet invisibleImageConstraints = new ConstraintSet();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        constraintLayout = (ConstraintLayout)findViewById(R.id.activity_main);
        originalConstraints.clone(this, R.layout.activity_main);
        invisibleImageConstraints.clone(this, R.layout.activity_main_invisible_images);
    }

    public void fadeOut(View v) {
        TransitionManager.beginDelayedTransition(constraintLayout);
        invisibleImageConstraints.applyTo(constraintLayout);
    }
}

<强> activity_main.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:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.albertcbraun.constraintlayouttest.MainActivity">


    <ImageView
        android:id="@+id/image_view_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:srcCompat="@android:drawable/btn_star_big_on"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginEnd="8dp"
        app:layout_constraintStart_toStartOf="parent"
        android:layout_marginStart="8dp"
        android:contentDescription="@string/todo"
        android:layout_marginBottom="8dp"
        android:layout_marginTop="8dp"
        app:layout_constraintTop_toBottomOf="@+id/image_view_2"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintBottom_toTopOf="@+id/button" />

    <ImageView
        android:id="@+id/image_view_2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:srcCompat="@android:drawable/btn_star_big_on"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginEnd="8dp"
        app:layout_constraintStart_toStartOf="parent"
        android:layout_marginStart="8dp"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="0dp"
        android:layout_marginBottom="8dp"
        app:layout_constraintBottom_toTopOf="@+id/image_view_1"
        app:layout_constraintVertical_bias="0.481"
        android:contentDescription="@string/todo"
        app:layout_constraintHorizontal_bias="0.5" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:onClick="fadeOut"
        android:text="@string/fade_out"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />
</android.support.constraint.ConstraintLayout>

<强> activity_main_invisible_images.xml

<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:id="@+id/activity_main_invisible_images"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.albertcbraun.constraintlayouttest.MainActivity">


    <ImageView
        android:id="@+id/image_view_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="invisible"
        app:srcCompat="@android:drawable/btn_star_big_on"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginEnd="8dp"
        app:layout_constraintStart_toStartOf="parent"
        android:layout_marginStart="8dp"
        android:contentDescription="@string/todo"
        android:layout_marginBottom="8dp"
        android:layout_marginTop="8dp"
        app:layout_constraintTop_toBottomOf="@+id/image_view_2"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintBottom_toTopOf="@+id/button" />

    <ImageView
        android:id="@+id/image_view_2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="invisible"
        app:srcCompat="@android:drawable/btn_star_big_on"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginEnd="8dp"
        app:layout_constraintStart_toStartOf="parent"
        android:layout_marginStart="8dp"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="0dp"
        android:layout_marginBottom="8dp"
        app:layout_constraintBottom_toTopOf="@+id/image_view_1"
        app:layout_constraintVertical_bias="0.481"
        android:contentDescription="@string/todo"
        app:layout_constraintHorizontal_bias="0.5" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:onClick="fadeOut"
        android:text="@string/fade_out"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />
</android.support.constraint.ConstraintLayout>

ConstraintLayout：一次动画多个视图

1 个答案: