使用ConstraintLayout实现文字后紧跟图标一行显示
2021-01-22 本文已影响0人
解语何妨话片时
image.png
要实现如图textview一行显示多余省略且紧跟小图标UI,历来较为费劲,之前代码中皆使用自定义View或者Spanner实现。今天探讨下如何使用ConstraintLayout在布局文件中实现效果。
<TextView
android:id="@+id/text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="1"
android:text="车款出口处可参考车款吃烤肠车车款出口处可参考车款吃烤肠车"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/image_view"
app:layout_constraintStart_toStartOf="parent"
app:layout_constrainedWidth="true"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintHorizontal_chainStyle="packed" />
<ImageView
android:id="@+id/image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/white_down"
app:layout_constraintBottom_toBottomOf="@id/text_view"
app:layout_constraintTop_toTopOf="@id/text_view"
app:layout_constraintStart_toEndOf="@id/text_view"
app:layout_constraintEnd_toEndOf="@+id/carmodel_guide_end"
app:layout_constraintHorizontal_chainStyle="packed"
/>
先介绍下代码中用到的ConstraintLayout的三个关键属性:
1、chainstyle(链式)
**属性 **有水平和垂直之分:
-
layout_constraintHorizontal_chainStyle
水平方向 -
layout_constraintVertical_chainStyle
垂直方向
属性值 有三种:
-
spread (默认) 如下:
-
默认模式如下:
image -
使用weight方式如下:(layout_width=0dp)
添加属性
imagelayout_constraintHorizontal_weight
,同理也有垂直方向的,可以自己尝试
-
-
spread_inside
image -
packed
-
捆绑在一起居中显示
image -
偏移显示
添加属性
imagelayout_constraintHorizontal_bias
-
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
作为链尾