ConstraintLayout - 4. 用链控制线性视图组（Control linear groups with a chain）

1.知识点

链是一组具有双向约束的，彼此连接的视图。链中的视图可以垂直分布或者水平分布。
链有下面4种分布样式

Spread 分散	Spread inside 内部分散	Weighted 权重	Packed 紧靠在一起（打包）

链中的view平均分配（evenly distributed）	头和尾的view贴边，其他view平均分配（affixed to the constraints on each end of the chain.）	设置match_constraint,然后设置权重，跟LinearLayout一样	会紧靠在一起，但是可以设置整个的bias，调整整个链的约束偏差

链头的view定义了整个链的style（上面四种）。但是链中的每一个视图都可以调整自己的style。
注意事项
① 一个view可以是横向链的一部分和纵向链的一部分，这使得创建网格布局非常灵活
② 链的每一端都约束到同一轴的其他对象上，链才能正常工作
③ 尽管链的方向可以是横向和纵向的，但是只使用链并不会使view在那个方向上对齐。所以要确保你引入了其他约束控制视图合适的位置或对齐等。

2.最佳实践，用户名后面跟着一个用户等级，要求

① 标签要紧跟着用户名
② 延长用户名延长
③ 延长到不够空间了，用户名打点，标签就在最右边了；

3.实现方案

① 使用chain链子将用户名和tag拴起来
② 设置chainStyle 为packed，紧靠在一起的
③ 设置横向视图偏差bias为0f，紧靠在左边

<?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="50dp"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/avatar_iv"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_marginStart="8dp"
        android:src="@mipmap/ic_launcher"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/name_tv"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:ellipsize="end"
        android:maxLines="1"
        android:text="这是一个用户名这是一个用户名这是一个用户名"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/tag_tv"
        app:layout_constraintHorizontal_bias="0"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintStart_toEndOf="@id/avatar_iv"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_default="wrap" />

    <TextView
        android:id="@+id/tag_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        android:background="#756BFF"
        android:paddingStart="2dp"
        android:paddingEnd="2dp"
        android:text="标签，全部展示"
        android:textColor="#fff"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/name_tv"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

现在的实现方案，不需要嵌套，使用ConstraintLayout的属性实现；对比之前的实现方案，需要嵌套好几层；

最后编辑于：2019.11.14 18:19:41