listview嵌套gridview，並實現grid元素部分顯示以及點擊展開與摺疊

時間  2019-11-20
標籤 listview 嵌套 gridview 實現 grid 元素 部分 顯示 以及 點擊 展開 摺疊 欄目 Android 简体版
原文   原文鏈接

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

    有時咱們須要用GridView顯示目錄列表，有時甚至是二級的，即listview每個item裏面又各自嵌入一個gridview，可是當二級目錄（數據條目）的數量過多時，界面會比較臃腫，這時咱們就想要有相似展開與摺疊的效果，做者採用的策略是數據分段的分別顯示，其中對於顯示邊界（處於限制顯示數目的特定位置）的控件要有數據的動態更新和點擊判斷操做。效果如圖：java

哈哈

 

具體實現：android

1、Activity界面app

 

[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是自寫的（也是實現效果的主要邏輯代碼）。ide

 

    這裏咱們直傳給MyAdapter一個字符串向量，爲了簡便，無論一級仍是二級目錄都是用的這一個向量（實際中每一個二級子向量應該都是不一樣的），用戶可根據需求自行添加或修改（也可使用Parcel將其封裝爲一個二級的數據類型，具體再也不贅述）。佈局

 

Activity佈局文件this

 

[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>  


2、自寫的istview的Adapter（關鍵代碼）spa

 

 

[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的數目而沒法肯定它的高度，所以默認認爲只有一行數據。.net

 

解決方法是：在自寫的GridView裏面，須要重寫onMeasure方法，這樣就能夠獲得GridView的高度了，代碼以下：3d

 

[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

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程