整体效果图:
官方解释:ExpandableListView是一种用于垂直滚动展示两级列表的视图,和 ListView 的不同之处就是它可以展示两级列表,分组可以单独展开显示子选项。这些选项的数据是通过ExpandableListAdapter 关联的。
不懂ExpandableListView的可以看下这篇文章:
Android ExpandableListView使用小结(一) - 简书 (jianshu.com)https://www.jianshu.com/p/9fa82c15fe1e 干活!
第一步编写ExpandableListView的父列表
具体XML代码如下:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
tools:ignore="MissingConstraints">
<ImageView
android:id="@+id/iv"
android:layout_marginTop="5dp"
android:layout_marginLeft="5dp"
android:layout_width="50dp"
android:layout_height="50dp"
android:src="@drawable/ic_launcher_background"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="@+id/iv_name"
android:text="毡帽系列"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="25sp" />
<TextView
android:id="@+id/iv_content"
android:text="此系列服装有点cute,像不像小车夫。"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="7dp"
android:textSize="20sp" />
<ImageView
android:id="@+id/iv_content_img"
android:layout_width="120dp"
android:layout_height="120dp"
android:src="@drawable/ic_launcher_background"/>
<LinearLayout
android:id="@+id/iv_t"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp">
<TextView
android:id="@+id/iv_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:text="1小时前" />
<LinearLayout
android:id="@+id/rl_enroll"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="right">
<ImageView
android:id="@+id/iv_Thumbs"
android:layout_width="30dp"
android:layout_height="30dp"
android:src="@drawable/ic_launcher_background"/>
<ImageView
android:id="@+id/iv_comments"
android:layout_marginLeft="25dp"
android:layout_width="30dp"
android:layout_height="30dp"
android:src="@drawable/ic_launcher_background"/>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="点赞人数:"/>
<TextView
android:id="@+id/iv_comments_num"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</RelativeLayout>
第二步在MainActivity中绑定id并传值进入adapter中
//MainActivity.java
mExpandableListView = findViewById(R.id.expandablelistview);
List<String> groupList= Arrays.asList("毡帽系列", "蜗牛系列", "小蜜蜂系列");
String[][] mChildList = {{"评论者1","我是大笨蛋"},{"评论者2","我才是大笨蛋!"}};
DemoAdapter demoAdapter = new DemoAdapter(groupList, mChildList, MainActivity.this);
mExpandableListView.setAdapter(demoAdapter);
第三步在其自定义的adapter中进行父列表和子列表的视图显示
//DemoAdapter.java
//父列表视图显示
@Override
public View getGroupView(int groupPosition, boolean isExpanded, View convertView, ViewGroup parent) {
//加载布局文件
View view = View.inflate(parent.getContext(), R.layout.list_item,null);
name= (TextView) view.findViewById(R.id.iv_name);
content = (TextView) view.findViewById(R.id.iv_content);
iv = (ImageView) view.findViewById(R.id.iv);
name.setText(mGroupList.get(groupPosition));
content.setText(mGroupList.get(groupPosition));
iv.setBackgroundResource(ivs[groupPosition]);
iv = view.findViewById(R.id.iv);
iv.setOnClickListener(this);
return view;
}
//DemoAdapter.java
//子列表视图显示
@Override
public View getChildView(int groupPosition, int childPosition, boolean isLastChild, View convertView, ViewGroup parent) {
//加载布局文件
View view = View.inflate(parent.getContext(), R.layout.item_comment,null);
TextView name = (TextView) view.findViewById(R.id.comment_name);
TextView content = (TextView) view.findViewById(R.id.comment_content);
name.setText(mChildList[childPosition][0]);
content.setText(mChildList[childPosition][1]);
return view;
}
是不是发现评论没有呢?是的,因为在getChildView中已经绑定了R.layout.item_comment的XML文件,子列表相当于ListView,故再写该R.layout.item_comment文件的XML,即可显示在子列表的视图上。
//R.layout.item_comment.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp">
<TextView
android:id="@+id/comment_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@color/black"
android:textSize="16sp"
android:text="评论者1"
android:layout_marginLeft="55dp"
android:layout_marginRight="3dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="16sp"
android:textColor="@color/black"
android:text=" :"/>
<TextView
android:id="@+id/comment_content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@color/black"
android:textSize="16sp"
android:text="我的世界" />
</LinearLayout>
到此,差不多就结束了,但最后需要注意,必须传入上下文,很重要!!!那什么是上下文呢?
1.在Activity中可以直接调用getApplicationContext(),
Activity.this/context获取相应的context。
2.在Fragment中的使用方式则为:
1.getActivity();
//获取包含该fragment的活动(activity)上下文
2.getContext();
//获取该fragment上下文
3.getActivity().getApplicationContext();
//通过包含该fragment的活动(activity)获取整个应用的上下文
4.getContext().getApplicationContext();
//通过该fragment获取整个应用的上下文
//DemoAdapter.java
Context context;
List<String> mGroupList;//一级List
String[][] mChildList;//二级List 注意!这里是List里面套了一个List<String>,实际项目你可以写一个pojo类来管理2层数据
ImageView iv,iv_Thumbs,iv_comments,iv_content_img;
TextView name,content,iv_name,iv_content,iv_time,iv_comment_num;
public DemoAdapter(List<String> groupList, String[][] childList,Context mcontext){
mGroupList = groupList;
mChildList = childList;
context = mcontext;
}
将第二步与上面(用的是context)相比较,将MainAtivity.java中的MainAtivity.this传入到DemoAdapter.java中的context。
本文结束再强调一下,在绑定id的时候adapter与mainActivity中不一样,具体看上文内容。
路漫漫其修远兮...