ConstraintLayout：一度に複数のビューをアニメーション化する

Question

ConstraintLayoutでビューのグループをフェードアウトしたいと思います。 LinearLayoutを使用すると、ビューをラップして親のLinearLayoutでフェードアウトし、親をアニメーション化します。これはConstraintLayoutの推奨アプローチですか？ ConstraintLayoutの目的を破ると感じている

Answer 1

1つのアプローチはConstraintSetsを利用することです。

レイアウト内のビューの元の制約から始め、2番目の制約セットを作成してから、新しい制約に「適用」することで移行します。

この例では、2番目の制約セットはほぼ同一のレイアウトファイルから派生しています。唯一の違いは、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>