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;
    }
}

这会让你振作起来

Answer 2

这是GridLayoutManager的限制。对于垂直滚动，项目只能跨列扩展，反之亦然。当您无法跨行和列扩展时，它可以使布局计算更加简单。

如果你想在你的插图中做一些非常简单的事情 - 只在第一张图片上跨越行和列 - 那么我建议重新考虑这一点，这样你的前三张图像就在一行上。您在大图像右侧的第二个和第三个图像实际上是同一个列表项的一部分。

将适配器更改为具有代表第二个位置的特殊项目;例如，包含第二和第三项的项目列表。
更改适配器以完全忽略第三项。因此，对于通常返回第三项的适配器位置2（从零开始），返回第四项，依此类推。缺少的第三个项目已在列表中与第二个项目一起表示。
为该特殊项目（列表）提供不同的视图类型。创建一个垂直堆叠两个图像的视图。然后绑定将涉及该列表中的第二和第三项。

由于您有三列，因此您的跨度计数显然为3。第一个项目的跨度大小为2，第二个/第三个组合项目的跨度大小为1.

调整双视图的边距以匹配RecyclerView和您业务中的边距。

Answer 3

如果你想要实现不同大小的项目，你不应该使用GridLayoutManager。你应该像this那样实现你自己的LayoutManager。

RecyclerView和GridLayoutManager：使一个单元格更大

3 个答案: