ConstraintLayout 属性汇总(基于1.1.3版本)

作者: Juny_1089 | 来源:发表于2018-11-09 10:22 被阅读0次

相对定位

约束的对象:可以是某一控件 : @id/XXX, 也可以是父布局: parent

布局的属性如下. 属性都形如layout_constraintXXX_toYYYOf, 其中layout_constraintXXX 的xxx指的是自身控件的边(Left、Right、Top、Bottom、Baseline); toYYYOf`` 中的YYY指的是约束对象的边(Left、Right、Top、Bottom、Baseline`);

- 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 
- layout_constraintStart_toEndOf 
- layout_constraintStart_toStartOf 
- layout_constraintEnd_toStartOf 
- layout_constraintEnd_toEndOf

Margins

先看属性:

* layout_goneMarginStart 
* layout_goneMarginEnd 
* layout_goneMarginLeft 
* layout_goneMarginTop 
* layout_goneMarginRight 
* layout_goneMarginBottom

gone margin顾名思义,就是当约束的对象为GONE 时,改属性生效.

Demo 代码:

    <Button
        android:id="@+id/button4"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:text="button4"
        app:layout_constraintRight_toRightOf="parent"
        />

    <!-- android:layout_marginRight="10dp" 
    配合 app:layout_goneMarginRight="110dp"一起使用，
    在约束的布局gone时，起用goneMargin，
    但是一定要预先设置对应方向上的margin -->
    <Button
        android:id="@+id/button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="10dp"
        android:text="button5"
        app:layout_constraintRight_toLeftOf="@id/button4"
        app:layout_goneMarginRight="110dp"/>

注意事项:

app:layout_goneMarginRight要配合android:layout_marginRight一起使用。
如果只设置了app:layout_goneMarginRight没有设置android:layout_marginRight，则无效。（alpha版本的bug，1.0.1版本已经修复）
在约束的布局gone时，控件自身的marginXXX失效,goneMarginXXX生效,二者只存其一.

倾向 (Bias)

搭配bias，能使约束偏向某一边，默认是0.5，有以下属性：

* layout_constraintHorizontal_bias (0最左边 1最右边) 
* layout_constraintVertical_bias (0最上边 1 最底边)

尺寸约束

这几个属性,具体没有使用过,暂时不知道其效果如何.

layout_constraintHeight_max 
layout_constraintHeight_min 
layout_constraintWidth_max
layout_constraintWidth_min
layout_constrainedHeight = "true";
layout_constrainedWidth = true;

比例约束(Ratio)

注意: 约束要和 0dp 的方向一致。否则无效; 只能约束一个方向

layout_constraintDimensionRatio = (width: height);
layout_constraintDimensionRatio = (H/W, width: height); // H/W 指定哪个方向约束
layout_constraintDimensionRatio =  （5:1,1:5）  // “width：height”形式的比例 , 这种比例形式尚未见成效

链条(Chains)

控件之间相互约束就会形成链条, 犹如人与人之间手拉手排成一列或者一排. 链条由在链的第一个元素（链的“头”）上设置的属性控制. 头是水平链最左边的View, 或垂直链最顶端的View. 也就是排第一的那个人

layout_constraintHorizontal_chainStyle = "spread"; // 元素将被展开（默认样式） 
layout_constraintVertical_chainStyle = "spread_inside";// 类似，但链的端点将不会扩展 
layout_constraintVertical_chainStyle = "packed";//链的元素将被打包在一起。

Guideline

Guideline只能用于ConstraintLayout中，是一个工具类，不会被显示，仅仅用于辅助布局。有点类似于ps作图时的参考线.

vertical的Guideline宽度为零，高度为ConstraintLayout的高度
horizontal的Guideline高度为零，宽度为ConstraintLayout的高度

定位Guideline有三种方式：
- 指定距离左侧或顶部的固定距离（layout_constraintGuide_begin）
- 指定距离右侧或底部的固定距离（layout_constraintGuide_end）
- 指定在父控件中的宽度或高度的百分比（layout_constraintGuide_percent）

Demo代码:

<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:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.constraint.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_begin="100dp"/>

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

</android.support.constraint.ConstraintLayout>

8. 屏障（Barrier）

它能够在运行时根据指定端可用视图的最大宽度创建导线（guideline）。这意味着视图的宽度减小或增加导线会自动移动以与视图的宽度保持一致。屏障与具有最大宽度的视图保持一致，该视图与被引用的视图组中的视图具有最大宽度。

img

屏障可以设置为开始，结束，顶部，底部 - 这里蓝色框始终保留在屏障的右侧，根据灰色框中的最大宽度计算屏障指引。可以理解成是一个灵活的Guideline

Demo 代码:

<Button
    android:id="@+id/btName"
    android:layout_width="100dp"
    android:layout_height="wrap_content" />

<Button
    android:id="@+id/btAge"
    android:layout_width="150dp"
    android:layout_height="wrap_content"
    app:layout_constraintTop_toBottomOf="@+id/btName" />

<android.support.constraint.Barrier
    android:id="@+id/barrier"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:barrierDirection="end"
    app:constraint_referenced_ids="btName,btAge" />

<Button
    android:id="@+id/btAddress"
    android:layout_width="120dp"
    android:layout_height="wrap_content"
    app:layout_constraintStart_toEndOf="@+id/barrier" />

加权链(weight)

用法与LinearLayout的weight很类似。

layout_constraintHorizontal_weight = "1";
layout_constraintVertical_weight = "2";

Demo 代码,这也是一个链条的例子

  <Button
        android:id="@+id/button13"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:maxHeight="10dp"
        android:text="Button2"
        app:layout_constraintRight_toLeftOf="@+id/button10"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintHorizontal_weight="1"
        />
    <Button
        android:id="@+id/button10"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:text="Button1"
        app:layout_constraintLeft_toRightOf="@+id/button13"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintHorizontal_weight="3"
        />

圆形定位(Circle)

这个真的是很灵活了.

app:layout_constraintCircle //对齐于哪个View
app:layout_constraintCircleAngle //对齐的角度
app:layout_constraintCircleRadius  //对齐View的距离（半径）

分组(Group)

这是令很多人充满期待的功能。如果多个视图可见性（visibility ）需要设置为显示或隐藏，用Group则可以轻松的完成。想想一个包含各种View的ViewGroup，只需要设置ViewGroup的visibility 为显示或隐藏，它的所有被包含的子View也会同时被显示或隐藏。现在使用Group就可以完成同样的需求，但他并不是一个ViewGroup，它是在平面结构上的一个Group，只需要引用相关View的Id即可。

demo 代码:

<Button
    android:id="@+id/btCenter"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Center Button"
    android:textAllCaps="false"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<Button
    android:id="@+id/btAlign"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Aligned Button"
    android:textAllCaps="false"
    app:layout_constraintCircle="@id/btCenter"
    app:layout_constraintCircleAngle="45"
    app:layout_constraintCircleRadius="120dp" />

<android.support.constraint.Group
    android:id="@+id/group"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:visibility="gone"
    app:constraint_referenced_ids="btAlign,btCenter" />

百分比(Percent )

属性

layout_constraintHeight_default="percent"
app:layout_constraintHeight_percent="0.5" 
app:layout_constraintWidth_default="percent"
app:layout_constraintWidth_percent="0.5"

demo代码

    <TextView
        android:id="@+id/textView8"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="TextView"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@id/textView9"
        app:layout_constraintWidth_default="percent"
        app:layout_constraintWidth_percent="0.8"  />

    <TextView
        android:id="@+id/textView9"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="TextView"
        app:layout_constraintLeft_toRightOf="@+id/textView8"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintWidth_default="percent"
        app:layout_constraintWidth_percent="0.2" />

占位(Placeholder)

Placeholder顾名思义，就是用来一个占位的东西，它可以把自己的内容设置为ConstraintLayout内的其它view。因此它用来写布局的模版，也可以用来动态修改UI的内容。

骚操作可以参考: http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2017/1019/8618.html

其他属性 - 待解读

barrierAllowsGoneWidgets;
barrierDirection;
chainUseRtl;
constraintSet ;
constraint_referenced_ids ;  // 关联Id, 在Group中用到
content;
emptyVisibility ;
layout_constraintBaseline_creator
layout_constraintBottom_creator 
layout_constraintLeft_creator 
layout_constraintRight_creator
layout_constraintTop_creator 
layout_optimizationLevel 

layout_editor_absoluteX ;  // left
layout_editor_absoluteY   // top

参考文章:

https://blog.csdn.net/zxt0601/article/details/72683379

https://juejin.im/entry/5ad8267f5188252eaf306908

https://www.jianshu.com/p/42258ac1b80f

可视化操作推荐文章:https://blog.csdn.net/guolin_blog/article/details/53122387