БЛОГ НА HUSL


Как сделать плавный MotionLayout?

Автор вопроса: Binary

У меня в приложении есть RecyclerView, над ним и под ним есть layout, мне нужно чтобы пока я прокручиваю RecyclerView, верхний layout схлопывался а когда RecyclerView опускался в конец появлялся нижний layout. Пробую сделать это с помощью MotionLayout. Но столкнулся с проблемой, появление и исчезание layout происходят сразу, без плавности.

Вот так получается сейчас:

введите сюда описание изображения layout должен появлятся после прокруткивведите сюда описание изображения

Нижний layout появляется ещё до прокрутки полностью а должен появляться только в конце прокрутки RecyclerView. И верхний layout тоже исчезает мгновенно. А мне надо чтобы происходило как на видео:

введите сюда описание изображения

Вот мой экран:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.motion.widget.MotionLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/motionLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layoutDescription="@xml/scene_02_autocomplete_false">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/constraintLayout"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintTop_toBottomOf="@+id/linearLayout">

        <VideoView
            android:id="@+id/sphereVideoView"
            android:layout_width="242dp"
            android:layout_height="240dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/mainOptimizationText"
            style="@style/TextStyleBold700"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="87dp"
            android:text="@string/perfect"
            android:textAlignment="center"
            android:textColor="@color/text_dark"
            android:textSize="24sp"
            app:layout_constraintEnd_toEndOf="@+id/sphereVideoView"
            app:layout_constraintStart_toStartOf="@+id/sphereVideoView"
            app:layout_constraintTop_toTopOf="@+id/sphereVideoView" />

        <TextView
            android:id="@+id/mainOptimizationSecondText"
            style="@style/TextStyleRegular400"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:layout_marginEnd="8dp"
            android:text="@string/phone_is_optimized_and_cleaned"
            android:textAlignment="center"
            android:textColor="@color/text_dark"
            android:textSize="12sp"
            app:layout_constraintEnd_toEndOf="@+id/sphereVideoView"
            app:layout_constraintStart_toStartOf="@+id/sphereVideoView"
            app:layout_constraintTop_toBottomOf="@+id/mainOptimizationText" />
    </androidx.constraintlayout.widget.ConstraintLayout>

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/mainRecyclerView"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layoutAnimation="@anim/layout_animation"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/constraintLayout" />

    <LinearLayout
        android:id="@+id/bottomLinear"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:background="@color/green_start"
        android:orientation="vertical"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/mainRecyclerView" />
    <!--    </androidx.constraintlayout.widget.ConstraintLayout>-->
    <LinearLayout
        android:id="@+id/linearLayout"
        style="@style/Widget.Toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:orientation="horizontal"
        app:layout_collapseMode="pin"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <ImageView
            android:layout_width="32dp"
            android:layout_height="44dp"
            android:layout_gravity="bottom"
            android:layout_marginStart="24dp"
            android:src="@drawable/ic_logo" />

        <TextView
            style="@style/TextStyleBold700"
            android:layout_width="0dp"
            android:layout_height="44dp"
            android:layout_gravity="bottom"
            android:layout_weight="1"
            android:gravity="center"
            android:text="@string/app_name"
            android:textColor="@color/text_dark"
            android:textSize="18sp" />

        <ImageView
            android:id="@+id/burgerMenu"
            android:layout_width="34dp"
            android:layout_height="34dp"
            android:layout_gravity="center|end|bottom"
            android:layout_marginEnd="24dp"
            android:layout_marginBottom="4dp"
            android:background="@drawable/ic_burger_menu" />

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

Вот моя сцена:

<?xml version="1.0" encoding="utf-8"?>
<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:motion="http://schemas.android.com/apk/res-auto">

    <Transition
        motion:constraintSetEnd="@+id/end"
        motion:constraintSetStart="@+id/start"
        motion:duration="1000">
        <OnSwipe
            motion:dragDirection="dragUp"
            motion:onTouchUp="stop"
            motion:touchAnchorId="@id/constraintLayout"
            motion:touchAnchorSide="right" />
        <KeyFrameSet>
            <KeyAttribute
                android:scaleX="0"
                android:scaleY="0"
                motion:framePosition="50"
                motion:motionTarget="@id/constraintLayout" />
<!--            <KeyPosition-->
<!--                motion:framePosition="50"-->
<!--                motion:keyPositionType="pathRelative"-->
<!--                motion:motionTarget="@id/constraintLayout" />-->
        </KeyFrameSet>
    </Transition>

    <ConstraintSet android:id="@+id/start">
        <Constraint android:id="@id/constraintLayout">
            <Layout
                android:layout_width="242dp"
                android:layout_height="240dp"
                android:layout_marginTop="64dp"
                motion:layout_constraintBottom_toTopOf="@+id/mainRecyclerView"
                motion:layout_constraintEnd_toEndOf="parent"
                motion:layout_constraintStart_toStartOf="parent"
                motion:layout_constraintTop_toTopOf="parent" />
        </Constraint>
        <Constraint android:id="@id/mainOptimizationText">
            <Layout
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginTop="87dp"
                motion:layout_constraintEnd_toEndOf="@+id/sphereVideoView"
                motion:layout_constraintStart_toStartOf="@+id/sphereVideoView"
                motion:layout_constraintTop_toTopOf="@+id/sphereVideoView"  />
        </Constraint>
        <Constraint android:id="@id/mainOptimizationSecondText">
            <Layout
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginStart="8dp"
                android:layout_marginEnd="8dp"
                motion:layout_constraintEnd_toEndOf="@+id/sphereVideoView"
                motion:layout_constraintStart_toStartOf="@+id/sphereVideoView"
                motion:layout_constraintTop_toBottomOf="@+id/mainOptimizationText"  />
        </Constraint>
        <Constraint android:id="@id/mainRecyclerView">
            <Layout
                android:layout_width="match_parent"
                android:layout_height="0dp"
                motion:layout_constraintBottom_toBottomOf="parent"
                motion:layout_constraintEnd_toEndOf="parent"
                motion:layout_constraintStart_toStartOf="parent"
                motion:layout_constraintTop_toBottomOf="@+id/constraintLayout" />
        </Constraint>
        <Constraint android:id="@id/bottomLinear">
            <Layout
                android:layout_width="match_parent"
                android:layout_height="100dp"
                motion:layout_constraintEnd_toEndOf="parent"
                motion:layout_constraintStart_toStartOf="parent"
                motion:layout_constraintTop_toBottomOf="parent" />
        </Constraint>
    </ConstraintSet>

    <ConstraintSet
        android:id="@+id/end"
        motion:deriveConstraintsFrom="@id/start">

        <Constraint android:id="@id/constraintLayout">
            <Layout
                android:layout_width="242dp"
                android:layout_height="0dp"
                motion:layout_constraintBottom_toTopOf="parent"
                motion:layout_constraintEnd_toEndOf="parent"
                motion:layout_constraintStart_toStartOf="parent" />
        </Constraint>
        <Constraint android:id="@id/mainOptimizationText">
            <Layout
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginTop="0dp"
                motion:layout_constraintEnd_toEndOf="@+id/sphereVideoView"
                motion:layout_constraintStart_toStartOf="@+id/sphereVideoView"
                motion:layout_constraintTop_toTopOf="@+id/sphereVideoView"  />
        </Constraint>
        <Constraint android:id="@id/mainOptimizationSecondText">
            <Layout
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginStart="8dp"
                android:layout_marginEnd="8dp"
                motion:layout_constraintEnd_toEndOf="@+id/sphereVideoView"
                motion:layout_constraintStart_toStartOf="@+id/sphereVideoView"
                motion:layout_constraintTop_toBottomOf="@+id/mainOptimizationText"  />
        </Constraint>
        <Constraint android:id="@id/mainRecyclerView">
            <Layout
                android:layout_width="match_parent"
                android:layout_height="0dp"
                motion:layout_constraintBottom_toTopOf="@+id/bottomLinear"
                motion:layout_constraintEnd_toEndOf="parent"
                motion:layout_constraintStart_toStartOf="parent"
                motion:layout_constraintTop_toBottomOf="@+id/constraintLayout" />
        </Constraint>
        <Constraint android:id="@id/bottomLinear">
            <Layout
                android:layout_width="match_parent"
                android:layout_height="100dp"
                motion:layout_constraintBottom_toBottomOf="parent"
                motion:layout_constraintEnd_toEndOf="parent"
                motion:layout_constraintStart_toStartOf="parent"
                motion:layout_constraintTop_toBottomOf="@+id/mainRecyclerView" />
        </Constraint>
    </ConstraintSet>

</MotionScene>

И еще подскажите пожалуйста, можно ли тоже через MotionLayout, сделать такую анимацию схлопывания верхнего layouta(который с кругом), как на видео?

Update:

Мне удалось достичь плавности но верхняя часть всё ещё не уезжает как на видео. А нижняя всё так же появляется до прокрутки RecyclerView. Обновил код экрана и сцены. Вот как выглядит сейчас:

введите сюда описание изображения Ещё и пропадает один из текстов.


Источник

Ответы (0 шт):

licensed under cc by-sa 3.0 with attribution.