ConstraintLayout: mehrere Ansichten gleichzeitig animieren

Question

Ich möchte eine Gruppe von Ansichten in einem ConstraintLayout ausblenden. Mit einem LinearLayout würde ich die Ansichten so umbrechen, dass sie in einem übergeordneten LinearLayout ausgeblendet und den übergeordneten animiert werden. Ist das auch der bevorzugte Ansatz für ConstraintLayout? Es hat den Eindruck, dass dies den Zweck einer ConstraintLayout

Answer 1

besiegen würde. Ein Ansatz besteht darin, die Vorteile von zu nutzen.

Sie beginnen mit den ursprünglichen Einschränkungen für die Ansichten im Layout, erstellen einen zweiten Satz von Integritätsbedingungen und wechseln dann zu den neuen Integritätsbedingungen, indem Sie sie "anwenden".

In diesem Beispiel wird die zweite Integritätsregel aus einer nahezu identischen Layoutdatei abgeleitet. Der einzige Unterschied besteht darin, dass die ImageViews auf visibility = "invisible" gesetzt sind.

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>