ConstraintLayout - 4. 用链控制线性视图组(

2019-11-14  本文已影响0人  VittaWang
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的属性实现;对比之前的实现方案,需要嵌套好几层;

上一篇 下一篇

猜你喜欢

热点阅读