ConstraintLayout：如何将视图居中并保持在父边界内？

Question

我想将一个视图放在另一个像电子邮件下的“退出”按钮下：

我通过使用 aConstraintLayout作为父级并将底部视图的左右边缘限制到顶部视图的左右边缘来做到这一点。这正确地使两个视图居中。（请注意，我并不想中心父的意见。）

我遇到的问题是，如果顶视图很窄，底视图最终会被父视图在右侧截断，如下所示（来自布局编辑器）：

我事先不知道在运行时顶视图会有多窄。（它不一定是电子邮件地址，即使是，我也认识一个电子邮件地址只有 8 个字符的人！）

我想设置约束，以便底视图在顶视图下方居中，但如果它向右太远，它会向左移动，以避免越过指南。顶视图的右边缘需要保持固定。我怎样才能达到这种效果？（ConstraintLayout如果有另一种更好的方法，我不会坚持使用 a 。）

这是我正在使用的实际布局文件：

<?xml version="1.0" encoding="utf-8"?>
<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="match_parent">

    <TextView
        android:id="@+id/user_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="10dp"
        android:layout_marginTop="10dp"
        android:text="user"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:ignore="HardcodedText"
        tools:layout_constraintRight_creator="1"
        tools:layout_constraintTop_creator="1"/>

    <View
        android:id="@+id/scrim"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@android:color/transparent"
        android:visibility="gone"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:layout_constraintLeft_creator="1"
        tools:layout_constraintTop_creator="1"
        tools:visibility="visible"/>

    <Button
        android:id="@+id/sign_out"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:background="@android:drawable/dialog_holo_light_frame"
        android:text="@string/sign_out"
        android:visibility="gone"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/user_name"
        tools:visibility="visible"/>

</android.support.constraint.ConstraintLayout>

Answer 1

在我看来，这ConstraintLayout并不是完成这项工作的最佳工具。您可能仍然会用作ConstraintLayout顶级视图，但为了获得您想要的内容，我相信您必须将TextView和嵌套Button在 LinearLayout 内。

问题的核心是您希望哪个视图更宽以接触父级的边缘，而哪个视图更小以相对于更宽的视图水平居中。鉴于这ConstraintLayout不允许您对给定视图的边缘执行多个约束，因此它无法执行此操作。

然而，垂直的LinearLayoutwithandroid:gravity="center_horizontal"应该完全符合您的要求。然后您可以将其放置在屏幕的右上角（也许通过使用ConstraintLayout，或者其他方式）。

编辑

重新阅读您的问题后，我意识到我误解了您的要求。您需要TextView始终将 放置在右上角，并将Button放置在文本视图下方居中，除非这会导致它被父级边缘剪切。

我仍然认为LinearLayout这是正确的方法，但你需要对它的孩子更加成熟一点。这应该有效：

<ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        constrants=top-right>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="end"/>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"/>

    </LinearLayout>

</ConstraintLayout>