Android中使用ExpandableListView實現好友分組，expandablelistview

Android中使用ExpandableListView實現好友分組，expandablelistview

一個視圖顯示垂直滾動兩級列表中的條目。這不同於列表視圖，允許兩個層次，類似於QQ的好友分組。要實現這個效果的整體思路為：

1.要給ExpandableListView 設定適配器，那麼必須先設定資料來源。

2.資料來源，就是此處的適配器類，此方法繼承了BaseExpandableListAdapter，它是ExpandableListView的一個子類。需要重寫裡面的多個方法。方法的意思，代碼中都有詳細的注釋。資料來源中，用到了自訂的View布局，此時根據自己的需求，來設定組和子項的配置樣式。getChildView()和getGroupView()方法設定自訂布局。

3.資料來源設定好，直接給ExpandableListView.setAdapter()即可實現此收縮功能。

下面是我自己簡單做的一個顯示效果：

layout中主視圖expandable_layout.xml(ExpandableListView布局)：

 

 1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3     android:orientation="vertical" android:layout_width="match_parent" 4     android:layout_height="match_parent"> 5     <ExpandableListView 6         android:layout_width="match_parent" 7         android:layout_height="match_parent" 8         android:id="@+id/el"> 9     </ExpandableListView>10 </LinearLayout>

 

Layout中group_layout.xm l( 分組組名展示布局 )：

 1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3     xmlns:app="http://schemas.android.com/apk/res-auto" 4     android:orientation="horizontal" android:layout_width="wrap_content" 5     android:layout_height="wrap_content" 6     android:gravity="center_vertical"> 7     <ImageView 8         android:layout_width="wrap_content" 9         android:layout_height="wrap_content"10         app:srcCompat="@mipmap/ic_launcher"11         android:id="@+id/iv_group" />12     <TextView13         android:text="TextView"14         android:layout_width="wrap_content"15         android:layout_height="wrap_content"16         android:id="@+id/tv_group" />17 </LinearLayout>

Layout中child_layout.xm l( 子功能表item布局 )：

 1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3     xmlns:app="http://schemas.android.com/apk/res-auto" 4     android:orientation="horizontal" android:layout_width="wrap_content" 5     android:layout_height="wrap_content" 6     android:gravity="center_vertical" 7     android:paddingLeft="50dp"> 8     <ImageView 9         android:layout_width="wrap_content"10         android:layout_height="wrap_content"11         app:srcCompat="@mipmap/ic_launcher"12         android:id="@+id/iv_item" />13     <TextView14         android:text="TextView"15         android:layout_width="wrap_content"16         android:layout_height="wrap_content"17         android:id="@+id/tv_item" />18 </LinearLayout>

Layout中alertdialog_layout.xm l( AlertDialog自訂顯示布局 )：

 1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3     android:orientation="vertical" android:layout_width="match_parent" 4     android:layout_height="match_parent"> 5     <EditText 6         android:layout_width="match_parent" 7         android:layout_height="wrap_content" 8         android:id="@+id/et" 9         android:hint="請輸入想對他說的話"/>10 </LinearLayout>

Activity中Java實現代碼（ExpandableListViewDemo.java）：

 

  1 import android.content.DialogInterface;  2 import android.os.Bundle;  3 import android.support.annotation.Nullable;  4 import android.support.v7.app.AlertDialog;  5 import android.support.v7.app.AppCompatActivity;  6 import android.view.View;  7 import android.view.ViewGroup;  8 import android.widget.BaseExpandableListAdapter;  9 import android.widget.ExpandableListView; 10 import android.widget.ImageView; 11 import android.widget.TextView; 12 import android.widget.Toast; 13 /** 14  * Created by panchengjia on 2016/12/2. 15  */ 16 public class ExpandableListViewDemo extends AppCompatActivity { 17     ExpandableListView el; 18     //定義分組名以及對應的圖片數組，需一一對應 19     String[] country={"魏國","蜀國","吳國"}; 20     int[] icon={R.mipmap.wei,R.mipmap.shu,R.mipmap.wu}; 21     //使用二維定義組內成員以及對應頭像，同樣需要以一一對應 22     String[][] heros={{"司馬懿","郭嘉","夏侯惇","甄姬"},{"劉備","趙雲","張飛"},{"孫權","周瑜"}}; 23     int[][] icons={{R.mipmap.simayi,R.mipmap.guojia,R.mipmap.xiahoudun,R.mipmap.zhenji}, 24             {R.mipmap.liubei,R.mipmap.zhaoyun,R.mipmap.zhangfei},{R.mipmap.sunquan,R.mipmap.zhouyu}}; 25     @Override 26     protected void onCreate(@Nullable Bundle savedInstanceState) { 27         super.onCreate(savedInstanceState); 28         setContentView(R.layout.expandable_layout); 29         el= (ExpandableListView) findViewById(R.id.el); 30         //設定點擊下拉子功能表的監聽事件 31         el.setOnChildClickListener(new ExpandableListView.OnChildClickListener() { 32             @Override 33             public boolean onChildClick(ExpandableListView parent, View v, int groupPosition, int childPosition, long id) { 34                 //擷取分組成員的姓名 35                 TextView tv = (TextView) v.findViewById(R.id.tv_item); 36                 String name = tv.getText().toString(); 37                 //調用show方法（自訂AlertDialog） 38                 show(v,name); 39                 return false; 40             } 41         }); 42         el.setAdapter(new MyAdapter());//設定自訂配接器 43     } 44     //定義show方法調出AlertDialog（不再贅述，詳情請看前期相關博文，文章末尾有連結） 45     public void show(View v,String name){ 46         AlertDialog.Builder builder = new AlertDialog.Builder(this); 47         builder.setTitle(name);//設定標題名為傳入的字串（分組內點擊對應的人物名） 48         View msg = getLayoutInflater().inflate(R.layout.altertdialog_layout,null); 49         builder.setView(msg); 50         builder.setPositiveButton("確定", new DialogInterface.OnClickListener() { 51             @Override 52             public void onClick(DialogInterface dialog, int which) { 53                 Toast.makeText(ExpandableListViewDemo.this, "已發送", Toast.LENGTH_SHORT).show(); 54             } 55         }); 56         builder.setNegativeButton("取消", new DialogInterface.OnClickListener() { 57             @Override 58             public void onClick(DialogInterface dialog, int which) { 59                 Toast.makeText(ExpandableListViewDemo.this, "不想說了", Toast.LENGTH_SHORT).show(); 60             } 61         }); 62         builder.show(); 63     } 64     //設定自訂配接器 65     class MyAdapter extends BaseExpandableListAdapter{ 66         //擷取國家個數 67         @Override 68         public int getGroupCount() { 69             return country.length; 70         } 71         //擷取每個國家對應的人數 72         @Override 73         public int getChildrenCount(int groupPosition) { 74             return heros[groupPosition].length; 75         } 76         //擷取對應國家名 77         @Override 78         public Object getGroup(int groupPosition) { 79             return country[groupPosition]; 80         } 81         //擷取對應國家對應的任務 82         @Override 83         public Object getChild(int groupPosition, int childPosition) { 84             return heros[groupPosition][childPosition]; 85         } 86         //擷取選擇的國家對應數組下標 87         @Override 88         public long getGroupId(int groupPosition) { 89             return groupPosition; 90         } 91         //擷取選擇的任務對應數組下標 92         @Override 93         public long getChildId(int groupPosition, int childPosition) { 94             return childPosition; 95         } 96         //表示人物和國家ID是否穩定的更改底層資料 97         @Override 98         public boolean hasStableIds() { 99             return true;100         }101         //擷取一個視圖顯示國家名以及對應的表徵圖（ListView適配器最佳化）102         @Override103         public View getGroupView(int groupPosition, boolean isExpanded, View convertView, ViewGroup parent) {104             ViewHolder vh;105             if(convertView==null){106                 convertView=getLayoutInflater().inflate(R.layout.group_layout,null);107                 vh=new ViewHolder();108                 vh.tv= (TextView) convertView.findViewById(R.id.tv_group);109                 vh.iv= (ImageView) convertView.findViewById(R.id.iv_group);110                 convertView.setTag(vh);111             }112             vh= (ViewHolder) convertView.getTag();113             vh.tv.setText(country[groupPosition]);114             vh.iv.setImageResource(icon[groupPosition]);115             return convertView;116         }117         //擷取一個視圖顯示國家對應人物以及對應的表徵圖（ListView適配器最佳化）118         @Override119         public View getChildView(int groupPosition, int childPosition, boolean isLastChild, View convertView, ViewGroup parent) {120             ViewHolder vh;121             if(convertView==null){122                 convertView=getLayoutInflater().inflate(R.layout.child_layout,null);123                 vh=new ViewHolder();124                 vh.tv= (TextView) convertView.findViewById(R.id.tv_item);125                 vh.iv= (ImageView) convertView.findViewById(R.id.iv_item);126                 convertView.setTag(vh);127             }128             vh= (ViewHolder) convertView.getTag();129             vh.tv.setText(heros[groupPosition][childPosition]);130             vh.iv.setImageResource(icons[groupPosition][childPosition]);131             return convertView;132         }133         class ViewHolder{134             ImageView iv;135             TextView tv;136         }137         //設定子選項（對應人物）是可選的138         @Override139         public boolean isChildSelectable(int groupPosition, int childPosition) {140             return true;141         }142     }143 }

 

補充說明：

java實現代碼中用到自訂配接器ListView的最佳化，最佳化步驟如下：

（1）使用固定寬高（match_parent）的ListView，有助於在填充item（ListView中每行的布局）時避免重複渲染ListView組件，導致重複多次調用getView方法。

（2）Convertview用來重複使用已被隱藏的item對象，從而避免重複建立每個item的view對象。

（3）使用ViewHolder最佳化提高容器中尋找組件的效率。

相關博文連結：Android中的AlertDialog使用樣本五（自訂對話方塊）