Android ConstraintLayout ConstraintSet动态布局__约束布局constraintlayout

相关文章推荐

风流倜傥的木瓜 · angular checkbox全选-掘金· 1 年前 ·

想出国的豌豆 · ABAP内表 - 知乎· 1 年前 ·

仗义的面包 · python ...· 1 年前 ·

任性的香瓜 · X-MOL· 1 年前 ·

爱吹牛的青蛙 · 触发器导致的一个表的死锁问题 - ...· 1 年前 ·

5个步骤

修改约束-修改控件约束条件

修改约束-布局切换

在传统布局方式中，如果要改变某个控件的位置，需要获取 LayoutParams ，后台修改属性值就行了。

但是在约束布局 ConstraintLayout 中，要改变控件的约束条件，需要用到 ConstraintSet 类。主要有 5 个步骤

5个步骤

第一步：创建 ConstraintSet() 实例

 val set = ConstraintSet()

第二步：需要复制一份父布局的约束,方法有三个如下

set.clone(constraintLayout: ConstraintLayout);
set.clone(set: ConstraintSet);
set.clone(context: Context, constraintLayoutId: Int);

第三步：设置组件之间的约束了

set.connect(int startID, int startSide, int endID, int endSide) 
set.connect(int startID, int startSide, int endID, int endSide, int margin)
set.centerHorizontally(int viewId, int toView)
set.centerVertically(int viewId, int toView)

第四步：设置一个动画,并且要求api版本为19及以上

TransitionManager.beginDelayedTransition(ViewGroup sceneRoot)

第五步：apply一下使设置生效

set.applyTo(ConstraintLayout constraintLayout)

修改约束-修改控件约束条件

我们先写一个布局

Android ConstraintLayout ConstraintSet动态布局_android

代码如下：

<?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"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/root"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<TextView
android:id="@+id/view1"
android:layout_width="0dp"
android:layout_height="50dp"
android:background="#f00"
android:gravity="center"
android:text="view1"
android:textColor="#fff"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_percent="0.5" />

<TextView
android:id="@+id/view2"
android:layout_width="0dp"
android:layout_height="50dp"
android:background="@color/black"
android:gravity="center"
android:text="view2"
android:textColor="#fff"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.2"
app:layout_constraintWidth_percent="0.2" />

</androidx.constraintlayout.widget.ConstraintLayout>

重新定义约束条件如下：

class MainActivity : AppCompatActivity() {

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)

val rootLayout: ConstraintLayout = findViewById(R.id.root)
val view1: View = findViewById(R.id.view1)
val view2: View = findViewById(R.id.view2)

view1.setOnClickListener {
val set = ConstraintSet()
set.clone(rootLayout)
//view1，view2 顶部对齐
set.connect(R.id.view1, ConstraintSet.TOP, R.id.view2, ConstraintSet.TOP)
//view1左边对齐view2左边，距离20px
set.connect(R.id.view1, ConstraintSet.START, R.id.view2, ConstraintSet.END, 10)

//增加过渡动画，动画也可以不用加，但是效果比较生硬
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
TransitionManager.beginDelayedTransition(rootLayout)
            }
set.applyTo(rootLayout)
        }

view2.setOnClickListener {
val set = ConstraintSet()
set.clone(rootLayout)

//在父布局中垂直居中显示
set.centerVertically(R.id.view2, ConstraintSet.PARENT_ID)

//增加过渡动画，动画也可以不用加，但是效果比较生硬
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
TransitionManager.beginDelayedTransition(rootLayout)
            }
set.applyTo(rootLayout)
        }
    }
}

效果如下：

Android ConstraintLayout ConstraintSet动态布局_android_02

修改约束-布局切换

Android ConstraintLayout ConstraintSet动态布局_Constraint_03

首先定义两个布局，第一个布局 activity_main.xml ：是一行显示4个图标

<?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"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/root"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<ImageView
android:id="@+id/view1"
android:layout_width="50dp"
android:layout_height="50dp"
android:src="@drawable/weixin"
app:layout_constraintEnd_toStartOf="@id/view2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />

<ImageView
android:id="@+id/view2"
android:layout_width="50dp"
android:layout_height="50dp"
android:src="@drawable/weibo"
app:layout_constraintEnd_toStartOf="@id/view3"
app:layout_constraintStart_toEndOf="@id/view1"
app:layout_constraintTop_toTopOf="parent" />

<ImageView
android:id="@+id/view3"
android:layout_width="50dp"
android:layout_height="50dp"
android:src="@drawable/aqq1"
app:layout_constraintEnd_toStartOf="@id/view4"
app:layout_constraintStart_toEndOf="@id/view2"
app:layout_constraintTop_toTopOf="parent" />

<ImageView
android:id="@+id/view4"
android:layout_width="50dp"
android:layout_height="50dp"
app:layout_constraintStart_toEndOf="@id/view3"
android:src="@drawable/dingding"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Android ConstraintLayout ConstraintSet动态布局_android_04

第二个布局 activity_main2.xml ：2行显示4个图标

<?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"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/root"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<ImageView
android:id="@+id/view1"
android:layout_width="50dp"
android:layout_height="50dp"
android:src="@drawable/weixin"
app:layout_constraintEnd_toStartOf="@id/view2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />

<ImageView
android:id="@+id/view2"
android:layout_width="50dp"
android:layout_height="50dp"
android:src="@drawable/weibo"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@id/view1"
app:layout_constraintTop_toTopOf="parent" />

<ImageView
android:id="@+id/view3"
android:layout_width="50dp"
android:layout_height="50dp"
android:src="@drawable/aqq1"
app:layout_constraintEnd_toStartOf="@id/view4"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/view1" />

<ImageView
android:id="@+id/view4"
android:layout_width="50dp"
android:layout_height="50dp"
android:src="@drawable/dingding"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@id/view3"
app:layout_constraintTop_toTopOf="@id/view3" />


</androidx.constraintlayout.widget.ConstraintLayout>

Android ConstraintLayout ConstraintSet动态布局_赵彦军_05

通过代码切换两个视图：

package com.example.myapplication

import android.os.Build
import android.os.Bundle
import android.transition.TransitionManager
import android.view.View
import androidx.appcompat.app.AppCompatActivity
import androidx.constraintlayout.widget.ConstraintLayout
import androidx.constraintlayout.widget.ConstraintSet

class MainActivity : AppCompatActivity() {

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)

val rootLayout: ConstraintLayout = findViewById(R.id.root)
val view1: View = findViewById(R.id.view1)
val view2: View = findViewById(R.id.view2)

//1行切换到2行
view1.setOnClickListener {
val set = ConstraintSet()
set.clone(this, R.layout.activity_main2)
//增加过渡动画，动画也可以不用加，但是效果比较生硬
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
TransitionManager.beginDelayedTransition(rootLayout)
            }
set.applyTo(rootLayout)
        }

//2行切换到1行
view2.setOnClickListener {
val set = ConstraintSet()
set.clone(this, R.layout.activity_main)
//增加过渡动画，动画也可以不用加，但是效果比较生硬
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
TransitionManager.beginDelayedTransition(rootLayout)
            }
set.applyTo(rootLayout)
        }
    }
}