约束布局(ConstraintLayout) – 让元素占用必要的空间

我有一个TextView和一个Button按顺序在一个ConstraintLayout中水平组织:

工作案例

我需要第一个元素(TextView)在文本足够短的时候只占用必要的空间,而在需要显示更多文本的同时还要留出足够的空间让第二个元素(Button)完全渲染该视图的结尾与父对象的结尾alignment。

这是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)

谢谢!

Solutions Collecting From Web of "约束布局(ConstraintLayout) – 让元素占用必要的空间"

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

这里的解决scheme:

 <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> 

下面是这个布局在不同的文本和方向上看起来如何:

结果视图

您可以阅读更多关于在以下post中使用链的信息:

  • 用ConstraintLayout构build接口
  • 使用ConstraintLayout构build响应式UI

尝试这样的事情:

 <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>