Android StaggeredGrid RecyclerView moves the item automatically

Question

I'm trying to show any pictures with Staggered Grid, but many problems are occuring.

Firstly, when I pulled up to the top, it moves items for example from left to right, or swap the column of left and right.

See below .gif:

I have searched for a solution to this problem via Google already. I am using the this code in my project:

StaggeredGridLayoutManager Layoutmanager = new StaggeredGridLayoutManager(3, OrientationHelper.VERTICAL);
manager.setGapStrategy(StaggeredGridLayoutManager.GAP_HANDLING_NONE);
recyclerView.setLayoutManager(manager);

recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
    @Override
    public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
        super.onScrollStateChanged(recyclerView, newState);
        ((StaggeredGridLayoutManager)recyclerView.getLayoutManager()).invalidateSpanAssignments();
    }
});

Unfortunately, there is still a serious problem occurring when I scroll up. The item still moves and it will scrolls far though even if I just scroll shortly.

See below .gif:

How can I deal with these problems, or otherwise achieve this effect?

MainActivity:

public class MainActivity extends AppCompatActivity {

private DrawerLayout mDrawerLayout;

private photos[] photoses = {
        new photos("Tags:",R.drawable.timg),
        new photos("Tags:",R.drawable.timg1),
        new photos("Tags:",R.drawable.timg2),
        new photos("Tags:",R.drawable.timg3),
        new photos("Tags:",R.drawable.timg4),
        new photos("Tags:",R.drawable.timg5),
        new photos("Tags:",R.drawable.timg6),
        new photos("Tags:",R.drawable.timg7),
        new photos("Tags:",R.drawable.timg8),
        new photos("Tags:",R.drawable.timg9),
        new photos("Tags:",R.drawable.timg10),
        new photos("Tags:",R.drawable.timg11),
        new photos("Tags:",R.drawable.timg12),
};

private List<photos> photosList = new ArrayList<>();

private photoAdapter adapter;

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.toolbar,menu);
    return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()){
        case android.R.id.home:
            mDrawerLayout.openDrawer(GravityCompat.START);
            break;
        case R.id.edit_bar:
            Toast.makeText(this,"edit",Toast.LENGTH_SHORT).show();
            break;
        case R.id.search_bar:
            Toast.makeText(this,"search",Toast.LENGTH_SHORT).show();
            break;
        default:break;
    }
    return true;
}

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);
    mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
    ActionBar actionBar = getSupportActionBar();
    if (actionBar!=null){
        actionBar.setDisplayHomeAsUpEnabled(true);
        actionBar.setHomeAsUpIndicator(R.drawable.homemenu);
    }
    FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
    fab.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            Snackbar.make(view,"Hello World",Snackbar.LENGTH_SHORT).show();
        }
    });
    initPhotos();
    RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recycler_view);
    final StaggeredGridLayoutManager layoutManager = new StaggeredGridLayoutManager(3,StaggeredGridLayoutManager.VERTICAL);
    recyclerView.setLayoutManager(layoutManager);
    adapter = new photoAdapter(photosList);
    recyclerView.setAdapter(adapter);
}

private void initPhotos() {
    photosList.clear();
    for (int i = 0;i<100;i++){
        Random random = new Random();
        int index = random.nextInt(photoses.length);
        photosList.add(photoses[index]);
    }
}
}

photoAdapter:

public class photoAdapter extends RecyclerView.Adapter<photoAdapter.ViewHolder> {

private Context mcontext;

private List<Integer> mHeights;

private List<photos> mPhotoList;

static class ViewHolder extends RecyclerView.ViewHolder{
    CardView cardView;
    ImageView photoView;
    TextView photoTag;

    public ViewHolder(View view){
        super(view);
        cardView = (CardView) view;
        photoView = (ImageView) view.findViewById(R.id.photo_view);
        photoTag = (TextView) view.findViewById(R.id.photo_tag);
    }
}

public photoAdapter(List<photos> photoList){
    mPhotoList = photoList;
}


@Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
    if (mcontext==null){
        mcontext = parent.getContext();
    }
    View view = LayoutInflater.from(mcontext).inflate(R.layout.photo_item,parent,false);
    return new ViewHolder(view);
}

@Override
public void onBindViewHolder(ViewHolder holder, int position) {
    photos photo = mPhotoList.get(position);
    holder.photoTag.setText(photo.getTag());
    Glide.with(mcontext).load(photo.getImageId()).into(holder.photoView);
}

@Override
public int getItemCount() {
    return mPhotoList.size();
}
}

Answer 1

来自Android文档

  

交错的网格可能在布局的边缘有间隙。至   为了避免这些间隙，StaggeredGridLayoutManager可以偏移范围   独立或跨范围移动项目。你可以控制这个   通过setGapStrategy(int)

的行为

参考： https://developer.android.com/reference/android/support/v7/widget/StaggeredGridLayoutManager.html https://stackoverflow.com/a/34274327/3701433