0

我有一个可以使用MotionLayout. 我想实现一个类似于 Gmail android 应用程序中的动画，当你滑动一封电子邮件时，会显示彩色背景。所以我尝试ImageView在MotionLayout移动的视图下放置一个，这样当视图消失时，它会显示ImageView下面。

这是元素的布局：

<androidx.constraintlayout.motion.widget.MotionLayout
        android:id="@+id/reading_list_item_motion"
        android:layout_width="match_parent"
        android:layout_height="72dp"
        app:layoutDescription="@xml/reading_list_item_scene">

        <!-- The image under the element that moves -->
        <ImageView
            android:id="@+id/reading_list_item_back"
            android:layout_width="match_parent"
            android:layout_height="72dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            tools:srcCompat="@tools:sample/backgrounds/scenic" />

        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/reading_list_item_layout"
            android:layout_width="match_parent"
            android:layout_height="72dp"
            android:gravity="center"
            android:paddingLeft="@dimen/search_result_padding"
            android:paddingRight="@dimen/search_result_padding"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent">

            <ImageView
                android:id="@+id/reading_list_item_icon"
                android:layout_width="@dimen/ic_search_result"
                android:layout_height="@dimen/ic_search_result"
                android:layout_gravity="center"
                android:layout_marginStart="8dp"
                android:layout_marginTop="4dp"
                android:layout_weight="1"
                android:contentDescription="Search result icon"
                app:error="@{@drawable/ic_default_search_result}"
                app:imageUrl="@{book.best_book.small_image_url}"
                app:layout_constraintEnd_toStartOf="@id/reading_list_item_info_layout"
                app:layout_constraintHorizontal_bias="0.0"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:srcCompat="@drawable/ic_default_search_result" />

            <LinearLayout
                android:id="@+id/reading_list_item_info_layout"
                android:layout_width="316dp"
                android:layout_height="0dp"
                android:layout_marginStart="8dp"
                android:layout_marginTop="4dp"
                android:layout_weight="1"
                android:orientation="vertical"
                app:layout_constraintBottom_toBottomOf="parent"

                app:layout_constraintHorizontal_bias="0.4"
                app:layout_constraintStart_toEndOf="@+id/reading_list_item_icon"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintVertical_bias="0.6">

                <TextView
                    android:id="@+id/reading_list_item_title"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:ellipsize="end"
                    android:maxLines="2"
                    android:singleLine="false"
                    android:text="@{book.best_book.title}"
                    android:textColor="@color/textSecondary"
                    android:textSize="18sp"
                    android:textStyle="bold" />

                <TextView
                    android:id="@+id/reading_list_item_author"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:ellipsize="end"
                    android:singleLine="true"
                    android:text='@{"by " + book.best_book.author.name }'
                    android:textColor="@color/textSecondary" />

            </LinearLayout>
        </androidx.constraintlayout.widget.ConstraintLayout>


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

即使在设计编辑器中图像似乎在那里，并且如果我播放MotionLayout过渡，一切都按预期运行，但在启动应用程序时ImageView无处可见。

我想到的另一种方法是将 附加ImageView在移动的视图的末尾，这样当它开始离开屏幕时，ImageView就会出现在视图中。我不确定如何实现这一点，因为它ImageView应该与屏幕一样宽并且match_parent显然不起作用

有谁知道如何实现这个动画？

提前致谢！

编辑：这是我希望它看起来如何的图像。项目越多的屏幕，越多的红色背景被显示出来。 在此处输入图像描述

这是 MotionScene xml：

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

    <ConstraintSet android:id="@+id/start">
        <Constraint
            android:id="@+id/reading_list_item_layout"
            android:layout_width="match_parent"
            android:layout_height="72dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
        <Constraint
            app:layout_editor_absoluteY="1dp"
            android:id="@+id/imageView" />
    </ConstraintSet>

    <ConstraintSet android:id="@+id/end">
        <Constraint
            android:id="@+id/reading_list_item_layout"
            app:layout_constraintEnd_toEndOf="parent"
            android:layout_width="0dp"
            android:layout_height="72dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toEndOf="parent" />
    </ConstraintSet>

    <Transition
        app:constraintSetEnd="@id/end"
        app:constraintSetStart="@+id/start">
        <OnSwipe
            app:dragDirection="dragRight"
            app:touchAnchorId="@id/reading_list_item_layout"
            app:touchAnchorSide="left" />
    </Transition>
</MotionScene>
4

0 回答 0