Recyclerview realization of waterfall flow layout

The Recyclerview itself provides three LayoutManager implementations

• Linearlayoutmanager
• Gridlayoutmanager
• Staggeredgridlayoutmanager

The first and second people are more commonly used, today we will use the third more unfamiliar staggeredgridlayoutmanager, let you split the minute to achieve waterfall flow layout.
First look at the final effect

All right, let's make it come true.
The first is the layout of item Masonry_item.xml is simple, it is a picture plus text, the item background is set to white

<?xml version= "1.0" encoding= "Utf-8"?><linearlayout  xmlns: Android  = "http://schemas.android.com/apk/res/android"  android:orientation  =" vertical " android:layout_width  = "wrap_content"  android:layout_height  = "wrap_content"  android:background  =" @color/white ";     <imageview  android:id
      = "@+id/masonry_item_img"  android:layout_width  = "match_parent"  android:layout_height  = "wrap_content"  android:adjustviewbounds
       = "true"  android:scaletype  =" Centercrop "/>     <TextViewandroid:id="@+id/masonry_item_title"android:layout_width= "Match_parent" android:layout_height="Wrap_content"android:gravity="center"/>                                </linearlayout>

For the sake of simplicity, we assume that each item's data is a product information

 Public classProduct {Private intimgPrivateString title; Public Product(intIMG, String title) { This. img = img; This. title = title; } Public int getimg() {returnimg } Public void setimg(intIMG) { This. img = img; } PublicStringGetTitle() {returnTitle } Public void Settitle(String title) { This. title = title; }}

Recyclerview's adapter is also very simple, the construction method accepts the product list data source

 Public  class masonryadapter extends recyclerview. Adapter<masonryadapter. Masonryview>{    PrivateList<product> Products; PublicMasonryadapter (list<product> List) {products=list; } @Override PublicMasonryview Oncreateviewholder (ViewGroup viewgroup,inti) {View view= layoutinflater.from (Viewgroup.getcontext ()). Inflate (R.layout.masonry_item, ViewGroup,false);return NewMasonryview (view); } @Override Public voidOnbindviewholder (Masonryview Masonryview,intPosition) {MasonryView.imageView.setImageResource (Products.get (position). GETIMG ());    MasonryView.textView.setText (Products.get (position). GetTitle ()); } @Override Public intGetItemCount () {returnProducts.size (); } Public Static  class masonryview extendsrecyclerview. Viewholder {  ImageView ImageView; TextView TextView; PublicMasonryview (View itemview) {Super(Itemview);           imageview= (ImageView) Itemview.findviewbyid (r.id.masonry_item_img);       textview= (TextView) Itemview.findviewbyid (r.id.masonry_item_title); }    }}

The main interface activity code can connect the data source to the view.

 @Override    protected void onCreate(Bundle savedinstancestate) {Super. OnCreate (Savedinstancestate);        Setcontentview (R.layout.activity_main); recyclerview= (Recyclerview) Findviewbyid (R.id.recycler);//Set LayoutManagerRecyclerview.setlayoutmanager (NewStaggeredgridlayoutmanager (2, staggeredgridlayoutmanager.vertical));//Set adapterInitData (); Masonryadapter adapter=NewMasonryadapter (productlist); Recyclerview.setadapter (adapter);//Set the interval between itemSpacesitemdecoration decoration=NewSpacesitemdecoration ( -);    Recyclerview.additemdecoration (decoration); }

First
You see, we've set Recyclerview's LayoutManager as a

new StaggeredGridLayoutManager(2,StaggeredGridLayoutManager.VERTICAL)

The parameter meaning is obvious, 2 is 2 columns, the second parameter is the vertical direction

Second

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

Set the interval, we customize a spacesitemdecoration, the code is very simple

 Public  class spacesitemdecoration extends recyclerview. itemdecoration {    Private intSpace Public spacesitemdecoration(intSpace) { This. space=space; }@Override     Public void getitemoffsets(Rect outrect, view view, Recyclerview parent, recyclerview.state State)        {outrect.left=space;        Outrect.right=space; Outrect.bottom=space;if(parent.getchildadapterposition (view) = =0) {outrect.top=space; }    }}

Focus on these 2 places, a few lines of code to achieve a beautiful waterfall flow layout, interested in their own to play the next Oh.

Recyclerview realization of waterfall flow layout