EditText를 사용한 모션 레이아웃은 애니메이션을 파괴합니다


10

코디네이터 레이아웃과 거의 비슷한 간단한 MotionLayout을 만들었습니다 (애니메이션은 약간 다릅니다).
여기 이와 같은 것 :

여기에 이미지 설명을 입력하십시오 여기에 이미지 설명을 입력하십시오

컨텐츠 영역 내에서 (두 개의) EditText View를 사용하면 키보드가 열린 후에 MotionLayout 애니메이션이 중단됩니다. 이제 애니메이션이 지연되고 상태가 잘못되었으며 UI가 약간 고정되기 시작합니다. 어떤 아이디어로 이것을 해결할 수 있습니까? gif로 버그에 연결

사용 된 버전 :

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

작은 샘플 앱에서도 동작을 재현 할 수 있습니다

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

키보드가 있거나없는 스크롤 이벤트가 다르기 때문입니다. 우리의 경우에는 스크롤링을 비활성화 AppBarLayout합니다.
GensaGames

매니페스트에서 windowSoftInputMode 의 값은 무엇입니까 ? 스크롤하면 포커스가있는 EditText 가 다시보기로 스크롤되는 것처럼 보입니다 . 이 시나리오에서 어떤 일이 일어나고 있는지 명확하지 않습니다. windowSoftInputMode 의 값을 변경하여 도움이되는지 확인할 수 있습니다.
Cheticamp

github에 샘플을 올려 주시면 분석을 도와 드릴까요?
Isai Damier

@IsaiDamier github.com/CaptMustache/views-widgets-samples 방금 scolllayout 끝에 EditText Field를 추가했습니다. 은 "복잡한 모션 샘플"을 확인하고 Inputfield + 키보드 함께 놀러 + 스크롤하세요
LuckyMalaka

@GensaGames 여기서 접근하는 방법은 AppBarLayout을 사용하지 않고 모션 레이아웃과 해당 애니메이션 만 사용하는 것입니다. 구글 모션 레이아웃 샘플 17 +18 참조 github.com/CaptMustache/views-widgets-samples/tree/master/…
LuckyMalaka 18.

답변:


0

이 문제는 일반적으로 제약 레이아웃으로 모션 레이아웃을 래퍼합니다.

<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 />
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.