Click here to Skip to main content
15,886,362 members
Articles / Web Development / HTML
Tip/Trick

Customized StickyGridHeaders

Rate me:
Please Sign up or sign in to vote.
5.00/5 (3 votes)
13 Sep 2013CPOL1 min read 12.2K   479   6  
I customized StickyGridHeaders to work on any data and group by any data.

Image 1

Introduction

I customized StickyGridHeaders to group any type of data and group by any data.

Using the Code

I will explain every part of the code and classes that need to be changed in order to make it work as required.

We will change in the following classes:

  1. StickyGridHeadersSimpleArrayAdapter
  2. StickyGridHeadersSimpleAdapter
  3. StickyGridHeadersSimpleWrapper

1. StickyGridHeadersSimpleArrayAdapter

  1. Let's get our class ready to hold our ArrayList data by changing the constructor and init() functions.
    Java
    //Initialize an ArrayList that holds the data received by constructor
    private ArrayList<HashMap<String, String>> DataArray;
    
    //Added a new parameter to both constructors of type ArrayList that holds our data
    public StickyGridHeadersSimpleArrayAdapter(Context context,
    int headerResId, int itemResId , ArrayList<HashMap<String, String>> data) {
         init(context, headerResId, itemResId, data);
    }
    
    //Passing the data to our prive ArrayList DataArray
    private void init(Context context, int headerResId,
    int itemResId, ArrayList<HashMap<String, String>> data) {
         this.mHeaderResId = headerResId;
         this.mItemResId = itemResId;
         this.DataArray = data;
         mInflater = LayoutInflater.from(context);
    }
    
  2. Change getCount() function to return the right count of our data ArrayList.
    Java
    @Override
    public int getCount() {
         return DataArray.size();
    }
    
  3. Change getItem() function to return a specific Item of our data ArrayList depending on position parameter.
    Java
    @Override
    public HashMap<string> getItem(int position) {
         return DataArray.get(position);
    }
    
  4. Change getHeaderId() function to work with an element inside ArrayList. In my example, it's "Name" .
    Java
    public CharSequence getHeaderId(int position) {
    //Change Item Type from "T" to "HashMap"
      HashMap<string> item  = getItem(position);
      CharSequence value;
      //get the string that you want to group by.Here i would like to group by "Name"
      if (item.get("Name") instanceof CharSequence) {
            //Insert it inside value variable
            value = (CharSequence) item.get("Name");
      } else {
            //Insert it inside value variable
            value = item.get("Name").toString();
      }
    
      return value.subSequence(0, 1);
    }
    
  5. Change getHeaderView() function. One of the most important functions that will return the string that will appear on the Header.
    Java
    @SuppressWarnings("unchecked")
    public View getHeaderView(int position, View convertView, ViewGroup parent) {
        HeaderViewHolder holder;
        if (convertView == null) {
            convertView = mInflater.inflate(mHeaderResId, parent, false);
            holder = new HeaderViewHolder();
            holder.textView = (TextView) convertView.findViewById(android.R.id.text1);
            convertView.setTag(holder);
        } else {
            holder = (HeaderViewHolder) convertView.getTag();
        }
    
        HashMap<string> item = getItem(position);
        CharSequence string;
        if (item.get("Name") instanceof CharSequence) {
            string = (CharSequence) item.get("Name");
        } else {
            string = item.get("Name").toString();
        }
    
        // set header text as first char in string
    
        //HERE the Text that will appear on header ,you can change the subSequence to any character
        //like display 1 character as below link or 2 or ( item.get("Name").length - 1 )
        holder.textView.setText(string.subSequence(0, 1));
    
        return convertView;
    }
    
  6. Change getView() function. One of the most important functions that will return the data that will appear.
    You can check More Information field below to change the header and data style or add an imageview to display.
    Java
    @Override
    @SuppressWarnings("unchecked")
    public View getView(int position, View convertView, ViewGroup parent) {
        ViewHolder holder;
        if (convertView == null) {
             convertView = mInflater.inflate(mItemResId, parent, false);
             holder = new ViewHolder();
             holder.textView = (TextView) convertView.findViewById(android.R.id.text1);
             convertView.setTag(holder);
        } else {
             holder = (ViewHolder) convertView.getTag();
        }
    
        HashMap<String, String> item = getItem(position);
        if (item.get("Name") instanceof CharSequence) {
             holder.textView.setText((CharSequence) item.get("Name"));
        } else {
             holder.textView.setText(item.get("Name").toString());
        }
    
        return convertView;
    }
    

2. StickyGridHeadersSimpleAdapter

  1. Change the type of returned data from long to CharSequence.
    Java
    CharSequence getHeaderId(int position);
    

3. StickyGridHeadersSimpleWrapper

  1. Change the type of "mapping" from long to CharSequence.
    Java
    protected HeaderData[] generateHeaderList(StickyGridHeadersSimpleAdapter adapter) {
    
       //Change Map from long to CharSequence
       Map<CharSequence, HeaderData> mapping = new HashMap<CharSequence, HeaderData>();
       List<HeaderData> headers = new ArrayList<HeaderData>();
    
       for (int i = 0; i < adapter.getCount(); i++) {
           CharSequence headerId = adapter.getHeaderId(i);
           HeaderData headerData = mapping.get(headerId);
           if (headerData == null) {
               headerData = new HeaderData(i);
               headers.add(headerData);
           }
           headerData.incrementCount();
           mapping.put(headerId, headerData);
       }
    
       return headers.toArray(new HeaderData[headers.size()]);
    }
    

More Information

  • You can change the Header Style from header.xml.
  • You can change the item data to display from item.xml.
  • You must include the gridview com.example.stickyheadertest.StickyGridHeadersGridView to get it work.

Thank you everyone for reading this tip, and hopefully it helps everyone out.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer eSpace Software Company
Egypt Egypt
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
-- There are no messages in this forum --