StaggeredGridLayoutManager dislocation

Question

I have used RecyclerView and StaggeredGridLayoutManager.

When I scroll from top to the bottom, it looked well. But when I scroll from bottom to the top , the top child view appear a blank.

Now, I found when I scroll from top to bottom, it looks :

  left1     right1
  left2     right2
  left3     right3
  left4     right4
  left5     right5
  left6     right6
  left7     right7

When I scroll from bottom to the top, something happened, it looks like this:

  right1    left1
  right2    left2
  right3    left3
  right4    left4
  left5     right5
  left6     right6
  left7     right7

and the height of left and right is different, so when on the top , it appeared a blank.

Here is my code :

recyclerView = (RecyclerView) findViewById(R.id.recycler_view);
recyclerView.setItemAnimator(new DefaultItemAnimator());
staggeredGridLayoutManager = new StaggeredGridLayoutManager(2,StaggeredGridLayoutManager.VERTICAL);
recyclerView.setLayoutManager(staggeredGridLayoutManager);
recyclerView.setHasFixedSize(true);
recyclerView.addItemDecoration(new ViewItemDecoration());

Now I do not know how to solve it.

here is my Adapter code:

 @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
        int itemViewType = getItemViewType(position);
        StaggeredGridLayoutManager.LayoutParams layoutParams1 = ((StaggeredGridLayoutManager.LayoutParams) holder.itemView.getLayoutParams());
        if (itemViewType < 0) {
            return;
        }
        Logger.i("Topic_viewType", viewType.get(itemViewType) + "");
        switch (viewType.get(itemViewType)) {
            case ITEM:
                layoutParams1.setFullSpan(true);
                onBindItemViewHolder(holder, position);
                break;
            case ITEMS:
                layoutParams1.setFullSpan(true);
                onBindItemsViewHolder(holder, position);
                break;
            case IMAGES:
                layoutParams1.setFullSpan(true);
                onBindImageViewHolder(holder, position);
                break;
            case BLANK:
                layoutParams1.setFullSpan(true);
                break;
            case COVER:
                layoutParams1.setFullSpan(true);
                onBindCoverImageViewHolder(holder, position);
                break;
            case LINE:
                layoutParams1.setFullSpan(true);
                onBindLineViewHolder(holder, position);
                break;
            case TEXT:
                layoutParams1.setFullSpan(true);
                onBindTextViewHolder(holder, position);
                break;
            case SPACING:
                layoutParams1.setFullSpan(true);
                onBindSpacingViewHolder(holder, position);
                break;
            case READ_COUNT:
                layoutParams1.setFullSpan(true);
                onBindReadCountViewHolder(holder, position);
                break;
            case OTHER_TOPIC:
                layoutParams1.setFullSpan(true);
                break;
            case HOT:
                layoutParams1.setFullSpan(true);
                onBindHotViewHolder(holder, position);
                break;
            case MORE:
                layoutParams1.setFullSpan(true);
                onBindMoreViewHolder(holder, position);
                break;
            case ITEMS_MORE:
                layoutParams1.setFullSpan(true);
                onBindItemsMoreViewHolder(holder, position);
                break;
            case WALL_ITEM_TITLE:
                layoutParams1.setFullSpan(true);
                break;
            case WALL_ITEM:
                layoutParams1.setFullSpan(false);
                onBindWallItemViewHolder(holder, position);
                break;
            case WALL_LOAD_MORE:
                layoutParams1.setFullSpan(true);
                onBindLoadMoreViewHolder(holder, position);
                break;

        }
    }

here is my bindHolder code:

String url = info.getImageSrc();
int width = info.getWidth();
int height = info.getHeight();
SimpleDraweeView imageView = viewHolder.image;
imageView.setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View v) {
            UIHelper.jumpByUri(activity, info.getLink());
      }
});
if (height > 0) {
      // set the aspect ratio
      imageView.setAspectRatio(width * 1.0f / height);
}
imageView.setImageURI(Uri.parse(url));

here is my xml code:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:id="@+id/ll_topic_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <include layout="@layout/toolbar_custom" />

        <android.support.v7.widget.RecyclerView
            android:id="@+id/recycler_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

    </LinearLayout>

    <ImageView
        android:id="@+id/iv_feedback"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_feedback"
        android:layout_alignParentRight="true"
        android:layout_above="@+id/iv_back_top"
        android:layout_marginBottom="@dimen/space_30px"
        android:layout_marginRight="@dimen/space_30px"
        android:adjustViewBounds="true"
        android:contentDescription="@null"
        android:visibility="gone"/>

    <ImageView
        android:id="@+id/iv_back_top"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_marginBottom="@dimen/space_30px"
        android:layout_marginEnd="@dimen/space_30px"
        android:layout_marginRight="@dimen/space_30px"
        android:adjustViewBounds="true"
        android:contentDescription="@null"
        android:src="@drawable/up_top_icon"
        android:visibility="gone" />

</RelativeLayout>

Answer 1

try this?

staggeredGridLayoutManager..setGapStrategy(StaggeredGridLayoutManager.GAP_HANDLING_MOVE_ITEMS_BETWEEN_SPANS)

Answer 2

StaggeredGridLayoutManager uses two strategies to deal with gaps. The default strategy is GAP_HANDLING_MOVE_ITEMS_BETWEEN_SPANS, which means that StaggeredGridLayoutManager can rearrange your items. In your case you can use GAP_HANDLING_NONE to prevent rearranging. For example:

recyclerView.layoutManager = StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL).apply {
            gapStrategy = StaggeredGridLayoutManager.GAP_HANDLING_NONE
}