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)

谢谢！

- droid256

---

TextView有一个属性android:maxLength = "maxNumberOfChars"，但这并不能解决不同屏幕尺寸的问题。 - LSA

是的，那是我的当前解决方法，也正是我当前的问题所在 >< 谢谢！ - droid256

你有代码的访问权限吗？ - Jay Harris

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 构建响应式用户界面

- Eugene Brusov

Answer 2

尝试像这样做一些事情：

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="16dp">

    <TextView
        android:id="@+id/element1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/element2"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="A longer text that will cause most of the bottom to get pushed outside of the parent view bounds" />

    <Button
        android:id="@+id/element2"
        android:layout_width="wrap_content"
        android:layout_height="48dp"
        android:layout_marginEnd="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginStart="8dp"
        android:text="Action"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

- Rapunzel Van Winkle