ConstraintLayout實(shí)戰(zhàn)小技巧—實(shí)現(xiàn)布局跟隨效果

需求

有時(shí)UI小姐姐可能想要這樣的效果，左側(cè)的標(biāo)題長(zhǎng)度不定，標(biāo)題后面跟著一個(gè)標(biāo)簽，根據(jù)標(biāo)題長(zhǎng)度不同，可以有以下幾種樣式：

①標(biāo)題超過一行

②標(biāo)題無內(nèi)容

③標(biāo)題不足一行

具體效果如下圖

image

實(shí)現(xiàn)方式

效果有了，接下來是如何實(shí)現(xiàn)，不使用ConstraintLayout的前提下，我們使用常規(guī)的RelativeLayout、LinearLayout等布局去做，做到最后會(huì)發(fā)現(xiàn)不好做或者做不出來，真心難過。

幸好我們有ConstraintLayout(真香)。

怎么寫呢？核心就是，先將元素串成一個(gè)chain，鏈的樣式選擇packed，這還不夠，同時(shí)在給第一個(gè)元素設(shè)置下面兩個(gè)屬性：

app:layout_constrainedWidth="true"
app:layout_constraintHorizontal_bias="0"

大功告成，具體代碼如下：

<android.support.constraint.ConstraintLayout
        android:id="@+id/cl"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_marginTop="10dp"
        android:background="#eee"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        app:layout_constraintTop_toBottomOf="@id/tv_desc">

        <TextView
            android:id="@+id/tv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:ellipsize="end"
            android:gravity="center"
            android:maxLines="1"
            android:text="我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本"
            android:textColor="#FDA413"
            android:textSize="12sp"
            app:layout_constrainedWidth="true"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintHorizontal_bias="0"
            app:layout_constraintHorizontal_chainStyle="packed"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toLeftOf="@id/iv"
            app:layout_constraintTop_toTopOf="parent" />

        <ImageView
            android:id="@+id/iv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:src="@drawable/icon_birthday_cake"
            android:visibility="visible"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toRightOf="@id/tv"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            tools:visibility="visible" />

    </android.support.constraint.ConstraintLayout>