查看: 2866|回复: 0

[Android教程] ExpandableListView的完美实现,JSON数据源,右边自定义图片

发表于 2018-1-20 08:00:04

最近在项目中要使用ExpandableListView来实现一个下面这种效果
图片描述

效果描述:这个要求的是点击一个时展开点击的哪一项,其余的都关闭(互斥效果),要实现点击时切换字体的颜色。

还没写的时候在网上看了一下,什么资源都有,也不管能不能实现就贴代码,要分下demo,但是充了币下载下来,呵呵,不是自己要的那种效果。

下面的gif是我实现的效果(真实效果)
图片描述

看完效果图,开始说怎么实现的

数据源,这里我使用的是真实数据截取出来的json,首先先看一下

  1. [{"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":""}]}]
复制代码

数据格式是这样的
图片描述
地区对象中包含一个影院集合。

看完了数据格式,下面就来看代码实现效果和问题

  第一个效果:互斥效果,展开当前点击的,关闭其他以前打开的

因为点击的是Group,所以要想实现这个效果肯定就要在setOnGroupClickListener这个监听中实现

代码如下(这段代码直接就可以使用):

  1. private int lastClick = -1;//上一次点击的group的position,定义在全局
  2. // Group点击事件,点击一个Group隐藏其他的(只显示一个)
  3. listview.setOnGroupClickListener(new ExpandableListView.OnGroupClickListener() {
  4. @Override
  5. public boolean onGroupClick(ExpandableListView expandableListView, View view, int i, long l) {
  6. if (lastClick == -1) {
  7. listview.expandGroup(i);
  8. }
  9. if (lastClick != -1 && lastClick != i) {
  10. listview.collapseGroup(lastClick);
  11. listview.expandGroup(i);
  12. } else if (lastClick == i) {
  13. if (listview.isGroupExpanded(i)) {
  14. listview.collapseGroup(i);
  15. } else if (!listview.isGroupExpanded(i)) {
  16. listview.expandGroup(i);
  17. }
  18. }
  19. lastClick = i;
  20. return true;
  21. }
  22. });
  23. // 子项点击事件
  24. listview.setOnChildClickListener(new ExpandableListView.OnChildClickListener() {
  25. @Override
  26. public boolean onChildClick(ExpandableListView expandableListView, View view,
  27. int parentPos, int childPos, long l) {
  28. /* Toast.makeText(ExpandableListViewTestActivity.this,
  29. dataset.get(parentList[parentPos]).get(childPos), Toast.LENGTH_SHORT).show();*/
  30. Toast.makeText(getActivity(),
  31. datasets.get(PList[parentPos]).get(childPos).getCinema_name() + "影院Id:" +
  32. datasets.get(PList[parentPos]).get(childPos).getId() + "区域Id:"
  33. + datasets.get(PList[parentPos]).get(childPos).getArea_id(), Toast.LENGTH_SHORT).show();
  34. return true;
  35. }
  36. });
  37. }
复制代码

第二个效果,自定义的布局,隐藏左边原始的箭头,右侧显示自己想要实现的箭头或者图片。
隐藏原始箭头,要在布局中设置

  1. android:groupIndicator="@null"
复制代码

右侧实现自己想要的图片

在Parent布局中设置一个自己想要的图片,不知道网上的其他答案为什么那么麻烦
evl_cinema_list_item_cityproper.xml

  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. android:layout_width="match_parent"
  3. android:layout_height="match_parent"
  4. android:background="#ffffff"
  5. android:orientation="horizontal">
  6. <TextView
  7. android:id="@+id/parent_title"
  8. android:layout_width="0dp"
  9. android:layout_height="wrap_content"
  10. android:layout_margin="10dp"
  11. android:layout_weight="3"
  12. android:drawablePadding="5dp"
  13. android:text="这是父item"
  14. android:textColor="@color/black"
  15. android:textSize="18sp"
  16. android:textStyle="bold" />
  17. <!-- 这就是自己想要的那个图片-->
  18. <ImageView
  19. android:id="@+id/parent_img"
  20. android:layout_width="wrap_content"
  21. android:layout_height="wrap_content"
  22. android:layout_marginBottom="10dp"
  23. android:layout_marginTop="10dp"
  24. android:layout_weight="0.5"
  25. android:src="@mipmap/star_grey" />
  26. </LinearLayout>
复制代码

相同字布局,也就是二级,你也可以自己定义自己想要的效果,代码实现在Adapter中实现

选中时切换字体在getGroupView方法中,Boolean直接判断,true选中,否则反之,右侧图片也和这个的实现思路一样

代码中都有注释,应该都可以看懂

代码如下:

MyExpandableListViewAdapter

  1. /*适配器*/
  2. private class MyExpandableListViewAdapter extends BaseExpandableListAdapter {
  3. // 获得某个父项的某个子项
  4. @Override
  5. public Object getChild(int parentPos, int childPos) {
  6. return datasets.get(PList[parentPos]).get(childPos);
  7. }
  8. // 获得父项的数量
  9. @Override
  10. public int getGroupCount() {
  11. if (datasets == null) {
  12. Toast.makeText(getActivity(), "dataset为空", Toast.LENGTH_SHORT).show();
  13. return 0;
  14. }
  15. return datasets.size();
  16. }
  17. // 获得某个父项的子项数目
  18. @Override
  19. public int getChildrenCount(int parentPos) {
  20. if (datasets.get(PList[parentPos]) == null) {
  21. Toast.makeText(getActivity(), "\" + parentList[parentPos] + \" + 数据为空", Toast.LENGTH_SHORT).show();
  22. return 0;
  23. }
  24. return datasets.get(PList[parentPos]).size();
  25. }
  26. // 获得某个父项
  27. @Override
  28. public Object getGroup(int parentPos) {
  29. return datasets.get(PList[parentPos]);
  30. }
  31. // 获得某个父项的id
  32. @Override
  33. public long getGroupId(int parentPos) {
  34. return parentPos;
  35. }
  36. // 获得某个父项的某个子项的id
  37. @Override
  38. public long getChildId(int parentPos, int childPos) {
  39. return childPos;
  40. }
  41. // 按函数的名字来理解应该是是否具有稳定的id,这个函数目前一直都是返回false,没有去改动过
  42. @Override
  43. public boolean hasStableIds() {
  44. return false;
  45. }
  46. // 获得父项显示的view
  47. @Override
  48. public View getGroupView(int parentPos, boolean b, View view, ViewGroup viewGroup) {
  49. if (view == null) {
  50. LayoutInflater inflater = (LayoutInflater) getActivity().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
  51. view = inflater.inflate(elv_cinema_list_item_cityproper, null);
  52. }
  53. view.setTag(elv_cinema_list_item_cityproper, parentPos);
  54. view.setTag(R.layout.elv_cinema_list_item_cinema, -1);
  55. parentText = (TextView) view.findViewById(R.id.parent_title);
  56. ImageView parent_img = view.findViewById(R.id.parent_img);
  57. // 设置展开和收缩的文字颜色
  58. if (b) {
  59. parentText.setTextColor(Color.parseColor("#2FD0B5"));
  60. parent_img.setImageResource(R.mipmap.star_yellow);
  61. } else {
  62. parentText.setTextColor(Color.BLACK);
  63. parent_img.setImageResource(R.mipmap.star_grey);
  64. }
  65. parentText.setText(PList[parentPos]);
  66. return view;
  67. }
  68. // 获得子项显示的view
  69. @Override
  70. public View getChildView(final int parentPos, final int childPos, boolean b, View view, ViewGroup viewGroup) {
  71. if (view == null) {
  72. LayoutInflater inflater = (LayoutInflater) getActivity().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
  73. view = inflater.inflate(R.layout.elv_cinema_list_item_cinema, null);
  74. }
  75. view.setTag(elv_cinema_list_item_cityproper, parentPos);
  76. view.setTag(R.layout.elv_cinema_list_item_cinema, childPos);
  77. TextView text = (TextView) view.findViewById(R.id.child_title);
  78. TextView textView = view.findViewById(R.id.child_message);
  79. text.setText(datasets.get(PList[parentPos]).get(childPos).getCinema_name());
  80. textView.setText(datasets.get(PList[parentPos]).get(childPos).getCinema_address());
  81. return view;
  82. }
  83. // 子项是否可选中,如果需要设置子项的点击事件,需要返回true
  84. @Override
  85. public boolean isChildSelectable(int i, int i1) {
  86. return true;
  87. }
  88. }
复制代码

这里的adapter我也没有新建一个类存放,你们也可以分离出来,我这个是放在了类中

代码我放到了云盘里,GitHub也好久没往上提交了。就先用这个吧

源码地址:https://pan.baidu.com/s/1kVmZnvT 密码:xu1x

如果链接失效或者其他问题请发送到我的邮箱,邮箱地址在我的个人简介中

感谢您百忙之后查看到我的博客,如果能解决您的问题,我的荣幸,共同学习,共同进步。



回复

使用道具 举报