2017-06-15 24 views
1

动画的多个视图我想淡出一组中的视图ConstraintLayout。使用LinearLayout,我会包装视图以在父LinearLayout中淡出并为父项创建动画。这也是ConstraintLayout的首选方法吗?据认为,这不符合一个ConstraintLayoutConstraintLayout:一次

+0

为什么不将相同的动画应用到所有目标视图,然后用'AnimatorSet.playTogether(...)'启动它们以保持清晰? – MatPag

+0

这似乎很重要的动画框架 –

回答

2

一种方法的目的是为了充分利用ConstraintSets优势。

你开始与布局的意见,原来的限制,创建第二组约束,然后通过“应用”他们过渡到新的限制。

在这个例子中,第二约束集是从几乎相同的布局文件的。唯一的区别是ImageViews被设置为visibility =“不可见”。

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>