Android - Gridlayout和Staggered Gridlayout之间的区别

IBR*_*MAD 34 android android-layout android-gridlayout staggeredgridlayout

我在android材料设计api工作,想要以网格格式显示一些数据.我试过两个GridLayout,StaggeredGridlayout看起来都一样.一般信息,我想问一下Gridlayout和之间的区别是StaggeredGridlayout什么?

谢谢.

Vip*_*sri 61

网格视图:它是ViewGroup在二维可滚动网格中显示项目.在此,每个网格具有相同的大小(高度和宽度).网格视图在视图中显示对称项.

网格视图

交错网格视图:它基本上是一个扩展,Grid View但在此每个网格具有不同的大小(高度和宽度).交错网格视图显示视图中的不对称项目.

交错的网格视图

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

  1. 交错网格视图
  2. Pinterest砌体布局交错网格视图


小智 6

我在Oodles Technologies的时间教会了我交错.我会分享一下.

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

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

1)创建一个视图.

正如我们所知,staggeredgrid并不是一个直接视图,它是一个布局管理器,它以交错的网格形式展示儿童.我们使用RecyclerView作为交错网格的视图.这是我们的布局回收视图 -

<relativelayout android:layout_height="match_parent" android:layout_width="match_parent" android:paddingtop="@dimen/activity_vertical_margin" tools:context="com.deepanshu.staggered_gridlayout.MainActivity" xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools">

    <android.support.v7.widget.recyclerview android:id="@+id/favPlaces" android:layout_height="match_parent" android:layout_width="match_parent">
</android.support.v7.widget.recyclerview></relativelayout>
Run Code Online (Sandbox Code Playgroud)

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);
Run Code Online (Sandbox Code Playgroud)

3)适配器膨胀交错网格视图.

为了首先以网格形式膨胀数据,我们需要一个代表该数据的布局.我们正在使用CardView,布局是 -

<android.support.v7.widget.cardview android:layout_height="wrap_content" android:layout_width="match_parent" app:cardcornerradius="4dp" app:cardusecompatpadding="true">
    <linearlayout android:background="@color/colorPrimary" android:layout_height="match_parent" android:layout_width="match_parent" android:orientation="vertical">



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

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


    </textview></imageview></linearlayout>
</android.support.v7.widget.cardview>

</linearlayout>
Run Code Online (Sandbox Code Playgroud)

然后我们设置所有基本步骤,是时候完成我们的主要活动了.这是主要活动的完整代码 -

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;
    }
}
Run Code Online (Sandbox Code Playgroud)