如何在listview中的childitem之间添加标题分隔符

时间:2015-05-07 09:39:29

标签: android android-listview

我希望在listview中的子项之间添加“Header”分隔符,我该如何实现它。下面是我的工作列表视图代码。

enter image description here

ElistCBox.java

public class ElistCBox extends ExpandableListActivity
{
    private static final String LOG_TAG = "ElistCBox2";
    private ColorAdapter expListAdapter;

    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle icicle)
    {
        super.onCreate(icicle);
        setContentView(R.layout.main);
        ArrayList<String> groupNames = new ArrayList<String>();

        groupNames.add("AAA");
        groupNames.add("BBB");
        groupNames.add("CCC");


        ArrayList<ArrayList<Color>> colors = new ArrayList<ArrayList<Color>>(); 

        ArrayList<Color> color = new ArrayList<Color>();
        color.add( new Color( "ABC", false ) ); 
        color.add( new Color( "DEF", true ) ); 
        color.add( new Color( "GHI", false ));

        colors.add( color );

        color = new ArrayList<Color>();
        color.add( new Color( "ABC", false ) ); 
        color.add( new Color( "DEF", true ) ); 
        color.add( new Color( "GHI", false ));

        colors.add( color );

        color = new ArrayList<Color>();
        color.add( new Color( "ABC", false ) ); 
        color.add( new Color( "DEF", true ) ); 
        color.add( new Color( "GHI", false ));

        colors.add( color );


        expListAdapter = new ColorAdapter( this,groupNames, colors );
        setListAdapter( expListAdapter );
    }

    public void onContentChanged  () {
        super.onContentChanged();
        Log.d( LOG_TAG, "onContentChanged" );
    }

    public boolean onChildClick(
            ExpandableListView parent, 
            View v, 
            int groupPosition,
            int childPosition,
            long id) {
        Log.d( LOG_TAG, "onChildClick: "+childPosition );
        CheckBox cb = (CheckBox)v.findViewById( R.id.check1 );
        if( cb != null )
            cb.toggle();
        return false;
    }
}

ColorAdapter.java

public class ColorAdapter extends BaseExpandableListAdapter {

    private Context context;
    private ArrayList<String> groups;
    private ArrayList<ArrayList<Color>> colors;
    private LayoutInflater inflater;

    public ColorAdapter(Context context, 
                        ArrayList<String> groups,
                        ArrayList<ArrayList<Color>> colors ) { 
        this.context = context;
        this.groups = groups;
        this.colors = colors;
        inflater = LayoutInflater.from( context );
    }

    public Object getChild(int groupPosition, int childPosition) {
        return colors.get( groupPosition ).get(childPosition );
    }

    public long getChildId(int groupPosition, int childPosition) {
        return (long)( groupPosition*1024+childPosition );                          // Max 1024 children per group
    }

    public View getChildView(int groupPosition, int childPosition, boolean isLastChild, View convertView, ViewGroup parent) {
        View v = null;
        if( convertView != null )
            v = convertView;
        else
            v = inflater.inflate(R.layout.child_row, parent, false); 
        Color c = (Color)getChild( groupPosition, childPosition );
        TextView color = (TextView)v.findViewById( R.id.childname );
        if( color != null )
            color.setText( c.getColor() );
        CheckBox cb = (CheckBox)v.findViewById( R.id.check1 );
        cb.setChecked( c.getState() );
        return v;
    }

    public int getChildrenCount(int groupPosition) {
        return colors.get( groupPosition ).size();
    }

    public Object getGroup(int groupPosition) {
        return groups.get( groupPosition );        
    }

    public int getGroupCount() {
        return groups.size();
    }

    public long getGroupId(int groupPosition) {
        return (long)( groupPosition*1024 );  // To be consistent with getChildId
    } 

    public View getGroupView(int groupPosition, boolean isExpanded, View convertView, ViewGroup parent) {
        View v = null;
        if( convertView != null )
            v = convertView;
        else
            v = inflater.inflate(R.layout.group_row, parent, false); 
        String gt = (String)getGroup( groupPosition );
        TextView colorGroup = (TextView)v.findViewById( R.id.childname );
        if( gt != null )
            colorGroup.setText( gt );
        return v;
    }

    public boolean hasStableIds() {
        return true;
    }

    public boolean isChildSelectable(int groupPosition, int childPosition) {
        return true;
    } 

    public void onGroupCollapsed (int groupPosition) {} 
    public void onGroupExpanded(int groupPosition) {}


}

Color.java

   public class Color {
        public String color = null;
        public boolean state = false;

        public Color( String color, boolean state ) {
            this.color = color;
            this.state = state;
        }

        public String getColor() {
            return color;
        }

        public boolean getState() {
            return state;
        }

    }

child_row.xml

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

    <TextView android:id="@+id/childname"
         android:paddingLeft="20px"
         android:focusable="false"
         android:textSize="19dp"
         android:textStyle="italic"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"/>

    <LinearLayout
        android:layout_height="match_parent"
        android:layout_width="fill_parent"
        android:gravity="right">

        <CheckBox
            android:id="@+id/check1"
            android:focusable="false"
            android:layout_marginRight="20dip"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content" />

    </LinearLayout>

</LinearLayout>

group_row.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="vertical"
    android:padding="8dp" 
    android:background="#000000">

    <TextView
        android:id="@+id/childname"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:paddingLeft="10dip"
        android:textSize="17dp"
        android:textColor="#f9f93d"/>

</LinearLayout>

main.xml中

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#f4f4f4"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/question"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dip"
        android:paddingLeft="10dp"
        android:paddingStart="10dp"
        android:text="Please select the programs/episodes you watched last week for which you will submit response"
        android:textColor="#000"
        android:textSize="17dp" />

    <ExpandableListView
        android:id="@+id/android:list"
        android:layout_marginTop="10dip"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:cacheColorHint="#00000000" />

    <Button
        android:id="@+id/btn_New"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Submit" />

</LinearLayout>

2 个答案:

答案 0 :(得分:0)

由于div:nth-last-child(n+5), div:nth-last-child(n+5) ~ div { } 的使用,我假设您将它用于类似的部分效果..

  • 要继续使用此方法,您可以通过编程方式ExpandableListView所有群组,然后expand群组disable的折叠。
  • 或者您可以使用onClick,此处有various libraries。以及SectionListView部分的额外质量。

希望这有帮助。

答案 1 :(得分:0)

在上面显示的pic中,不需要使用ExpandableListView。很简单,您可以使用

使用多个视图类型的ListView
public int getItemViewType(int position) {
    return 0; // return the item view type
}

public int getViewTypeCount() {
    return 1;
}

框架使用您的视图类型来决定在getView()方法中通过convertView传递哪些视图。这是一个让你更好理解的小例子

public class StockAdapter extends BaseAdapter {

    public static final int TYPE_ITEM = 0;
    public static final int TYPE_SEPARATOR = 1;
    // declaration of fields.
    private ArrayList<StockItemBean> stockListItems;

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

    @Override
    public int getItemViewType(int position) {
        //return the item type TYPE_ITEM or TYPE_SEPARATOR
    }

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

    @Override
    public View getView(final int position, View convertView, ViewGroup parent) {
        ViewHolder viewHolder = null;
        int type = getItemViewType(position);
        // for getting the convert view for the stock fragment grid item.
        if (convertView == null) {
            switch (type) {
            case TYPE_SEPARATOR:
            //Initialize the convert to header
                break;
            case TYPE_ITEM:
            //Initialize the convert to header
                break;
            }
        } else {
            viewHolder = (ViewHolder) convertView.getTag();
        }
        switch (type) {
        case TYPE_ITEM:
            // update the data for the list item
            break;
        case TYPE_SEPARATOR:
            //update the data for the header
            break;
        }
        return convertView;
    }

    private static class ViewHolder {

    }
}

概述一般流程:
1.使用适配器将数据绑定到AdapterView 2. AdapterView尝试显示用户可见的项目 3.框架调用行n的getItemViewType,它将要显示的行 4.框架检查其循环视图池以查看行n类型的视图。
它找不到,因为还没有回收任何意见。 为行n调用getView 6.为行n调用getItemViewType以确定应使用的视图类型 7.根据所需的视图类型,使用if / switch语句来膨胀不同的xml文件 8.您在视图中填写信息 9.返回视图,退出getView,并向用户显示行的视图。

现在,当通过滚动屏幕来回收视图时,它将进入由框架管理的循环视图池。这些基本上按视图类型进行组织,以便在getView方法的convertView参数中为您提供正确类型的视图:

  1. 框架再次为要显示的行调用getItemViewType。
  2. 这次,在适当类型的回收池中有一个视图。
  3. 将循环视图作为convertView参数传递给getView方法。
  4. 使用新信息填充回收的视图并将其返回。