ConstraintLayout

ConstraintLayout

1. 优点

   减少布局嵌套

2. ConstraintLayout使用

   1. 居中于父容器

      // 水平方向居中
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintEnd_toEndOf="parent"
      ​
      // 垂直方向居中
      app:layout_constraintTop_toTopOf="parent"
      app:layout_constraintBottom_toBottomOf="parent"

   2. 填充父容器

      // 水平方向填充父容器
      android:layout_width="0dp"

   3. 权重

      设置权重时注意控件在权重方向上的大小为0dp

      <!-- (view-1) -->
      android:layout_width="0dp"
      app:layout_constraintHorizontal_weight="2"
      ​
      <!-- (view-2) -->
      android:layout_width="0dp"
      app:layout_constraintHorizontal_weight="1"
      ​
      <!-- (view-3) -->
      android:layout_width="0dp"
      app:layout_constraintHorizontal_weight="1"

   4. 文字基线对其

      app:layout_constraintBaseline_toBaselineOf

   5. 圆形定位

      app:layout_constraintCircle="@id/view"
      app:layout_constraintCircleAngle="90"
      app:layout_constraintCircleRadius="180dp"

   6. 约束限制

      // 宽度不超过限制
      app:layout_constrainedWidth="true"
      // 高度不超过限制
      app:layout_constrainedHeight="true"

   7. 偏向

      app:layout_constraintTop_toTopOf="parent"
      app:layout_constraintBottom_toBottomOf="parent"
      // 控制控件在垂直⽅向的 30%的位置，非垂直方向居中
      app:layout_constraintVertical_bias="0.3"

   8. goneMargin

      // 约束前的控件为gone时距离起始边距为40dp
      app:layout_goneMarginStart="40dp"

   9. 约束链

      在约束链上的第⼀个控件上加上 chainStyle ，⽤来改变⼀组控件的布局⽅式

      • packed（打包）

      • spread （扩散）

      • spread_inside（内部扩散）

      // 垂直⽅向 packed
      app:layout_constraintVertical_chainStyle="packed"

   10. 宽⾼⽐

       1. ⾄少需要⼀个⽅向的值为 match_constraint

       2. 默认的都是宽⾼⽐，然后根据另外⼀条边和⽐例算出 match_constraint 的值 x:y 默认表示的都是 width:height

       3. 当宽高都是0dp时，默认是宽度填充父容器，高度由比例计算出

   11. 百分比布局

       • 需要对应⽅向上的值为 match_constraint

       • 百分⽐是 parent 的百分⽐，⽽不是约束区域的百分⽐

       android:layout_width="0dp"
       // 父容器的30%
       app:layout_constraintWidth_percent="0.3"

3. 辅助控件

   1. Guideline

      • 设置辅助线的⽅向 android:orientation="vertical"

      • 设置辅助线的位置，根据⽅向不同

        • 距离左侧或上侧的距离 layout_constraintGuide_begin

        • 距离右侧或下侧的距离 layout_constraintGuide_end

        • 百分⽐ layout_constraintGuide_percent

   2. Group

      通过 constraint_referenced_ids 使⽤引⽤的⽅式来避免布局嵌套。 可以为⼀组控件统⼀设置 setVisibility

   3. Layer

      和 Group 类似，同样通过引⽤的⽅式来避免布局嵌套，可以为⼀组控件统⼀设置旋转/缩放/位移。

   4. Barrier

      通过设置⼀组控件的某个⽅向的屏障，来避免布局嵌套。

      app:barrierDirection="end"
      app:constraint_referenced_ids="view1,view2"

   5. 自定义ConstraintHelper执行动画

      继承ConstraintHelper并重写updatePostLayout方法

      class CircularRevealHelper(context: Context, attrs: AttributeSet) : ConstraintHelper(context, attrs) {
      ​
          override fun updatePostLayout(container: ConstraintLayout?) {
              super.updatePostLayout(container)
      ​
              for (referencedId in referencedIds) {
                  val view = container!!.getViewById(referencedId)
                  val radius = Math.hypot(view.width.toDouble(), view.height.toDouble()).toInt()
      ​
                  ViewAnimationUtils.createCircularReveal(view, 0, 0, 0f, radius.toFloat())
                      .setDuration(2000L)
                      .start()
              }
          }
      }

   6. Placeholder

      Placeholder 通过 setContentId 来将指定控件放到占位符的位置。

   7. Flow

      通过引⽤的⽅式来避免布局嵌套。

      wrapMode

      • chain

      • aligned

      • none(默认)

        注意这个控件是可以被测量的，所以对应⽅向上的值可能需要被确定（即不能只约束同⼀⽅向的单个约 束）

          <androidx.constraintlayout.helper.widget.Flow
                  android:id="@+id/flow"
                  android:layout_width="0dp"
                  android:layout_height="wrap_content"
                  android:layout_marginStart="16dp"
                  android:layout_marginTop="16dp"
                  android:background="@color/colorAccent"
                  android:orientation="horizontal"
                  app:constraint_referenced_ids="view1,view2,view3,view4,view5,view6"
                  app:flow_horizontalGap="8dp"
                  app:flow_verticalGap="8dp"
                  app:flow_wrapMode="aligned"
                  app:layout_constraintEnd_toEndOf="parent"
                  app:layout_constraintStart_toStartOf="parent"
                  app:layout_constraintTop_toTopOf="parent" />

   8. ConstraintSet

      使⽤ ConstraintSet 对象来动态修改布局。

      防⽌布局中有⽆ id 控件，可以设置 isForceId = false

      通过 ConstraintSet#clone 来从 xml 布局中获取约束集。

4. 布局扁平化更加容易做过渡动画

   在布局修改之前 通过加上 TransitionManager 来⾃动完成过渡动画。

   TransitionManager.beginDelayedTransition(constraintLayout)

5.