2. 程式人生 > >listview巢狀gridview，並實現grid元素部分顯示以及點選展開與摺疊

listview巢狀gridview，並實現grid元素部分顯示以及點選展開與摺疊

阿新 • • 發佈：2019-01-25

有時我們需要用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>();
	
	@Override
	protected 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")
	@Override
	public 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>>();
					//先封裝整個資料向量到categoryList
					if (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) {
						
						//封裝前段資料到categorySubList1
						for (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);
								}
								
							}
						}
						
						//封裝後段資料到categorySubList2
						for (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的adapter
						final SimpleAdapter simpleAdapter1 = new SimpleAdapter(context, categorySubList1,
								R.layout.adapter_gridview,
								new String[] { "ItemText" }, // 對應map的Key
								new int[] { R.id.ItemText }); // 對應R的Id
						viewHolder.contentGridView.setAdapter(simpleAdapter1);
						
						//建立第二部分GridView的adapter
						final SimpleAdapter simpleAdapter2 = new SimpleAdapter(context, categorySubList2,
								R.layout.adapter_gridview,
								new String[] { "ItemText" }, // 對應map的Key
								new int[] { R.id.ItemText }); // 對應R的Id
						viewHolder.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的Key
								new int[] { R.id.ItemText }); // 對應R的Id
						viewHolder.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;
	}
	
	@Override
	public int getCount() 
	{
	    return vector.size();
	}
	
	@Override
	public Object getItem(int position) {
		return null;
	}

	@Override
	public long getItemId(int position) {
		return 0;
	}
	
	@Override
	public 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

相關推薦

listview巢狀gridview，並實現grid元素部分顯示以及點選展開與摺疊

有時我們需要用GridView顯示目錄列表，有時甚至是二級的，即listview每一個item裡面又各自嵌入一個gridview，但是當二級目錄（資料條目）的數量過多時，介面會比較臃腫，這時我們就想要有類似展開與摺疊的效果，作者採用的策略是資料分段的分別顯示，其中對於顯示邊

ListView巢狀GridView，Gridview不能完全顯示

當ListView巢狀GridView時，用自帶的gridview，gridview中的內容是不能完全顯示的，需要重寫Gridview，請看下面程式碼 import android.content.Context; import android.util.Attribute

android ScrollView中巢狀GridView，ListView只顯示一行的解決辦法

注：本文是由網上大神分享的解決方案彙集而成 方法一： 重寫ListView、GridView： 重寫ListView： public class MyListView extends ListView { public MyListView(Context contex

Android 混排效果之 ScrollView 巢狀 RecyclerView 巢狀gridview 實現listview 巢狀gridview 效果

RecyclerView 出現以後 很受大家歡迎 漂亮流暢的列表 簡單的操作 可以幫我們完成很多的列表 但是有一種listview 巢狀gridview 的效果 目前還是需要巢狀才能完成 現在就簡單說一下我的思路 本人的需求是例如手機淘寶頁 本人使用老套的實現模

RecyclerView下實現 ListView巢狀GridView 複雜效果

導言：          RecyclerView使用也有一段時間了 他的出現是對ListView，GridView的進化。但是我們要實現一些複雜的佈局，比如這個佈局，那我們該怎麼辦呢？別急，不是說了RecyclerView是對ListView，GridView的進化嗎？

Android 解決ListView巢狀GridView、GridView顯示不正常的方法

自定義View，繼承GridView，重寫onMeasure()方法，程式碼如下： public class MyGridView extends GridView { public MyGridView(Context context) {

ListView 巢狀 GridView 大法

起因 專案需求要用表格形式實現佈局 但是！！！需要下拉和上拉載入資料。 因為專案裡只有github裡的XListView改造的ListView，又因為本人太笨太懶，不想寫上拉下來gridview。。 廢話不多說 1、定義一個主檢視 list

可摺疊的listview的demo...（listview 巢狀 gridview）ExpandableListView

ExpandableListView 是安卓自帶的也需要介面卡 adapter=new MyExpandableListViewAdapter(getActivity(),list); listView.setAdapter(adapter);用法和listview一毛一

vue-router中定義動態路由、巢狀路由，並動態獲取引數

路由的定義，主要有以下幾步： 如果是模組化機制，需要呼叫 Vue.use(VueRouter) 定義路由元件，如： const Foo = { template: '<div>foo</div>' }; 定義路由（陣列）：

React Native 原生RN巢狀webView，並自適應高度

import React, { Component } from 'react'; import { StyleSheet, View, Dimensions, Text } from 'react-native'; const { width, height } = Dim

listview分頁聯絡人，並實現打電話功能,

package com.contacts; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; import android.app.Activity; impor

android listview巢狀gridview動態增加gridview的item項

這個功能主要是在資料結構這一塊，先上圖看看效果：重點 是放在左邊這個listview巢狀gridview，可刪除gridview中item,也可點選最後一項手動增加item資料，這裡看幾行重要的程式碼，原始碼放在底部，可供下載androidStudio3.0環境public

android 動態新增控制元件並實現每個子控制元件的點選事件

         需求：我們要點選進入一家店鋪，根據不同的店鋪，顯示不同條數的子條目 如：消毒間，洗菜間等。。。這些都是或多或少的，所以需要動態新增：    首先自定義View(linearLayout): package cn.qust.fang.widget; imp

利用chrome瀏覽器進行js除錯並找出元素繫結的點選事件詳解

大家有沒有遇到這樣的一個問題，我們在分析一些大型電子商務平臺的Web前端指令碼時，想找到一個元素繫結的點選事件，並不是那麼容易，因為有些前端指令碼封裝的比較隱蔽，甚至有些加密指令碼，用傳統的查詢元素ID、或者頁面原始碼方法去找，可能最後徒勞無功。下面我來介紹利用chrome瀏覽器來查詢元素繫

listView巢狀listView的實現，以及遇到的問題的解決

先看看listView巢狀listView效果圖： 頁面效果是ListVierw巢狀listView，外層listView（以下簡稱外層LV）展示的是專案，內層listView是每個專案下面對應的需求listView；效果有點類似QQ空間裡的動態和其下面對應的評論。廢話不

ListView中巢狀GridView時GridView的資料無法完全顯示，只顯示一行

這種情況下需要自定義一個GridView，然後重寫GridView的onMeasure(int widthMeasureSpec, int heightMeasureSpec)的方法，將GridView重新測量，並且指定GridView的新的高度 package com.y

recyclerview巢狀GridView去遮蔽後者的點選事件，而是前者響應到事件。

無論是標題中的巢狀方式，還是其它列表控制元件之間的巢狀，都適用。 1、在GirdView的所在佈局的根佈局中設定改屬性： android:descendantFocusability="blacksDescendants"  2、動態設定GirdView的如下屬性： 　　gridvi

當ListView巢狀在ScrollView，無法置頂【啟動位置偏移的解決方案】

myScrollView.smoothScrollTo(0,20); 在程式碼裡去掉listview的焦點，lv.setFocusable(false); 以上是關鍵程式碼。     全域性程式碼如下： package com.findai.xkk.ai_

在ListView中巢狀ViewFlow，ViewFlow滑動有些卡頓的問題~

最近做類似於網易新聞頭條那種圖片Banner，實現方法是：在ListView中巢狀ViewFlow，但是ViewFlow的滑動總是不是那麼順暢，覺得應該是觸屏事件攔截衝突的問題吧，在網上查閱了一下我的解決方法如下： 在ViewFlow中宣告mListView，然後將父ListView傳入到ViewFlow，

關於ListView中巢狀EditText，焦點及其他點選問題

之前專案做過這個類似的UI，處理起來也很麻煩，要求的效果是 1.EditText點擊出現輸入法，遊標顯示在最後，效果如圖 2.編輯完內容後，收起鍵盤儲存修改內容。 這裡會用到幾個類 1.自定義Adapter（主要的處理也是在這裡） 2.自定義的EditText（