在 ConstraintLayout 中将视图向右对齐而不剪切

Question

我正在创建一个对话框，并将两个按钮与父ConstraintLayout右对齐。

一切都很好，直到按钮文本变得非常长。当任一或两个按钮的文本很长时，按钮会延伸超出父级边界，导致文本被裁剪，如下图所示。我想处理文本较长的情况。

即：

- 当文本很长时，按钮应换行。 - 按钮应保持在父级范围内并遵守父级填充。 - 按钮应保持右对齐于父级。 当按钮文本很短时，布局按预期工作：

当按钮文本很长时：

• 取消按钮的文本会被截断，这是因为按钮本身被推出了父元素的边界。
• 当确定按钮的文本很长时，取消按钮的文本也会被推出父元素的边界，同样是因为按钮被推出了父元素的边界。

布局代码：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingBottom="@dimen/dialog_padding"
    android:paddingLeft="@dimen/dialog_padding"
    android:paddingRight="@dimen/dialog_padding"
    android:paddingTop="@dimen/dialog_padding">

    <TextView
        android:id="@+id/dialog_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/dialog_text_margin"
        tools:text="Dialog title" />

    <TextView
        android:id="@+id/dialog_content"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/dialog_text_margin"
        app:layout_constraintTop_toBottomOf="@id/dialog_title"
        tools:text="Dialog text content" />

    <Button
        android:id="@+id/cancel_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toStartOf="@id/ok_btn"
        app:layout_constraintTop_toBottomOf="@id/dialog_content"
        tools:text="Dismiss" />

    <Button
        android:id="@+id/ok_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@id/dialog_content"
        tools:text="Accept" />
</android.support.constraint.ConstraintLayout>

我尝试过但无效的方法：

• 将app:layout_constraintStart_toStartOf="parent"添加到取消按钮会导致按钮不再右对齐，因此该解决方案是不正确的
• 将忽略按钮的结束约束到接受按钮的开始会导致按钮不再右对齐
• 使用layout_width="0dp"为按钮设置宽度，并使用app:layout_constrainedWidth="true"没有效果

- VIN

---

当您将取消按钮的末端约束到接受按钮的开头时，是否在按钮视图上设置了 app:layout_constraintHorizontal_bias="1.0"？ - rjr-apps

@nope4561759 我按水平方向链接它们，并像你说的那样将偏置设置为1.0，但是偏置没有任何效果。在那个改变之后，按钮实际上更向左对齐了。 - VIN

仅供记录，想要补充说明的是，在取消按钮中添加app:layout_constraintStart_toStartOf="parent"的答案是不正确的，因为它会使按钮不再向右对齐。 - VIN

Answer 1

这里有两张屏幕截图，展示了我认为你正在尝试实现的内容。

首先是一些简短的文本：

现在是一些长文本：

我对布局进行了一些修改，并在宽度的33%处放置了指南线，以限定按钮的大小。由于您没有指定按钮可以水平扩展的程度，因此我做了这个假设。

以下是此布局的XML代码。我将按钮的宽度设置为0dp或match_constraints，以便其大小能够自适应调整。我还将这两个按钮放入了一个packed链中，将它们组合到了一起。水平偏移量现在设置为0.5，但如果您需要，可以增加它，使该组向右移动，以防左偏。

ConstraintLayout文档中对这些特性及其如何使用进行了很好的描述。

<android.support.constraint.Guideline
    android:id="@+id/guideline"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.33" />

<TextView
    android:id="@+id/dialog_title"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="@dimen/dialog_text_margin"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    tools:text="Dialog title" />

<Button
    android:id="@+id/cancel_btn"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintEnd_toStartOf="@+id/ok_btn"
    app:layout_constraintHorizontal_chainStyle="packed"
    app:layout_constraintStart_toEndOf="@+id/guideline"
    app:layout_constraintTop_toBottomOf="@+id/dialog_title"
    tools:text="Dismiss" />

<Button
    android:id="@+id/ok_btn"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginEnd="8dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/cancel_btn"
    app:layout_constraintTop_toTopOf="@+id/cancel_btn"
    tools:text="Accept" />

- Cheticamp