手写ConstraintLayout属性(一)

ConstraintLayout的实现基于食火鸟算法（Cassowary Algorithm），它是一个高效的约束解决方案。

相对位置

top 上
bottom 下
left 左
right 右
start 开始（左或右，适配阿拉伯等语言字符）
end 结束（右或左，适配阿拉伯等语言字符）

一般情况下，View开始部分就是左边，但是有的语言是按照从右往左的顺序来书写的，例如阿拉伯语，在Android 4.2系统之后，Google在Android中引入了RTL布局，更好地支持了由右到左文字布局的显示，为了更好的兼容RTL布局，Google推荐使用MarginStart和MarginEnd来替代MarginLeft和MarginRight，这样应用可以在正常的屏幕和由右到左显示文字的屏幕上都保持一致的用户体验。

相对位置属性

layout_constraintTop_toTopOf       // 将所需视图的顶部与另一个视图的顶部对齐。 
layout_constraintTop_toBottomOf    // 将所需视图的顶部与另一个视图的底部对齐。 
layout_constraintBottom_toTopOf    // 将所需视图的底部与另一个视图的顶部对齐。 
layout_constraintBottom_toBottomOf // 将所需视图的底部与另一个视图的底部对齐。 
layout_constraintLeft_toTopOf      // 将所需视图的左侧与另一个视图的顶部对齐。 
layout_constraintLeft_toBottomOf   // 将所需视图的左侧与另一个视图的底部对齐。 
layout_constraintLeft_toLeftOf     // 将所需视图的左边与另一个视图的左边对齐。 
layout_constraintLeft_toRightOf    // 将所需视图的左边与另一个视图的右边对齐。 
layout_constraintRight_toTopOf     // 将所需视图的右对齐到另一个视图的顶部。
layout_constraintRight_toBottomOf  // 将所需视图的右对齐到另一个视图的底部。
layout_constraintRight_toLeftOf    // 将所需视图的右边与另一个视图的左边对齐。
layout_constraintRight_toRightOf   // 将所需视图的右边与另一个视图的右边对齐。
layout_constraintEnd_toEndOf       // 将所需视图的结束与另一个视图的结束对齐。
layout_constraintStart_toStartOf   // 将所需视图的起始与另一个视图的起始对齐。
layout_constraintStart_toEndOf     // 将所需视图的起始与另一个视图的结束对齐。
layout_constraintEnd_toStartOf     // 将所需视图的结束与另一个视图的起始对齐。

<?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">

    <Button
        android:layout_width="wrap_content"
        android:id="@+id/tv_hw"
        android:layout_height="wrap_content"
        android:text="按钮"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/tv_hc"
        android:text="和上方按钮竖直对齐"
        app:layout_constraintTop_toBottomOf="@id/tv_hw"
        app:layout_constraintStart_toEndOf="@id/tv_hw"
        app:layout_constraintEnd_toStartOf="@id/tv_hw" />

</androidx.constraintlayout.widget.ConstraintLayout>

基线对齐

layout_constraintBaseline_toBaselineOf

<?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">

    <Button
        android:id="@+id/tv_hw"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="按钮"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


    <Button
        android:id="@+id/tv_hc"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="和左边按钮水平对齐"
        app:layout_constraintBaseline_toBaselineOf="@id/tv_hw"
        app:layout_constraintStart_toEndOf="@id/tv_hw" />

</androidx.constraintlayout.widget.ConstraintLayout>

边距

margin是具有方向性的，含义同RelativeLayout属性：

android:layout_marginStart
android:layout_marginEnd
android:layout_marginLeft
android:layout_marginTop
android:layout_marginRight
android:layout_marginBottom

隐藏后的边距

当前View与另一个View绑定后，另一个View的属性设置为Gone，则以下属性会生效：

layout_goneMarginStart
layout_goneMarginEnd
layout_goneMarginLeft
layout_goneMarginTop
layout_goneMarginRight
layout_goneMarginBottom

<?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">

    <Button
        android:layout_width="wrap_content"
        android:id="@+id/tv_hw"
        android:layout_height="wrap_content"
        android:text="按钮"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:visibility="gone"
        app:layout_constraintTop_toTopOf="parent" />


    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/tv_hc"
        android:text="上方按钮隐藏后，此按钮会上移"
        app:layout_goneMarginTop="16dp"
        android:layout_marginTop="20dp"
        app:layout_constraintTop_toBottomOf="@id/tv_hw"
        app:layout_constraintStart_toEndOf="@id/tv_hw"
        app:layout_constraintEnd_toStartOf="@id/tv_hw" />

</androidx.constraintlayout.widget.ConstraintLayout>

居中和偏移

bias，数值为0-1，表示偏移到竖直方向上方或水平方向起始的百分比，如果不设置则为居中。

layout_constraintHorizontal_bias 水平方向偏移
layout_constraintVertical_bias 数值方向偏移

<?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">

    <Button
        android:layout_width="wrap_content"
        android:id="@+id/tv_hw"
        android:layout_height="wrap_content"
        android:text="距上方0.3，距起始0.1"
        app:layout_constraintHorizontal_bias="0.1"
        app:layout_constraintVertical_bias="0.3"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/tv_hc"
        android:text="此按钮距离"
        app:layout_constraintTop_toBottomOf="@id/tv_hw"
        app:layout_constraintStart_toEndOf="@id/tv_hw"
        app:layout_constraintEnd_toStartOf="@id/tv_hw" />

</androidx.constraintlayout.widget.ConstraintLayout>

相对圆周定位

在相对控件的中心一个角度和距离上约束另外一个控件。

layout_constraintCircle 相对控件
layout_constraintCircleRadius 半径长度
layout_constraintCircleAngle 角度

<?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">

    <Button
        android:id="@+id/tv_hw"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="按钮"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


    <Button
        android:id="@+id/tv_hc"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="在另一个按钮的90dp距离，135角度"
        app:layout_constraintCircle="@id/tv_hw"
        app:layout_constraintCircleAngle="135"
        app:layout_constraintCircleRadius="90dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tv_hw" />

</androidx.constraintlayout.widget.ConstraintLayout>

控件的尺寸约束

在 ConstraintLayout 中设置控件的高度和宽度是通过 android:layout_width 和 android:layout_height 来指定，但有三种不同类型：

使用确定的尺寸，给定数值.
使用 WRAP_CONTENT 该效果与其他控件相同.
使用 0dp 来表示 MATCH_CONSTRAINT， 意思是根据约束规则指定高宽。

控件的宽高比例

限制控件的宽高比，如果要使用宽高比来约束尺寸，则至少要设置宽高其中一个尺寸为0dp，然后再设置此属性。

layout_constraintDimentionRatio

<?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">

    <Button
        android:layout_width="wrap_content"
        android:id="@+id/tv_hw"
        android:layout_height="0dp"
        android:text="按钮宽高比1:1"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:id="@+id/tv_hc"
        app:layout_constraintDimensionRatio="2:1"
        android:text="按钮宽高比2:1"
        app:layout_constraintTop_toBottomOf="@id/tv_hw"
        app:layout_constraintStart_toEndOf="@id/tv_hw"
        app:layout_constraintEnd_toStartOf="@id/tv_hw" />

</androidx.constraintlayout.widget.ConstraintLayout>

链条

Chains 为同一个方向（水平或者垂直）上的多个控件提供一个类似群组的概念。其他的方向则可以单独控制。多个控件相互在同一个方向上双向引用就可以创建一个 Chain.

layout_constraintHorizontal_chainStyle
layout_constraintHorizontal_weight
layout_constraintVertical_chainStyle
layout_constraintVertical_weight

其中 Style 有 4 种:

CHAIN_SPREAD 这个是默认的 Style， 里面的所有控件会分散开布局
Weighted chain，在 CHAIN_SPREAD 模式下，如果有些控件的尺寸设置为 MATCH_CONSTRAINT（0dp）,则这些控件尺寸会占据所有剩余可用的空间，和 LinearLayout weight 类似。
CHAIN_SPREAD_INSIDE 和 CHAIN_SPREAD 类似，只不过两端的两个控件和父容器直接不占用多余空间，多余空间在控件之间分散
CHAIN_PACKED 这种模式下，所有的控件都居中聚集在一起，但是可以设置 bias 属性来控制聚集的位置。

<?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">

    <Button
        android:id="@+id/tv_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="按钮1"
        app:layout_constraintEnd_toStartOf="@id/tv_2"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


    <Button
        android:id="@+id/tv_2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="按钮2"
        app:layout_constraintEnd_toStartOf="@id/tv_3"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintStart_toEndOf="@id/tv_1"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/tv_3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="按钮3"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintStart_toEndOf="@id/tv_2"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

辅助布局

Guideline

Guideline 是约束布局中一个特殊的辅助布局类，可以创建水平或者垂直的参考线，其他的控件可以根据这个参考线来进行布局，它本质是不可见的控件。参考线的位置属性：

orientation:vertical/horizontal
layout_constraintGuide_begin 指定距离左/上边开始的固定位置
layout_constraintGuide_end 指定距离右/下边开始的固定位置
layout_constraintGuide_percent 指定位于布局中所在的百分比

<?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">


    <androidx.constraintlayout.widget.Guideline
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/guidelineBegin"
        app:layout_constraintGuide_begin="100dp"
        android:orientation="vertical"/>

    <Button
        android:text="Button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button"
        app:layout_constraintLeft_toLeftOf="@+id/guidelineBegin"
        android:layout_marginTop="16dp"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.constraintlayout.widget.Guideline
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/guidelineEnd"
        app:layout_constraintGuide_end="100dp"
        android:orientation="vertical"/>

    <Button
        android:text="Button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/buttonEnd"
        app:layout_constraintRight_toLeftOf="@+id/guidelineEnd"
        android:layout_marginTop="48dp"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guidelinePercent"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.8" />

    <Button
        android:text="Button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/buttonPercent"
        app:layout_constraintLeft_toLeftOf="@+id/guidelinePercent"
        android:layout_marginTop="96dp"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Barrier

Barrier 在约束布局中通过 constraint_referenced_ids 引用多个控件，看作一个整体来添加一个与另外一个控件限制最大宽/高的约束。通过 app:barrierDirection 属性来决定 Barrier 的方向。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <Button
        android:id="@+id/btn01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="按钮1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/btn02"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="按钮2按钮2按钮2按钮2按钮2"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/btn01" />

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="文本C文本C文本C文本C文本C文本C文本C文本C文本C文本C"
        app:layout_constraintLeft_toRightOf="@+id/barrier"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/barrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="end"
        app:constraint_referenced_ids="btn01,btn02" />
</androidx.constraintlayout.widget.ConstraintLayout>

Group

Group 是约束布局用来控制一组控件的可见性。被引用 id 的控件的可见性（visibility）和深度（elevation）属性与 Group 相同。也就是说，被 Group 引用的控件会导致它们的自身的可见性和深度失效。

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <Button
        android:id="@+id/btn_a"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="30dp"
        android:layout_marginTop="200dp"
        android:text="这是控件A"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/btn_b"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        android:text="这是控件B"
        app:layout_constraintLeft_toLeftOf="@id/btn_a"
        app:layout_constraintTop_toBottomOf="@id/btn_a" />

    <androidx.constraintlayout.widget.Group
        android:id="@+id/group"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="visible"
        app:constraint_referenced_ids="btn_a,btn_b" />

</androidx.constraintlayout.widget.ConstraintLayout>

代码地址

https://github.com/chaozhouzhang/ConstrictLayout

参考

https://zhuanlan.zhihu.com/p/66467467