image.png

要實(shí)現(xiàn)如圖textview一行顯示多余省略且緊跟小圖標(biāo)UI，歷來(lái)較為費(fèi)勁，之前代碼中皆使用自定義View或者Spanner實(shí)現(xiàn)。今天探討下如何使用ConstraintLayout在布局文件中實(shí)現(xiàn)效果。

  <TextView
        android:id="@+id/text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        android:maxLines="1"
        android:text="車(chē)款出口處可參考車(chē)款吃烤腸車(chē)車(chē)款出口處可參考車(chē)款吃烤腸車(chē)"
        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的三個(gè)關(guān)鍵屬性：

1、chainstyle（鏈?zhǔn)剑?/h4>

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

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

屬性值 有三種：

• spread (默認(rèn)) 如下：

  • 默認(rèn)模式如下：

    image

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

    添加屬性layout_constraintHorizontal_weight ,同理也有垂直方向的，可以自己嘗試

    image

• spread_inside

  image

• packed

  • 捆綁在一起居中顯示

    image

  • 偏移顯示

    添加屬性layout_constraintHorizontal_bias

    image

2、app:layout_constrainedWidth（約束寬度）

• 此屬性表示約束寬度，相應(yīng)的也有約束高度app:layout_constrainedHeight
• 設(shè)置為true即約束寬度或高度不超出父布局之外

3、app:layout_constraintHorizontal_bias（偏移比例）

• 相應(yīng)的也有app:layout_constraintVertical_bias可設(shè)置在某個(gè)方向上的偏移比例，比如當(dāng)控件寬度未wrap_content,設(shè)置該屬性為0則會(huì)偏移至父布局Start位置

總結(jié)：

• 1.為兩個(gè)控件設(shè)置寬度為wrap_content

• 2.然后使之產(chǎn)生鏈?zhǔn)?/code>關(guān)系

• 3.使得兩個(gè)控件抱在一起 app:layout_constraintHorizontal_chainStyle="packed"

• 4.設(shè)置其不可超出父布局app:layout_constrainedWidth="true"

• 5.設(shè)置鏈頭控件的偏移比例app:layout_constraintHorizontal_bias="0"

• 6.增加一個(gè)垂直的Guideline作為鏈尾