Android - 网格布局和交错网格布局之间的区别答案

【问题标题】：Android - Difference between Gridlayout and Staggered GridlayoutAndroid - 网格布局和交错网格布局之间的区别
【发布时间】：2016-03-16 23:22:27
【问题描述】：

我正在使用 android material design api 并希望以网格格式显示一些数据。我尝试了GridLayout 和StaggeredGridlayout 两者看起来都一样。对于一般信息，我想问Gridlayout 和StaggeredGridlayout 有什么区别？

谢谢。

【问题讨论】：

gridview 是对称的，交错的 gridview 是不对称的..

标签： android android-layout android-gridlayout staggeredgridlayout

【解决方案1】：

我在 Oodles Technologies 的经历教会了我交错的知识。我会分享的。

StaggeredGridLayout 是一个 LayoutManager，它就像一个 GridView，但在这个网格中每个视图都有自己的大小（高度和宽度）。它支持垂直和水平布局。

以下是创建交错网格的一些基本步骤：

1) 创建视图。

我们知道 StaggeredGrid 不是直接视图，它是一个 LayoutManager，它以交错的网格形式布置子项。我们使用 RecyclerView 作为交错网格的视图。这是布局中的 RecyclerView：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/favPlaces"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
    
</RelativeLayout>

2) 设置 StaggeredGridLayout LayoutManager。

一旦我们的视图准备就绪，让我们使用 LayoutManager 在视图上创建网格：

RecyclerView favPlaces = (RecyclerView) findViewById(R.id.favPlaces);
StaggeredGridLayoutManager layoutManager = new StaggeredGridLayoutManager(2,StaggeredGridLayoutManager.VERTICAL);
layoutManager.setGapStrategy(StaggeredGridLayoutManager.GAP_HANDLING_NONE);
favPlaces.setLayoutManager(layoutManager);
favPlaces.setHasFixedSize(true);

3) 扩展 StaggeredGrid 视图的适配器。

要以网格的形式膨胀数据，我们首先需要一个布局来表示该数据。我们为此使用 CardView，布局是：

<LinearLayout 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="match_parent"
    android:orientation="vertical">

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:cardcornerradius="4dp"
        app:cardusecompatpadding="true">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/colorPrimary"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/placePic"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:adjustviewbounds="true"
                android:scaletype="fitXY" />

            <TextView
                android:id="@+id/placeName"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:textsize="16sp" />

        </LinearLayout>

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

</LinearLayout>

设置完所有基本步骤后，就该完成我们的主要活动了。 MainActivity的完整代码如下：

public class MainActivity extends AppCompatActivity {
 
    int placeImage[]= {R.drawable.agattia_airport_lakshadweep,R.drawable.nainital,R.drawable.goa,
            R.drawable.lotus_temple,R.drawable.valley_of_flowers,R.drawable.ranikhet,R.drawable.dehradun,R.drawable.nainital1};
 
    String placeName[]= {"Lakshadweep, India","Nainital, India","Goa, India","Lotus-Temple, India","Valley-Of-Flowers, India","Ranikhet, India",
    "Dehradun, India","Nainital, India"};
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        RecyclerView favPlaces = (RecyclerView) findViewById(R.id.favPlaces);
        StaggeredGridLayoutManager layoutManager = new StaggeredGridLayoutManager(2,StaggeredGridLayoutManager.VERTICAL);
        layoutManager.setGapStrategy(StaggeredGridLayoutManager.GAP_HANDLING_NONE);
        favPlaces.setLayoutManager(layoutManager);
        favPlaces.setHasFixedSize(true);
        ArrayList<PlaceDetails> placeList = getPlaces();
 
        StaggeredAdapter staggeredAdapter = new StaggeredAdapter(placeList);
        favPlaces.setAdapter(staggeredAdapter);
    }
 
    private ArrayList<PlaceDetails> getPlaces() {
        ArrayList<PlaceDetails> details = new ArrayList<>();
        for (int index=0; index<placeImage.length;index++){
            details.add(new PlaceDetails(placeImage[index],placeName[index]));
        }
        return details;
    }
}

【讨论】：

【解决方案2】：

交错网格布局

这会以交错的网格形式布置孩子。
它支持水平和垂直布局以及反向布局子级的能力。
交错的网格可能在布局的边缘有间隙。
为避免间隙，StaggeredGridLayoutManager 可以独立偏移跨度或在跨度之间移动项目。您可以通过setGapStrategy(int) 控制此行为。

网格布局

这会将其子项布置在矩形网格中。
网格由一组无限细的线组成，将查看区域分隔为多个单元格。
子项占用一个或多个相邻单元格，由其rowSpec 和columnSpec 布局参数定义。

【讨论】：

你的图片不是 StaggeredGridLayout ，它是来自github.com/felipecsl/AsymmetricGridView的自定义GridLayout
@javaacm 这并不重要，因为他正确地澄清了他的观点......

【解决方案3】：

网格布局（API 级别 14）： 将其子级放置在矩形网格中的布局。可以使用android:rowCount 和android:columnCount 属性声明网格中的行数和列数。但是，通常，如果声明了列数，则 GridLayout 将根据占用的单元格数推断行数，从而无需使用 rowCount 属性。同样，可以选择通过android:orientation 属性定义 GridLayout 的方向。

我认为没有单独的 StaggeredGridLayout。这是我们所拥有的东西

StaggeredGridLayoutManager : 它是 Recyclerview 中使用的布局管理器之一。A LayoutManager 以交错的网格形式布置子级。它支持水平和垂直布局以及反向布局子级的能力。

Staggered GridView ： StaggeredGridView 允许用户创建具有不均匀行的 GridView，类似于 Pinterest 的外观。包括自己的 OnItemClickListener 和 OnItemLongClickListener、选择器和固定位置恢复。请看 this 示例。

【讨论】：

【解决方案4】：

网格视图：它是一个ViewGroup，在二维、可滚动网格中显示项目。在此每个网格都具有相同的大小（高度和宽度）。网格视图在视图中显示对称项目。

交错网格视图：它基本上是Grid View 的扩展，但在此每个网格的大小（高度和宽度）。交错网格视图在视图中显示不对称的项目。

实现交错网格视图的教程：

【讨论】：

【解决方案5】：

交错网格布局包括多列和多行不同大小。

它允许具有页眉和页脚的灵活列/行视图，并且看起来相当容易实现，尽管 Gradle 用户将比使用 Eclipse 和 Ant 的用户更容易。这就是视图在为其开发的Etsy Github app 中的样子。

而GridLayout 是一种将其子元素放置在矩形网格中的布局。

它是在 API 级别 14 中引入的，最近在支持库中被反向移植。其主要目的是解决其他布局中的对齐和性能问题。如果您想了解有关 GridLayout 的更多信息，请查看this tutorial。

【讨论】：