Skip to content

A grid that supports elements of varying widths and heights. Includes horizontal and vertical orientation support, sections, ability to preload pages.

Notifications You must be signed in to change notification settings

sarahsnow1/StaggeredGridView

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

96 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

StaggeredGridView

Introduction

This is a fork of the modified version of Android's experimental StaggeredGridView that was originally posted here.

The internal logic has been completely rewritten to support both horizontal and vertical orientations. This version also adds support for sections and preloading pages. It recycles its views and uses the common Adapter pattern found in common Android UI elements such as ListView.

This version of StaggeredGridView is optimized for views where the size of each element is known. It's adapter adds a method to retrieve the size of each element in the grid. This is used to enhance scroll performance as well as to position the item on screen.

Setup

#####Via Gradle:

dependencies {
    compile 'com.sarahlensing.staggeredgridview:library:x.x.x'
}

Replace "x.x.x" with the current version. At the moment, that version is "0.0.3"

-or- #####Library project: If you are not using Gradle, add the StaggeredGridView as a library project dependency

Usage

StaggeredGridView can be added as a custom view to any layout.

Attributes supported:

  • itemMargin : determines the margin between items in the grid
  • numPagesToPreload : determines the number of pages offscreen in either direction to preload
  • gridOrientation : determines the direction in which items are laid out: horizontally or vertically
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:staggered="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/mainLayout">

    <com.sarahlensing.staggeredgridview.StaggeredGridView
        android:id="@+id/staggeredGridView"
		staggered:gridOrientation="horizontal"
		staggered:itemMargin="20dp"
		staggered:numPagesToPreload="2"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

To feed the StaggeredGridView with data, create an adapter:

StaggeredGridAdapter

        StaggeredGridAdapter mGridAdapter = new StaggeredGridAdapter() {

        @Override
        public ItemSize getItemSize(int position) {
            return mItemSizes.get(position);
        }

        @Override
        public int getCount() {
            return mItemSizes.size();
        }

        @Override
        public Object getItem(int position) {
            return position;
        }

        @Override
        public long getItemId(int position) {
            return position;
        }

        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            ViewHolder holder;
            if (convertView == null) {
                LayoutInflater layoutInflator = LayoutInflater.from(getActivity().getBaseContext());
                convertView = layoutInflator.inflate(R.layout.grid_item_view, null);
                holder = new ViewHolder();
                holder.gridItemView = (GridItemView) convertView;
                holder.titleView = (TextView) convertView.findViewById(R.id.titleView);
                holder.subtitleView = (TextView) convertView.findViewById(R.id.subtitleView);
                convertView.setTag(holder);
            }
            else {
                holder = (ViewHolder) convertView.getTag();
            }
            ItemSize itemSize = mItemSizes.get(position);
            holder.gridItemView.itemSize = itemSize;
            holder.gridItemView.setBackgroundColor(nextRandomColor());
            holder.titleView.setText(String.valueOf(position));
            holder.subtitleView.setText(String.valueOf(itemSize.width) + "x" + String.valueOf(itemSize.height));
            return convertView;
        }
    };

StaggeredGridSectionAdapter

      StaggeredGridSectionAdapter mGridSectionAdapter = new StaggeredGridSectionAdapter() {

       @Override
       public ItemSize getItemSize(int position) {
           return mItemSizes.get(position);
       }

       @Override
       public int getCount() {
           return mItemSizes.size();
       }

       @Override
       public Object getItem(int position) {
           return position;
       }

       @Override
       public long getItemId(int position) {
           return position;
       }

       @Override
       public View getView(int position, View convertView, ViewGroup parent) {
           ViewHolder holder;
           if (convertView == null) {
               LayoutInflater layoutInflator = LayoutInflater.from(getActivity().getBaseContext());
               convertView = layoutInflator.inflate(R.layout.grid_item_view, null);
               holder = new ViewHolder();
               holder.gridItemView = (GridItemView) convertView;
               holder.titleView = (TextView) convertView.findViewById(R.id.titleView);
               holder.subtitleView = (TextView) convertView.findViewById(R.id.subtitleView);
               convertView.setTag(holder);
           }
           else {
               holder = (ViewHolder) convertView.getTag();
           }
           ItemSize itemSize = mItemSizes.get(position);
           holder.gridItemView.itemSize = itemSize;
           holder.gridItemView.setBackgroundColor(nextRandomColor());
           holder.titleView.setText(String.valueOf(position));
           holder.subtitleView.setText(String.valueOf(itemSize.width) + "x" + String.valueOf(itemSize.height));
           return convertView;
       }

       @Override
       public ItemSize getSectionSize(int position) {
           return mSectionSizes.get(position);
       }

       @Override
       public long getSectionID(int position) {
           return position;
       }

       @Override
       public View getSectionView(int position, View convertView, ViewGroup parent) {
           SectionViewHolder holder;
           if (convertView == null) {
               LayoutInflater layoutInflator = LayoutInflater.from(getActivity().getBaseContext());
               convertView = layoutInflator.inflate(R.layout.grid_section_view, null);
               holder = new SectionViewHolder();
               holder.gridItemView = (GridItemView) convertView;
               holder.titleView = (TextView) convertView.findViewById(R.id.titleView);
               convertView.setTag(holder);
           }
           else {
               holder = (SectionViewHolder) convertView.getTag();
           }
           ItemSize itemSize = mSectionSizes.get(position);
           holder.gridItemView.itemSize = itemSize;
           holder.gridItemView.setBackgroundColor(Color.BLUE);
           holder.titleView.setText(String.valueOf(position));
           return convertView;
       }

       @Override
       public int getSectionCount() {
           return mSectionSizes.size();
       }

       @Override
       public int getItemCountForSection(int section) {
           return 10;
       }

       @Override
       public int getItemViewType(int position) {
           return 0;
       }

       @Override
       public int getViewTypeCount() {
           return 1;
       }
   };

Then call:

mGridView.setAdapter(mGridSectionAdapter);

Tests

No tests have been written however I will test this View manually with 2.2.2+ devices and upload a demo project. Please report any issues.

TODO:

  • Implement sticky headers
  • Support rearranging
  • Support multiple selection
  • Develop tests

About

A grid that supports elements of varying widths and heights. Includes horizontal and vertical orientation support, sections, ability to preload pages.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • Java 83.0%
  • Shell 16.3%
  • Groovy 0.7%