Android仿QQ好友列表實(shí)現(xiàn)列表收縮與展開(kāi)

2020-04-11 11:05:12

字體：大中小

供稿：網(wǎng)友

ExpandableListView是一個(gè)垂直滾動(dòng)顯示兩級(jí)列表項(xiàng)的視圖，與ListView不同的是，它可以有兩層：每一層都能夠被獨(dú)立的展開(kāi)并顯示其子項(xiàng)。
好友QQ列表，可以展開(kāi)，可以收起，在android中，以往用的比較多的是listview，雖然可以實(shí)現(xiàn)列表的展示，但在某些情況下，我們還是希望用到可以分組并實(shí)現(xiàn)收縮的列表，那就要用到android的ExpandableListView，今天研究了一下這個(gè)的用法，也參考了很多資料動(dòng)手寫(xiě)了一個(gè)小demo，實(shí)現(xiàn)了基本的功能，下面直接上效果圖以及源代碼~！
本文效果：

一、實(shí)現(xiàn)原理
1、首先必須在布局文件中定義一個(gè)ExpandableListView
2、其次創(chuàng)建一級(jí)條目對(duì)應(yīng)的布局文件group
3、創(chuàng)建二級(jí)條目對(duì)應(yīng)的布局文件child
4、加載ExpandableListView組件的Activity必須繼承自ExpandableListActivity
二、布局與代碼
1、首先在主布局中activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"   android:layout_width="fill_parent"   android:layout_height="fill_parent"   android:orientation="vertical" >    <ExpandableListView     android:id="@id/android:list"     android:layout_width="fill_parent"     android:layout_height="fill_parent" />  </LinearLayout>

2、其次在drawable文件夾定義布局一級(jí)列表groups.xml

<LinearLayout   xmlns:android="http://schemas.android.com/apk/res/android"   android:orientation="vertical"   android:layout_width="fill_parent"   android:layout_height="fill_parent" >   <TextView     android:id="@+id/textGroup"     android:layout_width="fill_parent"     android:layout_height="fill_parent"     android:paddingLeft="40px"     android:paddingTop="6px"     android:paddingBottom="6px"     android:textSize="25sp"     android:text="No data"   />  </LinearLayout>

3、接著在drawable文件夾定義布局二級(jí)列表childs.xml

<LinearLayout   xmlns:android="http://schemas.android.com/apk/res/android"  android:orientation="vertical"   android:layout_width="fill_parent"   android:layout_height="fill_parent" > 　　 <TextView      android:id="@+id/textChild"   android:layout_width="fill_parent"     android:layout_height="fill_parent"     android:paddingLeft="60px"     android:paddingTop="10px"     android:paddingBottom="10px"     android:textSize="20sp"   android:text="No Data" />  </LinearLayout>

4、然后就是初始化和使用了

package com.example.expandablelistview;  import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; import android.os.Bundle; import android.app.ExpandableListActivity; import android.util.DisplayMetrics; import android.view.View; import android.widget.ExpandableListView; import android.widget.SimpleExpandableListAdapter; import android.widget.Toast;  public class MainActivity extends ExpandableListActivity {   /**    * 創(chuàng)建一級(jí)條目容器    */   List<Map<String, String>> gruops = new ArrayList<Map<String, String>>();   /**    * 存放內(nèi)容, 以便顯示在列表中    */   List<List<Map<String, String>>> childs = new ArrayList<List<Map<String, String>>>();    @Override   public void onCreate(Bundle savedInstanceState) {     super.onCreate(savedInstanceState);     setContentView(R.layout.activity_main);     setListData();   }    /**    * 設(shè)置列表內(nèi)容    */   public void setListData() {     // 創(chuàng)建二個(gè)一級(jí)條目標(biāo)題     Map<String, String> title_1 = new HashMap<String, String>();     Map<String, String> title_2 = new HashMap<String, String>();     Map<String, String> title_3 = new HashMap<String, String>();     title_1.put("group", "林炳文");     title_2.put("group", "文炳林");     gruops.add(title_1);     gruops.add(title_2);      // 創(chuàng)建二級(jí)條目?jī)?nèi)容     // 內(nèi)容一     Map<String, String> title_1_content_1 = new HashMap<String, String>();     Map<String, String> title_1_content_2 = new HashMap<String, String>();     Map<String, String> title_1_content_3 = new HashMap<String, String>();     title_1_content_1.put("child", "工人");     title_1_content_2.put("child", "學(xué)生");     title_1_content_3.put("child", "農(nóng)民");      List<Map<String, String>> childs_1 = new ArrayList<Map<String, String>>();     childs_1.add(title_1_content_1);     childs_1.add(title_1_content_2);     childs_1.add(title_1_content_3);      // 內(nèi)容二     Map<String, String> title_2_content_1 = new HashMap<String, String>();     Map<String, String> title_2_content_2 = new HashMap<String, String>();     Map<String, String> title_2_content_3 = new HashMap<String, String>();     title_2_content_1.put("child", "猩猩");     title_2_content_2.put("child", "老虎");     title_2_content_3.put("child", "獅子");     List<Map<String, String>> childs_2 = new ArrayList<Map<String, String>>();     childs_2.add(title_2_content_1);     childs_2.add(title_2_content_2);     childs_2.add(title_2_content_3);      childs.add(childs_1);     childs.add(childs_2);      /**      * 創(chuàng)建ExpandableList的Adapter容器 參數(shù): 1.上下文 2.一級(jí)集合 3.一級(jí)樣式文件 4. 一級(jí)條目鍵值      * 5.一級(jí)顯示控件名 6. 二級(jí)集合 7. 二級(jí)樣式 8.二級(jí)條目鍵值 9.二級(jí)顯示控件名      *      */     SimpleExpandableListAdapter sela = new SimpleExpandableListAdapter(         this, gruops, R.drawable.groups, new String[] { "group" },         new int[] { R.id.textGroup }, childs, R.drawable.childs,         new String[] { "child" }, new int[] { R.id.textChild });     // 加入列表     setListAdapter(sela);   }    /**    * 列表內(nèi)容按下    */   @Override   public boolean onChildClick(ExpandableListView parent, View v,       int groupPosition, int childPosition, long id) {     Toast.makeText(         MainActivity.this,         "您選擇了"             + gruops.get(groupPosition).toString()             + "子編號(hào)"             + childs.get(groupPosition).get(childPosition)                 .toString(), Toast.LENGTH_SHORT).show();     return super.onChildClick(parent, v, groupPosition, childPosition, id);   }    /**    * 二級(jí)標(biāo)題按下    */   @Override   public boolean setSelectedChild(int groupPosition, int childPosition,       boolean shouldExpandGroup) {     return super.setSelectedChild(groupPosition, childPosition,         shouldExpandGroup);   }    /**    * 一級(jí)標(biāo)題按下    */   @Override   public void setSelectedGroup(int groupPosition) {     super.setSelectedGroup(groupPosition);   } }

5、效果
這是我手機(jī)上的效果，點(diǎn)擊工人。學(xué)生等二級(jí)列表時(shí)，我手機(jī)上會(huì)有提示框出現(xiàn)的，但是不知為什么錄制下來(lái)就是沒(méi)有。

三、自定義列表圖標(biāo)
上面的圖標(biāo)是系統(tǒng)自己生成的，下面我們要改成自己的
1、更改自定義圖標(biāo)
在drawable文件夾下新建expandablelistview_change.xml

<?xml version = "1.0"  encoding = "utf-8"?> <selector  xmlns:android = "http://schemas.android.com/apk/res/android" >       <item android:state_expanded = "true"  android:drawable = "@drawable/w2"/>       <item android:drawable = "@drawable/w1"/>    </selector >

2、修改上面布局Activity.main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"   android:layout_width="fill_parent"   android:layout_height="fill_parent"   android:orientation="vertical" >    <ExpandableListView     android:id="@id/android:list"     android:layout_width="fill_parent"     android:layout_height="fill_parent"     android:background="#f5f5f5"     android:cacheColorHint="#f5f5f5"     android:groupIndicator="@drawable/expandablelistview_change" />  </LinearLayout>

其實(shí)就是加了一句
android:groupIndicator="@drawable/expandablelistview_change"
下面我們?cè)賮?lái)看看效果：

四、圖標(biāo)放置右邊
在上面MainActivity.java的函數(shù)setListData()加中：

// 得到屏幕的大小 DisplayMetrics dm = new DisplayMetrics(); getWindowManager().getDefaultDisplay().getMetrics(dm); //圖標(biāo)設(shè)置在右邊 getExpandableListView().setIndicatorBounds(dm.widthPixels-60, dm.widthPixels); // 設(shè)置指示圖標(biāo)的位置

效果：