期望实现的效果

期望效果.png

这个效果看上去很简单，但是等到要实现的时候，发现用常规的布局在左侧文字较长的时候，右侧文字标签的控件会控件被左侧文字挤压导致标签控件显示不了（LinearLayout、RelativeLayout都存在一样的问题）（修改：评论给出了一种用LinearLayout实现的一种方式更便捷，那么这篇文章就当做提供另外一种方案吧- -）

使用ConstraintLayout就能解决这个问题，先贴个代码：

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    
    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/tv2"
        android:ellipsize="end"
        android:maxLines="1"
        android:id="@+id/tv1"
        android:textSize="20dp"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintHorizontal_bias="0"
        app:layout_constraintWidth_default="wrap"
        android:text="王小明"
        />
    
    <TextView
        app:layout_constraintBottom_toBottomOf="@+id/tv1"
        app:layout_constraintRight_toRightOf="parent"
        android:background="@drawable/co_border_blue"
        app:layout_constraintLeft_toRightOf="@+id/tv1"
        app:layout_constraintTop_toTopOf="@id/tv1"
        android:id="@+id/tv2"
        android:text="父亲"
        android:paddingLeft="5dp"
        android:paddingRight="5dp"
        android:visibility="visible"
        android:textSize="15dp"
        android:textColor="#59baf5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />



</androidx.constraintlayout.widget.ConstraintLayout>

核心思路

第一步先把两个文本的对齐方式约束起来

左侧文本需要在右侧文本右侧，右侧文本需要在左侧文本左侧，右侧文本还需要和父布局右对齐

关键代码

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintRight_toLeftOf="@+id/tv2"
        android:id="@+id/tv1"
        ...
        />
        
    这里tv1设置layout_width="0dp"，即match_constraint，如果自适应则按照目前的约束方式两个文本整体会居中  
        
    
   
       
       

    <TextView
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/tv1"
        android:id="@+id/tv2"
        android:text="父亲"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        ...
        />

这个时候的效果：

效果1.png

虽然第二种场景下满足了，但是第一种场景下是不符合期望的，这个时候需要考虑再进一步约束：
1）左侧文字需要做到自适应
2）左侧文字自适应后需要对齐到最左侧
3）自适应后左右侧文字需要连接在一起所以进一步引入了【链条样式】

关键代码：

<TextView
    android:id="@+id/tv1"
    app:layout_constraintHorizontal_chainStyle="packed"
    app:layout_constraintHorizontal_bias="0"
    app:layout_constraintWidth_default="wrap"
    android:text="王小明"
    />

app:layout_constraintHorizontal_chainStyle="packed" 使链条上的元素都打包到一起 app:layout_constraintHorizontal_bias="0" 使左侧控件最左侧对齐 app:layout_constraintWidth_default="wrap" 使左侧文字自适应大小并且不超过约束限制，默认是“spread”，会占用所有符合约束的控件

这样就完成了目标的效果

ConstraintLayout解决的一种布局问题

期望实现的效果

核心思路