Motion Layout con EditText destruye animaciones


10

Creé un MotionLayout simple que es casi similar a un diseño de coordinador (las animaciones son ligeramente diferentes).
Algo como esto aquí:

ingrese la descripción de la imagen aquí ingrese la descripción de la imagen aquí

El uso de (un par) Vistas de Editar Texto dentro del área de contenido interrumpe las Animaciones MotionLayout una vez que el Teclado estuvo abierto. Las animaciones ahora tienen un retraso, los estados son incorrectos y la interfaz de usuario comienza a congelarse un poco. ¿Alguna idea de como resolver esto? Enlace al error como gif

Versiones utilizadas:

com.google.android.material:material:1.2.0-alpha01
androidx.constraintlayout:constraintlayout:2.0.0-beta3

Podría reproducir el comportamiento también en una pequeña aplicación de muestra

Ejemplo de layout.xml:

<androidx.constraintlayout.motion.widget.MotionLayout 
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"
app:layoutDescription="@xml/animation"
tools:showPaths="true">

<androidx.appcompat.widget.Toolbar
    android:id="@+id/customtoolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<com.google.android.material.textview.MaterialTextView
    android:id="@+id/title"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="32dp"
    android:layout_marginBottom="48dp"
    android:text="title"
    app:layout_constraintBottom_toTopOf="@+id/formLayout"
    app:layout_constraintStart_toStartOf="parent" />

<ImageView
    android:id="@+id/image"
    android:layout_width="200dp"
    android:background="#ff00ff"
    android:layout_height="200dp"
    android:scaleType="centerCrop"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:srcCompat="@drawable/ic_home_black_24dp" />


<androidx.core.widget.NestedScrollView
    android:id="@+id/formLayout"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/image">

    <LinearLayout
        android:id="@+id/formLayoutContainer"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/container1"
            android:layout_width="match_parent"
            android:layout_height="200dp">

            <EditText
                android:id="@+id/container1EditText"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="EditText"
                android:importantForAutofill="no"
                android:inputType="text"
                android:lines="1" />
        </com.google.android.material.textfield.TextInputLayout>

        <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/container2"
            android:layout_width="match_parent"
            android:layout_height="200dp">

            <EditText
                android:id="@+id/container2EditText"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="EditText"
                android:importantForAutofill="no"
                android:inputType="text"
                android:lines="1" />
        </com.google.android.material.textfield.TextInputLayout>

        <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/container3"
            android:layout_width="match_parent"
            android:layout_height="200dp">

            <EditText
                android:id="@+id/container3EditText"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="EditText"
                android:importantForAutofill="no"
                android:inputType="text"
                android:lines="1" />
        </com.google.android.material.textfield.TextInputLayout>

        <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/container4"
            android:layout_width="match_parent"
            android:layout_height="200dp">

            <EditText
                android:id="@+id/container4EditText"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="EditText"
                android:importantForAutofill="no"
                android:inputType="text"
                android:lines="1" />
        </com.google.android.material.textfield.TextInputLayout>

        <com.google.android.material.button.MaterialButton
            android:id="@+id/saveButton"
            android:layout_width="120dp"
            android:layout_height="wrap_content"
            android:layout_gravity="end"
            android:layout_marginTop="24dp"
            android:layout_marginBottom="16dp"
            android:text="Save" />
    </LinearLayout>

</androidx.core.widget.NestedScrollView>

</androidx.constraintlayout.motion.widget.MotionLayout>

animation.xml:

<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">

<Transition
    app:constraintSetEnd="@id/end"
    app:constraintSetStart="@id/start"
    app:motionInterpolator="easeIn">

    <OnSwipe
        app:dragDirection="dragUp"
        app:touchAnchorId="@id/formLayout"
        app:touchAnchorSide="top" />

</Transition>

<ConstraintSet android:id="@+id/start">
    <Constraint
        android:id="@id/image"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:alpha="1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Constraint
        android:id="@id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="32dp"
        android:layout_marginBottom="48dp"
        android:scaleX="1.0"
        android:scaleY="1.0"
        app:layout_constraintBottom_toTopOf="@+id/formLayout"
        app:layout_constraintStart_toStartOf="parent" />
</ConstraintSet>

<ConstraintSet android:id="@+id/end">
    <Constraint
        android:id="@id/image"
        android:layout_width="200dp"
        android:layout_height="72dp"
        android:alpha="0"
        android:translationY="-10dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Constraint
        android:id="@id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="55dp"
        android:scaleX="0.85"
        android:scaleY="0.85"
        app:layout_constraintBottom_toBottomOf="@id/customtoolbar"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@id/customtoolbar" />
</ConstraintSet>

<KeyFrameSet>
    <KeyPosition
        app:framePosition="70"
        app:keyPositionType="pathRelative"
        app:motionTarget="@id/title"
        app:percentY="0.1" />

    <KeyAttribute
        android:alpha="0.8"
        app:framePosition="60"
        app:motionTarget="@id/image" />

</KeyFrameSet>

</MotionScene>

Se debe a un evento de desplazamiento diferente con / o sin teclado. Para nuestro caso, simplemente deshabilitamos el desplazamiento de AppBarLayout.
GensaGames

¿Cuál es el valor de windowSoftInputMode en su manifiesto? Cuando se desplaza, parece que el EditText enfocado se desplaza nuevamente a la vista, lo que tiene sentido. No está claro lo que quiere que suceda en este escenario. Puede intentar cambiar el valor de windowSoftInputMode para ver si le ayuda en algo.
Cheticamp

¿Te importa poner tu muestra en github para que podamos ayudarte a analizar desde allí?
Isai Damier el

@IsaiDamier github.com/CaptMustache/views-widgets-samples Acabo de agregar un campo EditText al final del scolllayout. Consulte las "Muestras de movimiento complejo" y juegue con Inputfield + Keyboard +
Scrolling

@GensaGames El enfoque aquí es usar solo el diseño de movimiento y sus animaciones sin usar AppBarLayout. Vea el ejemplo de diseño de movimiento de Google
LuckyMalaka

Respuestas:


0

Este problema es común, envolver el diseño de movimiento con una restricción

<ConstraintLayout >

<androidx.constraintlayout.motion.widget.MotionLayout 
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"
app:layoutDescription="@xml/animation"
tools:showPaths="true">


<androidx.constraintlayout.motion.widget.MotionLayout />


<ConstraintLayout />
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.