java 服务器 前端 ExpandableListView编写评论回复功能

整体效果图：

                ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​

        官方解释：ExpandableListView是一种用于垂直滚动展示两级列表的视图，和 ListView 的不同之处就是它可以展示两级列表，分组可以单独展开显示子选项。这些选项的数据是通过ExpandableListAdapter 关联的。

        不懂ExpandableListView的可以看下这篇文章：

Android ExpandableListView使用小结（一） - 简书 (jianshu.com)https://www.jianshu.com/p/9fa82c15fe1e        干活！

        第一步编写ExpandableListView的父列表

 具体XML代码如下：

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">

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">

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"

/>

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:orientation="vertical">

android:id="@+id/iv_name"

android:text="毡帽系列"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:textSize="25sp" />

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" />

android:id="@+id/iv_content_img"

android:layout_width="120dp"

android:layout_height="120dp"

android:src="@drawable/ic_launcher_background"/>

android:id="@+id/iv_t"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_marginTop="5dp">

android:id="@+id/iv_time"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_margin="10dp"

android:text="1小时前" />

android:id="@+id/rl_enroll"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:gravity="right">

android:id="@+id/iv_Thumbs"

android:layout_width="30dp"

android:layout_height="30dp"

android:src="@drawable/ic_launcher_background"/>

android:id="@+id/iv_comments"

android:layout_marginLeft="25dp"

android:layout_width="30dp"

android:layout_height="30dp"

android:src="@drawable/ic_launcher_background"/>

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginBottom="10dp"

android:orientation="horizontal">

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="点赞人数："/>

android:id="@+id/iv_comments_num"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="0"/>

        第二步在MainActivity中绑定id并传值进入adapter中

//MainActivity.java

mExpandableListView = findViewById(R.id.expandablelistview);

List 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

android:orientation="horizontal"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_marginBottom="20dp">

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"/>

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:textSize="16sp"

android:textColor="@color/black"

android:text=" ："/>

android:id="@+id/comment_content"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:textColor="@color/black"

android:textSize="16sp"

android:text="我的世界" />

        到此，差不多就结束了，但最后需要注意，必须传入上下文，很重要！！！那什么是上下文呢？

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 mGroupList;//一级List

String[][] mChildList;//二级List 注意!这里是List里面套了一个List,实际项目你可以写一个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 groupList, String[][] childList,Context mcontext){

mGroupList = groupList;

mChildList = childList;

context = mcontext;

}

        将第二步与上面（用的是context）相比较，将MainAtivity.java中的MainAtivity.this传入到DemoAdapter.java中的context。

        本文结束再强调一下，在绑定id的时候adapter与mainActivity中不一样，具体看上文内容。

        路漫漫其修远兮...

查看原文