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

相关文章推荐

踏实的水煮鱼 · 16家地炼企业抱团建山东炼化集团 ...· 11 月前 ·

捣蛋的牙膏 · 【教资语文】超全！中外文学常考知识点总结_关汉卿· 1 年前 ·

安静的铅笔 · 学习强国的另类打开方式_澎湃号·政务_澎湃新 ...· 1 年前 ·

健壮的墨镜 · 【交换生项目】台湾清华大学交流项目· 2 年前 ·

打篮球的海豚 · 成龙、杨洋担当主演的《急先锋》，票房为何不如 ...· 2 年前 ·

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)
        }
    }
}