如何使用网格布局管理器来recyclerview设置不同大小的图像？

Question

I want to make categories ui as like below in android. I am using recyclerview with grid layout manager. But I am unable to manage it like this design in android.

Answer 1

You can use a StaggeredGridLayout as below.

RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recyclerView);
StaggeredGridLayoutManager staggeredGridLayoutManager = new StaggeredGridLayoutManager(3, LinearLayoutManager.VERTICAL);
recyclerView.setLayoutManager(staggeredGridLayoutManager);
CustomAdapter customAdapter = new CustomAdapter(MainActivity.this,images);
recyclerView.setAdapter(customAdapter);

Answer 2

I have managed span of images in adapter class like below.
 private static final int TYPE_SMALL_SQUARE = 0;
 private static final int TYPE_LARGE_SQUARE = 1;
 private static final int TYPE_LREACT = 2;
 private static final int TYPE_HREACT = 3;
  @Override
    public int getItemViewType(int position) {
        switch (position) {
            case 0:
                return TYPE_LARGE_SQUARE;
            case 1:
                return TYPE_HREACT;
            case 2:
                return TYPE_LREACT;
            case 3:
                return TYPE_LREACT;
            case 4:
                return TYPE_SMALL_SQUARE;
        }
        return super.getItemViewType(position);
    }

Answer 3

Then implement onPreDraw method in on create view.
  @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(context).inflate(R.layout.category_adapter, parent, false);
        ButterKnife.bind(this, view);
        view.getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
            @Override
            public boolean onPreDraw() {
                final int type = viewType;
                final ViewGroup.LayoutParams lp = view.getLayoutParams();
                final StaggeredGridLayoutManager lm =
 (StaggeredGridLayoutManager) ((RecyclerView) parent).getLayoutManager();
                if (lp instanceof StaggeredGridLayoutManager.LayoutParams) {
                    StaggeredGridLayoutManager.LayoutParams sglp =
                            (StaggeredGridLayoutManager.LayoutParams) lp;
                    switch (type) {
                        case TYPE_LARGE_SQUARE:
                            sglp.width = view.getWidth() ;
                            sglp.height = view.getHeight()/2;
                            break;
                        case TYPE_HREACT:
                            sglp.width = view.getWidth() ;
                            sglp.height = view.getHeight() ;
                            break;
                        case TYPE_LREACT:
                            sglp.width = view.getWidth() ;
                            sglp.height = view.getHeight() / 2;
                            break;
                        case TYPE_SMALL_SQUARE:
                            sglp.width = view.getWidth();
                            sglp.height = view.getHeight()/2;
                            break;
                    }
                    view.setLayoutParams(sglp);
                    lm.invalidateSpanAssignments();
                }
                view.getViewTreeObserver().removeOnPreDrawListener(this);
                return true;
            }
        });
        return new ViewHolder(view);
    }