MotionLayout 没有动画
MotionLayout no animation
我正在尝试通过 MotionLayout 创建折叠视图动画。我想让视图在向下滚动时崩溃,直到完全向上滚动才出现。我的动画现在不起作用 (video)。此外,在第一次点击之前,我的回收站视图是不可见的。我究竟做错了什么?感谢
MainActivity 布局:
<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"
android:background="@color/gray_more_white"
app:layoutDescription="@xml/collapsing_toolbar"
tools:showPaths="true">
<include
android:id="@+id/include"
layout="@layout/toolbar"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<com.github.florent37.shapeofview.shapes.ArcView
android:id="@+id/header_view"
android:layout_width="0dp"
android:layout_height="100dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@id/include"
app:shape_arc_cropDirection="outside"
app:shape_arc_height="20dp"
app:shape_arc_position="bottom">
<View
android:id="@+id/header"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorPrimaryDark" />
</com.github.florent37.shapeofview.shapes.ArcView>
<androidx.swiperefreshlayout.widget.SwipeRefreshLayout
android:id="@+id/swipe_view"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/include">
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</androidx.swiperefreshlayout.widget.SwipeRefreshLayout>
</androidx.constraintlayout.motion.widget.MotionLayout>
运动场景:
<MotionScene
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:motion="http://schemas.android.com/apk/res-auto">
<Transition
app:constraintSetEnd="@id/end"
app:constraintSetStart="@id/start"
app:duration="1000">
<OnSwipe
app:touchAnchorId="@id/swipe_view"
app:dragDirection="dragDown"
app:touchAnchorSide="top"
app:moveWhenScrollAtTop="true"/>
</Transition>
<ConstraintSet android:id="@+id/start">
<Constraint
android:id="@id/header_view"
android:layout_width="0dp"
android:layout_height="100dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@id/include">
</Constraint>
</ConstraintSet>
<ConstraintSet android:id="@+id/end">
<Constraint
android:id="@id/header_view"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@id/include">
</Constraint>
</ConstraintSet>
</MotionScene>
所以,经过多次尝试,我设法修复了这个错误。
1) 动画的触发器(在我的例子中是 RecyclerView)必须与动画指向的对象相关。不一定直接(在我的例子中 RecyclerView 和 header 通过 Space
连接)
2) 动画的触发器或链接它们的元素不应与动画指向的内容重叠。 (在我的例子中,Space
应该使用 constraintBottom_toBottomOf = "@id / header" + marginBottom 而不是 constraintTop_toBottomOf = "@id / header" .
所以,这是最终布局。
<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"
android:background="@color/gray_more_white"
app:layoutDescription="@xml/catalog_motion">
<com.github.florent37.shapeofview.shapes.ArcView
android:id="@+id/header"
android:layout_width="0dp"
android:layout_height="100dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@+id/include"
app:shape_arc_cropDirection="outside"
app:shape_arc_height="20dp"
app:shape_arc_position="bottom">
<View
android:id="@+id/header_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorPrimaryDark" />
</com.github.florent37.shapeofview.shapes.ArcView>
<Space
android:id="@+id/space"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="100dp"
app:layout_constraintBottom_toBottomOf="@id/header"
app:layout_constraintStart_toStartOf="@id/header"
app:layout_constraintEnd_toEndOf="@id/header"/>
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/space" />
<include
android:id="@+id/include"
layout="@layout/toolbar"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
我正在尝试通过 MotionLayout 创建折叠视图动画。我想让视图在向下滚动时崩溃,直到完全向上滚动才出现。我的动画现在不起作用 (video)。此外,在第一次点击之前,我的回收站视图是不可见的。我究竟做错了什么?感谢
MainActivity 布局:
<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"
android:background="@color/gray_more_white"
app:layoutDescription="@xml/collapsing_toolbar"
tools:showPaths="true">
<include
android:id="@+id/include"
layout="@layout/toolbar"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<com.github.florent37.shapeofview.shapes.ArcView
android:id="@+id/header_view"
android:layout_width="0dp"
android:layout_height="100dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@id/include"
app:shape_arc_cropDirection="outside"
app:shape_arc_height="20dp"
app:shape_arc_position="bottom">
<View
android:id="@+id/header"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorPrimaryDark" />
</com.github.florent37.shapeofview.shapes.ArcView>
<androidx.swiperefreshlayout.widget.SwipeRefreshLayout
android:id="@+id/swipe_view"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/include">
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</androidx.swiperefreshlayout.widget.SwipeRefreshLayout>
</androidx.constraintlayout.motion.widget.MotionLayout>
运动场景:
<MotionScene
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:motion="http://schemas.android.com/apk/res-auto">
<Transition
app:constraintSetEnd="@id/end"
app:constraintSetStart="@id/start"
app:duration="1000">
<OnSwipe
app:touchAnchorId="@id/swipe_view"
app:dragDirection="dragDown"
app:touchAnchorSide="top"
app:moveWhenScrollAtTop="true"/>
</Transition>
<ConstraintSet android:id="@+id/start">
<Constraint
android:id="@id/header_view"
android:layout_width="0dp"
android:layout_height="100dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@id/include">
</Constraint>
</ConstraintSet>
<ConstraintSet android:id="@+id/end">
<Constraint
android:id="@id/header_view"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@id/include">
</Constraint>
</ConstraintSet>
</MotionScene>
所以,经过多次尝试,我设法修复了这个错误。
1) 动画的触发器(在我的例子中是 RecyclerView)必须与动画指向的对象相关。不一定直接(在我的例子中 RecyclerView 和 header 通过 Space
连接)
2) 动画的触发器或链接它们的元素不应与动画指向的内容重叠。 (在我的例子中,Space
应该使用 constraintBottom_toBottomOf = "@id / header" + marginBottom 而不是 constraintTop_toBottomOf = "@id / header" .
所以,这是最终布局。
<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"
android:background="@color/gray_more_white"
app:layoutDescription="@xml/catalog_motion">
<com.github.florent37.shapeofview.shapes.ArcView
android:id="@+id/header"
android:layout_width="0dp"
android:layout_height="100dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@+id/include"
app:shape_arc_cropDirection="outside"
app:shape_arc_height="20dp"
app:shape_arc_position="bottom">
<View
android:id="@+id/header_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorPrimaryDark" />
</com.github.florent37.shapeofview.shapes.ArcView>
<Space
android:id="@+id/space"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="100dp"
app:layout_constraintBottom_toBottomOf="@id/header"
app:layout_constraintStart_toStartOf="@id/header"
app:layout_constraintEnd_toEndOf="@id/header"/>
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/space" />
<include
android:id="@+id/include"
layout="@layout/toolbar"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>