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的属性实现;对比之前的实现方案,需要嵌套好几层;
网友评论