Question

我希望将视图集中在另一个视图之下，然后退出＆＃34;电子邮件下的按钮：

我通过使用ConstraintLayout作为父级并将底部视图的左右边缘约束到顶视图的左右边缘来完成此操作。这恰当地集中了两个视图。（请注意，我不希望将视图置于父级中心。）

我遇到的问题是，如果顶视图很窄，底部视图最终会被父项截断，就像这里（来自布局编辑器）一样：

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

我想设置约束，以便底部视图在顶视图下居中，但如果它向右移动得太远，它会向左移动，以避免越过指南。顶视图的右边缘需要保持固定。我怎样才能达到这个效果？（如果有其他方式可以更好地运作，我就不会使用ConstraintLayout。）

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

<?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不允许您为给定视图的边缘执行多个约束，因此无法执行此操作。

但LinearLayout的垂直android: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>

Answer 2

假设有2个视图。

选择第一视图
按 shift
选择第二视图。
右键单击
选择对齐 >> 水平中心。

完成。

Answer 3

我没有把你弄得很完美，但是我发布了我理解的答案。

<?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_marginTop="20dp"
    android:layout_marginRight="20dp"
    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" />

<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="SIGNOUT"
    android:visibility="gone"
    app:layout_constraintTop_toBottomOf="@id/user_name"
    tools:visibility="visible"
    app:layout_constraintLeft_toLeftOf="@+id/user_name"
    app:layout_constraintRight_toRightOf="@+id/user_name" />

Answer 4

我认为这是尝试它

<?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@mail.com"
    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:layout_marginTop="8dp"
    app:layout_constraintBottom_toBottomOf="parent"
    android:layout_marginBottom="8dp"
    app:layout_constraintVertical_bias="0.0"
    android:layout_marginRight="8dp"
    app:layout_constraintRight_toRightOf="parent"
    android:layout_marginLeft="8dp"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/sign_out"
    app:layout_constraintHorizontal_bias="0.0" />

<Button
    android:id="@+id/sign_out"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="11dp"
    android:background="@android:drawable/dialog_holo_light_frame"
    android:text="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:layout_marginRight="11dp" />

</android.support.constraint.ConstraintLayout>

ConstraintLayout：如何将视图置于另一个视图之下并保持在父边界内？

4 个答案:

修改