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

link之家

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

相关文章推荐

酷酷的匕首 · 多位教师表示“不要惩戒权”！教育惩戒让教师背 ...· 3 月前 ·

玩手机的甜瓜 · 专题报道——联合国“翻译官”：中文博大精深 ...· 9 月前 ·

爱喝酒的炒饭 · 恐龙快跑_2D横版/竖版/顶视角游戏通用开发 ...· 1 年前 ·

酒量小的水煮鱼 · 剧集盘点丨安利2022年必看19部双男主剧 ...· 1 年前 ·

温柔的毛衣 · 曝光！最高12万/年！合肥“贵族”学校排行榜 ...· 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)
        }
    }
}