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

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

2024-08-24 08:15:15   219人阅读

原文链接：http://blog.csdn.net/duguju/article/details/49538341

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

技术分享

 

具体实现：

一、Activity界面

 

[java] view plain copy
 
  1. package com.example.gridinlist;  
  2.   
  3. import java.util.Vector;  
  4.   
  5. import android.app.Activity;  
  6. import android.os.Bundle;  
  7. import android.widget.ListView;  
  8.   
  9. public class MainActivity extends Activity {  
  10.   
  11.     private ListView listView;  
  12.     private MyAdapter adapter;  
  13.     private Vector<String> stringVector = new Vector<String>();  
  14.       
  15.     @Override  
  16.     protected void onCreate(Bundle savedInstanceState) {  
  17.         super.onCreate(savedInstanceState);  
  18.         setContentView(R.layout.activity_main);  
  19.         initView();  
  20.     }  
  21.   
  22.     private void initView() {  
  23.         listView = (ListView) findViewById(R.id.list);  
  24.         adapter = new MyAdapter(this, this.getLayoutInflater(), stringVector);  
  25.           
  26.         stringVector.add("0");  
  27.         stringVector.add("1");  
  28.         stringVector.add("2");  
  29.         stringVector.add("3");  
  30.         stringVector.add("4");  
  31.         stringVector.add("5");  
  32.           
  33.         listView.setAdapter(adapter);  
  34.     }  
  35. }  

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

 

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

 

Activity布局文件

 

[html] view plain copy
 
  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     xmlns:tools="http://schemas.android.com/tools"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     tools:context="${relativePackage}.${activityClass}" >  
  6.   
  7.     <TextView  
  8.         android:id="@+id/title"  
  9.         android:layout_width="wrap_content"  
  10.         android:layout_height="wrap_content"  
  11.         android:gravity="center_horizontal"  
  12.         android:layout_centerHorizontal="true"  
  13.         android:text="@string/hello_world" />  
  14.       
  15.     <ListView   
  16.          android:id="@+id/list"  
  17.          android:layout_width="fill_parent"  
  18.          android:layout_height="fill_parent"  
  19.          android:layout_marginLeft="7dip"  
  20.          android:layout_marginRight="7dip"  
  21.          android:layout_marginBottom="7dip"  
  22.          android:layout_below="@+id/title"  
  23.          android:cacheColorHint="#00000000"  
  24.          android:drawSelectorOnTop="false"   
  25.          android:listSelector="#00000000"  
  26.          android:scrollbars="none"  
  27.          android:scrollingCache="true"  
  28.          android:drawingCacheQuality="low"  
  29.          android:divider="#00000000"  
  30.          android:dividerHeight="0dip"  
  31.          android:fadingEdgeLength="0.0sp"   
  32.     />  
  33.       
  34.   
  35. </RelativeLayout>  


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

 

 

[java] view plain copy
 
  1. package com.example.gridinlist;  
  2.   
  3. import java.util.ArrayList;  
  4. import java.util.HashMap;  
  5. import java.util.Vector;  
  6. import android.annotation.SuppressLint;  
  7. import android.content.Context;  
  8. import android.database.DataSetObserver;  
  9. import android.util.Log;  
  10. import android.view.LayoutInflater;  
  11. import android.view.View;  
  12. import android.view.ViewGroup;  
  13. import android.widget.AdapterView;  
  14. import android.widget.AdapterView.OnItemClickListener;  
  15. import android.widget.BaseAdapter;  
  16. import android.widget.GridView;  
  17. import android.widget.SimpleAdapter;  
  18. import android.widget.TextView;  
  19. import android.widget.Toast;  
  20.   
  21. public class MyAdapter extends BaseAdapter  
  22. {  
  23.     private static final String TAG = "MyAdapter";  
  24.     private LayoutInflater inflater;  
  25.     private Context context;  
  26.     private Vector<String> vector;  
  27.     private int numGridShowLimit = 4; //Gridview限定显示数目  
  28.       
  29.     /** 
  30.      * 搜索Adapter初始化 
  31.      */  
  32.     public MyAdapter(Context context,LayoutInflater inflater,Vector<String> vector)   
  33.     {  
  34.         this.context = context;  
  35.         this.inflater = inflater;  
  36.         this.vector = vector;  
  37.     }  
  38.   
  39.     /** 
  40.      * 初始化View 
  41.      */  
  42.     private static class ViewHolder  
  43.     {  
  44.         private TextView  titleTextView;  
  45.         private GridView  contentGridView;  
  46.         private GridView  contentMoreGridView;  
  47.     }  
  48.       
  49.     /** 
  50.      * 添加数据 
  51.      */  
  52.     @SuppressLint("InflateParams")  
  53.     @Override  
  54.     public View getView(int position, View convertView, ViewGroup parent)   
  55.     {  
  56.         final ViewHolder viewHolder;  
  57.         if( convertView == null )  
  58.         {  
  59.             convertView = inflater.inflate(R.layout.adapter_listview,null);  
  60.             viewHolder = new ViewHolder();  
  61.             viewHolder.titleTextView  = (TextView) convertView.findViewById(R.id.list_txt_title);  
  62.             viewHolder.contentGridView = (GridView) convertView.findViewById(R.id.list_grid);  
  63.             viewHolder.contentMoreGridView = (GridView) convertView.findViewById(R.id.list_grid_more);  
  64.             convertView.setTag(viewHolder);  
  65.         }  
  66.         else viewHolder = (ViewHolder) convertView.getTag();  
  67.           
  68.         try   
  69.         {  
  70.             if(vector != null && vector.size() > 0)  
  71.             {  
  72.                 final String category = vector.get(position);  
  73.                 if(category != null)  
  74.                 {  
  75.                     viewHolder.titleTextView.setText("list item "+category);  
  76.                 }  
  77.                   
  78.                 if (vector.size() > 0) {  
  79.                     final ArrayList<HashMap<String, Object>> categoryList = new ArrayList<HashMap<String, Object>>();  
  80.                     final ArrayList<HashMap<String, Object>> categorySubList1 = new ArrayList<HashMap<String, Object>>();  
  81.                     final ArrayList<HashMap<String, Object>> categorySubList2 = new ArrayList<HashMap<String, Object>>();  
  82.                     //先封装整个数据向量到categoryList  
  83.                     if (vector != null && vector.size() > 0) {  
  84.                         for (int i = 0; i < vector.size(); i++) {  
  85.                             String o = vector.get(i);  
  86.                             if (o != null) {  
  87.                                 HashMap<String, Object> map = new HashMap<String, Object>();  
  88.                                 map.put("ItemText", "grid" + o);  
  89.                                 categoryList.add(map);  
  90.                             }  
  91.                         }  
  92.                     }  
  93.                     final int mypos = position;  
  94.                       
  95.                     //当数据向量长度大于限定显示的grid数目时，将整个数据向量分成两段  
  96.                     if (vector.size() > numGridShowLimit) {  
  97.                           
  98.                         //封装前段数据到categorySubList1  
  99.                         for (int i = 0; i < numGridShowLimit; i++) {  
  100.                             String o = vector.get(i);  
  101.                             if (o != null) {  
  102.                                 if (i==numGridShowLimit-1) {  
  103.                                     HashMap<String, Object> map = new HashMap<String, Object>();  
  104.                                     if (viewHolder.contentMoreGridView.getVisibility()==View.GONE) {  
  105.                                         //若处于折叠状态则将限定数目的位置的数据修改为“+”（用于点击展开）  
  106.                                         map.put("ItemText", "" + "+");  
  107.                                     }else {  
  108.                                         //若处于展开状态则限定数目的位置的数据正常显示  
  109.                                         map.put("ItemText", "grid" + o);  
  110.                                     }  
  111.                                     categorySubList1.add(map);  
  112.                                 }else {  
  113.                                     HashMap<String, Object> map = new HashMap<String, Object>();  
  114.                                     map.put("ItemText", "grid" + o);  
  115.                                     categorySubList1.add(map);  
  116.                                 }  
  117.                                   
  118.                             }  
  119.                         }  
  120.                           
  121.                         //封装后段数据到categorySubList2  
  122.                         for (int i = numGridShowLimit; i < vector.size(); i++) {  
  123.                             String o = vector.get(i);  
  124.                             if (o != null) {  
  125.                                 HashMap<String, Object> map = new HashMap<String, Object>();  
  126.                                 map.put("ItemText", "grid" + o);  
  127.                                 categorySubList2.add(map);  
  128.                             }  
  129.                         }  
  130.                         HashMap<String, Object> map = new HashMap<String, Object>();  
  131.                         map.put("ItemText", "-"); //在第二段的最后添加一个“-”数据（用于点击折叠）  
  132.                         categorySubList2.add(map);  
  133.                           
  134.                         //创建第一部分GridView的adapter  
  135.                         final SimpleAdapter simpleAdapter1 = new SimpleAdapter(context, categorySubList1,  
  136.                                 R.layout.adapter_gridview,  
  137.                                 new String[] { "ItemText" }, // 对应map的Key  
  138.                                 new int[] { R.id.ItemText }); // 对应R的Id  
  139.                         viewHolder.contentGridView.setAdapter(simpleAdapter1);  
  140.                           
  141.                         //创建第二部分GridView的adapter  
  142.                         final SimpleAdapter simpleAdapter2 = new SimpleAdapter(context, categorySubList2,  
  143.                                 R.layout.adapter_gridview,  
  144.                                 new String[] { "ItemText" }, // 对应map的Key  
  145.                                 new int[] { R.id.ItemText }); // 对应R的Id  
  146.                         viewHolder.contentMoreGridView.setAdapter(simpleAdapter2);  
  147.                           
  148.                         //设置第二部分GridView的adapter中的具体item点击事件  
  149.                         viewHolder.contentMoreGridView.setOnItemClickListener(new OnItemClickListener() {  
  150.                             public void onItemClick(AdapterView<?> AdapterView, View view,int pos, long row) {  
  151.                                 if (categoryList.size()>numGridShowLimit && pos==categoryList.size()-numGridShowLimit) {  
  152.                                     //若点击末尾的“-”，则将gridview折叠，并修改第一部分最后位置为“+”（可展开状态）  
  153.                                     View rel =  (View) viewHolder.contentGridView.getChildAt(numGridShowLimit-1);  
  154.                                     TextView tv =  (TextView) rel.findViewById(R.id.ItemText);  
  155.                                     tv.setText("+");  
  156.                                     viewHolder.contentMoreGridView.setVisibility(View.GONE);  
  157.                                 }else {  
  158.                                     view.setTag(mypos*100+numGridShowLimit+pos);  
  159.                                     Toast.makeText(context, " list position:"+ mypos+"\ngrid position:"+pos, Toast.LENGTH_SHORT).show();  
  160.                                 }  
  161.                             }  
  162.                         });  
  163.                     }  
  164.                     else {  
  165.                         //若数据向量数目不大于限定的显示数目，则正常创建第一部分GridView的adapter（直接使用整体数据categoryList）  
  166.                         final SimpleAdapter simpleAdapter = new SimpleAdapter(context, categoryList,  
  167.                                 R.layout.adapter_gridview,  
  168.                                 new String[] { "ItemText" }, // 对应map的Key  
  169.                                 new int[] { R.id.ItemText }); // 对应R的Id  
  170.                         viewHolder.contentGridView.setAdapter(simpleAdapter);  
  171.                     }  
  172.                       
  173.                     //设置第一部分GridView的adapter中的具体item点击事件  
  174.                     viewHolder.contentGridView.setOnItemClickListener(new OnItemClickListener() {  
  175.                         public void onItemClick(AdapterView<?> AdapterView, View view,int pos, long row) {  
  176.                             if (categoryList.size()>numGridShowLimit && pos==numGridShowLimit-1) {  
  177.                                 TextView tv =  (TextView) view.findViewById(R.id.ItemText);  
  178.                                 String content = tv.getText().toString();  
  179.                                 if (content.equals("+")) {  
  180.                                     //若点击“+”，则进行展开操作，即显示第二部分gridview，并修改最后位置为“+”  
  181.                                     tv.setText("grid"+vector.get(numGridShowLimit-1));  
  182.                                     viewHolder.contentMoreGridView.setVisibility(View.VISIBLE);  
  183.                                 }else {  
  184.                                     view.setTag(mypos*100+pos);  
  185.                                     Toast.makeText(context, " list position:"+ mypos+"\ngrid position:"+pos, Toast.LENGTH_SHORT).show();  
  186.                                 }  
  187.                             }else {  
  188.                                 view.setTag(mypos*100+pos);  
  189.                                 Toast.makeText(context, " list position:"+ mypos+"\ngrid position:"+pos, Toast.LENGTH_SHORT).show();  
  190.                             }  
  191.                         }  
  192.                     });  
  193.                 }  
  194.             }  
  195.         }   
  196.         catch (Exception e)   
  197.         {  
  198.             e.printStackTrace();  
  199.             Log.e(TAG, "Exception");  
  200.         }  
  201.           
  202.         return convertView;  
  203.     }  
  204.       
  205.     @Override  
  206.     public int getCount()   
  207.     {  
  208.         return vector.size();  
  209.     }  
  210.       
  211.     @Override  
  212.     public Object getItem(int position) {  
  213.         return null;  
  214.     }  
  215.   
  216.     @Override  
  217.     public long getItemId(int position) {  
  218.         return 0;  
  219.     }  
  220.       
  221.     @Override  
  222.     public void unregisterDataSetObserver(DataSetObserver observer)   
  223.     {  
  224.          if (observer != null) {  
  225.              super.unregisterDataSetObserver(observer);  
  226.          }  
  227.     }  
  228. }  

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

 

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

 

[java] view plain copy
 
  1. package com.example.gridinlist;  
  2.   
  3. import android.widget.GridView;  
  4.   
  5. public class MyGridView extends GridView    
  6. {    
  7.     public MyGridView(android.content.Context context,    
  8.             android.util.AttributeSet attrs)    
  9.     {    
  10.         super(context, attrs);    
  11.     }    
  12.   
  13.     /** 
  14.      * 重写的onMeasure方法 
  15.      */  
  16.     public void onMeasure(int widthMeasureSpec, int heightMeasureSpec)    
  17.     {    
  18.         int expandSpec = MeasureSpec.makeMeasureSpec(Integer.MAX_VALUE >> 2,    
  19.                 MeasureSpec.AT_MOST);    
  20.         super.onMeasure(widthMeasureSpec, expandSpec);    
  21.     
  22.     }    
  23.     
  24. }  


ListView的item布局文件：

 

 

[html] view plain copy
 
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout   
  3.     xmlns:android="http://schemas.android.com/apk/res/android"  
  4.     android:layout_width="fill_parent"  
  5.     android:layout_height="wrap_content"  
  6.     android:layout_marginTop="1dip"  
  7.     android:layout_marginBottom="1dip"  
  8.     android:orientation="vertical"  
  9.     android:baselineAligned="false"  
  10.     android:background="#ffffff"  
  11. >  
  12.   
  13.     <RelativeLayout   
  14.         android:id="@+id/list_rel"  
  15.         android:layout_width="fill_parent"  
  16.         android:layout_height="wrap_content"  
  17.         android:layout_marginTop="10dip"  
  18.         android:layout_marginBottom="10dip"  
  19.     >  
  20.       
  21.         <ImageView  
  22.             android:id="@+id/list_img_icon"  
  23.             android:layout_width="3dip"  
  24.             android:layout_height="17dip"  
  25.             android:layout_marginLeft="15dip"  
  26.             android:contentDescription="@null"  
  27.             android:scaleType="fitXY"  
  28.             android:layout_centerVertical="true"  
  29.             android:src=http://www.mamicode.com/"@drawable/selected_orange"  
  30.             android:visibility="visible" />  
  31.       
  32.         <TextView   
  33.             android:id="@+id/list_txt_title"  
  34.             android:layout_width="wrap_content"  
  35.             android:layout_height="wrap_content"  
  36.             android:layout_toRightOf="@+id/list_img_icon"  
  37.             android:layout_marginLeft="7dip"  
  38.             android:layout_marginRight="7dip"  
  39.             android:gravity="center"  
  40.             android:layout_centerVertical="true"  
  41.             android:singleLine="true"  
  42.         />  
  43.           
  44.     </RelativeLayout>  
  45.       
  46.     <com.example.gridinlist.MyGridView  
  47.         android:id="@+id/list_grid"  
  48.         android:layout_width="fill_parent"  
  49.         android:layout_height="fill_parent"  
  50.         android:layout_marginBottom="1dip"  
  51.         android:columnWidth="70dip"  
  52.         android:horizontalSpacing="10dip"  
  53.         android:verticalSpacing="10dip"  
  54.         android:listSelector="@android:color/transparent"  
  55.         android:numColumns="4"  
  56.         android:paddingLeft="15dip"  
  57.         android:paddingRight="15dip"  
  58.         android:scrollbars="none"  
  59.         android:stretchMode="columnWidth"  
  60.         android:visibility="visible" >  
  61.     </com.example.gridinlist.MyGridView>  
  62.       
  63.     <com.example.gridinlist.MyGridView  
  64.         android:id="@+id/list_grid_more"  
  65.         android:layout_width="fill_parent"  
  66.         android:layout_height="fill_parent"  
  67.         android:layout_marginTop="10dip"  
  68.         android:layout_marginBottom="1dip"  
  69.         android:columnWidth="70dip"  
  70.         android:horizontalSpacing="10dip"  
  71.         android:verticalSpacing="10dip"  
  72.         android:listSelector="@android:color/transparent"  
  73.         android:numColumns="4"  
  74.         android:paddingLeft="15dip"  
  75.         android:paddingRight="15dip"  
  76.         android:scrollbars="none"  
  77.         android:stretchMode="columnWidth"  
  78.         android:visibility="gone" >  
  79.     </com.example.gridinlist.MyGridView>  
  80.       
  81. </LinearLayout>  

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

 

 

GridView的item布局文件：

 

[html] view plain copy
 
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent" >  
  5.       
  6.     <TextView   
  7.         android:id="@+id/ItemText"  
  8.         android:layout_width="70dip"  
  9.         android:layout_height="32dip"  
  10.         android:background="@drawable/btn_txt_bg"  
  11.         android:text=""  
  12.         android:gravity="center"  
  13.         />  
  14.   
  15. </RelativeLayout>  

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

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

 

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


联系
我们