View 使用 - ConstraintLayout_constraintlayout动态设置属性

一、概念

解决布局嵌套过多的问题，采用方向约束的方式对控件进行定位。

二、位置

2.1 对齐

至少要保证水平和垂直方向都至少有一个约束才能确定控件的位置。

2.2 角度

正上方是0°，顺时针角度为正。

2.3 居中偏移

在水平或垂直方向上的百分比位置，默认值为0.5居中。

<TextView
    app:layout_constraintTop_toBottomOf="@id/tv2"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintHorizontal_bias="0.3"    //水平30%位置
    app:layout_constraintVertical_bias="0.2"/>    //垂直20%位置

2.4 边距

GoneMargin：当依赖的目标 View 可见性被设为 gone 时，该设置才会生效来占位。

 

3.2 设为 0dp

相当于是 match_constraint，作用根据设置的类型而定。

3.2.1 填充约束下的全部可用空间 spread（默认）

作为默认值，宽或高设为0dp后可以不写layout_constraintXXX_default="spread"。

 

<TextView
    android:layout_width="0dp"
    android:layout_height="100dp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    android:background="@color/blue"/>

3.2.2 按父布局百分比设置 percent

这个父布局指 ConstraintLayout 的大小，如果它作为根布局则指的是屏幕大小。设置具体百分比值后，可以不用写layout_constraintXXX_default="percent"。

<TextView
    android:id="@+id/tvBlack"
    android:layout_width="0dp"    //宽度设为0dp
    android:layout_height="100dp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintWidth_percent="0.5"    //设置具体百分比值
    />

3.2.3 匹配内容大小但不超过约束 wrap

红色宽度设为 wrap_content 并设置了左右外边距，当内容过多的时候会无视外边距（加上一行 app:layout_constrainedWidth="true"即可解决）。蓝色设为 0dp wrap模式，内容不会超过约束。

<TextView
    android:id="@+id/tv1"
    android:layout_width="wrap_content"
    android:layout_height="30dp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    android:layout_marginStart="100dp"
    android:layout_marginEnd="100dp"
    android:background="@color/red"
    android:text="AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA"
    android:textSize="20sp"
    android:textColor="@color/white"/>
 
<TextView
    android:id="@+id/tv2"
    android:layout_width="0dp"
    android:layout_height="30dp"
    app:layout_constraintWidth_default="wrap"    //设为wrap模式
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    android:layout_marginStart="100dp"
    android:layout_marginEnd="100dp"
    android:background="@color/blue"
    android:layout_marginTop="100dp"
    android:text="AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA"
    android:textSize="20sp"
    android:textColor="@color/white"/>

3.2.4 按宽高比设置 Ratio

方式一：宽高需要按比例设置的那个设为0dp，另一个正常设置。

方式二：宽高都设为0dp，使用W或H以另一方为基准调节自己。

android:layout_width="200dp"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="2:1"    //宽:高

android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="W,0.1:1"    //以高为基准调节宽

四、约束链 Chain

在水平或垂直方向，许多控件首尾相互约束形成一条链。可以设置它们的分布，当宽或高设为0dp还能使用权重 app:layout_constraintHorizontal_weight="2" 但是会撑满。

 五、屏障 Barrier

左侧垂直的 TextView 谁更宽都有可能，右侧再来一个TextView，对齐它们哪个都会存在另一个更长造成重叠的问题。可以用 LinearLayout 包裹它俩，也可以用屏障。在布置国际化字符串或显示用户生成的无法预测大小的内容时，屏障非常有用。

<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="textView2,textView1" />
 
<TextView
    android:id="@+id/textView3"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintStart_toEndOf="@+id/barrier"
    app:layout_constraintTop_toTopOf="parent" />

六、组 Group

一次对多个控件进行显示或隐藏。

<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="A,B,C"    //添加需要包含的控件id，用逗号分隔。
/>

七、占位 Placeholder

先占位，后期通过代码调用 setContent() 动态设置内容，也可以直接在 xml 中通过 app:content="" 指定要显示的内容。

<androidx.constraintlayout.widget.Placeholder
    android:layout_width="100dp"
    android:layout_height="60dp"
    app:content="@layout/content"    //静态设置替换内容
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

八、流式布局 Flow

需要添加到链中的控件不用设置约束，通过对 Flow 设置。

8.1 链约束

8.1.1 none

水平居中，超出屏幕部分不可见。默认值。

 

8.1.2 chain

超出部分自动换行，同行控件评分宽度。

8.1.3 aligned

8.2 对齐约束

链上的控件可能是大小不一的，需要设置对齐。（排列方式为aligned无效）

 8.3 数量约束

九、层布局 Layer

常用来增加背景或共同动画，大小在布局期间根据引用的所有控件进行调整，代码的先后顺序决定位置：避免写在所有引用控件的最后面，这样会显示在最上面，设置背景会把它们覆盖住。

十、ImageFilterButton、ImageFilterView

10.1 图片圆角 

可以使用 roundPercent（0-1的小数） 或 round 属性来设置图片圆角。

<androidx.constraintlayout.utils.widget.ImageFilterView
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:src="@drawable/mi"
    app:roundPercent="0.7"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"/>

 10.2 图片重叠

 十一、MockView

可以用来充当原型图。

    <androidx.constraintlayout.utils.widget.MockView
        android:id="@+id/Avatar"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_marginStart="80dp"
        android:layout_marginTop="100dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
 
    <androidx.constraintlayout.utils.widget.MockView
        android:id="@+id/Name"
        android:layout_width="100dp"
        android:layout_height="30dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/Avatar"
        app:layout_constraintTop_toTopOf="@id/Avatar" />
 
    <androidx.constraintlayout.utils.widget.MockView
        android:id="@+id/Age"
        android:layout_width="100dp"
        android:layout_height="30dp"
        app:layout_constraintBottom_toBottomOf="@id/Avatar"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/Avatar" />

 十二、流式API（ConstraintProperties）

2.0版本提供了 ConstraintProperties 可以使用流式API修改属性。

val properties = ConstraintProperties(findViewById(R.id.image))
    properties.translationZ(32f)
          .margin(ConstraintSet.START, 43)
          .apply()

十三、ConstraintSet

在代码中动态的修改约束，从而实现布局效果的变化或动画。