使用ConstraintLayout实现文字后紧跟图标一行显示

image.png

要实现如图textview一行显示多余省略且紧跟小图标UI，历来较为费劲，之前代码中皆使用自定义View或者Spanner实现。今天探讨下如何使用ConstraintLayout在布局文件中实现效果。

先介绍下代码中用到的ConstraintLayout的三个关键属性：

1、chainstyle（链式）

**属性 **有水平和垂直之分：

• layout_constraintHorizontal_chainStyle 水平方向
• layout_constraintVertical_chainStyle 垂直方向

属性值 有三种：

• spread (默认) 如下：

  • 默认模式如下：

    image

  • 使用weight方式如下：（layout_width=0dp）

    添加属性layout_constraintHorizontal_weight ,同理也有垂直方向的，可以自己尝试

    image

• spread_inside

  image

• packed

  • 捆绑在一起居中显示

    image

  • 偏移显示

    添加属性layout_constraintHorizontal_bias

    image

2、app:layout_constrainedWidth（约束宽度）

• 此属性表示约束宽度，相应的也有约束高度app:layout_constrainedHeight
• 设置为true即约束宽度或高度不超出父布局之外

3、app:layout_constraintHorizontal_bias（偏移比例）

• 相应的也有app:layout_constraintVertical_bias可设置在某个方向上的偏移比例，比如当控件宽度未wrap_content,设置该属性为0则会偏移至父布局Start位置

总结：

• 1.为两个控件设置宽度为wrap_content

• 2.然后使之产生链式关系

• 3.使得两个控件抱在一起 app:layout_constraintHorizontal_chainStyle="packed"

• 4.设置其不可超出父布局app:layout_constrainedWidth="true"

• 5.设置链头控件的偏移比例app:layout_constraintHorizontal_bias="0"

• 6.增加一个垂直的Guideline作为链尾