如何在片段中使用MotionLayout？

问题描述

我想将motionLayout用于我的应用程序的详细信息页面。这对我很重要，因为这是我的实习项目，如果我能够开发出优秀的应用程序，那我就可以找到一份工作。问题是，我在新项目上尝试了此操作，只是为了查看它是否正常工作，但是当我尝试在片段中使用它时，动画无法正常工作。我只想向上滑动手指并拖动（消失）图像和餐厅名称，该餐厅的详细信息将保留在顶部和底部

---

片段餐厅详细信息页面

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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"
    tools:context=".view.RestaurantDetailPage">


    <androidx.constraintlayout.motion.widget.MotionLayout
        android:background="@drawable/title_layout_bg"
        tools:viewBindingIgnore="true"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layoutDescription="@xml/fragment_restaurant_detail_page_scene">

        <ImageView
            android:id="@+id/header_image"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:scaleType="centerCrop"
            app:layout_constraintBottom_toTopOf="@+id/detail_layout"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            tools:srcCompat="@tools:sample/avatars" />

        <LinearLayout
            android:id="@+id/detail_layout"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="1.0"
            app:layout_constraintStart_toStartOf="parent">

            <TextView
                android:id="@+id/textView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:paddingLeft="32dp"
                android:paddingRight="32dp"
                android:paddingBottom="32dp"
                android:text="@string/kape_pi_restaurant"
                app:fontFamily="@font/raleway_semibold"
                app:lineHeight="26dp" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/title_layout"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_constraintBottom_toBottomOf="@+id/header_image"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent">

            <TextView
                android:id="@+id/restaurantDetailName"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:padding="32dp"
                android:text="Kafe Pi Restaurant"
                android:textColor="@android:color/background_dark"
                android:textSize="22sp"
                app:fontFamily="@font/raleway_semibold" />
        </LinearLayout>
    </androidx.constraintlayout.motion.widget.MotionLayout>
</FrameLayout>

片段餐厅详细页面运动场景结束

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:id="@+id/endscene"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/title_layout_bg"
    tools:context=".view.RestaurantDetailPage">

    <ImageView
        android:id="@+id/header_image"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:scaleType="centerCrop"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:srcCompat="@tools:sample/avatars" />

    <LinearLayout
        android:id="@+id/content_layout"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/header_image">

        <TextView
            android:id="@+id/textView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingLeft="32dp"
            android:paddingBottom="32dp"
            android:text="Kafe Pi Restaurant"
            app:fontFamily="@font/raleway_semibold"
            app:lineHeight="30dp" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/title_layout"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintBottom_toBottomOf="@+id/header_image"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent">

    </LinearLayout>

    <TextView
        android:id="@+id/textView2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="32dp"
        android:text="Kafe Pi Restaurant"
        android:textColor="@android:color/background_dark"
        android:textSize="22sp"
        app:fontFamily="@font/raleway_semibold"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/header_image" />
</androidx.constraintlayout.widget.ConstraintLayout>

编辑：场景

<?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">

    <Transition
        app:constraintSetEnd="@layout/fragment_restaurant_detail_page_motion_scene_end"
        app:constraintSetStart="@layout/fragment_restaurant_detail_page_motion_scene_start">
        <OnSwipe app:touchAnchorSide="top"
            app:dragDirection="dragUp"/>
    </Transition>
</MotionScene>

我的应用所需的运动-> desired motion

解决方法

没有足够的信息来理解您的问题。您可以做的一些事情：

1. 提供更多信息xml / fragment_restaurant_detail_page_scene.xml
2. 首先在示例中隔离动画。 （创建一个新的草稿项目）

但基于此处提供的有限信息： MoionLayout使用MotionScene文件，该文件应包含要创建的两个布局的。它只能引用直接子代。

它还应包含一个描述开始和结束以及手势的符号。

这是3分钟的概述https://www.youtube.com/watch?v=o8c1RO3WgBA