recyclerview 在滚动时坚持使用图像放大/缩小动画的位置

Posted

技术标签:

【中文标题】recyclerview 在滚动时坚持使用图像放大/缩小动画的位置【英文标题】:recyclerview stick to a position with image zoom in/out animation while scrolling 【发布时间】:2021-12-01 21:18:25 【问题描述】:

当我们滚动视图时,recyclerview 会固定在一个位置,并且图像应该随着动画而缩小。也尝试了协调器布局和工具栏,但没有成功。任何帮助或建议都会非常感激。

正如您在 GIF 中看到的那样,进展如何。

【问题讨论】:

添加实现代码.. 【参考方案1】:
    Finally get the solution with the help of MotionLayout. Here is my solution
    
        <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout 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/root_view"
        android:layout_
        android:layout_
        android:background="@color/back_screen_color_list"
        >
    
        <LinearLayout
            android:id="@+id/layout_drawer_down"
            android:layout_
            android:layout_
            android:layout_centerHorizontal="true"
            android:layout_marginTop="@dimen/list_header_arrow_margin_top"
            android:gravity="center">
    
            <ImageView
                android:id="@+id/iv_drawer_down"
                android:layout_
                android:layout_
                app:srcCompat="@drawable/ic_arrow_down_new"
                app:tint="@color/image_grey" />
        </LinearLayout>
    
    
        <androidx.constraintlayout.motion.widget.MotionLayout
            android:id="@+id/motionLayout"
            android:layout_
            android:layout_
            app:layoutDescription="@xml/chat_detail_anim"
            android:layout_below="@+id/layout_drawer_down"
            android:paddingLeft="@dimen/list_detail_margin_left_right"
            android:paddingRight="@dimen/list_detail_margin_left_right"
            android:layout_marginTop="@dimen/margin_start_item">
    
    
    
            <RelativeLayout
                android:id="@+id/layout_group_image"
                android:layout_
                android:layout_
                android:background="@drawable/circle_dash_border_primary"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                tools:ignore="MissingConstraints">
    
    
                <de.meinverein.app.view.CircleImageView
                    android:id="@+id/img_group"
                    android:layout_
                    android:layout_
                    android:layout_centerInParent="true"
    
                    />
    
    
            </RelativeLayout>
    
            <ImageView
                android:id="@+id/img_change_group_img"
                android:layout_
                android:layout_
                app:layout_constraintEnd_toEndOf="@+id/layout_group_image"
                app:layout_constraintStart_toStartOf="@+id/layout_group_image"
                app:layout_constraintBottom_toBottomOf="@+id/layout_group_image"
                app:layout_constraintTop_toTopOf="@+id/layout_group_image"
                android:scaleType="centerCrop"
                android:visibility="visible"
                app:srcCompat="@drawable/ic_two_users_1" />
            <RelativeLayout
                android:id="@+id/layout_parent"
                android:layout_
                android:layout_
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/layout_group_image">
    
    
                <RelativeLayout
                    android:id="@+id/layout_title"
                    android:layout_
                    android:layout_
                    android:layout_marginTop="@dimen/overlay_img_done_margin_top">
    
                    <de.meinverein.app.view.BoldFontTextView
                        android:id="@+id/txt_title"
                        android:layout_
                        android:layout_
                        android:layout_alignParentLeft="true"
                        android:layout_centerVertical="true"
                        android:layout_toStartOf="@+id/linear_title_edit"
                        android:layout_toLeftOf="@+id/linear_title_edit"
                        android:ellipsize="end"
                        android:letterSpacing="0.018"
                        android:lineHeight="@dimen/line_height_17sp"
                        android:lines="1"
                        android:maxLines="1"
                        android:text="Vereinstreffen"
                        android:textColor="@color/normal_text_color"
                        android:textSize="@dimen/title_text_28pt" />
    
                    <LinearLayout
                        android:id="@+id/linear_title_edit"
                        android:layout_
                        android:layout_
                        android:layout_alignParentRight="true"
                        android:layout_centerVertical="true"
                        android:layout_marginLeft="@dimen/margin_15dp"
                        android:gravity="center"
                        android:padding="@dimen/padding_10dp">
    
                        <ImageView
                            android:id="@+id/img_title_edit"
                            android:layout_
                            android:layout_
                            app:srcCompat="@drawable/ic_overview_edit"
                            app:tint="@color/refs_btn" />
                    </LinearLayout>
                </RelativeLayout>
    
                <RelativeLayout
                    android:id="@+id/linear_participant"
                    android:layout_
                    android:layout_
                    android:layout_below="@+id/layout_title"
                    android:layout_marginTop="@dimen/margin_30dp">
    
                    <!-- <RelativeLayout
                         android:layout_
                         android:layout_
                         android:gravity="center_vertical"
                         android:orientation="horizontal">-->
    
                    <ImageView
                        android:id="@+id/img_participant"
                        android:layout_
                        android:layout_
                        android:layout_alignParentLeft="true"
                        android:layout_centerVertical="true"
                        app:srcCompat="@drawable/tab_user"
                        app:tint="@color/refs_btn" />
    
                    <de.meinverein.app.view.BoldFontTextView
                        android:id="@+id/partipant_with_count"
                        android:layout_
                        android:layout_
                        android:layout_centerVertical="true"
                        android:layout_marginLeft="12dp"
                        android:layout_toRightOf="@+id/img_participant"
                        android:text="@string/participants"
                        android:textColor="@color/black_full"
                        android:textSize="@dimen/sort_row_txt_size" />
    
                    <LinearLayout
                        android:id="@+id/layout_add_member"
                        android:layout_
                        android:layout_
                        android:layout_alignParentRight="true"
                        android:layout_centerVertical="true"
                        android:layout_marginLeft="@dimen/margin_15dp"
                        android:gravity="center"
                        android:padding="@dimen/padding_10dp">
    
                        <ImageView
                            android:id="@+id/img_participant_edit"
                            android:layout_
                            android:layout_
                            app:srcCompat="@drawable/ic_overview_add"
                            app:tint="@color/refs_btn" />
                    </LinearLayout>
                </RelativeLayout>
            </RelativeLayout>
    
            <androidx.recyclerview.widget.RecyclerView
                android:id="@+id/recyc_view_participants"
                android:layout_
                android:layout_
                android:layout_marginTop="15dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.0"
                app:layout_constraintStart_toStartOf="parent"
                app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
                app:layout_constraintTop_toBottomOf="@+id/layout_parent"
                app:layout_constraintVertical_bias="0.0"
                android:background="@color/back_screen_color_list"
                />
    
            <View
                android:id="@+id/view_bottom"
                android:layout_
                android:layout_
                android:elevation="2dp"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintBottom_toBottomOf="parent"
                android:background="@drawable/list_bottom_shadow" />
    
            <View
                android:id="@+id/view_top"
                android:layout_
                android:layout_
                android:layout_marginTop="15dp"
                app:layout_constraintStart_toStartOf="parent"
                android:background="@drawable/list_top_shadow"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintTop_toTopOf="@+id/recyc_view_participants"
    
                 />
    
        </androidx.constraintlayout.motion.widget.MotionLayout>
    
        <include
            layout="@layout/line_progress_bar"
            android:layout_
            android:layout_
            android:layout_alignParentBottom="true" />
    </RelativeLayout>


Chat Detail anim class

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

    <Transition
        motion:constraintSetEnd="@+id/end"
        motion:constraintSetStart="@+id/start"
        motion:duration="100"
        motion:motionInterpolator="linear">
        <OnSwipe
            motion:dragDirection="dragUp"
            motion:touchAnchorId="@+id/recyc_view_participants"
            motion:touchAnchorSide="bottom" />
    </Transition>

        <ConstraintSet android:id="@+id/start">

        <Constraint
            android:id="@+id/layout_group_image"
            android:layout_
            android:layout_
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintStart_toStartOf="parent"
             />
        <Constraint
            android:id="@+id/img_change_group_img"
            android:layout_
            android:layout_
            motion:visibilityMode="normal"
            motion:layout_constraintEnd_toEndOf="@+id/layout_group_image"
            motion:layout_constraintStart_toStartOf="@+id/layout_group_image"
            motion:layout_constraintBottom_toBottomOf="@+id/layout_group_image"
            motion:layout_constraintTop_toTopOf="@+id/layout_group_image"
            motion:layout_constraintVertical_bias="0.42" />
        <Constraint
            android:id="@+id/layout_parent"
            android:layout_
            android:layout_
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintTop_toBottomOf="@+id/layout_group_image" />


        <Constraint
            android:id="@+id/view_top"
            android:layout_
            android:layout_
            android:visibility="gone"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintTop_toTopOf="@+id/recyc_view_participants"
            />



    </ConstraintSet>

    <ConstraintSet android:id="@+id/end">

        <Constraint
            android:id="@+id/layout_group_image"
            android:layout_
            android:layout_
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintStart_toStartOf="parent" />

        <Constraint
            android:id="@+id/img_change_group_img"
            android:layout_
            android:layout_
            motion:visibilityMode="normal"
            motion:layout_constraintEnd_toEndOf="@+id/layout_group_image"
            motion:layout_constraintStart_toStartOf="@+id/layout_group_image"
            motion:layout_constraintBottom_toBottomOf="@+id/layout_group_image"
            motion:layout_constraintTop_toTopOf="@+id/layout_group_image"
            motion:layout_constraintVertical_bias="0.42" />
        <Constraint
            android:id="@+id/layout_parent"
            android:layout_
            android:layout_
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintTop_toBottomOf="@+id/layout_group_image" />

        <Constraint
            android:id="@+id/view_top"
            android:layout_
            android:layout_
            android:visibility="visible"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintTop_toTopOf="@+id/recyc_view_participants"
            />

    </ConstraintSet>
</MotionScene>

【讨论】:

以上是关于recyclerview 在滚动时坚持使用图像放大/缩小动画的位置的主要内容,如果未能解决你的问题,请参考以下文章

Glide 是不是对每个图像请求进行排队?滚动时Recyclerview加载非常慢

当我滚动我的Recyclerview时,图像会不断改变它的位置并重复图像

滚动视图底部后滚动放大图像

在离子框架中放大时,离子滚动模糊了我的图像

Android - RecyclerView 和缩放图像

在 recyclerview 中显示来自服务器的数据时无休止的滚动