美文网首页
ConstraintLayout - 4. 用链控制线性视图组(

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

作者: VittaWang | 来源:发表于2019-11-14 18:18 被阅读0次
    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的属性实现;对比之前的实现方案,需要嵌套好几层;

    相关文章

      网友评论

          本文标题:ConstraintLayout - 4. 用链控制线性视图组(

          本文链接:https://www.haomeiwen.com/subject/wsfdictx.html