ConstraintLayout:如何将视图居中放置在另一个视图下并同时保持在父范围之内? [英] ConstraintLayout: how to center a view under another and also stay within parent bounds?

问题描述

我想将视图居中放置在电子邮件下方，例如退出"按钮.

I want to center a view under another like this "sign out" button under the email:

我通过使用ConstraintLayout作为父级并将底部视图的左右边缘限制在顶部视图的左右边缘中来做到这一点.这样可以正确地将两个视图居中. (请注意，我不想要在父视图中居中.)

I did this by using a ConstraintLayout as the parent and constraining the bottom view's left and right edges to the left and right edges of the top view. This properly centers the two views. (Note that I don't want to center the views in the parent.)

我遇到的问题是，如果顶视图较窄，则底视图最终可能会在父视图的右边被截断，如下所示(来自布局编辑器):

The problem I'm having is that if the top view is narrow, the bottom view can end up truncated on the right by the parent, as here (from the layout editor):

我事先不知道运行时顶视图有多窄. (它不一定是电子邮件地址，即使是，我也知道有人的电子邮件地址只有8个字符！)

I don't know in advance how narrow the top view will be at run time. (It won't necessarily be an email address, and, even if it were, I know someone whose email address is only 8 characters!)

我想设置约束条件，以使底视图位于顶视图的中心，但是如果它最终右移得太远，则它向左移动的程度足以避免越过参考线.顶视图的右边缘需要保持固定.我怎样才能达到这种效果? (如果还有其他更好的方法，我不愿意使用ConstraintLayout.)

I would like to set up constraints so that the bottom view is centered under the top view, but if it ends up too far to the right, it shifts left just enough to avoid crossing a guideline. The right edge of the top view needs to remain fixed. How can I achieve this effect? (I'm not wedded to using a ConstraintLayout if there's another way that will work better.)

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

Here's the actual layout file I'm using:

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

推荐答案

在我看来，这似乎是ConstraintLayout并非最佳工作工具的情况.您可能仍会以ConstraintLayout作为顶层视图，但是要获得所需的内容，我相信您必须将TextView和Button嵌套在LinearLayout中.

This sounds to me like a case where ConstraintLayout isn't the best tool for the job. You might still wind up using ConstraintLayout as your top-level view, but to get what you want I believe you will have to nest your TextView and Button inside a LinearLayout.

问题的核心在于，您希望哪个视图更宽都可以触摸父级的边缘，哪个视图更小以便相对于更宽的视图水平居中.鉴于ConstraintLayout不允许您对给定视图的边缘执行多个约束，因此无法做到这一点.

The core of the problem is that you want whichever view is wider to touch the edge of the parent, and whichever view is smaller to be horizontally centered against the wider view. Given that ConstraintLayout doesn't let you do more than one constraint for a given view's edge, it's not capable of doing this.

带有android:gravity="center_horizontal"的垂直LinearLayout应该可以完全满足您的要求.然后，您可以将其放置在屏幕的右上角(可以使用ConstraintLayout或其他方式).

A vertical LinearLayout with android:gravity="center_horizontal" should do exactly what you want, however. And then you can position that at the top-right of your screen (maybe by using ConstraintLayout, or maybe some other way).

重新阅读您的问题后，我意识到我误解了您的要求.您需要TextView始终位于右上角，并且Button始终位于文本视图的下方，除非这会导致其被父级边缘剪裁.

After re-reading your question, I realize I misunderstood your requirements. You need the TextView to always be positioned in the top-right corner, and the Button to be centered beneath the text view unless that would cause it to be clipped by the edge of the parent.

我仍然认为LinearLayout是前往这里的方法，但是您需要对它的子级更加精明.这应该起作用:

I still think LinearLayout is the way to go here, but you'll need to be a little more sophisticated with its children. This should work:

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

这篇关于ConstraintLayout:如何将视图居中放置在另一个视图下并同时保持在父范围之内?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！