解决瀑布流recyclerview的闪烁移动问题

最近在工作中遇到使用瀑布流本来想起来很简单，没想到遇到大坑。

下面简单介绍下我是怎么做的，上班时间紧稍微记一下。

     final int width = ViewUtil.getWidth(mContext);
        final int height = ViewUtil.getHeight(mContext);
        screenWidth = width;
        screenHeigh = height;
        mAutoLoadRecyclerView = (AutoLoadRecyclerView) mView.findViewById(R.id.recyclerview);
//        final StaggeredGridLayoutManager manager = new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL);
        final CustomStaggeredGridLayoutManager manager = new CustomStaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL);
        final ExpandLinearLayoutManager manager1 = new ExpandLinearLayoutManager(getActivity());
        final ExStaggeredGridLayoutManager manager2 = new ExStaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL);
        manager.setAutoMeasureEnabled(true);
        //在加载更多时使用shortVideoRecycleAdapter.notifyItemRangeInserted(oldLength, addLength);解决闪烁，移动问题,所以不用以下注释掉的方法
        manager.setGapStrategy(StaggeredGridLayoutManager.GAP_HANDLING_NONE);//滑动过程中item不移动
        mAutoLoadRecyclerView.setLayoutManager(manager2);
        mAutoLoadRecyclerView.setHasFixedSize(true); // 设置固定大小
        mAutoLoadRecyclerView.setNestedScrollingEnabled(false);

        mAutoLoadRecyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
            @Override
            public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
                super.onScrollStateChanged(recyclerView, newState);
                manager.invalidateSpanAssignments();//使recyclerview返回顶部
            }
        });

        shortVideoRecycleAdapter = new PersonAvatarMainPageShortVideoFragment.ShortVideoRecycleAdapter(mContext);
        mAutoLoadRecyclerView.setAdapter(shortVideoRecycleAdapter);

主要东西在这个adapter上：

 class ShortVideoRecycleAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {

        private Context mContext;
        private final static float SIZE_SCALE_01 = 5 / 4f;
        private final static float SIZE_SCALE_02 = 5 / 5f;


        public ShortVideoRecycleAdapter(Context context) {
            this.mContext = context;
        }

        private float getScaleType(int position) {

            Random rand = new Random();
            System.out.println(0.1 * (rand.nextInt(3)) + 0.6);


            if (!indexMap.containsKey(position)) {
                float scaleType;
//
                if (position == 0) {
                    scaleType = SIZE_SCALE_01;
                } else if (position == 1) {
                    scaleType = SIZE_SCALE_02;
                } else {
//                scaleType =1.0f;
//                    scaleType =(float) (0.1*(1+rand.nextInt(3))+0.6);
//            scaleType = rand.nextFloat();
                    scaleType = rand.nextInt() % 2 == 0 ? SIZE_SCALE_01 : SIZE_SCALE_02;
                }

                indexMap.put(position, scaleType);

            }
            return indexMap.get(position);
        }


        private void resizeItemView(CustomDraweeView frontCoverImage, float scaleType) {
            ViewGroup.LayoutParams params = (ViewGroup.LayoutParams) frontCoverImage.getLayoutParams();
            params.width = screenWidth / 2;
            params.height = (int) (params.width / scaleType) - UIUtil.dip2px(mContext, 8);
            frontCoverImage.setLayoutParams(params);
        }

        @Override
        public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
            View mView = LayoutInflater.from(mContext).inflate(R.layout.item_person_shortvideofragment, parent, false);//没有父布局，他不居中
            PersonAvatarMainPageShortVideoFragment.ShortVideoRecycleAdapter.ShortVideoViewHolder viewHolder = new PersonAvatarMainPageShortVideoFragment.ShortVideoRecycleAdapter.ShortVideoViewHolder(mView);
            return viewHolder;
        }

        @Override
        public void onBindViewHolder(RecyclerView.ViewHolder holder, final int position) {
            Log.d("Shortvideofragment", "   " + position + "");
            boolean isLiving;
            FeedRoom feedRoom = null;
            ReplayRoomBean replayRoom = null;
            if (mRoomList.get(position).getType() == 1) {
                isLiving = true;
                feedRoom = new Gson().fromJson(mRoomList.get(position).getEntity(), FeedRoom.class);
            } else {
                isLiving = false;
                replayRoom = new Gson().fromJson(mRoomList.get(position).getEntity(), ReplayRoomBean.class);
            }


            if (isLiving && feedRoom != null) {


                ((PersonAvatarMainPageShortVideoFragment.ShortVideoRecycleAdapter.ShortVideoViewHolder) holder).itemView.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {

                        IntentUtil.startLiveRoomActivity(getActivity(), mRoomList.get(position).getRoomId(), mRoomList.get(position).getCoverUrl());

                    }
                });

                ((PersonAvatarMainPageShortVideoFragment.ShortVideoRecycleAdapter.ShortVideoViewHolder) holder).icLikeImageView.setVisibility(View.GONE);
                ((PersonAvatarMainPageShortVideoFragment.ShortVideoRecycleAdapter.ShortVideoViewHolder) holder).icAddressImageVeiw.setVisibility(View.VISIBLE);
                ((PersonAvatarMainPageShortVideoFragment.ShortVideoRecycleAdapter.ShortVideoViewHolder) holder).tagImageView.setVisibility(View.GONE);

                String url = CustomDraweeView.parseImageUrl(mRoomList.get(position).getCoverUrl(), 200, 200);
//                    ((ShortVideoViewHolder) holder).customDraweeView.loadRectangleByUrl(mRoomList.get(position).getCoverUrl(), R.drawable.bg_default, UIUtil.dip2px(mContext, 2));
//                    ((ShortVideoViewHolder) holder).customDraweeView.loadRoundPicByUrl(mRoomList.get(position).getCoverUrl(), R.drawable.bg_default);
                ((PersonAvatarMainPageShortVideoFragment.ShortVideoRecycleAdapter.ShortVideoViewHolder) holder).customDraweeView.loadRectangleByUrlShortVideo(mRoomList.get(position).getCoverUrl(), R.drawable.bg_default, UIUtil.dip2px(mContext, 2));
                resizeItemView(((PersonAvatarMainPageShortVideoFragment.ShortVideoRecycleAdapter.ShortVideoViewHolder) holder).customDraweeView, getScaleType(position));


                ((PersonAvatarMainPageShortVideoFragment.ShortVideoRecycleAdapter.ShortVideoViewHolder) holder).nameTextView.setText(feedRoom.getRoom().getName() + "");
                ((PersonAvatarMainPageShortVideoFragment.ShortVideoRecycleAdapter.ShortVideoViewHolder) holder).numberTextView.setText(UnitUtil.getWNumString(feedRoom.getRoom().getOnlineUserCount()) + "");
                ((PersonAvatarMainPageShortVideoFragment.ShortVideoRecycleAdapter.ShortVideoViewHolder) holder).adressTextView.setText(feedRoom.getRoom().getCity() + "");

            }
            if (!isLiving && replayRoom != null) {
                final ReplayRoomBean finalReplayRoom = replayRoom;

                ((PersonAvatarMainPageShortVideoFragment.ShortVideoRecycleAdapter.ShortVideoViewHolder) holder).itemView.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {

                        IntentUtils.startPlayBackActivity(getActivity(), finalReplayRoom.getId() + "");

                    }
                });

                ((PersonAvatarMainPageShortVideoFragment.ShortVideoRecycleAdapter.ShortVideoViewHolder) holder).icLikeImageView.setVisibility(View.VISIBLE);
                ((PersonAvatarMainPageShortVideoFragment.ShortVideoRecycleAdapter.ShortVideoViewHolder) holder).tagImageView.setImageDrawable(ContextCompat.getDrawable(getActivity(), R.drawable.tag_playback_hot));
                ((PersonAvatarMainPageShortVideoFragment.ShortVideoRecycleAdapter.ShortVideoViewHolder) holder).tagImageView.setVisibility(View.VISIBLE);

                String url = CustomDraweeView.parseImageUrl(mRoomList.get(position).getCoverUrl(), 200, 200);
//                    ((ShortVideoViewHolder) holder).customDraweeView.loadRoundPicByUrl(mRoomList.get(position).getCoverUrl(), R.drawable.bg_default);
//                    ((ShortVideoViewHolder) holder).customDraweeView.loadRectangleByUrl(mRoomList.get(position).getCoverUrl(), R.drawable.bg_default, UIUtil.dip2px(mContext, 2));
                ((PersonAvatarMainPageShortVideoFragment.ShortVideoRecycleAdapter.ShortVideoViewHolder) holder).customDraweeView.loadRectangleByUrlShortVideo(mRoomList.get(position).getCoverUrl(), R.drawable.bg_default, UIUtil.dip2px(mContext, 2));
                resizeItemView(((PersonAvatarMainPageShortVideoFragment.ShortVideoRecycleAdapter.ShortVideoViewHolder) holder).customDraweeView, getScaleType(position));

                ((PersonAvatarMainPageShortVideoFragment.ShortVideoRecycleAdapter.ShortVideoViewHolder) holder).nameTextView.setText(finalReplayRoom.getTitle() + "");
                ((PersonAvatarMainPageShortVideoFragment.ShortVideoRecycleAdapter.ShortVideoViewHolder) holder).numberTextView.setText(finalReplayRoom.getLikeCount() + "");

            }
        }


        @Override
        public int getItemCount() {
            if (mRoomList == null) return 0;

            return mRoomList.size();
        }

        class ShortVideoViewHolder extends RecyclerView.ViewHolder {
            CustomDraweeView customDraweeView;
            RelativeLayout coverRelativeLayout;
            TextView nameTextView;
            TextView numberTextView;
            TextView adressTextView;
            ImageView tagImageView;
            ImageView icAddressImageVeiw;
            ImageView icLikeImageView;

            public ShortVideoViewHolder(View itemView) {
                super(itemView);
                customDraweeView = (CustomDraweeView) itemView.findViewById(R.id.customview);
                coverRelativeLayout = (RelativeLayout) itemView.findViewById(R.id.cover_relativelayout);
                nameTextView = (TextView) itemView.findViewById(R.id.tv_name);
                numberTextView = (TextView) itemView.findViewById(R.id.tv_number);
                adressTextView = (TextView) itemView.findViewById(R.id.tv_adress);
                tagImageView = (ImageView) itemView.findViewById(R.id.iv_tagbg);
                icAddressImageVeiw = (ImageView) itemView.findViewById(R.id.icon_iv_adress);
                icLikeImageView = (ImageView) itemView.findViewById(R.id.iv_ic_like_hot);

            }
        }
    }

大家主要看 resizeItemView和 getScaleType 以及他们两个东西在我自定义的adapter中如何使用的。

原理就是搞一个map用来记recyclerview中item的高度，然后在他加载显示数据的时候给他把params设上去，以此改变他item复用造成的闪烁移动的后果，但是这个玩意还是有bug例如最顶上两个item还是会互换位置，大家仔细观察快手App Android V5.2.2.4759 版本当你滑到首页瀑布流recyclerview的底部并自动加载一些数据，然后慢慢返回顶部，快要看到最顶上两个item时，仔细观察变化，哈哈哈哈哈，找到线上bug好开心，我是不是有当测试的潜质。