代码之家 › 专栏 › 技术社区 › user7795193

为什么RecyclerView的ItemView中的LayoutImmutions会导致UI口吃?

android-animation android-recyclerview android

user7795193 · 技术社区 · 6 年前

在我的项目中,我有一个播放视频的列表,它是使用RecyclerView构建的。当用户单击播放时,视频下方的共享区域将添加一些共享图标(此处添加了LayoutImation),整个共享窗格将拉伸;现在的问题是,当用户播放视频时,快速或反复地来回滑动列表,视频列表会出现混乱,屏幕下方的视频会交错覆盖,影响用户体验,是否有人遇到过此问题,在recyclerView中添加项目动画的正确方法是什么?

adpter中的代码:

 private void animateExitBottomViews(final VideoClipsPlayViewHolder holder, boolean isFollow) {
        if (null != holder) {
            if (isFollow) {
                holder.ll_share.setVisibility(View.GONE);
                holder.ll_share_abord.setVisibility(View.GONE);
                holder.imgMoreShare.setVisibility(View.GONE);
                holder.imgAllShare.setVisibility(View.VISIBLE);
            } else {
                holder.imgHead.bringToFront();
                holder.imgAllShare.setVisibility(View.VISIBLE);
                holder.imgMoreShare.setVisibility(View.GONE);
                holder.ll_share.setVisibility(View.GONE);
                holder.ll_share_abord.setVisibility(View.GONE);
                hideFocusButtonWhenFocused(holder);
            }
        }
    }

项目布局的xml文件:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:mgtv="http://schemas.android.com/apk/res-auto"
    android:id="@+id/rl_container"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:animateLayoutChanges="true"
    android:background="@color/skin_color_content_bg_primary">

    <RelativeLayout
        android:id="@+id/rl_player"
        android:layout_width="match_parent"
        android:layout_height="@dimen/dp_202"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true">

        <RelativeLayout
            android:id="@+id/rl_play"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <com.facebook.drawee.view.SimpleDraweeView
                android:id="@+id/view_preview"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                mgtv:fadeDuration="100"
                mgtv:placeholderImage="@drawable/bg_common_image_holder" />

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:src="@drawable/icon_common_video_play" />

            <TextView
                android:id="@+id/tv_duration"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_alignParentRight="true"
                android:layout_marginBottom="@dimen/dp_5"
                android:layout_marginRight="@dimen/dp_5"
                android:background="@drawable/item_vod_landscape_image_text_item_desc_selector"
                android:gravity="center"
                android:minHeight="@dimen/dp_16"
                android:paddingLeft="@dimen/dp_3"
                android:paddingRight="@dimen/dp_3"
                android:textColor="@color/color_FFFFFF"
                android:textSize="@dimen/font_20" />
        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/fl_player_container"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true" />

    </RelativeLayout>

    <TextView
        android:id="@+id/txt_video_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/rl_player"
        android:ellipsize="end"
        android:maxLines="2"
        android:paddingLeft="@dimen/dp_10"
        android:paddingRight="@dimen/dp_10"
        android:paddingTop="@dimen/dp_10"
        android:textColor="@color/skin_color_text_primary"
        android:textStyle="bold" />


    <RelativeLayout
        android:id="@+id/frame_video_info"
        android:layout_width="match_parent"
        android:layout_height="@dimen/dp_50"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_below="@+id/txt_video_title">

        <com.mgtv.widget.CircleImageView
            android:id="@+id/img_head"
            android:layout_width="@dimen/dp_35"
            android:layout_height="@dimen/dp_35"
            android:layout_centerVertical="true"
            android:layout_marginLeft="@dimen/dp_10"
            android:src="@drawable/ic_comment_avatar_default"
            mgtv:civ_border_color="@color/color_000000_10"
            mgtv:civ_border_width="1px" />

        <com.hunantv.imgo.widget.RoundRectCheckButton
            android:id="@+id/btn_focus"
            style="@style/FollowCheckButtonStyle"
            android:layout_width="@dimen/dp_60"
            android:layout_height="@dimen/dp_26"
            android:layout_centerVertical="true"
            android:layout_marginLeft="@dimen/dp_5"
            android:layout_toRightOf="@id/img_head"
            android:visibility="gone" />

        <TextView
            android:id="@+id/txt_username"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_marginLeft="@dimen/dp_5"
            android:layout_toRightOf="@id/img_head"
            android:ellipsize="end"
            android:maxEms="8"
            android:maxLines="1"
            android:textColor="@color/color_888888" />

        <LinearLayout
            android:id="@+id/ll_share_icon"
            android:layout_width="wrap_content"
            android:layout_height="@dimen/dp_40"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            **android:animateLayoutChanges="true"**
            android:gravity="center_vertical">

            <TextView
                android:id="@+id/txt_comment_reply"
                android:layout_width="wrap_content"
                android:layout_height="@dimen/dp_32"
                android:layout_centerVertical="true"
                android:layout_marginRight="@dimen/dp_3"
                android:layout_toLeftOf="@+id/txt_praise"
                android:drawableLeft="@drawable/videoclips_comment_reply"
                android:drawablePadding="@dimen/dp_3"
                android:gravity="center_vertical"
                android:text="128"
                android:textColor="@color/base_middle_gray"
                android:textSize="@dimen/font_20" />

            <RelativeLayout
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_marginRight="@dimen/dp_5"
                android:layout_toLeftOf="@+id/ll_share_more">

                <TextView
                    android:id="@+id/txt_praise"
                    android:layout_width="wrap_content"
                    android:layout_height="@dimen/dp_32"
                    android:layout_centerVertical="true"
                    android:layout_marginLeft="@dimen/dp_6"
                    android:drawableLeft="@drawable/ic_comment_up_default"
                    android:drawablePadding="@dimen/dp_3"
                    android:gravity="center_vertical"
                    android:text="235"
                    android:textColor="@color/base_middle_gray"
                    android:textSize="@dimen/font_20" />

                <TextView
                    android:id="@+id/tvLikePlusOne"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:text="@string/plus_one"
                    android:textColor="@color/color_F06000"
                    android:textSize="@dimen/font_24"
                    android:visibility="invisible" />
            </RelativeLayout>

            <LinearLayout
                android:id="@+id/ll_share"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:visibility="gone">

                <ImageView
                    android:id="@+id/img_wechat_share"
                    android:layout_width="@dimen/dp_32"
                    android:layout_height="@dimen/dp_32"
                    android:layout_centerVertical="true"
                    android:scaleType="centerInside"
                    android:src="@drawable/videoclips_share_wechat" />

                <ImageView
                    android:id="@+id/img_wechat_group_share"
                    android:layout_width="@dimen/dp_32"
                    android:layout_height="@dimen/dp_32"
                    android:layout_centerVertical="true"
                    android:scaleType="centerInside"
                    android:src="@drawable/videoclips_share_wechat_group" />
            </LinearLayout>

            <LinearLayout
                android:id="@+id/ll_share_abord"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:visibility="gone">

                <ImageView
                    android:id="@+id/img_facebook_share"
                    android:layout_width="@dimen/dp_32"
                    android:layout_height="@dimen/dp_32"
                    android:layout_centerVertical="true"
                    android:scaleType="centerInside"
                    android:src="@drawable/videoclips_share_facebook" />

                <ImageView
                    android:id="@+id/img_twitter_share"
                    android:layout_width="@dimen/dp_32"
                    android:layout_height="@dimen/dp_32"
                    android:layout_centerVertical="true"
                    android:scaleType="centerInside"
                    android:src="@drawable/videoclips_share_twitter" />

            </LinearLayout>

            <LinearLayout
                android:id="@+id/ll_share_more"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:orientation="horizontal">

                <ImageView
                    android:id="@+id/img_more_share"
                    android:layout_width="@dimen/dp_32"
                    android:layout_height="@dimen/dp_32"
                    android:layout_alignParentRight="true"
                    android:layout_centerVertical="true"
                    android:layout_marginRight="@dimen/dp_10"
                    android:scaleType="centerInside"
                    android:src="@drawable/videoclips_share_more"
                    android:visibility="gone" />

                <ImageView
                    android:id="@+id/img_all_share"
                    android:layout_width="@dimen/dp_32"
                    android:layout_height="@dimen/dp_32"
                    android:layout_alignParentRight="true"
                    android:layout_centerVertical="true"
                    android:layout_marginRight="@dimen/dp_10"
                    android:scaleType="centerInside"
                    android:src="@drawable/videoclips_share_all"
                    android:visibility="visible" />

            </LinearLayout>
        </LinearLayout>
    </RelativeLayout>

    <View
        android:id="@+id/item_bottom_devider"
        android:layout_width="match_parent"
        android:layout_height="@dimen/dp_8"
        android:layout_alignParentBottom="true"
        android:layout_below="@+id/frame_video_info"
        android:background="@color/skin_color_divider" />

</RelativeLayout>

我只是动态控制共享图标的可见性,动画行为是由LayoutImation调用的,我只是想知道为什么快速滑动列表时屏幕会混乱。

UI STUTTER WHEN FAST SCROLL LIST NORMAL STATE OF SHARE PANEL

EXPAND STATE OF SHAE PANEL

1 回复 | 直到 6 年前

user7795193 6 年前

最后,ValueAnimation拯救我的一天!

 private ValueAnimator createShareAnimator(final View v, final int start, final int end) {
        ValueAnimator animator = ValueAnimator.ofInt(start, end);
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animator) {
                Integer currentValue = (Integer) animator.getAnimatedValue();
                ViewGroup.LayoutParams layoutParams = v.getLayoutParams();
                layoutParams.width = currentValue;
                v.setLayoutParams(layoutParams);
            }
        });
        return animator;
    }