listview嵌套gridview，并实现grid元素部分显示以及点击展开与折叠

有时我们需要用GridView显示目录列表，有时甚至是二级的，即listview每一个item里面又各自嵌入一个gridview，但是当二级目录（数据条目）的数量过多时，界面会比较臃肿，这时我们就想要有类似展开与折叠的效果，作者采用的策略是数据分段的分别显示，其中对于显示边界（处于限制显示数目的特定位置）的控件要有数据的动态更新和点击判断操作。效果如图：

具体实现：

一、Activity界面

package com.example.gridinlist;import java.util.Vector;import android.app.Activity;import android.os.Bundle;import android.widget.ListView;public class MainActivity extends Activity {private ListView listView;private MyAdapter adapter;private Vector<String> stringVector = new Vector<String>();@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);initView();}private void initView() {listView = (ListView) findViewById(R.id.list);adapter = new MyAdapter(this, this.getLayoutInflater(), stringVector);stringVector.add("0");stringVector.add("1");stringVector.add("2");stringVector.add("3");stringVector.add("4");stringVector.add("5");listView.setAdapter(adapter);}}

    主Activity，里面只有一个textview（标题）和listview（主体），其中Listview的适配器MyAdapter是自写的（也是实现效果的主要逻辑代码）。

    这里我们直传给MyAdapter一个字符串向量，为了简便，不管一级还是二级目录都是用的这一个向量（实际中每个二级子向量应该都是不同的），用户可根据需求自行添加或修改（也可以使用Parcel将其封装为一个二级的数据类型，具体不再赘述）。

Activity布局文件

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context="${relativePackage}.${activityClass}" >    <TextView        android:id="@+id/title"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:gravity="center_horizontal"        android:layout_centerHorizontal="true"        android:text="@string/hello_world" />        <ListView      android:id="@+id/list" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_marginLeft="7dip"        android:layout_marginRight="7dip"        android:layout_marginBottom="7dip"        android:layout_below="@+id/title" android:cacheColorHint="#00000000" android:drawSelectorOnTop="false"  android:listSelector="#00000000" android:scrollbars="none" android:scrollingCache="true"     android:drawingCacheQuality="low"     android:divider="#00000000"     android:dividerHeight="0dip"     android:fadingEdgeLength="0.0sp"    />    </RelativeLayout>

二、自写的istview的Adapter（关键代码）

package com.example.gridinlist;import java.util.ArrayList;import java.util.HashMap;import java.util.Vector;import android.annotation.SuppressLint;import android.content.Context;import android.database.DataSetObserver;import android.util.Log;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.AdapterView;import android.widget.AdapterView.OnItemClickListener;import android.widget.BaseAdapter;import android.widget.GridView;import android.widget.SimpleAdapter;import android.widget.TextView;import android.widget.Toast;public class MyAdapter extends BaseAdapter{private static final String TAG = "MyAdapter";private LayoutInflater inflater;private Context context;private Vector<String> vector;private int numGridShowLimit = 4; //Gridview限定显示数目/** * 搜索Adapter初始化 */public MyAdapter(Context context,LayoutInflater inflater,Vector<String> vector) {this.context = context;this.inflater = inflater;this.vector = vector;}/** * 初始化View */private static class ViewHolder{private TextView  titleTextView;private GridView  contentGridView;private GridView  contentMoreGridView;}/** * 添加数据 */@SuppressLint("InflateParams")@Overridepublic View getView(int position, View convertView, ViewGroup parent) {final ViewHolder viewHolder;if( convertView == null ){convertView = inflater.inflate(R.layout.adapter_listview,null);viewHolder = new ViewHolder();viewHolder.titleTextView  = (TextView) convertView.findViewById(R.id.list_txt_title);viewHolder.contentGridView = (GridView) convertView.findViewById(R.id.list_grid);viewHolder.contentMoreGridView = (GridView) convertView.findViewById(R.id.list_grid_more);convertView.setTag(viewHolder);}else viewHolder = (ViewHolder) convertView.getTag();try {if(vector != null && vector.size() > 0){final String category = vector.get(position);if(category != null){viewHolder.titleTextView.setText("list item "+category);}if (vector.size() > 0) {final ArrayList<HashMap<String, Object>> categoryList = new ArrayList<HashMap<String, Object>>();final ArrayList<HashMap<String, Object>> categorySubList1 = new ArrayList<HashMap<String, Object>>();final ArrayList<HashMap<String, Object>> categorySubList2 = new ArrayList<HashMap<String, Object>>();//先封装整个数据向量到categoryListif (vector != null && vector.size() > 0) {for (int i = 0; i < vector.size(); i++) {String o = vector.get(i);if (o != null) {HashMap<String, Object> map = new HashMap<String, Object>();map.put("ItemText", "grid" + o);categoryList.add(map);}}}final int mypos = position;//当数据向量长度大于限定显示的grid数目时，将整个数据向量分成两段if (vector.size() > numGridShowLimit) {//封装前段数据到categorySubList1for (int i = 0; i < numGridShowLimit; i++) {String o = vector.get(i);if (o != null) {if (i==numGridShowLimit-1) {HashMap<String, Object> map = new HashMap<String, Object>();if (viewHolder.contentMoreGridView.getVisibility()==View.GONE) {//若处于折叠状态则将限定数目的位置的数据修改为“+”（用于点击展开）map.put("ItemText", "" + "+");}else {//若处于展开状态则限定数目的位置的数据正常显示map.put("ItemText", "grid" + o);}categorySubList1.add(map);}else {HashMap<String, Object> map = new HashMap<String, Object>();map.put("ItemText", "grid" + o);categorySubList1.add(map);}}}//封装后段数据到categorySubList2for (int i = numGridShowLimit; i < vector.size(); i++) {String o = vector.get(i);if (o != null) {HashMap<String, Object> map = new HashMap<String, Object>();map.put("ItemText", "grid" + o);categorySubList2.add(map);}}HashMap<String, Object> map = new HashMap<String, Object>();map.put("ItemText", "-"); //在第二段的最后添加一个“-”数据（用于点击折叠）categorySubList2.add(map);//创建第一部分GridView的adapterfinal SimpleAdapter simpleAdapter1 = new SimpleAdapter(context, categorySubList1,R.layout.adapter_gridview,new String[] { "ItemText" }, // 对应map的Keynew int[] { R.id.ItemText }); // 对应R的IdviewHolder.contentGridView.setAdapter(simpleAdapter1);//创建第二部分GridView的adapterfinal SimpleAdapter simpleAdapter2 = new SimpleAdapter(context, categorySubList2,R.layout.adapter_gridview,new String[] { "ItemText" }, // 对应map的Keynew int[] { R.id.ItemText }); // 对应R的IdviewHolder.contentMoreGridView.setAdapter(simpleAdapter2);//设置第二部分GridView的adapter中的具体item点击事件viewHolder.contentMoreGridView.setOnItemClickListener(new OnItemClickListener() {public void onItemClick(AdapterView<?> AdapterView, View view,int pos, long row) {if (categoryList.size()>numGridShowLimit && pos==categoryList.size()-numGridShowLimit) {//若点击末尾的“-”，则将gridview折叠，并修改第一部分最后位置为“+”（可展开状态）View rel =  (View) viewHolder.contentGridView.getChildAt(numGridShowLimit-1);TextView tv =  (TextView) rel.findViewById(R.id.ItemText);tv.setText("+");viewHolder.contentMoreGridView.setVisibility(View.GONE);}else {view.setTag(mypos*100+numGridShowLimit+pos);Toast.makeText(context, " list position:"+ mypos+"\ngrid position:"+pos, Toast.LENGTH_SHORT).show();}}});}else {//若数据向量数目不大于限定的显示数目，则正常创建第一部分GridView的adapter（直接使用整体数据categoryList）final SimpleAdapter simpleAdapter = new SimpleAdapter(context, categoryList,R.layout.adapter_gridview,new String[] { "ItemText" }, // 对应map的Keynew int[] { R.id.ItemText }); // 对应R的IdviewHolder.contentGridView.setAdapter(simpleAdapter);}//设置第一部分GridView的adapter中的具体item点击事件viewHolder.contentGridView.setOnItemClickListener(new OnItemClickListener() {public void onItemClick(AdapterView<?> AdapterView, View view,int pos, long row) {if (categoryList.size()>numGridShowLimit && pos==numGridShowLimit-1) {TextView tv =  (TextView) view.findViewById(R.id.ItemText);String content = tv.getText().toString();if (content.equals("+")) {//若点击“+”，则进行展开操作，即显示第二部分gridview，并修改最后位置为“+”tv.setText("grid"+vector.get(numGridShowLimit-1));viewHolder.contentMoreGridView.setVisibility(View.VISIBLE);}else {view.setTag(mypos*100+pos);Toast.makeText(context, " list position:"+ mypos+"\ngrid position:"+pos, Toast.LENGTH_SHORT).show();}}else {view.setTag(mypos*100+pos);Toast.makeText(context, " list position:"+ mypos+"\ngrid position:"+pos, Toast.LENGTH_SHORT).show();}}});}}} catch (Exception e) {e.printStackTrace();Log.e(TAG, "Exception");}return convertView;}@Overridepublic int getCount() {    return vector.size();}@Overridepublic Object getItem(int position) {return null;}@Overridepublic long getItemId(int position) {return 0;}@Overridepublic void unregisterDataSetObserver(DataSetObserver observer) { if (observer != null) {         super.unregisterDataSetObserver(observer);     }}}

    具体步骤请看代码中的注释，需要注意的是，里面的GridView使用的是自写的控件，因为若使用Android自带的GridView，会出现在ListView中只显示一行grid的情况，这是因为ListView无法动态获取GridView的数目而无法确定它的高度，因此默认认为只有一行数据。

解决方法是：在自写的GridView里面，需要重写onMeasure方法，这样就可以得到GridView的高度了，代码如下：

package com.example.gridinlist;import android.widget.GridView;public class MyGridView extends GridView  {      public MyGridView(android.content.Context context,              android.util.AttributeSet attrs)      {          super(context, attrs);      }  /** * 重写的onMeasure方法 */    public void onMeasure(int widthMeasureSpec, int heightMeasureSpec)      {          int expandSpec = MeasureSpec.makeMeasureSpec(Integer.MAX_VALUE >> 2,                  MeasureSpec.AT_MOST);          super.onMeasure(widthMeasureSpec, expandSpec);        }    }

ListView的item布局文件：

<?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:layout_marginTop="1dip"    android:layout_marginBottom="1dip"    android:orientation="vertical"    android:baselineAligned="false"    android:background="#ffffff">    <RelativeLayout     android:id="@+id/list_rel"    android:layout_width="fill_parent"    android:layout_height="wrap_content"    android:layout_marginTop="10dip"    android:layout_marginBottom="10dip"    >            <ImageView            android:id="@+id/list_img_icon"            android:layout_width="3dip"            android:layout_height="17dip"            android:layout_marginLeft="15dip"            android:contentDescription="@null"            android:scaleType="fitXY"            android:layout_centerVertical="true"            android:src="@drawable/selected_orange"            android:visibility="visible" />            <TextView     android:id="@+id/list_txt_title"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:layout_toRightOf="@+id/list_img_icon"    android:layout_marginLeft="7dip"    android:layout_marginRight="7dip"    android:gravity="center"    android:layout_centerVertical="true"    android:singleLine="true"    />            </RelativeLayout>        <com.example.gridinlist.MyGridView        android:id="@+id/list_grid"        android:layout_width="fill_parent"        android:layout_height="fill_parent"        android:layout_marginBottom="1dip"        android:columnWidth="70dip"        android:horizontalSpacing="10dip"        android:verticalSpacing="10dip"        android:listSelector="@android:color/transparent"        android:numColumns="4"        android:paddingLeft="15dip"        android:paddingRight="15dip"        android:scrollbars="none"        android:stretchMode="columnWidth"        android:visibility="visible" >    </com.example.gridinlist.MyGridView>        <com.example.gridinlist.MyGridView        android:id="@+id/list_grid_more"        android:layout_width="fill_parent"        android:layout_height="fill_parent"        android:layout_marginTop="10dip"        android:layout_marginBottom="1dip"        android:columnWidth="70dip"        android:horizontalSpacing="10dip"        android:verticalSpacing="10dip"        android:listSelector="@android:color/transparent"        android:numColumns="4"        android:paddingLeft="15dip"        android:paddingRight="15dip"        android:scrollbars="none"        android:stretchMode="columnWidth"        android:visibility="gone" >    </com.example.gridinlist.MyGridView>    </LinearLayout>

里面包含一个标题，以及两个自写的GridView（一个显示前面部分，另一个显示剩下的，点击展开与折叠其实就是第二个GridView的显示与隐藏）

GridView的item布局文件：

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent" >        <TextView         android:id="@+id/ItemText"        android:layout_width="70dip"        android:layout_height="32dip"        android:background="@drawable/btn_txt_bg"        android:text=""        android:gravity="center"        /></RelativeLayout>

只是简单的一个TextView，用户想扩展或丰富可自行修改。

代码下载连接：http://download.csdn.net/detail/duguju/9233759