Android Interleaved GridView

Download Demo Interleaved GridView

The staggered GridView is just a GridView with unequal size rows and multiple columns. You may have used the Pinterest,expedia or Etsy Android app.

Currently, there are 2, 3 very good open source libraries.

Staggered GridView Library

• Staggered GridView by Etsy
• Staggered GridView by Maurycy Wojtowicz

The following is a description of the most popular interleaved gridview using the widest range of Etsy.

Etsy staggered GridView

The custom interleaved GridView is extended according to the Abslistview class, which of course supports Abslistview.onscrolllistener.

Function

• You can configure the number of columns horizontally and vertically.
• The asynchronous line position that varies across directions.
• Margins for configurable items (margin)
• Header and Footer (footer) are supported.
• Internal padding (Internal padding), without affecting headers and footers.

Etsy's interleaved GridView does not support long-press events and selector drawables for items, while Maurycy's interleaved GridView supports long-press events.

Environment

• Windows R2 64-bit
• Eclipse ADT v22.6.2,android 4.4.2 (API 19)
• SAMSUNG gt-8618,android OS 4.1.2

Project structure

Figure 1 Project Structure

• The Staggeredgrid project is the Com.etsy.android.grid library.
• The Staggeredgriddemo project is an example.

Example: Etsy interleaved GridView

Figure 2 Demo Interleaved GridView

• Download/include library Com.etsy.android.grid

The Com.etsy.android.grid library is currently configured to be generated only through Gradle, so if you use Android Studio, you can include this library directly as a Gradle dependency to build. If you use Eclipse/ant, then you have to perform additional steps.

For Android Studio environments:

repositories {

    Mavencentral ()

}

dependencies {

    Compile ' com.etsy.android.grid:library:x.x.x '//Read below comment

}

For Eclipse/ant Build:

Download the Com.etsy.android.grid and import to the project.

• Put the Staggeredgridview in your layout--activity_sgv.xml

<com.etsy.android.grid.StaggeredGridView xmlns:android= "Http://schemas.android.com/apk/res/android"

    xmlns:app= "Http://schemas.android.com/apk/res-auto"

    Android:id= "@+id/grid_view"

    Android:layout_width= "Match_parent"

    android:layout_height= "Match_parent"

    app:column_count= "@integer/grid_column_count"

    />

• Define the row layout for Staggeredgridview--row_grid_item.xml

<?  versionencoding= "Utf-8"?  >   

<xmlns:android= "Http://schemas.android.com/apk/res/android" 

    Android:id= "@+id/panel_content"

    Android:layout_width= "Match_parent"

    Android:layout_height= "Wrap_content"

    Android:descendantfocusability= "Blocksdescendants"

    Android:orientation>

    <Com.etsy.android.grid.util.DynamicHeightImageView

        Android:id= "@+id/imgview"

        Android:layout_width= "Match_parent"

        android:layout_height= "Match_parent"

        />

</framelayout> 

The custom row should contain Dynamicheightimageview or dynamicheighttextview.

• Custom Adapter

Class Sampleadapter extends Arrayadapter<string> {

    "Sampleadapter";

    Private final Layoutinflater Mlayoutinflater;

    Private final Random Mrandom;

    New Sparsearray<double> ();

    int Textviewresourceid,

            Arraylist<string> objects) {

        Super (context, Textviewresourceid, objects);

        This.mlayoutinflater = Layoutinflater.from (context);

        New Random ();

    }

    @Override

    int position, View Convertview,

            Final ViewGroup parent) {

        Viewholder VH;

        NULL) {

            Convertview = Mlayoutinflater.inflate (R.layout.row_grid_item,

                    FALSE);

            New Viewholder ();

            Vh.imgview = (Dynamicheightimageview) convertview

                    . Findviewbyid (R.id.imgview);

            Convertview.settag (VH);

        else {

            VH = (Viewholder) convertview.gettag ();

        }

        Double positionheight = getpositionratio (position);

        Vh.imgView.setHeightRatio (Positionheight);

        Imageloader.getinstance (). DisplayImage (GetItem (position), vh.imgview);

        return convertview;

    }

    Class Viewholder {

        Dynamicheightimageview Imgview;

    }

    int position) {

        Double ratio = Spositionheightratios.get (position, 0.0);

        If not yet done generate and stash the columns height

        In We real world scenario this'll be determined by

        Some match based on the known height and width of the image

        And maybe a helpful to get the column height!

        if (ratio = = 0) {

            Ratio = Getrandomheightratio ();

            Spositionheightratios.append (position, ratio);

            "ratio:" + ratio);

        }

        return ratio;

    }

    Double Getrandomheightratio () {

        Height would be 1.0-1.5

                                                    The width

    }

}

The custom adapter class is used to display a picture of the dynamic height in a staggered GridView. In addition, the Universal Image Loader library is used to load images asynchronously.

• Setting the custom adapter to Staggeredgridview

Class Staggeredgridactivity extends Activity implements

        Abslistview.onscrolllistener, Abslistview.onitemclicklistener {

    "Staggeredgridactivity";

    "Saved_data";

    Private Staggeredgridview Mgridview;

    Private Boolean Mhasrequestedmore;

    Private Sampleadapter Madapter;

    Private arraylist<string> Mdata;

    @Override

    void OnCreate (Bundle savedinstancestate) {

        Super.oncreate (savedinstancestate);

        Setcontentview (R.LAYOUT.ACTIVITY_SGV);

        Settitle ("TECHNOTALKATIVE-SGV Demo");

        Mgridview = (Staggeredgridview) Findviewbyid (R.id.grid_view);

        New Sampleadapter (this, Android. R.layout.simple_list_item_1,

                Generatedata ());

        Does we have saved data?

        NULL) {

            Mdata = Savedinstancestate.getstringarraylist (Saved_data_key);

        }

        NULL) {

            Mdata = Generatedata ();

        }

        for (String Data:mdata) {

            Madapter.add (data);

        }

        Mgridview.setadapter (Madapter);

        Mgridview.setonscrolllistener (this);

        Mgridview.setonitemclicklistener (this);

    }

    @Override

    void Onsaveinstancestate (Final Bundle outstate) {

        Super.onsaveinstancestate (outstate);

        Outstate.putstringarraylist (Saved_data_key, mdata);

    }

    @Override

    void onscrollstatechanged (Final Abslistview view,

            int scrollstate) {

        "Onscrollstatechanged:" + scrollstate);

    }

    @Override

    int Firstvisibleitem,

            int Totalitemcount) {

        "Onscroll Firstvisibleitem:" + Firstvisibleitem

                "Totalitemcount:"

                + Totalitemcount);

        Our handling

        if (!mhasrequestedmore) {

            int lastinscreen = Firstvisibleitem + visibleitemcount;

            if (Lastinscreen >= totalitemcount) {

                "Onscroll lastinscreen-so load More");

                True

                Onloadmoreitems ();

            }

        }

    }

    void Onloadmoreitems () {

        Final arraylist<string> sampleData = Generatedata ();

        for (String Data:sampledata) {

            Madapter.add (data);

        }

        Stash all the data in our backing store

        Mdata.addall (SampleData);

        Notify the adapter so we can update now

        Madapter.notifydatasetchanged ();

        False

    }

    Private Arraylist<string> Generatedata () {

        New Arraylist<string> ();

        Listdata.add ("http://images.cnblogs.com/cnblogs_com/liuning8023/610092/o_2iitkhx.jpg");

        Listdata.add ("http://images.cnblogs.com/cnblogs_com/liuning8023/610092/o_w0omeb.jpg");

        Listdata.add ("http://images.cnblogs.com/cnblogs_com/liuning8023/610092/o_w9iu1d.jpg");

        Listdata.add ("http://images.cnblogs.com/cnblogs_com/liuning8023/610092/o_iw6kh2.jpg");

        Listdata.add ("http://images.cnblogs.com/cnblogs_com/liuning8023/610092/o_ru08c8.jpg");

        Listdata.add ("http://images.cnblogs.com/cnblogs_com/liuning8023/610092/o_k12r10.jpg");

        Listdata.add ("http://images.cnblogs.com/cnblogs_com/liuning8023/610092/o_2e3daug.jpg");

        Listdata.add ("http://images.cnblogs.com/cnblogs_com/liuning8023/610092/o_2igznfr.jpg");

        return listData;

    }

    @Override

    void Onitemclick (adapterview<?> adapterview, view view,

            Long id) {

        Toast.maketext ("Item Clicked:" + position, Toast.length_short)

                . Show ();

    }

}

Table 1 staggered GridView configurable properties

Property	Description
Item_margin	The margin around each grid item (default 0DP).
Column_count	The number of columns displayed. would override Column_count_portrait and Column_count_landscape if present (default 0).
Column_count_portrait	The number of columns displayed when the grid was in portrait (default 2).
Column_count_landscape	The number of columns displayed when the grid was in landscape (default 3).
Grid_paddingleft	Padding to the left of the grid. Does not apply to headers and footers (default 0).
Grid_paddingright	Padding to the right of the grid. Does not apply to headers and footers (default 0).
Grid_paddingtop	Padding to the top of the grid. Does not apply to headers and footers (default 0).
Grid_paddingbottom	Padding to the bottom of the grid. Does not apply to headers and footers (default 0).

Android Interleaved GridView