转载请标明出处:
http://www.cnblogs.com/dingxiansen/p/8194669.html
本文出自:丁先森-博客园html
最近在项目中要使用ExpandableListView来实现一个下面这种效果android
效果描述:这个要求的是点击一个时展开点击的哪一项,其他的都关闭(互斥效果),要实现点击时切换字体的颜色。json
还没写的时候在网上看了一下,什么资源都有,也无论能不能实现就贴代码,要分下demo,可是充了币下载下来,呵呵,不是本身要的那种效果。ide
下面的gif是我实现的效果(真实效果)函数
看完效果图,开始说怎么实现的布局
数据源,这里我使用的是真实数据截取出来的json,首先先看一下学习
[{"id":117,"area_name":"昌平区","cinemas":[{"id":"1","cinema_name":"DMC昌平保利影剧院","cinema_address":"昌平区鼓楼南街佳莲时代广场4楼","area_id":"117","area_name":"昌平区","logo":"http:\/\/img.komovie.cn\/cinema\/14205106672446.jpg"},{"id":"2","cinema_name":"保利国际影城-龙旗广场店","cinema_address":"昌平区黄平路19号院3号楼龙旗购物中心3楼","area_id":"117","area_name":"昌平区","logo":"http:\/\/img.komovie.cn\/cinema\/14203529883434.jpg"}]},{"id":109,"area_name":"朝阳区","cinemas":[{"id":"7","cinema_name":"北京剧院","cinema_address":"朝阳区安慧里三区10号","area_id":"109","area_name":"朝阳区","logo":"http:\/\/img.komovie.cn\/cinema\/14207675478321.jpg"},{"id":"8","cinema_name":"朝阳剧场","cinema_address":"朝阳区东三环北路36号","area_id":"109","area_name":"朝阳区","logo":"http:\/\/img.komovie.cn\/cinema\/14203512065410.jpg"},{"id":"10","cinema_name":"劲松电影院","cinema_address":"朝阳区劲松中街404号","area_id":"109","area_name":"朝阳区","logo":"http:\/\/img.komovie.cn\/cinema\/14213800192810.jpg"}]},{"id":110,"area_name":"丰台区","cinemas":[{"id":"67","cinema_name":"保利国际影城-大峡谷店","cinema_address":"丰台区南三环西路首地大峡谷购物中心5楼","area_id":"110","area_name":"丰台区","logo":"http:\/\/img.komovie.cn\/cinema\/14203575287090.jpg"},{"id":"68","cinema_name":"保利国际影城-万源店","cinema_address":"丰台区东高地万源北路航天万源广场5楼","area_id":"110","area_name":"丰台区","logo":"http:\/\/img.komovie.cn\/cinema\/14203530487616.jpg"},{"id":"69","cinema_name":"恒业国际影城-北京六里桥店","cinema_address":"北京市丰台区万丰路68号银座和谐广场购物中心5层\t","area_id":"110","area_name":"丰台区","logo":""}]}]
数据格式是这样的字体
地区对象中包含一个影院集合。this
看完了数据格式,下面就来看代码实现效果和问题spa
第一个效果:互斥效果,展开当前点击的,关闭其余之前打开的
由于点击的是Group,因此要想实现这个效果确定就要在setOnGroupClickListener这个监听中实现
代码以下(这段代码直接就可使用):
private int lastClick = -1;//上一次点击的group的position,定义在全局 // Group点击事件,点击一个Group隐藏其余的(只显示一个) listview.setOnGroupClickListener(new ExpandableListView.OnGroupClickListener() { @Override public boolean onGroupClick(ExpandableListView expandableListView, View view, int i, long l) { if (lastClick == -1) { listview.expandGroup(i); } if (lastClick != -1 && lastClick != i) { listview.collapseGroup(lastClick); listview.expandGroup(i); } else if (lastClick == i) { if (listview.isGroupExpanded(i)) { listview.collapseGroup(i); } else if (!listview.isGroupExpanded(i)) { listview.expandGroup(i); } } lastClick = i; return true; } }); // 子项点击事件 listview.setOnChildClickListener(new ExpandableListView.OnChildClickListener() { @Override public boolean onChildClick(ExpandableListView expandableListView, View view, int parentPos, int childPos, long l) { /* Toast.makeText(ExpandableListViewTestActivity.this, dataset.get(parentList[parentPos]).get(childPos), Toast.LENGTH_SHORT).show();*/ Toast.makeText(getActivity(), datasets.get(PList[parentPos]).get(childPos).getCinema_name() + "影院Id:" + datasets.get(PList[parentPos]).get(childPos).getId() + "区域Id:" + datasets.get(PList[parentPos]).get(childPos).getArea_id(), Toast.LENGTH_SHORT).show(); return true; } }); }
第二个效果,自定义的布局,隐藏左边原始的箭头,右侧显示本身想要实现的箭头或者图片。
隐藏原始箭头,要在布局中设置
android:groupIndicator="@null"
右侧实现本身想要的图片
在Parent布局中设置一个本身想要的图片,不知道网上的其余答案为何那么麻烦
evl_cinema_list_item_cityproper.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#ffffff" android:orientation="horizontal"> <TextView android:id="@+id/parent_title" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_margin="10dp" android:layout_weight="3" android:drawablePadding="5dp" android:text="这是父item" android:textColor="@color/black" android:textSize="18sp" android:textStyle="bold" /> <!-- 这就是本身想要的那个图片--> <ImageView android:id="@+id/parent_img" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="10dp" android:layout_marginTop="10dp" android:layout_weight="0.5" android:src="@mipmap/star_grey" /> </LinearLayout>
相同字布局,也就是二级,你也能够本身定义本身想要的效果,代码实如今Adapter中实现
选中时切换字体在getGroupView方法中,Boolean直接判断,true选中,不然反之,右侧图片也和这个的实现思路同样
代码中都有注释,应该均可以看懂
代码以下:
MyExpandableListViewAdapter
/*适配器*/ private class MyExpandableListViewAdapter extends BaseExpandableListAdapter { // 得到某个父项的某个子项 @Override public Object getChild(int parentPos, int childPos) { return datasets.get(PList[parentPos]).get(childPos); } // 得到父项的数量 @Override public int getGroupCount() { if (datasets == null) { Toast.makeText(getActivity(), "dataset为空", Toast.LENGTH_SHORT).show(); return 0; } return datasets.size(); } // 得到某个父项的子项数目 @Override public int getChildrenCount(int parentPos) { if (datasets.get(PList[parentPos]) == null) { Toast.makeText(getActivity(), "\" + parentList[parentPos] + \" + 数据为空", Toast.LENGTH_SHORT).show(); return 0; } return datasets.get(PList[parentPos]).size(); } // 得到某个父项 @Override public Object getGroup(int parentPos) { return datasets.get(PList[parentPos]); } // 得到某个父项的id @Override public long getGroupId(int parentPos) { return parentPos; } // 得到某个父项的某个子项的id @Override public long getChildId(int parentPos, int childPos) { return childPos; } // 按函数的名字来理解应该是是否具备稳定的id,这个函数目前一直都是返回false,没有去改动过 @Override public boolean hasStableIds() { return false; } // 得到父项显示的view @Override public View getGroupView(int parentPos, boolean b, View view, ViewGroup viewGroup) { if (view == null) { LayoutInflater inflater = (LayoutInflater) getActivity().getSystemService(Context.LAYOUT_INFLATER_SERVICE); view = inflater.inflate(elv_cinema_list_item_cityproper, null); } view.setTag(elv_cinema_list_item_cityproper, parentPos); view.setTag(R.layout.elv_cinema_list_item_cinema, -1); parentText = (TextView) view.findViewById(R.id.parent_title); ImageView parent_img = view.findViewById(R.id.parent_img); // 设置展开和收缩的文字颜色 if (b) { parentText.setTextColor(Color.parseColor("#2FD0B5")); parent_img.setImageResource(R.mipmap.star_yellow); } else { parentText.setTextColor(Color.BLACK); parent_img.setImageResource(R.mipmap.star_grey); } parentText.setText(PList[parentPos]); return view; } // 得到子项显示的view @Override public View getChildView(final int parentPos, final int childPos, boolean b, View view, ViewGroup viewGroup) { if (view == null) { LayoutInflater inflater = (LayoutInflater) getActivity().getSystemService(Context.LAYOUT_INFLATER_SERVICE); view = inflater.inflate(R.layout.elv_cinema_list_item_cinema, null); } view.setTag(elv_cinema_list_item_cityproper, parentPos); view.setTag(R.layout.elv_cinema_list_item_cinema, childPos); TextView text = (TextView) view.findViewById(R.id.child_title); TextView textView = view.findViewById(R.id.child_message); text.setText(datasets.get(PList[parentPos]).get(childPos).getCinema_name()); textView.setText(datasets.get(PList[parentPos]).get(childPos).getCinema_address()); return view; } // 子项是否可选中,若是须要设置子项的点击事件,须要返回true @Override public boolean isChildSelectable(int i, int i1) { return true; } }
这里的adapter我也没有新建一个类存放,大家也能够分离出来,我这个是放在了类中
代码我放到了云盘里,GitHub也很久没往上提交了。就先用这个吧
源码地址:https://pan.baidu.com/s/1kVmZnvT 密码:xu1x
若是连接失效或者其余问题请发送到个人邮箱 dingchao7323@qq.com
感谢您百忙以后查看到个人博客,若是能解决您的问题,个人荣幸,共同窗习,共同进步。