使用 Motion Layout 折叠基于回收视图或滚动视图移动的自定义视图
Collapsing Custom view based on recycler view or scroll view movement using Motion Layout
我正在尝试使用 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>
虽然滚动结束布局没有在运动中执行layout.Can有人帮忙吗?
经过大量研究,我找到了我正在搜索的确切内容for.Please查看下面的文章。
https://riggaroo.dev/android-motionlayout-tutorial-collapsing-view/
我正在尝试使用 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>
虽然滚动结束布局没有在运动中执行layout.Can有人帮忙吗?
经过大量研究,我找到了我正在搜索的确切内容for.Please查看下面的文章。
https://riggaroo.dev/android-motionlayout-tutorial-collapsing-view/