ConstraintLayout属性及示例_constraintlayout 链-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_39236471/article/details/86936199

ConstraintLayout译作约束布局，通过对控件或父容器之间的约束来控制布局，减少使用传统布局带来的布局嵌套过多问题，保持了扁平的视图层次结构。参考：

对于属性：

1、Relative positioning(相对定位)

设置该控件与其他控件及父容器的相对位置
在这里插入图片描述
属性：
layout_constraintLeft_toLeftOf —当前视图与目标视图左侧对齐，相当于RelativeLayout中的layout_alignLeft.

layout_constraintLeft_toRightOf —当前视图的左侧在目标视图的右侧，相当于RelativeLayout中的layout_toRightOf.

layout_constraintRight_toLeftOf —当前视图的右侧在目标视图的左侧，相当于RelativeLayout中的layout_toLeftOf.

layout_constraintRight_toRightOf —当前视图与目标视图右侧对齐，相当于RelativeLayout中的layout_alignRight.

layout_constraintTop_toTopOf —当前视图与目标视图头部对齐，相当于RelativeLayout中的layout_alignTop.

layout_constraintTop_toBottomOf —当前视图在目标视图的下方，相当于RelativeLayout中的layout_below.

layout_constraintBottom_toTopOf —当前视图与目标视图的上方，相当于RelativeLayout中的layout_above.

layout_constraintBottom_toBottomOf —当前视图与目标视图底部对齐，相当于RelativeLayout中的layout_alignBottom.

layout_constraintBaseline_toBaselineOf —当前视图与目标视图文字底部对齐，相当于RelativeLayout中的layout_alignBaseLine.

layout_constraintStart_toEndOf —同layout_constraintLeft_toRightOf.

layout_constraintStart_toStartOf —同layout_constraintLeft_toLeftOf.

layout_constraintEnd_toStartOf —同layout_constraintRight_toLeftOf.

layout_constraintEnd_toEndOf —同layout_constraintRight_toRightOf.

针对Margins(边距)与原视图View的使用方法相同：

layout_margin - - - 指当前图层与外部图层的距离.
padding - - - 指当前图层与内部图层的距离.

属性含有：

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

当位置约束目标控件View.GONE时，可以使用替代的边距值

layout_goneMarginStart
layout_goneMarginEnd
layout_goneMarginLeft
layout_goneMarginTop
layout_goneMarginRight
layout_goneMarginBottom

示例：
在这里插入图片描述
(其中Button2设置的间距Margin直接由Button1承受，内部间距padding由其内部文字承受)

代码：

<android.support.constraint.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/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <Button
        android:id="@+id/bt_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:text="AAA"//编译后等于注释
        android:textSize="20sp"
        android:gravity="center"
        android:layout_marginTop="8dp"
        android:layout_marginLeft="8dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"/>
    <Button
        android:id="@+id/bt_2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:text="BBB"
        android:textSize="20sp"
        android:layout_marginTop="8dp"
        android:layout_marginLeft="8dp"
        android:paddingBottom="20dp"
        app:layout_constraintLeft_toRightOf="@id/bt_1"
        app:layout_constraintTop_toBottomOf="@id/bt_1" />
</android.support.constraint.ConstraintLayout>

2、Centering positioning(中心定位)
在这里插入图片描述
这是设置其左右对齐均参照父容器，左右两侧的约束导致控件平分边距

app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent“

于是导入bias(偏差)进行位置的调整，属性包含：

layout_constraintHorizontal_bias
layout_constraintVertical_bias

在这里插入图片描述
通过对bias属性的设置改变两侧的边距(左右均有作用时默认为50%)。

<Button
    android:id="@+id/bt_3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    tools:text="CCC"
    android:textSize="20sp"
    app:layout_constraintTop_toBottomOf="@id/bt_2"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintHorizontal_bias="0.2"/>

3、Circular positioning(圆形定位)

在这里插入图片描述

属性：
layout_constraintCircle - - - (引用组件的id)
layout_constraintCircleRadius - - - (该组件中心到另一组件中心的距离)
layout_constraintCircleAngle - - - (另一组件的角度，以该组件为中心，一个圆 0-360度)

示例：
在这里插入图片描述
代码：

<Button
    android:id="@+id/bt_3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    tools:text="CCC"
    android:textSize="20sp"
    app:layout_constraintCircle="@id/bt_2"
    app:layout_constraintCircleRadius="80dp"
    app:layout_constraintCircleAngle="135"/>

4、Visibility behavior(可见性操作)

ConstraintLayout有特定的方式处理被设置为View.GONE的控件。
设置为GONE的控件不会被显示，也不是布局本身的一部分(虽然标记为GONE，但实际尺寸不会改变).
就布局计算而言，GONE的控件仍是布局的一部分，区别在于：
(1)、对于布局线路而言，尺寸将被看做是0 (被处理成一个).
(2)、如果它对其他控件有约束，则仍然会被重视，但是所有边距值将当作 0.

在这里插入图片描述
5、Dimensions constraints (尺寸约束)

自定义ConstraintLayout的最小、最大尺寸：

android:minWidth - - - 布局最小宽度
android:minHeight - - - 布局最小高度
android:maxWidth - - - 布局最大宽度
android:maxHeight - - - 布局最大高度
当ContraintLayout尺寸设置为wrap_content时，默认使用最小尺寸。

控件尺寸可以通过以下方法设置宽、高属性：

指定尺寸
warp_content
0dp (相当于match_constraint)

Ratio(比例)：
定义一个控件相对于另一个控件的尺寸比例，其中至少设置一个属性的尺寸为0 dp,并通过layout_constraintDimentionRatio属性设置比例。

通过浮点值(float)或宽高比例(width:height)来设置.

示例(浮点值)：(设置宽高一样)
在这里插入图片描述
代码：

android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintDimensionRatio="1:1"

示例(宽高比例):
在这里插入图片描述
代码：
通过BBB按钮的”高度“来作为基准定义比例为宽：高为3：1.

<Button
    android:id="@+id/bt_3"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintDimensionRatio="W,3:1"
    tools:text="CCC"
    android:textSize="20sp"
    android:textColor="@color/colorAccent"
    app:layout_constraintBottom_toBottomOf="@id/bt_2"
    app:layout_constraintTop_toTopOf="@id/bt_2"
    app:layout_constraintLeft_toRightOf="@id/bt_2"/>

Chains(链)：

单一轴（水平或垂直）上提供群组行为，另一轴可以独立约束.

如果一组控件通过双向连接在一起，那么这组控件就被认为是一个链。
在这里插入图片描述
链由链的第一个元素上(链头)的属性控制：

水平链链头：最左侧的控件
垂直链链头：最上方的控件

Margins in chains：
如果在连接上指定了页边距, 则将考虑到它们。在传播链的情况下, 边距将从分配的空间中扣除。

链的样式：
在这里插入图片描述
当链的第一个元素设置了layout_constraintHorizontal_chainStyle或layout_constraintVertical_chainStyle属性，链的样式将按照指定的方式改变(默认是CHAIN_SPREAD).

CHAIN_SPREAD：元素将展开（默认）；
CHAIN_SPREAD_INSIDE：元素展开，但链的端点不会展开；
CHAIN_PACKED：链中的元素将包裹在一起。子控件的水平或垂直方向的偏置bias属性会影响包裹中元素的位置。

Weighted chains在可用空间内均匀的分布元素。

属性layout_constraintHorizontal_weight和layout_constraintVertical_weight可以控制使用MATCH_CONSTRAINT的元素如何分配空间。(权重的比例等于所占空间的比例)

示例：
在这里插入图片描述
代码：权重比例为1：2

<Button
    app:layout_constraintHorizontal_chainStyle="spread_inside"
    android:id="@+id/bt_3"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintDimensionRatio="W,1:1"
    tools:text="CCC"
    android:textSize="20sp"
    android:textColor="@color/colorAccent"
    app:layout_constraintBottom_toBottomOf="@id/bt_2"
    app:layout_constraintTop_toTopOf="@id/bt_2"
    app:layout_constraintLeft_toRightOf="@id/bt_2"
    app:layout_constraintRight_toLeftOf="@id/tv_4"
    app:layout_constraintHorizontal_weight="1"/>
<Button
    android:id="@+id/tv_4"
    android:layout_width="0dp"
    android:layout_height="0dp"
    tools:text="DDD"
    android:textSize="20sp"
    app:layout_constraintBottom_toBottomOf="@id/bt_2"
    app:layout_constraintTop_toTopOf="@id/bt_2"
    app:layout_constraintLeft_toRightOf="@id/bt_3"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintHorizontal_weight="2"/>

6、Virtual Helpers objects(虚拟辅助类)

Guideline具有以下三种定位方式：

layout_constraintGuide_begin - - - (从布局的左侧或顶部指定距离)
layout_constraintGuide_end - - - (从布局的右侧或底部指定距离)
layout_constraintGuide_percent - - - (指定一个布局的宽高比)

(垂直方向占30%处，水平方向234dp处)

<android.support.constraint.Guideline
    android:id="@+id/guideline"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_parent="0.3" />
<android.support.constraint.Guideline
    android:id="@+id/guideline2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_begin="234dp" />

Barrier：optimize barrier constraints(优化屏障约束)

Barrier是用多个控件视图作为限制源来决定位置的一种辅助线。

属性：
constraint_referenced_ids 指定限定源控件,多个id用”，“隔开
barrierDirection 指定限制的方向 ( left, right, top, bottom, start, end)

示例：
在这里插入图片描述
代码：

<android.support.constraint.Barrier
    android:id="@+id/barrier"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:barrierDirection="top"
    app:constraint_referenced_ids="bt_4,bt_3"

Group:

此类控制一组引用的组件的可见性。

通过对visibility属性的设置使得受控组件得以显示或者隐藏。(gone(隐藏) / visible(可见) / invisible(未显示) )

代码：

<android.support.constraint.Group
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:visibility="gone"
    app:constraint_referenced_ids="bt_4,bt_3"/>

更多内容可参考：

ConstraintLayout