Pinterest 类似于 Android 中的 Grid答案

【问题标题】：Pinterest like Grid in AndroidPinterest 类似于 Android 中的 Grid
【发布时间】：2012-09-15 21:50:42
【问题描述】：

我想构建一个类似于 Android 上 Pinterest 应用程序中的网格。

我开始扩展AdapterView<ListAdapter>，但我无法让很多事情发挥作用（例如过度滚动效果），所以在放弃扩展AbsListView 的想法后，现在我开始认为最好扩展ListView并覆盖layoutChildren() 方法。

你怎么看？

谢谢

【问题讨论】：

> AntipodalWall 是一个独立的库，旨在为 Android 提供所谓的“砌体”网格布局（很像 Pinterest 应用程序）。检查这个项目AntipodalWall
你找到解决办法了吗？
解决方案是我正在创建一个自定义的 AdapterView 组件。我会在github上分享组件，什么时候完成。
谢谢，请在此处发布您的精彩代码
这需要一段时间，因为我找不到关于创建 AdapterView 的好教程，除了索尼爱立信的一个缺乏许多功能的教程。

标签： android listview gridview pinterest

【解决方案1】：

我们不需要任何外部库，因为 Android 的原生 RecyclerView 只需更改 RecyclerView 的布局管理器即可实现 Pinterest 砌体布局

mRecyclerView.setLayoutManager(new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL));
RecyclerAdapter adapter = new RecyclerAdapter(this);
mRecyclerView.setAdapter(adapter);

酷。这很容易，但我的 LinearLayout 上的边距似乎不起作用。所以这里有一个快速修复。

SpacesItemDecoration decoration = new SpacesItemDecoration(16);
mRecyclerView.addItemDecoration(decoration);

SpacesItemDecoration 类：

public class SpacesItemDecoration extends RecyclerView.ItemDecoration {
private final int mSpace;

public SpacesItemDecoration(int space) {
    this.mSpace = space;
}

@Override
public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
    outRect.left = mSpace;
    outRect.right = mSpace;
    outRect.bottom = mSpace;

    // Add top margin only for the first item to avoid double space between items
    if (parent.getChildAdapterPosition(view) == 0)
        outRect.top = mSpace;
    }
}

Github link of example

【讨论】：

【解决方案2】：

我通过复制和更新 Android 的 StaggeredGridView 解决了这个问题。 https://github.com/maurycyw/StaggeredGridView 。似乎非常适合创建您正在寻找的效果。在此之前，我陷入了将 Android 的源代码复制到一个单独的库（我开始工作）的兔子洞，直到我看到了现在实验性的 StaggeredGridView。它比我的旧“BrickView”库项目简单得多，所以我替换了它。

【讨论】：

太好了，告诉我进展如何！
StaggeredGridView 有很多问题，滚动后旋转屏幕很容易找到。我建议使用不同的库。如果你愿意，我已经发布了一个新建议。

【解决方案3】：

这可以通过对现有的 recyclerview 及其适配器进行小改动来实现

要做的改变是： 1.在你的Activity / Fragment中

uploadMediaAdapter = new UploadMediaAdapter(getActivity(),mediaArrayList);    
rv_uploaded.setAdapter(uploadMediaAdapter);
int spanCount = 2;
rv_uploaded.setLayoutManager(new StaggeredGridLayoutManager(spanCount, StaggeredGridLayoutManager.VERTICAL));

2.您的 Recyclerview 列表项是：

<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="@dimen/dim_5"
    app:cardCornerRadius="@dimen/dim_5"
    app:cardUseCompatPadding="true"
    android:clipToPadding="true"
    >

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        >

        <android.support.v7.widget.AppCompatImageView
            android:id="@+id/img_prev_photo"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:scaleType="fitXY"
            android:adjustViewBounds="true"
            />

        <android.support.v7.widget.AppCompatTextView
            android:id="@+id/txt_progress_date"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="8th August 2019"
            android:textSize="@dimen/text_size_17"
            android:textStyle="bold"
            android:layout_gravity="bottom|center_horizontal"
            android:textColor="@color/color_white"
            />

    </FrameLayout>


</android.support.v7.widget.CardView>

通过这样做，您可以实现您想要的！

【讨论】：