Android ConstraintLayout 布局约束

芝麻粒儿 2022-09-29 我要评论

实践过程

代码修改约束

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/idConstraintLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:id="@+id/idTxt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/color_00ff00"
        android:padding="10dp"
        android:text="芝麻粒儿"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent" />
    <Button
        android:id="@+id/idBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="变化"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

public class ActivityJavaConstraintLayout extends AppCompatActivity {
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_java_constraint);
        ConstraintLayout idConstraintLayout = findViewById(R.id.idConstraintLayout);
        findViewById(R.id.idBtn).setOnClickListener(v -> {
            ConstraintSet constraintSet = new ConstraintSet();
            constraintSet.clone(idConstraintLayout);
            //设置相对父布局剧中
            constraintSet.centerHorizontally(R.id.idTxt, ConstraintSet.PARENT_ID);
            constraintSet.centerVertically(R.id.idTxt, ConstraintSet.PARENT_ID);
            //可以添加动画
            TransitionManager.beginDelayedTransition(idConstraintLayout);
            constraintSet.applyTo(idConstraintLayout);
        });
        //还有其他形式  控件A底部和空间B顶部对其   等同于xml中属性 app:layout_constraintBottom_toTopOf
//        constraintSet.connect(R.id.idTxtA, ConstraintSet.BOTTOM, R.id.idTxtB, ConstraintSet.TOP);
    }
}

除了上面的效果，我们还能实现切换布局的时候，相同控件动画化。我们准备两个布局，布局内id一致，但是位置不同。

布局A如下：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/idConstraintLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:id="@+id/idTxt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/color_00ff00"
        android:padding="10dp"
        android:text="芝麻粒儿"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent" />
    <Button
        android:id="@+id/idBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="变化"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />
    <Button
        android:id="@+id/idBtnBack"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="回去"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

布局B如下：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/idConstraintLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:id="@+id/idTxt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/color_00ff00"
        android:padding="10dp"
        android:text="芝麻粒儿"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />
    <Button
        android:id="@+id/idBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="变化"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent" />
    <Button
        android:id="@+id/idBtnBack"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="回去"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

public class ActivityJavaConstraintLayout extends AppCompatActivity {
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_java_constraint);
        ConstraintLayout idConstraintLayout = findViewById(R.id.idConstraintLayout);
        //变化
        findViewById(R.id.idBtn).setOnClickListener(v ->{
            ConstraintSet constraintSet = new ConstraintSet();
            constraintSet.clone(this,R.layout.activity_java_constraint_b);
            TransitionManager.beginDelayedTransition(idConstraintLayout);
            constraintSet.applyTo(idConstraintLayout);
        });
        //恢复
        findViewById(R.id.idBtnBack).setOnClickListener(v->{
            ConstraintSet constraintSet = new ConstraintSet();
            constraintSet.clone(this,R.layout.activity_java_constraint);
            TransitionManager.beginDelayedTransition(idConstraintLayout);
            constraintSet.applyTo(idConstraintLayout);
        });
    }
}