ConstraintLayout - 让元素占用必要的空间直到可用的空间

Question

我在ConstraintLayout中按顺序水平组织了TextView和Button:

我需要第一个元素(TextView)在文本足够短时只占用必要的空间,但是当需要显示更多文本时必要时展开,同时仍然留下足够的空间让第二个元素(Button)完全呈现在里面视图,其末尾与父级的末尾对齐.

这就是XML目前的样子:

<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="16dp">

    <TextView
        android:id="@+id/element1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="Short enough text"/>

    <Button
        android:id="@+id/element2"
        android:layout_width="wrap_content"
        android:layout_height="48dp"
        android:layout_gravity="center_vertical"
        android:layout_marginEnd="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginStart="8dp"
        android:drawableLeft="@drawable/element2ButtonDrawable"
        android:drawablePadding="0dp"
        android:drawableStart="@drawable/element2ButtonDrawable"
        android:text="Action"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@id/element1"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintHorizontal_bias="0.0"/>

 </android.support.constraint.ConstraintLayout>

这是从"足够短的文本"切换到"将导致大部分底部被推到父视图边界之外的较长文本"时树呈现的方式:

是否有可能通过使用ConstraintLayout实现我想要做的事情？

(在撰写本文时,最新版本为1.0.2)

谢谢!

Answer 1

您应该使用打包的水平链，您的 TextView 的宽度与约束匹配并且水平偏差等于 0.0

这是解决方案：

<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="16dp">

    <TextView
        android:id="@+id/textView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginRight="8dp"
        android:text="Short enough text"
        app:layout_constraintWidth_default="wrap"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintHorizontal_bias="0.0" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="48dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:drawablePadding="0dp"
        android:drawableStart="@drawable/element2buttondrawable"
        android:text="Action"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/textView"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

</android.support.constraint.ConstraintLayout>

以下是此布局在具有不同文本和方向的设备上的外观：

您可以在以下文章中阅读有关使用链的更多信息：

• 使用 ConstraintLayout 构建界面
• 使用 ConstraintLayout 构建响应式 UI