ConstraintLayout 未填充 Android 应用程序中的屏幕大小答案

【问题标题】：ContrainstLayout not filling the Screensize in Android AppConstraintLayout 未填充 Android 应用程序中的屏幕大小
【发布时间】：2021-01-23 00:11:45
【问题描述】：

我在将 Textview 添加到我的 ContraintLayout 时遇到了一些问题。当我在此配置中使用 3 或 4 个 EditText 时没有问题，并且元素很好地适合屏幕，但是当我添加更多 EditText 时，UI 会崩溃并且所有元素都彼此靠近。

但元素较少时看起来像这样：

<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ui.auth.RegisterFragment"
android:background="#fff">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:padding="16dp">

        <TextView
            android:id="@+id/register_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintBottom_toTopOf="@+id/input_nombre_layout"
            android:textSize="25sp"
            android:textColor="#000"
            android:text="@string/register"
            android:layout_marginTop="30dp"/>

        <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/input_nombre_layout"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            app:layout_constraintTop_toBottomOf="@+id/register_text"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintBottom_toTopOf="@+id/input_apellidos_layout"
            android:layout_marginTop="30dp"
            >

            <EditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/input_nombre"
                android:textColor="#000"
                android:hint="@string/nombre"
                android:inputType="textEmailAddress"
                />

        </com.google.android.material.textfield.TextInputLayout>


        <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/input_apellidos_layout"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            app:layout_constraintTop_toBottomOf="@+id/input_nombre_layout"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintBottom_toTopOf="@+id/input_email_layout"
            >

            <EditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/input_apellidos"
                android:textColor="#000"
                android:hint="@string/apellidos"
                android:inputType="text"
                />

        </com.google.android.material.textfield.TextInputLayout>


        <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/input_email_layout"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            app:layout_constraintTop_toBottomOf="@+id/input_apellidos_layout"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintBottom_toTopOf="@+id/input_password_layout"
            >

            <EditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/input_email"
                android:textColor="#000"
                android:hint="@string/email"
                android:inputType="text"
                />

        </com.google.android.material.textfield.TextInputLayout>

        <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/input_password_layout"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            app:layout_constraintTop_toBottomOf="@+id/email_input_layout"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintBottom_toTopOf="@+id/input_password_confirm_layout"
            >

            <EditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/input_password"
                android:textColor="#000"
                android:hint="@string/field_password"
                android:inputType="textPassword"
                />

        </com.google.android.material.textfield.TextInputLayout>


        <com.google.android.material.textfield.TextInputLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            app:layout_constraintTop_toBottomOf="@+id/input_password_layout"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintBottom_toTopOf="@+id/btn_register_register"
            android:id="@+id/input_password_confirm_layout"
            >

            <EditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/input_password_confirm"
                android:textColor="#000"
                android:hint="@string/field_confirm_password"
                android:inputType="textPassword"
                />

        </com.google.android.material.textfield.TextInputLayout>



        <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/input_numero_doc_layout"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            app:layout_constraintTop_toBottomOf="@+id/input_password_confirm_layout"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintBottom_toTopOf="@+id/input_telefono_layout"
            >

            <EditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/input_numero_doc"
                android:textColor="#000"
                android:hint="@string/numero_doc"
                android:inputType="text"
                />

        </com.google.android.material.textfield.TextInputLayout>

        <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/input_telefono_layout"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            app:layout_constraintTop_toBottomOf="@+id/input_numero_doc_layout"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintBottom_toTopOf="@+id/btn_register_register"
            >

            <EditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/input_telefono"
                android:textColor="#000"
                android:hint="@string/telefono"
                android:inputType="text"
                />

        </com.google.android.material.textfield.TextInputLayout>



        <Button
            android:id="@+id/btn_register_register"
            android:layout_width="0dp"
            android:layout_height="55dp"
            app:layout_constraintTop_toBottomOf="@+id/input_numero_doc_layout"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            android:background="@android:color/black"
            android:text="@string/terminar"
            android:textAllCaps="false"
            android:textColor="#fff"
            android:textSize="16sp"
            android:layout_marginTop="50dp"
            />

    </androidx.constraintlayout.widget.ConstraintLayout>


</ScrollView>

我想这个错误与 ScrollView 没有填满整个屏幕有关，但我不知道如何修复它。

【问题讨论】：

标签： android user-interface kotlin material-design android-constraintlayout

【解决方案1】：

如果你想用ConstrainLayout来安排像线性布局一样的布局，不要约束顶部和底部。选一个就够了。

<ScrollView
    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"
    android:background="#fff">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="16dp">

        <TextView
            android:id="@+id/register_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="30dp"
            android:text="register"
            android:textColor="#000"
            android:textSize="25sp"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/input_nombre_layout"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="30dp"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/register_text">

            <EditText
                android:id="@+id/input_nombre"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="nombre"
                android:inputType="textEmailAddress"
                android:textColor="#000" />

        </com.google.android.material.textfield.TextInputLayout>


        <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/input_apellidos_layout"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/input_nombre_layout">

            <EditText
                android:id="@+id/input_apellidos"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="apellidos"
                android:inputType="text"
                android:textColor="#000" />

        </com.google.android.material.textfield.TextInputLayout>


        <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/input_email_layout"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/input_apellidos_layout">

            <EditText
                android:id="@+id/input_email"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="email"
                android:inputType="text"
                android:textColor="#000" />

        </com.google.android.material.textfield.TextInputLayout>

        <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/input_password_layout"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/input_email_layout">

            <EditText
                android:id="@+id/input_password"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="field_password"
                android:inputType="textPassword"
                android:textColor="#000" />

        </com.google.android.material.textfield.TextInputLayout>


        <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/input_password_confirm_layout"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/input_password_layout">

            <EditText
                android:id="@+id/input_password_confirm"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="field_confirm_password"
                android:inputType="textPassword"
                android:textColor="#000" />

        </com.google.android.material.textfield.TextInputLayout>


        <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/input_numero_doc_layout"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/input_password_confirm_layout">

            <EditText
                android:id="@+id/input_numero_doc"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="numero_doc"
                android:inputType="text"
                android:textColor="#000" />

        </com.google.android.material.textfield.TextInputLayout>

        <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/input_telefono_layout"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/input_numero_doc_layout">

            <EditText
                android:id="@+id/input_telefono"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="telefono"
                android:inputType="text"
                android:textColor="#000" />

        </com.google.android.material.textfield.TextInputLayout>

        <Button
            android:id="@+id/btn_register_register"
            android:layout_width="0dp"
            android:layout_height="55dp"
            android:layout_marginTop="50dp"
            android:background="@android:color/black"
            android:text="terminar"
            android:textAllCaps="false"
            android:textColor="#fff"
            android:textSize="16sp"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/input_telefono_layout" />

    </androidx.constraintlayout.widget.ConstraintLayout>

</ScrollView>

【讨论】：

【解决方案2】：

您似乎没有正确引用 id

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/input_email_layout" // this one
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    .....

而密码字段引用差异 id

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/input_password_layout"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintTop_toBottomOf="@+id/email_input_layout" // this one
    .....

我认为如果你删除这个约束并改为底部边距会更好

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/input_apellidos_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"            
    app:layout_constraintBottom_toTopOf="@+id/email_input_layout"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/input_nombre_layout"> // delete this line and replace with margin bottom

对其他人也这样做

【讨论】：

感谢您的帮助。我将开始以这种方式使用约束。这个答案也很有帮助，但我将另一个答案标记为已接受。