Constraint Layout 动画 | 动态 Constraint - 新思想

Constraint Layout 动画 | 动态 Constraint

MainActivity.java

package com.xiesir.constraintlayoutanimations;

import android.support.constraint.ConstraintLayout;
import android.support.constraint.ConstraintSet;
import android.support.constraint.solver.widgets.ConstraintWidget;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.transition.ChangeBounds;
import android.transition.Transition;
import android.transition.TransitionManager;
import android.view.View;
import android.view.animation.BounceInterpolator;

// 参考：https://juejin.im/entry/58b2fd59570c350069704265

public class MainActivity extends AppCompatActivity {

    private ConstraintLayout constraintLayout;
    private ConstraintSet applyConstraintSet = new ConstraintSet();
    private ConstraintSet resetConstraintSet = new ConstraintSet();

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


        constraintLayout = findViewById(R.id.main);
        resetConstraintSet.clone(constraintLayout);
        applyConstraintSet.clone(constraintLayout);

//        //  10. 动画
//        super.onCreate(savedInstanceState);
//        setContentView(R.layout.activity_main1);
//
//
//        constraintLayout = findViewById(R.id.main);
//        resetConstraintSet.clone(constraintLayout);
//        applyConstraintSet.clone(this, R.layout.activity_main2);
    }

    public void onResetClick(View view) {
        resetConstraintSet.applyTo(constraintLayout);

//        //  10. 动画
//        TransitionManager.beginDelayedTransition(constraintLayout);
//        resetConstraintSet.applyTo(constraintLayout);
    }

////    1. 无动画
//    public void onApplyClick(View view) {
//        applyConstraintSet.setMargin(R.id.button1,ConstraintSet.START,8);
//        applyConstraintSet.applyTo(constraintLayout);
//    }

////    2. 有动画
//    public void onApplyClick(View view) {
//        TransitionManager.beginDelayedTransition(constraintLayout);
//        applyConstraintSet.setMargin(R.id.button1,ConstraintSet.START,8);
//        applyConstraintSet.applyTo(constraintLayout);
//    }

////    3. 让所有的按钮动起来并在父容器里水平居中，但是由于外边距的设定，它们最终的位置出现了偏移。
//    public void onApplyClick(View view) {
//        TransitionManager.beginDelayedTransition(constraintLayout);
//        applyConstraintSet.centerHorizontally(R.id.button1, R.id.main);
//        applyConstraintSet.centerHorizontally(R.id.button2, R.id.main);
//        applyConstraintSet.centerHorizontally(R.id.button3, R.id.main);
//        applyConstraintSet.applyTo(constraintLayout);
//    }

////    4. 让所有的按钮动起来并在父容器里水平居中
//    public void onApplyClick(View view) {
//        TransitionManager.beginDelayedTransition(constraintLayout);
//
//
//        applyConstraintSet.setMargin(R.id.button1,ConstraintSet.START,0);
//        applyConstraintSet.setMargin(R.id.button1,ConstraintSet.END,0);
//        applyConstraintSet.setMargin(R.id.button2,ConstraintSet.START,0);
//        applyConstraintSet.setMargin(R.id.button2,ConstraintSet.END,0);
//        applyConstraintSet.setMargin(R.id.button3,ConstraintSet.START,0);
//        applyConstraintSet.setMargin(R.id.button3,ConstraintSet.END,0);
//
//
//        applyConstraintSet.centerHorizontally(R.id.button1, R.id.main);
//        applyConstraintSet.centerHorizontally(R.id.button2, R.id.main);
//        applyConstraintSet.centerHorizontally(R.id.button3, R.id.main);
//        applyConstraintSet.applyTo(constraintLayout);
//    }

////    5. 让按钮 3 移动到正中心
//    public void onApplyClick(View view) {
//        TransitionManager.beginDelayedTransition(constraintLayout);
//
//        applyConstraintSet.setMargin(R.id.button3,ConstraintSet.START,0);
//        applyConstraintSet.setMargin(R.id.button3,ConstraintSet.END,0);
//        applyConstraintSet.setMargin(R.id.button3,ConstraintSet.TOP,0);
//        applyConstraintSet.setMargin(R.id.button3,ConstraintSet.BOTTOM,0);
//
//        applyConstraintSet.centerHorizontally(R.id.button3, R.id.main);
//        applyConstraintSet.centerVertically(R.id.button3, R.id.main);
//
//        applyConstraintSet.applyTo(constraintLayout);
//    }

////    6. 让所有的按钮的宽度都变化成 600 像素。
//    public void onApplyClick(View view) {
//        TransitionManager.beginDelayedTransition(constraintLayout);
//
//        applyConstraintSet.constrainWidth(R.id.button1,600);
//        applyConstraintSet.constrainWidth(R.id.button2,600);
//        applyConstraintSet.constrainWidth(R.id.button3,600);
//
//        // applyConstraintSet.constrainHeight(R.id.button1,100);
//        // applyConstraintSet.constrainHeight(R.id.button2,100);
//        // applyConstraintSet.constrainHeight(R.id.button3,100);
//
//        applyConstraintSet.applyTo(constraintLayout);
//    }

////    7. 让按钮1的宽度和高度充满整个屏幕并且让其他的按钮隐藏。
//    public void onApplyClick(View view) {
//        TransitionManager.beginDelayedTransition(constraintLayout);
//
//        applyConstraintSet.setVisibility(R.id.button2,ConstraintSet.GONE);
//        applyConstraintSet.setVisibility(R.id.button3,ConstraintSet.GONE);
//        applyConstraintSet.clear(R.id.button1);
//        applyConstraintSet.connect(R.id.button1,ConstraintSet.LEFT,R.id.main,ConstraintSet.LEFT,0);
//        applyConstraintSet.connect(R.id.button1,ConstraintSet.RIGHT,R.id.main,ConstraintSet.RIGHT,0);
//        applyConstraintSet.connect(R.id.button1,ConstraintSet.TOP,R.id.main,ConstraintSet.TOP,0);
//        applyConstraintSet.connect(R.id.button1,ConstraintSet.BOTTOM,R.id.main,ConstraintSet.BOTTOM,0);
//        applyConstraintSet.applyTo(constraintLayout);
//    }

////    8. 让所有的按钮都与屏幕的顶端对齐并且水平居中。
//    public void onApplyClick(View view) {
//        TransitionManager.beginDelayedTransition(constraintLayout);
//
//        applyConstraintSet.clear(R.id.button1);
//        applyConstraintSet.clear(R.id.button2);
//        applyConstraintSet.clear(R.id.button3);
//
//        // button 1 left and top align to parent
//        applyConstraintSet.connect(R.id.button1, ConstraintSet.LEFT, R.id.main, ConstraintSet.LEFT, 0);
//
//        // button 3 right and top align to parent
//        applyConstraintSet.connect(R.id.button3, ConstraintSet.RIGHT, R.id.main, ConstraintSet.RIGHT, 0);
//
//        // bi-direction or Chaining between button 1 and button 2
//        applyConstraintSet.connect(R.id.button2, ConstraintSet.LEFT, R.id.button1, ConstraintSet.RIGHT, 0);
//        applyConstraintSet.connect(R.id.button1, ConstraintSet.RIGHT, R.id.button2, ConstraintSet.LEFT, 0);
//        // bi-direction or Chaining between button 2 and button 3
//        applyConstraintSet.connect(R.id.button2, ConstraintSet.RIGHT, R.id.button3, ConstraintSet.LEFT, 0);
//        applyConstraintSet.connect(R.id.button3, ConstraintSet.LEFT, R.id.button2, ConstraintSet.RIGHT, 0);
//
//        applyConstraintSet.createHorizontalChain(R.id.button1, ConstraintSet.LEFT, ConstraintSet.PARENT_ID, ConstraintSet.RIGHT,
//                new int[]{R.id.button1, R.id.button3},null, ConstraintWidget.CHAIN_SPREAD_INSIDE);
////        applyConstraintSet.createHorizontalChain(R.id.button1, ConstraintSet.RIGHT, ConstraintSet.PARENT_ID, ConstraintSet.RIGHT,
////                new int[]{R.id.button1, R.id.button3},null, ConstraintWidget.CHAIN_SPREAD);
////        applyConstraintSet.createHorizontalChain(R.id.button1, ConstraintSet.LEFT, R.id.button1, ConstraintSet.LEFT,
////                new int[]{R.id.button1, R.id.button3},null, ConstraintWidget.CHAIN_PACKED);
////        applyConstraintSet.setHorizontalBias(R.id.button1, .9f);
//
//        applyConstraintSet.constrainWidth(R.id.button1,ConstraintSet.WRAP_CONTENT);
//        applyConstraintSet.constrainWidth(R.id.button2,ConstraintSet.WRAP_CONTENT);
//        applyConstraintSet.constrainWidth(R.id.button3,ConstraintSet.WRAP_CONTENT);
//
//        applyConstraintSet.constrainHeight(R.id.button1,ConstraintSet.WRAP_CONTENT);
//        applyConstraintSet.constrainHeight(R.id.button2,ConstraintSet.WRAP_CONTENT);
//        applyConstraintSet.constrainHeight(R.id.button3,ConstraintSet.WRAP_CONTENT);
//
//        applyConstraintSet.applyTo(constraintLayout);
//    }

    //    9. 按钮弹落
    public void onApplyClick(View view) {
        Transition changeBounds = new ChangeBounds();
        changeBounds.setDuration(3000);
        changeBounds.setInterpolator(new BounceInterpolator());

        TransitionManager.beginDelayedTransition(constraintLayout, changeBounds);
        ConstraintSet set = new ConstraintSet();

        set.connect(R.id.button1, ConstraintSet.BOTTOM,
                ConstraintSet.PARENT_ID, ConstraintSet.BOTTOM, 0);

        set.connect(R.id.button1, ConstraintSet.RIGHT,
                ConstraintSet.PARENT_ID, ConstraintSet.RIGHT, 0);

        set.constrainWidth(R.id.button1, ConstraintSet.WRAP_CONTENT);

        set.applyTo(constraintLayout);
    }

//    //  10. 动画
//    public void onApplyClick(View view) {
//        TransitionManager.beginDelayedTransition(constraintLayout);
//        applyConstraintSet.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/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="52dp"
        android:layout_marginStart="52dp"
        android:layout_marginTop="69dp"
        android:background="@color/colorAccent"
        android:text="Button 1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="136dp"
        android:background="@color/colorPrimaryDark"
        android:text="Button 2"
        app:layout_constraintHorizontal_bias="0.571"
        app:layout_constraintLeft_toRightOf="@+id/button1"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="88dp"
        android:layout_marginStart="88dp"
        android:layout_marginTop="102dp"
        android:background="@android:color/holo_red_dark"
        android:text="Button 3"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button1" />

    <Button
        android:id="@+id/applyButton"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="32dp"
        android:layout_marginStart="32dp"
        android:onClick="onApplyClick"
        android:text="应  用"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/resetButton"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent" />

    <Button
        android:id="@+id/resetButton"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="32dp"
        android:layout_marginStart="32dp"
        android:onClick="onResetClick"
        android:text="重  置"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/applyButton" />

</android.support.constraint.ConstraintLayout>

activity_main1.xml：

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

<!--</android.support.constraint.ConstraintLayout>-->

<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/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <Button
        android:onClick="onApplyClick"
        app:layout_constraintHorizontal_weight="1"
        android:id="@+id/applyButton"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Apply"
        android:layout_marginLeft="16dp"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_marginStart="16dp"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginBottom="16dp"
        app:layout_constraintRight_toLeftOf="@+id/resetButton"
        android:layout_marginRight="8dp"
        android:layout_marginEnd="8dp" />

    <Button
        android:onClick="onResetClick"
        app:layout_constraintHorizontal_weight="1"
        android:id="@+id/resetButton"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Reset"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginBottom="16dp"
        app:layout_constraintLeft_toRightOf="@+id/applyButton"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp" />

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="92dp"
        android:layout_height="92dp"
        app:srcCompat="@mipmap/ic_launcher"
        android:layout_marginTop="16dp"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginLeft="8dp"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_marginStart="8dp"
        android:layout_marginRight="8dp"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintHorizontal_bias="0.02"
        android:layout_marginEnd="8dp" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Hello this is a simple demo. Thanks for reading and learning new things.\nHello this is a simple demo. Thanks for reading and learning new things.\nHello this is a simple demo. Thanks for reading and learning new things.\nHello this is a simple demo. Thanks for reading and learning new things.\nHello this is a simple demo. Thanks for reading and learning new things.\nHello this is a simple demo. Thanks for reading and learning new things.\nHello this is a simple demo. Thanks for reading and learning new things.\nHello this is a simple demo. Thanks for reading and learning new things.\n"
        android:layout_marginRight="8dp"
        android:lines="6"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginEnd="8dp"
        app:layout_constraintLeft_toRightOf="@+id/imageView"
        android:layout_marginLeft="8dp"
        android:layout_marginStart="8dp"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="16dp" />

    <CheckBox
        android:id="@+id/checkBox"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="CheckBox"
        android:layout_marginTop="16dp"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginLeft="16dp"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_marginStart="16dp"
        app:layout_constraintRight_toLeftOf="@+id/textView"
        android:layout_marginRight="8dp"
        app:layout_constraintHorizontal_bias="1.0"
        android:layout_marginEnd="8dp" />

    <Button
        android:id="@+id/button"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button"
        android:layout_marginRight="8dp"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginEnd="8dp"
        android:layout_marginLeft="8dp"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        app:layout_constraintTop_toBottomOf="@+id/textView" />

</android.support.constraint.ConstraintLayout>

activity_main2.xml：

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

<!--</android.support.constraint.ConstraintLayout>-->
<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/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">


    <Button
        android:onClick="onApplyClick"
        app:layout_constraintHorizontal_weight="1"
        android:id="@+id/applyButton"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Apply"
        android:layout_marginLeft="16dp"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_marginStart="16dp"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginBottom="16dp"
        app:layout_constraintRight_toLeftOf="@+id/resetButton"
        android:layout_marginRight="8dp"
        android:layout_marginEnd="8dp" />

    <Button
        android:onClick="onResetClick"
        app:layout_constraintHorizontal_weight="1"
        android:id="@+id/resetButton"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Reset"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginBottom="16dp"
        app:layout_constraintLeft_toRightOf="@+id/applyButton"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"

        />

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="353dp"
        android:layout_height="157dp"
        app:srcCompat="@mipmap/ic_launcher"
        android:layout_marginTop="16dp"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginRight="8dp"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginEnd="8dp"
        android:layout_marginLeft="8dp"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_marginStart="8dp" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="352dp"
        android:layout_height="108dp"
        android:text="Hello this is a simple demo. Thanks for reading and learning new things.\nHello this is a simple demo. Thanks for reading and learning new things.\nHello this is a simple demo. Thanks for reading and learning new things.\nHello this is a simple demo. Thanks for reading and learning new things.\nHello this is a simple demo. Thanks for reading and learning new things.\nHello this is a simple demo. Thanks for reading and learning new things.\nHello this is a simple demo. Thanks for reading and learning new things.\nHello this is a simple demo. Thanks for reading and learning new things.\n"
        android:lines="6"
        android:layout_marginTop="12dp"
        app:layout_constraintTop_toBottomOf="@+id/imageView"
        android:layout_marginRight="8dp"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginLeft="8dp"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp" />

    <CheckBox
        android:id="@+id/checkBox"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="CheckBox"
        android:layout_marginTop="16dp"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginRight="16dp"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginEnd="16dp" />

    <Button
        android:id="@+id/button"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="Button"
        android:layout_marginRight="16dp"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginEnd="16dp"
        android:layout_marginLeft="8dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        app:layout_constraintTop_toBottomOf="@+id/textView"
        android:layout_marginBottom="8dp"
        app:layout_constraintBottom_toTopOf="@+id/applyButton" />

</android.support.constraint.ConstraintLayout>

下载：

https://files.cnblogs.com/files/pcideas/ConstraintLayoutAnimations.zip

参考：

https://juejin.im/entry/58b2fd59570c350069704265

posted on 2018-04-05 16:34 新思想阅读(945) 评论(0) 收藏举报

刷新页面返回顶部

新思想

Constraint Layout 动画 | 动态 Constraint

导航

公告