Android -- 约束布局ConstraintLayout使

优点

• 极大程度减少布局层级
• 可以实现一些其他布局管理器不能实现的样式

缺点

• 每个被参考的控件都需要设置id

基本用法

1.相对定位

• layout_constraintLeft_toLeftOf
• layout_constraintLeft_toRightOf
• layout_constraintRight_toLeftOf
• layout_constraintRight_toRightOf
• layout_constraintTop_toTopOf
• layout_constraintTop_toBottomOf
• layout_constraintBottom_toTopOf
• layout_constraintBottom_toBottomOf
• layout_constraintBaseline_toBaselineOf：文字Baseline对齐
• layout_constraintStart_toEndOf
• layout_constraintStart_toStartOf
• layout_constraintEnd_toStartOf
• layout_constraintEnd_toEndOf

2. 圆形定位

• layout_constraintCircle : 参考控件的id
• layout_constraintCircleRadius : 本控件与参考控件中心点间距
• layout_constraintCircleAngle : 角度0～360

3. 百分比定位（bias）

• layout_constraintHorizontal_bias
• layout_constraintVertical_bias

取值范围0～1，默认值0.5

4. 居中对齐

所有居中对其需要设置对应方向尺寸大小为wrap_content或固定值

• 水平居中

<androidx.constraintlayout.widget.ConstraintLayout
    ...
    >
    <TextView
        ...
        android:layout_width="60dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>   

• 垂直居中

<androidx.constraintlayout.widget.ConstraintLayout
    ...
    >
    <TextView
        ...
        android:layout_height="60dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>   

5.间距设置

表示当前控件与参考的控件之间的间距

layout_marginStart  左间距
layout_marginEnd    右间距
layout_marginLeft   左间距
layout_marginTop    上间距
layout_marginRight  右间距
layout_marginBottom 下间距

6.权重比

主要依赖于以下两个属性：

app:layout_constraintHorizontal_weight  横向权重比
app:layout_constraintVertical_weight    竖向权重比

7.百分比

百分比需要满足下面三个条件：

• 宽或高设置成0dp

• 宽或高默认值设置成百分比

  • app:layout_constraintWidth_default="percent"
  • app:layout_constraintHeight_default="percent"

• 宽或高百分比的值（取值范围0～1）

  • app:layout_constraintWidth_percent
  • app:layout_constraintHeight_percent

以下代码表示Textview宽度为ConstraintLayout宽度的50%

<androidx.constraintlayout.widget.ConstraintLayout
    ...
    >
    <TextView
        ...
        android:layout_width="0dp"
        app:layout_constraintHeight_default="percent"
        app:layout_constraintWidth_percent="0.5"/>
</androidx.constraintlayout.widget.ConstraintLayout>

8.宽高比

百分比需要满足下面两个条件：
a. 宽或高至少有一个设置成0dp
b. 通过app:layout_constraintDimensionRatio设置宽高比

这里layout_constraintDimensionRatio宽高的取值有以下4种形式：

• 16:9 表示宽高比为16:9
• 0.2 表示宽高比为1:5
• H,16:9 表示宽高比为9:16
• W,16:9 表示宽高比为16:9

以下代码表示Textview的宽高比为2:1

<androidx.constraintlayout.widget.ConstraintLayout
    ...
    >
    <TextView
        ...
        android:layout_height="0dp"
        app:layout_constraintDimensionRatio="2:1"/>
</androidx.constraintlayout.widget.ConstraintLayout>

9.强制约束

• 应用场景

  ​ 使用wrap_content，但仍要强制执行约束以限制结果尺寸，比如一个Textview的宽度是根据文字内容自适应的，文字内容可能很短也可能很长，当文字内容很长的时候可能会打破原先的约束，比如本来在在某个控件的左边，但是随着文字内容的增长会越界！

• 使用方式

  layout_constrainedWidth="true|false"  
  layout_constrainedHeight="true|false"
  

使用以上两个属性来强制控件的宽或高严格执行相应的约束条件

10.Barrier

• 应用场景

  ​ 当某个控件的约束想以一组控件为参考点，并且始终不越界

• 使用方式

app:barrierDirection="start|left|top|right|end|bottom"
app:constraint_referenced_ids="tv1,tv2"

• 示例

以下代码表示以tv1和tv2的底部为一个屏障，tv3始终在tv1和tv2下面，即使tv1和tv2全部都消失

<androidx.constraintlayout.widget.ConstraintLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/barrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierAllowsGoneWidgets="true"
        app:barrierDirection="bottom"
        app:constraint_referenced_ids="bt1,bt2" />
    <Button
        android:id="@+id/bt1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <Button
        android:id="@+id/bt2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@id/bt1" />
    <Button
        android:id="@+id/bt3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@id/barrier" />
</androidx.constraintlayout.widget.ConstraintLayout> 

11.Guideline

• 应用场景

  布局参考线可以作为其他控件布局约束的参考，但不会显示出来

• 使用方式

  参考线的方向，可分为水平和竖直两个方向：
  android:orientation="vertical|horizontal"
  参考线的位置：
  app:layout_constraintGuide_begin="100dp"
  app:layout_constraintGuide_end="100dp"
  app:layout_constraintGuide_percent="0.5"
  

12.Group

• 应用场景

  将某几个控件归为一组动态进行显示或隐藏控制

• 使用方式

  需要归为一组控件的ID
  app:constraint_referenced_ids="tv1,tv2"
  

13.Chain

Chain可以很容易达到其他布局管理器不容易实现，甚至无法实现的样式

• 应用场景

  某几个控件之间首位相接，排列方式有特殊要求

• 使用方式

  layout_constraintHorizontal_chainStyle="spread|spread_inside|packed"
  layout_constraintVertical_chainStyle="spread|spread_inside|packed"
  

chainStyle取值：

• spread: 控件均匀分布，即控件之间（包括边框）间距相同
• spread_inside: 第一个和最后一个控件固定在链两端的约束边界上，其余控件均匀分布，即控件内部之间间距相同
• packed: 控件打包在一起（在考虑外边距之后）。 然后，您可以通过更改链的头视图偏差调整整条链的偏差（左/右或上/下）。

image.png

<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">
    <TextView
        android:id="@+id/tv1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@id/tv2"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
    <TextView
        android:id="@+id/tv2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBaseline_toBaselineOf="@id/tv1"
        app:layout_constraintEnd_toStartOf="@id/tv3"
        app:layout_constraintStart_toEndOf="@id/tv1" />
    <TextView
        android:id="@+id/tv3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBaseline_toBaselineOf="@id/tv1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/tv2" />
</androidx.constraintlayout.widget.ConstraintLayout>