ConstraintLayout 未填充 Android 应用程序中的屏幕尺寸

Question

我在将 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 没有填满整个屏幕有关，但我不确定如何修复它。

Answer 1

您似乎没有正确引用 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

并为其他人做同样的事情

Answer 2

如果你想用 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>

ConstraintLayout 未填充 Android 应用程序中的屏幕尺寸

ContrainstLayout not filling the Screensize in Android App

user-interface

android

kotlin

material-design

android-constraintlayout