使用 Motion Layout 折叠基于回收器视图或滚动视图移动的自定义视图答案

【问题标题】：Collapsing Custom view based on recycler view or scroll view movement using Motion Layout使用 Motion Layout 折叠基于回收器视图或滚动视图移动的自定义视图
【发布时间】：2021-04-15 14:36:07
【问题描述】：

我正在尝试使用 Motion 布局实现动画。

议程：

在滚动回收器视图或滚动视图时，自定义视图应折叠并仅显示所需的最终布局。

开始布局

结束布局

结束布局

activity_main_start.xml

<?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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<RelativeLayout
    android:id="@+id/topLayout"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <TextView
        android:id="@+id/assetValue"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:fontFamily="sans-serif"
        android:text="250 Rupees"
        android:textColor="@color/colorPrimaryDark"
        android:textSize="25sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/dummyText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/assetValue"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="10dp"
        android:fontFamily="sans-serif"
        android:text="Total Returns"
        android:textColor="@color/colorPrimary"
        android:textSize="20sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/invested"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/dummyText"
        android:gravity="left"
        android:padding="10dp"
        android:text="200 Rupees"
        android:textColor="@color/colorPrimaryDark"
        android:textSize="25sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/currentValue"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/dummyText"
        android:layout_alignParentEnd="true"
        android:padding="10dp"
        android:text="300 Rupees"
        android:textColor="@color/colorPrimaryDark"
        android:textSize="25sp"
        android:textStyle="bold" />

</RelativeLayout>

<ScrollView
    android:id="@+id/scrollView"
    android:layout_width="0dp"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@id/topLayout">

    <TextView
        android:id="@+id/sampleText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor  consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in rep in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
        android:textSize="40sp" />

</ScrollView>

</androidx.constraintlayout.widget.ConstraintLayout>

activity_main_end.xml

<?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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<RelativeLayout
    android:id="@+id/topLayout"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintBottom_toTopOf="@id/scrollView"
    app:layout_constraintTop_toTopOf="parent">

    <TextView
        android:id="@+id/assetValue"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:fontFamily="sans-serif"
        android:text="250 Rupees"
        android:textColor="@color/colorPrimaryDark"
        android:textSize="25sp"
        android:textStyle="bold" />
</RelativeLayout>

<ScrollView
    android:id="@+id/scrollView"
    android:layout_width="0dp"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@id/topLayout">

    <TextView
        android:id="@+id/sampleText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor  consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in rep in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
        android:textSize="40sp" />

</ScrollView>

</androidx.constraintlayout.widget.ConstraintLayout>

activity_main_scene.xml

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

<Transition
    app:constraintSetEnd="@layout/activity_main_end"
    app:constraintSetStart="@layout/activity_main_start">
    <OnSwipe
        app:touchAnchorSide="top"
        app:dragDirection="dragUp" />
</Transition>

 </MotionScene>

activity_main.xml

 <?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layoutDescription="@xml/activity_main_scene"
tools:context=".MainActivity">

<RelativeLayout
    android:id="@+id/topLayout"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <TextView
        android:id="@+id/assetValue"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:fontFamily="sans-serif"
        android:text="250 Rupees"
        android:textColor="@color/colorPrimaryDark"
        android:textSize="25sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/dummyText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/assetValue"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="10dp"
        android:fontFamily="sans-serif"
        android:text="Total Returns"
        android:textColor="@color/colorPrimary"
        android:textSize="20sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/invested"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/dummyText"
        android:gravity="left"
        android:padding="10dp"
        android:text="200 Rupees"
        android:textColor="@color/colorPrimaryDark"
        android:textSize="25sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/currentValue"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/dummyText"
        android:layout_alignParentEnd="true"
        android:padding="10dp"
        android:text="300 Rupees"
        android:textColor="@color/colorPrimaryDark"
        android:textSize="25sp"
        android:textStyle="bold" />

</RelativeLayout>


<ScrollView
    android:id="@+id/scrollView"
    android:layout_width="0dp"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@id/topLayout">

    <TextView
        android:id="@+id/sampleText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor  consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in rep in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
        android:textSize="40sp" />

</ScrollView>

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

虽然滚动端布局没有在动态布局中执行。有人可以帮忙吗？

【问题讨论】：

标签： android xml android-layout animation android-motionlayout

【解决方案1】：

经过大量研究，我找到了我正在搜索的确切内容。请查看下面的文章。

https://riggaroo.dev/android-motionlayout-tutorial-collapsing-view/

【讨论】：