Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to add multiple headers throughout a single ListView with addHeaderView()?

Can Android's addHeaderView() be used to add multiple headers throughout a single ListView? Can someone give an example of how to do this?

I was able to accomplish what I wanted by manipulating the IconicAdapter Class... is there any reason why I should not do it this way? I feel this could be modified for more advanced implementations. In my case, I know that I will have two sections, with a header + 2 rows in each section.

class IconicAdapter extends ArrayAdapter<String> {
    IconicAdapter() {
        super(ContactTabProfileResource.this, R.layout.row_iconic, mArrayList);
    }


    public View getView(int position, View convertView, ViewGroup parent) {

        LayoutInflater inflater = getLayoutInflater();
        View row = null;

        if(position == 1 || position == 5) { // phone 
            row = inflater.inflate(R.layout.row_iconic, parent, false);
            TextView label =(TextView)row.findViewById(R.id.label);
            label.setText(mArrayList.get(position));
            ImageView icon = (ImageView)row.findViewById(R.id.rowicon);
            icon.setImageResource(R.drawable.icon_phone);
        } else if (position == 2 || position == 6) { // email
            row = inflater.inflate(R.layout.row_iconic, parent, false);
            TextView label =(TextView)row.findViewById(R.id.label);
            label.setText(mArrayList.get(position));
            ImageView icon = (ImageView)row.findViewById(R.id.rowicon);
            icon.setImageResource(R.drawable.icon_email);
        } else if (position == 0 || position == 4) { // section header
            row = inflater.inflate(R.layout.row_header, parent, false);
            TextView label =(TextView)row.findViewById(R.id.label);
            label.setText(mArrayList.get(position));
            label.setBackgroundColor(Color.GRAY);   
        } else if (position == 3) { // section divider
            row = inflater.inflate(R.layout.row_header, parent, false);
            TextView label =(TextView)row.findViewById(R.id.label);
            label.setText(" ");
        }

        return(row);

    }
}

Then I created two different XML layouts. row_header.xml is for the header rows and row_iconic.xml is for the non-header rows, which contain an icon.

row_header.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:orientation="horizontal"
  android:gravity="right"
>    

  <TextView
    android:id="@+id/label"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:textSize="20sp"
    android:paddingTop="10dp"
    android:paddingBottom="10dp"
    android:paddingRight="10dp"
    android:paddingLeft="10px"
    android:gravity="left"
    android:textStyle="bold"
    />    
</LinearLayout>

row_iconic.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:orientation="horizontal"
  android:gravity="right"
>    

  <TextView
    android:id="@+id/label"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:textSize="16sp"
    android:paddingTop="10dp"
    android:paddingBottom="10dp"
    android:paddingRight="10dp"
    android:paddingLeft="44px"
    />  
    <ImageView
    android:id="@+id/rowicon"
    android:layout_width="40dp"
    android:paddingRight="10dp"
    android:paddingTop="10dp"
    android:layout_height="30dp"        
    android:src="@drawable/icon"
    />    
</LinearLayout>
like image 738
Chris Avatar asked Sep 16 '10 20:09

Chris


1 Answers

What you want Android developers might call a list separator or subheading ("headers" and "footers" live only at the top or bottom of the list). The gist of how you can do this is by using a ListAdapter that wraps other ListAdapters and is smart enough to return a header view type for certain rows and keep track of the offsets, or wraps those separator views in their own mini adapters.

Take a look at Mark Murphy's SectionedListAdapter, GPL, which takes the first approach (based on code by Jeff Sharkey), or his MergeAdapter, and see this SO question.

It's a far cry from the graceful handling of smart list subheadings on the iPhone, but it is fairly straightforward to use MergeAdapter and very flexible once you wrap your head around exactly what's going on inside the adapters.

like image 82
Yoni Samlan Avatar answered Nov 01 '22 19:11

Yoni Samlan