Android中使用Expandablelistview实现微信通讯录界面

之前的博文《android 中使用expandablelistview 实现分组的实例》我简单介绍了使用expandablelistview实现简单的好友分组功能，今天我们针对之前的所做的仿微信app来对expandablelistview做一个扩展介绍，实现效果如下（通讯里使用expandablelistview实现）：

相关知识点博文链接：

android 中使用expandablelistview 实现分组的实例

详解android中fragment和viewpager的那点事儿

详解android中listview实现图文并列并且自定义分割线（完善仿微信app）

正常使用expandablelistview的思路如下：

（1）要给expandablelistview 设置适配器，那么必须先设置数据源。

（2）数据源，就是此处的适配器类expandableadapter，此方法继承了baseexpandablelistadapter ，它是expandablelistview的一个子类。需要重写里面的多个方法。方法的意思，代码中都有详细的注释。数据源中，用到了自定义的view布局，此时根据自己的需求，来设置组和子项的布局样式。getchildview()和getgroupview()方法设置自定义布局。
（3）数据源设置好，直接给 expandablelistview.setadapter()即可实现此收缩功能。

但本次实现除以上实现步骤之外，还需要注意的有以下几点：

（1）首次加载expandablelistview需要默认全部展开，使用以下方法：

在给expandablelistview 设置适配器后，添加以下代码：

 //group.size()为组名个数，如果为数组存储则为group、length
 for (int i = 0; i < group.size(); i++) { 
 expandablelistview.expandgroup(i); 
 } 

提醒：加载前别忘了判断adapter是否为空和有没有group数据哦

（2）保持expandablelistview始终展开无法收缩

expandablelistview.setongroupclicklistener(new ongroupclicklistener() {
 @override
 public boolean ongroupclick(expandablelistview parent, view v,
 int groupposition, long id) {
 return true;//返回true则表示无法收缩
 }
});

（3）取消通讯录上方的groupname空间

微信通讯录中“新的朋友”，“群聊”，“标签”，“公众号”，作为一个整体自定义布局添加到expandablelistview中，详情见以下代码实现

（4）修改expandablelistview的分割线

大概思路就是这样，现在开始整体实现代码的演示：

第一步：layout中通讯录整体布局contactfragment.xml:

其实就是一个expandablelistview，添加android:divider ="#ffffff"取消自带分割线

<?xml version="1.0" encoding="utf-8"?>
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical" android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:background="@color/fragmentback">
 <expandablelistview
 android:id="@+id/contact_list"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:layout_alignparenttop="true"
 android:layout_alignparentstart="true"
 android:divider ="#ffffff"/>
</linearlayout>

第二步：layout中组名（groupname）的布局文件contact_list_group_item.xml：

注意设置间距，保证美观且尽量与微信一致

<?xml version="1.0" encoding="utf-8"?>
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical" android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:background="@color/fragmentback">
 <textview
 android:text="textview"
 android:textsize="20sp"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:layout_marginleft="10dp"
 android:gravity="center_vertical"
 android:id="@+id/group_tv" />
</linearlayout>

第三步：layout中expandablelistview中每个item的布局文件contact_list_item.xml：

这里添加了自定义分割线

<?xml version="1.0" encoding="utf-8"?>
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical" android:layout_width="match_parent"
 android:layout_height="match_parent">
 <linearlayout
 android:background="@color/colorwhite"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical">
 <linearlayout
 android:paddingleft="10dp"
 android:paddingtop="5dp"
 android:paddingbottom="5dp"
 android:gravity="center_vertical"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:orientation="horizontal">
 <imageview
 android:id="@+id/contact_item_iv"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
android:src="@mipmap/default_fmessage"
 android:adjustviewbounds="true"
 android:maxwidth="35dp"/>
 <textview
 android:id="@+id/contact_item_tv"
 android:layout_margin="10dp"
 android:layout_width="0dp"
 android:layout_height="wrap_content"
 android:layout_weight="1"
 android:text="新的朋友"/>
 </linearlayout>
 <view
 android:layout_width="match_parent"
 android:layout_height="1dp"
 android:layout_marginleft="10dp"
 android:layout_marginright="10dp"
android:background="@color/fragmentback"/>
 </linearlayout>
</linearlayout>

第四步：layout中expandablelistview中的头布局contact_list_title.xml（不需要groupname）

我们观察微信通讯录布局中“新的朋友”，“群聊”，“标签”，“公众号”上方直接为微信的顶部导航，不存在expandablelistview一贯的组名布局，这里我们将“新的朋友”，“群聊”，“标签”的布局单独实现：

<?xml version="1.0" encoding="utf-8"?>
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical" android:layout_width="match_parent"
 android:layout_height="match_parent">
 <linearlayout
 android:background="@color/colorwhite"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical">
 <linearlayout
 android:paddingleft="10dp"
 android:paddingtop="5dp"
 android:paddingbottom="5dp"
 android:gravity="center_vertical"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:orientation="horizontal">
 <imageview
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/default_fmessage"
 android:adjustviewbounds="true"
 android:maxwidth="35dp"/>
 <textview
 android:layout_margin="10dp"
 android:layout_width="0dp"
android:layout_height="wrap_content"
 android:layout_weight="1"
 android:text="新的朋友"/>
 </linearlayout>
 <view
 android:layout_width="match_parent"
 android:layout_height="1dp"
 android:layout_marginleft="10dp"
 android:layout_marginright="10dp"
android:background="@color/fragmentback"/>
 <linearlayout
 android:paddingleft="10dp"
 android:paddingtop="5dp"
 android:paddingbottom="5dp"
 android:gravity="center_vertical"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:orientation="horizontal">
 <imageview
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/default_chatroom"
 android:adjustviewbounds="true"
 android:maxwidth="35dp"/>
 <textview
 android:layout_margin="10dp"
 android:layout_width="0dp"
 android:layout_height="wrap_content"
 android:layout_weight="1"
 android:text="群聊"/>
 </linearlayout>
 <view
 android:layout_width="match_parent"
 android:layout_height="1dp"
 android:layout_marginleft="10dp"
 android:layout_marginright="10dp"
android:background="@color/fragmentback"/>
 <linearlayout
 android:paddingleft="10dp"
 android:paddingtop="5dp"
 android:paddingbottom="5dp"
 android:gravity="center_vertical"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:orientation="horizontal">
 <imageview
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/default_contactlabel"
 android:adjustviewbounds="true"
 android:maxwidth="35dp"/>
 <textview
 android:layout_margin="10dp"
 android:layout_width="0dp"
android:layout_height="wrap_content"
 android:layout_weight="1"
 android:text="标签"/>
 </linearlayout>
 <view
 android:layout_width="match_parent"
 android:layout_height="1dp"
 android:layout_marginleft="10dp"
 android:layout_marginright="10dp"
android:background="@color/fragmentback"/>
 <linearlayout
 android:paddingleft="10dp"
 android:paddingtop="5dp"
 android:paddingbottom="5dp"
 android:gravity="center_vertical"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:orientation="horizontal">
 <imageview
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/default_servicebrand_contact"
 android:adjustviewbounds="true"
 android:maxwidth="35dp"/>
 <textview
 android:layout_margin="10dp"
 android:layout_width="0dp"
android:layout_height="wrap_content"
 android:layout_weight="1"
 android:text="公众号"/>
 </linearlayout>
 </linearlayout>
</linearlayout>

第五步：java中定义继承baseexpandablelistadapter类（自定义适配器）

（1）这里模仿实际项目，将自定义适配器定义定义在外部同意管理，所以需要设置相关构造方法供expandablelistview调用

（2）为了实现头文件的布局，需要在getgroupview与getchildview方法中判断头文件的位置，从而调整布局，这里我们将头文件定义在数据首位

import android.content.context;
import android.view.layoutinflater;
import android.view.view;
import android.view.viewgroup;
import android.widget.baseexpandablelistadapter;
import android.widget.imageview;
import android.widget.textview;
import com.mly.panhouye.wechat.r;
/**
 * created by panchengjia on 2016/12/28 0028.
 */
public class myexpandablelistadapter extends baseexpandablelistadapter {
 context context;
 string[] group;
 string[][] itemname;
 int[][] itemicon;
 public myexpandablelistadapter(context context, string[] group, string[][] itemname, int[][] itemicon) {
 this.context = context;
 this.group = group;
 this.itemname = itemname;
 this.itemicon = itemicon;
 }
 @override
 public int getgroupcount() {
 return group.length;
 }
 @override
 public int getchildrencount(int groupposition) {
 return itemname[groupposition].length;
 }
 @override
 public object getgroup(int groupposition) {
 return group[groupposition];
 }
 @override
 public object getchild(int groupposition, int childposition) {
 return itemname[groupposition][childposition];
 }
 @override
 public long getgroupid(int groupposition) {
 return groupposition;
 }
 @override
 public long getchildid(int groupposition, int childposition) {
 return childposition;
 }
 @override
 public boolean hasstableids() {
 return false;
 }
 @override
 public view getgroupview(int groupposition, boolean isexpanded, view convertview, viewgroup parent) {
 viewholder vh;
 //expandablelist的第一个分组没有组名，这里需要自定义布局
 if(groupposition==0){
 convertview =layoutinflater.from(context).inflate(r.layout.contact_list_title,null);
 }else{
 if(convertview==null){
 convertview= layoutinflater.from(context).inflate(r.layout.contact_list_group_item,null);
 vh = new viewholder();
 vh.tv = (textview) convertview.findviewbyid(r.id.group_tv);
 convertview.settag(vh);
 }
 vh = (viewholder) convertview.gettag();

 vh.tv.settext(group[groupposition]);
 }
 return convertview;
 }
 @override
 public view getchildview(int groupposition, int childposition, boolean islastchild, view convertview, viewgroup parent) {
 viewholder vh;
 //expandablelist的第一个分组没有组名，这里需要自定义布局
 if (groupposition==0){
 convertview =layoutinflater.from(context).inflate(r.layout.contact_list_title,null);
 }else{
 if(convertview==null){
 convertview= layoutinflater.from(context).inflate(r.layout.contact_list_item,null);
 vh = new viewholder();
 vh.tv = (textview) convertview.findviewbyid(r.id.contact_item_tv);
 vh.iv= (imageview) convertview.findviewbyid(r.id.contact_item_iv);
 convertview.settag(vh);
 }
 vh = (viewholder) convertview.gettag();
 vh.tv.settext(itemname[groupposition][childposition]);
 vh.iv.setimageresource(itemicon[groupposition][childposition]);
 }
 return convertview;
 }
 @override
 public boolean ischildselectable(int groupposition, int childposition) {
 return true;
 }
 class viewholder{
 textview tv;
 imageview iv;
 }
}

第六步：java中重写之前的与contactfragment.xml布局对应的contactfragment.java类

import android.os.bundle;
import android.support.annotation.nullable;
import android.support.v4.app.fragment;
import android.view.layoutinflater;
import android.view.view;
import android.view.viewgroup;
import android.widget.expandablelistview;
import com.mly.panhouye.wechat.r;
import com.mly.panhouye.wechat.adapter.myexpandablelistadapter;
/**
 * created by panchengjia on 2016/12/28 0028.
 */
public class contactfragment extends fragment {
 private expandablelistview contact_list;
 //定义分组以及组内成员（设置头文件位置为空）
 string[] group ={"","好友列表"};
 string[][] itemname={{},{"郭嘉", "黄月英", "华佗",
 "刘备", "陆逊", "吕布", "吕蒙", "马超", "司马懿", "孙权", "孙尚香", "夏侯惇",
 "许褚", "杨修", "张飞", "赵云", "甄姬", "周瑜", "诸葛亮"}};
 int[][] itemicon={{},{r.mipmap.guojia,
 r.mipmap.huangyueying, r.mipmap.huatuo,
 r.mipmap.liubei, r.mipmap.luxun, r.mipmap.lvbu, r.mipmap.lvmeng,
 r.mipmap.machao, r.mipmap.simayi, r.mipmap.sunquan, r.mipmap.sunshangxiang,
 r.mipmap.xiahoudun, r.mipmap.xuchu, r.mipmap.yangxiu, r.mipmap.zhangfei,
 r.mipmap.zhaoyun, r.mipmap.zhenji, r.mipmap.zhouyu, r.mipmap.zhugeliang}};
 @override
 public view oncreateview(layoutinflater inflater, @nullable viewgroup container, @nullable bundle savedinstancestate) {
 view view = inflater.inflate(r.layout.contact_fragment,container,false);
 contact_list = (expandablelistview) view.findviewbyid(r.id.contact_list);
 //实例化适配器
 myexpandablelistadapter myexpandablelistadapter=new myexpandablelistadapter(getcontext(),group,itemname,itemicon);
 //配置适配器
 contact_list.setadapter(myexpandablelistadapter);
 //去掉expandablelistview 默认的箭头
 contact_list.setgroupindicator(null);
 //设置expandablelistview默认展开
 for (int i = 0; i <group.length; i++) {
 contact_list.expandgroup(i);
 }
 //设置expandablelistview不可点击收回
 contact_list.setongroupclicklistener(new expandablelistview.ongroupclicklistener() {
 @override
 public boolean ongroupclick(expandablelistview parent, view v, int groupposition, long id) {
 return true;
 }
 });
 return view;
 }
}

实现方法很多大家开动吧(建议使用recyclerview)。

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！