android - RecyclerView 和 GridLayoutManager : making one cell bigger

Question

我正在尝试制作如下图所示的布局!我唯一想要的就是让第一个单元格比其他单元格更大。到目前为止我尝试过的是以下代码:

        final AdapterFirstPage mAdapter = new AdapterFirstPage(mItems);
    mRecycle.setAdapter(mAdapter);
    final GridLayoutManager mng_layout = new GridLayoutManager(this, 6);
    mng_layout.setSpanSizeLookup( new GridLayoutManager.SpanSizeLookup() {
        @Override
        public int getSpanSize(int position) {
            int index = position%2 ;
            switch(index){
               case 0: return 4;
               case 1: return 2;
               case 2: return 2;
               case 3: return 3;
               case 4: return 3;
               default: return -1;
            }

        }
    });
        mRecycle.setLayoutManager(mng_layout);

实际上我已经尝试过 spanCount 并将其从 6 更改为 4，但我仍然不接近下图!谁能帮我实现这个目标？

Answer 1

您可以按如下方式以编程方式执行此操作:

private GridLayout setUpGrid(List<PictureUrlWithStatus> picWithStatusList) {

    if (picWithStatusList == null) { // No Photos present i.e. no Photos are added
        return null;
    }

    GridLayout.LayoutParams gridLayoutParams = new GridLayout.LayoutParams();
    gridLayoutParams.height = LayoutParams.MATCH_PARENT;
    gridLayoutParams.width = LayoutParams.MATCH_PARENT;

    GridLayout gridLayout = new GridLayout(this);
    gridLayout.setLayoutParams(gridLayoutParams);
    gridLayout.removeAllViews();

    int total_gridCount = picWithStatusList.size();
    int column = 3;
    int rowSize = total_gridCount / column;
    gridLayout.setColumnCount(column);

    //(For First Image which occupies 2 rows), If you are drawing less than 3 images, use 2 rows, else setRowCount as the default (rowSize + 1), extra as the first Image occupies 2 rows and still draws only 3 images.
    if (rowSize == 0)
        gridLayout.setRowCount(2);
    else
        gridLayout.setRowCount(rowSize + 1);

    for (int c = 0;/*getcount from  picWithStatusList*/; c++) {
        RelativeLayout.LayoutParams imageLayoutParam = new RelativeLayout.LayoutParams(
                LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);

        //The ImageView to load image
        ImageView profilePic = new ImageView(this);
        profilePic.setImageDrawable(getResources().getDrawable(
                R.drawable.ic_launcher));
        profilePic.setScaleType(ScaleType.CENTER_CROP);
        profilePic.setLayoutParams(imageLayoutParam);

        RelativeLayout.LayoutParams picstatusLayoutParam = new RelativeLayout.LayoutParams(
                LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);
        picstatusLayoutParam.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM);

        //The View for Text written Below Image
        TextView profilePicStatus = new TextView(this);
        profilePicStatus.setTextSize(TypedValue.COMPLEX_UNIT_SP, 10);
        profilePicStatus.setGravity(Gravity.CENTER_HORIZONTAL);
        profilePicStatus.setPadding(0, 2, 0, 0);
        profilePicStatus.setLayoutParams(picstatusLayoutParam);

        RelativeLayout.LayoutParams contentLayoutParams = new RelativeLayout.LayoutParams(
                LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
        contentLayoutParams.addRule(RelativeLayout.CENTER_HORIZONTAL);
        RelativeLayout contentLayout = new RelativeLayout(this);
        contentLayout.addView(profilePic);
        contentLayout.addView(profilePicStatus);
        contentLayout.setLayoutParams(contentLayoutParams);

        if (c >= 0) {
            if (c == 0) {
                LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(
                        2 * width / 3, 2 * width / 3);
                GridLayout.LayoutParams param = new GridLayout.LayoutParams(
                        layoutParams);
                param.setGravity(Gravity.CENTER);
                param.columnSpec = GridLayout.spec(c, 2);
                param.rowSpec = GridLayout.spec(0, 2);

                //Load image into profilePic (ImageView), I am assuming you have imageurl in profilePicWithStatus

                //The text written on top of the images.
                profilePicStatus.setText(c + " ");
                contentLayout.setLayoutParams(param);
            } else {
                LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(
                        1 * width / 3, 1 * width / 3);
                GridLayout.LayoutParams param = new GridLayout.LayoutParams(
                        layoutParams);
                param.setGravity(Gravity.CENTER);

                //Load image into profilePic (ImageView), I am assuming you have imageurl in profilePicWithStatus

                //The Text to be written on the top of image with align bottom
                profilePicStatus.setText(c + " ");
                contentLayout.setLayoutParams(param);
            }

        }
        gridLayout.addView(contentLayout);
    }
    return gridLayout;
}

此外，

PictureUrlWithStatus 是一个类如下:

private class PictureUrlWithStatus {
    // url is the Picture url and status will be 'Y'/'y' or 'N'/'n'
    String url, status;

    public PictureUrlWithStatus(String pictureUrl, String pictureStatus) {
        this.url = pictureUrl;
        this.status = pictureStatus;
    }
}

这应该让你做好准备