Android 中的 ConstraintLayout

一、作用

ConstraintLayout 是 Android Studio 2.2中新增的功能之一。support 库中的内容，可以向前兼容。

• 非常适合使用可视化的方式来编写界面，但并不太适合使用XML的方式来进行编写，但还是可以用 XML 滴
• 可以有效地解决布局嵌套过多的问题
  有点类似于RelativeLayout，但远比RelativeLayout要更强大。

二、概念

对 ConstraintLayout 的学习不在于拖拽，而在于手写布局。

1. ConstraintLayout 的相关属性

（1）相对定位属性

• 与另一控件进行约束

• 与父控件进行约束

• layout_constraintLfet_toRightof="@id/xx"
  控制控件的相对位置

在当控件有自己设置的宽度，例如warp_content、固定值时，我们为控件添加的都是约束“Constraint”，这个约束有点像橡皮筋一样会拉这个控件，但是并不会改变控件的尺寸（RL很明显不是这样的）

（2）margin
设置控件边缘相对另一控件边缘的距离。约束布局中对应间距生效需要有相应的约束条件，需要给控件设置左间距，那该控件它的 constraint<Left/Start>_toXXXOf 一定需要，否则间距无法生效。

与其他控件不同的是新增了一系列goneMargin属性，用来控制当约束目标可见性为 GONE 的时候，设置不同的间距值。

在动画中，A 不可见的时候，需要保证 B 的布局位置不变，这个时候设置 goneMarginStart 的值为 A 的宽度加上 B 的 marginStart ，就可以满足该需求。

（3）居中和bias
下面的代码会使得 TextView 居中，为 TextView 添加 start、end 方向上的约束，那相当于 start、end 两边有相同的力拉着 TextView，使他左右居中。

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="14dp"
        android:text="@string/app_name"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

若不想居中，让其在方向上（水平或垂直）发生偏移，可以使用bias属性。

app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" 
app:layout_constraintHorizontal_bias="0.3"

（4）控件的尺寸

• 16dp
• wrap_content
• 0dp表示match_constraint
  根据约束规则指定宽高

想实现占满屏幕的效果就用layout_width="0dp"实现
在 ConstraintLayout 中不要使用match_parent了

app:layout_constraintDimensionRatio='16:6'宽高比

app:layout_constraintHorizontal_weight设置权重

wrap_content 下的强制约束

在 1.1 版本之前，约束布局对于控件的 WRAP_CONTENT 是不会限制它的结果大小。所以这在你希望使用 WRAP_CONTENT 但仍然需要强制约束条件来限制它的结果，就可能需要添加以下属性：

app:layout_constrainedWidth="true|false"
app:layout_constrainedHeight="true|false"

文字超出约束边界

（5）链条Chain
同一方向（水平或垂直）上的多个组件组成一个类似群组。

• 创建链条
  多个控件相互在同一个方向上双向引用就可以创建一个 Chain。
  

  

• Chain Style

  
  

（6）辅助布局

• GuideLine

该布局是不会显示到界面上的

①确定辅助线是横向的还是纵向的
android:orientation= vertical或horizontal

② 通过以下三个属性之一来确定辅助线的位置
layout_constraintGuide_begin=="30dp"`` // 距离顶部 30dplayout_constraintGiude_end="30dp"// 距离底部 30dplayout_constraintGuide_percent="0.8"`// 距离顶部80%的位置

vertivcal
percent=0.8

horizontal
percent=0.8

• Barrier

• Group
  控制一组控件的可见性。

三、使用

1. 一边固定，中间宽度可变，另一边跟随中间尾部

重点是中间 TextView 设置constraintWidth=true属性。

2. 根据某一 View 的高度，使一组 View 居中

右边的图片和下方的文字组成 chain，chainStyle="packed"，让它们紧靠在一起，然后右边图片的top与左边大图的top对齐， 右边文字的bottom和左边图片的bottom对齐。

3. ImageView 图片低端和文字低端对齐

ImageView图片和TextView文字的底部对齐

<ImageView
android:id="@+id/img"
android:baselineAlignBottom="true" >

<TextView
app:layout_constraintBaseline_toBaselineOf="@id/img">

四、注意

1. 折腾了将近 4 个小时

灵光乍现，终于解决了....

约束布局chain链：No resource found that matches the given name找不到id

2. 代码中修改 ConstraintLayout 布局

ConstraintLayout 采用代码方式布局用法简介
大佬教程-赞赞赞

主要用到的类包括

• ConstrainLayout
• ConstraintLayout.LayoutParams
• ConstraintSet
• GuideLine

参考文献

强推：即刻团队
拒绝拖拽 使用ConstraintLayout优化你的布局吧
Google官方文档
ConstraintLayout在项目中实践与总结
使用ConstraintLayout(约束布局)构建响应式UI
再学一次ConstraintLayout 一些新特性
google-developer