码迷，mamicode.com
首页 > 其他好文 > 详细

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

时间：2016-11-30 22:27:36      阅读：727      评论：0      收藏：0      [点我收藏+]

标签：imageview   convert   list   baseline   .net   注释   top   stack   schema   

原文链接：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="@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元素部分显示以及点击展开与折叠

标签：imageview   convert   list   baseline   .net   注释   top   stack   schema   

原文地址：http://www.cnblogs.com/Talon-lly/p/6119547.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！